import type { Metadata } from "next";
import { setRequestLocale } from "next-intl/server";
import { ScrollReveal } from "@/components/ScrollReveal";
import { PageHeaderBanner } from "@/components/PageHeaderBanner";
import { VoucherRequestForm } from "@/components/VoucherRequestForm";
import { buildPageMetadata } from "@/lib/seo";
import { getSettings } from "@/lib/settings";

export const dynamic = "force-dynamic";

// Feste Content-Spalte (1120px) + feste Breakpoints, wie in
// reference/subpage-header-spec festgelegt — kein vw/clamp, damit die Seite
// auf jedem Monitor gleich aussieht.
const COL = "mx-auto w-full max-w-[1120px] px-5 sm:px-8";

export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }): Promise<Metadata> {
  const { locale } = await params;
  return buildPageMetadata({
    locale,
    path: "/gutscheine",
    title: locale === "en" ? "Gift Vouchers" : "Geschenkgutscheine",
    description:
      locale === "en"
        ? "Give the gift of a photo shoot with Rakku Photography — flexible gift vouchers redeemable for any booking."
        : "Verschenke ein Fotoshooting mit Rakku Photography — flexible Geschenkgutscheine, einlösbar für jede Buchung.",
  });
}

export default async function VouchersPage({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params;
  setRequestLocale(locale);
  const isEn = locale === "en";
  const settings = await getSettings();
  const purchasesEnabled = settings.voucherSettings?.enabled !== false;

  const badges = isEn
    ? ["Valid for 3 years", "Redeemable for any booking", "Personal code by email"]
    : ["3 Jahre gültig", "Einlösbar für jede Buchung", "Persönlicher Code per E-Mail"];

  const steps = isEn
    ? [
        {
          title: "Choose an amount",
          text: "Pick one of the suggested amounts or enter your own — the voucher works like a discount code on any booking.",
        },
        {
          title: "Send the request",
          text: "Just your name, email and an optional message — the request lands directly with me.",
        },
        {
          title: "Receive the voucher",
          text: "I'll get back to you by email with the payment details. Once payment arrives, you'll get your personal voucher code.",
        },
      ]
    : [
        {
          title: "Betrag wählen",
          text: "Einen der vorgeschlagenen Beträge nehmen oder einen eigenen Wunschbetrag eintragen — der Gutschein funktioniert wie ein Rabattcode bei jeder Buchung.",
        },
        {
          title: "Anfrage senden",
          text: "Kurz Name, E-Mail und optional eine Nachricht dazu — die Anfrage geht direkt bei mir ein.",
        },
        {
          title: "Gutschein erhalten",
          text: "Ich melde mich per E-Mail mit den Zahlungsdetails. Sobald die Zahlung eingegangen ist, bekommst du deinen persönlichen Gutschein-Code zugeschickt.",
        },
      ];

  return (
    // Opake --rk-bg-Fläche blockt den weißen Radial-Schimmer des body-Hintergrunds.
    // Header/Nav/Banner: geteilte Behandlung — siehe reference/subpage-header-spec.
    <main className="min-h-screen bg-[var(--rk-bg)] pb-24">
      <PageHeaderBanner
        image="/img/gutscheine-banner.jpg"
        eyebrow={isEn ? "Give a shooting" : "Ein Shooting verschenken"}
        title={isEn ? "Gift Vouchers" : "Geschenkgutscheine"}
        subtitle={
          isEn
            ? "The perfect gift for cosplayers, models or anyone who'd love a professional shoot — the recipient then picks whichever offer suits them."
            : "Das perfekte Geschenk für Cosplayer:innen, Models oder alle, die sich über ein professionelles Shooting freuen — die/der Beschenkte sucht sich anschließend das passende Angebot aus."
        }
        focalPoint="42% 26%"
        tall
      />

      {/* Vertrauens-Chips — direkt am Banner (kein dunkler "Balken" dazwischen,
          -mt-8 hebt das mb-8 des Banners auf). */}
      <section className="-mt-8">
        <div className={`${COL} flex flex-wrap justify-center gap-3 pt-14 sm:pt-20`}>
          {badges.map((b) => (
            <span
              key={b}
              className="rounded-full border border-white/15 px-5 py-2 text-xs uppercase tracking-[0.12em] text-[var(--rk-ink-muted)]"
            >
              {b}
            </span>
          ))}
        </div>
      </section>

      {/* Zweispaltig: links "So funktioniert's", rechts das Anfrage-Formular */}
      <section className={`${COL} mt-16 grid gap-6 sm:mt-24 sm:grid-cols-2 sm:gap-8`}>
        <ScrollReveal className="flex flex-col rounded-2xl bg-[var(--rk-surface)] p-8 sm:p-10">
          <p className="text-xs uppercase tracking-[0.35em] text-[var(--rk-ink-muted)]">
            {isEn ? "How it works" : "So funktioniert's"}
          </p>
          <h2 className="rk-wordmark mt-3 text-xl sm:text-2xl">
            {isEn ? "Gifted in three steps" : "In drei Schritten verschenkt"}
          </h2>
          <div className="rk-accent-rule" />
          <ol className="mt-8 space-y-7">
            {steps.map((s, i) => (
              <li key={s.title} className="flex gap-4">
                <span className="rk-wordmark shrink-0 text-lg text-[var(--rk-accent)]/70">
                  {String(i + 1).padStart(2, "0")}
                </span>
                <div>
                  <h3 className="text-sm uppercase tracking-[0.15em]">{s.title}</h3>
                  <p className="mt-1.5 text-sm leading-relaxed text-[var(--rk-ink-muted)]">{s.text}</p>
                </div>
              </li>
            ))}
          </ol>
        </ScrollReveal>

        <ScrollReveal
          delayMs={100}
          className="rounded-2xl border border-white/10 bg-[var(--rk-surface)] p-8 shadow-[0_24px_60px_-20px_rgba(0,0,0,0.55)] sm:p-10"
        >
          <p className="text-xs uppercase tracking-[0.35em] text-[var(--rk-ink-muted)]">
            {isEn ? "Request" : "Anfrage"}
          </p>
          <h2 className="rk-wordmark mt-3 text-xl sm:text-2xl">
            {isEn ? "Request a voucher" : "Gutschein anfragen"}
          </h2>
          <div className="rk-accent-rule" />
          {!purchasesEnabled ? (
            <p className="mt-6 text-sm text-[var(--rk-ink-muted)]">
              {isEn
                ? "New gift vouchers are currently not available. Existing vouchers remain valid — please check back later."
                : "Aktuell sind keine neuen Gutscheine erhältlich. Bestehende Gutscheine bleiben gültig — schau gerne später nochmal vorbei."}
            </p>
          ) : (
          <div className="mt-6">
            <VoucherRequestForm
              locale={isEn ? "en" : "de"}
              labels={{
                amountLabel: isEn ? "Amount" : "Betrag",
                customAmountPlaceholder: isEn ? "Other amount" : "Anderer Betrag",
                nameLabel: isEn ? "Your name" : "Dein Name",
                emailLabel: isEn ? "Your email" : "Deine E-Mail",
                recipientLabel: isEn ? "For whom (optional)" : "Für wen (optional)",
                messageLabel: isEn ? "Message (optional)" : "Nachricht (optional)",
                submit: isEn ? "Request voucher" : "Gutschein anfragen",
                manualSuccess: isEn
                  ? "Thanks for your request! Rakku will get in touch by email with the payment details — once payment is received, you'll get your voucher code."
                  : "Danke für deine Anfrage! Rakku meldet sich bei dir per E-Mail mit den Zahlungsdetails — sobald die Zahlung eingegangen ist, bekommst du deinen Gutschein-Code zugeschickt.",
              }}
            />
          </div>
          )}
        </ScrollReveal>
      </section>
    </main>
  );
}