// Home page React tree
const HERO_SLIDES = [
  { src: "assets/img/snap/wintergarten-lichtdurchflutet.jpg", caption: "Wintergarten · lichtdurchflutet, PSK-Fenster" },
  { src: "assets/img/bm/eckverglasung-aussen.jpg", caption: "Eckverglasung Holz-Alu · pfostenfrei" },
  { src: "assets/img/bm/butzenglas.jpg", caption: "Butzenglas-Sprossen · historisch" },
  { src: "assets/img/bm/fertigung-blendrahmen-fluegel.jpg", caption: "Werkstatt Benhausen · Blendrahmen & Flügel" },
  { src: "assets/img/bm/fertigung-fluegel.jpg", caption: "Werkstatt · Flügelfertigung in Eiche" },
];

const Hero = () => {
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setI(v => (v + 1) % HERO_SLIDES.length), 6000);
    return () => clearInterval(t);
  }, []);
  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="hero-stage">
        {HERO_SLIDES.map((s, idx) => (
          <div key={idx} className={"hero-photo " + (idx === i ? "is-active" : "")}>
            <img src={s.src} alt="" />
          </div>
        ))}
        <div className="hero-vignette"></div>
      </div>
      <div className="hero-est">EST · MCMXXIX · Paderborn</div>
      <div className="hero-content">
        <div className="hero-top">
          <div>Tischlerei Göke GmbH · Familienbetrieb · 4. Generation</div>
          <div className="hide-mobile">Hainhöfen 2–6 · Benhausen</div>
        </div>
        <div>
          <div className="kicker" style={{color:"rgba(245,239,226,0.7)", marginBottom:24}}>01 / Manufaktur für Holzfenster &amp; Türen</div>
          <h1 className="hero-headline">
            Wir können<br/><em>Holz.</em>
          </h1>
        </div>
        <div className="hero-bottom">
          <p className="hero-sub">
            Holzfenster, Haustüren, Klappläden und Wintergärten — geplant, gefertigt und montiert von einem Team in Paderborn-Benhausen. Seit 1929 in Familienhand.
          </p>
          <div className="hero-counter">
            <button onClick={() => setI((i - 1 + HERO_SLIDES.length) % HERO_SLIDES.length)} aria-label="vorheriges Bild">←</button>
            <span>{String(i+1).padStart(2,"0")} / {String(HERO_SLIDES.length).padStart(2,"0")}</span>
            <button onClick={() => setI((i + 1) % HERO_SLIDES.length)} aria-label="nächstes Bild">→</button>
          </div>
        </div>
      </div>
    </section>
  );
};

const MARQUEE_ITEMS = [
  "Holzfenster", "Haustüren", "Überdachungen", "Wintergärten",
  "Klappläden", "Glasaustausch", "Denkmalpflege", "Sprossenfenster",
  "Hebe-Schiebe-Türen", "Holz-Alu", "Manufaktur seit 1929",
];

const Marquee = () => (
  <div className="marquee" aria-hidden="true">
    <div className="marquee-track">
      {[0,1,2].flatMap(rep => MARQUEE_ITEMS.map((w, i) => (
        <span key={`${rep}-${i}`}>{w}</span>
      )))}
    </div>
  </div>
);

// ---------- Audience switcher ----------
const AUDIENCES = [
  {
    key: "bauherr",
    num: "01",
    title: "Private Bauherren",
    headline: "Ein Fenster, das Ihr Haus zum Original macht.",
    photo: "assets/img/bm/bodentief-sicherheit.jpg",
    body: "Sie planen einen Neubau oder eine Sanierung und wollen keine Stangenware. Wir entwickeln mit Ihnen Holzfenster, Haustüren und Wintergärten, die zum Charakter Ihres Hauses passen — von der ersten Skizze bis zur Montage.",
    points: [
      ["Beratung", "Vor Ort, kostenfrei"],
      ["Planung", "Einzelaufmaß, kein Standardraster"],
      ["Fertigung", "Eigene Werkstatt, Benhausen"],
      ["Montage", "Eigenes Team, kein Subunternehmer"],
    ],
  },
  {
    key: "denkmal",
    num: "02",
    title: "Denkmalpflege",
    headline: "Was 200 Jahre stand, hat ein Recht auf Originalprofile.",
    photo: "assets/img/bm/denkmal-stulp-oberlicht.jpg",
    body: "Wir arbeiten regelmäßig mit Denkmalbehörden und Architekten an Fachwerk, Gründerzeit, Jugendstil und Hofgebäuden. Aufmaß historischer Profile, Stulpfenster mit Wetterschenkel, Butzenglas, Sprossen mit echter Profilierung — alles in unserer Werkstatt rekonstruierbar.",
    points: [
      ["Profile", "Nach historischem Bestand"],
      ["Verglasung", "Butzen-, Bleiglas, Wärmeschutz"],
      ["Beschläge", "Original oder Nachbau"],
      ["Behörden", "Abstimmung inklusive"],
    ],
  },
  {
    key: "architekt",
    num: "03",
    title: "Architekten",
    headline: "Ihr Detail. Unsere Werkstatt.",
    photo: "assets/img/bm/eckverglasung-aussen.jpg",
    body: "Bodentiefe Verglasungen, Holz-Alu-Eckelemente, Hebe-Schiebe-Türen über vier Meter, Pfosten-Riegel-Wintergärten. Wir bauen, was Sie zeichnen — inklusive RAL-Beratung, statischer Abstimmung und CAD-Werkstattzeichnung vor Fertigung.",
    points: [
      ["Format", "Bis 4,2 m Höhe je Flügel"],
      ["Material", "Eiche, Lärche, Fichte, Holz-Alu"],
      ["Detailtiefe", "CAD-Werkstattzeichnung"],
      ["Liefergebiet", "OWL, Münsterland, Sauerland"],
    ],
  },
  {
    key: "gewerbe",
    num: "04",
    title: "Gewerbe & Handel",
    headline: "Gastronomie, Hotellerie, Ladenbau.",
    photo: "assets/img/bm/panorama-innen.jpg",
    body: "Schaufenster, Pfosten-Riegel-Fassaden, Eingangstüren mit Tagesschloss, Hotelzimmerfenster nach Brandschutzanforderung — wir fertigen mit dem Wartungs-Service, den Sie für ein Objekt mit Publikumsverkehr brauchen.",
    points: [
      ["Brandschutz", "Auf Anfrage, geprüfte Profile"],
      ["Wartung", "Jährlicher Service-Vertrag"],
      ["Reaktionszeit", "Innerhalb 48 h, OWL"],
      ["Referenzen", "Hotels, Gasthäuser, Praxen"],
    ],
  },
];

const AudienceSwitcher = () => {
  const [active, setActive] = React.useState("bauherr");
  const a = AUDIENCES.find(x => x.key === active);
  return (
    <section className="audience-section" data-screen-label="02 Zielgruppen">
      <div className="section">
        <div className="section-head">
          <div className="num">02 / Für wen wir bauen</div>
          <h2 className="h2 reveal">Wir arbeiten für<br/><em className="italic-serif">vier sehr unterschiedliche</em> Kundengruppen.</h2>
        </div>
        <div className="audience-grid">
          <div className="audience-tabs">
            {AUDIENCES.map(x => (
              <button
                key={x.key}
                className={"audience-tab " + (x.key === active ? "active" : "")}
                onClick={() => setActive(x.key)}
              >
                <span className="num">{x.num}</span>
                <span>{x.title}</span>
                <span className="arrow">→</span>
              </button>
            ))}
          </div>
          <div className="audience-panel" key={active}>
            <div className="audience-photo">
              <span className="plate">PL · {a.num}</span>
              <img src={a.photo} alt={a.title} />
              <span className="caption">{a.title}</span>
            </div>
            <div className="audience-copy">
              <h3>{a.headline}</h3>
              <p>{a.body}</p>
              <div className="audience-points">
                {a.points.map(([k, v], i) => (
                  <div key={i} className="audience-point">
                    <span className="audience-point-label">{k}</span>
                    <span className="audience-point-value">{v}</span>
                  </div>
                ))}
              </div>
              <div style={{marginTop:32}}>
                <a href={"produkte.html#" + a.key} className="btn btn-ghost">Passende Leistungen ansehen →</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ---------- Leistungen ----------
const LEISTUNGEN = [
  { num:"01", tag:"Holzfenster", title:"Stulp- &amp; Sprossenfenster", img:"assets/img/bm/butzenglas.jpg", desc:"Profile nach Bestand, mit Wetterschenkel, Butzen- oder Wärmeschutzverglasung." },
  { num:"02", tag:"Haustüren", title:"Jugendstil &amp; Modern", img:"assets/img/snap/haustuer-jugendstil-snap.png", desc:"Massivholz, mit historischem Beschlag oder zeitgenössischem Edelstahl-Detail." },
  { num:"03", tag:"Überdachungen", title:"Vordächer &amp; Carports", img:"assets/img/snap/wintergarten-anbau-schlicht.jpg", desc:"Holz mit Glas, Polycarbonat oder Blech — statisch berechnet, regen- und schneesicher." },
  { num:"04", tag:"Wintergärten", title:"Pfosten-Riegel in Holz", img:"assets/img/bm/wintergarten-restauration.jpg", desc:"Holz innen, Aluminium außen — Statikabstimmung und Glasdach inklusive." },
  { num:"05", tag:"Klappläden", title:"Klassisch &amp; gefälzt", img:"assets/img/snap/landhaus-fensterlaeden.jpg", desc:"Fichte, Lärche oder Eiche, deckend lackiert oder lasiert — nach Ortssatzung." },
  { num:"06", tag:"Glasaustausch", title:"Wärmedämmglas im Bestand", img:"assets/img/snap/glasaustausch-sanierung.jpg", desc:"Energetische Aufwertung ohne Eingriff in die Fassade — der Rahmen bleibt, das Glas wird neu." },
];

const Leistungen = () => (
  <section className="section" data-screen-label="03 Leistungen">
    <div className="section-head">
      <div className="num">03 / Werkstatt</div>
      <h2 className="h2 reveal">Was wir <em className="italic-serif">fertigen</em>.</h2>
    </div>
    <div className="leistungen-grid">
      {LEISTUNGEN.map(l => (
        <a key={l.num} href="produkte.html" className="tile reveal">
          <div className="tile-photo" data-plate={l.num}>
            <img src={l.img} alt={l.title} />
            <div className="tile-overlay">
              <div className="tile-overlay-num">{l.num} →</div>
            </div>
          </div>
          <div className="tile-meta">
            <span className="tile-meta-title" dangerouslySetInnerHTML={{__html: l.title}}></span>
            <span className="tile-tag">{l.tag}</span>
          </div>
          <p style={{fontSize:14, lineHeight:1.5, color:"var(--ink-2)", maxWidth:"36ch", margin:"-6px 16px 16px"}}>{l.desc}</p>
        </a>
      ))}
    </div>
    <div style={{textAlign:"center", marginTop:48}}>
      <a href="produkte.html" className="btn btn-ghost">Alle Leistungen im Detail →</a>
    </div>
  </section>
);

// ---------- Denkmal ----------
const Denkmal = () => (
  <section className="denkmal" data-screen-label="04 Denkmalpflege">
    <div className="denkmal-inner">
      <div className="denkmal-head">
        <span className="kicker">04 / Schwerpunkt</span>
        <span style={{height:1, background:"rgba(232,223,208,0.18)"}}></span>
        <span className="kicker">Denkmalpflege</span>
      </div>
      <div className="denkmal-grid">
        <div>
          <div className="denkmal-photos">
            <figure>
              <img src="assets/img/bm/denkmal-sprossen-stulp.jpg" alt="" />
              <figcaption>01 — Stulpfenster mit Wetterschenkel</figcaption>
            </figure>
            <figure>
              <img src="assets/img/bm/denkmal-dachgaube.jpg" alt="" />
              <figcaption>02 — Dachgaube, Profil nach Bestand</figcaption>
            </figure>
          </div>
        </div>
        <div>
          <h2 className="denkmal-display">
            Was 200 Jahre stand,<br/>
            hat ein Recht auf<br/>
            <em>Originalprofile.</em>
          </h2>
          <ul className="denkmal-points">
            <li>
              <span className="num">A</span>
              <div>
                <h4>Aufmaß am Bestand</h4>
                <p>Wir messen jedes Fenster einzeln. Profile, Stärken, Sprossenraster — auch wenn sich keins gleicht.</p>
              </div>
            </li>
            <li>
              <span className="num">B</span>
              <div>
                <h4>Werkstattzeichnung</h4>
                <p>Profile werden nachgefräst, nicht aus dem Katalog gewählt. Sie sehen die Zeichnung vor Fertigung.</p>
              </div>
            </li>
            <li>
              <span className="num">C</span>
              <div>
                <h4>Behörden-Abstimmung</h4>
                <p>Wir sprechen mit der unteren Denkmalbehörde, bevor wir bauen — nicht erst beim Einbau.</p>
              </div>
            </li>
            <li>
              <span className="num">D</span>
              <div>
                <h4>Verglasung</h4>
                <p>Butzenglas, Bleiglas, Wärmeschutz mit historischer Optik — wir liefern, was die Vorlage verlangt.</p>
              </div>
            </li>
          </ul>
          <a href="referenzen.html" className="denkmal-cta">Denkmalprojekte ansehen →</a>
        </div>
      </div>
    </div>
  </section>
);

// ---------- Timeline ----------
const TIMELINE = [
  { year:"1929", title:"Gründung", body:"Johannes Göke gründet die Stellmacherei und Zimmerei in Benhausen — der Ursprung des bis heute weitergeführten Familienbetriebs." },
  { year:"1955", title:"2. Generation", body:"Sohn Bernhard Göke übernimmt als Stellmacher- und Tischlermeister. Schwerpunkt Möbelfertigung, Treppen, Innenausbau. Neubau am Hainhöfen 8 — 680 m²." },
  { year:"1987", title:"3. Generation", body:"Tischlermeister Ulrich Göke übernimmt den Betrieb. Erweiterung der Werkstatt um weitere 230 m²." },
  { year:"2018", title:"Geschäftsführung", body:"Christian Bensick und Axel Spieker übernehmen als langjährige Mitarbeiter die Geschäftsführung der Tischlerei." },
];

const Timeline = () => (
  <section className="section timeline-section" data-screen-label="05 Geschichte">
    <div className="section-head">
      <div className="num">05 / Seit 1929</div>
      <h2 className="h2 reveal">Vier Generationen,<br/><em className="italic-serif">eine Werkstatt.</em></h2>
    </div>
    <div className="timeline-rail">
      <div className="timeline-axis"></div>
      <div className="timeline-grid">
        {TIMELINE.map((t, i) => (
          <div key={i} className="timeline-item reveal">
            <div className="timeline-year">{t.year}</div>
            <div className="timeline-title">{t.title}</div>
            <div className="timeline-body">{t.body}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ---------- Werkstatt strip ----------
const WERKSTATT = [
  { src:"assets/img/bm/fertigung-blendrahmen.jpg", n:"01", caption:"Blendrahmen, Lackierung" },
  { src:"assets/img/bm/fertigung-fluegel.jpg", n:"02", caption:"Flügel-Fertigung in Eiche" },
  { src:"assets/img/snap/fertigung-fensterbank-eiche.jpg", n:"03", caption:"Fensterbank, Eiche massiv" },
  { src:"assets/img/snap/holzkanteln.jpg", n:"04", caption:"Holzkanteln, Lager" },
  { src:"assets/img/snap/tischlerei-1.webp", n:"05", caption:"Hauptwerkstatt" },
  { src:"assets/img/snap/tischlerei-4.webp", n:"06", caption:"Bearbeitung" },
];

const Werkstatt = () => (
  <section className="section werkstatt-strip" data-screen-label="05b Werkstatt">
    <div className="section-head">
      <div className="num">05b / Werkstatt</div>
      <h2 className="h2 reveal">Aus der<br/><em className="italic-serif">eigenen Werkstatt.</em></h2>
      <p className="lead reveal" style={{maxWidth:"68ch", marginTop:24}}>
        Vom Kantel bis zum lackierten Flügel — alle Arbeitsschritte unter einem Dach am Hainhöfen 8.
      </p>
    </div>
    <div className="werkstatt-grid">
      {WERKSTATT.map(w => (
        <figure key={w.n} className="werkstatt-tile reveal">
          <span className="n">WS · {w.n}</span>
          <img src={w.src} alt={w.caption} loading="lazy" />
          <figcaption>{w.caption}</figcaption>
        </figure>
      ))}
    </div>
  </section>
);

// ---------- Reference preview ----------
const REF_PREVIEW = [
  { num:"R-01", img:"assets/img/bm/wintergarten-restauration.jpg", title:"Wintergarten an Hofstelle", tag:"Lippstadt · 2024" },
  { num:"R-02", img:"assets/img/bm/panorama-aussen.jpg", title:"Panoramafassade Holz-Alu", tag:"Salzkotten · 2024" },
  { num:"R-03", img:"assets/img/bm/butzenglas.jpg", title:"Butzenglas-Sprossen", tag:"Bad Lippspringe · 2023" },
];

const ReferencesPreview = () => (
  <section className="section" data-screen-label="06 Referenzen">
    <div className="section-head">
      <div className="num">06 / Auswahl</div>
      <h2 className="h2 reveal">Zuletzt aus der<br/><em className="italic-serif">Werkstatt.</em></h2>
    </div>
    <div className="ref-preview">
      {REF_PREVIEW.map(r => (
        <a href="referenzen.html" key={r.num} className="tile reveal">
          <div className="tile-photo" data-plate={r.num} style={{aspectRatio:"3/4"}}>
            <img src={r.img} alt={r.title} />
          </div>
          <div className="tile-meta">
            <span className="tile-meta-title">{r.title}</span>
            <span className="tile-tag">{r.tag}</span>
          </div>
        </a>
      ))}
    </div>
    <div style={{textAlign:"center", marginTop:48}}>
      <a href="referenzen.html" className="btn">Alle Referenzen ansehen →</a>
    </div>
  </section>
);

// ---------- Process ----------
const Process = () => (
  <section className="section" data-screen-label="07 Ablauf">
    <div className="section-head">
      <div className="num">07 / Ablauf</div>
      <h2 className="h2 reveal">Vom <em className="italic-serif">ersten Anruf</em> bis zur fertigen Montage.</h2>
    </div>
    <div className="process-row">
      <div className="process-step reveal">
        <div className="num">01 — Beratung</div>
        <h4>Vor-Ort-Termin</h4>
        <p>Wir kommen zu Ihnen, schauen den Bestand an, hören zu. Kostenfrei in OWL.</p>
      </div>
      <div className="process-step reveal">
        <div className="num">02 — Planung</div>
        <h4>Aufmaß &amp; Zeichnung</h4>
        <p>Einzelaufmaß, CAD-Werkstattzeichnung, Materialvorschlag, Festpreis-Angebot.</p>
      </div>
      <div className="process-step reveal">
        <div className="num">03 — Fertigung</div>
        <h4>Eigene Werkstatt</h4>
        <p>4–6 Wochen Lieferzeit. Sie können die Werkstatt jederzeit besichtigen.</p>
      </div>
      <div className="process-step reveal">
        <div className="num">04 — Montage</div>
        <h4>Eigenes Team</h4>
        <p>Demontage, Einbau, Anschlussarbeiten, Endabnahme — kein Subunternehmer.</p>
      </div>
    </div>
  </section>
);

// ---------- CTA Closer ----------
const Closer = () => (
  <section className="section" style={{paddingTop:0}} data-screen-label="08 CTA">
    <div style={{
      background:"var(--bg-2)",
      borderTop:"1px solid var(--line)",
      borderBottom:"1px solid var(--line)",
      padding:"clamp(60px, 8vw, 120px) clamp(20px, 4vw, 56px)",
      display:"grid",
      gridTemplateColumns:"1.2fr 1fr",
      gap:"clamp(40px, 6vw, 80px)",
      alignItems:"center",
    }} className="closer-grid">
      <div>
        <div className="kicker" style={{marginBottom:24}}>08 / Beratung</div>
        <h2 className="h1" style={{marginBottom:20}}>
          Sie haben einen<br/>
          <em className="italic-serif">Plan.</em><br/>
          Wir haben die Werkstatt.
        </h2>
        <p className="lead">
          Senden Sie uns eine kurze Beschreibung — gerne mit Fotos, Zeichnung oder Bauplan. Wir melden uns innerhalb von zwei Werktagen mit einem Vor-Ort-Termin.
        </p>
      </div>
      <div style={{display:"flex", flexDirection:"column", gap:16}}>
        <a href="kontakt.html" className="btn">Beratung anfragen</a>
        <a href="tel:+4952526291" className="btn btn-ghost">+49 5252 6291</a>
        <a href="https://wa.me/4952526291" className="btn btn-ghost">WhatsApp</a>
      </div>
    </div>
    <style>{`@media (max-width: 800px) { .closer-grid { grid-template-columns: 1fr !important; } }`}</style>
  </section>
);

// ---------- Tweaks ----------
const HomeTweaks = () => {
  const [tw, setTweak] = useTweaks(window.__TWEAK_DEFAULTS);
  React.useEffect(() => {
    document.body.dataset.tone = tw.tone || "editorial";
  }, [tw.tone]);
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Tonalität">
        <TweakRadio label="Stil" value={tw.tone} options={[
          { value:"editorial", label:"Editorial Handwerk" },
          { value:"modern",    label:"Architektonisch" },
          { value:"werkstatt", label:"Werkstatt" },
        ]} onChange={(v) => setTweak("tone", v)} />
      </TweakSection>
      <TweakSection title="Inhalt">
        <TweakToggle label="Denkmalpflege-Fokus" value={tw.denkmalEmphasis} onChange={(v)=>setTweak("denkmalEmphasis", v)} />
        <TweakToggle label="Marquee-Band" value={tw.marquee} onChange={(v)=>setTweak("marquee", v)} />
      </TweakSection>
    </TweaksPanel>
  );
};

const App = () => {
  useReveal();
  const [tw] = useTweaks(window.__TWEAK_DEFAULTS);
  React.useEffect(() => {
    document.body.dataset.tone = tw.tone || "editorial";
  }, [tw.tone]);
  return (
    <>
      <Header active="start" />
      <Hero />
      {tw.marquee !== false && <Marquee />}
      <AudienceSwitcher />
      <Leistungen />
      {tw.denkmalEmphasis !== false && <Denkmal />}
      <Timeline />
      <Werkstatt />
      <ReferencesPreview />
      <Process />
      <Closer />
      <Footer />
      <HomeTweaks />
    </>
  );
};

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