import Link from "next/link";
import {
  ArrowRight,
  Boxes,
  Code2,
  GitBranch,
  Lightbulb,
  MessageSquare,
  PenTool,
  Rocket,
  Sparkles,
  Users,
} from "lucide-react";

export default function CareerHero() {
  return (
    <section
      className="relative overflow-x-clip pt-32 pb-20 sm:pt-36 lg:pt-44 lg:pb-32"
    >
      <HeroBackground />

      <div className="container">
        <div className="grid grid-cols-[minmax(0,1fr)] items-center gap-16 lg:grid-cols-[minmax(0,50fr)_minmax(0,50fr)] lg:gap-10">
          <div>
            <p className="inline-flex animate-fade-up items-center gap-2 rounded-full border border-accent/20 bg-accent-50 px-3.5 py-1.5 text-xs font-semibold uppercase tracking-[0.18em] text-accent-600">
              <span className="h-1.5 w-1.5 rounded-full bg-accent" />
              Careers
            </p>

            <h1 className="mt-5 animate-fade-up font-display text-[2.5rem] font-extrabold leading-[1.05] tracking-tight text-[#0F172A] [animation-delay:0.12s] sm:text-6xl lg:text-[3.4rem] xl:text-[4rem]">
              Build Your Future{" "}
              <span className="relative inline-block text-accent">
                With Us
                <svg
                  viewBox="0 0 300 12"
                  preserveAspectRatio="none"
                  className="absolute -bottom-1.5 left-0 h-2.5 w-full text-accent/40"
                  fill="none"
                  aria-hidden="true"
                >
                  <path
                    d="M2 9C60 3 240 3 298 7"
                    stroke="currentColor"
                    strokeWidth="3"
                    strokeLinecap="round"
                  />
                </svg>
              </span>
            </h1>

            <p className="mt-7 max-w-lg animate-fade-up text-lg leading-[1.75] text-ink-300 [animation-delay:0.26s]">
              Join a team of passionate people building innovative digital
              products and technology solutions that make a real impact.
            </p>

            <div className="mt-9 flex animate-fade-up flex-col gap-3 [animation-delay:0.4s] sm:flex-row sm:items-center">
              <Link
                href="#open-positions"
                className="group inline-flex min-h-12 items-center justify-center gap-2 rounded-full bg-accent-600 px-7 py-3.5 text-sm font-semibold text-white shadow-glow-sm transition-all duration-300 ease-out hover:-translate-y-0.5 hover:bg-accent-700 hover:shadow-[0_0_0_1px_rgba(0,148,238,0.2),0_14px_36px_-6px_rgba(0,148,238,0.5)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 motion-reduce:hover:translate-y-0"
              >
                View Open Positions
                <ArrowRight className="h-4 w-4 transition-transform duration-300 group-hover:translate-x-1" />
              </Link>
              <Link
                href="#why"
                className="group inline-flex min-h-12 items-center justify-center gap-2 rounded-full border border-slate-300 bg-white px-7 py-3.5 text-sm font-semibold text-[#0F172A] transition-all duration-300 ease-out hover:-translate-y-0.5 hover:border-accent/50 hover:bg-accent-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 motion-reduce:hover:translate-y-0"
              >
                Why Join Us
                <ArrowRight className="h-4 w-4 transition-transform duration-300 group-hover:translate-x-1" aria-hidden />
              </Link>
            </div>
          </div>

          <div className="animate-fade-up [animation-delay:0.55s]">
            <ProductVisual />
          </div>
        </div>
      </div>

    </section>
  );
}

function HeroBackground() {
  return <div aria-hidden="true" className="pointer-events-none absolute inset-0 -z-10 bg-gradient-to-b from-white via-accent-50/50 to-white" />;
}

/** Abstract layered product-development composition: Product · Design · Engineering · Collaboration. */
function ProductVisual() {
  return (
    <div className="relative mx-auto h-100 w-full max-w-136 sm:h-120 lg:h-128 lg:max-w-none">
      {/* Product — main card */}
      <div className="absolute left-[16%] top-[20%] z-10 w-[62%]">
        <div
          className="animate-float-card-a"
          style={{ animationDuration: "9s" }}
        >
          <div className="rounded-3xl border border-slate-200 bg-white p-4 shadow-[0_28px_60px_-24px_rgba(0,148,238,0.4),0_2px_6px_rgba(15,23,42,0.05)] sm:p-5">
            <div className="flex items-center gap-2.5">
              <span className="flex h-9 w-9 items-center justify-center rounded-xl bg-accent/10 text-accent">
                <Boxes className="h-4.5 w-4.5" strokeWidth={1.75} />
              </span>
              <div>
                <p className="text-xs font-semibold text-[#0F172A]">Product</p>
                <p className="text-[11px] text-ink-400">Roadmap · Q3</p>
              </div>
            </div>
            <div className="mt-4 space-y-2.5">
              {[88, 64, 40].map((w, i) => (
                <div
                  key={i}
                  className="h-2 overflow-hidden rounded-full bg-slate-100"
                >
                  <div
                    className="h-full rounded-full bg-linear-to-r from-accent to-accent-300"
                    style={{ width: `${w}%` }}
                  />
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Design */}
      <div className="absolute right-[2%] top-[4%] z-20 w-[40%] sm:w-[36%]">
        <div className="animate-float-card-b">
          <div className="rounded-2xl border border-slate-200/80 bg-white p-3.5 shadow-card">
            <div className="flex items-center gap-2">
              <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-accent-50 text-accent">
                <PenTool className="h-4 w-4" strokeWidth={1.75} />
              </span>
              <p className="text-xs font-semibold text-[#0F172A]">Design</p>
            </div>
            <div className="mt-3 flex gap-1.5">
              <span className="h-5 flex-1 rounded-md bg-accent" />
              <span className="h-5 flex-1 rounded-md bg-accent-300" />
              <span className="h-5 flex-1 rounded-md bg-accent-100" />
            </div>
          </div>
        </div>
      </div>

      {/* Engineering */}
      <div className="absolute bottom-[6%] left-[0%] z-20 w-[52%] sm:w-[46%]">
        <div className="animate-float-card-c">
          <div className="overflow-hidden rounded-2xl border border-slate-700/80 bg-[#0C1322] p-3.5 shadow-[0_20px_44px_-18px_rgba(12,19,34,0.6)]">
            <div className="flex items-center gap-2 text-slate-300">
              <Code2 className="h-4 w-4 text-accent" strokeWidth={1.75} />
              <p className="text-xs font-semibold">Engineering</p>
            </div>
            <div className="mt-3 space-y-1.5 font-mono text-[10px] leading-none">
              <p className="text-accent-300">
                git <span className="text-emerald-300">merge</span>{" "}
                <span className="text-slate-300">release</span>
              </p>
              <p className="text-slate-500">✓ 128 tests passed</p>
            </div>
          </div>
        </div>
      </div>

      {/* Collaboration */}
      <div className="absolute bottom-[2%] right-[0%] z-20 w-[48%] sm:w-[42%]">
        <div
          className="animate-float-card-a"
          style={{ animationDuration: "8s" }}
        >
          <div className="rounded-2xl border border-slate-200/80 bg-white p-3.5 shadow-card">
            <div className="flex items-center gap-2">
              <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-accent-50 text-accent">
                <Users className="h-4 w-4" strokeWidth={1.75} />
              </span>
              <p className="text-xs font-semibold text-[#0F172A]">
                Collaboration
              </p>
            </div>
            <div className="mt-3 flex items-center">
              <span className="-mr-1.5 h-6 w-6 rounded-full border-2 border-white bg-accent" />
              <span className="-mr-1.5 h-6 w-6 rounded-full border-2 border-white bg-accent-300" />
              <span className="-mr-1.5 h-6 w-6 rounded-full border-2 border-white bg-accent-200" />
              <span className="ml-3 inline-flex items-center gap-1 rounded-full bg-accent-50 px-2 py-1 text-[10px] font-medium text-accent-700">
                <MessageSquare className="h-3 w-3" /> Review
              </span>
            </div>
          </div>
        </div>
      </div>

      {/* Floating icons */}
      {[
        {
          Icon: Sparkles,
          cls: "left-[4%] top-[6%]",
          delay: "0s",
          anim: "animate-float-card-b",
        },
        {
          Icon: Rocket,
          cls: "left-[44%] top-[-1%]",
          delay: "-2s",
          anim: "animate-float-card-c",
        },
        {
          Icon: GitBranch,
          cls: "right-[-2%] top-[46%]",
          delay: "-4s",
          anim: "animate-float-card-a",
        },
        {
          Icon: Lightbulb,
          cls: "left-[42%] bottom-[-2%]",
          delay: "-6s",
          anim: "animate-float-card-b",
        },
      ].map(({ Icon, cls, delay, anim }, i) => (
        <span
          key={i}
          aria-hidden="true"
          className={`absolute z-30 hidden h-10 w-10 items-center justify-center rounded-xl border border-slate-200 bg-white text-accent shadow-card sm:flex ${cls} ${anim}`}
          style={{ animationDelay: delay }}
        >
          <Icon className="h-4.5 w-4.5" strokeWidth={1.75} />
        </span>
      ))}
    </div>
  );
}