// Mood landing page — recreates highculture_mockups/mood.html

function MoodHero() {
  return (
    <section className="hero" id="produkt">
      <div className="container hero-grid">
        <div>
          <p className="eyebrow">High Culture</p>
          <h1>Rozluźnienie<span>bez odurzenia.</span></h1>
          <p className="lead">Relaks i dobre samopoczucie*</p>
          <p className="sublead">Suplement diety w płynie</p>
          <div className="claim">
            <span>✦</span>
            <div>
              <b>Funkcjonalny zamiennik alkoholu nowej generacji.</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">129,00 zł</div>
            <div className="pill">10 porcji</div>
          </div>
          <div className="chip-row">
            <div className="chip"><span>✦</span> Bez dodatku cukru</div>
            <div className="chip"><span>♨</span> Niecałe 14 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/mood/hero-composition.jpg" alt="" />
          <img className="seal" src="../../assets/mood/seal.jpg" alt="" />
          <div className="hero-facts">
            <div className="fact"><span className="ico">✺</span><p>Wytrawny, głęboki i rześki jak alpejska rosa.</p></div>
            <div className="fact"><span className="ico">◌</span><p>Spożywać 3 razy dziennie po 50 ml.</p></div>
            <div className="fact"><span className="ico">♜</span><p>Czarne, matowe szkło chroni przed UV.</p></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function MoodLanding() {
  const benefits = [
    { icon: "✺", title: "Relaks", body: "Pomaga się zrelaksować i wyciszyć po intensywnym dniu." },
    { icon: "✽", title: "Dobre samopoczucie", body: "Wspiera nastrój i poczucie wewnętrznego balansu." },
    { icon: "☯", title: "Odporność na stres", body: "Wspomaga organizm w radzeniu sobie ze stresem." },
    { icon: "◇", title: "Bez cukru", body: "Bez dodatku cukru i zbędnych kalorii." },
    { icon: "♨", title: "Niska kaloryczność", body: "Niecałe 14 kcal w porcji — lekkość." },
    { icon: "♜", title: "Premium bottle", body: "Czarne, matowe szkło chroni składniki aktywne." },
  ];
  const ingredients = [
    ["Passiflora", "Pomaga się zrelaksować i ułatwia wyciszenie.", "ing-passiflora"],
    ["Damiana", "Wspiera dobre samopoczucie i pozytywny nastrój.", "ing-damiana"],
    ["5-HTP", "Prekursor serotoniny. Wspiera równowagę emocjonalną.", "ing-htp"],
    ["Reishi", "Wspiera odporność organizmu na stres i zmęczenie.", "ing-reishi"],
    ["GABA", "Wspiera wyciszenie i spokojny umysł.", "ing-gaba"],
    ["Rhodiola", "Adaptogen wspierający wytrzymałość na stres.", "ing-rhodiola"],
    ["Ashwagandha", "Pomaga organizmowi w utrzymaniu równowagi.", "ing-ashwagandha"],
    ["Magnolia", "Pomaga w relaksacji i spokojnym śnie.", "ing-magnolia"],
    ["Witamina C", "Wspiera prawidłowe funkcjonowanie odporności.", "ing-vitamin-c"],
    ["Piperyna", "Zwiększa biodostępność innych składników.", "ing-piperine"],
  ];
  const steps = [
    ["◇", "Synergia składników", "Rośliny, aminokwasy i witaminy działają kompleksowo."],
    ["☯", "Regulacja układu", "Składniki wspierają równowagę i odporność na stres."],
    ["✺", "Odprężenie", "Ułatwia relaks, poprawia nastrój i codzienne funkcjonowanie."],
    ["☼", "Bez mgły następnego dnia", "Lekkość, jasność umysłu i gotowość na kolejne wyzwania."],
  ];
  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, sztucznych barwników i wypełniaczy."],
    ["trust-legal", "Zgodność z prawem", "Tworzymy zgodnie z przepisami prawa żywnościowego."],
  ];
  const faq = [
    ["Czy Mood zawiera alkohol?", "Nie. Mood to funkcjonalny zamiennik alkoholu. Nie zawiera alkoholu ani substancji odurzających."],
    ["Czy mogę stosować Mood codziennie?", "Tak. Mood został stworzony z myślą o codziennym stosowaniu. 3 porcje dziennie po 50 ml."],
    ["Czy Mood uzależnia?", "Nie. Mood nie zawiera substancji uzależniających. Działa w oparciu o składniki roślinne i aminokwasy."],
    ["Dla kogo jest przeznaczony?", "Dla osób dorosłych, które chcą wspierać relaks, dobre samopoczucie i radzenie sobie ze stresem."],
  ];

  return (
    <div data-hc-product="mood">
      <Topbar />
      <Header />
      <main>
        <MoodHero />
        <section className="section">
          <div className="container intro-grid">
            <div>
              <h2 className="section-title">Dlaczego Mood?</h2>
              <p className="kicker">Codzienne wsparcie w utrzymaniu równowagi ciała i umysłu.</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 roślin, aminokwasów i witamin w płynnej formule stworzonej z myślą o codziennym wsparciu równowagi.</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/mood/${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 wspiera naturalne procesy organizmu, ułatwiając odprężenie.</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/mood/lifestyle-calm.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">Wytrawny, głęboki i rześki jak alpejska rosa.</p>
              <p style={{ marginTop: 14 }}><b>Spożywać 3 razy dziennie po 50 ml.</b></p>
              <div className="chip-row">
                <span className="pill">Rano</span><span className="pill">Popołudnie</span><span className="pill">Wieczór</span>
              </div>
            </article>
            <div>
              <h2 className="section-title">Mocktaile z Mood</h2>
              <p className="kicker">Stworzone do celebracji smaku i dobrego samopoczucia.</p>
              <div className="recipe-grid" style={{ marginTop: 16 }}>
                <article className="card recipe">
                  <img src="../../assets/mood/drink-tonic.jpg" alt="" />
                  <h3>Mood + tonik</h3>
                  <p>{"50 ml Mood\n150 ml toniku\nCytryna · rozmaryn"}</p>
                </article>
                <article className="card recipe">
                  <img src="../../assets/mood/drink-bees.jpg" alt="" />
                  <h3>Bee's Knees bez alkoholu</h3>
                  <p>{"50 ml Mood\n20 ml soku z cytryny\n15 ml syropu miodowego"}</p>
                </article>
                <article className="card recipe">
                  <img src="../../assets/mood/garnishes.jpg" alt="" />
                  <h3>Botaniczny garnish</h3>
                  <p>{"Cytrusy, rozmaryn,\nkwiaty i owoce."}</p>
                </article>
              </div>
            </div>
            <aside className="card side-list">
              <div className="item"><span>✺</span><p>Wytrawny, roślinny profil z nutą kwiatów.</p></div>
              <div className="item"><span>◇</span><p>Bez alkoholu. Bez kompromisów.</p></div>
              <div className="item"><span>☼</span><p>Idealny sam lub jako baza do mocktaili.</p></div>
            </aside>
          </div>
        </section>

        <section className="section" id="rytuał">
          <div className="container">
            <div className="gallery-grid">
              <a className="gallery-item">
                <img src="../../assets/mood/drink-serving.jpg" alt="" />
                <div className="caption">Wieczór<b>50 ml jak shot</b></div>
              </a>
              <a className="gallery-item">
                <img src="../../assets/mood/drink-tonic.jpg" alt="" />
                <div className="caption">Spotkanie<b>Mocktail z tonikiem</b></div>
              </a>
              <a className="gallery-item">
                <img src="../../assets/mood/garnishes.jpg" alt="" />
                <div className="caption">Akompaniament<b>Botaniczne dodatki</b></div>
              </a>
              <a className="gallery-item">
                <img src="../../assets/mood/lifestyle-calm.jpg" alt="" />
                <div className="caption">Reset<b>Spokój bez ceremonii</b></div>
              </a>
            </div>
          </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/mood/${slug}.jpg`} />
              ))}
            </div>
            <article className="card quote-card">
              <img src="../../assets/mood/founder.jpg" alt="" />
              <div className="quote-mark">"</div>
              <blockquote>Mood to efekt ponad półtora roku pracy u podstaw. Połączyliśmy wiedzę naukową z rzemieślniczym podejściem do jakości.</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/mood/footer-cluster.jpg"
          heading="Bądź pierwszy w kolejce."
          kicker="Dołącz do listy powiadomień i dowiedz się, gdy Mood będzie dostępny."
        />
      </main>
      <Footer />
    </div>
  );
}

window.MoodLanding = MoodLanding;