// HomePage.jsx — Full homepage with all sections
const { useState, useEffect, useRef } = React;

function TrustBar() {
  const clients = ['Google', 'HP', 'Lenovo', 'Mastercard', 'Cisco', 'MK Dons', 'EFL'];
  return (
    <div className="trust-bar" style={{ background: '#EDE8D8', borderBottom: '1px solid #C94A1A', padding: '18px 80px', display: 'flex', alignItems: 'center', gap: '12px', flexWrap: 'wrap' }}>
      <span style={{ fontFamily: "'Syne',sans-serif", fontWeight: 600, fontSize: '10px', letterSpacing: '0.2em', textTransform: 'uppercase', color: '#7A6F65', whiteSpace: 'nowrap', marginRight: '12px' }}>Trusted by</span>
      {clients.map((c, i) => (
        <span key={c} style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
          <span style={{ fontFamily: "'Noto Serif JP',serif", fontWeight: 700, fontSize: '14px', color: '#1A1410', letterSpacing: '0.03em' }}>{c}</span>
          {i < clients.length - 1 && <span style={{ color: '#C94A1A', fontSize: '8px' }}>◆</span>}
        </span>
      ))}
    </div>
  );
}

function HomeHero({ onNavigate }) {
  const sectionRef = useRef(null);
  const videoRef = useRef(null);
  const [activeCue, setActiveCue] = useState(0);
  const [ready, setReady] = useState(false);

  const cues = [
    { start: 0, end: 6, mark: '道', label: 'The engagement protocol', title: 'Lower your cost per engagement.', body: 'Drive actions that increase participation, loyalty and sales, while doing measurable good.' },
    { start: 6, end: 14, mark: '学', label: 'Learn', title: 'Learn something. Earn progress.', body: 'Knowledge becomes verified value.' },
    { start: 14, end: 22, mark: '買', label: 'Shop', title: 'Turn everyday spending into value and good.', body: 'Each purchase can carry a purpose beyond the transaction.' },
    { start: 22, end: 35, mark: '動', label: 'Move', title: 'Move more. Earn for verified activity.', body: 'Every completed action adds energy to the same system.' },
    { start: 35, end: 42, mark: '遊', label: 'Play', title: 'Play together. Take on missions that matter.', body: 'Shared challenges turn participation into collective progress.' },
    { start: 42, end: 55, mark: '探', label: 'Explore', title: 'Discover experiences, people and causes.', body: 'Separate discoveries connect into one path forward.' },
    { start: 55, end: 59, mark: '', label: '', title: '', body: '' },
    { start: 59, end: 68, mark: '善', label: 'The engine', title: 'Every action feeds one transparent engagement engine.', body: 'Brand participation becomes measurable action and measurable good.' },
    { start: 68, end: 71.5715, mark: '善', label: 'Zenko Protocol', title: 'Engage for good.', body: 'Learn. Shop. Move. Play. Explore. One connected world built to increase participation, loyalty and sales.' },
  ];

  useEffect(() => {
    const section = sectionRef.current;
    const video = videoRef.current;
    if (!section || !video) return;

    const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
    const isTouchDevice = window.matchMedia('(pointer: coarse)').matches || 'ontouchstart' in window;
    let targetTime = 0;
    let unlocked = !isTouchDevice;
    let objectUrl = '';
    let disposed = false;

    const unlockVideo = async () => {
      if (unlocked || reduceMotion.matches) return;
      try {
        video.muted = true;
        await video.play();
        video.pause();
        unlocked = true;
        updateTarget();
      } catch (error) {
        // A later touch/scroll gesture will retry the unlock on restrictive browsers.
      }
    };

    const updateTarget = () => {
      if (reduceMotion.matches) return;
      const navHeight = 64;
      const start = section.offsetTop - navHeight;
      const viewport = window.innerHeight - navHeight;
      const distance = Math.max(1, section.offsetHeight - viewport);
      const progress = Math.min(1, Math.max(0, (window.scrollY - start) / distance));
      const duration = Number.isFinite(video.duration) ? video.duration : 71.5715;
      targetTime = progress * duration;

      // Seeking a muted, inline Blob-backed video is allowed once metadata is
      // available on current Mobile Safari. Do not gate seeking on play()
      // succeeding: some iPhones reject that unlock promise even though direct
      // currentTime updates work, which previously stranded the film in scene 1.
      if (video.readyState >= 1 && Math.abs(video.currentTime - targetTime) > 0.04) {
        const nextTime = Math.min(Math.max(targetTime, 0), Math.max(0, duration - 0.01));
        try {
          video.currentTime = nextTime;
        } catch (error) {
          if (unlocked && typeof video.fastSeek === 'function') video.fastSeek(nextTime);
        }
      }

      const cueIndex = cues.findIndex(cue => targetTime >= cue.start && targetTime < cue.end);
      setActiveCue(cueIndex >= 0 ? cueIndex : cues.length - 1);
    };

    const onLoaded = () => {
      setReady(true);
      updateTarget();
    };

    const loadSeekableVideo = async () => {
      if (reduceMotion.matches) return;
      const source = window.matchMedia('(max-width: 720px)').matches
        ? 'assets/zenko-scroll-mobile.mp4'
        : 'assets/zenko-scroll-desktop.mp4';
      try {
        const response = await fetch(source);
        if (!response.ok) throw new Error(`Video request failed: ${response.status}`);
        const blob = await response.blob();
        if (disposed) return;
        objectUrl = URL.createObjectURL(blob);
        video.src = objectUrl;
        video.load();
      } catch (error) {
        console.error('Unable to load the scroll film', error);
      }
    };

    updateTarget();
    window.addEventListener('touchstart', unlockVideo, { passive: true });
    window.addEventListener('touchmove', unlockVideo, { passive: true });
    window.addEventListener('scroll', updateTarget, { passive: true });
    window.addEventListener('resize', updateTarget, { passive: true });
    video.addEventListener('loadedmetadata', onLoaded);
    loadSeekableVideo();

    return () => {
      disposed = true;
      window.removeEventListener('scroll', updateTarget);
      window.removeEventListener('resize', updateTarget);
      window.removeEventListener('touchstart', unlockVideo);
      window.removeEventListener('touchmove', unlockVideo);
      video.removeEventListener('loadedmetadata', onLoaded);
      if (objectUrl) URL.revokeObjectURL(objectUrl);
    };
  }, []);

  return (
    <section ref={sectionRef} className="scroll-film" aria-label="How Zenko turns brand engagement into measurable action and good">
      <div className="scroll-film__stage">
        <picture className="scroll-film__poster" aria-hidden="true">
          <img src="assets/zenko-scroll-poster.jpg" alt="" />
        </picture>
        <video
          ref={videoRef}
          className={`scroll-film__video${ready ? ' is-ready' : ''}`}
          muted
          playsInline
          preload="auto"
          poster="assets/zenko-scroll-poster.jpg"
          aria-hidden="true"
        />
        <div className="scroll-film__shade" aria-hidden="true" />

        <div className="scroll-film__copy" aria-live="polite">
          {cues.map((cue, index) => (
            <div key={`${cue.label}-${index}`} className={`scroll-film__cue${index === activeCue ? ' is-active' : ''}${!cue.title ? ' is-clear' : ''}`} aria-hidden={index !== activeCue}>
              {cue.mark && <span className="scroll-film__mark" aria-hidden="true">{cue.mark}</span>}
              {cue.label && <span className="scroll-film__label">{cue.label}</span>}
              {cue.title && <h1>{cue.title}</h1>}
              {cue.body && <p>{cue.body}</p>}
              {index === cues.length - 1 && (
                <button className="scroll-film__cta" onClick={() => onNavigate('How It Works')}>See how Zenko works</button>
              )}
            </div>
          ))}
        </div>

        <div className="scroll-film__progress" aria-hidden="true">
          <span>{String(Math.min(activeCue + 1, cues.length)).padStart(2, '0')}</span>
          <i><b style={{ transform: `scaleX(${(activeCue + 1) / cues.length})` }} /></i>
          <span>{String(cues.length).padStart(2, '0')}</span>
        </div>
        <div className="scroll-film__hint" aria-hidden="true"><span /> Scroll to explore</div>
      </div>
    </section>
  );
}

function ProblemSection() {
  return (
    <section style={{ background: '#F7F3E9', padding: '96px 80px', position: 'relative', overflow: 'hidden' }}>
      <Kanji char="問" style={{ right: '-20px', top: '0', color: '#C94A1A' }} />
      <div style={{ maxWidth: '1200px', margin: '0 auto', display: 'grid', gridTemplateColumns: '55% 45%', gap: '80px', alignItems: 'start' }}>
        <div>
          <Reveal>
            <PreHeadline>The Problem with Incentives</PreHeadline>
            <SectionHeading line1="Discount codes are lazy." line2="Gift cards are forgotten." />
            <p style={{ fontFamily: "'Syne',sans-serif", fontWeight: 400, fontSize: '16px', lineHeight: 1.85, color: '#7A6F65', marginTop: '24px', marginBottom: '32px' }}>
              The average webinar no-show rate is 65%. Traditional incentives — vouchers, prize draws, discounts — have conditioned audiences to engage once and disappear. You're paying for attention that doesn't convert.
            </p>
            <p style={{ fontFamily: "'Noto Serif JP',serif", fontWeight: 700, fontSize: '22px', color: '#1A1410', marginBottom: '32px', lineHeight: 1.4 }}>
              There's a better mechanic.
            </p>
            <p style={{ fontFamily: "'Syne',sans-serif", fontWeight: 400, fontSize: '16px', lineHeight: 1.85, color: '#7A6F65' }}>
              When your audience earns $ZENKO tokens for engaging with your brand, something different happens. They take an action that creates real, provable good in the world. And that emotional connection? It stays.
            </p>
          </Reveal>
        </div>
        <div>
          <Reveal delay={0.2}>
            <PullQuote>
              "HP cut their cost per qualified lead by 35% and funded 10,000 school meals in the process. That's not a coincidence. That's Zenko."
            </PullQuote>
            <div style={{ marginTop: '48px', display: 'flex', flexDirection: 'column', gap: '1px', background: '#EDE8D8' }}>
              {[
                { label: 'NOT THIS', text: 'Gift cards & vouchers', cross: true },
                { label: 'NOT THIS', text: 'Prize draws & gamification', cross: true },
                { label: 'THIS', text: 'Purpose-driven $ZENKO rewards', cross: false },
              ].map((item, i) => (
                <div key={i} style={{ background: item.cross ? '#F7F3E9' : '#1A1410', padding: '18px 24px', display: 'flex', alignItems: 'center', gap: '14px' }}>
                  <span style={{ fontFamily: "'Syne',sans-serif", fontWeight: 700, fontSize: '10px', letterSpacing: '0.15em', color: item.cross ? '#7A6F65' : '#C94A1A', minWidth: '70px' }}>{item.label}</span>
                  <span style={{ fontFamily: "'Syne',sans-serif", fontWeight: 400, fontSize: '15px', color: item.cross ? '#7A6F65' : '#F0DFA0', textDecoration: item.cross ? 'line-through' : 'none' }}>{item.text}</span>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function HowItWorksSection({ onNavigate }) {
  const steps = [
    { n: '01', title: 'Your brand', body: 'Run a campaign through Zenko. Set your engagement action — attend a webinar, download a guide, engage with content. $ZENKO tokens are automatically distributed from your campaign budget.' },
    { n: '02', title: 'Your audience', body: 'They earn tokens for doing something they were already going to do. Those tokens fund a cause they choose — a child fed, a tree planted, carbon offset. The action had meaning.' },
    { n: '03', title: 'The world', body: 'Every interaction creates on-chain verified impact. Not a donation promise. Not a pledge. Actual, provable good — tracked, transparent, and permanent. Your ESG team gets proof they can use.' },
  ];

  return (
    <section style={{ background: '#1B6370', padding: '96px 80px', position: 'relative', overflow: 'hidden' }} className="grain">
      <Kanji char="動" style={{ right: '0', top: '-40px', color: '#F0DFA0', opacity: 0.05 }} />
      <div style={{ maxWidth: '1200px', margin: '0 auto', position: 'relative', zIndex: 2 }}>
        <Reveal>
          <PreHeadline light>One integration. Three wins. Every time.</PreHeadline>
          <SectionHeading line1="How the incentive works" light />
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: '2px', marginTop: '48px', background: 'rgba(240,223,160,0.15)' }}>
          {steps.map((s, i) => (
            <Reveal key={s.n} delay={i * 0.15}>
              <div style={{ background: '#1B6370', padding: '40px 36px', height: '100%', borderLeft: i === 0 ? 'none' : '2px solid rgba(240,223,160,0.1)' }}>
                <div style={{ fontFamily: "'Noto Serif JP',serif", fontWeight: 700, fontSize: '48px', color: '#C94A1A', lineHeight: 1, marginBottom: '20px' }}>{s.n}</div>
                <div style={{ fontFamily: "'Noto Serif JP',serif", fontWeight: 700, fontSize: '22px', color: '#F0DFA0', marginBottom: '16px' }}>{s.title}</div>
                <p style={{ fontFamily: "'Syne',sans-serif", fontWeight: 400, fontSize: '15px', lineHeight: 1.8, color: 'rgba(240,223,160,0.65)' }}>{s.body}</p>
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal delay={0.3}>
          <div style={{ marginTop: '48px', textAlign: 'center' }}>
            <BtnOutline light onClick={() => onNavigate('How It Works')}>See a live example →</BtnOutline>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function ZenkoAppsSection({ onNavigate }) {
  const apps = [
    { name: 'Learn', mark: '学', action: 'Quizzes, education, onboarding and knowledge campaigns', outcome: 'More completions, stronger recall and qualified participation', good: 'Fund meals, education or local programmes', color: '#C94A1A' },
    { name: 'Move', mark: '動', action: 'Steps, activity, wellbeing and sponsored challenges', outcome: 'Repeat engagement, healthier participation and habit formation', good: 'Fund meals, trees or carbon reduction', color: '#1B6370' },
    { name: 'Shop', mark: '買', action: 'Purchases, merchandise and retail-linked impact', outcome: 'Higher conversion, basket value and repeat purchase', good: 'Fund community and environmental outcomes', color: '#4A5C2A' },
    { name: 'Play', mark: '遊', action: 'Games, predictions, missions and fan engagement', outcome: 'Longer attention, richer fan data and sponsor value', good: 'Fund club causes and verified climate action', color: '#0D1B3E' },
    { name: 'Explore', mark: '旅', action: 'Discovery, visits, trails, events and place-based campaigns', outcome: 'More footfall, event participation and local discovery', good: 'Fund place-based community projects', color: '#8B3F24' },
  ];

  return (
    <section className="zenko-apps-home" style={{ background: '#EDE8D8', padding: '104px 80px' }}>
      <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
        <Reveal>
          <PreHeadline>Ways to activate Zenko</PreHeadline>
          <div className="zenko-apps-home__intro">
            <SectionHeading line1="Choose the behaviour" line2="you want to inspire" />
            <div>
              <p>Zenko's ready-made apps turn learning, movement, shopping, play and exploration into measurable participation. Brands sponsor the activity. People take part. Real-world good is created.</p>
              <BtnPrimary onClick={() => onNavigate('Zenko Apps')}>Explore our apps →</BtnPrimary>
            </div>
          </div>
        </Reveal>
        <div className="zenko-apps-home__list">
          {apps.map((app, i) => (
            <Reveal key={app.name} delay={i * 0.07}>
              <article className="zenko-apps-home__row" style={{ '--app-color': app.color }}>
                <div className="zenko-apps-home__name"><span>{app.mark}</span><h3>{app.name}</h3></div>
                <div><small>Action</small><p>{app.action}</p></div>
                <div><small>Brand outcome</small><p>{app.outcome}</p></div>
                <div><small>Good created</small><p>{app.good}</p></div>
              </article>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function UseCasesSection({ onNavigate }) {
  const cases = [
    { title: 'Lead Generation', body: 'Replace your lead magnet incentive with $ZENKO. Prospects engage with your content knowing their attention creates something real. Leads arrive warmer and more qualified.' },
    { title: 'Webinars & Events', body: 'Stop fighting no-show rates with reminders. Brands running Zenko-powered webinars see 40–60% improvement in show rate and materially better post-event engagement.' },
    { title: 'Content Downloads', body: 'Gated content behind a purpose-driven reward. Your whitepaper gets read. Your guide gets shared. Your audience gets tokens and the knowledge that engaging did something good.' },
    { title: 'Fan Engagement', body: 'Sports clubs and community brands use Zenko to reward fans for showing up — digitally and physically. Shirt sales fund local causes. Loyalty compounds.' },
  ];

  return (
    <section style={{ background: '#F7F3E9', padding: '96px 80px' }}>
      <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
        <Reveal>
          <PreHeadline>Use Cases</PreHeadline>
          <SectionHeading line1="What does Zenko" line2="actually power?" />
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: '2px', marginTop: '48px', background: '#1A1410' }}>
          {cases.map((c, i) => {
            const [hover, setHover] = useState(false);
            return (
              <Reveal key={c.title} delay={i * 0.1}>
                <div
                  onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
                  style={{ background: hover ? '#fff' : '#F7F3E9', padding: '36px 28px', borderLeft: hover ? '4px solid #C94A1A' : '4px solid transparent', transition: 'all 0.25s', cursor: 'default', height: '100%' }}>
                  <div style={{ fontFamily: "'Noto Serif JP',serif", fontWeight: 700, fontSize: '20px', color: '#1A1410', marginBottom: '14px' }}>{c.title}</div>
                  <p style={{ fontFamily: "'Syne',sans-serif", fontWeight: 400, fontSize: '14px', lineHeight: 1.8, color: '#7A6F65' }}>{c.body}</p>
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function CausesPreview({ onNavigate }) {
  const causes = [
    { icon: '🍽', label: 'Feed children in food poverty', jp: '食料支援' },
    { icon: '🌱', label: 'Reforestation & rewilding', jp: '植林' },
    { icon: '♻', label: 'Carbon offsetting', jp: '炭素削減' },
    { icon: '🌊', label: 'Biodiversity & ocean health', jp: '海洋保護' },
    { icon: '📚', label: 'Education & schools', jp: '教育' },
  ];

  return (
    <section style={{ background: '#4A5C2A', padding: '96px 80px', position: 'relative', overflow: 'hidden' }} className="grain">
      <Kanji char="善" style={{ left: '-20px', top: '-30px', color: '#F0DFA0', opacity: 0.05 }} />
      <div style={{ maxWidth: '1200px', margin: '0 auto', position: 'relative', zIndex: 2 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '80px', alignItems: 'center' }}>
          <Reveal>
            <PreHeadline light>The Causes</PreHeadline>
            <SectionHeading line1="The incentive that" line2="doesn't get forgotten" light />
            <p style={{ fontFamily: "'Syne',sans-serif", fontWeight: 400, fontSize: '16px', lineHeight: 1.85, color: 'rgba(240,223,160,0.65)', marginTop: '24px', marginBottom: '32px' }}>
              Purpose-driven incentives create durable memory traces that vouchers simply can't. When your audience knows that engaging with your brand fed a child or planted a forest, that association sticks.
            </p>
            <p style={{ fontFamily: "'Syne',sans-serif", fontWeight: 400, fontSize: '16px', lineHeight: 1.85, color: 'rgba(240,223,160,0.65)', marginBottom: '36px' }}>
              No greenwashing. No vague commitments. Every outcome is recorded on-chain.
            </p>
            <BtnPrimary onClick={() => onNavigate('Causes')}>Explore the causes →</BtnPrimary>
          </Reveal>
          <Reveal delay={0.2}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
              {causes.map((c, i) => (
                <div key={i} style={{ background: 'rgba(240,223,160,0.06)', border: '1px solid rgba(240,223,160,0.1)', padding: '16px 20px', display: 'flex', alignItems: 'center', gap: '14px', transition: 'background 0.2s', cursor: 'default' }}
                  onMouseEnter={e => e.currentTarget.style.background = 'rgba(240,223,160,0.12)'}
                  onMouseLeave={e => e.currentTarget.style.background = 'rgba(240,223,160,0.06)'}
                >
                  <span style={{ fontSize: '20px' }}>{c.icon}</span>
                  <span style={{ fontFamily: "'Syne',sans-serif", fontWeight: 500, fontSize: '14px', color: '#F0DFA0', flex: 1 }}>{c.label}</span>
                  <span style={{ fontFamily: "'Noto Sans JP',sans-serif", fontWeight: 300, fontSize: '12px', color: 'rgba(240,223,160,0.4)' }}>{c.jp}</span>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function StatsSection() {
  return (
    <section style={{ background: '#F7F3E9', position: 'relative', overflow: 'hidden' }}>
      <Reveal>
        <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '0 80px' }}>
          <StatsRow stats={[
            { num: '80,000+', label: 'Wallets Activated' },
            { num: '£100k+', label: 'Verified Impact Delivered' },
            { num: '35%', label: 'Avg CPL Reduction' },
            { num: '25+', label: 'Sports Clubs in Pipeline' },
          ]} />
        </div>
      </Reveal>
    </section>
  );
}

function CaseStudySection({ onNavigate }) {
  const [showItvFeature, setShowItvFeature] = useState(false);
  const dialogRef = useRef(null);

  useEffect(() => {
    const dialog = dialogRef.current;
    if (!showItvFeature || !dialog) return;
    dialog.showModal();
    document.body.classList.add('video-modal-open');
    const handleClose = () => setShowItvFeature(false);
    dialog.addEventListener('close', handleClose);
    return () => {
      document.body.classList.remove('video-modal-open');
      dialog.removeEventListener('close', handleClose);
    };
  }, [showItvFeature]);

  const closeItvFeature = () => {
    const dialog = dialogRef.current;
    if (dialog && dialog.open) dialog.close();
    else setShowItvFeature(false);
  };

  return (
    <>
    <section style={{ background: '#0D1B3E', padding: '96px 80px', position: 'relative', overflow: 'hidden' }} className="grain">
      <Kanji char="証" style={{ right: '40px', top: '-10px', color: '#F0DFA0', opacity: 0.04 }} />
      <div style={{ maxWidth: '1200px', margin: '0 auto', position: 'relative', zIndex: 2, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '80px', alignItems: 'center' }}>
        <Reveal>
          <PreHeadline light>Featured Case Study</PreHeadline>
          <div style={{ fontFamily: "'Noto Serif JP',serif", fontWeight: 700, fontSize: 'clamp(28px,3vw,42px)', color: '#F0DFA0', lineHeight: 1.15, marginBottom: '8px' }}>MK Dons × Zenko</div>
          <div style={{ fontFamily: "'Noto Serif JP',serif", fontWeight: 700, fontSize: 'clamp(24px,2.5vw,36px)', color: '#C94A1A', lineHeight: 1.15, marginBottom: '28px' }}>"Buy a shirt. Feed a child."</div>
          <p style={{ fontFamily: "'Syne',sans-serif", fontWeight: 400, fontSize: '16px', lineHeight: 1.85, color: 'rgba(240,223,160,0.65)', marginBottom: '32px' }}>
            MK Dons embedded Zenko into their merchandise journey. The campaign funded 2,000 meals, distributed through three schools in the Milton Keynes City area. Fans engaged more. The club created measurable local impact. ITV covered it.
          </p>
          <BtnPrimary onClick={() => setShowItvFeature(true)}>Watch the ITV feature →</BtnPrimary>
        </Reveal>
        <Reveal delay={0.2}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '2px', background: 'rgba(240,223,160,0.1)' }}>
            {[
              { num: '2,000', label: 'Meals Distributed' },
              { num: '35%', label: 'CPL Reduction' },
              { num: 'ITV', label: 'National Coverage' },
              { num: 'EFL', label: 'Featured' },
            ].map((s, i) => (
              <div key={i} style={{ background: '#0D1B3E', padding: '32px 24px', textAlign: 'center' }}>
                <div style={{ fontFamily: "'Noto Serif JP',serif", fontWeight: 700, fontSize: 'clamp(28px,3vw,44px)', color: '#C94A1A', lineHeight: 1, marginBottom: '8px' }}>{s.num}</div>
                <div style={{ fontFamily: "'Syne',sans-serif", fontWeight: 500, fontSize: '11px', color: 'rgba(240,223,160,0.5)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>{s.label}</div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
    {showItvFeature && (
      <dialog ref={dialogRef} className="video-modal" aria-labelledby="itv-feature-title" onClick={event => { if (event.target === event.currentTarget) closeItvFeature(); }}>
        <div className="video-modal__panel">
          <div className="video-modal__header">
            <div>
              <span>ITV feature</span>
              <h2 id="itv-feature-title">MK Dons × Zenko</h2>
            </div>
            <button type="button" className="video-modal__close" onClick={closeItvFeature} aria-label="Close ITV feature">×</button>
          </div>
          <div className="video-modal__player">
            <wistia-player media-id="e2v6u9e97h" seo="false" aspect="1.7777777777777777" autoplay="true"></wistia-player>
          </div>
        </div>
      </dialog>
    )}
    </>
  );
}

function AudienceLanes({ onNavigate }) {
  const [active, setActive] = useState(0);
  const lanes = [
    { label: 'Enterprise & Mid-Market', jp: 'ブランド', color: '#C94A1A', body: 'Lower CPL, ESG compliance, better qualified leads at scale. Replace traditional incentives with purpose-driven $ZENKO rewards that your audience remembers — and your sustainability team can actually report on.', cta: 'For Brands →', page: 'For Brands' },
    { label: 'Sports Clubs', jp: 'スポーツ', color: '#1B6370', body: 'Meaningful fan engagement, CSR proof, and a new commercial model. Turn shirt sales and match attendance into community impact. A story sponsors want to fund and media want to cover.', cta: 'For Sports →', page: 'For Sports' },
    { label: 'Platforms', jp: 'プラットフォーム', color: '#4A5C2A', body: "Embed Zenko inside your existing product. Reward the actions that matter, add measurable purpose and keep control of the customer experience.", cta: 'For Platforms →', page: 'For Platforms' },
  ];

  return (
    <section style={{ background: '#EDE8D8', padding: '96px 80px' }}>
      <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
        <Reveal>
          <PreHeadline>Audience Lanes</PreHeadline>
          <SectionHeading line1="Built for brands that want" line2="performance and purpose" />
        </Reveal>
        <div className="audience-lanes" style={{ display: 'flex', gap: '0', marginTop: '48px', borderTop: '2px solid #1A1410' }}>
          {/* Tab selector */}
          <div className="audience-lanes__tabs" style={{ display: 'flex', flexDirection: 'column', minWidth: '220px', borderRight: '2px solid #1A1410' }}>
            {lanes.map((l, i) => (
              <div key={i} onClick={() => setActive(i)} style={{
                padding: '24px 20px', cursor: 'pointer', borderBottom: '1px solid #1A1410',
                background: active === i ? l.color : '#EDE8D8',
                borderLeft: active === i ? `4px solid ${l.color}` : '4px solid transparent',
                transition: 'all 0.25s',
              }}>
                <div style={{ fontFamily: "'Noto Serif JP',serif", fontWeight: 700, fontSize: '16px', color: active === i ? '#F0DFA0' : '#1A1410', marginBottom: '4px' }}>{l.label}</div>
                <div style={{ fontFamily: "'Noto Sans JP',sans-serif", fontWeight: 300, fontSize: '12px', color: active === i ? 'rgba(240,223,160,0.6)' : '#7A6F65' }}>{l.jp}</div>
              </div>
            ))}
          </div>
          {/* Content panel */}
          <div className="audience-lanes__panel" style={{ flex: 1, padding: '48px 56px', background: '#F7F3E9', borderTop: `4px solid ${lanes[active].color}` }}>
            <div style={{ fontFamily: "'Noto Sans JP',sans-serif", fontWeight: 300, fontSize: '36px', color: lanes[active].color, opacity: 0.2, marginBottom: '8px' }}>{lanes[active].jp}</div>
            <div style={{ fontFamily: "'Noto Serif JP',serif", fontWeight: 700, fontSize: 'clamp(24px,2.5vw,36px)', color: '#1A1410', marginBottom: '20px' }}>{lanes[active].label}</div>
            <p style={{ fontFamily: "'Syne',sans-serif", fontWeight: 400, fontSize: '16px', lineHeight: 1.85, color: '#7A6F65', marginBottom: '32px', maxWidth: '480px' }}>{lanes[active].body}</p>
            <BtnPrimary onClick={() => onNavigate(lanes[active].page)}>{lanes[active].cta}</BtnPrimary>
          </div>
        </div>
      </div>
    </section>
  );
}

function TokenTeaser({ onNavigate }) {
  return (
    <section style={{ background: '#0D1B3E', padding: '80px', position: 'relative', overflow: 'hidden' }} className="grain">
      <Kanji char="力" style={{ right: '80px', top: '-20px', color: '#F0DFA0', opacity: 0.04 }} />
      <div style={{ maxWidth: '1200px', margin: '0 auto', position: 'relative', zIndex: 2, display: 'grid', gridTemplateColumns: '1fr auto', gap: '80px', alignItems: 'center' }}>
        <Reveal>
          <PreHeadline light>$ZENKO Token</PreHeadline>
          <div style={{ fontFamily: "'Noto Serif JP',serif", fontWeight: 700, fontSize: 'clamp(28px,3vw,44px)', color: '#F0DFA0', lineHeight: 1.2, marginBottom: '8px' }}>Believe in what we're building?</div>
          <div style={{ fontFamily: "'Noto Serif JP',serif", fontWeight: 700, fontSize: 'clamp(22px,2.5vw,34px)', color: '#C94A1A', lineHeight: 1.2, marginBottom: '24px' }}>The token that runs on real demand.</div>
          <p style={{ fontFamily: "'Syne',sans-serif", fontWeight: 400, fontSize: '16px', lineHeight: 1.85, color: 'rgba(240,223,160,0.6)', maxWidth: '560px' }}>
            Every time a brand runs a campaign through Zenko, smart contracts automatically purchase $ZENKO from the open market. That's Fortune 500 marketing budgets creating native buy pressure — not speculation.
          </p>
        </Reveal>
        <Reveal delay={0.2}>
          <div style={{ textAlign: 'center' }}>
            <Rune size={120} color="rgba(201,74,26,0.6)" spin />
            <div style={{ marginTop: '24px' }}>
              <BtnPrimary onClick={() => onNavigate('$ZENKO')}>Learn about $ZENKO →</BtnPrimary>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function BlogPreview({ onNavigate }) {
  const posts = (window.ZENKO_BLOG_POSTS || []).filter(p => p.listed !== false).slice().sort((a, b) => b.date.localeCompare(a.date)).slice(0, 3);

  return (
    <section style={{ background: '#F7F3E9', padding: '96px 80px' }}>
      <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
        <Reveal>
          <div className="section-heading-row" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: '48px' }}>
            <div>
              <PreHeadline>From the Blog</PreHeadline>
              <SectionHeading line1="Thinking about engagement," line2="purpose, and what comes next" />
            </div>
            <BtnOutline onClick={() => onNavigate('Blog')}>See all posts →</BtnOutline>
          </div>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: '2px', background: '#1A1410' }}>
          {posts.map((p, i) => {
            const [hover, setHover] = useState(false);
            return (
              <Reveal key={i} delay={i * 0.12}>
                <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} onClick={() => onNavigate({ type: 'BlogPost', slug: p.slug })}
                  role="link" tabIndex="0" onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') onNavigate({ type: 'BlogPost', slug: p.slug }); }}
                  style={{ background: hover ? '#fff' : '#F7F3E9', padding: '0', cursor: 'pointer', transition: 'background 0.25s', height: '100%', display: 'flex', flexDirection: 'column' }}>
                  {/* Placeholder image */}
                  <div className="blog-card__media" style={{ background: hover ? '#EDE8D8' : '#E8E3D6' }}>
                    {p.hero ? <img src={p.hero} alt={`Feature artwork for ${p.title}`} /> : <div style={{ fontFamily: "'Noto Sans JP',sans-serif", fontWeight: 900, fontSize: '80px', color: '#C94A1A', opacity: 0.12 }}>善</div>}
                    <div style={{ position: 'absolute', bottom: '12px', left: '16px', background: '#C94A1A', color: '#fff', fontFamily: "'Syne',sans-serif", fontWeight: 600, fontSize: '10px', letterSpacing: '0.1em', padding: '4px 10px', textTransform: 'uppercase' }}>{p.category}</div>
                  </div>
                  <div style={{ padding: '24px', flex: 1, display: 'flex', flexDirection: 'column' }}>
                    <div style={{ fontFamily: "'Noto Serif JP',serif", fontWeight: 700, fontSize: '17px', color: '#1A1410', lineHeight: 1.4, marginBottom: '12px' }}>{p.title}</div>
                    <p style={{ fontFamily: "'Syne',sans-serif", fontWeight: 400, fontSize: '13px', lineHeight: 1.75, color: '#7A6F65', flex: 1 }}>{p.excerpt}</p>
                    <div style={{ fontFamily: "'Syne',sans-serif", fontWeight: 500, fontSize: '11px', color: '#C94A1A', marginTop: '16px', letterSpacing: '0.06em' }}>{p.displayDate} →</div>
                  </div>
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function HomePage({ onNavigate }) {
  return (
    <>
      <HomeHero onNavigate={onNavigate} />
      <Band />
      <TrustBar />
      <Band />
      <ProblemSection />
      <Band />
      <HowItWorksSection onNavigate={onNavigate} />
      <Band />
      <ZenkoAppsSection onNavigate={onNavigate} />
      <Band />
      <UseCasesSection onNavigate={onNavigate} />
      <Band />
      <StatsSection />
      <Band />
      <CaseStudySection onNavigate={onNavigate} />
      <Band />
      <CausesPreview onNavigate={onNavigate} />
      <Band />
      <AudienceLanes onNavigate={onNavigate} />
      <Band />
      <TokenTeaser onNavigate={onNavigate} />
      <Band />
      <BlogPreview onNavigate={onNavigate} />
    </>
  );
}

Object.assign(window, { HomePage });