const { Button, Input, Logo, NoteCard, Card, Tag } = window.RePairDesignSystem_eab2dc;

const ILL_HERO = "../../assets/illustrations/repair-toolset-ink.svg";
const ILL_BAND_LIGHT = "../../assets/illustrations/repair-sewing-machine-light.svg";

const CRAFTS = ["Alle", "Schneiderei", "Keramik", "Schuhe", "Elektronik", "Fahrräder", "Möbel"];

const STUDIOS = [
  ["Flick Studio", "Buchbinderei · Kreuzberg", "lavender"],
  ["Nadel", "Schneiderei · Wedding", "chartreuse"],
  ["Kesselhaus", "Fahrräder · Moabit", "secondary"],
];

/* One hand-drawn hook, curling down toward whatever it's aimed at. A single
   asset — .repair-note-arrow--mirror flips it for the other side, same trick
   .repair-tape-bottom uses on its own mask. See tokens/brand.css .repair-note. */
function NoteArrow({ mirror = false }) {
  return (
    <svg
      className={mirror ? "repair-note-arrow repair-note-arrow--mirror" : "repair-note-arrow"}
      width="34" height="72" viewBox="0 0 44 84" aria-hidden="true"
    >
      <path d="M34 4 C 41 9 37 21 25 21 C 9 21 3 35 10 49 C 15 60 27 61 24 76" />
      <path d="M14 67 L24 76 L31 63" />
    </svg>
  );
}

const STEPS = [
  { n: "01", title: "Foto machen", body: "Ein Foto reicht. Die Plattform erkennt, was genau kaputt ist.", img: "../../assets/steps/schritt-1-foto.jpg", alt: "Foto eines kaputten Gegenstands", tint: "lavender" },
  { n: "02", title: "Anleitung bekommen", body: "Passende Tutorials und Anleitungen, um deine Sache selbst zu reparieren.", img: "../../assets/steps/schritt-2-anleitung.jpg", alt: "Reparatur-Anleitung", tint: "chartreuse" },
  { n: "03", title: "Macher finden", body: "Repair-Cafés und Circular-Economy-Fans in deiner Nähe zum Vernetzen und Austauschen.", img: "../../assets/steps/schritt-3-vernetzen.jpg", alt: "Menschen bei einem Repair-Café", tint: "cream" },
];
const STEP_TINT = { lavender: "var(--card-tint-lavender)", chartreuse: "var(--card-tint-chartreuse)", cream: "var(--card-tint-cream)" };

/* Header + footer, translated for the German marketing site. Scroll-anchor nav,
   mirroring the click-through header from ui_kits/website but for a single
   long-form landing page instead of routed screens. */
function SiteHeader() {
  return (
    <header style={{ position: "sticky", top: 0, zIndex: 10, background: "var(--surface-page)", display: "flex", alignItems: "center", justifyContent: "space-between", padding: "var(--scale-500) var(--scale-800)" }}>
      <a href="#top" style={{ textDecoration: "none", display: "inline-flex" }}>
        <Logo size={28} />
      </a>
      <nav style={{ display: "flex", gap: "var(--scale-700)" }}>
        <a href="#werkstaetten" style={{ fontSize: "var(--font-size-16)", textDecoration: "none", color: "var(--text-default-caption)" }}>Werkstätten</a>
        <a href="#ablauf" style={{ fontSize: "var(--font-size-16)", textDecoration: "none", color: "var(--text-default-caption)" }}>So funktioniert's</a>
        <a href="#" onClick={(e) => e.preventDefault()} style={{ fontSize: "var(--font-size-16)", textDecoration: "none", color: "var(--text-default-caption)" }}>Journal</a>
      </nav>
      <div style={{ display: "flex", gap: "var(--scale-300)" }}>
        <Button variant="secondary" size="sm">Anmelden</Button>
        <Button variant="primary" size="sm">Mitmachen</Button>
      </div>
    </header>
  );
}

function SiteFooter() {
  return (
    <footer className="repair-rule-top" style={{ marginTop: "var(--scale-1500)", padding: "var(--scale-600) var(--scale-800)", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: "var(--scale-400)" }}>
      <div style={{ display: "flex", gap: "var(--scale-600)" }}>
        {["Werkstätten", "Journal", "Preise", "Datenschutz", "Kontakt"].map((l) => (
          <a key={l} href="#" onClick={(e) => e.preventDefault()} style={{ fontSize: "var(--font-size-13)", textDecoration: "none", color: "var(--text-default-caption)" }}>{l}</a>
        ))}
      </div>
      <span style={{ fontSize: "var(--font-size-13)", color: "var(--text-default-caption)" }}>© 2026 Re:Pair</span>
    </footer>
  );
}

function LandingScreen() {
  const [craft, setCraft] = React.useState("Alle");
  const [email, setEmail] = React.useState("");
  const [sent, setSent] = React.useState(false);

  return (
    <main id="top">
      {/* Hero */}
      <section style={{ maxWidth: 1280, margin: "0 auto", padding: "var(--scale-1200) var(--scale-800) 0", display: "grid", gridTemplateColumns: "1.15fr 0.85fr", gap: "var(--scale-1000)", alignItems: "center" }}>
        <div>
          <h1 style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: "var(--font-weight-bold)", fontSize: "clamp(40px, 5vw, 64px)", lineHeight: "var(--line-height-scale)", letterSpacing: "-0.02em", color: "var(--text-default-hero)", textWrap: "balance" }}>
            Reparieren –<br />leicht für alle
          </h1>
          <p style={{ margin: "var(--scale-500) 0 0", maxWidth: 420, fontSize: "var(--font-size-20)", lineHeight: "var(--line-height-body)", color: "var(--text-default-caption)" }}>
            Werkstätten in deiner Nähe, sortiert nach dem, was sie reparieren. Termin buchen, vorbeibringen, repariert abholen.
          </p>
          <div className="repair-erase" style={{ display: "flex", gap: "var(--scale-300)", marginTop: "var(--scale-700)", width: "fit-content" }}>
            <Button variant="primary" onClick={() => document.getElementById("werkstaetten")?.scrollIntoView({ behavior: "smooth" })}>Werkstatt finden</Button>
            <Button variant="ghost" onClick={() => document.getElementById("ablauf")?.scrollIntoView({ behavior: "smooth" })}>So funktioniert's</Button>
          </div>
        </div>
        <span className="repair-erase" style={{ justifySelf: "center", display: "block", width: "100%", "--erase-spread": "var(--scale-1300)" }}>
          <img src={ILL_HERO} alt="Illustration von Schraubenschlüssel, Schraubenzieher, Zange und Hammer" style={{ display: "block", width: "100%", maxWidth: 520, height: "auto" }} />
        </span>
      </section>

      {/* Value trio */}
      <section style={{ maxWidth: 1280, margin: "0 auto", padding: "var(--scale-1300) var(--scale-800) 0" }}>
        <div style={{ display: "flex", flexWrap: "wrap", gap: "var(--scale-700)", justifyContent: "center", maxWidth: "100%", overflowX: "clip" }}>
          <NoteCard tint="chartreuse" title="Transparent" subtitle="Nachvollziehbare Preise" rotate={-2} />
          <NoteCard tint="lavender" title="Sicher" subtitle="Geprüfte Werkstätten" rotate={1.5} />
          <NoteCard tint="secondary" title="Fair" subtitle="So viel KI wie nötig" rotate={-1} />
        </div>
      </section>

      {/* Craft search + example studios */}
      <section id="werkstaetten" style={{ maxWidth: 1280, margin: "0 auto", padding: "var(--scale-1500) var(--scale-800) 0" }}>
        <h2 style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: "var(--font-weight-bold)", fontSize: "clamp(28px, 3vw, 39px)", lineHeight: "var(--line-height-scale)", letterSpacing: "-0.02em", color: "var(--text-default-hero)" }}>
            Wonach suchst du?
        </h2>
        <div style={{ display: "flex", alignItems: "center", gap: "var(--scale-400)", marginTop: "var(--scale-600)", flexWrap: "wrap" }}>
          <Input placeholder="Werkstatt suchen" iconStart="search" style={{ width: 280 }} />
          <div style={{ display: "flex", gap: "var(--scale-200)", flexWrap: "wrap" }}>
            {CRAFTS.map((c) => <Tag key={c} selected={craft === c} onSelect={() => setCraft(c)}>{c}</Tag>)}
          </div>
        </div>

        <div style={{ display: "flex", flexWrap: "wrap", gap: "var(--scale-600)", marginTop: "var(--scale-900)" }}>
          {STUDIOS.map(([name, kind, tint]) => (
            <Card key={name} title={name} subtitle={kind} tint={tint} href="#" style={{ width: 238 }} />
          ))}
        </div>
      </section>

      {/* Dark highlight band */}
      <section className="repair-dark repair-grid repair-tape-top repair-tape-bottom" data-repair-theme="dark" style={{ backgroundColor: "var(--surface-page)", marginTop: "var(--scale-1500)", padding: "var(--scale-1200) 0", "--tape-color": "rgba(255,255,255,.10)", "--tape-color-2": "rgba(255,255,255,.06)", "--tape-edge": "rgba(255,255,255,.62)" }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 var(--scale-800)", display: "grid", gridTemplateColumns: "auto minmax(0, 560px)", gap: "var(--scale-900)", alignItems: "center", justifyContent: "start" }}>
          <span className="repair-erase" style={{ display: "block", "--erase-spread": "var(--scale-600)", "--erase-color": "var(--surface-page)" }}>
            <img src={ILL_BAND_LIGHT} alt="Illustration einer Nähmaschine" style={{ display: "block", width: "clamp(320px, 34vw, 470px)", height: "auto" }} />
          </span>
          <div>
            <h2 style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: "var(--font-weight-bold)", fontSize: "clamp(32px, 3.6vw, 44px)", lineHeight: "var(--line-height-scale)", letterSpacing: "-0.02em", color: "var(--text-default-hero)", textWrap: "balance" }}>
              Nichts ist zu kaputt zum Reparieren
            </h2>
            <p style={{ margin: "var(--scale-400) 0 0", fontSize: "var(--font-size-20)", lineHeight: "var(--line-height-body)", color: "var(--text-default-caption)" }}>
              Jede Werkstatt auf Re:Pair macht ein Angebot, bevor sie loslegt. Du gibst grünes Licht, sie reparieren es, und was dir gehört, bleibt deins.
            </p>
            <div className="repair-erase" style={{ marginTop: "var(--scale-600)", width: "fit-content", "--erase-color": "var(--surface-page)" }}>
              <Button variant="primary" onClick={() => document.getElementById("werkstaetten")?.scrollIntoView({ behavior: "smooth" })}>Werkstätten durchstöbern</Button>
            </div>
          </div>
        </div>
      </section>

      {/* Three-step process */}
      <section id="ablauf" style={{ maxWidth: 1280, margin: "0 auto", padding: "var(--scale-1200) var(--scale-800) 0" }}>
        <div className="repair-rule-top" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "var(--scale-800)", paddingTop: "var(--scale-600)" }}>
          {STEPS.map((s) => (
            <div key={s.n}>
              <div style={{ width: 56, height: 56, borderRadius: "var(--border-radius-300)", background: STEP_TINT[s.tint], overflow: "hidden", marginBottom: "var(--scale-400)" }}>
                <img
                  src={s.img} alt={s.alt}
                  style={{ display: "block", width: "100%", height: "100%", objectFit: "cover" }}
                  onError={(e) => { e.currentTarget.style.display = "none"; }}
                />
              </div>
              <h3 style={{ margin: "0 0 var(--scale-200)", fontFamily: "var(--font-display)", fontWeight: "var(--font-weight-bold)", fontSize: "var(--font-size-20)", color: "var(--text-default-hero)" }}>{s.title}</h3>
              <p style={{ margin: 0, fontSize: "var(--font-size-16)", lineHeight: "var(--line-height-body)", color: "var(--text-default-caption)" }}>{s.body}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Newsletter */}
      <section className="repair-dark repair-grid repair-kintsugi-top repair-kintsugi-bottom" data-repair-theme="dark" style={{ marginTop: "var(--scale-1500)", padding: "var(--scale-1600) var(--scale-800) calc(var(--scale-1600) + 5rem)", textAlign: "center", backgroundColor: "var(--surface-page)" }}>
        <h2 style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: "var(--font-weight-bold)", fontSize: "clamp(32px, 4vw, 48px)", letterSpacing: "-0.02em", color: "var(--text-default-hero)" }}>Neugierig?</h2>
        <p style={{ margin: "var(--scale-300) 0 var(--scale-700)", fontSize: "var(--font-size-16)", color: "var(--text-default-caption)" }}>Reparatur-Tipps und neue Werkstätten, einmal im Monat.</p>
        {sent ? (
          <p style={{ margin: 0, fontSize: "var(--font-size-16)", color: "var(--text-default-body)" }}>Danke – schau in dein Postfach, um zu bestätigen.</p>
        ) : (
          <div style={{ position: "relative", maxWidth: 460, margin: "0 auto" }}>
            <div className="repair-note" aria-hidden="true" style={{ left: "-8.5rem", top: "-7.25rem" }}>
              <span className="repair-note-text" style={{ transform: "rotate(-4deg)" }}>Nur echte Tipps,<br />kein Spam</span>
              <span style={{ display: "inline-block", transform: "rotate(8deg)" }}><NoteArrow /></span>
            </div>
            <div className="repair-note" aria-hidden="true" style={{ right: "-7rem", top: "3.5rem" }}>
              <span style={{ display: "inline-block", transform: "rotate(174deg)" }}><NoteArrow /></span>
              <span className="repair-note-text" style={{ transform: "rotate(3deg)" }}>Trag dich<br />einfach ein</span>
            </div>
            <form
              onSubmit={(e) => { e.preventDefault(); if (email) setSent(true); }}
              style={{ display: "flex", alignItems: "center", gap: "var(--scale-300)" }}
            >
              <Input
                size="lg" type="email" required value={email} onChange={(e) => setEmail(e.target.value)}
                placeholder="Deine E-Mail-Adresse"
              />
              <Button type="submit" variant="primary" size="lg">Abonnieren</Button>
            </form>
          </div>
        )}
        <p style={{ margin: "var(--scale-400) 0 0", fontSize: "var(--font-size-13)", letterSpacing: "var(--letter-spacing-wide)", textTransform: "uppercase", color: "var(--text-default-caption)" }}>Kein Spam. Jederzeit abbestellbar</p>
      </section>
    </main>
  );
}

Object.assign(window, { SiteHeader, SiteFooter, LandingScreen });