import { useState } from 'react';
import { CheckCircle2, MapPin } from 'lucide-react';
import { CAREER_ROLES, SITE } from '../data/content';
import { PageHero } from '../components/ui/SectionHeading';
import { FadeIn } from '../components/ui/Motion';
import { Button } from '../components/ui/Button';
import { JobApplyModal } from '../components/ui/JobApplyModal';

export function CareerPage() {
  const [selectedRole, setSelectedRole] = useState<typeof CAREER_ROLES[0] | null>(null);

  const benefits = [
    { title: 'Above-Award Pay', desc: 'Competitive SCHADS award rates with weekend penalties & salary packaging options.' },
    { title: 'Flexible Rostering', desc: 'Work around your family, studies, or personal life with flexible shift choices.' },
    { title: 'Ongoing Training', desc: 'Paid clinical training, CPR refreshers, and professional development support.' },
    { title: 'Supportive Culture', desc: 'A warm, inclusive care team that treats support staff with respect and dignity.' },
  ];

  return (
    <>
      <PageHero
        title="Careers & Opportunities"
        subtitle="Join a team that puts participants first — flexible disability & support roles across Victoria."
      />

      {/* Benefits Grid */}
      <section className="px-4 py-12 border-b border-theme bg-[var(--color-bg-alt)]">
        <div className="mx-auto max-w-7xl">
          <div className="text-center mb-10">
            <span className="text-xs font-bold uppercase tracking-wider text-primary">Why Work With Embrace</span>
            <h2 className="text-2xl md:text-3xl font-bold text-[var(--color-text)] mt-1">
              Empowering Support Workers & Coordinators
            </h2>
          </div>

          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
            {benefits.map((b) => (
              <div key={b.title} className="rounded-2xl border border-theme bg-surface p-5 shadow-sm space-y-2">
                <h3 className="font-bold text-sm text-primary">{b.title}</h3>
                <p className="text-xs text-muted leading-relaxed">{b.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Open Roles */}
      <section className="px-4 py-16">
        <div className="mx-auto max-w-4xl space-y-8">
          <div className="border-b border-theme pb-4">
            <h2 className="text-2xl font-bold text-[var(--color-text)]">Current Open Positions</h2>
            <p className="text-xs text-muted">Positions available across Metropolitan Melbourne, Geelong, and surrounds.</p>
          </div>

          {CAREER_ROLES.map((role, i) => (
            <FadeIn key={role.id} delay={i * 0.08}>
              <div className="rounded-3xl border border-theme bg-[var(--color-surface)] p-6 md:p-8 shadow-sm transition-all hover:border-primary hover:shadow-xl space-y-4">
                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                  <div>
                    <span className="rounded-full bg-primary/10 px-3 py-1 text-[10px] font-bold text-primary uppercase tracking-wider">
                      {role.type}
                    </span>
                    <h3 className="mt-2 text-xl font-bold text-[var(--color-text)]">{role.title}</h3>
                    <p className="text-xs text-muted flex items-center gap-2 mt-1">
                      <MapPin className="h-3.5 w-3.5 text-primary" /> {role.location}
                      {role.salary && <span className="font-semibold text-secondary">· {role.salary}</span>}
                    </p>
                  </div>

                  <Button onClick={() => setSelectedRole(role)} className="shrink-0">
                    Apply Now
                  </Button>
                </div>

                <p className="text-xs text-muted leading-relaxed">{role.description}</p>

                {role.requirements && (
                  <div className="pt-3 border-t border-theme/60">
                    <p className="text-xs font-bold text-[var(--color-text)] mb-2">Key Requirements:</p>
                    <ul className="grid gap-1.5 sm:grid-cols-2 text-xs text-muted">
                      {role.requirements.map((req) => (
                        <li key={req} className="flex items-start gap-1.5">
                          <CheckCircle2 className="h-3.5 w-3.5 text-primary shrink-0 mt-0.5" />
                          <span>{req}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                )}
              </div>
            </FadeIn>
          ))}

          <FadeIn className="mt-8 rounded-3xl bg-[color-mix(in_srgb,var(--color-primary)_8%,transparent)] p-6 text-center border border-theme">
            <p className="text-xs text-muted">
              Don't see your specific role? Send your CV & cover letter directly to{' '}
              <a href={`mailto:${SITE.email}`} className="font-bold text-primary hover:underline">
                {SITE.email}
              </a>
            </p>
          </FadeIn>
        </div>
      </section>

      <JobApplyModal role={selectedRole} onClose={() => setSelectedRole(null)} />
    </>
  );
}