// Boost landing page — recreates highculture_mockups/boost.html
// Composes shared components from ../_shared/Components.jsx.

function BoostHero() {
  return (
    <section className="hero" id="produkt">
      <div className="container hero-grid">
        <div>
          <p className="eyebrow">High Culture</p>
          <h1>Skupienie<span>i spokój.</span></h1>
          <p className="lead">Do kawy. Do pracy. Do działania.*</p>
          <p className="sublead">Suplement diety w postaci kropli do kawy</p>
          <div className="claim">
            <span>✦</span>
            <div>
              <b>Innowacyjne uzupełnienie właściwości Twojej ulubionej kawy.</b>
              <span className="mini-copy">Rezultat ponad półtora roku prac z naukowcami i prawnikami specjalizującymi się w prawie żywnościowym.</span>
            </div>
          </div>
          <p className="proof">Produkt testowało ponad 1000 osób.</p>
          <div className="price-row">
            <div className="price">159,00 zł</div>
            <div className="pill">50 porcji</div>
          </div>
          <div className="chip-row">
            <div className="chip"><span>✦</span> Bez dodatku cukru</div>
            <div className="chip"><span>♨</span> Niecałe 4 kcal w porcji</div>
            <div className="chip"><span>♙</span> Dla osób dorosłych</div>
          </div>
          <div className="cta-row">
            <a className="button button--primary">Powiadom mnie o dostępności</a>
            <a className="button button--ghost">Zobacz skład</a>
          </div>
        </div>
        <div className="hero-art">
          <img className="main-art" src="../../assets/boost/hero-composition.jpg" alt="" />
          <img className="seal" src="../../assets/boost/seal.jpg" alt="" />
          <div className="hero-facts">
            <div className="fact"><span className="ico">◎</span><p>Skupienie i spokój*</p></div>
            <div className="fact"><span className="ico">◌</span><p>Spożywać 3 razy dziennie po 2 ml.</p></div>
            <div className="fact"><span className="ico">☕</span><p>Dodaj bezpośrednio do kawy.</p></div>
            <div className="fact"><span className="ico">♜</span><p>Czarne, matowe szkło chroni przed UV.</p></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function BoostLanding() {
  const benefits = [
    { icon: "◎", title: "Skupienie", body: "Ułatwia koncentrację i utrzymanie uwagi." },
    { icon: "✺", title: "Spokój", body: "Wspiera czujność bez nerwowości." },
    { icon: "☷", title: "Pamięć", body: "Wspiera funkcje poznawcze i klarowność myślenia." },
    { icon: "◈", title: "Mniej dystrakcji", body: "Pomaga wejść w rytm głębokiej pracy." },
    { icon: "♨", title: "Niska kaloryczność", body: "Niecałe 4 kcal w porcji." },
    { icon: "♜", title: "Premium bottle", body: "Czarne, matowe szkło chroni aktywne składniki." },
  ];
  const ingredients = [
    ["EGCG", "Wspiera koncentrację, pamięć i ochronę neuronów.", "ing-egcg"],
    ["L-teanina", "Pomaga utrzymać czujność przy odprężeniu.", "ing-l-theanine"],
    ["Cordyceps", "Wspiera witalność i odporność na zmęczenie.", "ing-cordyceps"],
    ["Lion's Mane", "Wsparcie dla funkcji poznawczych i jasności umysłu.", "ing-lions-mane"],
    ["Cytykolina", "Wspiera procesy uwagi i sprawność poznawczą.", "ing-citicoline"],
    ["Fosfatydyloseryna", "Wspiera pracę mózgu i pamięć.", "ing-phosphatidylserine"],
    ["Teobromina", "Delikatne pobudzenie i stabilna energia.", "ing-theobromine"],
    ["Piperyna", "Zwiększa biodostępność innych składników.", "ing-piperine"],
    ["Jarzębina", "Naturalny aromat i wsparcie antyoksydacyjne.", "ing-rowan"],
  ];
  const steps = [
    ["◇", "Synergia składników", "Ekstrakty, związki roślinne i substancje wspierające mózg działają kompleksowo."],
    ["☕", "Kawa + Boost", "Dwie pompki pipety trafiają bezpośrednio do kawy."],
    ["☷", "Czujność i równowaga", "Łatwiej utrzymać skupienie bez przeciążenia."],
    ["◎", "Mniej dystrakcji", "Więcej spokoju, płynności i gotowości do pracy poznawczej."],
  ];
  const trust = [
    ["trust-lab", "Badania i rozwój", "Formuła powstała we współpracy z naukowcami i ekspertami ds. żywności."],
    ["trust-production", "Jakość i bezpieczeństwo", "Produkcja w certyfikowanych zakładach. Kontrola na każdym etapie."],
    ["trust-formula", "Transparentna formuła", "Bez dodatku cukru i zbędnych wypełniaczy."],
    ["trust-legal", "Zgodność z prawem", "Tworzymy zgodnie z przepisami prawa żywnościowego."],
  ];
  const faq = [
    ["Czy Boost zmienia smak kawy?", "Nieznacznie. Boost został zaprojektowany tak, by nie odbierać Ci smaku ulubionej kawy."],
    ["Jak stosować Boost?", "Spożywać 3 razy dziennie po 2 ml, dodając bezpośrednio do kawy."],
    ["Czy mogę stosować Boost codziennie?", "Tak, z zachowaniem zalecanej porcji dziennej 6 ml."],
    ["Czy są ważne ograniczenia?", "Nie spożywać na czczo i nie łączyć tego samego dnia z innymi produktami zawierającymi zieloną herbatę."],
  ];

  return (
    <div data-hc-product="boost">
      <Topbar />
      <Header />
      <main>
        <BoostHero />
        <section className="section">
          <div className="container intro-grid">
            <div>
              <h2 className="section-title">Dlaczego Boost?</h2>
              <p className="kicker">Codzienne wsparcie dla intensywnej aktywności poznawczej i spokojnego skupienia.</p>
              <div className="monogram">HC</div>
            </div>
            <div className="benefit-grid">
              {benefits.map(b => <BenefitCard key={b.title} {...b} />)}
            </div>
          </div>
        </section>

        <section className="section" id="sklad">
          <div className="container split-grid">
            <div>
              <h2 className="section-title">Skład i działanie</h2>
              <p className="kicker">Synergia ekstraktów roślinnych i grzybowych, cytykoliny oraz fosfatydyloseryny w wygodnej formule do kawy.</p>
              <p style={{ marginTop: 18 }}><a className="button button--ghost">Pełny skład</a></p>
            </div>
            <div className="ingredient-grid">
              {ingredients.map(([n, b, slug]) => (
                <IngredientCard key={n} name={n} body={b} image={`../../assets/boost/${slug}.jpg`} />
              ))}
            </div>
          </div>
        </section>

        <section className="section process">
          <div className="container process-grid">
            <div>
              <h2 className="section-title">Jak to działa? Efekt?</h2>
              <p className="kicker">Skoncentrowana formuła uzupełnia rytuał picia kawy, wspierając skupienie, czujność i spokój.</p>
            </div>
            <div className="steps">
              {steps.map(([i, t, b]) => <Step key={t} icon={i} title={t} body={b} />)}
            </div>
            <img className="lifestyle-img" src="../../assets/boost/lifestyle-focus.jpg" alt="" />
          </div>
        </section>

        <section className="section" id="uzycie">
          <div className="container usage-grid">
            <article className="card usage-panel">
              <h2 className="section-title">Jak smakuje i jak używać?</h2>
              <p className="kicker">Smak Twojej ulubionej kawy pozostaje niemal bez zmian.</p>
              <p style={{ marginTop: 14 }}><b>Spożywać 3 razy dziennie po 2 ml.</b></p>
              <div className="chip-row">
                <span className="pill">Rano</span><span className="pill">Praca</span><span className="pill">Popołudnie</span>
              </div>
              <img src="../../assets/boost/dropper.jpg" alt="" />
            </article>
            <div>
              <h2 className="section-title">Boost do kawy</h2>
              <p className="kicker">Prosty rytuał, który wzmacnia Twój codzienny focus.</p>
              <div className="recipe-grid" style={{ marginTop: 16 }}>
                <article className="card recipe">
                  <img src="../../assets/boost/coffee-espresso.jpg" alt="" />
                  <h3>Espresso + Boost</h3>
                  <p>{"2 ml Boost\n+ espresso"}</p>
                </article>
                <article className="card recipe">
                  <img src="../../assets/boost/coffee-flatwhite.jpg" alt="" />
                  <h3>Flat white + Boost</h3>
                  <p>{"2 ml Boost\n+ flat white"}</p>
                </article>
                <article className="card recipe">
                  <img src="../../assets/boost/coffee-coldbrew.jpg" alt="" />
                  <h3>Cold brew + Boost</h3>
                  <p>{"2 ml Boost\n+ cold brew\n+ lód"}</p>
                </article>
              </div>
            </div>
            <aside className="card side-list">
              <div className="item"><span>☕</span><p>Nie odbiera Ci smaku ulubionej kawy.</p></div>
              <div className="item"><span>◌</span><p>Wygodna forma kropli z pipetą.</p></div>
              <div className="item"><span>◎</span><p>Codzienny rytuał dla osób, które pracują głową.</p></div>
            </aside>
          </div>
        </section>

        <section className="section" id="nauka">
          <div className="container trust-grid">
            <div>
              <h2 className="section-title">Od nauki do innowacji</h2>
              <p className="kicker">Transparentność, jakość i odpowiedzialność w każdym detalu.</p>
            </div>
            <div className="trust-cards">
              {trust.map(([slug, t, b]) => (
                <TrustCard key={t} title={t} body={b} image={`../../assets/boost/${slug}.jpg`} />
              ))}
            </div>
            <article className="card quote-card">
              <img src="../../assets/boost/founder.jpg" alt="" />
              <div className="quote-mark">"</div>
              <blockquote>Boost powstał z prostego założenia: nie zastępować kawy, tylko mądrze uzupełnić jej działanie.</blockquote>
              <cite>Krzysztof Kornas,<br />Prezes Zarządu High Culture sp. z o.o.</cite>
            </article>
          </div>
        </section>

        <section className="section" id="faq">
          <div className="container faq-grid">
            <div>
              <h2 className="section-title">Najczęstsze pytania</h2>
              <p className="kicker">Masz pytanie? Sprawdź odpowiedzi lub skontaktuj się z nami.</p>
            </div>
            <div className="faq-list">
              {faq.map(([q, a]) => <FaqItem key={q} q={q} a={a} />)}
            </div>
          </div>
        </section>

        <FinalCta
          image="../../assets/boost/footer-cluster.jpg"
          heading="Bądź pierwszy w kolejce."
          kicker="Dołącz do listy powiadomień i dowiedz się, gdy Boost będzie dostępny."
        />
      </main>
      <Footer />
    </div>
  );
}

window.BoostLanding = BoostLanding;