// Über uns — Geschichte + Brauprozess-Story-Scroll + Timeline

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "show_grain": true
} /*EDITMODE-END*/;

const PROZESS_STEPS = [
{ n: "01", t: "Maischen", d: "Geschrotetes Malz trifft auf 65°C warmes Wasser. Eine Stunde lang verwandeln Enzyme die Stärke in Zucker. Die Küche riecht nach Frühstücksbrei und Honig.", time: "60 Minuten" },
{ n: "02", t: "Läutern", d: "Die süsse Würze wird vom Malzkuchen getrennt. Klar, goldgelb, klebrig. Probiert man mit dem Löffel — wie warmer Tee mit zu viel Zucker.", time: "45 Minuten" },
{ n: "03", t: "Hopfenkochen", d: "Würze kocht 90 Minuten, Hopfen wandert in Etappen rein. Bittere zuerst, Aroma zum Schluss. Die ganze Wohnung riecht jetzt nach Hopfen.", time: "90 Minuten" },
{ n: "04", t: "Kühlen & Anstellen", d: "Schnell auf 18°C runter, Hefe rein, Deckel drauf. Ab jetzt arbeiten Mikroorganismen für mich. Ich gehe ins Bett.", time: "12 Stunden" },
{ n: "05", t: "Hauptgärung", d: "Sieben bis vierzehn Tage blubbert das Gärgefäss vor sich hin. Hefe frisst Zucker, scheidet Alkohol aus, baut Aromen.", time: "1–2 Wochen" },
{ n: "06", t: "Reifen", d: "Bei IPAs reichen drei Wochen. Stout will zwei Monate. Sauerbier neun. Hier passiert das, was Bier zu Bier macht.", time: "3 Wochen – 9 Monate" },
{ n: "07", t: "Abfüllen", d: "Jede Flasche von Hand befüllt, Kronkorken drauf, Etikett dazu. Die langweiligste und meditativste Tätigkeit der ganzen Brauerei.", time: "ein Samstagnachmittag" }];


const TIMELINE = [
{ y: "2018", t: "Der vierzigste Geburtstag", d: "Ein paar Flaschen selbstgebrautes IPA als Geschenk an die Gäste. Niemand spuckt aus. Das motiviert." },
{ y: "2019", t: "Erste Charge in Serie", d: "20-Liter-Topf. Ein zweistelliger Verlust an Bier, weil das Gärgefäss undicht war. Ich kaufe ein neues." },
{ y: "2021", t: "Erstes Sauerbier", d: "Drei Monate Reifezeit, am Ende riecht es nach Pferdedecke. Wider Erwarten finden das einige Leute gut." },
{ y: "2023", t: "Eigenes Etikett", d: "Eine befreundete Grafikerin entwirft das Logo. Bis dahin gab's nur Klebezettel mit Kugelschreiber." },
{ y: "2024", t: "Hundertste Charge", d: "Ein Stout, das nach Schiefer und gebranntem Karamell schmeckt. Ich nenne es Tiefblick." },
{ y: "2026", t: "Heute", d: "Drei Stile, sechs Rezepte, eine Küche. Mehr soll's nicht werden." }];


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

  return (
    <div className={tweaks.show_grain ? "grain" : ""}>
      <Nav active="ueber" />

      <section className="container ueber-hero">
        <div className="ueber-hero-grid">
          <div>
            <div className="h-eyebrow">ÜBER UNS · ADI & SEIN GRAINFATHER</div>
            <h1>Eine Brauerei,<br /><em>so gross wie<br />eine Küche.</em></h1>
          </div>
          <div className="ueber-hero-image">
            <div className="ph"><div className="ph-label">Porträt · Adi in der Küche</div></div>
          </div>
        </div>
      </section>

      <section className="container bio-section">
        <div className="bio-grid reveal">
          <h2>Wie das alles<br />angefangen hat.</h2>
          <div className="bio-text">
            <p>Als ich vierzig wurde, habe ich ein kleines Fest gegeben. Irgendwann am späten Abend, zwischen dem zweiten und dritten Bier, dachte ich: das könnte ich eigentlich auch selber machen. Eine Woche später stand ein 20-Liter-Topf auf meinem Herd, und das erste Sud kochte vor sich hin.</p>
            <p>Das war 2018. Ich braue immer noch in derselben Küche in Rüfenacht, einem kleinen Dorf vor Bern. Der Topf ist mittlerweile etwas grösser. Acht Jahre, über dreissig Chargen, viele Bierstile.</p>
            <p>Aedu Beer Lab ist kein Unternehmen mit Businessplan. Es ist mein Hobby, das aus dem Ruder gelaufen ist — auf eine schöne Art. Ich verkaufe ein paar Flaschen an Nachbarn und Freunde, manchmal auch an Restaurants in der Region. Mehr will ich nicht. Wenn ich grösser würde, wäre es nicht mehr dasselbe.</p>
          </div>
        </div>
      </section>

      <section className="prozess">
        <div className="container">
          <div className="h-eyebrow">Der Brauprozess</div>
          <h2>Sieben Schritte vom Malz zur Flasche.</h2>
        </div>
        <div className="prozess-scroll">
          {PROZESS_STEPS.map((s) =>
          <div key={s.n} className="prozess-step">
              <span className="step-n">{s.n} / 07</span>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
              <span className="step-time">{s.time}</span>
            </div>
          )}
        </div>
      </section>

      <section className="container timeline">
        <div className="section-head reveal">
          <div>
            <div className="h-eyebrow" style={{ marginBottom: 12 }}>Acht Jahre in Etappen</div>
            <h2>Wie sich das<br />entwickelt hat.</h2>
          </div>
        </div>
        <div className="timeline-list">
          {TIMELINE.map((row) =>
          <div key={row.y} className="timeline-row reveal">
              <div className="timeline-year">{row.y}</div>
              <div className="timeline-title">{row.t}</div>
              <div className="timeline-desc">{row.d}</div>
            </div>
          )}
        </div>
      </section>

      <Footer />

      <TweaksPanel title="Tweaks">
        <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 />);