// Support / Terms / Blog pages — share Nav, Footer, palette with qm-site.jsx.
// Routed via location.hash so all three live in one HTML file (kinder on assets).
// C, container, page, serif, btnPrimary, btnGhost, Nav, Footer are imported from qm-site.jsx (it sets them on window below).

const pagesC = window.C || {
  bg: '#0B0E1A', bgLight: '#111628', card: '#161B2E', cardAlt: '#1C2238',
  text: '#E8EAF6', textLight: '#9BA3C2', textMuted: '#5E6687',
  border: '#252D48', primary: '#7B6EF6', primaryLight: '#9D93FF',
  secondary: '#00D4FF', accent: '#B44EF6', success: '#34D399', warn: '#FBBF24',
};
const pagesContainer = { maxWidth: 1180, margin: '0 auto', padding: '0 32px' };
const pagesSerif = { fontFamily: 'Fraunces, serif' };
const pagesPage = {
  background: pagesC.bg, color: pagesC.text,
  fontFamily: 'Inter, system-ui, sans-serif', minHeight: '100vh',
};

// Mini Nav/Footer (self-contained so these pages don't need qm-site.jsx loaded)
function PagesNav({ current }) {
  const links = [
    { href: 'index.html#how', l: 'How it works' },
    { href: 'index.html#science', l: 'Science' },
    { href: 'index.html#pricing', l: 'Pricing' },
    { href: 'blog.html', l: 'Blog' },
    { href: 'support.html', l: 'Support' },
  ];
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(11,14,26,0.82)', backdropFilter: 'blur(14px)',
      borderBottom: `1px solid ${pagesC.border}`,
    }}>
      <div style={{ ...pagesContainer, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px 32px' }}>
        <a href="index.html" style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none', color: pagesC.text }}>
          <div style={{ width: 30, height: 30, borderRadius: 9,
            background: `conic-gradient(from 210deg, ${pagesC.primary}, ${pagesC.accent}, ${pagesC.secondary}, ${pagesC.primary})` }} />
          <span style={{ ...pagesSerif, fontSize: 18, fontWeight: 500, letterSpacing: -0.3 }}>Quantum Mind</span>
        </a>
        <div style={{ display: 'flex', alignItems: 'center', gap: 30, fontSize: 14, color: pagesC.textLight }}>
          {links.map(l => (
            <a key={l.href} href={l.href} style={{ color: 'inherit', textDecoration: 'none' }}>{l.l}</a>
          ))}
          <button style={{
            background: pagesC.primary, color: '#fff', border: 'none', borderRadius: 10,
            padding: '9px 16px', fontSize: 14, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
          }}>Get the app</button>
        </div>
      </div>
    </nav>
  );
}

function PagesFooter() {
  return (
    <footer style={{ padding: '60px 0 40px', borderTop: `1px solid ${pagesC.border}`, background: pagesC.bg, marginTop: 80 }}>
      <div className="qm-grid" style={{ ...pagesContainer, display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 40 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
            <div style={{ width: 28, height: 28, borderRadius: 8, background: `conic-gradient(from 210deg, ${pagesC.primary}, ${pagesC.accent}, ${pagesC.secondary}, ${pagesC.primary})` }} />
            <span style={{ ...pagesSerif, fontSize: 17, fontWeight: 500 }}>Quantum Mind</span>
          </div>
          <div style={{ fontSize: 13, color: pagesC.textMuted, lineHeight: 1.6, maxWidth: 280 }}>
            Personalized hypnotherapy for sleep, anxiety, and the stories you keep telling yourself.
          </div>
        </div>
        {[
          { t: 'Product', l: [['How it works', 'index.html#how'], ['Science', 'index.html#science'], ['Pricing', 'index.html#pricing'], ['Blog', '#blog']] },
          { t: 'Company', l: [['About', '#'], ['Press', '#'], ['Careers', '#'], ['Support', '#support']] },
          { t: 'Legal', l: [['Privacy', '#privacy'], ['Terms', '#terms'], ['Safety', '#safety'], ['Data export', '#data']] },
        ].map(g => (
          <div key={g.t}>
            <div style={{ fontSize: 12, color: pagesC.textMuted, letterSpacing: 1.4, textTransform: 'uppercase', marginBottom: 14, fontWeight: 500 }}>{g.t}</div>
            {g.l.map(([label, href]) => (
              <a key={label} href={href} style={{ display: 'block', fontSize: 14, color: pagesC.textLight, marginBottom: 10, textDecoration: 'none' }}>{label}</a>
            ))}
          </div>
        ))}
      </div>
      <div style={{ ...pagesContainer, borderTop: `1px solid ${pagesC.border}`, marginTop: 50, paddingTop: 24, display: 'flex', justifyContent: 'space-between', fontSize: 12, color: pagesC.textMuted }}>
        <span>© Quantum Mind App 2026. All rights reserved.</span>
        <span>Made with care · Not a substitute for medical care</span>
      </div>
    </footer>
  );
}

function PageHeader({ eyebrow, title, subtitle }) {
  return (
    <header style={{
      padding: '80px 0 50px', borderBottom: `1px solid ${pagesC.border}`,
      background: `radial-gradient(80% 60% at 20% 0%, rgba(123,110,246,0.12), transparent 70%),
                   radial-gradient(60% 50% at 90% 30%, rgba(0,212,255,0.08), transparent 60%)`,
    }}>
      <div style={pagesContainer}>
        {eyebrow && <div style={{ fontSize: 12, color: pagesC.secondary, letterSpacing: 2.2, textTransform: 'uppercase', marginBottom: 18, fontWeight: 500 }}>{eyebrow}</div>}
        <h1 style={{ ...pagesSerif, fontSize: 64, fontWeight: 400, lineHeight: 1.04, letterSpacing: -2.2, margin: 0, marginBottom: subtitle ? 20 : 0, maxWidth: 820 }}>{title}</h1>
        {subtitle && <p style={{ fontSize: 19, color: pagesC.textLight, lineHeight: 1.5, maxWidth: 680, margin: 0 }}>{subtitle}</p>}
      </div>
    </header>
  );
}

// ================================= SUPPORT =================================
function SupportPage() {
  const [q, setQ] = React.useState('');
  const categories = [
    { icon: '◎', t: 'Getting started', n: 8, d: 'Install, intake, and your first session.' },
    { icon: '♪', t: 'Sessions & audio', n: 12, d: 'Playback, voices, script editing, regenerating.' },
    { icon: '✦', t: 'Programs', n: 6, d: '14/21/28-day programs and progress tracking.' },
    { icon: '$', t: 'Billing & plans', n: 9, d: 'Subscriptions, rollover, refunds, receipts.' },
    { icon: '⎙', t: 'Your data', n: 7, d: 'Export, delete, and what we keep.' },
    { icon: '⚠', t: 'Safety & care', n: 5, d: 'When not to use the app. Crisis resources.' },
  ];
  const popular = [
    'Why does it take 45 seconds to generate a session?',
    'Can I change the voice after starting a session?',
    'What happens to unused sessions at the end of the month?',
    'How do I cancel or pause my subscription?',
    'Is my intake data used to train AI models? (No.)',
    'The session felt too long — can I shorten it?',
    'How do I export my session scripts as PDF?',
    'What if I fall asleep mid-session?',
  ];
  return (
    <div style={pagesPage}>
      <PagesNav />
      <PageHeader
        eyebrow="Support"
        title="How can we help you rest easier?"
        subtitle="Answers, guides, and a real human to email when the docs don't cut it."
      />

      {/* Search */}
      <div style={{ ...pagesContainer, padding: '40px 32px' }}>
        <div style={{
          background: pagesC.card, border: `1px solid ${pagesC.border}`,
          borderRadius: 14, padding: '4px 4px 4px 20px', display: 'flex', alignItems: 'center', gap: 12,
          maxWidth: 680,
        }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={pagesC.textMuted} strokeWidth="2"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
          <input
            value={q}
            onChange={e => setQ(e.target.value)}
            placeholder="Search — e.g. &ldquo;how do I cancel&rdquo;"
            style={{
              flex: 1, background: 'transparent', border: 'none', outline: 'none',
              color: pagesC.text, fontSize: 15, padding: '14px 0', fontFamily: 'inherit',
            }}
          />
          <button style={{
            background: pagesC.primary, color: '#fff', border: 'none', borderRadius: 10,
            padding: '10px 20px', fontSize: 14, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
          }}>Search</button>
        </div>
      </div>

      {/* Categories */}
      <section style={{ ...pagesContainer, padding: '20px 32px 60px' }}>
        <div style={{ fontSize: 12, color: pagesC.textMuted, letterSpacing: 2, textTransform: 'uppercase', marginBottom: 22, fontWeight: 500 }}>Browse by topic</div>
        <div className="qm-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {categories.map(c => (
            <a key={c.t} href="#" style={{
              background: pagesC.card, border: `1px solid ${pagesC.border}`, borderRadius: 16,
              padding: 24, textDecoration: 'none', color: 'inherit', display: 'block',
              transition: 'border-color .2s',
            }}>
              <div style={{ fontSize: 24, color: pagesC.secondary, marginBottom: 14 }}>{c.icon}</div>
              <div style={{ ...pagesSerif, fontSize: 20, fontWeight: 500, color: pagesC.text, marginBottom: 4, letterSpacing: -0.3 }}>{c.t}</div>
              <div style={{ fontSize: 14, color: pagesC.textLight, lineHeight: 1.5, marginBottom: 12 }}>{c.d}</div>
              <div style={{ fontSize: 12, color: pagesC.textMuted, fontFamily: 'JetBrains Mono, monospace' }}>{c.n} articles →</div>
            </a>
          ))}
        </div>
      </section>

      {/* Popular */}
      <section style={{ ...pagesContainer, padding: '40px 32px' }}>
        <div style={{ fontSize: 12, color: pagesC.textMuted, letterSpacing: 2, textTransform: 'uppercase', marginBottom: 22, fontWeight: 500 }}>Popular questions</div>
        <div style={{ maxWidth: 780 }}>
          {popular.map((p, i) => (
            <a key={i} href="#" style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              borderBottom: `1px solid ${pagesC.border}`, padding: '18px 4px',
              fontSize: 15, color: pagesC.text, textDecoration: 'none',
            }}>
              <span>{p}</span>
              <span style={{ color: pagesC.textMuted, fontSize: 18 }}>→</span>
            </a>
          ))}
        </div>
      </section>

      {/* Contact */}
      <section style={{ ...pagesContainer, padding: '60px 32px 40px' }}>
        <div style={{
          background: pagesC.card, border: `1px solid ${pagesC.border}`, borderRadius: 20, padding: 40,
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'center',
        }}>
          <div>
            <div style={{ fontSize: 12, color: pagesC.secondary, letterSpacing: 2, textTransform: 'uppercase', marginBottom: 14, fontWeight: 500 }}>Still stuck?</div>
            <h3 style={{ ...pagesSerif, fontSize: 32, fontWeight: 400, letterSpacing: -0.8, margin: 0, marginBottom: 12 }}>Write to a real person.</h3>
            <p style={{ fontSize: 15, color: pagesC.textLight, lineHeight: 1.55, margin: 0 }}>
              We reply in under 24 hours on weekdays. For crisis support, we'll point you to local resources — Quantum Mind isn't an emergency service.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <a href="mailto:support@quantummind.app" style={{
              background: pagesC.primary, color: '#fff', padding: '16px 22px', borderRadius: 12,
              fontSize: 15, fontWeight: 600, textDecoration: 'none', textAlign: 'center',
            }}>support@quantummind.app</a>
            <a href="#" style={{
              border: `1px solid ${pagesC.border}`, color: pagesC.text, padding: '16px 22px', borderRadius: 12,
              fontSize: 14, textDecoration: 'none', textAlign: 'center',
            }}>Open in-app chat</a>
            <div style={{ fontSize: 12, color: pagesC.textMuted, textAlign: 'center', marginTop: 8 }}>
              Crisis? In the US, text HOME to 741741 or call/text 988.
            </div>
          </div>
        </div>
      </section>

      <PagesFooter />
    </div>
  );
}

// ================================= TERMS =================================
function TermsPage() {
  const sections = [
    { n: '1', t: 'Who we are', p: [
      'Quantum Mind is operated by Quantum Mind, Inc. ("we", "us"). By installing the app or using our website, you agree to these Terms of Service.',
      'If you do not agree, please don\'t use the Service. These terms were last updated on 1 January 2026.',
    ]},
    { n: '2', t: 'What the Service is — and isn\'t', p: [
      'Quantum Mind generates personalized hypnotherapy sessions using AI. Sessions are composed from your intake answers using evidence-based frameworks, then voiced with licensed TTS technology.',
      'Quantum Mind is a wellness tool, not medical care. It is not a substitute for therapy, medication, or professional mental health treatment. If you are in crisis, please contact a clinician or a local helpline.',
      'Do not use Quantum Mind while driving, operating heavy machinery, or in any situation where reduced alertness could cause harm.',
    ]},
    { n: '3', t: 'Your account', p: [
      'You are responsible for keeping your login credentials secure and for all activity on your account. Tell us immediately at support@quantummind.app if you suspect unauthorized access.',
      'You must be at least 18 years old to use the Service.',
    ]},
    { n: '4', t: 'Subscriptions and billing', p: [
      'Session packs are sold on a monthly subscription. Unused sessions roll over for up to 90 days, after which they expire.',
      'You can cancel any time from your account settings or the App Store / Play Store. Cancellation takes effect at the end of your current billing period. We do not pro-rate mid-period.',
      'Refunds are issued at our discretion within 14 days of purchase if you have used fewer than 2 sessions. App Store purchases follow Apple/Google refund policy.',
    ]},
    { n: '5', t: 'Your content', p: [
      'Your intake answers, session scripts, mood ratings, and any notes you create are yours. We store them on your behalf so you can access them across devices.',
      'We do not sell your content. We do not use it to train third-party AI models. We may use aggregated, de-identified data to improve the Service.',
      'You can export or delete all of your data from Settings → Your data at any time.',
    ]},
    { n: '6', t: 'Acceptable use', p: [
      'You agree not to: reverse-engineer the Service; share your account with others; use the Service to impersonate a licensed therapist; publish generated audio without permission; abuse support staff.',
      'We may suspend or terminate accounts that violate these rules.',
    ]},
    { n: '7', t: 'Third-party services', p: [
      'Voice generation is provided by ElevenLabs under their Terms of Service. Script generation uses Anthropic\'s Claude under theirs. Payments are processed by Stripe, Apple, and Google. Your use of the Service is also subject to their terms where applicable.',
    ]},
    { n: '8', t: 'Disclaimers', p: [
      'The Service is provided "as is." We do not guarantee specific results. Hypnotherapy affects people differently, and your experience may vary.',
      'We make no medical claims about the Service. Any statements on our website or in the app describe user experiences, not clinical outcomes.',
    ]},
    { n: '9', t: 'Limitation of liability', p: [
      'To the maximum extent permitted by law, our liability for any claim arising from the Service is limited to the amount you paid us in the 12 months before the claim. We are not liable for indirect, incidental, or consequential damages.',
    ]},
    { n: '10', t: 'Changes to these terms', p: [
      'We may update these terms occasionally. Material changes will be announced via email and in the app at least 14 days before taking effect. Continued use of the Service after the effective date means you accept the new terms.',
    ]},
    { n: '11', t: 'Contact', p: [
      'Questions? Write to legal@quantummind.app. For product support, support@quantummind.app.',
    ]},
  ];
  return (
    <div style={pagesPage}>
      <PagesNav />
      <PageHeader
        eyebrow="Legal · Effective 1 Jan 2026"
        title="Terms of Service."
        subtitle="Plain language, as much as law allows. The short version: use the app kindly, don't use it in a crisis, your data stays yours."
      />

      <div className="qm-grid" style={{ ...pagesContainer, padding: '60px 32px', display: 'grid', gridTemplateColumns: '220px 1fr', gap: 60 }}>
        {/* Sticky TOC */}
        <aside style={{ position: 'sticky', top: 100, alignSelf: 'start', maxHeight: 'calc(100vh - 120px)', overflowY: 'auto' }}>
          <div style={{ fontSize: 11, color: pagesC.textMuted, letterSpacing: 2, textTransform: 'uppercase', marginBottom: 14, fontWeight: 500 }}>Contents</div>
          {sections.map(s => (
            <a key={s.n} href={`#s${s.n}`} style={{
              display: 'block', fontSize: 13, color: pagesC.textLight, padding: '6px 0',
              textDecoration: 'none', borderLeft: `2px solid transparent`, paddingLeft: 10,
              marginLeft: -10,
            }}>
              <span style={{ color: pagesC.textMuted, marginRight: 8, fontFamily: 'JetBrains Mono, monospace' }}>{s.n}</span>
              {s.t}
            </a>
          ))}
        </aside>

        <article style={{ maxWidth: 680 }}>
          {sections.map(s => (
            <section key={s.n} id={`s${s.n}`} style={{ marginBottom: 48 }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 16 }}>
                <span style={{ ...pagesSerif, fontSize: 22, fontWeight: 400, color: pagesC.secondary, fontVariantNumeric: 'tabular-nums', minWidth: 28 }}>{s.n}.</span>
                <h2 style={{ ...pagesSerif, fontSize: 28, fontWeight: 400, letterSpacing: -0.6, margin: 0 }}>{s.t}</h2>
              </div>
              {s.p.map((para, i) => (
                <p key={i} style={{ fontSize: 15, color: pagesC.textLight, lineHeight: 1.7, margin: '0 0 14px 0', maxWidth: 640 }}>{para}</p>
              ))}
            </section>
          ))}
        </article>
      </div>

      <PagesFooter />
    </div>
  );
}

// ================================= BLOG =================================
const BLOG_POSTS = [
  { slug: 'sleep-stories-rewrite', cat: 'Sleep', date: 'Apr 18, 2026', read: '7 min', author: 'Maya Okonkwo, Clinical Director',
    title: 'Why your bedtime story should be written tonight, not last year.',
    dek: 'Generic sleep meditations don\'t work because the content your brain needs to let go of is specific. Specificity is the whole point.',
    tags: ['sleep', 'hypnotherapy'] },
  { slug: 'ericksonian-vs-mindfulness', cat: 'Science', date: 'Apr 12, 2026', read: '9 min', author: 'Dr. Tomás Reyes',
    title: 'Ericksonian hypnotherapy vs. mindfulness: what the research actually says.',
    dek: 'Both work. But they work on different things, through different mechanisms. Here\'s how to tell which one you want tonight.',
    tags: ['science', 'research'] },
  { slug: 'anxiety-loop', cat: 'Anxiety', date: 'Apr 04, 2026', read: '6 min',  author: 'Maya Okonkwo, Clinical Director',
    title: 'The anxiety loop at 3 a.m., and how to interrupt it gently.',
    dek: 'The middle-of-the-night spiral isn\'t fixed by pushing back. It\'s fixed by swapping what your mind reaches for next.',
    tags: ['anxiety', 'sleep'] },
  { slug: 'voice-matters', cat: 'Craft', date: 'Mar 27, 2026', read: '5 min',  author: 'Sana Brar, Head of Product',
    title: 'Why the voice matters more than the words.',
    dek: 'Pacing, breath, and micro-pauses carry more therapeutic weight than metaphor choice. Here\'s how we tune them.',
    tags: ['craft', 'voice'] },
  { slug: 'what-we-dont-do', cat: 'Ethics', date: 'Mar 20, 2026', read: '4 min',  author: 'Sana Brar, Head of Product',
    title: 'What Quantum Mind does not do (and won\'t).',
    dek: 'No dark patterns, no streaks that shame you, no AI-generated voices pretending to be real therapists. Here\'s where we draw our lines.',
    tags: ['ethics', 'product'] },
  { slug: 'habits-confidence', cat: 'Confidence', date: 'Mar 13, 2026', read: '8 min',  author: 'Dr. Tomás Reyes',
    title: 'Confidence isn\'t a feeling. It\'s a rehearsed identity.',
    dek: 'Ericksonian technique for practicing the version of you who already handled this, until your brain catches up.',
    tags: ['confidence', 'identity'] },
];

function BlogIndexPage() {
  const featured = BLOG_POSTS[0];
  const rest = BLOG_POSTS.slice(1);
  return (
    <div style={pagesPage}>
      <PagesNav />
      <PageHeader
        eyebrow="The Quantum Mind journal"
        title="On sleep, hypnotherapy, and the quiet craft of a good night."
        subtitle="Essays from our clinical team, craft notes from the people who build the app, and the occasional honest answer to a question you didn't want to ask out loud."
      />

      {/* Category bar */}
      <div style={{ ...pagesContainer, padding: '28px 32px', borderBottom: `1px solid ${pagesC.border}` }}>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          {['All', 'Sleep', 'Anxiety', 'Confidence', 'Science', 'Craft', 'Ethics'].map((c, i) => (
            <a key={c} href="#" style={{
              padding: '7px 14px', borderRadius: 999, fontSize: 13, textDecoration: 'none',
              background: i === 0 ? pagesC.primary : 'transparent',
              color: i === 0 ? '#fff' : pagesC.textLight,
              border: `1px solid ${i === 0 ? pagesC.primary : pagesC.border}`,
            }}>{c}</a>
          ))}
        </div>
      </div>

      {/* Featured */}
      <section style={{ ...pagesContainer, padding: '60px 32px 40px' }}>
        <a href={`#post/${featured.slug}`} style={{
          display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 40, alignItems: 'center',
          textDecoration: 'none', color: 'inherit',
        }}>
          <div>
            <div style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 12, color: pagesC.secondary, letterSpacing: 1.8, textTransform: 'uppercase', marginBottom: 18, fontWeight: 500 }}>
              <span>★ Featured</span>
              <span style={{ color: pagesC.textMuted }}>·</span>
              <span style={{ color: pagesC.textMuted, letterSpacing: 1.4 }}>{featured.cat}</span>
            </div>
            <h2 style={{ ...pagesSerif, fontSize: 48, fontWeight: 400, letterSpacing: -1.4, lineHeight: 1.08, margin: 0, marginBottom: 18 }}>{featured.title}</h2>
            <p style={{ fontSize: 17, color: pagesC.textLight, lineHeight: 1.55, margin: 0, marginBottom: 20, maxWidth: 520 }}>{featured.dek}</p>
            <div style={{ fontSize: 13, color: pagesC.textMuted, fontFamily: 'JetBrains Mono, monospace' }}>
              {featured.author} · {featured.date} · {featured.read} read
            </div>
          </div>
          <div style={{
            aspectRatio: '4 / 3', borderRadius: 18,
            background: `radial-gradient(60% 50% at 30% 40%, ${pagesC.primary}80, transparent 70%),
                         radial-gradient(50% 50% at 80% 60%, ${pagesC.secondary}60, transparent 70%),
                         linear-gradient(135deg, ${pagesC.cardAlt}, ${pagesC.card})`,
            border: `1px solid ${pagesC.border}`, position: 'relative', overflow: 'hidden',
          }}>
            <div style={{
              position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
              ...pagesSerif, fontSize: 72, fontWeight: 300, color: '#fff', opacity: 0.22, letterSpacing: -2,
            }}>Sleep</div>
          </div>
        </a>
      </section>

      {/* Grid */}
      <section style={{ ...pagesContainer, padding: '40px 32px 80px' }}>
        <div className="qm-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28 }}>
          {rest.map(p => {
            // A different colorway per post for visual rhythm
            const hues = [
              [pagesC.secondary, pagesC.primary],
              [pagesC.accent, pagesC.primary],
              [pagesC.primary, pagesC.secondary],
              [pagesC.secondary, pagesC.accent],
              [pagesC.primary, pagesC.accent],
            ];
            const h = hues[BLOG_POSTS.indexOf(p) % hues.length];
            return (
              <a key={p.slug} href={`#post/${p.slug}`} style={{
                textDecoration: 'none', color: 'inherit', display: 'flex', flexDirection: 'column', gap: 14,
              }}>
                <div style={{
                  aspectRatio: '4 / 3', borderRadius: 14,
                  background: `radial-gradient(60% 60% at 30% 40%, ${h[0]}60, transparent 70%),
                               radial-gradient(50% 50% at 80% 70%, ${h[1]}50, transparent 70%),
                               linear-gradient(135deg, ${pagesC.cardAlt}, ${pagesC.card})`,
                  border: `1px solid ${pagesC.border}`,
                }}/>
                <div style={{ fontSize: 11, color: pagesC.textMuted, letterSpacing: 1.6, textTransform: 'uppercase', fontWeight: 500 }}>{p.cat}</div>
                <h3 style={{ ...pagesSerif, fontSize: 22, fontWeight: 500, letterSpacing: -0.4, lineHeight: 1.2, margin: 0, color: pagesC.text }}>{p.title}</h3>
                <p style={{ fontSize: 14, color: pagesC.textLight, lineHeight: 1.55, margin: 0 }}>{p.dek}</p>
                <div style={{ fontSize: 12, color: pagesC.textMuted, fontFamily: 'JetBrains Mono, monospace', marginTop: 'auto' }}>
                  {p.date} · {p.read} read
                </div>
              </a>
            );
          })}
        </div>
      </section>

      {/* Subscribe */}
      <section style={{ ...pagesContainer, padding: '20px 32px 40px' }}>
        <div style={{
          background: `linear-gradient(135deg, rgba(123,110,246,0.12), rgba(0,212,255,0.06))`,
          border: `1px solid ${pagesC.border}`, borderRadius: 20, padding: 40, textAlign: 'center',
        }}>
          <div style={{ fontSize: 12, color: pagesC.secondary, letterSpacing: 2, textTransform: 'uppercase', marginBottom: 14, fontWeight: 500 }}>Once a week, or when we have something worth saying</div>
          <h3 style={{ ...pagesSerif, fontSize: 34, fontWeight: 400, letterSpacing: -0.9, margin: 0, marginBottom: 22, maxWidth: 520, marginLeft: 'auto', marginRight: 'auto' }}>Get quiet essays in your inbox.</h3>
          <form style={{ display: 'flex', gap: 8, maxWidth: 440, margin: '0 auto' }} onSubmit={e => e.preventDefault()}>
            <input placeholder="you@example.com" style={{
              flex: 1, background: pagesC.card, border: `1px solid ${pagesC.border}`,
              borderRadius: 10, padding: '13px 16px', color: pagesC.text, fontSize: 14, fontFamily: 'inherit', outline: 'none',
            }}/>
            <button style={{
              background: pagesC.primary, color: '#fff', border: 'none', borderRadius: 10,
              padding: '13px 22px', fontSize: 14, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
            }}>Subscribe</button>
          </form>
        </div>
      </section>

      <PagesFooter />
    </div>
  );
}

function BlogPostPage({ slug }) {
  const post = BLOG_POSTS.find(p => p.slug === slug) || BLOG_POSTS[0];
  return (
    <div style={pagesPage}>
      <PagesNav />

      <article style={{ ...pagesContainer, padding: '80px 32px 40px', maxWidth: 760 }}>
        <a href="blog.html" style={{ fontSize: 13, color: pagesC.textMuted, textDecoration: 'none', marginBottom: 28, display: 'inline-block' }}>← All posts</a>
        <div style={{ fontSize: 12, color: pagesC.secondary, letterSpacing: 2, textTransform: 'uppercase', marginBottom: 18, fontWeight: 500 }}>{post.cat}</div>
        <h1 style={{ ...pagesSerif, fontSize: 52, fontWeight: 400, letterSpacing: -1.6, lineHeight: 1.08, margin: 0, marginBottom: 22 }}>{post.title}</h1>
        <p style={{ fontSize: 20, color: pagesC.textLight, lineHeight: 1.5, margin: 0, marginBottom: 32 }}>{post.dek}</p>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '20px 0', borderTop: `1px solid ${pagesC.border}`, borderBottom: `1px solid ${pagesC.border}` }}>
          <div style={{
            width: 42, height: 42, borderRadius: 21, background: pagesC.primary, color: '#fff',
            display: 'flex', alignItems: 'center', justifyContent: 'center', ...pagesSerif, fontSize: 17, fontWeight: 500,
          }}>{post.author[0]}</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14, fontWeight: 500 }}>{post.author}</div>
            <div style={{ fontSize: 12, color: pagesC.textMuted }}>{post.date} · {post.read} read</div>
          </div>
        </div>

        <div style={{ fontSize: 17, color: pagesC.text, lineHeight: 1.7, marginTop: 40 }}>
          <p style={{ margin: '0 0 22px' }}>A generic hypnotherapy recording is a stranger reading a letter addressed to no one in particular. It can be beautifully written. It can be read by a voice you love. It will still sound slightly past you, because it wasn't written <em>for</em> you.</p>
          <p style={{ margin: '0 0 22px' }}>The thing your mind won't let go of tonight is specific. It has a name, a timestamp, a person's voice in it. Good hypnotherapy meets that specificity — names it, gently disarms it, replaces it with something softer and just as specific.</p>
          <h2 style={{ ...pagesSerif, fontSize: 30, fontWeight: 500, letterSpacing: -0.6, margin: '44px 0 16px' }}>What the research says</h2>
          <p style={{ margin: '0 0 22px' }}>Hypnotherapy is recognized by the American Psychological Association as a focused attentional state with measurable effects on sleep onset, pain, and anxiety. The effect sizes are largest when the content is personal and the voice is consistent — two things traditional "one recording for everyone" apps cannot provide.</p>
          <blockquote style={{
            margin: '32px 0', paddingLeft: 20, borderLeft: `2px solid ${pagesC.secondary}`,
            ...pagesSerif, fontSize: 22, fontWeight: 400, fontStyle: 'italic', color: pagesC.textLight, lineHeight: 1.4,
          }}>"Specificity is not a luxury in this work. It's the active ingredient."</blockquote>
          <p style={{ margin: '0 0 22px' }}>That's why we built Quantum Mind to compose every session from your intake — so the stories your brain reaches for have a better version waiting for them.</p>
          <h2 style={{ ...pagesSerif, fontSize: 30, fontWeight: 500, letterSpacing: -0.6, margin: '44px 0 16px' }}>Practical tonight</h2>
          <p style={{ margin: '0 0 22px' }}>If you're not using the app yet: before you lie down, write one sentence — just one — about the specific thing your mind is circling. Leave the paper next to the bed. It sounds small. It isn't.</p>
          <p style={{ margin: '0 0 22px' }}>If you are: open intake, answer in your own words, and press play. Leave the lights low. Let it work.</p>
        </div>

        {/* Tags */}
        <div style={{ marginTop: 48, paddingTop: 28, borderTop: `1px solid ${pagesC.border}`, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          {post.tags.map(t => (
            <span key={t} style={{
              padding: '6px 12px', borderRadius: 999, fontSize: 12,
              background: pagesC.card, border: `1px solid ${pagesC.border}`, color: pagesC.textLight,
            }}>#{t}</span>
          ))}
        </div>
      </article>

      {/* Related */}
      <section style={{ ...pagesContainer, padding: '60px 32px 40px', borderTop: `1px solid ${pagesC.border}`, marginTop: 60 }}>
        <div style={{ fontSize: 12, color: pagesC.textMuted, letterSpacing: 2, textTransform: 'uppercase', marginBottom: 20, fontWeight: 500 }}>Keep reading</div>
        <div className="qm-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {BLOG_POSTS.filter(p => p.slug !== slug).slice(0, 3).map(p => (
            <a key={p.slug} href={`#post/${p.slug}`} style={{
              background: pagesC.card, border: `1px solid ${pagesC.border}`, borderRadius: 14, padding: 22,
              textDecoration: 'none', color: 'inherit',
            }}>
              <div style={{ fontSize: 11, color: pagesC.textMuted, letterSpacing: 1.4, textTransform: 'uppercase', marginBottom: 10, fontWeight: 500 }}>{p.cat}</div>
              <div style={{ ...pagesSerif, fontSize: 18, fontWeight: 500, letterSpacing: -0.3, lineHeight: 1.25, color: pagesC.text, marginBottom: 10 }}>{p.title}</div>
              <div style={{ fontSize: 12, color: pagesC.textMuted, fontFamily: 'JetBrains Mono, monospace' }}>{p.read} read</div>
            </a>
          ))}
        </div>
      </section>

      <PagesFooter />
    </div>
  );
}

// ================================= PRIVACY =================================
function PrivacyPage() {
  const sections = [
    { n: '1', t: 'The short version', p: [
      'We collect the minimum we need to generate your sessions and keep your account working. We do not sell your data. We do not use your intake, scripts, or mood notes to train third-party AI models. You can export or delete everything from Settings → Your data at any time.',
      'This policy was last updated on 1 January 2026.',
    ]},
    { n: '2', t: 'What we collect', p: [
      'Account data: email, device ID, authentication tokens. Required to log you in and sync across devices.',
      'Intake answers: the free-text responses and mood ratings you provide before each session. Stored so we can compose scripts for you.',
      'Generated content: the hypnotherapy scripts, audio files, and session metadata we create on your behalf.',
      'Usage data: which screens you open, session completion, feature usage. Aggregated and de-identified. Used to improve the app.',
      'Device data: OS version, app version, crash logs. Used for stability and support.',
      'Payment data: handled by Stripe, Apple, or Google. We never see your card number.',
    ]},
    { n: '3', t: 'What we do not collect', p: [
      'We do not access your microphone, camera, contacts, location, photos, or health data. The app does not need them.',
      'We do not track you across other apps or websites. There are no third-party ad SDKs in Quantum Mind.',
    ]},
    { n: '4', t: 'How we use your data', p: [
      'To generate your sessions. Your intake answers are sent to our script-generation service (Anthropic Claude) and the resulting script is sent to our voice service (ElevenLabs) to produce audio.',
      'To keep your account working. Authentication, sync, receipts, support.',
      'To improve the product. Aggregated, de-identified usage patterns help us fix what\'s broken and build what\'s missing.',
      'We do not use your personal content — intake answers, scripts, mood notes — for model training, advertising, or resale.',
    ]},
    { n: '5', t: 'Third parties who help run the Service', p: [
      'Anthropic (Claude) — generates your session scripts from your intake. Zero-retention: prompts and outputs are not stored on their servers and are not used to train their models.',
      'ElevenLabs — converts scripts to audio. Audio is generated on-demand; we cache the resulting file on our servers for your playback.',
      'Stripe, Apple, Google — process payments. Subject to their respective privacy policies.',
      'Cloudflare — CDN and DDoS protection. Sees request metadata (IP, user agent) but not the content of your sessions.',
      'Sentry — crash reporting. Anonymized stack traces only.',
    ]},
    { n: '6', t: 'Where your data lives', p: [
      'Account and content data is stored in the EU (Frankfurt) and US (Virginia), encrypted at rest with AES-256 and in transit with TLS 1.3.',
      'You can request a region-specific copy of your data via support@quantummind.app.',
    ]},
    { n: '7', t: 'How long we keep it', p: [
      'Active accounts: for as long as your account is active.',
      'Deleted accounts: all personal content is removed within 30 days of deletion. Backups are purged within 90 days.',
      'Inactive accounts: if you haven\'t opened the app in 24 months, we\'ll email you before deleting your content.',
      'Legal holds: we may retain limited data longer when required by law.',
    ]},
    { n: '8', t: 'Your rights', p: [
      'Access — see all data we hold about you from Settings → Your data.',
      'Export — download your intake, scripts, and session history as a ZIP of JSON + MP3.',
      'Correction — edit any intake answer from the app at any time.',
      'Deletion — permanently delete your account and all associated content. Takes effect within 30 days.',
      'Objection & restriction — tell us to stop specific processing. Write to privacy@quantummind.app.',
      'If you are in the EU/UK, these rights are protected by GDPR. If you are in California, the CCPA applies. Either way, we extend them to everyone.',
    ]},
    { n: '9', t: 'Children', p: [
      'Quantum Mind is not intended for anyone under 18. We do not knowingly collect data from minors. If you believe a minor has created an account, write to privacy@quantummind.app and we will delete it.',
    ]},
    { n: '10', t: 'Security', p: [
      'Encryption at rest (AES-256) and in transit (TLS 1.3). Access to production systems is restricted to a small on-call team with hardware 2FA.',
      'We run quarterly external security audits. If you discover a vulnerability, please report it to security@quantummind.app — we operate a coordinated disclosure program.',
      'No system is perfectly secure. In the unlikely event of a breach affecting your data, we will notify you within 72 hours.',
    ]},
    { n: '11', t: 'Changes to this policy', p: [
      'Material changes will be announced via email and in the app at least 14 days before taking effect. Minor wording fixes are published with a dated changelog at the top of this page.',
    ]},
    { n: '12', t: 'Contact', p: [
      'For privacy questions: privacy@quantummind.app.',
      'Data Protection Officer: dpo@quantummind.app.',
      'EU representative (under Art. 27 GDPR): listed in the app at Settings → Legal → EU representative.',
    ]},
  ];
  return (
    <div style={pagesPage}>
      <PagesNav />
      <PageHeader
        eyebrow="Legal · Effective 1 Jan 2026"
        title="Privacy Policy."
        subtitle="Plain language. We collect the minimum, we don\u2019t sell it, we don\u2019t use your content to train third-party AI. Here\u2019s the detail."
      />

      <div className="qm-grid" style={{ ...pagesContainer, padding: '60px 32px', display: 'grid', gridTemplateColumns: '220px 1fr', gap: 60 }}>
        <aside style={{ position: 'sticky', top: 100, alignSelf: 'start', maxHeight: 'calc(100vh - 120px)', overflowY: 'auto' }}>
          <div style={{ fontSize: 11, color: pagesC.textMuted, letterSpacing: 2, textTransform: 'uppercase', marginBottom: 14, fontWeight: 500 }}>Contents</div>
          {sections.map(s => (
            <a key={s.n} href={`#privacy-s${s.n}`} style={{
              display: 'block', fontSize: 13, color: pagesC.textLight, padding: '6px 0',
              textDecoration: 'none', paddingLeft: 10, marginLeft: -10,
            }}>
              <span style={{ color: pagesC.textMuted, marginRight: 8, fontFamily: 'JetBrains Mono, monospace' }}>{s.n}</span>
              {s.t}
            </a>
          ))}
          <div style={{ marginTop: 28, padding: 16, background: pagesC.card, border: `1px solid ${pagesC.border}`, borderRadius: 12 }}>
            <div style={{ fontSize: 11, color: pagesC.textMuted, letterSpacing: 1.6, textTransform: 'uppercase', marginBottom: 8, fontWeight: 500 }}>Related</div>
            <a href="terms.html" style={{ display: 'block', fontSize: 13, color: pagesC.textLight, textDecoration: 'none', marginBottom: 6 }}>→ Terms of Service</a>
            <a href="support.html" style={{ display: 'block', fontSize: 13, color: pagesC.textLight, textDecoration: 'none' }}>→ Data export help</a>
          </div>
        </aside>

        <article style={{ maxWidth: 680 }}>
          {sections.map(s => (
            <section key={s.n} id={`privacy-s${s.n}`} style={{ marginBottom: 48 }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 16 }}>
                <span style={{ ...pagesSerif, fontSize: 22, fontWeight: 400, color: pagesC.secondary, fontVariantNumeric: 'tabular-nums', minWidth: 28 }}>{s.n}.</span>
                <h2 style={{ ...pagesSerif, fontSize: 28, fontWeight: 400, letterSpacing: -0.6, margin: 0 }}>{s.t}</h2>
              </div>
              {s.p.map((para, i) => (
                <p key={i} style={{ fontSize: 15, color: pagesC.textLight, lineHeight: 1.7, margin: '0 0 14px 0', maxWidth: 640 }}>{para}</p>
              ))}
            </section>
          ))}
        </article>
      </div>

      <PagesFooter />
    </div>
  );
}

// ================================= ROUTER =================================
function PagesRouter() {
  const [hash, setHash] = React.useState(window.location.hash || '#support');
  React.useEffect(() => {
    const onHash = () => {
      setHash(window.location.hash || '#support');
      window.scrollTo(0, 0);
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  const h = (hash || '').toLowerCase();
  if (h.startsWith('#post/')) return <BlogPostPage slug={h.slice(6)} />;
  if (h.startsWith('#blog')) return <BlogIndexPage />;
  if (h.startsWith('#privacy') || h.startsWith('#data')) return <PrivacyPage />;
  if (h.startsWith('#terms') || h.startsWith('#safety')) return <TermsPage />;
  return <SupportPage />;
}

ReactDOM.createRoot(document.getElementById('root')).render(<PagesRouter />);