// About / Markengeschichte
function About({ onNav }) {
  return (
    <div>
      <section className="about-hero">
        <div className="wrap">
          <span className="eyebrow">Unsere Geschichte</span>
          <h1>Wir wollten mehr Auswahl. Also haben wir einen Garten angelegt.</h1>
          <p>Der Apéro Garden begann an einem sonnigen Nachmittag im Garten, mit der Frage, warum die spannendsten Gläser immer den anderen gehören. Also haben wir angefangen, sie zu sammeln.</p>
        </div>
      </section>

      <div className="wrap">
        <div className="about-band">
          <img className="product-photo" src="../../assets/lifestyle/about-band.webp" alt="Freunde geniessen einen Apéro im sonnigen Garten" />
        </div>
      </div>

      <section className="wrap">
        <div className="about-split">
          <div className="media">
            <img className="product-photo" src="../../assets/lifestyle/inga-portrait.webp" alt="Inga im Garten" />
          </div>
          <div>
            <span className="eyebrow">Das Wie</span>
            <h2>Sorgfältig kuratiert. Von Hand ausgewählt.</h2>
            <p>Die alkoholfreie und alkoholarme Apéro-Szene wächst gerade rasant, und in ihr passieren spannende Dinge. Was uns gefehlt hat: ein Ort, an dem die wirklich guten Drinks gesammelt sind. Genau das machen wir.</p>
            <p>Wir probieren, vergleichen, wählen aus. Was bei uns in den Garten kommt, hat eine ehrliche Geschichte, schmeckt überzeugend und steht für sich. Kleine und mittlere Hersteller aus der Schweiz und Europa, gerne mit einer eigenen Note.</p>
          </div>
        </div>
        <div className="about-split" style={{ borderTop: "1px solid var(--border)" }}>
          <div>
            <span className="eyebrow">Das Warum</span>
            <h2>Für den Apéro, an dem du wirklich sein willst.</h2>
            <p>Lange Mittagessen, die nicht im Mittagsschlaf enden. Der Dienstag-Spritz ohne Hintergedanken. Ein Glas in der Hand, das einfach gut schmeckt und Lust auf das nächste macht. Wir sind nicht gegen etwas. Wir sind für genau das hier.</p>
            <p>Sorgfältig gekühlt, plastikfrei verpackt und in 1–2 Tagen bei dir vor der Tür. Damit dein Glas auch wirklich genau das wird.</p>
            <div style={{ marginTop: 24 }}>
              <Button variant="primary" size="lg" onClick={() => onNav("collection")}>Garten probieren</Button>
            </div>
          </div>
          <div className="media">
            <img className="product-photo" src="../../assets/lifestyle/about-warum.webp" alt="Glas in der Hand, Apéro im Garten" />
          </div>
        </div>
      </section>

      <section className="section section--tint">
        <div className="wrap" style={{ textAlign: "center" }}>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 34, letterSpacing: "-.02em", margin: "0 auto 14px", maxWidth: "16em" }}>Mehr Abwechslung im Glas.</h2>
          <p style={{ color: "var(--fg-2)", maxWidth: "30em", margin: "0 auto" }}>Genau darum geht's. Den Rest übernehmen wir.</p>
        </div>
      </section>
    </div>
  );
}
Object.assign(window, { About });