'use client'

import { Header } from '@/components/Header'
import { Footer } from '@/components/Footer'
import { Briefcase, MapPin, Clock, ArrowRight, Code, Palette, LineChart, Users, Heart, Coffee, Laptop, Globe } from 'lucide-react'
import Link from 'next/link'

const openPositions = [
  {
    title: 'Senior Backend Engineer',
    department: 'Engineering',
    location: 'Remote (Europe)',
    type: 'Full-time',
    description: 'Build and scale our domain intelligence infrastructure using Python and FastAPI.',
    icon: Code,
  },
  {
    title: 'Frontend Developer',
    department: 'Engineering',
    location: 'Remote (Worldwide)',
    type: 'Full-time',
    description: 'Create beautiful, performant user interfaces with React and Next.js.',
    icon: Palette,
  },
  {
    title: 'Data Engineer',
    department: 'Data',
    location: 'Zurich, Switzerland',
    type: 'Full-time',
    description: 'Design data pipelines for domain pricing and market analytics.',
    icon: LineChart,
  },
  {
    title: 'Customer Success Manager',
    department: 'Customer Success',
    location: 'Remote (Europe)',
    type: 'Full-time',
    description: 'Help our customers succeed and get the most out of pounce.',
    icon: Users,
  },
]

const benefits = [
  {
    icon: Globe,
    title: 'Remote-First',
    description: 'Work from anywhere in the world with flexible hours.',
  },
  {
    icon: Heart,
    title: 'Health & Wellness',
    description: 'Comprehensive health insurance and wellness budget.',
  },
  {
    icon: Coffee,
    title: 'Learning Budget',
    description: 'Annual budget for courses, conferences, and books.',
  },
  {
    icon: Laptop,
    title: 'Equipment',
    description: 'Top-of-the-line hardware and home office setup.',
  },
]

const values = [
  'We ship fast and iterate based on feedback',
  'We value transparency and open communication',
  'We prioritize user experience over features',
  'We believe in work-life balance',
]

export default function CareersPage() {
  return (
    <div className="min-h-screen bg-background relative flex flex-col">
      {/* Ambient glow */}
      <div className="fixed inset-0 pointer-events-none">
        <div className="absolute top-0 right-1/4 w-[500px] h-[400px] bg-accent/[0.02] rounded-full blur-3xl" />
      </div>

      <Header />

      <main className="relative pt-32 sm:pt-36 pb-20 px-4 sm:px-6 flex-1">
        <div className="max-w-5xl mx-auto">
          {/* Hero */}
          <div className="text-center mb-16 sm:mb-20 animate-fade-in">
            <div className="inline-flex items-center gap-2 px-3 py-1.5 bg-background-secondary/80 backdrop-blur-sm border border-border rounded-full mb-6">
              <Briefcase className="w-4 h-4 text-accent" />
              <span className="text-ui-sm text-foreground-muted">Join Our Team</span>
            </div>
            <h1 className="font-display text-[2.25rem] sm:text-[3rem] md:text-[3.75rem] leading-[1.1] tracking-[-0.035em] text-foreground mb-6">
              Build the future of
              <br />
              <span className="text-foreground-muted">domain intelligence</span>
            </h1>
            <p className="text-body-lg text-foreground-muted max-w-2xl mx-auto">
              We're a small, focused team building tools that help thousands of people 
              monitor and acquire valuable domains. Join us.
            </p>
          </div>

          {/* Values */}
          <div className="mb-16 p-8 sm:p-10 bg-gradient-to-br from-accent/10 via-accent/5 to-transparent border border-accent/20 rounded-2xl animate-slide-up">
            <h2 className="text-heading-sm font-medium text-foreground mb-6">How We Work</h2>
            <ul className="grid sm:grid-cols-2 gap-3">
              {values.map((value) => (
                <li key={value} className="flex items-center gap-3 text-body text-foreground-muted">
                  <div className="w-1.5 h-1.5 rounded-full bg-accent shrink-0" />
                  {value}
                </li>
              ))}
            </ul>
          </div>

          {/* Benefits */}
          <section className="mb-16">
            <h2 className="text-heading-sm font-medium text-foreground mb-8 text-center">Benefits & Perks</h2>
            <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
              {benefits.map((benefit, i) => (
                <div
                  key={benefit.title}
                  className="p-6 bg-background-secondary/50 border border-border rounded-xl animate-slide-up"
                  style={{ animationDelay: `${i * 50}ms` }}
                >
                  <div className="w-10 h-10 bg-background-tertiary rounded-lg flex items-center justify-center mb-4">
                    <benefit.icon className="w-5 h-5 text-accent" />
                  </div>
                  <h3 className="text-body font-medium text-foreground mb-1">{benefit.title}</h3>
                  <p className="text-body-sm text-foreground-muted">{benefit.description}</p>
                </div>
              ))}
            </div>
          </section>

          {/* Open Positions */}
          <section className="mb-16">
            <h2 className="text-heading-sm font-medium text-foreground mb-8 text-center">
              Open Positions
            </h2>
            <div className="space-y-4">
              {openPositions.map((position, i) => (
                <div
                  key={position.title}
                  className="group p-6 bg-background-secondary/50 border border-border rounded-xl hover:border-border-hover transition-all duration-300 animate-slide-up"
                  style={{ animationDelay: `${i * 50}ms` }}
                >
                  <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                    <div className="flex items-start gap-4">
                      <div className="w-12 h-12 bg-background-tertiary rounded-xl flex items-center justify-center shrink-0 group-hover:bg-accent/10 transition-colors">
                        <position.icon className="w-6 h-6 text-foreground-muted group-hover:text-accent transition-colors" />
                      </div>
                      <div>
                        <h3 className="text-body-lg font-medium text-foreground mb-1 group-hover:text-accent transition-colors">
                          {position.title}
                        </h3>
                        <p className="text-body-sm text-foreground-muted mb-3">{position.description}</p>
                        <div className="flex flex-wrap items-center gap-3">
                          <span className="text-ui-xs text-accent bg-accent-muted px-2 py-0.5 rounded-full">
                            {position.department}
                          </span>
                          <span className="flex items-center gap-1 text-ui-xs text-foreground-subtle">
                            <MapPin className="w-3 h-3" />
                            {position.location}
                          </span>
                          <span className="flex items-center gap-1 text-ui-xs text-foreground-subtle">
                            <Clock className="w-3 h-3" />
                            {position.type}
                          </span>
                        </div>
                      </div>
                    </div>
                    <Link
                      href={`mailto:careers@pounce.dev?subject=Application: ${position.title}`}
                      className="shrink-0 flex items-center gap-2 px-5 py-2.5 bg-foreground text-background font-medium rounded-xl hover:bg-foreground/90 transition-all"
                    >
                      Apply
                      <ArrowRight className="w-4 h-4" />
                    </Link>
                  </div>
                </div>
              ))}
            </div>
          </section>

          {/* CTA */}
          <section className="text-center p-8 sm:p-10 bg-background-secondary/30 border border-border rounded-2xl animate-slide-up">
            <h3 className="text-heading-sm font-medium text-foreground mb-3">
              Don't see the right role?
            </h3>
            <p className="text-body text-foreground-muted mb-6 max-w-lg mx-auto">
              We're always looking for talented people. Send us your resume 
              and we'll keep you in mind for future opportunities.
            </p>
            <Link
              href="mailto:careers@pounce.dev?subject=General Application"
              className="inline-flex items-center gap-2 px-6 py-3 bg-accent text-background font-medium rounded-xl hover:bg-accent-hover transition-all"
            >
              Send General Application
              <ArrowRight className="w-4 h-4" />
            </Link>
          </section>
        </div>
      </main>

      <Footer />
    </div>
  )
}

