// ContentPages.jsx — Causes, Token, Blog, About, Contact
const { useState: useSt } = React;

// ── CAUSES ───────────────────────────────────────────────────
function CausesPage({ onNavigate }) {
  const causes = [
    { icon: '🍽', label: 'Feed children in food poverty', jp: '食料支援', color: '#C94A1A', impact: 'Meals delivered to children and families experiencing food poverty', stat: 'UK', statLabel: 'Surplus to Purpose', partner: 'Surplus to Purpose', note: 'US cause partner pending' },
    { icon: '🌱', label: 'Reforestation & rewilding', jp: '植林', color: '#4A5C2A', impact: 'Reforestation projects connected to verified action', stat: 'Partner', statLabel: 'Eden Reforestation', partner: 'Eden Reforestation' },
    { icon: '♻', label: 'Carbon offsetting', jp: '炭素削減', color: '#1B6370', impact: 'Verified carbon credits linked to protected biodiversity', stat: 'Partner', statLabel: 'Rimba Raya', partner: 'Rimba Raya Biodiversity Reserve' },
    { icon: '🌊', label: 'Biodiversity & ocean health', jp: '海洋保護', color: '#0D1B3E', impact: 'Ocean-health action connected to measurable outcomes', stat: 'Partner', statLabel: 'Second Life', partner: 'Second Life' },
    { icon: '📚', label: 'Education & schools', jp: '教育', color: '#7A6F65', impact: 'Education and school support matched to each campaign', stat: 'Partners', statLabel: 'Various', partner: 'Various delivery partners' },
  ];

  return (
    <>
      <section style={{ background: '#4A5C2A', padding: '110px 80px 90px', position: 'relative', overflow: 'hidden', minHeight: '420px' }} className="grain">
        <div style={{ fontFamily: "'Noto Sans JP',sans-serif", fontWeight: 900, fontSize: '340px', opacity: 0.045, position: 'absolute', right: '20px', top: '-40px', color: '#F0DFA0', lineHeight: 1, pointerEvents: 'none', userSelect: 'none' }}>善</div>
        <div style={{ maxWidth: '1200px', margin: '0 auto', position: 'relative', zIndex: 2, maxWidth: '700px' }}>
          <div style={{ opacity: 1 }}>
            <PreHeadline light>The Causes</PreHeadline>
            <div style={{ fontFamily: "'Noto Serif JP',serif", fontWeight: 700, fontSize: 'clamp(36px,4vw,62px)', lineHeight: 1.08, color: '#F0DFA0', marginBottom: '6px' }}>Every campaign creates</div>
            <div style={{ fontFamily: "'Noto Serif JP',serif", fontWeight: 700, fontSize: 'clamp(36px,4vw,62px)', lineHeight: 1.08, color: '#C94A1A', marginBottom: '28px' }}>something real.</div>
            <p style={{ fontFamily: "'Syne',sans-serif", fontWeight: 400, fontSize: '17px', lineHeight: 1.85, color: 'rgba(240,223,160,0.65)', maxWidth: '540px' }}>
              When your audience earns $ZENKO, they choose where it goes. Every cause in our marketplace is vetted, verified, and recorded on-chain. No greenwashing. No vague commitments. Just proof.
            </p>
          </div>
        </div>
      </section>
      <Band />

      {/* Cause cards */}
      <section style={{ background: '#F7F3E9', padding: '96px 80px' }}>
        <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
          <Reveal><PreHeadline>The Cause Marketplace</PreHeadline><SectionHeading line1="Five impact categories." line2="Real outcomes." /></Reveal>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '2px', marginTop: '48px' }}>
            {causes.map((c, i) => {
              const [open, setOpen] = useSt(i === 0);
              return (
                <Reveal key={c.label} delay={i * 0.08}>
                  <div style={{ background: open ? '#fff' : '#F7F3E9', borderLeft: `4px solid ${open ? c.color : 'transparent'}`, transition: 'all 0.3s' }}>
                    <div onClick={() => setOpen(!open)} style={{ padding: '24px 28px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '16px' }}>
                      <span style={{ fontSize: '24px' }}>{c.icon}</span>
                      <div style={{ flex: 1 }}>
                        <div style={{ fontFamily: "'Noto Serif JP',serif", fontWeight: 700, fontSize: '20px', color: '#1A1410' }}>{c.label}</div>
                        <div style={{ fontFamily: "'Noto Sans JP',sans-serif", fontWeight: 300, fontSize: '12px', color: '#7A6F65' }}>{c.jp}</div>
                      </div>
                      {open && (
                        <div style={{ textAlign: 'right' }}>
                          <div style={{ fontFamily: "'Noto Serif JP',serif", fontWeight: 700, fontSize: '28px', color: c.color, lineHeight: 1 }}>{c.stat}</div>
                          <div style={{ fontFamily: "'Syne',sans-serif", fontWeight: 500, fontSize: '11px', color: '#7A6F65', letterSpacing: '0.06em', textTransform: 'uppercase' }}>{c.statLabel}</div>
                        </div>
                      )}
                      <div style={{ color: c.color, fontSize: '22px', fontWeight: 700, transition: 'transform 0.25s', transform: open ? 'rotate(45deg)' : 'none' }}>+</div>
                    </div>
                    {open && (
                      <div style={{ padding: '0 28px 28px 72px', fontFamily: "'Syne',sans-serif", fontWeight: 400, fontSize: '15px', lineHeight: 1.8, color: '#7A6F65' }}>
                        <span style={{ fontWeight: 600, color: c.color }}>{c.impact}.</span>{' '}
                        <span>Partner: {c.partner}.{c.note ? ` ${c.note}.` : ''}</span>
                      </div>
                    )}
                  </div>
                </Reveal>
              );
            })}
          </div>
        </div>
      </section>
      <Band />

      {/* On-chain proof */}
      <section style={{ background: '#1A1410', padding: '96px 80px', position: 'relative', overflow: 'hidden' }} className="grain">
        <Kanji char="証" style={{ right: '40px', top: '0', 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>Why On-chain Proof Matters</PreHeadline>
            <SectionHeading line1="Greenwashing is a legal risk now." line2="Proof is the product." light />
            <p style={{ fontFamily: "'Syne',sans-serif", fontWeight: 400, fontSize: '16px', lineHeight: 1.85, color: 'rgba(240,223,160,0.6)', marginTop: '24px', marginBottom: '16px' }}>
              The EU Green Claims Directive. The FCA's ESG disclosure rules. The regulatory environment around environmental and social claims is tightening rapidly.
            </p>
            <p style={{ fontFamily: "'Syne',sans-serif", fontWeight: 400, fontSize: '16px', lineHeight: 1.85, color: 'rgba(240,223,160,0.6)', marginBottom: '32px' }}>
              Every Zenko campaign generates a permanent, auditable record of exactly what was funded, when, and through which campaign.
            </p>
            <BtnPrimary onClick={() => onNavigate('Contact')}>Talk to us about ESG compliance →</BtnPrimary>
          </Reveal>
          <Reveal delay={0.2}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
              {['Not estimates — retired carbon units traceable to specific projects', 'GPS coordinates recorded on-chain for every tree planted', 'Permanent, auditable campaign records for enterprise ESG reporting', 'No vague commitments. No greenwashing. On-chain proof only.'].map((item, i) => (
                <div key={i} style={{ display: 'flex', gap: '14px', alignItems: 'flex-start', padding: '20px', background: 'rgba(240,223,160,0.04)', border: '1px solid rgba(240,223,160,0.08)' }}>
                  <div style={{ width: '6px', height: '6px', background: '#C94A1A', marginTop: '8px', flexShrink: 0 }}></div>
                  <p style={{ fontFamily: "'Syne',sans-serif", fontWeight: 400, fontSize: '14px', lineHeight: 1.75, color: 'rgba(240,223,160,0.65)' }}>{item}</p>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </section>
    </>
  );
}

// ── $ZENKO TOKEN ─────────────────────────────────────────────
function TokenPage({ onNavigate }) {
  return (
    <>
      <section style={{ background: '#0D1B3E', padding: '110px 80px 90px', position: 'relative', overflow: 'hidden' }} className="grain">
        <Kanji char="力" style={{ right: '40px', top: '-30px', color: '#F0DFA0', opacity: 0.04 }} size={340} />
        <div style={{ maxWidth: '1200px', margin: '0 auto', position: 'relative', zIndex: 2, display: 'grid', gridTemplateColumns: '1fr auto', gap: '80px', alignItems: 'center' }}>
          <div>
            <PreHeadline light>$ZENKO Token</PreHeadline>
            <div style={{ fontFamily: "'Noto Serif JP',serif", fontWeight: 700, fontSize: 'clamp(36px,4vw,62px)', lineHeight: 1.08, color: '#F0DFA0', marginBottom: '6px' }}>The utility layer</div>
            <div style={{ fontFamily: "'Noto Serif JP',serif", fontWeight: 700, fontSize: 'clamp(36px,4vw,62px)', lineHeight: 1.08, color: '#C94A1A', marginBottom: '28px' }}>behind Zenko rewards.</div>
            <p style={{ fontFamily: "'Syne',sans-serif", fontWeight: 400, fontSize: '17px', lineHeight: 1.85, color: 'rgba(240,223,160,0.65)', maxWidth: '540px' }}>
              $ZENKO supports the reward and impact mechanics used across Zenko campaigns. Zenko is rebuilding the system around clearer utility, easier brand use and documented redemption flows.
            </p>
          </div>
          <div style={{ textAlign: 'center' }}>
            <Rune size={160} color="rgba(201,74,26,0.7)" spin />
            <div style={{ fontFamily: "'Noto Sans JP',sans-serif", fontWeight: 300, fontSize: '14px', color: 'rgba(240,223,160,0.35)', marginTop: '16px', letterSpacing: '0.1em' }}>$ZENKO</div>
          </div>
        </div>
      </section>
      <Band />

      {/* How token works */}
      <section style={{ background: '#F7F3E9', padding: '96px 80px' }}>
        <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
          <Reveal><PreHeadline>Utility-first Tokenomics</PreHeadline><SectionHeading line1="How $ZENKO fits" line2="into the system" /></Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: '2px', marginTop: '48px', background: '#1A1410' }}>
            {[
              { title: 'Rewards utility', body: '$ZENKO supports reward and redemption activity across the Zenko ecosystem. Its role is tied to participation in the platform, not price predictions.' },
              { title: 'Brand participation', body: 'Zenko is rebuilding the brand purchase, reward issuance and redemption flows to make campaigns easier to deploy and use.' },
              { title: 'Documented mechanics', body: 'Token and settlement mechanics will be published only when they are locked and current. Do not treat planned mechanics as live.' },
            ].map((item, i) => (
              <Reveal key={item.title} delay={i * 0.12}>
                <div style={{ background: '#F7F3E9', padding: '40px 32px', borderTop: `4px solid ${i === 0 ? '#C94A1A' : i === 1 ? '#1B6370' : '#4A5C2A'}`, height: '100%' }}>
                  <div style={{ fontFamily: "'Noto Serif JP',serif", fontWeight: 700, fontSize: '22px', color: '#1A1410', marginBottom: '14px' }}>{item.title}</div>
                  <p style={{ fontFamily: "'Syne',sans-serif", fontWeight: 400, fontSize: '15px', lineHeight: 1.8, color: '#7A6F65' }}>{item.body}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
      <Band />

      <section style={{ background: '#EDE8D8', padding: '72px 80px' }}>
        <div style={{ maxWidth: '1200px', margin: '0 auto', display: 'grid', gridTemplateColumns: 'minmax(0,1fr) auto', gap: '32px', alignItems: 'center' }}>
          <div>
            <PreHeadline>For marketers</PreHeadline>
            <SectionHeading line1="See how rewards can support" line2="participation and impact" />
          </div>
          <BtnPrimary onClick={() => onNavigate('For Marketers')}>Explore marketer use cases →</BtnPrimary>
        </div>
      </section>
      <Band />

      {/* Where to get */}
      <section style={{ background: '#1A1410', padding: '80px', position: 'relative', overflow: 'hidden' }} className="grain">
        <div style={{ maxWidth: '1200px', margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '80px', alignItems: 'center' }}>
          <Reveal>
            <PreHeadline light>Available Now</PreHeadline>
            <SectionHeading line1="Where to get $ZENKO" light />
            <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', marginTop: '32px' }}>
              {[{ chain: 'Base', label: 'Coming soon', btn: 'Coming Soon', disabled: true }, { chain: 'Solana', label: 'Live token and liquidity', btn: 'View live market →', href: 'https://www.geckoterminal.com/solana/pools/EtoQzQReLuW7LA42DHc9zQKW5U8w6n9j3VfbEawgqzeX' }].map((c, i) => (
                <div className="token-market-card" key={i} style={{ background: 'rgba(240,223,160,0.05)', border: '1px solid rgba(240,223,160,0.1)', padding: '24px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <div>
                    <div style={{ fontFamily: "'Noto Serif JP',serif", fontWeight: 700, fontSize: '20px', color: '#F0DFA0' }}>{c.chain}</div>
                    <div style={{ fontFamily: "'Syne',sans-serif", fontWeight: 400, fontSize: '13px', color: 'rgba(240,223,160,0.45)' }}>{c.label}</div>
                  </div>
                  {c.disabled ? (
                    <span aria-label="Base wallet coming soon" style={{ display: 'inline-flex', alignItems: 'center', minHeight: '35px', padding: '8px 16px', border: '2px solid rgba(240,223,160,0.22)', color: 'rgba(240,223,160,0.62)', fontFamily: "'Syne','Lato',sans-serif", fontWeight: 600, fontSize: '11px', letterSpacing: '0.06em', textTransform: 'uppercase', cursor: 'default' }}>{c.btn}</span>
                  ) : (
                    <BtnOutline light small onClick={() => window.open(c.href, '_blank', 'noopener,noreferrer')}>{c.btn}</BtnOutline>
                  )}
                </div>
              ))}
            </div>
          </Reveal>
          <Reveal delay={0.2}>
            <div style={{ background: 'rgba(240,223,160,0.04)', border: '1px solid rgba(240,223,160,0.08)', padding: '32px' }}>
              <div style={{ fontFamily: "'Syne',sans-serif", fontWeight: 600, fontSize: '11px', letterSpacing: '0.15em', textTransform: 'uppercase', color: 'rgba(240,223,160,0.35)', marginBottom: '20px' }}>Token Metrics</div>
              {[['Total Supply', 'See whitepaper'], ['Circulating Supply', 'See whitepaper'], ['Current Holders', 'Growing'], ['Live Chain', 'Solana'], ['Base', 'Coming soon']].map(([k, v]) => (
                <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '14px 0', borderBottom: '1px solid rgba(240,223,160,0.06)' }}>
                  <span style={{ fontFamily: "'Syne',sans-serif", fontWeight: 400, fontSize: '14px', color: 'rgba(240,223,160,0.5)' }}>{k}</span>
                  <span style={{ fontFamily: "'Syne',sans-serif", fontWeight: 600, fontSize: '14px', color: '#F0DFA0' }}>{v}</span>
                </div>
              ))}
              <div style={{ marginTop: '24px' }}>
                <span aria-label="New white paper coming soon" style={{ display: 'inline-flex', alignItems: 'center', minHeight: '35px', padding: '10px 18px', background: 'rgba(201,74,26,0.55)', color: 'rgba(255,255,255,0.82)', fontFamily: "'Syne','Lato',sans-serif", fontWeight: 600, fontSize: '11px', letterSpacing: '0.06em', textTransform: 'uppercase', cursor: 'default' }}>New White Paper Coming Soon</span>
              </div>
            </div>
          </Reveal>
        </div>
      </section>
      <Band />

      {/* Disclaimer */}
      <section style={{ background: '#EDE8D8', padding: '32px 80px' }}>
        <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
          <p style={{ fontFamily: "'Syne',sans-serif", fontWeight: 400, fontSize: '12px', lineHeight: 1.7, color: '#7A6F65', maxWidth: '700px' }}>
            $ZENKO is a utility token. We do not make price predictions or investment recommendations. The value of $ZENKO may go up or down. Only buy what you can afford to hold. This is not financial advice.
          </p>
        </div>
      </section>
    </>
  );
}

// ── BLOG ─────────────────────────────────────────────────────
function BlogPage({ onNavigate }) {
  const [activeFilter, setActiveFilter] = useSt('All');
  const posts = (window.ZENKO_BLOG_POSTS || []).filter(p => p.listed !== false).slice().sort((a, b) => b.date.localeCompare(a.date));
  const filters = ['All', ...Array.from(new Set(posts.map(p => p.category)))];
  const filtered = activeFilter === 'All' ? posts : posts.filter(p => p.category === activeFilter);
  const catColors = { 'Founder Story': '#C94A1A', 'Company News': '#7A6F65', 'Community': '#4A5C2A', 'Sports Engagement': '#1B6370', 'Web3 & Token': '#0D1B3E', 'Case Studies': '#7A6F65', 'Partnerships': '#C94A1A' };

  return (
    <>
      <section style={{ background: '#1A1410', padding: '96px 80px 80px', position: 'relative', overflow: 'hidden' }} className="grain">
        <Kanji char="学" style={{ right: '40px', top: '-20px', color: '#F0DFA0', opacity: 0.04 }} />
        <div style={{ maxWidth: '1200px', margin: '0 auto', position: 'relative', zIndex: 2 }}>
          <PreHeadline light>The Blog</PreHeadline>
          <div style={{ fontFamily: "'Noto Serif JP',serif", fontWeight: 700, fontSize: 'clamp(32px,3.5vw,52px)', lineHeight: 1.1, color: '#F0DFA0', marginBottom: '8px' }}>Thinking about engagement,</div>
          <div style={{ fontFamily: "'Noto Serif JP',serif", fontWeight: 700, fontSize: 'clamp(32px,3.5vw,52px)', lineHeight: 1.1, color: '#C94A1A', marginBottom: '24px' }}>purpose, and what actually works.</div>
          <p style={{ fontFamily: "'Syne',sans-serif", fontWeight: 400, fontSize: '16px', lineHeight: 1.8, color: 'rgba(240,223,160,0.55)', maxWidth: '560px' }}>What we're learning about marketing psychology, cause-driven engagement, ESG compliance, and the future of how brands connect with audiences.</p>
        </div>
      </section>
      <Band />

      <section style={{ background: '#F7F3E9', padding: '0 80px' }}>
        <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
          {/* Filter tabs */}
          <div style={{ display: 'flex', gap: '0', borderBottom: '2px solid #EDE8D8', paddingTop: '32px', flexWrap: 'wrap' }}>
            {filters.map(f => (
              <button key={f} onClick={() => setActiveFilter(f)} style={{
                background: 'none', border: 'none', padding: '12px 18px', cursor: 'pointer',
                fontFamily: "'Syne',sans-serif", fontWeight: 600, fontSize: '12px',
                letterSpacing: '0.06em', textTransform: 'uppercase',
                color: activeFilter === f ? '#C94A1A' : '#7A6F65',
                borderBottom: activeFilter === f ? '3px solid #C94A1A' : '3px solid transparent',
                marginBottom: '-2px', transition: 'color 0.2s',
              }}>{f}</button>
            ))}
          </div>

          {/* Posts grid */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: '2px', marginTop: '40px', marginBottom: '80px', background: '#1A1410' }}>
            {filtered.map((p, i) => {
              const [hover, setHover] = useSt(false);
              return (
                <a key={p.slug} href={`/blog/${p.slug}/`} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} onClick={event => { event.preventDefault(); onNavigate({ type: 'BlogPost', slug: p.slug }); }}
                  className="blog-card" style={{ background: hover ? '#fff' : '#F7F3E9' }}>
                  <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: '72px', color: catColors[p.category], opacity: 0.12 }}>善</div>}
                    <div style={{ position: 'absolute', bottom: '10px', left: '12px', background: catColors[p.category] || '#C94A1A', color: '#fff', fontFamily: "'Syne',sans-serif", fontWeight: 600, fontSize: '10px', letterSpacing: '0.1em', padding: '3px 8px', 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: '16px', color: '#1A1410', lineHeight: 1.4, marginBottom: '10px' }}>{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: '14px', letterSpacing: '0.06em' }}>{p.displayDate} →</div>
                  </div>
                </a>
              );
            })}
          </div>
        </div>
      </section>
    </>
  );
}

function BlogPostPage({ slug, onNavigate }) {
  const posts = window.ZENKO_BLOG_POSTS || [];
  const post = posts.find(item => item.slug === slug);
  if (!post) {
    return <section style={{ background: '#F7F3E9', padding: '120px 80px', minHeight: '60vh' }}><div style={{ maxWidth: '760px', margin: '0 auto' }}><PreHeadline>Blog</PreHeadline><SectionHeading line1="This article could not" line2="be found." /><BtnPrimary onClick={() => onNavigate('Blog')}>Back to the blog →</BtnPrimary></div></section>;
  }
  return (
    <>
      <article>
        <header style={{ background: '#1A1410', padding: '104px 80px 84px', position: 'relative', overflow: 'hidden' }} className="grain blog-article-header">
          <Kanji char="学" style={{ right: '24px', top: '-60px', color: '#F0DFA0', opacity: 0.035 }} size={360} />
          <div style={{ maxWidth: '900px', margin: '0 auto', position: 'relative', zIndex: 2 }}>
            <button onClick={() => onNavigate('Blog')} className="blog-back">← Back to the blog</button>
            <PreHeadline light>{post.category}</PreHeadline>
            <h1 style={{ fontFamily: "'Noto Serif JP',serif", fontWeight: 700, fontSize: 'clamp(38px,5vw,70px)', lineHeight: 1.08, color: '#F0DFA0', margin: '12px 0 24px' }}>{post.title}</h1>
            <div style={{ fontFamily: "'Syne',sans-serif", fontSize: '13px', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'rgba(240,223,160,0.58)' }}>{post.displayDate} · {post.author}</div>
          </div>
        </header>
        <Band />
        <section style={{ background: '#F7F3E9', padding: '72px 80px 104px' }}>
          {post.hero && (
            <figure className="blog-article-feature">
              <img src={post.hero} alt={`Feature image for ${post.title}`} />
            </figure>
          )}
          {post.bodyPrefix && <div className="blog-article-body blog-article-body--prefix" dangerouslySetInnerHTML={{ __html: post.bodyPrefix }} />}
          <div className="blog-article-body" dangerouslySetInnerHTML={{ __html: post.html }} />
          <div className="blog-archive-note">Originally published on {post.displayDate}. This article is retained as part of Zenko's history; partnerships, product details and token mechanics described may have changed since publication.</div>
          <div style={{ maxWidth: '780px', margin: '36px auto 0' }}><BtnOutline onClick={() => onNavigate('Blog')}>Back to all posts →</BtnOutline></div>
        </section>
      </article>
    </>
  );
}

function LegalPage({ slug, onNavigate }) {
  const page = (window.ZENKO_LEGAL_PAGES || {})[slug];
  if (!page) return null;
  return (
    <>
      <header className="legal-page-header grain">
        <div><PreHeadline light>Legal</PreHeadline><h1>{page.title}</h1></div>
      </header>
      <Band />
      <section className="legal-page-section">
        <div className="legal-page-body" dangerouslySetInnerHTML={{ __html: page.html }} />
        <div className="legal-page-actions"><BtnOutline onClick={() => onNavigate('Contact')}>Contact Zenko →</BtnOutline></div>
      </section>
    </>
  );
}

// ── WHY ZENKO ───────────────────────────────────────────────
function WhyZenkoPage({ onNavigate }) {
  const actions = [
    { kanji: '学', label: 'Learn' },
    { kanji: '買', label: 'Shop' },
    { kanji: '動', label: 'Move' },
    { kanji: '遊', label: 'Play' },
    { kanji: '探', label: 'Explore' },
  ];

  return (
    <>
      <section className="why-zenko-hero grain">
        <Kanji char="善狐" style={{ right: '-30px', top: '-70px', color: '#F0DFA0', opacity: 0.055 }} size={390} />
        <div className="why-zenko-hero__inner">
          <div className="why-zenko-hero__copy">
            <PreHeadline light>The meaning behind the name</PreHeadline>
            <h1>Why <span>Zenko?</span></h1>
            <p>In Japanese folklore, the zenkō is the good fox — a benevolent white messenger associated with prosperity. It moves quietly between worlds, carrying value from one place to another.</p>
          </div>
          <div className="why-zenko-film">
            <wistia-player media-id="ap6qpmmiui" seo="false" aspect="1.7777777777777777" aria-label="Why We Called It Zenko: the story of the good fox"></wistia-player>
          </div>
        </div>
      </section>
      <Band />

      <section className="why-zenko-story">
        <div className="why-zenko-story__inner">
          <Reveal>
            <PreHeadline>The story of the good fox</PreHeadline>
            <h2>Names carry an idea before anyone has read the explanation.</h2>
            <p className="why-zenko-story__lead">When we began building a system that could connect everyday participation with real-world good, we wanted a name that felt warm, active and quietly purposeful. We found it in the story of the Zenko.</p>
          </Reveal>
          <Reveal delay={0.12}>
            <div className="why-zenko-story__columns">
              <div>
                <p>In Japanese folklore, <strong>zenko</strong> (善狐) means “good fox” or “benevolent fox”. Often represented as a white fox and associated with Inari, the Zenko is traditionally understood as a favourable spiritual messenger.</p>
                <p>That image became the heart of our name: a small white fox moving between worlds, carrying value from one place to another and leaving something good along the way.</p>
              </div>
              <div>
                <p>It is not a literal retelling of one single folktale. It is Zenko's own modern story, inspired by the benevolent fox of Japanese tradition.</p>
                <p>The fox is a messenger rather than Inari itself. That distinction matters. Zenko Protocol is also a messenger and connector — linking human activity, organisational sponsorship and the good that activity can fund.</p>
              </div>
            </div>
          </Reveal>
          <Reveal><PullQuote>Zenko carries value between everyday human activity, the organisations that sponsor it and the real-world good that activity creates.</PullQuote></Reveal>
        </div>
      </section>
      <Band />

      <section className="why-zenko-origin">
        <div className="why-zenko-origin__grid">
          <Reveal>
            <PreHeadline>善狐 · Zenkō</PreHeadline>
            <SectionHeading line1="The good fox" line2="is more than a name" />
          </Reveal>
          <Reveal delay={0.15}>
            <div className="why-zenko-origin__body">
              <p>Traditional charity often asks people to stop what they are doing, respond to an appeal and give something up. That work remains important, but it should not be the only way good enters the world.</p>
              <p>People already create value through their attention, movement, learning, purchases, loyalty and contribution. Organisations already invest to encourage those behaviours. Zenko gives some of that value a second destination.</p>
              <p>The individual is not necessarily asked for a separate donation. The sponsoring organisation funds the mechanism. Participation generates value, and part of that value supports a defined outcome.</p>
              <PullQuote>The fox simply shows the path between the two.</PullQuote>
            </div>
          </Reveal>
        </div>
      </section>
      <Band />

      <section className="why-zenko-use">
        <div className="why-zenko-use__inner">
          <Reveal><PreHeadline>Built for participation</PreHeadline><SectionHeading line1="One idea." line2="Many places to use it." /></Reveal>
          <div className="why-zenko-use__grid">
            <Reveal><article className="why-zenko-use__card"><span>01</span><h3>For corporates</h3><p>Add a purpose layer to marketing, loyalty, learning, wellbeing or behaviour-change programmes. People see the connection between their action and the good it supports, while delivery evidence sits alongside campaign performance.</p><strong>Purpose becomes an experience, not a statement.</strong></article></Reveal>
            <Reveal delay={0.1}><article className="why-zenko-use__card"><span>02</span><h3>For small businesses</h3><p>A café can connect a purchase to local food support. A gym can turn movement into tree planting. A retailer can reward participation while directing value towards a visible community outcome.</p><strong>Start at a sensible scale. Grow with the business.</strong></article></Reveal>
            <Reveal delay={0.2}><article className="why-zenko-use__card why-zenko-use__card--sport"><span>03</span><h3>For sport</h3><p>Sport already has identity, loyalty and repeated participation. The MK Dons campaign funded 2,000 meals, distributed through three schools in the Milton Keynes City area.</p><strong>The supporter gets the shirt. The community gets something real.</strong></article></Reveal>
          </div>
        </div>
      </section>
      <Band />

      <section className="why-zenko-path grain">
        <div className="why-zenko-path__inner">
          <Reveal><PreHeadline light>One connected path</PreHeadline><SectionHeading line1="Ordinary action." line2="Real consequence." light /></Reveal>
          <div className="why-zenko-actions">
            {actions.map((action, index) => (
              <Reveal key={action.label} delay={index * 0.08}>
                <div className="why-zenko-action">
                  <span>{action.kanji}</span>
                  <strong>{action.label}</strong>
                </div>
              </Reveal>
            ))}
          </div>
          <Reveal>
            <div className="why-zenko-equation">
              <div><small>People</small><strong>Participate</strong></div>
              <b>→</b>
              <div><small>Brands</small><strong>Sponsor the action</strong></div>
              <b>→</b>
              <div><small>Zenko</small><strong>Verifies the good</strong></div>
            </div>
          </Reveal>
        </div>
      </section>
      <Band />

      <section className="why-zenko-outcomes">
        <div className="why-zenko-outcomes__inner">
          <Reveal>
            <PreHeadline>What crosses the bridge</PreHeadline>
            <SectionHeading line1="Value goes in." line2="Proof comes out." />
          </Reveal>
          <div className="why-zenko-outcomes__grid">
            {[
              ['A meal reaches a child', '食'],
              ['A tree takes root', '木'],
              ['Carbon is removed', '空'],
              ['A community gets support', '繋'],
            ].map(([label, kanji], index) => (
              <Reveal key={label} delay={index * 0.1}>
                <div className="why-zenko-outcome"><span>{kanji}</span><p>{label}</p></div>
              </Reveal>
            ))}
          </div>
          <Reveal>
            <div className="why-zenko-close">
              <div className="why-zenko-close__mark">善</div>
              <div>
                <h2>Go about your day.<br/><span>Leave some good behind.</span></h2>
                <p>The fox is not just our mascot. It is the messenger between an everyday human action, the organisation that sponsors it and the good created in the world. Not charity driven by guilt. Good that has been earned.</p>
                <BtnPrimary onClick={() => onNavigate('How It Works')}>See how the protocol works →</BtnPrimary>
              </div>
            </div>
          </Reveal>
        </div>
      </section>
    </>
  );
}

// ── ABOUT ────────────────────────────────────────────────────
function AboutPage({ onNavigate }) {
  return (
    <>
      <section style={{ background: '#C94A1A', padding: '110px 80px 90px', position: 'relative', overflow: 'hidden' }} className="grain">
        <Kanji char="善" style={{ right: '40px', top: '-30px', color: '#1A1410', opacity: 0.08 }} size={340} />
        <div style={{ maxWidth: '1200px', margin: '0 auto', position: 'relative', zIndex: 2, maxWidth: '700px' }}>
          <PreHeadline light>About</PreHeadline>
          <div style={{ fontFamily: "'Noto Serif JP',serif", fontWeight: 700, fontSize: 'clamp(36px,4vw,62px)', lineHeight: 1.08, color: '#fff', marginBottom: '8px' }}>We think marketing should</div>
          <div style={{ fontFamily: "'Noto Serif JP',serif", fontWeight: 700, fontSize: 'clamp(36px,4vw,62px)', lineHeight: 1.08, color: '#1A1410', marginBottom: '28px' }}>leave something behind.</div>
          <p style={{ fontFamily: "'Syne',sans-serif", fontWeight: 400, fontSize: '17px', lineHeight: 1.85, color: 'rgba(255,255,255,0.8)', maxWidth: '580px' }}>
            Not a vague promise. Not a pledge in small print. Something real — a meal, a tree, a tonne of carbon that won't go into the atmosphere — recorded permanently, pointed to with confidence.
          </p>
        </div>
      </section>
      <Band />

      {/* Origin */}
      <section style={{ background: '#F7F3E9', padding: '96px 80px', position: 'relative', overflow: 'hidden' }}>
        <Kanji char="善行" style={{ right: '-20px', top: '-20px', color: '#C94A1A', opacity: 0.04 }} size={240} />
        <div style={{ maxWidth: '1200px', margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '80px' }}>
          <Reveal>
            <PreHeadline>The Origin</PreHeadline>
            <SectionHeading line1="Where did this" line2="come from?" />
            <p style={{ fontFamily: "'Syne',sans-serif", fontWeight: 400, fontSize: '16px', lineHeight: 1.85, color: '#7A6F65', marginTop: '24px', marginBottom: '20px' }}>
              The Japanese word 善行 — zenkō — translates to "good deed" or "virtuous act." We chose it deliberately. Not because it sounds good, but because it describes exactly what we think every brand interaction should be capable of being.
            </p>
            <p style={{ fontFamily: "'Syne',sans-serif", fontWeight: 400, fontSize: '16px', lineHeight: 1.85, color: '#7A6F65', marginBottom: '20px' }}>
              We launched without a launchpad. Without VC funding. Without dumpers waiting to exit. We built something real, got Fortune 500 brands using it, got Premier League clubs interested, and got on ITV — before we ever ran a token marketing campaign.
            </p>
            <PullQuote>That's the order we chose. Business first. Customers first. Token second.</PullQuote>
          </Reveal>
          <Reveal delay={0.2}>
            <Reveal>
              <StatsRow stats={[{ num: '80,000+', label: 'Wallets Created' }, { num: 'F500', label: 'Clients Live' }]} />
              <StatsRow stats={[{ num: '25+', label: 'Sports Clubs' }, { num: 'ITV', label: 'National Coverage' }]} />
            </Reveal>
          </Reveal>
        </div>
      </section>
      <Band />

      {/* Commitments */}
      <section style={{ background: '#0D1B3E', padding: '96px 80px' }} className="grain">
        <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
          <Reveal><PreHeadline light>Our Commitments</PreHeadline><SectionHeading line1="What we" line2="stand for" light /></Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: '2px', marginTop: '48px', background: 'rgba(240,223,160,0.1)' }}>
            {[
              { title: 'Transparency first', body: 'Every cause action is on-chain. Every fee is disclosed. Every buyback is verifiable.', color: '#C94A1A' },
              { title: 'Business before hype', body: 'We grow by getting more brands to run more campaigns — not by speculating on our own token price.', color: '#1B6370' },
              { title: 'Purpose embedded, not bolted on', body: 'Zenko isn\'t a CSR add-on. It\'s the product. The good is the mechanic, not the marketing.', color: '#4A5C2A' },
            ].map((item, i) => (
              <Reveal key={item.title} delay={i * 0.12}>
                <div style={{ background: '#0D1B3E', padding: '40px 32px', borderTop: `4px solid ${item.color}` }}>
                  <div style={{ fontFamily: "'Noto Serif JP',serif", fontWeight: 700, fontSize: '22px', color: '#F0DFA0', marginBottom: '14px' }}>{item.title}</div>
                  <p style={{ fontFamily: "'Syne',sans-serif", fontWeight: 400, fontSize: '15px', lineHeight: 1.8, color: 'rgba(240,223,160,0.6)' }}>{item.body}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

// ── CONTACT ──────────────────────────────────────────────────
function ContactPage({ onNavigate }) {
  const [form, setForm] = useSt({ name: '', email: '', company: '', type: '', message: '', website: '' });
  const [sent, setSent] = useSt(false);
  const [status, setStatus] = useSt({ loading: false, error: '' });

  async function submitContact(event) {
    event.preventDefault();
    setStatus({ loading: true, error: '' });
    try {
      const response = await fetch('/api/forms', {
        method: 'POST', headers: { 'content-type': 'application/json' },
        body: JSON.stringify({ kind: 'contact', ...form, page: window.location.pathname }),
      });
      const result = await response.json();
      if (!response.ok || !result.ok) throw new Error(result.error || 'Message failed.');
      setSent(true);
    } catch (error) {
      setStatus({ loading: false, error: error.message || 'Please try again.' });
    }
  }

  const routes = [
    { label: "I'm a brand or enterprise", jp: 'ブランド', color: '#C94A1A', body: 'I want to run engagement campaigns that lower my CPL and create verified ESG impact.', cta: 'Book a strategy call →' },
    { label: "I'm a sports club", jp: 'スポーツ', color: '#1B6370', body: 'I want to build fan engagement campaigns that mean something — and create a CSR story my club can be proud of.', cta: 'Talk to our sports team →' },
    { label: "I'm an app or platform", jp: 'アプリ', color: '#4A5C2A', body: 'I want to integrate Zenko rewards and go climate-positive by design.', cta: 'Request a technical brief →' },
  ];

  const inp = { width: '100%', background: '#F7F3E9', border: '1px solid #EDE8D8', borderBottom: '2px solid #1A1410', padding: '14px 16px', fontFamily: "'Syne',sans-serif", fontSize: '15px', color: '#1A1410', outline: 'none', borderRadius: 0, boxSizing: 'border-box' };

  return (
    <>
      <section style={{ background: '#1A1410', padding: '110px 80px 80px', position: 'relative', overflow: 'hidden' }} className="grain">
        <Kanji char="連絡" style={{ right: '40px', top: '-10px', color: '#F0DFA0', opacity: 0.04 }} size={260} />
        <div style={{ maxWidth: '1200px', margin: '0 auto', position: 'relative', zIndex: 2 }}>
          <PreHeadline light>Get Started</PreHeadline>
          <div style={{ fontFamily: "'Noto Serif JP',serif", fontWeight: 700, fontSize: 'clamp(36px,4vw,62px)', lineHeight: 1.08, color: '#F0DFA0', marginBottom: '6px' }}>Let's build</div>
          <div style={{ fontFamily: "'Noto Serif JP',serif", fontWeight: 700, fontSize: 'clamp(36px,4vw,62px)', lineHeight: 1.08, color: '#C94A1A', marginBottom: '24px' }}>something good.</div>
          <p style={{ fontFamily: "'Syne',sans-serif", fontWeight: 400, fontSize: '17px', lineHeight: 1.85, color: 'rgba(240,223,160,0.55)', maxWidth: '540px' }}>
            Whether you're a brand looking to run your first Zenko campaign, a sports club exploring fan engagement, or an app wanting to go climate-positive — we want to hear from you.
          </p>
        </div>
      </section>
      <Band />

      {/* Entry paths */}
      <section style={{ background: '#EDE8D8', padding: '80px 80px' }}>
        <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
          <Reveal><PreHeadline>Which one are you?</PreHeadline></Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: '2px', background: '#1A1410' }}>
            {routes.map((r, i) => (
              <Reveal key={r.label} delay={i * 0.1}>
                <div style={{ background: '#EDE8D8', padding: '36px 32px', borderTop: `4px solid ${r.color}`, height: '100%', display: 'flex', flexDirection: 'column' }}>
                  <div style={{ fontFamily: "'Noto Serif JP',serif", fontWeight: 700, fontSize: '20px', color: '#1A1410', marginBottom: '4px' }}>{r.label}</div>
                  <div style={{ fontFamily: "'Noto Sans JP',sans-serif", fontWeight: 300, fontSize: '12px', color: '#7A6F65', marginBottom: '16px' }}>{r.jp}</div>
                  <p style={{ fontFamily: "'Syne',sans-serif", fontWeight: 400, fontSize: '14px', lineHeight: 1.8, color: '#7A6F65', flex: 1, marginBottom: '24px' }}>{r.body}</p>
                  <button onClick={() => document.getElementById('contact-form').scrollIntoView()} style={{ background: r.color, color: '#fff', fontFamily: "'Syne',sans-serif", fontWeight: 600, fontSize: '12px', letterSpacing: '0.06em', textTransform: 'uppercase', padding: '12px 20px', border: 'none', borderRadius: 0, cursor: 'pointer', alignSelf: 'flex-start' }}>{r.cta}</button>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
      <Band />

      {/* Form */}
      <section id="contact-form" style={{ background: '#F7F3E9', padding: '96px 80px' }}>
        <div style={{ maxWidth: '680px', margin: '0 auto' }}>
          <Reveal>
            <PreHeadline>Contact Us</PreHeadline>
            <SectionHeading line1="Tell us what you're" line2="working on" />
          </Reveal>
          {sent ? (
            <Reveal>
              <div style={{ marginTop: '40px', padding: '48px 40px', background: '#1A1410', textAlign: 'center' }}>
                <Rune size={56} color="#C94A1A" spin />
                <div style={{ fontFamily: "'Noto Serif JP',serif", fontWeight: 700, fontSize: '28px', color: '#F0DFA0', marginTop: '20px', marginBottom: '10px' }}>Message sent.</div>
                <p style={{ fontFamily: "'Syne',sans-serif", fontWeight: 400, fontSize: '15px', color: 'rgba(240,223,160,0.55)' }}>We'll be in touch shortly.</p>
              </div>
            </Reveal>
          ) : (
            <Reveal delay={0.1}>
              <form onSubmit={submitContact} style={{ marginTop: '40px', display: 'flex', flexDirection: 'column', gap: '16px' }}>
                <input style={inp} required autoComplete="name" placeholder="Name" value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} />
                <input style={inp} required type="email" autoComplete="email" placeholder="Email address" value={form.email} onChange={e => setForm({ ...form, email: e.target.value })} />
                <input style={inp} placeholder="Company" value={form.company} onChange={e => setForm({ ...form, company: e.target.value })} />
                <select required style={{ ...inp, appearance: 'none' }} value={form.type} onChange={e => setForm({ ...form, type: e.target.value })}>
                  <option value="">I am a...</option>
                  <option>Brand / Enterprise</option>
                  <option>Sports Club</option>
                  <option>App / Platform</option>
                  <option>Investor</option>
                  <option>Press</option>
                  <option>Other</option>
                </select>
                <textarea required minLength="10" style={{ ...inp, minHeight: '140px', resize: 'vertical' }} placeholder="Tell us what you're working on" value={form.message} onChange={e => setForm({ ...form, message: e.target.value })} />
                <input tabIndex="-1" autoComplete="off" aria-hidden="true" style={{ position: 'absolute', left: '-9999px' }} value={form.website} onChange={e => setForm({ ...form, website: e.target.value })} />
                {status.error && <div role="alert" style={{ color: '#9d2f0a', fontSize: '14px' }}>{status.error}</div>}
                <button type="submit" disabled={status.loading} style={{ background: '#C94A1A', color: '#fff', border: 'none', padding: '14px 26px', fontFamily: "'Syne','Lato',sans-serif", fontWeight: 600, fontSize: '13px', letterSpacing: '0.06em', textTransform: 'uppercase', cursor: status.loading ? 'wait' : 'pointer', alignSelf: 'flex-start' }}>{status.loading ? 'Sending…' : 'Send →'}</button>
              </form>
            </Reveal>
          )}
        </div>
      </section>
    </>
  );
}

Object.assign(window, { CausesPage, TokenPage, BlogPage, BlogPostPage, LegalPage, WhyZenkoPage, AboutPage, ContactPage });
