import Link from "next/link";
import { ArrowRight, CheckCircle2 } from "lucide-react";

import { Button } from "@/components/ui/button";
import { MarkdownPreview } from "@/components/editor/markdown-preview";
import { breadcrumbLd, faqLd } from "@/lib/seo";

export type ToolFaq = { question: string; answer: string };

export type ToolLandingProps = {
  eyebrow: string;
  title: string;
  description: string;
  path: string;
  bullets: string[];
  sample: string;
  /** Long-form SEO body in Markdown. Rendered with the same preview as the editor. */
  body: string;
  faq: ToolFaq[];
};

export function ToolLanding({
  eyebrow,
  title,
  description,
  path,
  bullets,
  sample,
  body,
  faq,
}: ToolLandingProps) {
  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: breadcrumbLd([
            { name: "Home", url: "/" },
            { name: "Tools", url: "/tools" },
            { name: eyebrow, url: path },
          ]),
        }}
      />
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: faqLd(faq) }}
      />

      <section className="border-b">
        <div className="container grid gap-10 py-14 sm:py-20 lg:grid-cols-12">
          <div className="lg:col-span-7">
            <p className="text-sm font-medium uppercase tracking-wider text-primary">{eyebrow}</p>
            <h1 className="mt-2 text-balance text-3xl font-semibold tracking-tight sm:text-5xl">
              {title}
            </h1>
            <p className="mt-4 max-w-xl text-pretty text-base text-muted-foreground sm:text-lg">
              {description}
            </p>
            <ul className="mt-6 grid gap-2 text-sm">
              {bullets.map((bullet) => (
                <li key={bullet} className="flex items-center gap-2">
                  <CheckCircle2 className="h-4 w-4 text-primary" />
                  <span>{bullet}</span>
                </li>
              ))}
            </ul>
            <div className="mt-6 flex flex-wrap gap-3">
              <Button asChild size="lg">
                <Link href="/editor">
                  Open the editor <ArrowRight className="h-4 w-4" />
                </Link>
              </Button>
              <Button asChild size="lg" variant="outline">
                <Link href="/guide">Markdown guide</Link>
              </Button>
            </div>
          </div>
          <div className="lg:col-span-5">
            <div className="rounded-xl border bg-card p-5 shadow-sm">
              <p className="text-xs uppercase tracking-wider text-muted-foreground">Live sample</p>
              <div className="mt-3 max-h-[420px] overflow-auto">
                <MarkdownPreview source={sample} safeLinks={false} />
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="container max-w-3xl py-14">
        <MarkdownPreview source={body} />
      </section>

      <section className="border-t bg-muted/30">
        <div className="container max-w-3xl py-14">
          <h2 className="text-2xl font-semibold tracking-tight">Frequently asked questions</h2>
          <dl className="mt-6 divide-y divide-border rounded-xl border bg-card">
            {faq.map((item) => (
              <details key={item.question} className="group px-6 py-5 [&_summary]:cursor-pointer">
                <summary className="flex items-center justify-between font-medium">
                  {item.question}
                  <span
                    aria-hidden
                    className="ml-4 inline-block transition-transform group-open:rotate-45"
                  >
                    +
                  </span>
                </summary>
                <dd className="mt-3 text-sm text-muted-foreground">{item.answer}</dd>
              </details>
            ))}
          </dl>
        </div>
      </section>
    </>
  );
}