import {
  ShieldCheck,
  ArrowRight,
  PlayCircle,
  CheckCircle2,
  Plane,
  Languages,
  GraduationCap,
  FileText,
  AlertTriangle,
} from "lucide-react";

function ScoreRing() {
  // r = 46 -> circumference ~289. 78% fill -> offset ~64
  return (
    <div className="relative grid h-[120px] w-[120px] shrink-0 place-items-center">
      <svg className="h-[120px] w-[120px] -rotate-90" viewBox="0 0 110 110">
        <circle
          cx="55"
          cy="55"
          r="46"
          fill="none"
          stroke="rgba(255,255,255,0.12)"
          strokeWidth="9"
        />
        <circle
          cx="55"
          cy="55"
          r="46"
          fill="none"
          stroke="#1F9D68"
          strokeWidth="9"
          strokeLinecap="round"
          strokeDasharray="289"
          className="animate-ring"
        />
      </svg>
      <div className="absolute flex flex-col items-center">
        <span className="font-display text-3xl font-700 leading-none text-white">
          78%
        </span>
        <span className="mt-1 text-[10px] font-semibold uppercase tracking-wider text-emerald-100/80">
          Ready
        </span>
      </div>
    </div>
  );
}

function StatusRow({
  icon,
  label,
  value,
  tone,
}: {
  icon: React.ReactNode;
  label: string;
  value: string;
  tone: "ready" | "gather" | "attorney";
}) {
  const toneClass =
    tone === "ready"
      ? "bg-emerald-500/15 text-emerald-200"
      : tone === "gather"
      ? "bg-gold/15 text-gold-50"
      : "bg-danger/20 text-danger-50";
  return (
    <div className="flex items-center justify-between gap-3 rounded-xl bg-white/[0.04] px-3.5 py-3">
      <div className="flex items-center gap-2.5">
        <span className="text-cream/60">{icon}</span>
        <span className="text-sm font-medium text-cream/85">{label}</span>
      </div>
      <span
        className={`rounded-full px-2.5 py-1 text-[11px] font-semibold ${toneClass}`}
      >
        {value}
      </span>
    </div>
  );
}

export default function Hero() {
  return (
    <section
      id="top"
      className="grain relative overflow-hidden bg-navy bg-navy-glow pt-28 md:pt-36"
    >
      {/* soft horizon at the bottom to blend into cream */}
      <div className="pointer-events-none absolute inset-x-0 bottom-0 h-32 bg-gradient-to-b from-transparent to-cream/5" />

      <div className="container-px relative grid items-center gap-14 pb-20 lg:grid-cols-[1.05fr_0.95fr] lg:gap-10 lg:pb-28">
        {/* Left: copy */}
        <div>
          <div className="animate-fadeUp eyebrow-dark" style={{ animationDelay: "60ms" }}>
            <ShieldCheck className="h-3.5 w-3.5" />
            Self-help citizenship prep · Spanish-first
          </div>

          <h1
            className="animate-fadeUp mt-6 max-w-2xl text-balance text-4xl font-600 leading-[1.08] text-white sm:text-5xl lg:text-[3.6rem]"
            style={{ animationDelay: "140ms" }}
          >
            Green card holder?{" "}
            <span className="text-gold">Get citizenship-ready</span> in 7 days.
          </h1>

          <p
            className="animate-fadeUp mt-6 max-w-xl text-lg leading-relaxed text-cream/75"
            style={{ animationDelay: "220ms" }}
          >
            CitizenPilot helps you understand the naturalization process, check
            the general requirements, count your travel days, organize your own
            documents, and practice for the civics test and interview — with
            Spanish-first guidance every step of the way.
          </p>

          <div
            className="animate-fadeUp mt-8 flex flex-col gap-3 sm:flex-row sm:items-center"
            style={{ animationDelay: "300ms" }}
          >
            <a href="#pricing" className="btn btn-lg btn-gold">
              Start My Readiness Check
              <ArrowRight className="h-4 w-4" />
            </a>
            <a href="#how-it-works" className="btn btn-lg btn-ghost-light">
              <PlayCircle className="h-4 w-4" />
              See how it works
            </a>
          </div>

          <p
            className="animate-fadeUp mt-7 max-w-lg text-xs leading-relaxed text-cream/45"
            style={{ animationDelay: "380ms" }}
          >
            Not a law firm. Not a government website. We provide self-help
            educational tools and civics practice — we don&apos;t give legal
            advice or prepare, review, or file immigration forms. USCIS forms
            are free at{" "}
            <span className="font-medium text-cream/70">USCIS.gov</span>.
          </p>
        </div>

        {/* Right: dashboard mockup */}
        <div
          className="animate-fadeUp relative mx-auto w-full max-w-md"
          style={{ animationDelay: "260ms" }}
        >
          {/* floating accent chips */}
          <div className="absolute -left-4 top-10 z-10 hidden animate-float rounded-2xl border border-white/10 bg-navy-700/80 px-3.5 py-2.5 shadow-lift backdrop-blur md:block">
            <div className="flex items-center gap-2">
              <CheckCircle2 className="h-4 w-4 text-emerald-400" />
              <span className="text-xs font-semibold text-cream/90">
                Filing window: eligible now
              </span>
            </div>
          </div>

          <div className="relative rounded-3xl border border-white/10 bg-gradient-to-b from-navy-700/90 to-navy-800/95 p-5 shadow-lift backdrop-blur sm:p-6">
            {/* card header */}
            <div className="flex items-center justify-between">
              <div>
                <p className="text-[11px] font-semibold uppercase tracking-wider text-cream/50">
                  Your readiness snapshot
                </p>
                <p className="mt-0.5 font-display text-lg font-600 text-white">
                  María&apos;s citizenship plan
                </p>
              </div>
              <span className="pill bg-emerald-500/15 text-emerald-200">
                <span className="h-1.5 w-1.5 rounded-full bg-emerald-400" />
                On track
              </span>
            </div>

            {/* score */}
            <div className="mt-5 flex items-center gap-5 rounded-2xl bg-white/[0.03] p-4">
              <ScoreRing />
              <div className="space-y-1.5 text-sm">
                <p className="font-semibold text-white">You&apos;re close.</p>
                <p className="leading-snug text-cream/60">
                  A few documents to gather and some civics practice to go.
                </p>
              </div>
            </div>

            {/* status rows */}
            <div className="mt-4 space-y-2.5">
              <StatusRow
                icon={<CheckCircle2 className="h-4 w-4" />}
                label="Eligibility window"
                value="On track"
                tone="ready"
              />
              <StatusRow
                icon={<FileText className="h-4 w-4" />}
                label="Documents to organize"
                value="3 to gather"
                tone="gather"
              />
              <StatusRow
                icon={<Plane className="h-4 w-4" />}
                label="Travel days outside U.S."
                value="Counted"
                tone="gather"
              />
              <StatusRow
                icon={<AlertTriangle className="h-4 w-4" />}
                label="Background topics"
                value="Talk to attorney"
                tone="attorney"
              />
              <StatusRow
                icon={<GraduationCap className="h-4 w-4" />}
                label="Civics practice"
                value="12 / 100"
                tone="gather"
              />
              <StatusRow
                icon={<Languages className="h-4 w-4" />}
                label="Spanish support"
                value="Available"
                tone="ready"
              />
            </div>

            <p className="mt-4 text-center text-[10px] leading-relaxed text-cream/35">
              Sample snapshot for illustration. General self-help summary — not
              legal advice or a decision about any case.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}