// Homepage
function HomePage({ navigate }) {
  return (
    <div data-screen-label="Home">
      {/* Hero */}
      <section className="hero bg-navy" style={{ position: 'relative' }}>
        <div className="hero-grid"></div>
        <div className="hero-glow hero-glow-1"></div>
        <div className="hero-glow hero-glow-2"></div>
        <HeroVisual />
        <div className="container hero-content">
          <FadeUp><span className="eyebrow">UAE'S SPECIALIST FMCG Q-COMMERCE CONSULTANCY</span></FadeUp>
          <FadeUp delay={150}>
            <h1>Launch and grow your brands on 
UAE Q-commerce</h1>
          </FadeUp>
          <FadeUp delay={300}>
            <p className="hero-sub">
              We manage everything — from platform onboarding to daily operations — so your brands grow on Talabat, Noon, Amazon, and Careem.
            </p>
          </FadeUp>
          <FadeUp delay={450}>
            <div className="hero-ctas">
              <a href="#/contact" className="btn btn-primary">Get Your Q-Commerce Readiness Score →</a>
              <a href="#/cases" className="btn btn-ghost">See Our Results</a>
            </div>
          </FadeUp>
        </div>
      </section>

      {/* Social proof bar */}
      <section className="bg-light" style={{ padding: '64px 0 48px' }}>
        <div className="container">
          <div className="stats-bar">
            {[[30, '', 'Brands managed'],
            [210, '+', 'SKUs'],
            [4, '', 'Platforms'],
            [30, '-day', 'Launch']].
            map(([n, suf, label], i) =>
            <FadeUp key={i} delay={i * 100}>
                <div>
                  <div className="stat-num"><CountUp value={n} suffix={suf} /></div>
                  <div className="stat-label">{label}</div>
                </div>
              </FadeUp>
            )}
          </div>
          <div className="platform-logos" style={{ marginTop: 32 }}>
            <div className="platform-tile full"><img src="assets/talabat.webp" alt="Talabat" /></div>
            <div className="platform-tile full"><img src="assets/noon-minutes.jpg" alt="Noon Minutes" /></div>
            <div className="platform-tile"><img src="assets/amazon.jpg" alt="Amazon.ae" /></div>
            <div className="platform-tile full"><img src="assets/careem.png" alt="Careem" /></div>
          </div>
        </div>
      </section>

      {/* Brand carousel */}
      <section className="section-sm bg-white">
        <div className="container">
          <h2 style={{ textAlign: 'center', fontSize: 28, marginBottom: 8 }}>Brands we manage across UAE Q-commerce</h2>
          <p style={{ textAlign: 'center', color: 'var(--muted-text)', marginBottom: 32, fontSize: 14, fontFamily: 'var(--mono)' }}>30 brands · 210+ SKUs</p>
        </div>
        {(() => {
          const all = [
          { name: 'Soccer Supplement', src: 'assets/brands/soccer-supplement.png' },
          { name: '3Bears', src: 'assets/brands/3bears.png' },
          { name: 'beforeyouspeak', src: 'assets/brands/beforeyouspeak.jpg' },
          { name: 'Mavella Superfoods', src: 'assets/brands/mavella.jpg' },
          { name: 'Candy Kittens', src: 'assets/brands/candy-kittens.png' },
          { name: "Dr. Will's", src: 'assets/brands/dr-wills.png' },
          { name: "Bobo's", src: 'assets/brands/bobos.png' },
          { name: "Olly's", src: 'assets/brands/ollys.png' },
          { name: 'The Happy Snack Company', src: 'assets/brands/happy-snack-company.png' },
          { name: 'Sweet Freedom', src: 'assets/brands/sweet-freedom.png' },
          { name: 'Three Robins', src: 'assets/brands/three-robins.png' },
          { name: 'Wibble', src: 'assets/brands/wibble.png' },
          { name: 'Small & Wild', src: 'assets/brands/small-and-wild.png' },
          { name: 'Slurpz', src: 'assets/brands/slurpz.png' },
          { name: 'Pistachio Papi', src: 'assets/brands/pistachio-papi.png' },
          { name: 'Kooky', src: 'assets/brands/kooky.png' },
          { name: 'Jim Jams', src: 'assets/brands/jim-jams.png' },
          { name: "Freddie's Farm", src: 'assets/brands/freddies-farm.webp' },
          { name: 'Fearne & Rosie', src: 'assets/brands/fearne-and-rosie.png' },
          { name: 'Famous Soda Co', src: 'assets/brands/famous-soda.png' },
          { name: 'Creative Nature', src: 'assets/brands/creative-nature.png' },
          { name: 'Boundless', src: 'assets/brands/boundless.png' },
          { name: 'Al Mudhish', src: 'assets/brands/al-mudhish.png' }];

          const half = Math.ceil(all.length / 2);
          const rowA = all.slice(0, half);
          const rowB = all.slice(half);
          const Row = ({ items, reverse, keyP }) =>
          <div className="marquee">
              <div className={`marquee-track${reverse ? ' reverse' : ''}`}>
                {[...Array(2)].map((_, dup) =>
              <React.Fragment key={dup}>
                    {items.map((b) =>
                <div key={b.name + keyP + dup} className="brand-logo" title={b.name}>
                        <img src={b.src} alt={b.name} loading="lazy" />
                      </div>
                )}
                  </React.Fragment>
              )}
              </div>
            </div>;

          return (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <Row items={rowA} reverse={false} keyP="a" />
              <Row items={rowB} reverse={true} keyP="b" />
            </div>);

        })()}
      </section>

      {/* Problem statement */}
      <section className="section bg-white">
        <div className="container">
          <div className="section-head">
            <FadeUp><span className="eyebrow">THE CHALLENGE</span></FadeUp>
            <FadeUp delay={100}><h2>Q-commerce is a different game<br />Most brands are playing it wrong</h2></FadeUp>
          </div>
          <div className="challenge-grid">
            <div style={{ display: 'grid', gap: 24 }}>
              {[
              "Talabat Mart, Noon Minutes, Careem Quik — these platforms have different rules, different SLAs, and different algorithms than traditional e-commerce. You can't apply an offline retail playbook and expect results.",
              "Most distributors and brand owners are spending on platform ads without tracking ROI, losing sales to stockouts they can't forecast, and getting buried on digital shelves they don't know how to optimize.",
              "We've been on the inside. We know how the platforms actually work — because we've operated on them across 30 brands."].
              map((p, i) =>
              <FadeUp key={i} delay={i * 100}>
                  <p style={{ fontSize: 18, lineHeight: 1.7, color: 'var(--body-text)' }}>{p}</p>
                </FadeUp>
              )}
            </div>
            <FadeUp delay={200}>
              <div className="challenge-visual">
                <div className="cv-phone">
                  <div className="cv-phone-notch"></div>
                  <div className="cv-phone-screen">
                    <video
                      src="assets/challenge-video.mp4"
                      autoPlay
                      loop
                      muted
                      playsInline
                      style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
                    />
                  </div>
                </div>
                <div className="cv-callout cv-callout-1">
                  <span className="cv-callout-dot"></span>
                  <span>Soccer Supplements · Exclusive on Noon Minutes 2026</span>
                </div>
                <div className="cv-callout cv-callout-2">
                  <span className="cv-callout-dot cv-dot-warn"></span>
                  <span>Brand Store</span>
                </div>
                <div className="cv-callout cv-callout-3">
                  <span className="cv-callout-dot cv-dot-bad"></span>
                  <span>Strategic Collaboration</span>
                </div>
              </div>
            </FadeUp>
          </div>
        </div>
      </section>

      {/* What we do */}
      <section className="section bg-light">
        <div className="container">
          <div className="section-head">
            <FadeUp><span className="eyebrow">WHAT WE DO</span></FadeUp>
            <FadeUp delay={100}><h2>End-to-end q-commerce management for FMCG brands.</h2></FadeUp>
          </div>
          <div className="grid-3">
            {[
            [Icon.rocket, 'Platform Onboarding', 'Get your brands live on Talabat, Noon, Amazon, and Careem. From vendor registration to first order — typically within 30 days.'],
            [Icon.file, 'Listing & Content Management', 'Product detail pages that actually convert. Titles, images, descriptions, and A+ content optimized for each platform\'s search algorithm.'],
            [Icon.chart, 'Advertising & Spend Optimization', 'Platform ad campaigns with tracked ROI. We manage sponsored listings, flash deals, and promotional spend across every channel.'],
            [Icon.package, 'Stock & Demand Forecasting', 'MSL planning, dark-store allocation, and demand forecasting that cuts out-of-stock rates. We reduced OOS from 14% to 3% across 8 nodes.'],
            [Icon.pie, 'Reporting & Analytics', 'Monthly brand performance reports your principals actually want to read. Sales velocity, share of shelf, ad ROAS, and SLA compliance.'],
            [Icon.briefcase, 'Full Portfolio Management', 'The A-to-Z offer. We become your outsourced e-commerce department — managing your entire brand portfolio across all platforms, daily.']].
            map(([IconC, title, desc], i) =>
            <FadeUp key={i} delay={i * 80}>
                <div className="card service-card">
                  <div className="service-icon"><IconC /></div>
                  <h3>{title}</h3>
                  <p>{desc}</p>
                  <a href="#/services" className="learn-more">Learn more →</a>
                </div>
              </FadeUp>
            )}
          </div>
          <div style={{ textAlign: 'center', marginTop: 56 }}>
            <a href="#/services" className="btn btn-primary">See how it works →</a>
          </div>
        </div>
      </section>

      {/* Results */}
      <section className="section bg-navy">
        <div className="container">
          <div className="section-head">
            <FadeUp><span className="eyebrow">REAL RESULTS</span></FadeUp>
            <FadeUp delay={100}><h2 style={{ color: 'white' }}>Numbers we've moved for brands like yours.</h2></FadeUp>
          </div>
          <div className="grid-3">
            {[
            ['10×', 'befit · 12 months on UAE q-commerce', 'Launched January 2025 across Talabat, Noon, Amazon, and Careem. 10× revenue growth in 12 months through sequenced launch, ad optimization, retention promotions, and influencer demand'],
            ['10×', 'Out-of-stock rate', 'Reduced in 60 days across 8 dark-store nodes for a health food brand on Talabat Mart'],
            ['30 days', 'From zero to live', '24 SKUs onboarded on Noon Minutes for an international sports nutrition brand entering the UAE']].
            map(([num, label, detail], i) =>
            <FadeUp key={i} delay={i * 100}>
                <div className="card-dark result-card">
                  <div className="result-num">{num}</div>
                  <div className="result-label">{label}</div>
                  <div className="result-detail">{detail}</div>
                </div>
              </FadeUp>
            )}
          </div>
          <div style={{ textAlign: 'center', marginTop: 56 }}>
            <a href="#/cases" className="btn btn-ghost">Read the full case studies →</a>
          </div>
        </div>
      </section>

      {/* How it works */}
      <section className="section bg-white">
        <div className="container">
          <div className="section-head">
            <FadeUp><span className="eyebrow">HOW IT WORKS</span></FadeUp>
            <FadeUp delay={100}><h2>From first conversation to live on platforms in 30 days.</h2></FadeUp>
          </div>
          <div className="steps">
            {[
            ['Discovery', 'You complete our Q-Commerce Readiness Assessment. We learn about your portfolio, platforms, and goals.'],
            ['Audit & Strategy', 'We run a 30-minute Q-Commerce Audit. You get a clear picture of where you stand and what needs to happen.'],
            ['Onboarding', 'We register your brands, create listings, set up stock feeds, and configure platform ad accounts. Typically 2-4 weeks.'],
            ['Daily Operations', 'We manage your brands daily — stock monitoring, content updates, ad optimization, SLA tracking, and monthly reporting.']].
            map(([title, desc], i) =>
            <FadeUp key={i} delay={i * 100}>
                <div className="step">
                  <div className="step-num">{i + 1}</div>
                  <h4>{title}</h4>
                  <p>{desc}</p>
                </div>
              </FadeUp>
            )}
          </div>
        </div>
      </section>

      {/* Who we serve */}
      <section className="section bg-light">
        <div className="container">
          <div className="section-head">
            <FadeUp><span className="eyebrow">WHO WE WORK WITH</span></FadeUp>
            <FadeUp delay={100}><h2>Built for FMCG distributors and international brand owners.</h2></FadeUp>
          </div>
          <div className="grid-2">
            <FadeUp>
              <div className="card" style={{ padding: 40, height: '100%' }}>
                <span className="pill pill-coral" style={{ marginBottom: 20 }}>FMCG Distributors</span>
                <p style={{ fontSize: 16, marginBottom: 24, color: 'var(--body-text)' }}>You hold distribution rights for 10–50+ brands. You dominate modern trade. But q-commerce is new territory — and you don't have an e-commerce team.</p>
                <ul className="checks">
                  <li>No in-house q-commerce expertise</li>
                  <li>Stockouts you can't predict</li>
                  <li>Brand principals asking for e-commerce performance data</li>
                  <li>Wasted ad spend with no visibility on ROI</li>
                </ul>
              </div>
            </FadeUp>
            <FadeUp delay={120}>
              <div className="card" style={{ padding: 40, height: '100%' }}>
                <span className="pill pill-coral" style={{ marginBottom: 20 }}>International Brands</span>
                <p style={{ fontSize: 16, marginBottom: 24, color: 'var(--body-text)' }}>You have a great product and want to enter the UAE market. You need a partner who can get you live on Talabat, Noon, and Amazon — fast.</p>
                <ul className="checks">
                  <li>No UAE platform knowledge</li>
                  <li>Need speed to market (not 6-month timelines)</li>
                  <li>Looking for end-to-end, not just listing creation</li>
                  <li>Want a partner, not just a vendor</li>
                </ul>
              </div>
            </FadeUp>
          </div>
          <div style={{ textAlign: 'center', marginTop: 56 }}>
            <p style={{ color: 'var(--muted-text)', marginBottom: 20 }}>Not sure if we're the right fit? Take the 2-minute readiness assessment.</p>
            <a href="#/contact" className="btn btn-primary">Get Your Readiness Score →</a>
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <section className="section bg-navy">
        <div className="container" style={{ textAlign: 'center' }}>
          <FadeUp>
            <h2 style={{ color: 'white', fontSize: 'clamp(32px, 4.5vw, 56px)', marginBottom: 20 }}>Ready to launch on UAE q-commerce?</h2>
            <p style={{ color: 'rgba(255,255,255,0.7)', fontSize: 19, maxWidth: 640, margin: '0 auto 40px' }}>
              Take our 2-minute readiness assessment. Find out exactly where your brand stands — and what it takes to grow.
            </p>
            <div style={{ display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap' }}>
              <a href="#/contact" className="btn btn-primary">Get Your Readiness Score →</a>
              <a href="mailto:sales@mantaga.com" className="btn btn-ghost">Or email us at sales@mantaga.com</a>
            </div>
            <p style={{ color: 'rgba(255,255,255,0.4)', fontSize: 13, marginTop: 24, fontFamily: 'var(--mono)' }}>Typically responds within 24 hours.</p>
          </FadeUp>
        </div>
      </section>
    </div>);

}

window.HomePage = HomePage;