// About + Insights pages
function AboutPage({ navigate }) {
  return (
    <div data-screen-label="About">
      <section className="hero hero-half bg-navy" style={{ position: 'relative' }}>
        <div className="hero-grid"></div>
        <div className="hero-glow hero-glow-1"></div>
        <div className="container hero-content">
          <FadeUp><span className="eyebrow">ABOUT MANTAGA</span></FadeUp>
          <FadeUp delay={120}><h1 style={{ fontSize: 'clamp(36px, 5vw, 64px)' }}>Six years inside the UAE's<br />largest distributors.<br />Now building yours.</h1></FadeUp>
          <FadeUp delay={240}><p className="hero-sub">Mantaga is led by Anush Prabhu — formerly with Al Seer Group and Emirates Snack Foods, the teams that supply Talabat Mart, Noon Minutes, and Careem Quik. We bring that operator-side knowledge to brands who need to compete on UAE q-commerce.</p></FadeUp>
        </div>
      </section>

      <section className="section bg-white">
        <div className="container">
          <div className="founder-grid">
            <FadeUp>
              <div className="founder-photo">
                <img src="assets/anush.png" alt="Anush Prabhu, Founder & Managing Director" />
              </div>
              <div style={{ marginTop: 20, fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--muted-text)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>ANUSH PRABHU · FOUNDER & MANAGING DIRECTOR</div>
            </FadeUp>
            <FadeUp delay={120}>
              <div className="founder-content">
                <h3>The beginning</h3>
                <p>I started my career as an intern at Al Seer, one of the largest distribution companies in the UAE. The FMCG world at that scale is unforgiving — you learn fast or you don't survive. After proving myself, I reached a crossroads: trade marketing analysis or e-commerce. I chose e-commerce because I saw something most people hadn't — the Q-commerce channel was going to change how FMCG brands reach consumers in the UAE.</p>
                <h3>The accelerator</h3>
                <p>That decision changed everything. I went on to manage businesses generating over 250M AED in UAE revenue. I understood how platforms work from the inside — the algorithms, the SLAs, the stock allocation logic, the ad systems. These are things you can't learn from a textbook. Then came Emirates Snacks Foods, where I managed e-commerce across a portfolio of more than ten multinational brands — including Alpro, Hershey's, Heinz, Americana, Colgate, Barilla, Double A, Cheetos, Indomie, and Shan. Operating brands of that caliber gave me the frameworks I still use today.</p>
                <h3>The insight</h3>
                <p>The turning point came when I realized everyone was getting q-commerce wrong. Brand owners, distributors, even some platform teams were looking at it through an offline retail lens. The strategies, the stock planning, the content — all of it was being thought about incorrectly for a channel that operates with 15-minute delivery windows, 1,000-SKU dark stores, and real-time demand signals. That gap was Mantaga's founding thesis.</p>
                <h3>The validation</h3>
                <p>Mantaga's first client was DoFreeze — one of the UAE's largest Bakery manufacturer. Within eight months, the results were significant enough that their CEO asked me to also help build their in-house e-commerce capability — not just for the UAE, but across their international markets.</p>
                <p>Today that relationship continues as a parallel mandate. I serve as DoFreeze's E-Commerce Consultant, building and managing their in-house e-commerce team for global markets — while Mantaga has my full operational attention day-to-day, running brand portfolios across UAE q-commerce platforms with the same level of detail and accountability my distributor clients have come to expect.</p>
                <h3>Mantaga today</h3>
                <p>Today we manage 30 brands and 210+ SKUs across Talabat, Noon, Amazon, and Careem for distributor clients across the UAE. The team has grown, the systems have matured, and we've built proprietary operations infrastructure that lets us manage 30 brands with the precision of a dedicated team for each.</p>
              </div>
            </FadeUp>
          </div>
        </div>
      </section>

      <section className="section bg-light">
        <div className="container">
          <div className="grid-2" style={{ gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
            {[
            ['30 brands', 'Actively managed across UAE q-commerce — 210+ live SKUs across Talabat Mart, Noon Minutes, Amazon, and Careem Quik'],
            ['6 years', 'Operating inside UAE FMCG e-commerce — across distribution, brand management, and platform operations'],
            ['250M+ AED', 'In UAE revenue managed'],
            ['10+ brands', 'Multinational FMCG portfolios managed during employment at the UAE\'s top distributors']].
            map(([k, v], i) =>
            <FadeUp key={i} delay={i * 80}>
                <div className="card" style={{ padding: 28, height: '100%' }}>
                  <div style={{ fontFamily: 'var(--display)', fontSize: 28, fontWeight: 800, color: 'var(--coral)', letterSpacing: '-0.02em', marginBottom: 8 }}>{k}</div>
                  <div style={{ fontSize: 13.5, color: 'var(--muted-text)', lineHeight: 1.5 }}>{v}</div>
                </div>
              </FadeUp>
            )}
          </div>
        </div>
      </section>

      <section className="section bg-white">
        <div className="container">
          <div className="section-head" style={{ textAlign: 'center', margin: '0 auto 64px' }}>
            <FadeUp delay={100}><h2>The team behind the brands.</h2></FadeUp>
          </div>
          <div className="team-grid">
            {[
            ['Anush Prabhu', 'AP', 'Founder & MD', '6 years in FMCG e-commerce. Previously Al Seer and Emirates Snacks Foods.', 'assets/anush-team.png'],
            ['Arnold Braganza', 'AB', 'E-Commerce Coordinator', 'Customer-facing operations. The person your platform contacts talk to daily.', 'assets/arnold.png']].
            map(([name, init, role, desc, photo], i) =>
            <FadeUp key={i} delay={i * 80}>
                <div className="card team-card">
                  <div className="team-photo">
                    {photo ? <img src={photo} alt={name} /> : init}
                  </div>
                  <h4>{name}</h4>
                  <div className="role">{role}</div>
                  <p>{desc}</p>
                </div>
              </FadeUp>
            )}
          </div>
        </div>
      </section>

      <section className="section bg-navy">
        <div className="container">
          <div className="section-head" style={{ textAlign: 'center', margin: '0 auto 64px' }}>
            <FadeUp><span className="eyebrow">HOW WE WORK</span></FadeUp>
            <FadeUp delay={100}><h2 style={{ color: 'white' }}>How we work.</h2></FadeUp>
          </div>
          <div className="grid-3">
            {[
            ['Operators, not advisors.', "We've been inside the machine. We've managed the brands, run the platforms, dealt with the SLAs. We don't theorize about q-commerce — we do it every day."],
            ['Specificity over vagueness.', "We name the platforms, name the metrics, name the frameworks. If we can't give you a specific number, we haven't done the work yet."],
            ['Your team, extended.', "We don't hand you a strategy deck and disappear. We show up every day, manage your brands on the platforms, and report back with real numbers."]].
            map(([t, d], i) =>
            <FadeUp key={i} delay={i * 100}>
                <div className="card-dark">
                  <h3 style={{ color: 'white', fontSize: 22, marginBottom: 16 }}>{t}</h3>
                  <p style={{ color: 'rgba(255,255,255,0.65)', fontSize: 15, lineHeight: 1.6 }}>{d}</p>
                </div>
              </FadeUp>
            )}
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--coral)' }}>
        <div className="container" style={{ textAlign: 'center' }}>
          <FadeUp>
            <h2 style={{ color: 'white', fontSize: 'clamp(32px, 4.5vw, 56px)', marginBottom: 32 }}>Want to work with us?</h2>
            <a href="#/contact" className="btn btn-white">Get Your Readiness Score →</a>
          </FadeUp>
        </div>
      </section>
    </div>);

}

function InsightsPage({ navigate }) {
  const [filter, setFilter] = useState('All');
  const cats = ['All', 'Q-Commerce 101', "Operator's Playbook", 'Case Stories', 'Market Intelligence'];
  const articles = [
  { cat: 'Q-Commerce 101', title: 'The Anatomy of a UAE Dark Store — How Talabat Mart Actually Works', preview: 'Inside the 1,000-SKU warehouses serving 15-minute delivery. SKU velocity tiering, MSL allocation, and why your product placement on the shelf matters more than you think.', date: 'Apr 18, 2026', read: '6 min read' },
  { cat: "Operator's Playbook", title: 'The 4-Quadrant Digital Shelf Audit: The Framework We Use Across 30 Brands', preview: 'Visibility, conversion, availability, and ad efficiency. The exact framework we run on every brand we onboard — with the 12 levers that actually move the needle.', date: 'Apr 11, 2026', read: '8 min read' },
  { cat: 'Case Stories', title: 'How We Cut Out-of-Stock from 14% to 3% in 60 Days', preview: 'Node-level stock tracking, MSL rebuilds based on 90-day velocity, and weekly platform-level coordination. The full operational story.', date: 'Apr 04, 2026', read: '7 min read' },
  { cat: 'Market Intelligence', title: 'Talabat IPO: What It Means for Brand Owners on the Platform', preview: 'A public Talabat will optimize for unit economics — which means tighter SLAs, tighter margins, and a higher bar for ad spend efficiency. What to plan for.', date: 'Mar 28, 2026', read: '5 min read' },
  { cat: 'Q-Commerce 101', title: 'Why Listing Quality Score Matters More Than You Think', preview: 'Each platform ranks differently. We break down what Talabat, Noon, and Amazon actually weight when surfacing your products in search results.', date: 'Mar 21, 2026', read: '6 min read' },
  { cat: "Operator's Playbook", title: 'Ramadan Q-Commerce Playbook: Demand Spikes, MSL Doubles, and Hero SKUs', preview: 'A 6-week playbook for the most critical period of the FMCG calendar. Forecasting, stock allocation, ad calendar, and the operational rhythm.', date: 'Mar 14, 2026', read: '9 min read' }];

  const filtered = filter === 'All' ? articles : articles.filter((a) => a.cat === filter);

  return (
    <div data-screen-label="Insights">
      <section className="hero hero-half bg-navy" style={{ position: 'relative' }}>
        <div className="hero-grid"></div>
        <div className="hero-glow hero-glow-1"></div>
        <div className="container hero-content">
          <FadeUp><span className="eyebrow">INSIGHTS</span></FadeUp>
          <FadeUp delay={120}><h1 style={{ fontSize: 'clamp(36px, 5vw, 64px)' }}>The Mantaga Memo</h1></FadeUp>
          <FadeUp delay={240}><p className="hero-sub">Operator-grade insights on UAE q-commerce. Frameworks, case stories, market intelligence, and the playbook we're building in real time.</p></FadeUp>
        </div>
      </section>

      <section className="bg-white" style={{ paddingTop: 64 }}>
        <div className="container">
          <div className="filter-bar">
            {cats.map((c) =>
            <button key={c} className={`filter-pill ${filter === c ? 'active' : ''}`} onClick={() => setFilter(c)}>{c}</button>
            )}
          </div>
        </div>
      </section>

      <section className="bg-light" style={{ padding: '32px 0 120px' }}>
        <div className="container">
          <div className="grid-3">
            {filtered.map((a, i) =>
            <FadeUp key={a.title} delay={i * 60}>
                <div className="card article-card">
                  <span className="pill pill-coral">{a.cat}</span>
                  <h3>{a.title}</h3>
                  <p className="preview">{a.preview}</p>
                  <div className="article-meta">
                    <span>{a.date}</span>
                    <span>{a.read}</span>
                  </div>
                </div>
              </FadeUp>
            )}
          </div>
        </div>
      </section>

      <section className="section bg-white">
        <div className="container">
          <div className="newsletter">
            <h2>Subscribe to The Mantaga Memo</h2>
            <p>Monthly insights on UAE q-commerce. Frameworks, case stories, and market analysis — straight from an operator.</p>
            <form className="newsletter-form" onSubmit={(e) => {e.preventDefault();alert('Subscribed (demo).');}}>
              <input type="email" placeholder="your@email.com" required />
              <button type="submit" className="btn btn-primary">Subscribe</button>
            </form>
            <div className="newsletter-small">Once a month. No spam. Unsubscribe anytime.</div>
          </div>
        </div>
      </section>
    </div>);

}

window.AboutPage = AboutPage;
window.InsightsPage = InsightsPage;