/* global React, ReactDOM */
const { useState, useEffect, useRef, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#FBBF24",
  "heroVariant": "editorial",
  "showStripes": true,
  "darkness": 8
}/*EDITMODE-END*/;

const HERO_SLIDES = [
  { src: "images/hero-audi-s3.png", glow: "#1f63d8" },
  { src: "images/hero-taycan.png",  glow: "#7a8290" },
  { src: "images/hero-ineos.png",   glow: "#4f9ab1" },
  { src: "images/hero-rangerover.png", glow: "#7a3a32" },
];
function HeroSlideshow() {
  const [i, setI] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setI((x) => (x + 1) % HERO_SLIDES.length), 4500);
    return () => clearInterval(id);
  }, []);
  return (
    <div style={{ position: "relative" }}>
      {HERO_SLIDES.map((slide, idx) => (
        <div
          key={"glow-" + slide.src}
          aria-hidden
          style={{
            position: "absolute",
            left: "50%", top: "-60%",
            transform: "translateX(-50%)",
            width: "130%", height: "150%",
            background: `radial-gradient(ellipse 55% 50% at 50% 55%, ${slide.glow} 0%, ${slide.glow}dd 20%, ${slide.glow}88 42%, ${slide.glow}33 62%, transparent 80%)`,
            filter: "blur(120px)",
            mixBlendMode: "screen",
            opacity: idx === i ? 1 : 0,
            pointerEvents: "none",
            transition: "opacity 1600ms cubic-bezier(0.4, 0, 0.2, 1)",
            zIndex: 0,
          }}
        />
      ))}
      <div className="placeholder hero-slideshow" style={{ aspectRatio: "21/8", overflow: "hidden", position: "relative", zIndex: 1, borderRadius: "12px" }}>
        {HERO_SLIDES.map((slide, idx) => (
          <img
            key={slide.src}
            src={slide.src}
            alt=""
            style={{
              position: "absolute", inset: 0,
              width: "100%", height: "100%", objectFit: "cover",
              opacity: idx === i ? 1 : 0,
              transform: idx === i ? "scale(1.0)" : "scale(1.04)",
              transition: "opacity 1600ms cubic-bezier(0.4, 0, 0.2, 1), transform 5000ms ease-out",
            }}
          />
        ))}
        <div style={{
          position: "absolute", inset: 0, pointerEvents: "none",
          background: "linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.55) 78%, rgba(0,0,0,0.92) 100%)",
        }} />
      </div>
    </div>
  );
}

// --- Striped placeholder for car imagery -------------------------------------
function Placeholder({ label, ratio = "16/9", className = "", dark = true }) {
  const stripeStroke = dark ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.06)";
  const bg = dark ? "rgba(255,255,255,0.025)" : "rgba(0,0,0,0.025)";
  const uid = React.useId().replace(/:/g, "");
  const patternId = `stripe-${uid}`;
  return (
    <div
      className={`placeholder ${className}`}
      style={{ aspectRatio: ratio, background: bg, borderColor: dark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.08)" }}
    >
      <svg className="placeholder-stripes" width="100%" height="100%" preserveAspectRatio="none">
        <defs>
          <pattern id={patternId} width="14" height="14" patternUnits="userSpaceOnUse" patternTransform="rotate(-30)">
            <line x1="0" y1="0" x2="0" y2="14" stroke={stripeStroke} strokeWidth="1" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill={`url(#${patternId})`} />
      </svg>
      <span className="placeholder-label">{label}</span>
    </div>
  );
}

// --- Top nav ----------------------------------------------------------------
function Nav({ onBook }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const links = [
    ["Leistungen", "#leistungen"],
    ["Pakete", "#pakete"],
    ["Manufaktur", "#manufaktur"],
    ["Galerie", "#galerie"],
    ["Kontakt", "#kontakt"],
  ];

  return (
    <header className={`nav ${scrolled ? "nav--scrolled" : ""}`}>
      <div className="nav-inner">
        <a href="#top" className="brand">
          <span className="brand-mark">GM</span>
          <span className="brand-word">
            <span>Glanzmanufaktur</span>
            <span className="brand-sub">München · seit 2024</span>
          </span>
        </a>
        <nav className="nav-links">
          {links.map(([label, href]) => (
            <a key={href} href={href}>{label}</a>
          ))}
        </nav>
        <div className="nav-cta">
          <a href="tel:+4915734828543" className="nav-phone">+49 157 34 828 543</a>
          <button className="btn btn--gold" onClick={onBook}>Termin buchen</button>
        </div>
        <button className={`nav-burger ${open ? "is-open" : ""}`} onClick={() => setOpen(!open)} aria-label="Menü">
          <span></span><span></span>
        </button>
      </div>
      {open && (
        <div className="nav-mobile">
          {links.map(([label, href]) => (
            <a key={href} href={href} onClick={() => setOpen(false)}>{label}</a>
          ))}
          <button className="btn btn--gold" onClick={() => { setOpen(false); onBook(); }}>Termin buchen</button>
        </div>
      )}
    </header>
  );
}

// --- Hero -------------------------------------------------------------------
function Hero({ onBook, variant }) {
  return (
    <section className={`hero hero--${variant}`} id="top">
      <div className="hero-grid">
        <div className="hero-meta">
          <span className="eyebrow">
            <span className="eyebrow-dot" />
            Putzbrunner Straße 89 · München Südost
          </span>
        </div>

        <h1 className="hero-title">
          <span className="hero-title-line">Perfektion</span>
          <span className="hero-title-line">
            bis ins <em>Detail</em>.
          </span>
        </h1>

        <div className="hero-side">
          <p className="hero-lede">
            Manufaktur für Fahrzeugaufbereitung, Lackkorrektur und
            Keramikversiegelung. Handarbeit aus München —
            für alle, die ihr Fahrzeug nicht nur fahren, sondern lieben.
          </p>
          <div className="hero-cta">
            <button className="btn btn--gold btn--lg" onClick={onBook}>Termin anfragen</button>
            <a href="#leistungen" className="btn btn--ghost btn--lg">Leistungen ansehen →</a>
          </div>
        </div>

        <div className="hero-strip">
          <HeroSlideshow />
          <div className="hero-strip-overlay">
            <div>
              <div className="kpi">200+</div>
              <div className="kpi-label">Fahrzeuge veredelt</div>
            </div>
            <div>
              <div className="kpi">30h</div>
              <div className="kpi-label">Ø Detailing-Aufwand</div>
            </div>
            <div>
              <div className="kpi">5,0</div>
              <div className="kpi-label">Google Bewertung</div>
            </div>
          </div>
        </div>

        <div className="hero-marquee">
          <div className="marquee-track">
            {Array(2).fill(0).map((_, i) => (
              <div key={i} className="marquee-row">
                <span>Innenreinigung</span><span>·</span>
                <span>Außenreinigung</span><span>·</span>
                <span>Lackkorrektur</span><span>·</span>
                <span>Keramikversiegelung</span><span>·</span>
                <span>Lederpflege</span><span>·</span>
                <span>Scheinwerferaufbereitung</span><span>·</span>
                <span>Ozonbehandlung</span><span>·</span>
                <span>Smart Repair</span><span>·</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// --- Services Section -------------------------------------------------------
const SERVICES = [
  {
    id: "innen",
    no: "01",
    title: "Innenreinigung",
    intro: "Sauberer, frischer und angenehmer Innenraum — bis in die letzte Naht.",
    image: "images/taycan-seat-clean.png",
    packages: [
      {
        name: "Interieur Basis",
        from: "ab 69 €",
        items: [
          "Aussaugen Innen- und Kofferraum",
          "Tiefenreinigung mit Tornador",
          "Oberflächenreinigung",
          "Scheibenreinigung innen",
        ],
      },
      {
        name: "Interieur Premium",
        from: "ab 199 €",
        featured: true,
        items: [
          "Aussaugen Innen- und Kofferraum",
          "Tiefenreinigung mit Tornador",
          "Oberflächenreinigung & -pflege",
          "Pinseln aller Kanten und Ritzen",
          "Schamponieren von Teppich, Fußraum, Sitzen",
          "Leder/Alcantara Reinigung & Pflege",
          "Scheibenreinigung innen",
        ],
      },
    ],
  },
  {
    id: "aussen",
    no: "02",
    title: "Außenreinigung",
    intro: "Schonend von Hand — Ihr Fahrzeug erstrahlt wieder in neuem Glanz.",
    image: "images/ineos-front.png",
    packages: [
      {
        name: "Exterieur Basis",
        from: "ab 49 €",
        items: [
          "Außenwäsche von Hand",
          "Felgenreinigung (Sichtseite)",
          "Scheibenreinigung außen",
          "Trocknen mit Mikrofasertuch",
        ],
      },
      {
        name: "Exterieur Premium",
        from: "ab 99 €",
        featured: true,
        items: [
          "Außenwäsche von Hand",
          "Insekten- & Flugrostentfernung",
          "Felgenreinigung (Sichtseite)",
          "Reinigung der Radkästen",
          "Pinseln aller Kanten und Ritzen",
          "Türholme & Rahmen",
          "Reifen- & Kunststoffpflege",
          "Trocknen mittels Druckluft",
        ],
      },
    ],
  },
  {
    id: "lack",
    no: "03",
    title: "Lackkorrektur",
    intro: "Kratzer entfernen, Tiefenglanz herstellen — ein- bis dreistufig.",
    image: "images/audi-s3-side.png",
    packages: [
      { name: "1-stufige Politur", from: "ab 289 €", items: ["Holo­gramm­entfernung", "Auffrischen matter Stellen", "Glanz­steigerung", "Vorbereitung für Versiegelung"] },
      { name: "2-stufige Politur", from: "ab 439 €", featured: true, items: ["Defektkorrektur", "Swirl-Entfernung", "Tiefenglanz", "Hochglanz-Finish"] },
      { name: "3-stufige Politur", from: "ab 589 €", items: ["Vollständige Defektkorrektur", "Tiefere Kratzer schleifen", "Mehrstufiger Glanzaufbau", "Concours-Finish"] },
    ],
  },
  {
    id: "schutz",
    no: "04",
    title: "Versiegelung",
    intro: "Langanhaltender Schutz für Lack, Glas, Felgen, Leder und Stoff.",
    image: "images/rangerover-front.png",
    packages: [
      { name: "Keramikversiegelung", from: "Preis auf Anfrage", featured: true, items: ["Lack", "Glas", "Kunststoff", "Felgen & Bremssättel", "5+ Jahre Schutz"] },
      { name: "Textil & Leder", from: "Preis auf Anfrage", items: ["Lederimprägnierung", "Alcantaraimprägnierung", "Stoffimprägnierung", "Verdeckimprägnierung"] },
    ],
  },
];

function Services() {
  const [active, setActive] = useState("innen");
  const current = SERVICES.find(s => s.id === active);

  return (
    <section className="services" id="leistungen">
      <div className="section-head">
        <span className="section-no">— Leistungen</span>
        <h2 className="section-title">Vier Disziplinen.<br/>Ein Anspruch: <em>Perfektion.</em></h2>
      </div>

      <div className="service-tabs">
        {SERVICES.map(s => (
          <button
            key={s.id}
            className={`service-tab ${active === s.id ? "is-active" : ""}`}
            onClick={() => setActive(s.id)}
          >
            <span className="service-tab-no">{s.no}</span>
            <span className="service-tab-title">{s.title}</span>
            <span className="service-tab-arrow">↗</span>
          </button>
        ))}
      </div>

      <div className="service-detail" id="pakete">
        <div className="service-detail-head">
          <div>
            <span className="service-detail-no">{current.no} / 04</span>
            <h3 className="service-detail-title">{current.title}</h3>
            <p className="service-detail-intro">{current.intro}</p>
          </div>
          {current.image ? (
            <div className="placeholder service-detail-img" style={{ aspectRatio: "4/3", overflow: "hidden" }}>
              <img src={current.image} alt={current.title} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            </div>
          ) : (
            <Placeholder label={`${current.title.toUpperCase()} · Detailaufnahme`} ratio="4/3" className="service-detail-img" />
          )}
        </div>

        <div className="package-grid">
          {current.packages.map((p, i) => (
            <article key={i} className={`package ${p.featured ? "package--featured" : ""}`}>
              <header className="package-head">
                <h4>{p.name}</h4>
                <span className="package-price">{p.from}</span>
              </header>
              <ul className="package-items">
                {p.items.map((it, j) => (
                  <li key={j}>
                    <span className="check">+</span>
                    <span>{it}</span>
                  </li>
                ))}
              </ul>
              {p.featured && <span className="package-badge">Empfehlung</span>}
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// --- Process ---------------------------------------------------------------
const PROCESS = [
  { n: "01", t: "Anfrage & Beratung", d: "Wir besprechen Zustand und Ziel — telefonisch oder vor Ort. Kein Pauschalangebot, sondern eine individuelle Einschätzung." },
  { n: "02", t: "Begutachtung", d: "Lackmessung, Defektanalyse, Oberflächentest. Wir wissen vorher, was wir nachher liefern können." },
  { n: "03", t: "Detailing", d: "Handarbeit von 3 bis 30+ Stunden. Jede Naht, jede Kante, jede Reflexion." },
  { n: "04", t: "Übergabe", d: "Gemeinsame Endkontrolle bei Tageslicht. Pflegehinweise inklusive." },
];

function Process() {
  return (
    <section className="process" id="manufaktur">
      <div className="section-head">
        <span className="section-no">— Manufaktur-Prinzip</span>
        <h2 className="section-title">Vier Schritte.<br/>Keine Abkürzungen.</h2>
      </div>
      <ol className="process-list">
        {PROCESS.map(p => (
          <li key={p.n} className="process-item">
            <span className="process-no">{p.n}</span>
            <h3 className="process-title">{p.t}</h3>
            <p className="process-desc">{p.d}</p>
          </li>
        ))}
      </ol>
    </section>
  );
}

// --- Car Marquee -----------------------------------------------------------
function CarMarquee() {
  const rowA = [
    "images/audi-s3-front.png",
    "images/taycan-rear.png",
    "images/ineos-front.png",
    "images/rangerover-front.png",
    "images/audi-s3-side.png",
    "images/ineos-wheel.png",
    "images/audi-s3-rear.png",
    "images/rangerover-steering.png",
  ];
  const rowB = [
    "images/rangerover-interior.png",
    "images/taycan-interior.png",
    "images/ineos-rear.png",
    "images/audi-s3-side.png",
    "images/taycan-seat-clean.png",
    "images/rangerover-front.png",
    "images/ineos-front.png",
    "images/audi-s3-front.png",
  ];
  const dup = (arr) => [...arr, ...arr];
  return (
    <section className="car-marquee" aria-hidden="true">
      <div className="car-marquee-track car-marquee-track--a">
        {dup(rowA).map((src, i) => (
          <figure className="car-marquee-item" key={`a${i}`}>
            <img src={src} alt="" loading="lazy" />
          </figure>
        ))}
      </div>
      <div className="car-marquee-track car-marquee-track--b">
        {dup(rowB).map((src, i) => (
          <figure className="car-marquee-item" key={`b${i}`}>
            <img src={src} alt="" loading="lazy" />
          </figure>
        ))}
      </div>
    </section>
  );
}

// --- Configurator ----------------------------------------------------------
const CONFIG_STEPS = [
  {
    key: "carClass",
    q: "Fahrzeugklasse?",
    opts: [
      { v: "kompakt", l: "Kompakt", sub: "Polo, A1, Mini …", mult: 1 },
      { v: "mittel", l: "Mittelklasse", sub: "3er, A4, C-Klasse …", mult: 1.15 },
      { v: "suv", l: "SUV / Van", sub: "X5, Q7, GLE …", mult: 1.35 },
      { v: "luxus", l: "Luxus / Sport", sub: "RS, AMG, Porsche …", mult: 1.6 },
    ],
  },
  {
    key: "service",
    q: "Welches Programm?",
    opts: [
      { v: "innen", l: "Innenreinigung Premium", sub: "ab 199 €", base: 199 },
      { v: "aussen", l: "Außenreinigung Premium", sub: "ab 99 €", base: 99 },
      { v: "kombi", l: "Innen + Außen", sub: "ab 279 €", base: 279 },
      { v: "full", l: "Full Detailing", sub: "ab 1.290 €", base: 1290 },
    ],
  },
  {
    key: "extra",
    q: "Versiegelung dazu?",
    opts: [
      { v: "none", l: "Nein, danke", sub: "—", add: 0 },
      { v: "lack", l: "Keramik · Lack", sub: "+ ab 590 €", add: 590 },
      { v: "full", l: "Keramik · Komplett", sub: "+ ab 990 €", add: 990 },
      { v: "leder", l: "Lederimprägnierung", sub: "+ ab 149 €", add: 149 },
    ],
  },
];

function Configurator({ onBook }) {
  const [step, setStep] = useState(0);
  const [picks, setPicks] = useState({});

  const total = useMemo(() => {
    const cls = CONFIG_STEPS[0].opts.find(o => o.v === picks.carClass);
    const svc = CONFIG_STEPS[1].opts.find(o => o.v === picks.service);
    const ext = CONFIG_STEPS[2].opts.find(o => o.v === picks.extra);
    if (!cls || !svc) return null;
    const base = svc.base * cls.mult;
    const add = ext ? ext.add : 0;
    return Math.round((base + add) / 10) * 10;
  }, [picks]);

  const cur = CONFIG_STEPS[step];
  const done = step >= CONFIG_STEPS.length;

  return (
    <section className="config">
      <div className="config-grid">
        <div className="config-side">
          <span className="section-no">— Konfigurator</span>
          <h2 className="section-title">In 30 Sekunden zum <em>Richtpreis.</em></h2>
          <p className="config-lede">
            Drei Fragen, eine erste Hausnummer. Der finale Preis ergibt sich nach
            Begutachtung — fair und nachvollziehbar.
          </p>
          <div className="config-progress">
            {CONFIG_STEPS.map((s, i) => (
              <span key={s.key} className={`config-dot ${i <= step ? "is-on" : ""}`} />
            ))}
          </div>
        </div>

        <div className="config-main">
          {!done ? (
            <>
              <div className="config-q">
                <span className="config-step">{String(step + 1).padStart(2, "0")} / {String(CONFIG_STEPS.length).padStart(2, "0")}</span>
                <h3>{cur.q}</h3>
              </div>
              <div className="config-opts">
                {cur.opts.map(o => (
                  <button
                    key={o.v}
                    className={`config-opt ${picks[cur.key] === o.v ? "is-picked" : ""}`}
                    onClick={() => {
                      setPicks({ ...picks, [cur.key]: o.v });
                      setTimeout(() => setStep(step + 1), 220);
                    }}
                  >
                    <span className="config-opt-l">{o.l}</span>
                    <span className="config-opt-sub">{o.sub}</span>
                  </button>
                ))}
              </div>
              {step > 0 && (
                <button className="config-back" onClick={() => setStep(step - 1)}>← Zurück</button>
              )}
            </>
          ) : (
            <div className="config-result">
              <span className="config-step">Ergebnis</span>
              <div className="config-total">
                <span className="config-total-label">Richtpreis ab</span>
                <span className="config-total-num">{total} €</span>
              </div>
              <ul className="config-summary">
                <li><span>Fahrzeugklasse</span><span>{CONFIG_STEPS[0].opts.find(o=>o.v===picks.carClass).l}</span></li>
                <li><span>Programm</span><span>{CONFIG_STEPS[1].opts.find(o=>o.v===picks.service).l}</span></li>
                <li><span>Versiegelung</span><span>{CONFIG_STEPS[2].opts.find(o=>o.v===picks.extra).l}</span></li>
              </ul>
              <div className="config-actions">
                <button className="btn btn--gold btn--lg" onClick={onBook}>Termin anfragen</button>
                <button className="btn btn--ghost" onClick={() => { setStep(0); setPicks({}); }}>Neu starten</button>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

// --- Gallery ---------------------------------------------------------------
const GALLERY = [
  { tag: "Audi S3 · Uniblau", note: "Front · Keramik-Finish", image: "images/audi-s3-front.png", ratio: "3/4", layout: "tall" },
  { tag: "Audi S3 · Uniblau", note: "Heck · S3 Detail", image: "images/audi-s3-rear.png", ratio: "3/4", layout: "tall" },
  { tag: "Audi S3 · Uniblau", note: "Frontansicht · Studio", image: "images/audi-s3-side.png", ratio: "3/4", layout: "tall" },
  { tag: "Ineos Grenadier", note: "Front · Studio-Beleuchtung", image: "images/ineos-front.png", ratio: "3/4", layout: "tall" },
  { tag: "Ineos Grenadier", note: "Heck · Reserverad-Detail", image: "images/ineos-rear.png", ratio: "3/4", layout: "tall" },
  { tag: "Ineos Grenadier", note: "Felgen-Reinigung · Makro", image: "images/ineos-wheel.png", ratio: "3/4", layout: "tall" },
  { tag: "Porsche Taycan Turbo", note: "Cockpit · Premium-Innenraum", image: "images/taycan-interior.png", ratio: "3/4", layout: "tall" },
  { tag: "Porsche Taycan Turbo", note: "Polster-Tiefenreinigung", image: "images/taycan-seat-clean.png", ratio: "3/4", layout: "tall" },
  { tag: "Porsche Taycan Turbo", note: "Heck · Lackversiegelung", image: "images/taycan-rear.png", ratio: "3/4", layout: "tall" },
  { tag: "Range Rover Autobiography", note: "Front · Lackversiegelung", image: "images/rangerover-front.png", ratio: "3/4", layout: "tall" },
  { tag: "Range Rover Autobiography", note: "Cockpit · Premium-Leder", image: "images/rangerover-interior.png", ratio: "3/4", layout: "tall" },
  { tag: "Range Rover Autobiography", note: "Lenkrad · Tiefenpflege", image: "images/rangerover-steering.png", ratio: "3/4", layout: "tall" },
];

function Gallery() {
  const [hover, setHover] = useState(null);
  return (
    <section className="gallery" id="galerie">
      <div className="section-head">
        <span className="section-no">— Aus der Werkstatt</span>
        <h2 className="section-title">Ausgewählte <em>Arbeiten.</em></h2>
      </div>
      <div className="gallery-grid">
        {GALLERY.map((g, i) => {
          const layout = g.layout || (i % 5 === 0 ? "wide" : i % 7 === 3 ? "tall" : "");
          const ratio = g.ratio || (layout === "wide" ? "16/7" : layout === "tall" ? "3/4" : "4/3");
          return (
          <figure
            key={i}
            className={`gallery-item ${layout === "wide" ? "gallery-item--wide" : ""} ${layout === "tall" ? "gallery-item--tall" : ""}`}
            onMouseEnter={() => setHover(i)}
            onMouseLeave={() => setHover(null)}
          >
            {g.image ? (
              <div className="placeholder" style={{ aspectRatio: ratio, overflow: "hidden" }}>
                <img src={g.image} alt={g.tag} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
              </div>
            ) : (
              <Placeholder label={g.tag} ratio={ratio} />
            )}
            <figcaption>
              <span className="gallery-tag">{g.tag}</span>
              <span className="gallery-note">{g.note}</span>
            </figcaption>
          </figure>
          );
        })}
      </div>
      <div className="gallery-foot">
        <a href="https://www.instagram.com/glanzmanufaktur.weileder/" target="_blank" rel="noopener" className="btn btn--ghost btn--lg">
          Mehr auf Instagram @glanzmanufaktur.weileder →
        </a>
      </div>
    </section>
  );
}

// --- Why / Manifesto -------------------------------------------------------
function Manifesto() {
  return (
    <section className="manifesto">
      <p className="manifesto-eyebrow">— Warum Glanzmanufaktur</p>
      <h2 className="manifesto-title">
        Weil unsere Leidenschaft<br/>
        für <em>Details</em> den<br/>
        Unterschied macht.
      </h2>
      <div className="manifesto-cols">
        <div>
          <h3>Erfahrung & Expertise</h3>
          <p>Modernste Techniken, hochwertigste Produkte. Wir bilden uns laufend weiter und arbeiten mit den Materialien, die auch im Concours-Bereich zum Einsatz kommen.</p>
        </div>
        <div>
          <h3>Individuelle Beratung</h3>
          <p>Kein Auto kommt zweimal vor. Wir gehen auf den Zustand und Ihre Wünsche ein und schlagen genau die Maßnahmen vor, die für Ihr Fahrzeug Sinn ergeben.</p>
        </div>
        <div>
          <h3>Zuverlässigkeit & Qualität</h3>
          <p>Schnell, gründlich, transparent. Vereinbarte Termine, klare Kommunikation, Ergebnisse, die sich bei jedem Lichteinfall messen lassen.</p>
        </div>
      </div>
    </section>
  );
}

// --- Booking modal ---------------------------------------------------------
function Booking({ open, onClose }) {
  const [step, setStep] = useState(0);
  const [data, setData] = useState({ name: "", phone: "", car: "", service: "", date: "", note: "" });
  const [sent, setSent] = useState(false);

  useEffect(() => {
    if (!open) {
      setTimeout(() => { setStep(0); setSent(false); }, 300);
    }
  }, [open]);

  const update = (k, v) => setData({ ...data, [k]: v });

  const canNext = () => {
    if (step === 0) return data.service;
    if (step === 1) return data.car && data.date;
    if (step === 2) return data.name && data.phone;
    return true;
  };

  const submit = () => {
    setSent(true);
  };

  if (!open) return null;

  return (
    <div className="booking-overlay" onClick={onClose}>
      <div className="booking" onClick={e => e.stopPropagation()}>
        <button className="booking-close" onClick={onClose} aria-label="Schließen">×</button>
        <div className="booking-side">
          <span className="section-no">— Terminanfrage</span>
          <h3>Wir melden uns innerhalb von 24h.</h3>
          <ul className="booking-meta">
            <li><span>Adresse</span><span>Putzbrunner Str. 89</span></li>
            <li><span>Telefon</span><span>+49 157 34 828 543</span></li>
            <li><span>E-Mail</span><span>info@glanzmanufaktur-muenchen.de</span></li>
          </ul>
          <div className="booking-progress">
            {[0,1,2,3].map(i => (
              <span key={i} className={`config-dot ${i <= step ? "is-on" : ""}`} />
            ))}
          </div>
        </div>

        <div className="booking-main">
          {sent ? (
            <div className="booking-done">
              <div className="booking-done-mark">✓</div>
              <h4>Anfrage gesendet.</h4>
              <p>Vielen Dank, {data.name.split(" ")[0] || "danke"}. Wir melden uns telefonisch unter {data.phone}.</p>
              <button className="btn btn--gold btn--lg" onClick={onClose}>Schließen</button>
            </div>
          ) : (
            <>
              {step === 0 && (
                <div>
                  <span className="config-step">01 / 04 · Leistung</span>
                  <h4 className="booking-q">Was sollen wir machen?</h4>
                  <div className="booking-grid">
                    {["Innen Premium","Außen Premium","Lackkorrektur","Keramik­versiegelung","Full Detailing","Beratung"].map(s => (
                      <button key={s} className={`config-opt ${data.service===s?"is-picked":""}`} onClick={() => update("service", s)}>
                        <span className="config-opt-l">{s}</span>
                      </button>
                    ))}
                  </div>
                </div>
              )}
              {step === 1 && (
                <div>
                  <span className="config-step">02 / 04 · Fahrzeug & Zeit</span>
                  <h4 className="booking-q">Was fahren Sie — und wann?</h4>
                  <label className="field">
                    <span>Fahrzeug</span>
                    <input value={data.car} onChange={e=>update("car", e.target.value)} placeholder="z. B. Audi RS5 2022, Uniblau" />
                  </label>
                  <label className="field">
                    <span>Wunschtermin</span>
                    <input type="date" value={data.date} onChange={e=>update("date", e.target.value)} />
                  </label>
                </div>
              )}
              {step === 2 && (
                <div>
                  <span className="config-step">03 / 04 · Kontakt</span>
                  <h4 className="booking-q">Wie erreichen wir Sie?</h4>
                  <label className="field">
                    <span>Name</span>
                    <input value={data.name} onChange={e=>update("name", e.target.value)} placeholder="Vor- und Nachname" />
                  </label>
                  <label className="field">
                    <span>Telefon</span>
                    <input value={data.phone} onChange={e=>update("phone", e.target.value)} placeholder="+49 …" />
                  </label>
                </div>
              )}
              {step === 3 && (
                <div>
                  <span className="config-step">04 / 04 · Bestätigung</span>
                  <h4 className="booking-q">Alles korrekt?</h4>
                  <ul className="booking-summary">
                    <li><span>Leistung</span><span>{data.service}</span></li>
                    <li><span>Fahrzeug</span><span>{data.car}</span></li>
                    <li><span>Wunschtermin</span><span>{data.date}</span></li>
                    <li><span>Name</span><span>{data.name}</span></li>
                    <li><span>Telefon</span><span>{data.phone}</span></li>
                  </ul>
                  <label className="field">
                    <span>Notiz (optional)</span>
                    <textarea rows="3" value={data.note} onChange={e=>update("note", e.target.value)} placeholder="Besonderheiten, Vorschäden, Wünsche …" />
                  </label>
                </div>
              )}

              <div className="booking-actions">
                {step > 0 && <button className="btn btn--ghost" onClick={() => setStep(step - 1)}>← Zurück</button>}
                {step < 3 && <button className="btn btn--gold" disabled={!canNext()} onClick={() => setStep(step + 1)}>Weiter →</button>}
                {step === 3 && <button className="btn btn--gold" onClick={submit}>Anfrage senden</button>}
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

// --- Footer ---------------------------------------------------------------
function Footer() {
  return (
    <footer className="footer" id="kontakt">
      <div className="footer-top">
        <h2 className="footer-headline">
          Bereit für<br/><em>Spiegelglanz?</em>
        </h2>
        <div className="footer-side">
          <figure className="footer-boss">
            <img src="images/Boss.png" alt="Inhaber Glanzmanufaktur München" />
            <figcaption>
              <span className="footer-boss-label">— Inhaber</span>
              <span className="footer-boss-name">Tino Weileder</span>
            </figcaption>
          </figure>
          <a href="mailto:info@glanzmanufaktur-muenchen.de" className="footer-mail">
            info@glanzmanufaktur-muenchen.de ↗
          </a>
        </div>
      </div>
      <div className="footer-grid">
        <div>
          <h4>Manufaktur</h4>
          <p>Glanzmanufaktur München<br/>Putzbrunner Straße 89<br/>81739 München</p>
        </div>
        <div>
          <h4>Kontakt</h4>
          <p><a href="tel:+4915734828543">+49 157 34 828 543</a><br/><a href="mailto:info@glanzmanufaktur-muenchen.de">info@glanzmanufaktur-muenchen.de</a></p>
        </div>
        <div>
          <h4>Öffnungszeiten</h4>
          <p>Mo–Fr · 09:00–18:00<br/>Sa · nach Vereinbarung<br/>So · geschlossen</p>
        </div>
        <div>
          <h4>Folgen</h4>
          <p><a href="https://www.instagram.com/glanzmanufaktur.weileder/" target="_blank" rel="noopener">Instagram ↗</a><br/>@glanzmanufaktur.weileder</p>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 Glanzmanufaktur München</span>
        <div className="footer-legal">
          <a href="#">Impressum</a>
          <a href="#">Datenschutz</a>
          <a href="#">Cookies</a>
        </div>
      </div>
    </footer>
  );
}

// --- App ------------------------------------------------------------------
function App() {
  const tweaks = TWEAK_DEFAULTS;
  const [bookingOpen, setBookingOpen] = useState(false);

  useEffect(() => {
    const easeInOutCubic = (t) => t < 0.5 ? 4*t*t*t : 1 - Math.pow(-2*t+2, 3)/2;
    const animateTo = (targetY, duration = 1100) => {
      const startY = window.scrollY;
      const dist = targetY - startY;
      const t0 = performance.now();
      const step = (now) => {
        const p = Math.min(1, (now - t0) / duration);
        window.scrollTo(0, startY + dist * easeInOutCubic(p));
        if (p < 1) requestAnimationFrame(step);
      };
      requestAnimationFrame(step);
    };
    const onClick = (e) => {
      const a = e.target.closest("a[href^='#']");
      if (!a) return;
      const id = a.getAttribute("href").slice(1);
      if (!id) return;
      const el = document.getElementById(id);
      if (!el) return;
      e.preventDefault();
      const offset = 96;
      const target = el.getBoundingClientRect().top + window.scrollY - offset;
      history.replaceState(null, "", "#" + id);
      animateTo(target);
    };
    document.addEventListener("click", onClick);
    return () => document.removeEventListener("click", onClick);
  }, []);

  return (
    <>
      <Nav onBook={() => setBookingOpen(true)} />
      <main>
        <Hero onBook={() => setBookingOpen(true)} variant={tweaks.heroVariant} />
        <Services />
        <CarMarquee />
        <Configurator onBook={() => setBookingOpen(true)} />
        <Manifesto />
        <Process />
        <Gallery />
      </main>
      <Footer />
      <Booking open={bookingOpen} onClose={() => setBookingOpen(false)} />

    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);