/* Top-level page sections: Nav, Hero, Marquee, Benefits, Origin, FAQ, Footer */

const BrandMark = ({ size = 26 }) => (
  <div className="brand-mark" style={{ fontSize: size }}>
    <svg className="leaf" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
      <path d="M20 4c-8 0-14 5-14 12 0 2 .5 3.5 1.5 4.5C9 18 13 14 20 12V4Z" />
      <path d="M7 21c2-5 5-9 10-13" />
    </svg>
    ORLINA
  </div>
);

const Announce = () => (
  <div className="announce">
    Free shipping over ₹1,500 <span className="dot"></span> 100% Himalayan-sourced <span className="dot"></span> FSSAI certified
  </div>
);

const Nav = ({ cartCount, onCartOpen }) => (
  <header className="nav">
    <div className="shell nav-inner">
      <nav className="nav-links">
        <a href="#shop">Shop</a>
        <a href="#science">Science</a>
        <a href="#ritual">Ritual</a>
        <a href="#story">Story</a>
        <a href="#reviews">Reviews</a>
      </nav>
      <BrandMark />
      <div className="nav-cta">
        <button className="icon-btn" aria-label="Search"><Icon.Search /></button>
        <button className="icon-btn" aria-label="Account"><Icon.User /></button>
        <button className="icon-btn" aria-label="Cart" onClick={onCartOpen}>
          <Icon.Cart />
          {cartCount > 0 && <span className="cart-badge">{cartCount}</span>}
        </button>
      </div>
    </div>
  </header>
);

const Hero = ({ onShop }) => (
  <section className="hero">
    <div className="shell hero-inner">
      <div className="hero-copy">
        <span className="hero-tag">
          <span className="pill-dot"><Icon.Sparkle size={12} /></span>
          The Himalayan Superberry · 200 ml
        </span>
        <h1 className="display">
          A daily <em>ritual</em><br />
          of golden<br />
          wellness.
        </h1>
        <p className="hero-sub">
          Cold-pressed sea buckthorn from the high valleys of Ladakh. Twelve times the vitamin C of an orange, with the full omega 3-6-7-9 profile — bottled within hours of harvest.
        </p>
        <div className="hero-actions">
          <button className="btn btn-primary" onClick={onShop}>
            Shop the bottle <Icon.Arrow />
          </button>
          <button className="btn btn-ghost">Read the science</button>
        </div>
        <div className="hero-meta">
          <div className="hero-meta-item"><b>12×</b>Vitamin C</div>
          <div className="hero-meta-item"><b>190+</b>Bioactives</div>
          <div className="hero-meta-item"><b>0g</b>Added sugar</div>
          <div className="hero-meta-item"><b>3,500m</b>Altitude</div>
        </div>
      </div>

      <div className="hero-art">
        <div className="hero-halo"></div>
        <div className="hero-ring"></div>
        <div className="hero-ring inner"></div>
        <img className="hero-bottle-img animate-float" src="assets/product-bottle-box.jpeg"
             alt="Orlina Sea Buckthorn Juice — bottle and box"
             style={{ height: '100%', width: '100%', objectFit: 'contain', mixBlendMode: 'multiply' }} />
        <div className="hero-floating top-left">
          <div className="ic">C</div>
          <div>
            <b>Vitamin C</b>
            <span>900mg per serve</span>
          </div>
        </div>
        <div className="hero-floating bottom-right">
          <div className="ic" style={{ background: 'var(--leaf-600)' }}>
            <Icon.Leaf size={18} />
          </div>
          <div>
            <b>100% Natural</b>
            <span>No additives, no sugar</span>
          </div>
        </div>

        {/* berry decorations */}
        <div className="berry-cluster" style={{ position: 'absolute', top: '-4%', right: '-2%', width: 180, height: 180, transform: 'rotate(15deg)' }}>
          <Decor.BerryBranch size={180} flip />
        </div>
        <div className="berry-cluster" style={{ position: 'absolute', bottom: '-2%', left: '-4%', width: 160, height: 160, transform: 'rotate(-12deg)' }}>
          <Decor.BerryBranch size={160} />
        </div>
      </div>
    </div>
  </section>
);

const Marquee = () => {
  const items = [
    'Featured in Vogue India',
    '12× more Vitamin C than orange',
    'Omega 3 · 6 · 7 · 9',
    'Cold-pressed in Ladakh',
    '100% natural · zero sugar',
    'FSSAI · USDA Organic',
  ];
  const doubled = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {doubled.map((t, i) => (
          <span key={i} className="marquee-item">
            {t} <span className="star">✦</span>
          </span>
        ))}
      </div>
    </div>
  );
};

const Benefits = () => {
  const items = [
    { tag: 'Vitamin C', icon: <Icon.Shield />, title: 'Immunity & glow', body: 'Twelve times more vitamin C than oranges — supports immunity, collagen synthesis and luminous skin.' },
    { tag: 'Omega 3-6-7-9', icon: <Icon.Drop />, title: 'Heart & brain', body: 'The rare full-spectrum fatty acid profile, including hard-to-find Omega 7. Supports cardiovascular and cognitive function.' },
    { tag: 'Antioxidants', icon: <Icon.Atom />, title: 'Cellular longevity', body: '190+ bioactive compounds. Neutralises free radicals, slows oxidative ageing at the cellular level.' },
    { tag: 'Vitamin E', icon: <Icon.Sparkle size={22} />, title: 'Skin & repair', body: 'A powerful antioxidant that protects cell membranes and supports dewy, resilient skin.' },
    { tag: 'Vitamin A', icon: <Icon.Eye />, title: 'Vision & renewal', body: 'Carotenoids supporting healthy vision, cell renewal and gentle skin repair from within.' },
    { tag: '100% Natural', icon: <Icon.Leaf size={22} />, title: 'Pure & clean', body: 'Just sea buckthorn berries — no sugar, no concentrates, no preservatives. As nature intended.' },
  ];
  return (
    <section className="section benefits" id="science">
      <div className="shell">
        <div className="section-head">
          <span className="eyebrow">The Science</span>
          <h2 className="display">A small bottle<br /> of <em>big benefits.</em></h2>
          <p>Sea buckthorn is one of the few plants on earth that delivers a complete spectrum of vitamins, minerals and omegas in a single serving. We bottle that profile, unbroken.</p>
        </div>
        <div className="benefits-grid">
          {items.map((b, i) => (
            <div key={i} className="benefit-card">
              <div className="b-icon">{b.icon}</div>
              <div className="small-tag">{b.tag}</div>
              <h3>{b.title}</h3>
              <p>{b.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const HowToConsume = () => (
  <section className="section howto" id="ritual">
    <div className="shell">
      <div className="section-head">
        <span className="eyebrow">The Ritual</span>
        <h2 className="display">Three steps,<br /> <em>every morning.</em></h2>
      </div>
      <div className="howto-grid">
        <div className="howto-img-wrap">
          <img src="assets/how-to-consume.jpeg" alt="Woman drinking Orlina sea buckthorn juice" />
          <div className="howto-img-tag">
            ORLINA RITUAL
            <b>0:30 minutes daily</b>
          </div>
        </div>
        <div className="steps">
          <div className="step">
            <div className="step-no">01</div>
            <div>
              <div className="small-tag">Shake</div>
              <h3>Shake well, gently.</h3>
              <p>Sea buckthorn settles naturally — give the bottle a few firm shakes to reawaken the suspended bioactives before each pour.</p>
            </div>
          </div>
          <div className="step">
            <div className="step-no">02</div>
            <div>
              <div className="small-tag">Mix</div>
              <h3>Pour 20–30 ml.</h3>
              <p>Combine with half a glass of warm (not hot) water. The warmth opens the aromatics; the dilution softens the brightness into something delicious.</p>
            </div>
          </div>
          <div className="step">
            <div className="step-no">03</div>
            <div>
              <div className="small-tag">Sip</div>
              <h3>On an empty stomach.</h3>
              <p>First thing in the morning and again 30 minutes after dinner. Consistency is the secret — daily, for at least 30 days, to feel the shift.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const Origin = () => (
  <section className="section origin" id="story">
    <div className="shell">
      <div className="section-head">
        <span className="eyebrow">The Origin</span>
        <h2 className="display">Born at the<br /><em>top of the world.</em></h2>
        <p>Hippophae rhamnoides grows wild across the high cold deserts of Ladakh, between 3,000 and 4,500 metres. It survives where almost nothing else can — and concentrates an extraordinary density of nutrients to do so.</p>
      </div>
      <div className="origin-grid">
        <div className="origin-card">
          <span className="alt">01</span>
          <h3>Hand-harvested</h3>
          <p>Each October, families across the Nubra and Spiti valleys harvest the bright orange berries by hand — a tradition older than written record.</p>
        </div>
        <div className="origin-card">
          <span className="alt">02</span>
          <h3>Cold-pressed</h3>
          <p>Within hours, the berries are slow cold-pressed in small batches at our Leh facility. No heat. No oxidation. No loss of bioactives.</p>
        </div>
        <div className="origin-card">
          <span className="alt">03</span>
          <h3>Bottled pure</h3>
          <p>Just juice. No water, no concentrate, no sugar, no preservatives. What's in the glass is exactly what was in the berry.</p>
        </div>
      </div>
      <p className="origin-quote">
        "The berry that survives a Himalayan winter knows things about resilience that no laboratory can replicate."
        <span className="credit">— Tenzin Norbu, Founder</span>
      </p>
    </div>
  </section>
);

const FAQ = () => {
  const items = [
    { q: 'Is Orlina safe for daily use?', a: 'Yes. Sea buckthorn has been consumed daily for centuries across Tibetan, Mongolian and Russian traditions. We recommend 20–30 ml per serving, twice a day, on an empty stomach. Consult your doctor if you are pregnant, nursing, or on blood-thinning medication.' },
    { q: 'How long until I feel a difference?', a: 'Most customers report visible skin glow and steadier energy within 21–30 days of consistent use. Deeper benefits — immunity, gut, hormonal balance — typically settle in around 60–90 days.' },
    { q: 'What does it taste like?', a: 'Bright, tangy, slightly sour with a tropical note — between passion fruit and apricot. Diluted in warm water with a touch of honey, it becomes a daily pleasure.' },
    { q: 'How is it different from sea buckthorn capsules?', a: 'Capsules typically contain only the oil. Our juice carries the complete pulp — fibre, water-soluble vitamins, antioxidants, and the oil — exactly as the berry holds it.' },
    { q: 'Where do you ship?', a: 'We currently ship across India with free shipping over ₹1,500. Orders placed before 2 pm are dispatched same day from our Delhi warehouse. Delivery: 2–5 business days.' },
    { q: 'What is your return policy?', a: 'Unopened bottles can be returned within 14 days for a full refund. If you are unhappy with your experience, write to us — we will make it right.' },
  ];
  return (
    <section className="section faq">
      <div className="shell">
        <div className="section-head">
          <span className="eyebrow">Questions</span>
          <h2 className="display">Things worth <em>asking.</em></h2>
        </div>
        <div className="faq-list">
          {items.map((f, i) => (
            <details key={i} className="faq-item" open={i === 0}>
              <summary>{f.q} <span className="plus">+</span></summary>
              <p>{f.a}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
};

const Footer = () => (
  <footer className="footer">
    <div className="shell">
      <div className="footer-top">
        <div>
          <div className="big-mark">Orlina</div>
          <p className="desc">A daily ritual of golden wellness, sourced from the high Himalayas. Pure sea buckthorn, cold-pressed and bottled with care.</p>
          <div className="newsletter">
            <input type="email" placeholder="Your email — for letters from Ladakh" />
            <button>Subscribe</button>
          </div>
        </div>
        <div>
          <h5>Shop</h5>
          <ul>
            <li><a>Single bottle</a></li>
            <li><a>Three pack</a></li>
            <li><a>Subscribe & save</a></li>
            <li><a>Gift sets</a></li>
          </ul>
        </div>
        <div>
          <h5>Company</h5>
          <ul>
            <li><a>Our story</a></li>
            <li><a>Sourcing</a></li>
            <li><a>The science</a></li>
            <li><a>Journal</a></li>
            <li><a>Contact</a></li>
          </ul>
        </div>
        <div>
          <h5>Help</h5>
          <ul>
            <li><a>Track your order</a></li>
            <li><a>Shipping & returns</a></li>
            <li><a>FAQ</a></li>
            <li><a>Wholesale</a></li>
            <li><a>support@orlina.in</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 Orlina Wellness Pvt. Ltd. · FSSAI Lic. 100·22008·0034</span>
        <div className="payments">
          <span className="pay-chip">UPI</span>
          <span className="pay-chip">GPay</span>
          <span className="pay-chip">PhonePe</span>
          <span className="pay-chip">Paytm</span>
          <span className="pay-chip">COD</span>
        </div>
      </div>
    </div>
  </footer>
);

Object.assign(window, { BrandMark, Announce, Nav, Hero, Marquee, Benefits, HowToConsume, Origin, FAQ, Footer });