import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import {
  ArrowLeft,
  ArrowRight,
  CheckCircle2,
  HelpCircle,
  ShieldCheck,
} from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  getMarketingFeature,
  marketingFeatures,
} from "@/lib/marketing/features";

type FeaturePageProps = {
  params: Promise<{
    slug: string;
  }>;
};

export const dynamicParams = false;

export function generateStaticParams() {
  return marketingFeatures.map((feature) => ({
    slug: feature.slug,
  }));
}

export async function generateMetadata({
  params,
}: FeaturePageProps): Promise<Metadata> {
  const { slug } = await params;
  const feature = getMarketingFeature(slug);

  if (!feature) {
    return {
      title: "Feature nicht gefunden",
    };
  }

  return {
    title: feature.seoTitle,
    description: feature.seoDescription,
    openGraph: {
      title: feature.seoTitle,
      description: feature.seoDescription,
      type: "website",
      locale: "de_DE",
      images: [
        {
          url: "/og-image.png",
          width: 1200,
          height: 630,
          alt: "Ein Kind spielt mit bunten Holzklötzen.",
        },
      ],
    },
    twitter: {
      card: "summary_large_image",
      title: feature.seoTitle,
      description: feature.seoDescription,
      images: ["/og-image.png"],
    },
  };
}

export default async function FeaturePage({ params }: FeaturePageProps) {
  const { slug } = await params;
  const feature = getMarketingFeature(slug);

  if (!feature) {
    notFound();
  }

  const Icon = feature.icon;

  return (
    <div className="min-h-screen bg-[#f8faf8] text-slate-950">
      <header className="border-b border-slate-200 bg-white/95">
        <div className="mx-auto flex h-20 w-full max-w-7xl items-center justify-between px-5 sm:px-6">
          <Link href="/" className="flex items-center gap-3 text-slate-950">
            <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-slate-950 text-white">
              <ShieldCheck className="h-5 w-5" />
            </span>
            <span className="text-base font-semibold tracking-tight">
              Kita-Planer
            </span>
          </Link>

          <nav className="flex items-center gap-2">
            <Button asChild variant="ghost">
              <Link href="/login">Login</Link>
            </Button>
            <Button asChild>
              <Link href="/#kontakt">Demo anfragen</Link>
            </Button>
          </nav>
        </div>
      </header>

      <main>
        <section className="bg-slate-950 px-5 py-20 text-white sm:px-6 lg:py-24">
          <div className="mx-auto grid w-full max-w-7xl gap-12 lg:grid-cols-[0.95fr_1.05fr] lg:items-center">
            <div>
              <Button
                asChild
                variant="ghost"
                className="-ml-3 mb-8 text-slate-300 hover:bg-white/10 hover:text-white"
              >
                <Link href="/">
                  <ArrowLeft className="h-4 w-4" />
                  Zur Startseite
                </Link>
              </Button>

              <Badge className="mb-6 border-white/15 bg-white/10 text-white hover:bg-white/10">
                {feature.eyebrow}
              </Badge>
              <h1 className="max-w-4xl text-balance text-4xl font-semibold leading-tight sm:text-5xl lg:text-6xl">
                {feature.heroTitle}
              </h1>
              <p className="mt-6 max-w-2xl text-lg leading-8 text-slate-300">
                {feature.heroDescription}
              </p>
              <div className="mt-9 flex flex-col gap-3 sm:flex-row">
                <Button
                  asChild
                  size="lg"
                  className="h-12 bg-white px-6 text-slate-950 hover:bg-white/90"
                >
                  <Link href="/#kontakt">
                    Demo anfragen
                    <ArrowRight className="h-4 w-4" />
                  </Link>
                </Button>
                <Button
                  asChild
                  size="lg"
                  variant="outline"
                  className="h-12 border-white/35 bg-white/10 px-6 text-white hover:bg-white/20 hover:text-white"
                >
                  <Link href="/register">Kita registrieren</Link>
                </Button>
              </div>
            </div>

            <div className="rounded-lg border border-white/10 bg-white/[0.06] p-6 shadow-2xl shadow-slate-950/30">
              <div
                className={`mb-6 flex h-14 w-14 items-center justify-center rounded-lg ring-1 ${feature.accent}`}
              >
                <Icon className="h-7 w-7" />
              </div>
              <p className="text-sm font-semibold uppercase tracking-wide text-emerald-200">
                In einem Satz
              </p>
              <p className="mt-4 text-2xl font-semibold leading-snug">
                {feature.description}
              </p>
              <div className="mt-8 grid gap-3 text-sm text-slate-300">
                {feature.benefits.slice(0, 3).map((benefit) => (
                  <div key={benefit.title} className="flex items-start gap-2">
                    <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-emerald-300" />
                    <span>{benefit.title}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>

        <section className="mx-auto grid w-full max-w-7xl gap-6 px-5 py-20 sm:px-6 lg:grid-cols-2">
          <Card className="border-slate-200 bg-white">
            <CardHeader>
              <CardTitle className="text-2xl tracking-tight">
                {feature.problemTitle}
              </CardTitle>
              <CardDescription className="text-base leading-7 text-slate-600">
                {feature.problemText}
              </CardDescription>
            </CardHeader>
          </Card>

          <Card className="border-slate-200 bg-white">
            <CardHeader>
              <CardTitle className="text-2xl tracking-tight">
                {feature.solutionTitle}
              </CardTitle>
              <CardDescription className="text-base leading-7 text-slate-600">
                {feature.solutionText}
              </CardDescription>
            </CardHeader>
          </Card>
        </section>

        <section className="px-5 pb-20 sm:px-6">
          <div className="mx-auto w-full max-w-7xl">
            <div className="mb-10 max-w-3xl">
              <p className="mb-3 text-sm font-semibold uppercase tracking-wide text-emerald-700">
                Was das konkret bringt
              </p>
              <h2 className="text-balance text-3xl font-semibold leading-tight sm:text-4xl">
                Weniger Abstimmungslast, mehr Klarheit im Kita-Alltag.
              </h2>
            </div>

            <div className="grid gap-5 md:grid-cols-2">
              {feature.benefits.map((benefit) => (
                <Card key={benefit.title} className="border-slate-200 bg-white">
                  <CardHeader>
                    <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-50 text-emerald-700 ring-1 ring-emerald-100">
                      <CheckCircle2 className="h-5 w-5" />
                    </div>
                    <CardTitle className="text-xl tracking-tight">
                      {benefit.title}
                    </CardTitle>
                    <CardDescription className="text-sm leading-6 text-slate-600">
                      {benefit.text}
                    </CardDescription>
                  </CardHeader>
                </Card>
              ))}
            </div>
          </div>
        </section>

        <section className="bg-slate-950 px-5 py-18 text-white sm:px-6">
          <div className="mx-auto flex w-full max-w-7xl flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
            <div className="max-w-3xl">
              <Badge className="mb-5 border-emerald-300/20 bg-emerald-300/10 text-emerald-100 hover:bg-emerald-300/10">
                Vertrauen & Datenschutz
              </Badge>
              <h2 className="text-3xl font-semibold tracking-tight">
                {feature.trustTitle}
              </h2>
              <p className="mt-4 text-base leading-7 text-slate-300">
                {feature.trustText}
              </p>
            </div>
            <Button
              asChild
              size="lg"
              className="h-12 bg-white px-6 text-slate-950 hover:bg-white/90 lg:shrink-0"
            >
              <Link href="/datenschutz">Datenschutz ansehen</Link>
            </Button>
          </div>
        </section>

        <section className="mx-auto w-full max-w-7xl px-5 py-20 sm:px-6">
          <div className="mb-10 max-w-3xl">
            <p className="mb-3 text-sm font-semibold uppercase tracking-wide text-emerald-700">
              Fragen aus dem Vorstand
            </p>
            <h2 className="text-balance text-3xl font-semibold leading-tight sm:text-4xl">
              Kurz beantwortet.
            </h2>
          </div>

          <div className="grid gap-4 lg:grid-cols-3">
            {feature.faqs.map((faq) => (
              <Card key={faq.question} className="border-slate-200 bg-white">
                <CardHeader>
                  <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-slate-100 text-slate-700">
                    <HelpCircle className="h-5 w-5" />
                  </div>
                  <CardTitle className="text-lg leading-snug">
                    {faq.question}
                  </CardTitle>
                  <CardDescription className="text-sm leading-6 text-slate-600">
                    {faq.answer}
                  </CardDescription>
                </CardHeader>
              </Card>
            ))}
          </div>
        </section>

        <section className="px-5 pb-20 sm:px-6">
          <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 rounded-lg border border-slate-200 bg-white p-8 shadow-sm sm:p-10 md:flex-row md:items-center md:justify-between">
            <div className="max-w-2xl">
              <h2 className="text-2xl font-semibold tracking-tight">
                Wollt ihr {feature.shortTitle} im echten Kita-Alltag sehen?
              </h2>
              <p className="mt-3 text-sm leading-6 text-slate-600">
                Schreibt uns kurz, wie ihr heute organisiert seid. Wir zeigen
                euch, wie Kita-Planer zu eurem Elternverein passen kann.
              </p>
            </div>
            <Button asChild size="lg">
              <Link href="/#kontakt">
                Demo anfragen
                <ArrowRight className="h-4 w-4" />
              </Link>
            </Button>
          </div>
        </section>
      </main>

      <footer className="border-t border-slate-200 bg-white">
        <div className="mx-auto flex w-full max-w-7xl flex-col gap-4 px-5 py-8 text-sm text-slate-500 sm:flex-row sm:items-center sm:justify-between sm:px-6">
          <span>© {new Date().getFullYear()} Kita-Planer</span>
          <nav className="flex gap-5">
            <Link href="/impressum" className="hover:text-slate-950">
              Impressum
            </Link>
            <Link href="/datenschutz" className="hover:text-slate-950">
              Datenschutz
            </Link>
            <Link href="/#kontakt" className="hover:text-slate-950">
              Kontakt
            </Link>
          </nav>
        </div>
      </footer>
    </div>
  );
}
