import type { Metadata } from "next";
import Link from "next/link";
import { Reveal } from "../components/Reveal";
import { Footer } from "../components/Footer";
import { TrustRow } from "../components/TrustRow";

// robots: noindex — transactional landing page (Brevo's double opt-in
// redirectionUrl target, see app/lib/brevo.ts's BREVO_DOI_REDIRECT_URL),
// same reasoning as /bestellbestaetigung and /checkout: nothing here is
// meant to be found via search, only reached via the confirmation link.
export const metadata: Metadata = {
  title: "Newsletter bestätigt",
  description: "Deine Newsletter-Anmeldung bei einfach produktiv ist bestätigt.",
  robots: {
    index: false,
    follow: true,
  },
};

// Static — Brevo's confirmation click lands here with no query params to
// read, so unlike /bestellbestaetigung (which hydrates a sessionStorage
// order snapshot) or /checkout/verarbeitung (which polls payment status),
// this page has nothing to fetch or wait on. Same visual language as
// those two: warm bg-bg-base, brand-tinted circular icon, serif display
// heading, thin brand divider — see BestellbestaetigungContent.tsx for
// the pattern this mirrors.
export default function NewsletterConfirmedPage() {
  return (
    <>
      <main className="flex flex-col flex-1 bg-bg-base">
        <Reveal className="flex flex-col gap-4 items-center text-center pt-24 pb-16 px-[var(--layout-padding-x)] w-full">
          <div className="flex items-center justify-center size-14 rounded-full bg-brand/10 text-brand shrink-0">
            <svg viewBox="0 0 24 24" className="size-6" fill="none" aria-hidden="true">
              <path d="M5 13.5 9.5 18 19 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </div>
          <p
            className="font-semibold text-display text-text-primary"
            style={{ fontFamily: "var(--font-playfair)" }}
          >
            Bestätigt!
          </p>
          <p
            className="font-semibold text-h3 text-text-primary"
            style={{ fontFamily: "var(--font-lora)" }}
          >
            Deine Newsletter-Anmeldung ist eingegangen.
          </p>
          <div className="h-[0.125rem] w-8 bg-brand" />

          <div className="flex flex-col gap-4 text-left text-body text-text-muted max-w-[28rem] pt-2">
            <p>Hallo,</p>
            <p>schön, dass du da bist!</p>
            <p>
              Ab jetzt bekommst du wöchentlich meine Sonntags-Impulse direkt in dein Postfach –
              mit kurzen Gedanken und praktischen Impulsen für mehr Klarheit im Alltag.
            </p>
            <p>Als kleines Dankeschön habe ich direkt etwas für dich:</p>

            <div className="flex flex-col gap-3 bg-bg-muted rounded-md px-6 py-5">
              <p className="font-semibold text-text-primary">🧭 Dein Klarheitskompass</p>
              <p>Du erhältst ihn in einer separaten E-Mail in den nächsten Minuten – er hilft dir, kurz innezuhalten und dich zu fragen:</p>
              <ul className="flex flex-col gap-2">
                <li className="flex items-start gap-2">
                  <CheckIcon />
                  <span>Was beschäftigt mich gerade?</span>
                </li>
                <li className="flex items-start gap-2">
                  <CheckIcon />
                  <span>Was ist wirklich wichtig?</span>
                </li>
                <li className="flex items-start gap-2">
                  <CheckIcon />
                  <span>Worauf möchte ich meinen Fokus legen?</span>
                </li>
              </ul>
            </div>

            <p>Bis die erste Mail am Sonntag kommt, habe ich noch eine kleine Einladung:</p>
            <p>
              Beobachte in den nächsten Tagen einfach einmal, womit du deine Aufmerksamkeit
              verbringst. Nicht bewerten. Nur wahrnehmen.
            </p>
            <p>
              Bis Sonntag
              <br />
              <span className="text-text-primary font-semibold">Björn</span>
            </p>
          </div>

          <Link
            href="/shop"
            className="inline-flex items-center justify-center px-7 py-4 mt-4 rounded-sm bg-brand hover:bg-brand-hover active:scale-[0.97] transition-all font-bold text-h4 text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base"
          >
            Jetzt stöbern
          </Link>
        </Reveal>
        <TrustRow />
      </main>
      <Footer />
    </>
  );
}

// Same checkmark used by PageBlocks.tsx's checklistImage block (and
// /lebensuhr's, /7-tage-klarheits-check's own checklists).
function CheckIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" className="shrink-0 mt-1">
      <path d="M3 9.5l4 4L15 4" stroke="#f6a701" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}