// highculture.pl marketing index page — sits above Boost and Mood
// and lets the visitor pick a product. Recreates the source index.html
// pattern but as a richer, "house" page.

function HouseLanding() {
  return (
    <div data-hc-product="house">
      <Topbar />
      <Header ctaLabel="Dołącz do listy" />
      <main>
        <section className="hero" style={{ minHeight: "calc(100vh - 104px)", textAlign: "left" }}>
          <div className="container hero-grid">
            <div>
              <p className="eyebrow">High Culture</p>
              <h1>Sprawczość<span>w codziennym rytuale.</span></h1>
              <p className="lead">Przełomowe produkty wspomagające procesy poznawcze, odprężenie oraz odporność na stres.</p>
              <p className="sublead" style={{ marginTop: 14 }}>Tworzymy je z naukowcami i prawnikami specjalizującymi się w prawie żywnościowym.</p>
              <div className="cta-row" style={{ marginTop: 28 }}>
                <a className="button button--primary" href="boost/index.html" target="_top">Poznaj Boost</a>
                <a className="button button--ghost" href="mood/index.html" target="_top">Poznaj Mood</a>
              </div>
              <p className="proof" style={{ marginTop: 26 }}>Produkty testowało ponad 1000 osób.</p>
            </div>
            <div className="hero-art">
              <img className="main-art" src="../../assets/boost/hero-composition.jpg" alt=""
                style={{ width: "min(100%, 520px)", marginRight: -40 }} />
            </div>
          </div>
        </section>

        <section className="section">
          <div className="container intro-grid">
            <div>
              <h2 className="section-title">Dwa rytuały. Jeden manifest.</h2>
              <p className="kicker">Każdy produkt High Culture odpowiada na inny moment dnia — ale wszystkie powstały z tej samej obsesji na punkcie jakości i transparentności.</p>
              <div className="monogram">HC</div>
            </div>
            <div className="benefit-grid" style={{ gridTemplateColumns: "repeat(2, 1fr)", gap: 18 }}>
              <a className="card" style={{ padding: 24, textDecoration: "none", color: "inherit", display: "block" }} href="boost/index.html" target="_top">
                <img src="../../assets/boost/hero-composition.jpg" alt=""
                  style={{ width: "100%", aspectRatio: "1.05/1", objectFit: "cover", borderRadius: 18, border: "1px solid rgba(255,255,255,.08)" }} />
                <p className="eyebrow" style={{ marginTop: 16, marginBottom: 6, color: "#c57c43" }}>Boost · 50 porcji</p>
                <h3 style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 32, margin: "0 0 8px", letterSpacing: "-.025em" }}>Skupienie i spokój.</h3>
                <p style={{ color: "var(--hc-muted)", fontSize: 14, margin: 0 }}>Krople do kawy. Synergia ekstraktów roślinnych i grzybowych dla głębokiej pracy.</p>
                <p style={{ marginTop: 14, color: "var(--hc-cream)", fontWeight: 600 }}>od 159,00 zł →</p>
              </a>
              <a className="card" style={{ padding: 24, textDecoration: "none", color: "inherit", display: "block" }} href="mood/index.html" target="_top">
                <img src="../../assets/mood/hero-composition.jpg" alt=""
                  style={{ width: "100%", aspectRatio: "1.05/1", objectFit: "cover", borderRadius: 18, border: "1px solid rgba(255,255,255,.08)" }} />
                <p className="eyebrow" style={{ marginTop: 16, marginBottom: 6, color: "#c7586a" }}>Mood · 10 porcji</p>
                <h3 style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 32, margin: "0 0 8px", letterSpacing: "-.025em" }}>Rozluźnienie bez odurzenia.</h3>
                <p style={{ color: "var(--hc-muted)", fontSize: 14, margin: 0 }}>Funkcjonalny zamiennik alkoholu — wytrawny, roślinny, na wieczór.</p>
                <p style={{ marginTop: 14, color: "var(--hc-cream)", fontWeight: 600 }}>od 129,00 zł →</p>
              </a>
            </div>
          </div>
        </section>

        <section className="section process">
          <div className="container process-grid">
            <div>
              <h2 className="section-title">Od nauki do innowacji.</h2>
              <p className="kicker">Półtora roku pracy z naukowcami, prawnikami żywnościowymi i ekspertami od jakości — żeby suplement był po prostu suplementem, a nie obietnicą.</p>
            </div>
            <div className="steps">
              <Step icon="◇" title="Synergia" body="Ekstrakty roślinne, aminokwasy i adaptogeny w przemyślanych proporcjach." />
              <Step icon="☷" title="Transparentność" body="Pełen skład, źródła i certyfikaty zawsze dostępne." />
              <Step icon="♜" title="Premium bottle" body="Czarne, matowe szkło chroniące składniki przed UV." />
              <Step icon="☼" title="Odpowiedzialność" body="Tworzymy zgodnie z najwyższymi standardami prawa żywnościowego." />
            </div>
            <img className="lifestyle-img" src="../../assets/mood/lifestyle-calm.jpg" alt="" />
          </div>
        </section>

        <section className="section">
          <div className="container trust-grid">
            <div>
              <h2 className="section-title">Magazyn</h2>
              <p className="kicker">Krótkie eseje o pracy poznawczej, regulacji stresu i kulturze suplementacji.</p>
            </div>
            <div className="trust-cards">
              <TrustCard image="../../assets/boost/trust-lab.jpg" title="Czym jest cytykolina" body="Krótkie wprowadzenie do związku, który napędza Twoją uwagę." />
              <TrustCard image="../../assets/mood/trust-formula.jpg" title="GABA, Reishi i sen" body="Co naprawdę wiemy o adaptogenach na wieczór." />
              <TrustCard image="../../assets/boost/trust-formula.jpg" title="Bez cukru, bez kompromisów" body="Dlaczego rezygnujemy z wypełniaczy, które robią smak." />
              <TrustCard image="../../assets/mood/trust-lab.jpg" title="Mocktail jako rytuał" body="Jak Mood odzyskuje wieczór bez alkoholu." />
            </div>
            <article className="card quote-card">
              <img src="../../assets/boost/founder.jpg" alt="" />
              <div className="quote-mark">"</div>
              <blockquote>High Culture nie zastępuje niczego — tylko mądrze uzupełnia. To dla osób, które już wiedzą, czego chcą od dnia.</blockquote>
              <cite>Krzysztof Kornas,<br />Prezes Zarządu High Culture sp. z o.o.</cite>
            </article>
          </div>
        </section>

        <FinalCta
          image="../../assets/mood/footer-cluster.jpg"
          heading="Bądź pierwszy w kolejce."
          kicker="Premiery, treści i oferty specjalne — bezpośrednio na Twój e-mail."
          ctaLabel="Dołącz do listy"
        />
      </main>
      <Footer />
    </div>
  );
}

window.HouseLanding = HouseLanding;