import Link from "next/link";
import { getTranslations } from "next-intl/server";
import {
  ArrowRight,
  Bot,
  CalendarRange,
  Check,
  CheckCircle2,
  ClipboardList,
  Download,
  EyeOff,
  FileInput,
  FileSignature,
  FolderOpen,
  KeyRound,
  Layers,
  MapPin,
  Package,
  Receipt,
  ScrollText,
  Siren,
  Timer,
  UsersRound,
  WifiOff,
  type LucideIcon,
} from "lucide-react";
import { CraftviaLogo } from "@/components/brand/craftvia-logo";
import { BRAND } from "@/lib/brand";
import { BoardMockup, FieldMockup, LotseMockup } from "./mockups";

/**
 * Öffentliche Startseite (Produktseite). Wird von `/` gerendert, solange keine Session besteht;
 * angemeldete Nutzer leitet die Route auf Dashboard bzw. mobile Ansicht. Alle Texte kommen aus
 * `messages/<locale>/marketing.json` — keine Screenshots, die Vorschauen sind Markup (mockups.tsx).
 */

const FEATURES: { key: string; icon: LucideIcon }[] = [
  { key: "orders", icon: ClipboardList },
  { key: "board", icon: CalendarRange },
  { key: "live", icon: MapPin },
  { key: "time", icon: Timer },
  { key: "offline", icon: WifiOff },
  { key: "reports", icon: FileSignature },
  { key: "material", icon: Package },
  { key: "billing", icon: Receipt },
  { key: "emergency", icon: Siren },
  { key: "lotse", icon: Bot },
  { key: "documents", icon: FolderOpen },
  { key: "imports", icon: FileInput },
];

const SECURITY: { key: string; icon: LucideIcon }[] = [
  { key: "item1", icon: Layers },
  { key: "item2", icon: UsersRound },
  { key: "item3", icon: KeyRound },
  { key: "item4", icon: ScrollText },
  { key: "item5", icon: Download },
  { key: "item6", icon: EyeOff },
];

const NAV = ["features", "planning", "mobile", "security", "pricing", "faq"] as const;
const FAQ = ["q1", "q2", "q3", "q4", "q5", "q6", "q7", "q8"] as const;
const INDUSTRIES = ["shk", "electric", "cooling", "lifts", "windows", "service"] as const;

const ctaCls =
  "inline-flex min-h-12 items-center justify-center gap-2 rounded-lg bg-cta px-5 text-[15px] font-semibold text-cta-foreground hover:brightness-95 focus-visible:outline-2 focus-visible:outline-offset-2";
const outlineCls =
  "inline-flex min-h-12 items-center justify-center gap-2 rounded-lg border px-5 text-[15px] font-semibold hover:bg-muted focus-visible:outline-2 focus-visible:outline-offset-2";

export async function MarketingHome({ contactEmail }: { contactEmail?: string }) {
  const t = await getTranslations("marketing");

  return (
    <div className="flex flex-1 flex-col">
      <header className="sticky top-0 z-20 border-b bg-background/95 backdrop-blur">
        <div className="mx-auto flex max-w-6xl items-center gap-4 px-4 py-3 sm:px-6">
          <Link href="/" className="flex min-h-11 items-center" aria-label={BRAND.name}>
            <CraftviaLogo variant="horizontal" height={30} />
          </Link>
          <nav aria-label={t("nav.label")} className="ml-auto hidden lg:block">
            <ul className="flex items-center gap-1">
              {NAV.map((key) => (
                <li key={key}>
                  <a href={`#${key}`} className="inline-flex min-h-11 items-center rounded-md px-3 text-[14px] font-medium text-muted-foreground hover:text-foreground">
                    {t(`nav.${key}`)}
                  </a>
                </li>
              ))}
            </ul>
          </nav>
          <div className="ml-auto flex items-center gap-2 lg:ml-0">
            <Link href="/login" className="inline-flex min-h-11 items-center px-2 text-[14px] font-semibold text-[var(--ui-primary)]">
              {t("nav.login")}
            </Link>
            <Link href="/testen" className="inline-flex min-h-11 items-center rounded-lg bg-cta px-4 text-[14px] font-semibold text-cta-foreground hover:brightness-95">
              {t("nav.cta")}
            </Link>
          </div>
        </div>
      </header>

      <main className="flex-1">
        {/* Hero */}
        <section className="border-b bg-card">
          <div className="mx-auto grid max-w-6xl gap-10 px-4 py-12 sm:px-6 lg:grid-cols-[1.1fr_0.9fr] lg:items-center lg:py-20">
            <div>
              <p className="text-[13px] font-semibold tracking-wide text-[var(--ui-accent)] uppercase">{t("hero.eyebrow")}</p>
              <h1 className="mt-3 font-heading text-[34px] leading-[1.1] font-bold text-[var(--ui-primary)] sm:text-[46px]">{t("hero.title")}</h1>
              <p className="mt-4 max-w-xl text-[16.5px] leading-relaxed text-muted-foreground">{t("hero.subtitle")}</p>
              <div className="mt-7 flex flex-wrap gap-3">
                <Link href="/testen" className={ctaCls}>
                  {t("hero.ctaPrimary")}
                  <ArrowRight className="size-4" aria-hidden />
                </Link>
                <a href="#features" className={outlineCls}>
                  {t("hero.ctaSecondary")}
                </a>
              </div>
              <ul className="mt-6 grid gap-2">
                {(["bullet1", "bullet2", "bullet3"] as const).map((k) => (
                  <li key={k} className="flex items-start gap-2 text-[14.5px]">
                    <CheckCircle2 className="mt-0.5 size-[18px] shrink-0 text-[var(--ok)]" aria-hidden />
                    {t(`hero.${k}`)}
                  </li>
                ))}
              </ul>
            </div>
            <BoardMockup />
          </div>
        </section>

        {/* Leitgedanken */}
        <section aria-labelledby="pillars" className="mx-auto max-w-6xl px-4 py-14 sm:px-6">
          <h2 id="pillars" className="font-heading text-[26px] font-semibold">{t("pillars.title")}</h2>
          <div className="mt-6 grid gap-4 md:grid-cols-3">
            {(["one", "two", "three"] as const).map((k) => (
              <article key={k} className="shadow-card rounded-xl border bg-card p-5">
                <h3 className="font-heading text-[17px] font-semibold">{t(`pillars.${k}.title`)}</h3>
                <p className="mt-2 text-[14.5px] leading-relaxed text-muted-foreground">{t(`pillars.${k}.text`)}</p>
              </article>
            ))}
          </div>
        </section>

        {/* Funktionen */}
        <section id="features" aria-labelledby="features-title" className="scroll-mt-20 border-y bg-card">
          <div className="mx-auto max-w-6xl px-4 py-14 sm:px-6">
            <h2 id="features-title" className="font-heading text-[26px] font-semibold">{t("features.title")}</h2>
            <p className="mt-2 max-w-2xl text-[15px] text-muted-foreground">{t("features.sub")}</p>
            <ul className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
              {FEATURES.map(({ key, icon: Icon }) => (
                <li key={key} className="rounded-xl border bg-background p-5">
                  <span className="flex size-10 items-center justify-center rounded-lg bg-[var(--ui-primary-soft)] text-[var(--ui-primary)]">
                    <Icon className="size-5" aria-hidden />
                  </span>
                  <h3 className="mt-3 font-heading text-[16px] font-semibold">{t(`features.${key}.title`)}</h3>
                  <p className="mt-1.5 text-[14px] leading-relaxed text-muted-foreground">{t(`features.${key}.text`)}</p>
                </li>
              ))}
            </ul>
          </div>
        </section>

        {/* Planung */}
        <section id="planning" aria-labelledby="planning-title" className="scroll-mt-20">
          <div className="mx-auto grid max-w-6xl gap-10 px-4 py-14 sm:px-6 lg:grid-cols-2 lg:items-center">
            <div>
              <p className="text-[13px] font-semibold tracking-wide text-[var(--ui-accent)] uppercase">{t("planning.eyebrow")}</p>
              <h2 id="planning-title" className="mt-2 font-heading text-[26px] font-semibold">{t("planning.title")}</h2>
              <p className="mt-3 text-[15px] leading-relaxed text-muted-foreground">{t("planning.text")}</p>
              <ul className="mt-5 grid gap-2.5">
                {(["point1", "point2", "point3", "point4"] as const).map((k) => (
                  <li key={k} className="flex items-start gap-2 text-[14.5px]">
                    <Check className="mt-0.5 size-[18px] shrink-0 text-[var(--ui-primary)]" aria-hidden />
                    {t(`planning.${k}`)}
                  </li>
                ))}
              </ul>
            </div>
            <BoardMockup />
          </div>
        </section>

        {/* Baustelle */}
        <section id="mobile" aria-labelledby="mobile-title" className="scroll-mt-20 border-y bg-card">
          <div className="mx-auto grid max-w-6xl gap-10 px-4 py-14 sm:px-6 lg:grid-cols-[0.9fr_1.1fr] lg:items-center">
            <div>
              <p className="text-[13px] font-semibold tracking-wide text-[var(--ui-accent)] uppercase">{t("mobile.eyebrow")}</p>
              <h2 id="mobile-title" className="mt-2 font-heading text-[26px] font-semibold">{t("mobile.title")}</h2>
              <p className="mt-3 text-[15px] leading-relaxed text-muted-foreground">{t("mobile.text")}</p>
              <p className="mt-4 flex items-start gap-2 rounded-lg border border-[var(--info)] bg-background px-3 py-2 text-[14px]">
                <WifiOff className="mt-0.5 size-[18px] shrink-0 text-[var(--info)]" aria-hidden />
                {t("mobile.offlineNote")}
              </p>
            </div>
            <FieldMockup />
          </div>
        </section>

        {/* Lotse */}
        <section aria-labelledby="lotse-title">
          <div className="mx-auto grid max-w-6xl gap-10 px-4 py-14 sm:px-6 lg:grid-cols-2 lg:items-center">
            <div>
              <p className="text-[13px] font-semibold tracking-wide text-[var(--ui-accent)] uppercase">{t("lotse.eyebrow")}</p>
              <h2 id="lotse-title" className="mt-2 font-heading text-[26px] font-semibold">{t("lotse.title")}</h2>
              <p className="mt-3 text-[15px] leading-relaxed text-muted-foreground">{t("lotse.text")}</p>
              <p className="mt-4 text-[13.5px] text-muted-foreground">{t("lotse.note")}</p>
            </div>
            <LotseMockup />
          </div>
        </section>

        {/* Ablauf */}
        <section aria-labelledby="steps-title" className="border-y bg-card">
          <div className="mx-auto max-w-6xl px-4 py-14 sm:px-6">
            <h2 id="steps-title" className="font-heading text-[26px] font-semibold">{t("steps.title")}</h2>
            <ol className="mt-6 grid gap-4 md:grid-cols-3">
              {(["one", "two", "three"] as const).map((k, i) => (
                <li key={k} className="rounded-xl border bg-background p-5">
                  <span className="flex size-9 items-center justify-center rounded-full bg-[var(--ui-primary)] text-[15px] font-bold text-white tabular-nums">{i + 1}</span>
                  <h3 className="mt-3 font-heading text-[16px] font-semibold">{t(`steps.${k}.title`)}</h3>
                  <p className="mt-1.5 text-[14px] leading-relaxed text-muted-foreground">{t(`steps.${k}.text`)}</p>
                </li>
              ))}
            </ol>
          </div>
        </section>

        {/* Gewerke */}
        <section aria-labelledby="industries-title" className="mx-auto max-w-6xl px-4 py-14 sm:px-6">
          <h2 id="industries-title" className="font-heading text-[26px] font-semibold">{t("industries.title")}</h2>
          <p className="mt-2 text-[15px] text-muted-foreground">{t("industries.sub")}</p>
          <ul className="mt-6 flex flex-wrap gap-2.5">
            {INDUSTRIES.map((key) => (
              <li key={key} className="rounded-full border bg-card px-4 py-2 text-[14px] font-medium">
                {t(`industries.${key}`)}
              </li>
            ))}
          </ul>
        </section>

        {/* Sicherheit */}
        <section id="security" aria-labelledby="security-title" className="scroll-mt-20 border-y bg-card">
          <div className="mx-auto max-w-6xl px-4 py-14 sm:px-6">
            <p className="text-[13px] font-semibold tracking-wide text-[var(--ui-accent)] uppercase">{t("security.eyebrow")}</p>
            <h2 id="security-title" className="mt-2 font-heading text-[26px] font-semibold">{t("security.title")}</h2>
            <p className="mt-3 max-w-3xl text-[15px] leading-relaxed text-muted-foreground">{t("security.text")}</p>
            <ul className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
              {SECURITY.map(({ key, icon: Icon }) => (
                <li key={key} className="rounded-xl border bg-background p-5">
                  <span className="flex size-10 items-center justify-center rounded-lg bg-[var(--ui-primary-soft)] text-[var(--ui-primary)]">
                    <Icon className="size-5" aria-hidden />
                  </span>
                  <h3 className="mt-3 font-heading text-[16px] font-semibold">{t(`security.${key}.title`)}</h3>
                  <p className="mt-1.5 text-[14px] leading-relaxed text-muted-foreground">{t(`security.${key}.text`)}</p>
                </li>
              ))}
            </ul>
          </div>
        </section>

        {/* Testphase */}
        <section id="pricing" aria-labelledby="trial-title" className="scroll-mt-20">
          <div className="mx-auto max-w-6xl px-4 py-14 sm:px-6">
            <div className="shadow-card grid gap-8 rounded-2xl border bg-card p-6 sm:p-9 lg:grid-cols-[1.1fr_0.9fr] lg:items-center">
              <div>
                <p className="text-[13px] font-semibold tracking-wide text-[var(--ui-accent)] uppercase">{t("trial.eyebrow")}</p>
                <h2 id="trial-title" className="mt-2 font-heading text-[26px] font-semibold">{t("trial.title")}</h2>
                <p className="mt-3 text-[15px] leading-relaxed text-muted-foreground">{t("trial.text")}</p>
                <ul className="mt-5 grid gap-2.5">
                  {(["point1", "point2", "point3"] as const).map((k) => (
                    <li key={k} className="flex items-start gap-2 text-[14.5px]">
                      <CheckCircle2 className="mt-0.5 size-[18px] shrink-0 text-[var(--ok)]" aria-hidden />
                      {t(`trial.${k}`)}
                    </li>
                  ))}
                </ul>
              </div>
              <div className="grid gap-3">
                <Link href="/testen" className={ctaCls}>
                  {t("trial.cta")}
                  <ArrowRight className="size-4" aria-hidden />
                </Link>
                {contactEmail && (
                  <a href={`mailto:${contactEmail}`} className={outlineCls}>
                    {t("trial.secondary")}
                  </a>
                )}
                <p className="text-[13px] leading-relaxed text-muted-foreground">{t("trial.note")}</p>
              </div>
            </div>
          </div>
        </section>

        {/* Fragen */}
        <section id="faq" aria-labelledby="faq-title" className="scroll-mt-20 border-y bg-card">
          <div className="mx-auto max-w-4xl px-4 py-14 sm:px-6">
            <h2 id="faq-title" className="font-heading text-[26px] font-semibold">{t("faq.title")}</h2>
            <div className="mt-6 divide-y rounded-xl border bg-background">
              {FAQ.map((key) => (
                <details key={key} className="group px-4">
                  <summary className="flex min-h-14 cursor-pointer list-none items-center justify-between gap-3 text-[15px] font-semibold">
                    {t(`faq.${key}.q`)}
                    <span aria-hidden className="text-[var(--ui-primary)] transition-transform group-open:rotate-45">＋</span>
                  </summary>
                  <p className="pb-4 text-[14.5px] leading-relaxed text-muted-foreground">{t(`faq.${key}.a`)}</p>
                </details>
              ))}
            </div>
          </div>
        </section>

        {/* Abschluss */}
        <section aria-labelledby="closing-title" className="mx-auto max-w-6xl px-4 py-16 text-center sm:px-6">
          <h2 id="closing-title" className="font-heading text-[28px] font-semibold text-[var(--ui-primary)]">{t("closing.title")}</h2>
          <p className="mx-auto mt-3 max-w-xl text-[15.5px] text-muted-foreground">{t("closing.text")}</p>
          <div className="mt-6 flex flex-wrap justify-center gap-3">
            <Link href="/testen" className={ctaCls}>
              {t("closing.cta")}
              <ArrowRight className="size-4" aria-hidden />
            </Link>
            <Link href="/login" className={outlineCls}>
              {t("closing.login")}
            </Link>
          </div>
        </section>
      </main>

      <footer className="border-t bg-card">
        <div className="mx-auto grid max-w-6xl gap-8 px-4 py-10 sm:px-6 md:grid-cols-[1.4fr_1fr_1fr]">
          <div>
            <CraftviaLogo variant="horizontal" height={28} />
            <p className="mt-3 max-w-xs text-[13.5px] text-muted-foreground">{t("footer.tagline")}</p>
          </div>
          <nav aria-labelledby="footer-product">
            <h2 id="footer-product" className="text-[13px] font-semibold tracking-wide uppercase">{t("footer.product")}</h2>
            <ul className="mt-2 grid">
              <li><a href="#features" className="inline-flex min-h-11 items-center text-[14px] text-muted-foreground hover:text-foreground">{t("footer.features")}</a></li>
              <li><Link href="/testen" className="inline-flex min-h-11 items-center text-[14px] text-muted-foreground hover:text-foreground">{t("footer.trial")}</Link></li>
              <li><Link href="/login" className="inline-flex min-h-11 items-center text-[14px] text-muted-foreground hover:text-foreground">{t("footer.login")}</Link></li>
            </ul>
          </nav>
          <nav aria-labelledby="footer-legal">
            <h2 id="footer-legal" className="text-[13px] font-semibold tracking-wide uppercase">{t("footer.company")}</h2>
            <ul className="mt-2 grid">
              <li><Link href="/testen/nutzungsbedingungen" className="inline-flex min-h-11 items-center text-[14px] text-muted-foreground hover:text-foreground">{t("footer.terms")}</Link></li>
              <li><Link href="/testen/datenschutz" className="inline-flex min-h-11 items-center text-[14px] text-muted-foreground hover:text-foreground">{t("footer.privacy")}</Link></li>
            </ul>
          </nav>
        </div>
        <p className="border-t px-4 py-4 text-center text-[12.5px] text-muted-foreground sm:px-6">
          © {new Date().getFullYear()} {BRAND.name} · {BRAND.tagline} · {t("footer.rights")}
        </p>
      </footer>
    </div>
  );
}