import Link from "next/link";
import { ArrowRight, ChevronDown } from "@/components/ui/icons";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Reveal } from "@/components/ui/reveal";

export type FaqItem = { q: string; a: string };

export function FaqSection({
  items,
  eyebrow = "Questions fréquentes",
  title,
}: {
  items: FaqItem[];
  eyebrow?: string;
  title?: React.ReactNode;
}) {
  return (
    <section className="relative z-10 border-t border-border bg-surface/30">
      <div className="mx-auto max-w-3xl px-4 sm:px-6 md:px-10 py-20">
        <div className="text-center">
          <Reveal>
            <Badge tone="muted">{eyebrow}</Badge>
          </Reveal>
          <Reveal delay={120}>
            <h2 className="font-editorial mt-4 text-3xl md:text-4xl font-medium text-text leading-tight">
              {title ?? (
                <>
                  Vous vous demandez peut-être{" "}
                  les mêmes choses.
                </>
              )}
            </h2>
          </Reveal>
        </div>

        <div className="mt-12 space-y-3">
          {items.map((item, i) => (
            <Reveal key={item.q} delay={i * 60}>
              <details className="group panel p-5 open:border-accent/30 transition-colors">
                <summary className="cursor-pointer list-none flex items-center justify-between gap-4">
                  <h3 className="text-sm md:text-base font-semibold text-text">{item.q}</h3>
                  <ChevronDown className="size-4 shrink-0 text-text-dim group-open:rotate-180 group-open:text-accent transition-transform" />
                </summary>
                <p className="mt-3 text-sm text-text-muted leading-relaxed">{item.a}</p>
              </details>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

export function CtaPanel({
  title,
  text,
  primaryHref = "/contact",
  primaryLabel = "Demander un aperçu",
  secondaryHref = "/tarifs",
  secondaryLabel = "Voir les tarifs",
  showSecondary = true,
}: {
  title?: React.ReactNode;
  text?: string;
  primaryHref?: string;
  primaryLabel?: string;
  secondaryHref?: string;
  secondaryLabel?: string;
  showSecondary?: boolean;
} = {}) {
  return (
    <section className="relative z-10 mx-auto max-w-4xl px-4 sm:px-6 md:px-10 py-24 text-center">
      <Reveal>
        <div className="panel relative overflow-hidden p-6 sm:p-10 md:p-14">
          <div className="relative">
            <h2 className="font-editorial mt-4 text-3xl md:text-4xl font-medium text-text">
              {title ?? (
                <>
                  Vous voulez voir un{" "}
                  aperçu personnalisé de votre futur site ?
                </>
              )}
            </h2>
            <p className="mt-4 text-text-muted max-w-xl mx-auto">
              {text ??
                "Donnez-nous quelques infos sur votre activité, on vous envoie une maquette personnalisée. Sans engagement."}
            </p>
            <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
              <Link href={primaryHref}>
                <Button variant="primary" size="lg">
                  {primaryLabel}
                  <ArrowRight className="size-4" />
                </Button>
              </Link>
              {showSecondary && (
                <Link href={secondaryHref}>
                  <Button variant="outline" size="lg">
                    {secondaryLabel}
                  </Button>
                </Link>
              )}
            </div>
          </div>
        </div>
      </Reveal>
    </section>
  );
}

export function JsonLdFaq({ items }: { items: FaqItem[] }) {
  const data = {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    mainEntity: items.map((item) => ({
      "@type": "Question",
      name: item.q,
      acceptedAnswer: { "@type": "Answer", text: item.a },
    })),
  };
  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
    />
  );
}