// Home — Hero (3 Varianten via Tweaks) + Teaser-Sektionen

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero_variant": "still",
  "show_grain": true,
  "accent": "malt"
} /*EDITMODE-END*/;

// ── HERO VARIANTS ──────────────────────────────────────────

const HeroStill = () => {
  // Variante 1: ruhig, typografisch, Flasche rechts
  const time = React.useRef(0);
  const [parallax, setParallax] = React.useState({ x: 0, y: 0 });
  React.useEffect(() => {
    const onMove = (e) => {
      const x = (e.clientX / window.innerWidth - 0.5) * 20;
      const y = (e.clientY / window.innerHeight - 0.5) * 14;
      setParallax({ x, y });
    };
    window.addEventListener("mousemove", onMove);
    return () => window.removeEventListener("mousemove", onMove);
  }, []);

  return (
    <section className="hero hero-still">
      <div className="hero-grid container">
        <div className="hero-text">
          <div className="h-eyebrow">Nanobrauerei · Rüfenacht · CH</div>
          <h1 className="h-display hero-title">
            Bier,<br />
            <em>das Zeit hatte,</em><br />
            etwas zu werden.
          </h1>
          <p className="hero-lede">Neun Jahre, eine Küche, diverse Bierstile. Jede Charge gebraut von Hand, jede Flasche von Hand etikettiert, weil es anders keinen Sinn ergibt.


          </p>
          <div className="hero-ctas">
            <a href="biere.html" className="btn btn-primary">
              Sortiment <span className="arrow">→</span>
            </a>
            <a href="ueber.html" className="btn btn-ghost">Die Geschichte</a>
          </div>
          <div className="hero-meta">
            <div><span className="num">viele</span><span className="lbl">Bierstile</span></div>
            <div><span className="num">über 20</span><span className="lbl">Chargen gebraut</span></div>
            <div><span className="num">mehr als 9</span><span className="lbl">Jahre Küchenarbeit</span></div>
          </div>
        </div>
        <div className="hero-bottle" style={{
          transform: `translate(${parallax.x}px, ${parallax.y}px)`
        }}>
          <div className="hero-bottle-bg" />
          <Bottle tone="amber" label="Nordwest" size={1.1} glow />
          <div className="hero-bottle-cap">B-024 · Nordwest IPA · 6.4% · 33cl</div>
        </div>
      </div>
      <div className="hero-marquee">
        <div className="marquee-track">
          {Array.from({ length: 3 }).map((_, i) =>
          <span key={i} className="marquee-row">
              · INDIA PALE ALE · STOUT · SAUERBIER · WILD ALE · GOSE · IMPERIAL STOUT · NEW ENGLAND IPA · DRY STOUT
            </span>
          )}
        </div>
      </div>
    </section>);

};

const HeroFullbleed = () => {
  // Variante 2: full-bleed Stimmungsbild-Platzhalter
  return (
    <section className="hero hero-fullbleed">
      <div className="ph hero-fullbleed-img">
        <div className="ph-label">Stimmungsbild · Brauerei in der Küche</div>
      </div>
      <div className="hero-fullbleed-overlay">
        <div className="container">
          <div className="h-eyebrow" style={{ color: "var(--paper-2)" }}>Nanobrauerei · Rüfenacht</div>
          <h1 className="h-display hero-title hero-title-light">
            Klein gebraut.<br />
            <em>Gross gedacht.</em>
          </h1>
          <p className="hero-lede" style={{ color: "var(--paper-2)" }}>
            IPA, Stout und Sauerbier aus einer Wohnküche im Kanton Bern. Seit 2018.
          </p>
          <div className="hero-ctas">
            <a href="biere.html" className="btn btn-primary" style={{ background: "var(--paper)", color: "var(--ink)", borderColor: "var(--paper)" }}>
              Sortiment <span className="arrow">→</span>
            </a>
            <a href="ueber.html" className="btn" style={{ borderColor: "var(--paper)", color: "var(--paper)" }}>Geschichte</a>
          </div>
        </div>
      </div>
    </section>);

};

const HeroSplit = () => {
  // Variante 3: Split mit Story-Auszug links, drei Flaschen rechts
  return (
    <section className="hero hero-split">
      <div className="hero-split-grid">
        <div className="hero-split-text">
          <div className="h-eyebrow">Aus der Küche, für die Küche</div>
          <h1 className="h-display hero-title">
            Mit 40 dachte ich:<br />
            <em>warum nicht selber<br />brauen?</em>
          </h1>
          <p className="hero-lede">
            Das war 2018. Acht Jahre später stehen immer noch dieselben drei Töpfe
            auf demselben Herd — nur die Rezepte sind besser geworden.
          </p>
          <a href="ueber.html" className="hero-link">
            Die ganze Geschichte lesen <span className="arrow">→</span>
          </a>
          <div className="hero-signature">
            <span className="sig-name">— Adi</span>
            <span className="sig-role">Brauer & einziger Mitarbeiter</span>
          </div>
        </div>
        <div className="hero-split-bottles">
          <div className="hero-split-bottle hsb-1"><Bottle tone="amber" label="IPA" size={0.85} /></div>
          <div className="hero-split-bottle hsb-2"><Bottle tone="dark" label="Stout" size={0.85} /></div>
          <div className="hero-split-bottle hsb-3"><Bottle tone="sour" label="Sauer" size={0.85} /></div>
          <div className="hero-split-floor" />
        </div>
      </div>
    </section>);

};

// ── TEASER SECTIONS ────────────────────────────────────────

const SortimentTeaser = () => {
  useReveal();
  const [allBeers, setAllBeers] = React.useState(window.BEERS);
  React.useEffect(() => {
    if (window.beersReady) window.beersReady.then(setAllBeers);
  }, []);
  const beers = allBeers.slice(0, 3);
  return (
    <section className="container" style={{ marginTop: "var(--s-10)" }}>
      <div className="section-head reveal">
        <div>
          <div className="h-eyebrow" style={{ marginBottom: 12 }}>01 — Aktuell im Keller</div>
          <h2>Viele Stile.<br />Acht Stimmungen.</h2>
        </div>
        <a href="biere.html" className="hero-link">Alle Biere ansehen <span className="arrow">→</span></a>
      </div>
      <div className="teaser-grid">
        {beers.map((b, i) =>
        <a href={`biere.html#${b.id}`} key={b.id} className={`teaser-card reveal teaser-${b.styleClass}`} style={{ transitionDelay: `${i * 80}ms` }}>
            <div className="teaser-bottle">
              <Bottle tone={b.tone} label={b.style} size={0.7} />
            </div>
            <div className="teaser-meta">
              <div className="h-eyebrow">{b.style} · {b.abv}% Vol.</div>
              <h3 className="teaser-name">{b.name}</h3>
              <p className="teaser-tag">{b.tagline}</p>
              <div className="teaser-link">Profil ansehen →</div>
            </div>
          </a>
        )}
      </div>
    </section>);

};

const ManifestSection = () => {
  useReveal();
  const items = [
  { n: "01", t: "Klein bleiben", d: "Ein Topf, eine Person. Wachstum macht Bier nicht besser." },
  { n: "02", t: "Zeit lassen", d: "Manche Sude reifen drei Wochen, manche neun Monate. Eile schmeckt man." },
  { n: "03", t: "Lokal denken", d: "Wasser aus Bern, Hopfen aus der Schweiz, Früchte aus der Region." },
  { n: "04", t: "Ehrlich bleiben", d: "Keine Filter, keine Pasteurisation, keine Geheimnisse auf dem Etikett." }];

  return (
    <section className="container manifest">
      <div className="section-head reveal">
        <div>
          <div className="h-eyebrow" style={{ marginBottom: 12 }}>02 — Brau-Prinzipien</div>
          <h2>Vier einfache<br />Regeln.</h2>
        </div>
      </div>
      <div className="manifest-grid">
        {items.map((it, i) =>
        <div key={it.n} className="manifest-item reveal" style={{ transitionDelay: `${i * 90}ms` }}>
            <div className="manifest-num">{it.n}</div>
            <div>
              <h3 className="manifest-t">{it.t}</h3>
              <p className="manifest-d">{it.d}</p>
            </div>
          </div>
        )}
      </div>
    </section>);

};

const StorySection = () => {
  useReveal();
  return (
    <section className="container story-section">
      <div className="story-grid reveal">
        <div className="story-image">
          <div className="ph" style={{ aspectRatio: "4/5", height: "100%" }}>
            <div className="ph-label">Adi am Sudkessel · 2024</div>
          </div>
        </div>
        <div className="story-text">
          <div className="h-eyebrow" style={{ marginBottom: 16 }}>03 — Hinter der Küchentür</div>
          <h2 className="h-display story-h">
            Eine Brauerei, die nach Sonntagmorgen riecht.
          </h2>
          <p className="story-p">



          </p>
          <p className="story-p">Aedu Beer Lab ist kein Unternehmen mit Wachstumsplan. Es ist das, was passiert, wenn man neun Jahre lang an derselben Sache rumtüftelt, weil es einem Spass macht.


          </p>
          <a href="ueber.html" className="hero-link" style={{ marginTop: 20, display: "inline-flex" }}>
            Mehr über mich <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </section>);

};

// ── APP ─────────────────────────────────────────────────────

const App = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  const Hero = {
    still: HeroStill,
    fullbleed: HeroFullbleed,
    split: HeroSplit
  }[tweaks.hero_variant] || HeroStill;

  return (
    <div className={tweaks.show_grain ? "grain" : ""}>
      <Nav active="home" />
      <Hero />
      <SortimentTeaser />
      <ManifestSection />
      <StorySection />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Hero">
          <TweakRadio
            label="Variante"
            value={tweaks.hero_variant}
            options={[
            { value: "still", label: "Still" },
            { value: "fullbleed", label: "Full-Bleed" },
            { value: "split", label: "Split" }]
            }
            onChange={(v) => setTweak("hero_variant", v)} />
          
        </TweakSection>
        <TweakSection title="Atmosphäre">
          <TweakToggle
            label="Filmkorn-Textur"
            value={tweaks.show_grain}
            onChange={(v) => setTweak("show_grain", v)} />
          
        </TweakSection>
      </TweaksPanel>
    </div>);

};

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