// pages.jsx — Home, Blog, Post, Tools, Tool, Newsletter, About, Field Guide

const { useState: useS, useEffect: useE, useMemo: useM } = React;

// ═══════════════════════════════════════════════════════════════════
// HOME
// ═══════════════════════════════════════════════════════════════════
function HomePage({ heroVariant = 'A' }) {
  const { t, go, lang } = useApp();
  const posts = window.POSTS;
  const featured = posts[0];

  useE(() => {
    document.title = 'Natharia — The intelligence layer for AI & no-code builders';
    setMetaTag('description', 'Weekly long-form on the AI and no-code tools that actually move the needle. Honest teardowns, deep comparisons, zero fluff.');
    setMetaTag('og:title', 'Natharia — The intelligence layer for AI & no-code builders');
    setMetaTag('og:description', 'Weekly long-form on the AI and no-code tools that actually move the needle. Honest teardowns, deep comparisons, zero fluff.');
    setMetaTag('og:url', 'https://natharia.com');
    setMetaTag('og:type', 'website');
    setMetaTag('og:site_name', 'Natharia');
    setCanonical('https://natharia.com');
    setJsonLd({
      "@context": "https://schema.org",
      "@type": "WebSite",
      "name": "Natharia",
      "url": "https://natharia.com",
      "description": "The intelligence layer for AI & no-code builders",
      "publisher": { "@type": "Organization", "name": "Natharia" }
    });
    return () => clearJsonLd();
  }, [lang]);

  return (
    <div className="page route">
      <Ticker />

      {/* ── Hero ────────────────────────── */}
      {heroVariant === 'A' && <HeroA />}
      {heroVariant === 'B' && <HeroB />}
      {heroVariant === 'C' && <HeroC />}

      {/* ── Featured dispatch ────────────────────────── */}
      <section className="wrap" style={{ paddingTop: 40 }}>
        <Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 64, alignItems: 'end', borderTop: '1px solid var(--rule)', paddingTop: 40 }}>
            <div>
              <span className="eyebrow">— {lang === 'en' ? 'Featured dispatch' : 'À la une'}</span>
              <h2 className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 64px)', marginTop: 16, letterSpacing: '-0.02em' }}>
                {featured.title[lang]}
              </h2>
            </div>
            <div style={{ paddingBottom: 10 }}>
              <p style={{ color: 'var(--ink-70)', fontSize: 17, lineHeight: 1.6, maxWidth: 520 }}>{featured.desc[lang]}</p>
              <div style={{ display: 'flex', gap: 24, marginTop: 24, alignItems: 'center' }}>
                <span className="mono" style={{ fontSize: 11, color: 'var(--ink-50)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>
                  {t.issue} № {String(featured.issue).padStart(3, '0')} · {featured.read} {t.minRead}
                </span>
                <Link to={`/blog/${featured.slug}`} className="btn">
                  {t.readMore} <span className="arr"></span>
                </Link>
              </div>
            </div>
          </div>
        </Reveal>

        {/* Visual placeholder strip */}
        <Reveal delay={120}>
          <div style={{ marginTop: 48, height: 340, background: 'linear-gradient(135deg, var(--bg-soft) 0%, var(--bg-card) 100%)', border: '1px solid var(--rule)', position: 'relative', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg viewBox="0 0 800 300" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
              <defs>
                <pattern id="dots" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
                  <circle cx="2" cy="2" r="1" fill="var(--ink-15)" />
                </pattern>
              </defs>
              <rect width="800" height="300" fill="url(#dots)" />
              <line x1="100" y1="150" x2="700" y2="150" stroke="var(--accent)" strokeWidth="1" opacity="0.4" />
              <line x1="100" y1="150" x2="400" y2="150" stroke="var(--accent)" strokeWidth="2" />
              <circle cx="400" cy="150" r="4" fill="var(--accent)" />
              <text x="100" y="140" fontFamily="JetBrains Mono" fontSize="10" fill="var(--ink-50)" letterSpacing="2">MAKE.COM</text>
              <text x="620" y="140" fontFamily="JetBrains Mono" fontSize="10" fill="var(--ink-50)" letterSpacing="2">ZAPIER</text>
              <text x="380" y="180" fontFamily="JetBrains Mono" fontSize="10" fill="var(--accent)" letterSpacing="2">62% → 38%</text>
            </svg>
            <span className="mono" style={{ position: 'absolute', bottom: 16, left: 16, fontSize: 10, color: 'var(--ink-30)', letterSpacing: '0.14em' }}>FIG. 01 — COST PARITY CURVE · N=41 WORKFLOWS</span>
          </div>
        </Reveal>
      </section>

      {/* ── Proof row ────────────────────────── */}
      <section className="wrap" style={{ paddingTop: 120 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0 }}>
          {[
            { n: '028', u: '', lbl: t.proof.issues },
            { n: '147', u: '', lbl: t.proof.tools },
            { n: '4.2', u: 'K', lbl: t.proof.readers },
            { n: '9.4', u: 'HRS', lbl: t.proof.time },
          ].map((p, i) => (
            <Reveal key={i} delay={i * 80} className="plate">
              <div className="plate-num">{p.n}<span className="unit">{p.u}</span></div>
              <div className="plate-lbl">{p.lbl}</div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* ── Coverage ────────────────────────── */}
      <section className="wrap" style={{ paddingTop: 160 }}>
        <Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.8fr', gap: 64, marginBottom: 60 }}>
            <div>
              <span className="eyebrow">§ {lang === 'en' ? 'Coverage' : 'Domaines'}</span>
              <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 72px)', marginTop: 20, lineHeight: 0.95 }}>
                {t.sections.coverage}
              </h2>
            </div>
            <p style={{ color: 'var(--ink-70)', fontSize: 20, lineHeight: 1.5, alignSelf: 'end', maxWidth: 560, fontFamily: 'var(--serif)', fontWeight: 300 }}>
              {t.sections.coverageSub}
            </p>
          </div>
        </Reveal>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: 'var(--rule)', border: '1px solid var(--rule)' }}>
          {[
            { n: '01', t: lang === 'en' ? 'Tool teardowns' : 'Tests approfondis', d: lang === 'en' ? 'We buy the subscription, cancel the hype. Every teardown is a six-week field test — no demo-driven reviews.' : 'On prend l\'abonnement, on coupe le hype. Chaque test dure six semaines — pas de review sur démo.' },
            { n: '02', t: lang === 'en' ? 'Head-to-heads' : 'Confrontations', d: lang === 'en' ? 'Two tools, the same workflows, the same edge cases. We publish the spreadsheet. You pick the winner with real data.' : 'Deux outils, les mêmes workflows, les mêmes cas limites. On publie le tableur. Vous tranchez avec des vraies données.' },
            { n: '03', t: lang === 'en' ? 'Stacks & playbooks' : 'Stacks & playbooks', d: lang === 'en' ? 'Real stacks from real operators. The $127 stack. The agency stack. The solopreneur stack. Fork and adapt.' : 'Des stacks réels d\'opérateurs réels. Le stack à 127€. Le stack d\'agence. Le stack solopreneur. Forkables.' },
          ].map((c, i) => (
            <Reveal key={i} delay={i * 100} className="" style={{ padding: 40, background: 'var(--bg)' }}>
              <p className="mono" style={{ fontSize: 11, color: 'var(--accent)', letterSpacing: '0.14em' }}>{c.n} —</p>
              <h3 className="display" style={{ fontSize: 28, marginTop: 16, marginBottom: 16, fontWeight: 400, letterSpacing: '-0.02em' }}>{c.t}</h3>
              <p style={{ color: 'var(--ink-70)', fontSize: 15, lineHeight: 1.55 }}>{c.d}</p>
            </Reveal>
          ))}
        </div>
      </section>

      {/* ── Latest dispatches ────────────────────────── */}
      <section className="wrap" style={{ paddingTop: 160 }}>
        <Reveal>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 32 }}>
            <div>
              <span className="eyebrow">§ {t.latest}</span>
              <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 72px)', marginTop: 12, lineHeight: 0.95 }}>
                {t.latest}
              </h2>
            </div>
            <Link to="/blog" className="txt-link">
              {t.viewAll} →
            </Link>
          </div>
        </Reveal>

        <div>
          {posts.slice(0, 4).map((p, i) => (
            <Reveal key={p.slug} delay={i * 60}>
              <Link to={`/blog/${p.slug}`} className="artcard" style={{ display: 'block' }}>
                <div className="artcard-meta">
                  <span className="artcard-cat">— {p.cat[lang]}</span>
                  <span className="artcard-date mono">{p.date}</span>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--ink-30)' }}>· № {String(p.issue).padStart(3, '0')}</span>
                </div>
                <h3 className="artcard-title">{p.title[lang]}</h3>
                <p className="artcard-desc">{p.desc[lang]}</p>
              </Link>
            </Reveal>
          ))}
        </div>
      </section>

      {/* ── Field Guide CTA ────────────────────────── */}
      <section className="wrap" style={{ paddingTop: 160 }}>
        <Reveal>
          <div style={{ border: '1px solid var(--rule)', padding: 'clamp(40px, 6vw, 80px)', background: 'linear-gradient(135deg, var(--bg-soft) 0%, var(--bg) 100%)', position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', top: -100, right: -100, width: 400, height: 400, background: 'radial-gradient(circle, var(--accent) 0%, transparent 60%)', opacity: 0.08, pointerEvents: 'none' }}></div>
            <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 60, alignItems: 'end', position: 'relative' }}>
              <div>
                <span className="mono" style={{ fontSize: 11, color: 'var(--accent)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
                  ◆ {t.fieldGuide.badge}
                </span>
                <h2 className="display" style={{ fontSize: 'clamp(44px, 6vw, 84px)', marginTop: 20, lineHeight: 0.95, letterSpacing: '-0.03em' }}>
                  {t.fieldGuide.title}
                </h2>
                <p style={{ marginTop: 24, fontSize: 19, color: 'var(--ink-70)', lineHeight: 1.5, maxWidth: 540, fontFamily: 'var(--serif)', fontWeight: 300 }}>
                  {t.fieldGuide.sub}
                </p>
                <div style={{ marginTop: 32, display: 'flex', gap: 12 }}>
                  <Link to="/field-guide" className="btn btn-accent">
                    {t.fieldGuide.cta} <span className="arr"></span>
                  </Link>
                </div>
              </div>
              <div style={{ aspectRatio: '3/4', border: '1px solid var(--rule)', background: 'var(--bg-card)', padding: 28, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', position: 'relative' }}>
                <div>
                  <p className="mono" style={{ fontSize: 10, color: 'var(--ink-50)', letterSpacing: '0.14em' }}>NATHARIA FIELD GUIDE</p>
                  <p className="mono" style={{ fontSize: 10, color: 'var(--ink-30)', letterSpacing: '0.14em', marginTop: 4 }}>№ 001 · 2026 EDITION</p>
                </div>
                <div>
                  <h3 className="display" style={{ fontSize: 42, lineHeight: 0.95, fontWeight: 300, letterSpacing: '-0.02em' }}>
                    50<br/>AI Tools<br/><em className="italic-serif" style={{ color: 'var(--accent)' }}>ranked.</em>
                  </h3>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end' }}>
                  <span className="mono" style={{ fontSize: 10, color: 'var(--ink-30)' }}>— 38pp</span>
                  <NatharialMark size={24} />
                </div>
              </div>
            </div>
          </div>
        </Reveal>
      </section>

      {/* ── Newsletter CTA ────────────────────────── */}
      <section className="wrap" style={{ paddingTop: 160 }}>
        <Reveal>
          <div style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto' }}>
            <span className="eyebrow">— {lang === 'en' ? 'Wednesday dispatch' : 'Dépêche du mercredi'}</span>
            <h2 className="display" style={{ fontSize: 'clamp(40px, 7vw, 96px)', marginTop: 20, lineHeight: 0.95, letterSpacing: '-0.03em' }}>
              {lang === 'en' ? 'One issue. Every' : 'Une édition. Chaque'}<br />
              <em className="italic-serif" style={{ color: 'var(--accent)' }}>{lang === 'en' ? 'Wednesday.' : 'mercredi.'}</em>
            </h2>
            <p style={{ marginTop: 24, fontSize: 18, color: 'var(--ink-70)', fontFamily: 'var(--serif)', fontWeight: 300 }}>
              {lang === 'en' ? 'The weekly brief 4,200+ operators read before their stand-up.' : '4 200+ opérateurs la lisent avant leur stand-up.'}
            </p>
            <div style={{ maxWidth: 480, margin: '40px auto 0' }}>
              <NewsletterForm />
            </div>
          </div>
        </Reveal>
      </section>
    </div>
  );
}

// ── Hero variant A: the big typographic one ──────────────────────────
function HeroA() {
  const { t, lang } = useApp();
  return (
    <section className="hero wrap">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 48 }}>
        <span className="mono" style={{ fontSize: 11, color: 'var(--ink-50)', letterSpacing: '0.18em', textTransform: 'uppercase', display: 'flex', alignItems: 'center', gap: 10 }}>
          <span className="live-dot"></span> {t.heroKicker}
        </span>
        <span className="mono" style={{ fontSize: 11, color: 'var(--ink-50)', letterSpacing: '0.18em' }}>
          № 028 / {lang === 'en' ? 'APR · XXVI' : 'AVR · XXVI'}
        </span>
      </div>
      <Reveal>
        <h1 className="hero-type">
          <span className="w">{t.heroLine1}</span>
          <span className="w">{t.heroLine2}</span>
          <span className="w"><em>{t.heroItalic}</em>.</span>
        </h1>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 64, marginTop: 72, alignItems: 'end' }}>
        <Reveal delay={200}>
          <p style={{ color: 'var(--ink-70)', fontSize: 'clamp(18px, 1.6vw, 22px)', lineHeight: 1.55, maxWidth: 600, fontFamily: 'var(--serif)', fontWeight: 300 }}>
            {t.heroSub}
          </p>
        </Reveal>
        <Reveal delay={300}>
          <div>
            <p className="mono" style={{ fontSize: 11, color: 'var(--ink-50)', letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 12 }}>
              — {t.newsletterCta}
            </p>
            <NewsletterForm />
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ── Hero variant B: split editorial with the issue cover ──────────────────────────
function HeroB() {
  const { t, go, lang } = useApp();
  return (
    <section className="wrap" style={{ paddingTop: 80, paddingBottom: 100 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 32 }}>
        <span className="mono" style={{ fontSize: 11, color: 'var(--ink-50)', letterSpacing: '0.18em', display: 'flex', alignItems: 'center', gap: 10 }}>
          <span className="live-dot"></span> {t.heroKicker}
        </span>
      </div>
      <div className="hero-split">
        <div>
          <h1 className="display" style={{ fontSize: 'clamp(56px, 9vw, 148px)', lineHeight: 0.9, letterSpacing: '-0.04em' }}>
            {t.heroLine1}<br/>{t.heroLine2}<br/><em className="italic-serif" style={{ color: 'var(--accent)' }}>{t.heroItalic}</em>.
          </h1>
          <p style={{ color: 'var(--ink-70)', fontSize: 18, lineHeight: 1.55, marginTop: 32, maxWidth: 460, fontFamily: 'var(--serif)', fontWeight: 300 }}>
            {t.heroSub}
          </p>
        </div>
        <div style={{ border: '1px solid var(--rule)', padding: 32, background: 'var(--bg-soft)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
            <span className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', color: 'var(--ink-50)' }}>CURRENT ISSUE № 028</span>
            <span className="sparkle"></span>
          </div>
          <h3 className="display" style={{ fontSize: 32, fontWeight: 300, lineHeight: 1.05, letterSpacing: '-0.02em', marginBottom: 16 }}>
            {window.POSTS[0].title[lang]}
          </h3>
          <p style={{ color: 'var(--ink-50)', fontSize: 14, lineHeight: 1.55, marginBottom: 24 }}>
            {window.POSTS[0].desc[lang]}
          </p>
          <Link to={`/blog/${window.POSTS[0].slug}`} className="btn">{t.readMore} <span className="arr"></span></Link>
          <div className="rule" style={{ margin: '32px 0 24px' }}></div>
          <p className="mono" style={{ fontSize: 10, color: 'var(--ink-50)', letterSpacing: '0.14em', marginBottom: 12 }}>— {t.newsletterCta}</p>
          <NewsletterForm compact />
        </div>
      </div>
    </section>
  );
}

// ── Hero variant C: index/TOC style ──────────────────────────
function HeroC() {
  const { t, lang, go } = useApp();
  return (
    <section className="wrap hero-index">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 32 }}>
        <span className="mono" style={{ fontSize: 11, color: 'var(--ink-50)', letterSpacing: '0.18em' }}>
          № 028 · {lang === 'en' ? 'IN THIS ISSUE' : 'DANS CETTE ÉDITION'}
        </span>
        <span className="live-dot"></span>
      </div>
      <h1 className="hero-index-title">
        {t.heroLine1}<br/>
        {t.heroLine2} <em className="italic-serif" style={{ color: 'var(--accent)' }}>{t.heroItalic}</em>.
      </h1>
      <div style={{ marginTop: 60, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 0, borderTop: '1px solid var(--rule)' }}>
        {window.POSTS.slice(0, 4).map((p, i) => (
          <Link key={p.slug} to={`/blog/${p.slug}`} style={{ padding: 24, borderRight: i < 3 ? '1px solid var(--rule)' : 'none', borderBottom: '1px solid var(--rule)', cursor: 'pointer', transition: 'background 200ms', display: 'block' }}
            onMouseEnter={e => e.currentTarget.style.background = 'var(--ink-04)'}
            onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
          >
            <p className="mono" style={{ fontSize: 10, color: 'var(--accent)', letterSpacing: '0.14em' }}>0{i + 1} — {p.cat[lang]}</p>
            <h3 className="display" style={{ fontSize: 19, fontWeight: 400, lineHeight: 1.15, marginTop: 10, letterSpacing: '-0.01em' }}>{p.title[lang]}</h3>
            <p className="mono" style={{ fontSize: 10, color: 'var(--ink-30)', letterSpacing: '0.1em', marginTop: 20 }}>{p.read} MIN</p>
          </Link>
        ))}
      </div>
    </section>
  );
}

// ═══════════════════════════════════════════════════════════════════
// BLOG INDEX
// ═══════════════════════════════════════════════════════════════════
function BlogPage() {
  const { t, go, lang } = useApp();
  const [filter, setFilter] = useS('All');
  const cats = ['All', ...new Set(window.POSTS.map(p => p.cat.en))];
  const shown = filter === 'All' ? window.POSTS : window.POSTS.filter(p => p.cat.en === filter);

  useE(() => {
    document.title = (lang === 'en' ? 'Journal — Natharia' : 'Journal — Natharia');
    setMetaTag('description', lang === 'en' ? 'Long-form pieces on AI and no-code, filed every Wednesday. Six weeks of research per piece.' : 'Des articles longs sur l\'IA et le no-code, publiés chaque mercredi. Six semaines de recherche par pièce.');
    setMetaTag('og:title', 'Journal — Natharia');
    setMetaTag('og:description', 'Long-form pieces on AI and no-code, filed every Wednesday. Six weeks of research per piece.');
    setMetaTag('og:url', 'https://natharia.com/blog');
    setMetaTag('og:type', 'website');
    setCanonical('https://natharia.com/blog');
    setJsonLd({
      "@context": "https://schema.org",
      "@type": "Blog",
      "name": "Natharia Journal",
      "url": "https://natharia.com/blog",
      "description": "Long-form pieces on AI and no-code, filed every Wednesday.",
      "publisher": { "@type": "Organization", "name": "Natharia" },
      "blogPost": window.POSTS.map(p => ({
        "@type": "BlogPosting",
        "headline": p.title.en,
        "url": "https://natharia.com/blog/" + p.slug,
        "datePublished": p.date
      }))
    });
    return () => clearJsonLd();
  }, [lang]);

  return (
    <div className="page route">
      <section className="wrap" style={{ paddingTop: 60, paddingBottom: 60 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 24 }}>
          <span className="eyebrow">§ {lang === 'en' ? 'Journal' : 'Journal'} / {shown.length} {lang === 'en' ? 'entries' : 'entrées'}</span>
          <span className="mono" style={{ fontSize: 11, color: 'var(--ink-50)', letterSpacing: '0.14em' }}>
            {lang === 'en' ? 'Filed from 02.2026 — ongoing' : 'Classé depuis 02.2026 — en cours'}
          </span>
        </div>
        <h1 className="display" style={{ fontSize: 'clamp(56px, 10vw, 144px)', lineHeight: 0.9, letterSpacing: '-0.04em' }}>
          {lang === 'en' ? 'Every' : 'Chaque'} <em className="italic-serif" style={{ color: 'var(--accent)' }}>{lang === 'en' ? 'dispatch' : 'dépêche'}</em>.
        </h1>
        <p style={{ marginTop: 32, fontSize: 19, color: 'var(--ink-70)', maxWidth: 640, lineHeight: 1.5, fontFamily: 'var(--serif)', fontWeight: 300 }}>
          {lang === 'en' ? 'Long-form pieces on AI and no-code, filed every Wednesday. Six weeks of research per piece. No sponsored coverage. No filler.' : 'Des articles longs sur l\'IA et le no-code, publiés chaque mercredi. Six semaines de recherche par pièce. Aucun contenu sponsorisé. Aucun remplissage.'}
        </p>
      </section>

      <section className="wrap" style={{ paddingTop: 40 }}>
        <div className="tagcluster" style={{ marginBottom: 40 }}>
          {cats.map(c => (
            <button key={c} className={`chip ${filter === c ? 'on' : ''}`} onClick={() => setFilter(c)}>
              {c === 'All' ? (lang === 'en' ? 'All' : 'Tout') : c}
            </button>
          ))}
        </div>
        {shown.map((p, i) => (
          <Reveal key={p.slug} delay={i * 40}>
            <Link to={`/blog/${p.slug}`} className="streamrow" style={{ cursor: 'pointer', display: 'grid' }}>
              <span className="sr-num">№ {String(p.issue).padStart(3, '0')}</span>
              <div>
                <h3 className="sr-title">{p.title[lang]}</h3>
                <p style={{ color: 'var(--ink-50)', fontSize: 14, marginTop: 6, lineHeight: 1.5 }}>{p.desc[lang]}</p>
              </div>
              <span className="sr-cat">— {p.cat[lang]}</span>
              <span className="sr-read">{p.read} {t.minRead}</span>
            </Link>
          </Reveal>
        ))}
      </section>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════
// POST (article detail)
// ═══════════════════════════════════════════════════════════════════
function PostPage({ slug }) {
  const { t, go, lang } = useApp();
  const post = window.POSTS.find(p => p.slug === slug) || window.POSTS[0];
  const related = window.POSTS.filter(p => p.slug !== post.slug).slice(0, 3);
  const [showPopup, dismissPopup] = useExitIntent(true);

  useE(() => {
    const title = (post.title && post.title[lang]) + ' — Natharia';
    const desc = post.desc && post.desc[lang];
    const url = 'https://natharia.com/blog/' + post.slug;

    document.title = title;
    setCanonical(url);
    setMetaTag('description', desc);
    setMetaTag('og:title', title);
    setMetaTag('og:description', desc);
    setMetaTag('og:url', url);
    setMetaTag('og:type', 'article');
    setMetaTag('og:site_name', 'Natharia');
    setMetaTag('article:published_time', post.date);
    setMetaTag('article:section', post.cat.en);
    setMetaTag('twitter:card', 'summary_large_image');
    setMetaTag('twitter:title', title);
    setMetaTag('twitter:description', desc);

    setJsonLd({
      "@context": "https://schema.org",
      "@type": "Article",
      "headline": post.title[lang],
      "description": desc,
      "url": url,
      "datePublished": post.date,
      "author": { "@type": "Organization", "name": "Natharia" },
      "publisher": {
        "@type": "Organization",
        "name": "Natharia",
        "url": "https://natharia.com"
      },
      "mainEntityOfPage": { "@type": "WebPage", "@id": url },
      "articleSection": post.cat.en,
      "wordCount": post.read * 250
    });

    return () => {
      setCanonical('https://natharia.com');
      clearJsonLd();
    };
  }, [post.slug, lang]);

  // Article body content is trusted, authored HTML from data.jsx (not user input)
  const articleHtml = window.ARTICLE_BODY[slug] && window.ARTICLE_BODY[slug][lang];

  return (
    <div className="page route">
      <section className="wrap" style={{ paddingTop: 40, paddingBottom: 20 }}>
        <Link to="/blog" className="mono" style={{ fontSize: 11, color: 'var(--ink-50)', letterSpacing: '0.12em' }}>{t.backToAll}</Link>
      </section>

      <section className="wrap" style={{ paddingTop: 40, paddingBottom: 60 }}>
        <div style={{ maxWidth: 900 }}>
          <div style={{ display: 'flex', gap: 16, alignItems: 'center', marginBottom: 28 }}>
            <span className="mono" style={{ fontSize: 11, color: 'var(--accent)', letterSpacing: '0.16em', textTransform: 'uppercase' }}>— {post.cat[lang]}</span>
            <span className="mono" style={{ fontSize: 11, color: 'var(--ink-50)', letterSpacing: '0.12em' }}>№ {String(post.issue).padStart(3, '0')}</span>
            <span className="mono" style={{ fontSize: 11, color: 'var(--ink-50)', letterSpacing: '0.12em' }}>{post.read} {t.minRead}</span>
          </div>
          <h1 className="display" style={{ fontSize: 'clamp(40px, 6.5vw, 96px)', lineHeight: 0.95, letterSpacing: '-0.03em' }}>
            {post.title[lang]}
          </h1>
          <p style={{ marginTop: 32, fontSize: 22, color: 'var(--ink-70)', fontFamily: 'var(--serif-italic)', fontStyle: 'italic', lineHeight: 1.4, maxWidth: 720, fontWeight: 400 }}>
            {post.desc[lang]}
          </p>
          <div style={{ marginTop: 40, display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 20, borderTop: '1px solid var(--rule)' }}>
            <span className="mono" style={{ fontSize: 11, color: 'var(--ink-50)', letterSpacing: '0.1em' }}>
              {t.publishedOn} {post.date} · {t.by}
            </span>
            <span className="mono" style={{ fontSize: 11, color: 'var(--ink-50)', letterSpacing: '0.1em' }}>{t.share} →</span>
          </div>
        </div>
      </section>

      {/* Figure placeholder */}
      <section className="wrap">
        <div style={{ height: 400, border: '1px solid var(--rule)', background: 'linear-gradient(135deg, var(--bg-soft), var(--bg-card))', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', overflow: 'hidden' }}>
          <svg viewBox="0 0 800 400" style={{ width: '100%', height: '100%' }}>
            <defs>
              <pattern id="dots2" x="0" y="0" width="16" height="16" patternUnits="userSpaceOnUse">
                <circle cx="1" cy="1" r="1" fill="var(--ink-15)" />
              </pattern>
            </defs>
            <rect width="800" height="400" fill="url(#dots2)" />
            <polyline points="80,300 180,260 280,280 380,180 480,220 580,140 680,100" stroke="var(--accent)" strokeWidth="2" fill="none" />
            <circle cx="680" cy="100" r="4" fill="var(--accent)" />
            <text x="80" y="60" fontFamily="JetBrains Mono" fontSize="11" fill="var(--ink-50)" letterSpacing="2">FIG. 01 — COST DELTA OVER 6 WEEKS</text>
          </svg>
          <span className="mono" style={{ position: 'absolute', bottom: 16, left: 16, fontSize: 10, color: 'var(--ink-30)', letterSpacing: '0.14em' }}>SOURCE: NATHARIA DESK · MAR–APR 2026</span>
        </div>
      </section>

      {/* Affiliate disclaimer */}
      <section className="wrap" style={{ paddingTop: 40 }}>
        <div style={{ maxWidth: 720, padding: '14px 20px', border: '1px solid var(--rule)', background: 'var(--bg-soft)', display: 'flex', alignItems: 'baseline', gap: 12 }}>
          <span className="mono" style={{ fontSize: 10, color: 'var(--accent)', letterSpacing: '0.14em', flexShrink: 0 }}>&#9670;</span>
          <p style={{ fontSize: 13, color: 'var(--ink-50)', lineHeight: 1.5, fontFamily: 'var(--sans)' }}>
            This article contains affiliate links. We may earn a commission if you purchase through our links, at no extra cost to you.{' '}
            <Link to="/affiliate-disclosure" style={{ color: 'var(--accent)', borderBottom: '1px solid var(--ink-15)', fontSize: 13 }}>
              Learn more
            </Link>
          </p>
        </div>
      </section>

      {/* Newsletter CTA — top */}
      <section className="wrap" style={{ paddingTop: 32 }}>
        <div style={{ maxWidth: 720, padding: '16px 20px', border: '1px solid var(--rule)', background: 'var(--bg-card)', display: 'flex', alignItems: 'center', gap: 20, flexWrap: 'wrap' }}>
          <p style={{ fontSize: 14, color: 'var(--ink-70)', fontFamily: 'var(--sans)', lineHeight: 1.4, flex: 1, minWidth: 200 }}>
            {lang === 'en' ? 'Get our weekly brief — honest AI tool reviews, no fluff.' : 'Recevez notre brief hebdo — tests d\'outils IA sans bullshit.'}
          </p>
          <div style={{ flex: 1, minWidth: 240 }}>
            <NewsletterForm compact />
          </div>
        </div>
      </section>

      {/* Body — article HTML is trusted content authored in data.jsx, not user input */}
      <section className="wrap" style={{ paddingTop: 80, paddingBottom: 80 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 64, alignItems: 'start' }}>
          <aside style={{ position: 'sticky', top: 120, alignSelf: 'start' }}>
            <p className="mono" style={{ fontSize: 10, color: 'var(--ink-30)', letterSpacing: '0.16em', marginBottom: 16 }}>{t.tableOfContents.toUpperCase()}</p>
            <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
              {(() => {
                const body = window.ARTICLE_BODY[slug] && window.ARTICLE_BODY[slug][lang] || '';
                const headings = [];
                const re = new RegExp('<h2[^>]*>(.*?)<\\/h2>', 'gi');
                let m;
                while ((m = re.exec(body)) !== null) {
                  headings.push(m[1].replace(/<[^>]+>/g, ''));
                }
                return headings.slice(0, 8).map((h, i) => (
                  <li key={i} style={{ fontSize: 13, color: 'var(--ink-50)', lineHeight: 1.4 }}>— {h}</li>
                ));
              })()}
            </ul>
          </aside>
          {articleHtml
            ? React.createElement('div', { className: 'prose', dangerouslySetInnerHTML: { __html: articleHtml } })
            : React.createElement('div', { className: 'prose' }, React.createElement('p', null, 'Article content loading...'))
          }
        </div>
      </section>

      {/* Newsletter CTA — bottom */}
      <section className="wrap" style={{ paddingTop: 60, paddingBottom: 60 }}>
        <div style={{ maxWidth: 720, margin: '0 auto', padding: '40px 32px', border: '1px solid var(--rule)', background: 'var(--bg-card)', textAlign: 'center' }}>
          <p className="mono" style={{ fontSize: 10, color: 'var(--accent)', letterSpacing: '0.16em', marginBottom: 12 }}>
            {lang === 'en' ? '— NATHARIA WEEKLY' : '— NATHARIA HEBDO'}
          </p>
          <h3 className="display" style={{ fontSize: 28, fontWeight: 400, letterSpacing: '-0.02em', marginBottom: 8 }}>
            {lang === 'en' ? 'Get the weekly brief in your inbox' : 'Recevez le brief hebdo dans votre boite'}
          </h3>
          <p style={{ fontSize: 15, color: 'var(--ink-50)', lineHeight: 1.5, marginBottom: 24, fontFamily: 'var(--sans)' }}>
            {lang === 'en'
              ? 'One email per week. Honest reviews, real benchmarks, zero spam.'
              : 'Un email par semaine. Tests honnetes, benchmarks reels, zero spam.'}
          </p>
          <NewsletterForm />
        </div>
      </section>

      {/* Related */}
      <section className="wrap" style={{ paddingTop: 80 }}>
        <h2 className="display" style={{ fontSize: 36, marginBottom: 24, fontWeight: 400, letterSpacing: '-0.02em' }}>{t.related}</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: 'var(--rule)', border: '1px solid var(--rule)' }}>
          {related.map(r => (
            <Link key={r.slug} to={`/blog/${r.slug}`} style={{ background: 'var(--bg)', padding: 28, display: 'block' }}>
              <p className="mono" style={{ fontSize: 10, color: 'var(--accent)', letterSpacing: '0.14em' }}>— {r.cat[lang]}</p>
              <h3 className="display" style={{ fontSize: 22, marginTop: 14, fontWeight: 400, lineHeight: 1.15 }}>{r.title[lang]}</h3>
              <p className="mono" style={{ fontSize: 10, color: 'var(--ink-30)', letterSpacing: '0.12em', marginTop: 20 }}>{r.read} {t.minRead} · № {String(r.issue).padStart(3, '0')}</p>
            </Link>
          ))}
        </div>
      </section>
      {showPopup && <ExitIntentPopup onClose={dismissPopup} />}
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════
// TOOLS DIRECTORY
// ═══════════════════════════════════════════════════════════════════
function ToolsPage() {
  const { t, go, lang } = useApp();
  const [cat, setCat] = useS('All');
  const shown = cat === 'All' ? window.TOOLS : window.TOOLS.filter(t => t.cat === cat);

  useE(() => {
    document.title = (lang === 'en' ? 'Tools — Natharia' : 'Outils — Natharia');
    setMetaTag('description', lang === 'en' ? 'Every tool we\'ve reviewed, ranked by honesty — not by affiliate payout.' : 'Chaque outil qu\'on a testé, classé par honnêteté — pas par commission.');
    setMetaTag('og:title', 'Tools — Natharia');
    setMetaTag('og:url', 'https://natharia.com/tools');
    setCanonical('https://natharia.com/tools');
    clearJsonLd();
  }, [lang]);

  return (
    <div className="page route">
      <section className="wrap" style={{ paddingTop: 60 }}>
        <span className="eyebrow">§ {lang === 'en' ? 'The stack · Ranked by the Natharia desk' : 'Le stack · Classé par la rédaction Natharia'}</span>
        <h1 className="display" style={{ fontSize: 'clamp(56px, 10vw, 144px)', marginTop: 16, lineHeight: 0.9, letterSpacing: '-0.04em' }}>
          {lang === 'en' ? 'Every tool' : 'Chaque outil'}<br/><em className="italic-serif" style={{ color: 'var(--accent)' }}>{lang === 'en' ? 'worth owning' : 'qui vaut son prix'}.</em>
        </h1>
        <p style={{ marginTop: 32, fontSize: 19, color: 'var(--ink-70)', maxWidth: 640, lineHeight: 1.5, fontFamily: 'var(--serif)', fontWeight: 300 }}>
          {lang === 'en' ? 'No sponsored placements. No SEO spam. Every tool was paid for, used for six weeks, then rated.' : 'Aucun placement sponsorisé. Aucun spam SEO. Chaque outil a été payé, utilisé six semaines, puis noté.'}
        </p>
      </section>

      <section className="wrap" style={{ paddingTop: 60 }}>
        <div className="tagcluster" style={{ marginBottom: 40 }}>
          {window.CATEGORIES.map(c => (
            <button key={c} className={`chip ${cat === c ? 'on' : ''}`} onClick={() => setCat(c)}>{c}</button>
          ))}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 16 }}>
          {shown.map((tool, i) => (
            <Reveal key={tool.slug} delay={i * 40}>
              <Link to={`/tools/${tool.slug}`} className="tool-card" style={{ display: 'flex' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
                  <div className="tool-logo">{tool.name[0]}</div>
                  <span className="tool-rating"><span className="num">{tool.rating}</span> / 10</span>
                </div>
                <div>
                  <p className="mono" style={{ fontSize: 10, color: 'var(--ink-50)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>— {tool.cat}</p>
                  <h3 className="display" style={{ fontSize: 26, fontWeight: 400, marginTop: 4, letterSpacing: '-0.02em' }}>{tool.name}</h3>
                </div>
                <p style={{ fontSize: 14, color: 'var(--ink-70)', lineHeight: 1.5 }}>{tool.tagline[lang]}</p>
                <div className="rule"></div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--ink-50)' }}>{tool.price}</span>
                  <span className="mono" style={{ fontSize: 10, color: 'var(--accent)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>◆ {tool.verdict[lang]}</span>
                </div>
              </Link>
            </Reveal>
          ))}
        </div>
      </section>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════
// TOOL DETAIL
// ═══════════════════════════════════════════════════════════════════
function ToolPage({ slug }) {
  const { t, go, lang } = useApp();
  const tool = window.TOOLS.find(t => t.slug === slug) || window.TOOLS[0];

  useE(() => {
    const title = tool.name + ' Review — Natharia';
    document.title = title;
    setMetaTag('description', tool.tagline[lang]);
    setMetaTag('og:title', title);
    setMetaTag('og:description', tool.tagline[lang]);
    setMetaTag('og:url', 'https://natharia.com/tools/' + tool.slug);
    setCanonical('https://natharia.com/tools/' + tool.slug);
    setJsonLd({
      "@context": "https://schema.org",
      "@type": "Review",
      "itemReviewed": { "@type": "SoftwareApplication", "name": tool.name },
      "reviewRating": { "@type": "Rating", "ratingValue": tool.rating, "bestRating": 10 },
      "author": { "@type": "Organization", "name": "Natharia" },
      "url": "https://natharia.com/tools/" + tool.slug
    });
    return () => clearJsonLd();
  }, [tool.slug, lang]);

  return (
    <div className="page route">
      <section className="wrap" style={{ paddingTop: 40 }}>
        <Link to="/tools" className="mono" style={{ fontSize: 11, color: 'var(--ink-50)', letterSpacing: '0.12em' }}>← {lang === 'en' ? 'All tools' : 'Tous les outils'}</Link>
      </section>

      <section className="wrap" style={{ paddingTop: 40 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 64, alignItems: 'start' }}>
          <div>
            <p className="mono" style={{ fontSize: 11, color: 'var(--accent)', letterSpacing: '0.16em', textTransform: 'uppercase' }}>— {tool.cat}</p>
            <h1 className="display" style={{ fontSize: 'clamp(60px, 9vw, 140px)', lineHeight: 0.9, marginTop: 12, letterSpacing: '-0.04em' }}>{tool.name}.</h1>
            <p style={{ marginTop: 32, fontSize: 24, color: 'var(--ink-70)', fontFamily: 'var(--serif-italic)', fontStyle: 'italic', maxWidth: 520, lineHeight: 1.35, fontWeight: 400 }}>
              {tool.tagline[lang]}
            </p>
          </div>
          <div style={{ border: '1px solid var(--rule)', padding: 28 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', marginBottom: 24 }}>
              <span className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', color: 'var(--ink-50)' }}>VERDICT</span>
              <span className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', color: 'var(--accent)' }}>◆ {tool.verdict[lang].toUpperCase()}</span>
            </div>
            <div className="display" style={{ fontSize: 96, fontWeight: 300, lineHeight: 1, letterSpacing: '-0.03em' }}>
              {tool.rating}<span style={{ fontSize: 32, color: 'var(--ink-30)' }}>/10</span>
            </div>
            <div className="rule" style={{ margin: '28px 0' }}></div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
              <div>
                <p className="mono" style={{ fontSize: 10, color: 'var(--ink-30)', letterSpacing: '0.14em', marginBottom: 6 }}>PRICE</p>
                <p style={{ fontFamily: 'var(--display)', fontSize: 22, fontWeight: 400 }}>{tool.price}</p>
              </div>
              <div>
                <p className="mono" style={{ fontSize: 10, color: 'var(--ink-30)', letterSpacing: '0.14em', marginBottom: 6 }}>{lang === 'en' ? 'TESTED' : 'TESTÉ'}</p>
                <p style={{ fontFamily: 'var(--display)', fontSize: 22, fontWeight: 400 }}>6 {lang === 'en' ? 'wks' : 'sem'}</p>
              </div>
            </div>
            <a href={`/go/${tool.slug}`} target="_blank" rel="noopener noreferrer nofollow" className="btn btn-accent" style={{ width: '100%', justifyContent: 'center', marginTop: 24 }}>
              {lang === 'en' ? 'Try free' : 'Essayer gratuitement'} {tool.name} <span className="arr"></span>
            </a>
          </div>
        </div>
      </section>

      <section className="wrap" style={{ paddingTop: 80 }}>
        <div className="rule"></div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, padding: '60px 0' }}>
          <div>
            <p className="mono" style={{ fontSize: 11, color: 'var(--accent)', letterSpacing: '0.16em' }}>— {lang === 'en' ? 'WHAT WE LIKE' : 'CE QU\'ON AIME'}</p>
            <ul style={{ listStyle: 'none', marginTop: 20, display: 'flex', flexDirection: 'column', gap: 14 }}>
              {['Visual scenario builder is genuinely faster once learned.','Pricing scales honestly — no step-bundling surprises.','Error handling is built-in, not paywalled.','Actively shipped features every month in 2026.'].map((it, i) => (
                <li key={i} style={{ display: 'flex', gap: 14, fontSize: 16, color: 'var(--ink-70)', lineHeight: 1.55, fontFamily: 'var(--serif)', fontWeight: 300 }}>
                  <span className="mono" style={{ color: 'var(--accent)', fontSize: 12, marginTop: 4 }}>+</span>
                  {lang === 'en' ? it : ['Le constructeur visuel est plus rapide, une fois maîtrisé.','Le pricing scale honnêtement — pas de bundling caché.','La gestion d\'erreur est intégrée, pas en paywall.','Des features livrées chaque mois en 2026.'][i]}
                </li>
              ))}
            </ul>
          </div>
          <div>
            <p className="mono" style={{ fontSize: 11, color: 'var(--ink-50)', letterSpacing: '0.16em' }}>— {lang === 'en' ? 'WHAT\'S FRUSTRATING' : 'CE QUI FRUSTRE'}</p>
            <ul style={{ listStyle: 'none', marginTop: 20, display: 'flex', flexDirection: 'column', gap: 14 }}>
              {['Steeper onboarding; your non-technical hire will struggle week one.','Fewer integrations than the category leader.','Documentation assumes a prior ops engineering mindset.'].map((it, i) => (
                <li key={i} style={{ display: 'flex', gap: 14, fontSize: 16, color: 'var(--ink-70)', lineHeight: 1.55, fontFamily: 'var(--serif)', fontWeight: 300 }}>
                  <span className="mono" style={{ color: 'var(--ink-50)', fontSize: 12, marginTop: 4 }}>–</span>
                  {lang === 'en' ? it : ['Onboarding plus raide ; un non-technique galère la première semaine.','Moins d\'intégrations que le leader catégorie.','La doc suppose déjà un mindset d\'ingénieur ops.'][i]}
                </li>
              ))}
            </ul>
          </div>
        </div>
        <div className="rule"></div>
      </section>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════
// NEWSLETTER
// ═══════════════════════════════════════════════════════════════════
function NewsletterPage() {
  const { lang, t } = useApp();

  useE(() => {
    document.title = (lang === 'en' ? 'Newsletter — Natharia' : 'Newsletter — Natharia');
    setMetaTag('description', lang === 'en' ? 'The weekly brief 4,200+ operators read before their stand-up.' : '4 200+ opérateurs la lisent avant leur stand-up.');
    setMetaTag('og:title', 'Newsletter — Natharia');
    setMetaTag('og:url', 'https://natharia.com/newsletter');
    setCanonical('https://natharia.com/newsletter');
    clearJsonLd();
  }, [lang]);

  return (
    <div className="page route">
      <section className="wrap" style={{ paddingTop: 80, paddingBottom: 80 }}>
        <div style={{ maxWidth: 860 }}>
          <span className="eyebrow">§ {lang === 'en' ? 'The Wednesday dispatch' : 'La dépêche du mercredi'}</span>
          <h1 className="display" style={{ fontSize: 'clamp(60px, 10vw, 160px)', lineHeight: 0.88, marginTop: 16, letterSpacing: '-0.04em' }}>
            {lang === 'en' ? 'One brief.' : 'Un brief.'}<br />
            {lang === 'en' ? 'Every' : 'Chaque'} <em className="italic-serif" style={{ color: 'var(--accent)' }}>{lang === 'en' ? 'Wednesday' : 'mercredi'}</em>.
          </h1>
          <p style={{ marginTop: 40, fontSize: 22, color: 'var(--ink-70)', fontFamily: 'var(--serif)', fontWeight: 300, lineHeight: 1.5, maxWidth: 640 }}>
            {lang === 'en' ? '4,200+ operators read Natharia before their Wednesday stand-up. It takes seven minutes. It prints hard-won calls on what to build with, what to skip, and what\'s worth your team\'s next Tuesday.' : '4 200+ opérateurs lisent Natharia avant leur stand-up du mercredi. Sept minutes de lecture. Des décisions tranchées sur avec quoi construire, quoi zapper, et ce qui vaut le prochain mardi de votre équipe.'}
          </p>
          <div style={{ marginTop: 56, maxWidth: 520 }}>
            <NewsletterForm />
          </div>
        </div>
      </section>

      <section className="wrap">
        <div className="rule"></div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', padding: '60px 0', gap: 0 }}>
          {[
            { n: '4,217', lbl: lang === 'en' ? 'Readers' : 'Lecteurs' },
            { n: '47%', lbl: lang === 'en' ? 'Open rate' : 'Taux d\'ouverture' },
            { n: '7 min', lbl: lang === 'en' ? 'Avg. read' : 'Lecture moyenne' },
            { n: '$0', lbl: lang === 'en' ? 'To subscribe' : 'Pour s\'abonner' },
          ].map((s, i) => (
            <div key={i} className="plate">
              <div className="plate-num" style={{ fontSize: 56 }}>{s.n}</div>
              <div className="plate-lbl">{s.lbl}</div>
            </div>
          ))}
        </div>
        <div className="rule"></div>
      </section>

      <section className="wrap" style={{ paddingTop: 80 }}>
        <p className="mono" style={{ fontSize: 11, color: 'var(--ink-50)', letterSpacing: '0.14em', marginBottom: 24 }}>— {lang === 'en' ? 'PREVIEW · ISSUE № 028' : 'APERÇU · ÉDITION № 028'}</p>
        <div style={{ border: '1px solid var(--rule)', padding: 'clamp(32px, 5vw, 64px)', background: 'var(--bg-soft)', maxWidth: 720, fontFamily: 'var(--serif)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 32, alignItems: 'center' }}>
            <NatharialLogo height={18} />
            <span className="mono" style={{ fontSize: 10, color: 'var(--ink-50)', letterSpacing: '0.12em' }}>WEDNESDAY · APRIL 17 · 2026</span>
          </div>
          <h3 className="display" style={{ fontSize: 36, fontWeight: 300, lineHeight: 1.05, letterSpacing: '-0.02em' }}>
            {window.POSTS[0].title[lang]}
          </h3>
          <p style={{ marginTop: 20, fontSize: 17, color: 'var(--ink-70)', lineHeight: 1.6, fontWeight: 300 }}>
            {lang === 'en' ? 'Six weeks. Forty-one workflows. One spreadsheet we can\'t stop looking at. This week\'s brief delivers the receipts on why most teams are overpaying for automation — and the switch that pays for itself in its first month.' : 'Six semaines. Quarante-et-un workflows. Un tableur qu\'on n\'arrête pas de regarder. Le brief de la semaine livre les preuves de pourquoi la plupart des équipes paient trop pour leur automatisation — et le switch qui se rembourse dès le premier mois.'}
          </p>
          <div style={{ marginTop: 24, display: 'flex', gap: 14, color: 'var(--ink-50)' }} className="mono">
            <span className="mono" style={{ fontSize: 11, letterSpacing: '0.1em' }}>3 {lang === 'en' ? 'stories' : 'articles'}</span>
            <span className="mono" style={{ fontSize: 11, letterSpacing: '0.1em' }}>·</span>
            <span className="mono" style={{ fontSize: 11, letterSpacing: '0.1em' }}>1 {lang === 'en' ? 'field note' : 'note terrain'}</span>
            <span className="mono" style={{ fontSize: 11, letterSpacing: '0.1em' }}>·</span>
            <span className="mono" style={{ fontSize: 11, letterSpacing: '0.1em' }}>7 {lang === 'en' ? 'min read' : 'min de lecture'}</span>
          </div>
        </div>
      </section>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════
// ABOUT
// ═══════════════════════════════════════════════════════════════════
function AboutPage() {
  const { lang } = useApp();

  useE(() => {
    document.title = (lang === 'en' ? 'About — Natharia' : 'À propos — Natharia');
    setMetaTag('description', lang === 'en' ? 'The intelligence layer for AI and no-code builders. Independent. Honest. Reader-supported.' : 'La couche d\'intelligence pour les builders IA et no-code. Indépendant. Honnête. Financé par les lecteurs.');
    setMetaTag('og:title', 'About — Natharia');
    setMetaTag('og:url', 'https://natharia.com/about');
    setCanonical('https://natharia.com/about');
    clearJsonLd();
  }, [lang]);

  return (
    <div className="page route">
      <section className="wrap" style={{ paddingTop: 80, paddingBottom: 40 }}>
        <span className="eyebrow">§ {lang === 'en' ? 'The house' : 'La maison'}</span>
        <h1 className="display" style={{ fontSize: 'clamp(60px, 10vw, 160px)', lineHeight: 0.88, marginTop: 16, letterSpacing: '-0.04em' }}>
          {lang === 'en' ? 'Built for' : 'Pour les'}<br/>
          <em className="italic-serif" style={{ color: 'var(--accent)' }}>{lang === 'en' ? 'operators' : 'opérateurs'}</em>.
        </h1>
      </section>

      <section className="wrap" style={{ paddingTop: 40, paddingBottom: 60 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 64, alignItems: 'start' }}>
          <p className="mono" style={{ fontSize: 11, color: 'var(--ink-50)', letterSpacing: '0.14em' }}>— {lang === 'en' ? 'The mission' : 'La mission'}</p>
          <div className="prose" style={{ maxWidth: 'none' }}>
            <p>{lang === 'en' ? 'The AI and no-code space is noisy. A new tool launches every Tuesday. Three-quarters of them don\'t deliver. The ones that do are buried under sponsored content, rushed listicles, and SEO slop that exists only to rank.' : 'L\'espace IA et no-code est bruyant. Un nouvel outil sort chaque mardi. Les trois quarts ne tiennent pas leurs promesses. Ceux qui tiennent sont enterrés sous le contenu sponsorisé, les listicles bâclées et la bouillie SEO qui n\'existe que pour ranker.'}</p>
            <p><em>{lang === 'en' ? 'Natharia is the intelligence layer.' : 'Natharia est la couche d\'intelligence.'}</em> {lang === 'en' ? 'We buy the subscriptions. We run the tools through real workflows for six weeks. Then we write what we actually learned — long, detailed, and free.' : 'On paie les abonnements. On fait tourner les outils six semaines dans des workflows réels. Puis on écrit ce qu\'on a vraiment appris — long, détaillé et gratuit.'}</p>
          </div>
        </div>
      </section>

      <section className="wrap">
        <div className="rule"></div>
        <div style={{ padding: '60px 0' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 48 }}>
            {[
              { n: '01', t: lang === 'en' ? 'Trust first' : 'La confiance d\'abord', d: lang === 'en' ? 'No tool gets a favorable review for an affiliate payout. We disclose everything.' : 'Aucun outil n\'obtient une bonne note pour une commission. On divulgue tout.' },
              { n: '02', t: lang === 'en' ? 'Depth over cadence' : 'La profondeur avant la cadence', d: lang === 'en' ? 'We publish once a week because six-week tests take six weeks. We don\'t fake it.' : 'Une pièce par semaine, parce qu\'un test de six semaines dure six semaines. On ne fait pas semblant.' },
              { n: '03', t: lang === 'en' ? 'Reader-supported' : 'Financé par les lecteurs', d: lang === 'en' ? 'The newsletter is free. The Field Guides are free. Affiliates pay the bills, transparently.' : 'La newsletter est gratuite. Les Field Guides sont gratuits. Les affiliations paient les factures, en transparence.' },
            ].map(v => (
              <div key={v.n}>
                <p className="mono" style={{ fontSize: 11, color: 'var(--accent)', letterSpacing: '0.14em' }}>— {v.n}</p>
                <h3 className="display" style={{ fontSize: 28, marginTop: 14, fontWeight: 400, letterSpacing: '-0.02em', lineHeight: 1.1 }}>{v.t}</h3>
                <p style={{ marginTop: 14, color: 'var(--ink-70)', fontSize: 16, lineHeight: 1.55, fontFamily: 'var(--serif)', fontWeight: 300 }}>{v.d}</p>
              </div>
            ))}
          </div>
        </div>
        <div className="rule"></div>
      </section>

      <section className="wrap" style={{ paddingTop: 80 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 64 }}>
          <p className="mono" style={{ fontSize: 11, color: 'var(--ink-50)', letterSpacing: '0.14em' }}>— {lang === 'en' ? 'Colophon' : 'Colophon'}</p>
          <div>
            <p style={{ fontSize: 17, color: 'var(--ink-70)', lineHeight: 1.55, maxWidth: 580, fontFamily: 'var(--serif)', fontWeight: 300 }}>
              {lang === 'en' ? 'Set in Fraunces and Inter Tight. Published from Switzerland on Vercel. Written by the Natharia desk — a small, opinionated team of operators, writers, and engineers.' : 'Composé en Fraunces et Inter Tight. Publié depuis la Suisse sur Vercel. Écrit par la rédaction Natharia — une petite équipe tranchée d\'opérateurs, d\'écrivains et d\'ingénieurs.'}
            </p>
          </div>
        </div>
      </section>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════
// FIELD GUIDE (lead magnet)
// ═══════════════════════════════════════════════════════════════════
function FieldGuidePage() {
  const { t, lang } = useApp();

  useE(() => {
    document.title = (lang === 'en' ? 'Field Guide — Natharia' : 'Guide — Natharia');
    setMetaTag('description', lang === 'en' ? '50 tools. 5 categories. One honest ranking. Free PDF.' : '50 outils. 5 catégories. Un classement honnête. PDF gratuit.');
    setMetaTag('og:title', 'Field Guide — Natharia');
    setMetaTag('og:url', 'https://natharia.com/field-guide');
    setCanonical('https://natharia.com/field-guide');
    clearJsonLd();
  }, [lang]);

  return (
    <div className="page route">
      <section className="wrap" style={{ paddingTop: 60 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80, alignItems: 'start' }}>
          <div>
            <span className="mono" style={{ fontSize: 11, color: 'var(--accent)', letterSpacing: '0.18em', textTransform: 'uppercase' }}>◆ {t.fieldGuide.badge}</span>
            <h1 className="display" style={{ fontSize: 'clamp(56px, 9vw, 132px)', lineHeight: 0.9, marginTop: 16, letterSpacing: '-0.04em' }}>
              50 <em className="italic-serif" style={{ color: 'var(--accent)' }}>AI Tools</em>,<br/>
              {lang === 'en' ? 'ranked' : 'classés'}.
            </h1>
            <p style={{ marginTop: 36, fontSize: 21, color: 'var(--ink-70)', fontFamily: 'var(--serif)', fontWeight: 300, lineHeight: 1.5, maxWidth: 540 }}>
              {t.fieldGuide.sub}
            </p>
            <div style={{ marginTop: 40, maxWidth: 480 }}>
              <p className="mono" style={{ fontSize: 11, color: 'var(--ink-50)', letterSpacing: '0.14em', marginBottom: 8 }}>— {lang === 'en' ? 'Drop your email. PDF lands in 30 seconds.' : 'Votre email. PDF envoyé en 30 secondes.'}</p>
              <NewsletterForm compact />
            </div>
          </div>

          {/* Guide cover */}
          <div style={{ aspectRatio: '3/4', border: '1px solid var(--rule)', background: 'var(--bg-soft)', padding: 36, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 80% 20%, var(--accent) 0%, transparent 50%)', opacity: 0.08, pointerEvents: 'none' }}></div>
            <div style={{ position: 'relative' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 20 }}>
                <NatharialMark size={22} />
                <span className="sparkle"></span>
              </div>
              <p className="mono" style={{ fontSize: 10, color: 'var(--ink-50)', letterSpacing: '0.14em' }}>NATHARIA FIELD GUIDE</p>
              <p className="mono" style={{ fontSize: 10, color: 'var(--ink-30)', letterSpacing: '0.14em', marginTop: 4 }}>№ 001 · APR · MMXXVI</p>
            </div>
            <div style={{ position: 'relative' }}>
              <h2 className="display" style={{ fontSize: 72, lineHeight: 0.9, fontWeight: 300, letterSpacing: '-0.04em' }}>
                50<br/>
                <em className="italic-serif" style={{ color: 'var(--accent)' }}>AI</em> Tools<br/>
                {lang === 'en' ? 'ranked' : 'classés'}.
              </h2>
            </div>
            <div style={{ position: 'relative' }}>
              <div className="rule" style={{ marginBottom: 14 }}></div>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <span className="mono" style={{ fontSize: 10, color: 'var(--ink-50)' }}>— 38pp · FREE</span>
                <span className="mono" style={{ fontSize: 10, color: 'var(--ink-50)' }}>ED. 2026</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* What's inside */}
      <section className="wrap" style={{ paddingTop: 140 }}>
        <div className="rule"></div>
        <div style={{ padding: '60px 0' }}>
          <p className="mono" style={{ fontSize: 11, color: 'var(--ink-50)', letterSpacing: '0.14em' }}>§ {t.fieldGuide.what}</p>
          <h2 className="display" style={{ fontSize: 'clamp(40px, 6vw, 80px)', marginTop: 16, lineHeight: 0.95, letterSpacing: '-0.03em' }}>
            {lang === 'en' ? 'Five categories,' : 'Cinq catégories,'}<br/><em className="italic-serif" style={{ color: 'var(--accent)' }}>{lang === 'en' ? 'one honest ranking' : 'un classement honnête'}</em>.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', border: '1px solid var(--rule)' }}>
          {[
            { n: '01', t: 'AI Writing', c: 12 },
            { n: '02', t: 'Automation', c: 9 },
            { n: '03', t: 'No-Code', c: 11 },
            { n: '04', t: 'Design', c: 8 },
            { n: '05', t: 'Analytics', c: 10 },
          ].map((cat, i) => (
            <div key={cat.n} style={{ padding: 32, borderRight: i < 4 ? '1px solid var(--rule)' : 'none' }}>
              <p className="mono" style={{ fontSize: 10, color: 'var(--accent)', letterSpacing: '0.14em' }}>{cat.n}</p>
              <h3 className="display" style={{ fontSize: 22, marginTop: 16, fontWeight: 400, letterSpacing: '-0.01em' }}>{cat.t}</h3>
              <p className="mono" style={{ fontSize: 11, color: 'var(--ink-50)', marginTop: 32, letterSpacing: '0.1em' }}>{cat.c} {lang === 'en' ? 'tools ranked' : 'outils classés'}</p>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════
// PRIVACY POLICY
// ═══════════════════════════════════════════════════════════════════
function PrivacyPolicyPage() {
  const { lang } = useApp();

  useE(() => {
    document.title = 'Privacy Policy — Natharia';
    setMetaTag('description', 'How Natharia collects, uses, and protects your data. GDPR-compliant.');
    setMetaTag('og:title', 'Privacy Policy — Natharia');
    setMetaTag('og:url', 'https://natharia.com/privacy-policy');
    setCanonical('https://natharia.com/privacy-policy');
    clearJsonLd();
  }, []);

  return (
    <div className="page route">
      <section className="wrap" style={{ paddingTop: 60, paddingBottom: 40 }}>
        <span className="eyebrow">§ Legal</span>
        <h1 className="display" style={{ fontSize: 'clamp(48px, 8vw, 120px)', lineHeight: 0.9, marginTop: 16, letterSpacing: '-0.04em' }}>
          Privacy <em className="italic-serif" style={{ color: 'var(--accent)' }}>Policy</em>.
        </h1>
        <p className="mono" style={{ fontSize: 11, color: 'var(--ink-50)', letterSpacing: '0.12em', marginTop: 32 }}>
          Last updated: May 6, 2026 · Effective immediately
        </p>
      </section>

      <section className="wrap" style={{ paddingTop: 40, paddingBottom: 120 }}>
        <div style={{ maxWidth: 720 }}>
          <div className="prose">
            <p>Natharia ("we", "us", "our") operates the website <strong>natharia.com</strong>. This Privacy Policy explains what data we collect, why we collect it, and how we handle it. We are committed to transparency and to compliance with the Swiss Federal Act on Data Protection (FADP), the EU General Data Protection Regulation (GDPR), and applicable privacy laws.</p>

            <h2>1. Data we collect</h2>
            <h3>Email address</h3>
            <p>When you subscribe to our newsletter, we collect your email address. This is processed by <strong>Beehiiv</strong>, our newsletter platform. We use it solely to send you our weekly dispatch and occasional updates about Natharia content.</p>
            <h3>Analytics data</h3>
            <p>We use <strong>Vercel Web Analytics</strong> to understand how visitors interact with our site. Vercel Analytics is privacy-friendly and does not use cookies. It collects anonymised data such as page views, referrers, browser type, and country-level location. No personally identifiable information is stored.</p>
            <h3>Affiliate click data</h3>
            <p>When you click an affiliate link (URLs starting with <strong>/go/</strong>), we may log the click event through <strong>Supabase</strong> for attribution purposes. This data includes the link clicked and a timestamp. It is not linked to your identity.</p>

            <h2>2. How we use your data</h2>
            <ul>
              <li><strong>Newsletter delivery:</strong> Your email address is used to send the Natharia weekly dispatch via Beehiiv.</li>
              <li><strong>Site improvement:</strong> Anonymous analytics help us understand which content resonates and how to improve the reading experience.</li>
              <li><strong>Affiliate attribution:</strong> Click data helps us track which tool recommendations are useful to readers and sustain our independent publishing.</li>
            </ul>

            <h2>3. Third-party services</h2>
            <p>We rely on a small number of trusted third-party services to operate Natharia:</p>
            <table>
              <thead>
                <tr><th>Service</th><th>Purpose</th><th>Data processed</th></tr>
              </thead>
              <tbody>
                <tr><td>Beehiiv</td><td>Newsletter platform</td><td>Email address, open/click analytics</td></tr>
                <tr><td>Vercel</td><td>Hosting & analytics</td><td>Anonymised usage data (no cookies)</td></tr>
                <tr><td>Supabase</td><td>Database</td><td>Affiliate click events</td></tr>
                <tr><td>Resend</td><td>Transactional email</td><td>Email address (for confirmations)</td></tr>
              </tbody>
            </table>
            <p>We do not sell, rent, or share your personal data with any other third party for marketing purposes.</p>

            <h2>4. Cookies</h2>
            <p>Natharia does not use tracking cookies. Vercel Web Analytics is cookie-free. If you subscribe to the newsletter, Beehiiv may set functional cookies on their domain for session management. No advertising or third-party tracking cookies are used on natharia.com.</p>

            <h2>5. GDPR & your rights</h2>
            <p>If you are located in the European Economic Area (EEA) or Switzerland, you have the following rights under GDPR and the Swiss FADP:</p>
            <ul>
              <li><strong>Access:</strong> Request a copy of the personal data we hold about you.</li>
              <li><strong>Rectification:</strong> Ask us to correct inaccurate data.</li>
              <li><strong>Erasure:</strong> Request deletion of your personal data.</li>
              <li><strong>Portability:</strong> Receive your data in a structured, machine-readable format.</li>
              <li><strong>Objection:</strong> Object to processing of your data for specific purposes.</li>
              <li><strong>Withdrawal of consent:</strong> Unsubscribe from the newsletter at any time via the link in every email.</li>
            </ul>
            <p>To exercise any of these rights, contact us at the address below. We will respond within 30 days.</p>

            <h2>6. Data retention</h2>
            <p>We retain your email address for as long as you remain subscribed to our newsletter. Analytics data is retained in aggregate and cannot be linked to individuals. Affiliate click data is retained for 24 months for reporting purposes, then deleted.</p>

            <h2>7. Data security</h2>
            <p>We use industry-standard measures to protect your data, including encrypted connections (HTTPS), secure hosting on Vercel, and access controls on our database. However, no method of transmission over the Internet is 100% secure.</p>

            <h2>8. Children's privacy</h2>
            <p>Natharia is not directed at individuals under the age of 16. We do not knowingly collect personal data from children.</p>

            <h2>9. Changes to this policy</h2>
            <p>We may update this Privacy Policy from time to time. Changes will be posted on this page with an updated "Last updated" date. Continued use of the site after changes constitutes acceptance of the revised policy.</p>

            <h2>10. Contact</h2>
            <p>For privacy-related inquiries or to exercise your data rights:</p>
            <p><strong>Natharia</strong><br />Email: aria@natharia.com<br />Location: Switzerland</p>
          </div>
        </div>
      </section>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════
// TERMS OF SERVICE
// ═══════════════════════════════════════════════════════════════════
function TermsOfServicePage() {
  const { lang } = useApp();

  useE(() => {
    document.title = 'Terms of Service — Natharia';
    setMetaTag('description', 'Terms governing your use of natharia.com. Governed by Swiss law.');
    setMetaTag('og:title', 'Terms of Service — Natharia');
    setMetaTag('og:url', 'https://natharia.com/terms-of-service');
    setCanonical('https://natharia.com/terms-of-service');
    clearJsonLd();
  }, []);

  return (
    <div className="page route">
      <section className="wrap" style={{ paddingTop: 60, paddingBottom: 40 }}>
        <span className="eyebrow">§ Legal</span>
        <h1 className="display" style={{ fontSize: 'clamp(48px, 8vw, 120px)', lineHeight: 0.9, marginTop: 16, letterSpacing: '-0.04em' }}>
          Terms of <em className="italic-serif" style={{ color: 'var(--accent)' }}>Service</em>.
        </h1>
        <p className="mono" style={{ fontSize: 11, color: 'var(--ink-50)', letterSpacing: '0.12em', marginTop: 32 }}>
          Last updated: May 6, 2026 · Effective immediately
        </p>
      </section>

      <section className="wrap" style={{ paddingTop: 40, paddingBottom: 120 }}>
        <div style={{ maxWidth: 720 }}>
          <div className="prose">
            <p>These Terms of Service ("Terms") govern your access to and use of the Natharia website at <strong>natharia.com</strong> ("the Site"), operated by Natharia ("we", "us", "our"). By accessing or using the Site, you agree to be bound by these Terms. If you do not agree, please do not use the Site.</p>

            <h2>1. Use of the Site</h2>
            <p>Natharia provides editorial content including articles, tool reviews, comparisons, and guides related to AI and no-code tools. The Site is intended for informational and educational purposes. You may browse, read, and share our content for personal, non-commercial purposes, provided you credit Natharia as the source and link back to the original article.</p>
            <p>You agree not to:</p>
            <ul>
              <li>Reproduce, redistribute, or republish our content in bulk without written permission.</li>
              <li>Use automated systems (bots, scrapers) to access the Site at a volume that degrades performance for other users.</li>
              <li>Attempt to gain unauthorised access to any part of the Site, its servers, or connected systems.</li>
              <li>Use the Site for any unlawful purpose or in violation of these Terms.</li>
            </ul>

            <h2>2. Intellectual property</h2>
            <p>All content on natharia.com — including text, graphics, logos, the Natharia name and wordmark, page design, and visual assets — is the intellectual property of Natharia or its content creators and is protected by Swiss and international copyright law.</p>
            <p>You may quote brief excerpts (under 200 words) with proper attribution and a link to the source. For any other use, including syndication, translation, or reproduction in print or digital media, please contact us at aria@natharia.com.</p>

            <h2>3. Affiliate links & commercial relationships</h2>
            <p>Natharia participates in affiliate programmes. Some links on the Site (typically URLs starting with <strong>/go/</strong>) are affiliate links. When you click these links and make a purchase, we may earn a commission at no additional cost to you.</p>
            <p>Affiliate relationships do not influence our editorial ratings or recommendations. Our reviews reflect genuine testing and independent assessment. For full details, see our <a href="/affiliate-disclosure" onClick={(e) => { e.preventDefault(); window.history.pushState({}, '', '/affiliate-disclosure'); window.dispatchEvent(new PopStateEvent('popstate')); }}>Affiliate Disclosure</a>.</p>

            <h2>4. Disclaimer of warranties</h2>
            <p>The content on Natharia is provided <strong>"as is"</strong> and <strong>"as available"</strong> without warranties of any kind, whether express or implied. We make reasonable efforts to ensure accuracy, but we do not guarantee that:</p>
            <ul>
              <li>All information is complete, current, or error-free.</li>
              <li>Tool ratings, pricing, or features remain accurate after publication — software products change frequently.</li>
              <li>The Site will be available without interruption.</li>
            </ul>
            <p>Natharia's content is editorial in nature and does not constitute professional, financial, or legal advice. Always do your own due diligence before purchasing any tool or service.</p>

            <h2>5. Limitation of liability</h2>
            <p>To the maximum extent permitted by applicable law, Natharia, its operators, contributors, and affiliates shall not be liable for any indirect, incidental, special, consequential, or punitive damages arising from:</p>
            <ul>
              <li>Your use of, or inability to use, the Site.</li>
              <li>Any decisions made based on content published on the Site.</li>
              <li>Any third-party products or services accessed through affiliate links.</li>
              <li>Unauthorised access to or alteration of your data.</li>
            </ul>
            <p>Our total aggregate liability for any claim arising from these Terms shall not exceed CHF 1,000 or the total amount of affiliate commissions earned from the claimant's purchases in the previous 12 months, whichever is higher.</p>

            <h2>6. Third-party links & services</h2>
            <p>The Site contains links to third-party websites, tools, and services. We are not responsible for the content, privacy practices, or availability of these external sites. Your use of third-party services is governed by their own terms and policies.</p>

            <h2>7. Newsletter</h2>
            <p>If you subscribe to our newsletter, you consent to receiving periodic emails from Natharia. You may unsubscribe at any time using the link provided in every email. See our <a href="/privacy-policy" onClick={(e) => { e.preventDefault(); window.history.pushState({}, '', '/privacy-policy'); window.dispatchEvent(new PopStateEvent('popstate')); }}>Privacy Policy</a> for details on how we handle your email address.</p>

            <h2>8. Modifications to these Terms</h2>
            <p>We reserve the right to update these Terms at any time. Changes will be posted on this page with an updated "Last updated" date. Your continued use of the Site after changes constitutes acceptance of the revised Terms.</p>

            <h2>9. Governing law & jurisdiction</h2>
            <p>These Terms are governed by and construed in accordance with the laws of <strong>Switzerland</strong>. Any disputes arising from or relating to these Terms or your use of the Site shall be subject to the exclusive jurisdiction of the courts of Zurich, Switzerland.</p>

            <h2>10. Contact</h2>
            <p>For questions about these Terms:</p>
            <p><strong>Natharia</strong><br />Email: aria@natharia.com<br />Location: Switzerland</p>
          </div>
        </div>
      </section>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════
// AFFILIATE DISCLOSURE
// ═══════════════════════════════════════════════════════════════════
function AffiliateDisclosurePage() {
  const { lang } = useApp();

  useE(() => {
    document.title = 'Affiliate Disclosure — Natharia';
    setMetaTag('description', 'How Natharia uses affiliate links and earns revenue while staying editorially independent.');
    setMetaTag('og:title', 'Affiliate Disclosure — Natharia');
    setMetaTag('og:url', 'https://natharia.com/affiliate-disclosure');
    setCanonical('https://natharia.com/affiliate-disclosure');
    clearJsonLd();
  }, []);

  return (
    <div className="page route">
      <section className="wrap" style={{ paddingTop: 60, paddingBottom: 40 }}>
        <span className="eyebrow">§ Legal</span>
        <h1 className="display" style={{ fontSize: 'clamp(48px, 8vw, 120px)', lineHeight: 0.9, marginTop: 16, letterSpacing: '-0.04em' }}>
          Affiliate <em className="italic-serif" style={{ color: 'var(--accent)' }}>Disclosure</em>.
        </h1>
        <p className="mono" style={{ fontSize: 11, color: 'var(--ink-50)', letterSpacing: '0.12em', marginTop: 32 }}>
          Last updated: May 6, 2026 · Effective immediately
        </p>
      </section>

      <section className="wrap" style={{ paddingTop: 40, paddingBottom: 120 }}>
        <div style={{ maxWidth: 720 }}>
          <div className="prose">
            <p>Natharia is an independent publication. We are not owned by, funded by, or contractually obligated to any tool vendor, SaaS company, or advertising network. Our revenue comes primarily from affiliate partnerships, and we believe full transparency about how that works is non-negotiable.</p>

            <h2>How affiliate links work</h2>
            <p>Some links on natharia.com are affiliate links. When you click one of these links and subsequently purchase a product or subscribe to a service, we may receive a commission from the provider. <strong>This costs you nothing extra</strong> — the price you pay is the same whether you use our link or go directly.</p>

            <h2>How to identify affiliate links</h2>
            <p>Affiliate links on Natharia use the format <strong>/go/[tool-name]</strong> — for example, <strong>/go/make</strong> or <strong>/go/notion</strong>. If a URL starts with <strong>/go/</strong>, it is an affiliate link. We also include clear labels in our tool review pages and inline call-to-action boxes within articles.</p>

            <h2>Our editorial independence</h2>
            <p>Affiliate relationships <strong>never</strong> influence our editorial decisions. Here is how we ensure that:</p>
            <ul>
              <li><strong>We test first, monetise second.</strong> Every tool we review is paid for, used in real workflows for at least six weeks, and rated based on our honest experience — before we ever check if an affiliate programme exists.</li>
              <li><strong>Negative reviews stay published.</strong> If a tool scores poorly, the review goes live regardless of affiliate potential. We have published critical reviews of tools we could have earned commissions on.</li>
              <li><strong>Ratings are not for sale.</strong> No vendor can pay for a higher score, a more favourable comparison, or preferential placement.</li>
              <li><strong>We only recommend tools we genuinely believe in.</strong> If we wouldn't use it ourselves, we won't recommend it to you.</li>
            </ul>

            <h2>Why we use affiliate links</h2>
            <p>Running an independent publication takes time and money. Affiliate revenue allows us to:</p>
            <ul>
              <li>Keep all articles free to read — no paywall, ever.</li>
              <li>Maintain our six-week testing methodology without cutting corners.</li>
              <li>Publish the newsletter at no cost to subscribers.</li>
              <li>Avoid selling advertising space or sponsored content.</li>
            </ul>
            <p>When you use our affiliate links, you directly support independent, honest tech journalism. We appreciate it.</p>

            <h2>Questions?</h2>
            <p>If you have questions about our affiliate practices or want to verify whether a specific link is an affiliate link, reach out:</p>
            <p><strong>Natharia</strong><br />Email: aria@natharia.com<br />Location: Switzerland</p>
          </div>
        </div>
      </section>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════
// EXIT-INTENT NEWSLETTER POPUP
// Shows once per session when mouse leaves the top of viewport on blog posts.
// Fires popup_shown tracking event when rendered.
// ═══════════════════════════════════════════════════════════════════
function ExitIntentPopup({ onClose }) {
  const { t } = useApp();
  const [email, setEmail] = useS('');
  const [sent, setSent] = useS(false);
  const [submitting, setSubmitting] = useS(false);
  const [error, setError] = useS('');
  const [emailTouched, setEmailTouched] = useS(false);

  useE(() => {
    if (typeof trackFunnelEvent === 'function') {
      trackFunnelEvent('popup_shown', { status_code: null });
    }
    // Trap scroll while open
    document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = ''; };
  }, []);

  const onEmailChange = (e) => {
    setEmail(e.target.value);
    if (!emailTouched && e.target.value.length > 0) {
      setEmailTouched(true);
      if (typeof trackFunnelEvent === 'function') trackFunnelEvent('popup_email_entered');
    }
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    if (!email || submitting) return;
    if (typeof trackFunnelEvent === 'function') trackFunnelEvent('popup_submit_clicked');
    setSubmitting(true);
    setError('');
    try {
      const res = await fetch('/api/newsletter/subscribers', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email }),
      });
      if (res.ok) {
        if (typeof trackFunnelEvent === 'function') trackFunnelEvent('beehiiv_api_200');
        setSent(true);
        setTimeout(onClose, 2000);
      } else {
        if (typeof trackFunnelEvent === 'function') trackFunnelEvent('beehiiv_api_error', { status_code: res.status });
        setError('Something went wrong — try again.');
      }
    } catch {
      if (typeof trackFunnelEvent === 'function') trackFunnelEvent('beehiiv_api_error', { status_code: 0 });
      setError('Network error — try again.');
    } finally {
      setSubmitting(false);
    }
  };

  const overlayStyle = {
    position: 'fixed', inset: 0, zIndex: 9999,
    background: 'rgba(0,0,0,0.55)', display: 'flex',
    alignItems: 'center', justifyContent: 'center', padding: 20,
  };
  const cardStyle = {
    position: 'relative', background: 'var(--bg)', border: '1px solid var(--rule)',
    maxWidth: 520, width: '100%', padding: '48px 40px',
    boxShadow: '0 24px 64px rgba(0,0,0,0.18)',
  };
  const closeStyle = {
    position: 'absolute', top: 16, right: 20,
    background: 'none', border: 'none', cursor: 'pointer',
    fontSize: 20, color: 'var(--ink-50)', lineHeight: 1,
  };

  return (
    <div style={overlayStyle} onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div style={cardStyle}>
        <button style={closeStyle} onClick={onClose} aria-label="Close">✕</button>
        <p className="mono" style={{ fontSize: 10, color: 'var(--accent)', letterSpacing: '0.18em', marginBottom: 16 }}>
          — NATHARIA WEEKLY
        </p>
        <h2 className="display" style={{ fontSize: 'clamp(24px,4vw,36px)', fontWeight: 400, letterSpacing: '-0.02em', lineHeight: 1.1, marginBottom: 12 }}>
          Before you go — get the brief in your inbox.
        </h2>
        <p style={{ fontSize: 15, color: 'var(--ink-50)', lineHeight: 1.6, marginBottom: 28, fontFamily: 'var(--sans)' }}>
          One email per week. Honest AI tool reviews, real benchmarks, zero spam.
        </p>
        {sent ? (
          <p className="mono" style={{ fontSize: 13, color: 'var(--accent)', letterSpacing: '0.08em' }}>✓ You're in. See you Wednesday.</p>
        ) : (
          <form className="mail-row" onSubmit={onSubmit}>
            <input
              type="email"
              placeholder="your@email.com"
              value={email}
              onChange={onEmailChange}
              required
              autoFocus
              disabled={submitting}
            />
            <button type="submit" disabled={submitting}>
              {submitting ? '...' : 'Join →'}
            </button>
          </form>
        )}
        {error && <p className="mono" style={{ fontSize: 11, color: '#c44', marginTop: 8, letterSpacing: '0.08em' }}>{error}</p>}
        <p className="mono" style={{ fontSize: 10, color: 'var(--ink-30)', marginTop: 16, letterSpacing: '0.1em' }}>
          No spam. Unsubscribe any time.
        </p>
      </div>
    </div>
  );
}

// Hook: show popup once per session on exit intent (mouse leaves top of viewport)
function useExitIntent(enabled) {
  const [show, setShow] = useS(false);

  useE(() => {
    if (!enabled) return;
    try {
      if (sessionStorage.getItem('_nf_popup_dismissed')) return;
    } catch (_) {}

    let fired = false;
    const onMouseOut = (e) => {
      if (fired) return;
      if (e.clientY <= 5 && (!e.relatedTarget || e.relatedTarget === document.documentElement)) {
        fired = true;
        setShow(true);
      }
    };
    // Also show after 45 seconds of reading (time-on-page trigger as fallback)
    const timer = setTimeout(() => {
      if (fired) return;
      try { if (sessionStorage.getItem('_nf_popup_dismissed')) return; } catch (_) {}
      fired = true;
      setShow(true);
    }, 45000);

    document.addEventListener('mouseout', onMouseOut);
    return () => {
      document.removeEventListener('mouseout', onMouseOut);
      clearTimeout(timer);
    };
  }, [enabled]);

  const dismiss = () => {
    setShow(false);
    try { sessionStorage.setItem('_nf_popup_dismissed', '1'); } catch (_) {}
  };

  return [show, dismiss];
}

Object.assign(window, { HomePage, BlogPage, PostPage, ToolsPage, ToolPage, NewsletterPage, AboutPage, FieldGuidePage, PrivacyPolicyPage, TermsOfServicePage, AffiliateDisclosurePage, HeroA, HeroB, HeroC, ExitIntentPopup, useExitIntent });