"use client";

import { useState } from "react";
import Container from "@/components/ui/Container";
import { ShieldAlert, ListChecks } from "lucide-react";

type Q = {
  q: string;
  options: string[];
  sensitive?: boolean;
};

const QUESTIONS: Q[] = [
  {
    q: "How long have you had your green card?",
    options: ["Under 3 years", "3–5 years", "5+ years"],
  },
  {
    q: "Are you married to a U.S. citizen?",
    options: ["Yes", "No"],
  },
  {
    q: "Have you taken trips outside the U.S. longer than 6 months?",
    options: ["Yes", "No", "Not sure"],
    sensitive: true,
  },
  {
    q: "Have you filed taxes every year you were required to?",
    options: ["Yes", "No", "Not sure"],
    sensitive: true,
  },
  {
    q: "Have you ever been arrested, cited, or charged with anything?",
    options: ["Yes", "No"],
    sensitive: true,
  },
];

export default function QuizPreview() {
  const [answers, setAnswers] = useState<Record<number, number>>({});
  const answered = Object.keys(answers).length;

  return (
    <section className="bg-cream py-20 md:py-28">
      <Container>
        <div className="mx-auto max-w-2xl text-center">
          <span className="eyebrow">
            <ListChecks className="h-3.5 w-3.5" />
            Quiz preview
          </span>
          <h2 className="mt-5 text-balance text-3xl font-600 text-navy sm:text-4xl">
            A taste of the readiness check.
          </h2>
          <p className="mt-4 text-lg leading-relaxed text-navy/60">
            Simple questions, plain language. Tap an answer to see how it feels —
            no account needed for the preview.
          </p>
        </div>

        <div className="mx-auto mt-10 max-w-2xl">
          {/* progress */}
          <div className="mb-5 flex items-center gap-3">
            <div className="h-2 flex-1 overflow-hidden rounded-full bg-navy/10">
              <div
                className="h-full rounded-full bg-emerald transition-all duration-500"
                style={{ width: `${(answered / QUESTIONS.length) * 100}%` }}
              />
            </div>
            <span className="text-sm font-semibold text-navy/60">
              {answered}/{QUESTIONS.length}
            </span>
          </div>

          <div className="space-y-4">
            {QUESTIONS.map((item, qi) => (
              <div key={qi} className="card p-5 sm:p-6">
                <div className="flex items-start gap-3">
                  <span className="grid h-7 w-7 shrink-0 place-items-center rounded-lg bg-navy/[0.05] text-sm font-700 text-navy">
                    {qi + 1}
                  </span>
                  <div className="flex-1">
                    <p className="font-600 text-navy">{item.q}</p>

                    <div className="mt-4 flex flex-wrap gap-2">
                      {item.options.map((opt, oi) => {
                        const selected = answers[qi] === oi;
                        return (
                          <button
                            key={oi}
                            type="button"
                            onClick={() =>
                              setAnswers((a) => ({ ...a, [qi]: oi }))
                            }
                            className={`rounded-full border px-4 py-2 text-sm font-medium transition-all ${
                              selected
                                ? "border-navy bg-navy text-cream"
                                : "border-navy/15 bg-white text-navy/75 hover:border-navy/35"
                            }`}
                          >
                            {opt}
                          </button>
                        );
                      })}
                    </div>

                    {item.sensitive && (
                      <div className="mt-4 flex items-start gap-2 rounded-xl bg-danger-50 px-3.5 py-2.5">
                        <ShieldAlert className="mt-0.5 h-4 w-4 shrink-0 text-danger-700" />
                        <p className="text-xs leading-relaxed text-danger-700">
                          Some answers may need review by a licensed immigration
                          attorney. We&apos;ll flag those for you.
                        </p>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            ))}
          </div>

          <div className="mt-8 text-center">
            <a href="#pricing" className="btn btn-lg btn-navy">
              Start the full readiness check
            </a>
          </div>
        </div>
      </Container>
    </section>
  );
}