"use client";

import Link from "next/link";
import Image from "next/image";
import { Reveal } from "../../components/Reveal";
import { useNewsletterSignup } from "../../lib/useNewsletterSignup";

// Same lock icon + copy as /challenge's and the shared Newsletter
// component's trust note — unified across all newsletter-signup forms.
function LockIcon() {
  return (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" className="shrink-0">
      <rect x="2" y="6" width="10" height="7" rx="1.5" stroke="#888" strokeWidth="1.3" />
      <path d="M4.5 6V4.5a2.5 2.5 0 0 1 5 0V6" stroke="#888" strokeWidth="1.3" />
    </svg>
  );
}

// Inline, brand-orange stroke — icon-check.svg's fill lives in an internal
// CSS var that can't be recolored from outside the SVG when loaded via
// <img src>/next/image, same fix/reasoning as todo-cards's own IconCheck.
function IconCheck() {
  return (
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="size-5 shrink-0 mt-1">
      <path d="M4 10.5l4.5 4.5L16 5.5" stroke="#f6a701" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

const checklist = [
  "Jeden Mittwoch neue Impulse & Tipps",
  "Kurz & knackig – in 5 Minuten gelesen",
  "Sofort umsetzbar für mehr Fokus und Struktur",
  "Kostenlos und jederzeit abbestellbar",
];

export function WeeklyImpulsesHero() {
  const { email, emailError, consent, handleConsentChange, status, error, successMessage, emailRef, handleEmailChange, handleEmailBlur, handleSubmit } =
    useNewsletterSignup("newsletter-hero");

  return (
    <section className="bg-bg-base w-full overflow-hidden">
      {/* Same lg:-only structural exception as Home/todo-cards Hero (see
          figma-to-nextjs skill Gotcha #5) — a wide fixed-ratio photo next
          to a text column gets too cramped at Tablet widths even under
          the site-wide sm: (640px) structural consolidation. lg:items-
          center removed — see the breadcrumb/centering comment below,
          same fix as /todo-cards. */}
      {/* pt-10 md:pt-12, no lg override — same fix and same reasoning as
          /todo-cards's Hero: this is now the only thing positioning the
          breadcrumb, and it must match /todo-cards's and /challenge's
          value exactly for the breadcrumb to land at the same Y everywhere. */}
      <div className="flex flex-col lg:grid lg:grid-cols-12 gap-8 lg:gap-[var(--layout-grid-gap)] pt-10 md:pt-12">
        <Reveal className="order-1 lg:order-none lg:col-span-5 flex flex-col gap-6 items-start pl-[var(--layout-padding-x)] pr-10 lg:pr-0">
          {/* Breadcrumb — 3 levels here (Startseite › Werkzeuge › Impulse &
              Tipps), matching this page's actual Figma breadcrumb.
              Deliberately NOT part of the centered block below — see its
              comment. */}
          <p className="flex items-center gap-2 text-body-sm text-text-muted">
            <Link href="/" className="hover:text-brand transition-colors">
              Startseite
            </Link>
            <span>›</span>
            <Link href="/#werkzeuge" className="hover:text-brand transition-colors">
              Werkzeuge
            </Link>
            <span>›</span>
            <span className="text-text-primary">Impulse & Tipps</span>
          </p>

          {/* Everything else — centered in the remaining vertical space at
              lg+, same fix as /todo-cards's Hero: keeps the breadcrumb
              above at a fixed, cross-page-consistent Y position instead of
              its offset drifting with this page's larger content (pill
              badge + 4 checklist items vs. /todo-cards's 3, no badge). */}
          <div className="flex flex-col gap-6 items-start w-full flex-1 lg:justify-center">
            {/* Pill badge */}
            <div className="flex gap-2 items-center border border-border rounded-full pl-3.5 pr-4 py-2">
              <Image alt="" src="/icon-envelope-small.svg" width={16} height={12} className="w-4 h-3 shrink-0" />
              <span className="text-body-sm font-semibold text-text-primary whitespace-nowrap">
                Jeden Mittwoch in deinem Postfach
              </span>
            </div>

            {/* Heading — 48px Desktop, same new --text-h-page token as
                /todo-cards's hero heading (see globals.css). */}
            <p
              className="font-semibold text-h-page text-text-primary leading-[1.1]"
              style={{ fontFamily: "var(--font-playfair)" }}
            >
              Impulse & Tipps.
              <br />
              Wöchentliche Klarheit
              <br />
              für deinen Alltag<span className="text-brand">.</span>
            </p>

            <p className="text-body text-text-body">
              Einmal pro Woche bekommst du konkrete Impulse, die dich wirklich weiterbringen – kurz, praktisch und direkt umsetzbar.
            </p>

            <ul className="flex flex-col gap-3 items-start w-full">
              {checklist.map((item) => (
                <li key={item} className="flex gap-[0.625rem] items-start w-full">
                  <IconCheck />
                  <span className="flex-1 text-body text-text-primary">{item}</span>
                </li>
              ))}
            </ul>

            {/* Inline email capture — page-specific, simpler than the shared
                Newsletter component's panel form (no button-adjacent styling
                needed here, just input + submit inline). */}
            {status === "success" ? (
              <p className="text-body text-text-primary font-medium">{successMessage}</p>
            ) : (
              <form onSubmit={handleSubmit} className="flex flex-col gap-3 items-start w-full">
                {/* flex-col sm:flex-row, no items-start at the base tier —
                    stacks full-width below sm: (default align-items:
                    stretch is what makes the button fill the row once
                    stacked), same pattern as /challenge's EmailCapture.
                    Was a fixed row at every width before, squeezing input
                    + button together on a narrow phone (fixed 2026-07-24,
                    consistency with the other mail CTAs). */}
                <div className="flex flex-col sm:flex-row sm:items-start gap-3 w-full">
                  <input
                    ref={emailRef}
                    type="email"
                    required
                    value={email}
                    onChange={(e) => handleEmailChange(e.target.value)}
                    onBlur={(e) => handleEmailBlur(e.target.value)}
                    placeholder="Deine E-Mail-Adresse"
                    aria-invalid={Boolean(emailError)}
                    className={`w-full sm:w-[17.5rem] bg-bg-base border rounded-sm px-4 py-[0.8125rem] text-body-sm text-text-muted font-normal outline-none transition-colors ${
                      emailError ? "border-red-600 focus:border-red-600" : "border-border focus:border-brand"
                    }`}
                  />
                  <button
                    type="submit"
                    disabled={status === "submitting"}
                    className="shrink-0 bg-brand rounded-sm px-6 py-[0.8125rem] font-bold text-body text-text-primary whitespace-nowrap hover:bg-brand-hover active:scale-[0.97] transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base disabled:opacity-60 disabled:pointer-events-none"
                  >
                    {status === "submitting" ? "Wird gesendet…" : "Jetzt anmelden"}
                  </button>
                </div>
                {emailError && (
                  <p className="text-label text-red-600 font-normal">{emailError}</p>
                )}

                {/* Consent checkbox — this signup's legal basis is consent
                    (email marketing), same wording/pattern as the shared
                    Newsletter component's and NewsletterModal's checkbox. */}
                <label className="flex gap-2 items-start cursor-pointer">
                  <input
                    type="checkbox"
                    required
                    checked={consent}
                    onChange={(e) => handleConsentChange(e.target.checked)}
                    className="size-4 shrink-0 mt-0.5 rounded-xs border border-border accent-brand"
                  />
                  <span className="text-label text-text-primary font-normal leading-normal">
                    Ich akzeptiere die{" "}
                    <Link
                      href="/datenschutz"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="underline hover:text-brand"
                    >
                      Datenschutzerklärung
                    </Link>
                    .
                  </span>
                </label>

                {status === "error" && (
                  <p className="text-label text-red-600 font-normal">{error}</p>
                )}

                <div className="flex gap-[0.375rem] items-center">
                  <LockIcon />
                  <span className="text-label text-[#888]">Keine Werbung. Jederzeit abbestellbar.</span>
                </div>
              </form>
            )}
          </div>
        </Reveal>

        <Reveal
          className="order-2 lg:order-none lg:col-span-7 group relative w-full aspect-[830/611] rounded-md overflow-hidden"
          delay={0.15}
        >
          <Image
            src="/hero-weekly-impulses.png"
            alt="Notizbuch mit wöchentlichem Impuls, Kaffee und Stift"
            fill
            priority
            sizes="(min-width: 1024px) 58vw, 100vw"
            className="object-cover transition-transform duration-500 group-hover:scale-105"
          />
        </Reveal>
      </div>
    </section>
  );
}
