// Quantum Mind website — 3 hero directions + full page flow for the winner.
// Reuses QMProvider + DeepScreenSwitch for the in-hero phone mockup.
// Palette locked to qm-deep.jsx: indigo #7B6EF6 · cyan #00D4FF · bg #0B0E1A.

const 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',
};

// Small "fake phone" wrapper that embeds the app using the Deep screen switch.
// Independently-scoped: each phone owns its QMProvider so state doesn't leak.
function PhoneEmbed({ screen = 'audio', audioState = 'ready', width = 260 }) {
  const scale = width / 300;
  return (
    <div style={{
      width, height: 620 * scale, position: 'relative',
      transformOrigin: 'top left',
    }}>
      <div style={{
        width: 300, height: 620, transform: `scale(${scale})`, transformOrigin: 'top left',
        position: 'absolute', top: 0, left: 0,
      }}>
        <QMProvider>
          <div style={{
            width: 300, height: 620, position: 'relative',
            borderRadius: 42, overflow: 'hidden', background: '#000',
            boxShadow: '0 30px 60px -20px rgba(0,0,0,0.5), 0 0 0 8px #15171c, 0 0 0 9px #2a2e38',
          }}>
            <div style={{
              position: 'absolute', top: 0, left: 0, right: 0, height: 44, zIndex: 50,
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              padding: '0 28px', pointerEvents: 'none', color: '#fff', fontSize: 13, fontWeight: 600,
            }}>
              <span>9:41</span>
              <div style={{ display: 'flex', gap: 4 }}>
                <svg width="22" height="11" viewBox="0 0 22 11"><rect x="0.5" y="0.5" width="18" height="10" rx="2.5" stroke="#fff" strokeOpacity="0.4" fill="none"/><rect x="2" y="2" width="15" height="7" rx="1.5" fill="#fff"/></svg>
              </div>
            </div>
            <div style={{
              position: 'absolute', top: 10, left: '50%', transform: 'translateX(-50%)',
              width: 100, height: 28, borderRadius: 18, background: '#000', zIndex: 60,
            }} />
            <InitScreen screen={screen} audioState={audioState} />
            <DeepScreenSwitch />
            <div style={{
              position: 'absolute', bottom: 7, left: '50%', transform: 'translateX(-50%)',
              width: 120, height: 4, borderRadius: 2, background: '#fff', opacity: 0.85, zIndex: 50,
            }} />
          </div>
        </QMProvider>
      </div>
    </div>
  );
}

function InitScreen({ screen, audioState }) {
  const qm = useQM();
  React.useEffect(() => {
    qm.setScreen(screen);
    if (audioState) qm.setAudioState(audioState);
  }, []);
  return null;
}

// Shared "shell" styles for all three hero variations.
const page = {
  background: C.bg, color: C.text, fontFamily: 'Inter, system-ui, sans-serif',
  minHeight: '100%', width: '100%',
};
const container = { maxWidth: 1180, margin: '0 auto', padding: '0 32px' };
const serif = { fontFamily: 'Fraunces, serif' };
const btnPrimary = {
  background: C.primary, color: '#fff', border: 'none', borderRadius: 12,
  padding: '14px 26px', fontSize: 15, fontWeight: 600, cursor: 'pointer',
  boxShadow: `0 6px 24px ${C.primary}55`, fontFamily: 'inherit',
};
const btnGhost = {
  background: 'transparent', color: C.text, border: `1px solid ${C.border}`,
  borderRadius: 12, padding: '14px 22px', fontSize: 15, fontWeight: 500,
  cursor: 'pointer', fontFamily: 'inherit',
};

function Nav() {
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(11,14,26,0.78)', backdropFilter: 'blur(14px)',
      borderBottom: `1px solid ${C.border}`,
    }}>
      <div style={{ ...container, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px 32px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <svg width="26" height="26" viewBox="0 0 88 88" style={{ flexShrink: 0 }}>
            <defs>
              <linearGradient id="nav-breath" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0" stopColor={C.primary}/>
                <stop offset="1" stopColor={C.secondary}/>
              </linearGradient>
            </defs>
            <circle cx="44" cy="44" r="40" fill="none" stroke="url(#nav-breath)" strokeOpacity="0.4" strokeWidth="1.6"/>
            <circle cx="44" cy="44" r="28" fill="none" stroke="url(#nav-breath)" strokeOpacity="0.75" strokeWidth="1.8"/>
            <circle cx="44" cy="44" r="17" fill="none" stroke={C.secondary} strokeWidth="2"/>
            <circle cx="44" cy="44" r="6" fill={C.secondary}/>
          </svg>
          <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, fontWeight: 300, letterSpacing: '0.38em', paddingLeft: '0.38em', color: C.text, display: 'flex', alignItems: 'center' }}>
            QUANTUM
            <span style={{ display: 'inline-block', width: 4, height: 4, borderRadius: '50%', background: C.secondary, margin: '0 8px 2px' }} />
            MIND
          </span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 28, fontSize: 13, color: C.textLight }}>
          <div className="qm-nav-links" style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
            <a href="#how" style={{ color: 'inherit', textDecoration: 'none' }}>How it works</a>
            <a href="#science" style={{ color: 'inherit', textDecoration: 'none' }}>Science</a>
            <a href="#pricing" style={{ color: 'inherit', textDecoration: 'none' }}>Pricing</a>
            <a href="blog.html" style={{ color: 'inherit', textDecoration: 'none' }}>Blog</a>
            <a href="#faq" style={{ color: 'inherit', textDecoration: 'none' }}>FAQ</a>
          </div>
          <button className="qm-nav-cta" style={{
            background: C.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>
  );
}

// ---------------- HERO A — "Editorial" ----------------
function HeroA() {
  return (
    <div style={{ position: 'relative', overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: `radial-gradient(80% 60% at 20% 0%, rgba(123,110,246,0.18), transparent 70%),
                     radial-gradient(60% 50% at 90% 30%, rgba(0,212,255,0.1), transparent 60%)`,
      }} />
      <div className="qm-grid" style={{ ...container, position: 'relative', padding: '80px 32px 100px', display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 80, alignItems: 'center' }}>
        <div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 12px',
            borderRadius: 999, background: 'rgba(0,212,255,0.1)', border: `1px solid rgba(0,212,255,0.25)`,
            color: C.secondary, fontSize: 12, fontWeight: 500, letterSpacing: 0.5, marginBottom: 28,
          }}>
            <span style={{ width: 6, height: 6, borderRadius: 3, background: C.secondary }} />
            New · First session free, no card required
          </div>
          <h1 style={{ ...serif, fontSize: 72, fontWeight: 400, lineHeight: 1.04, letterSpacing: -2.5, margin: 0, marginBottom: 22 }}>
            Hypnotherapy<br/>written for <em style={{ color: C.secondary }}>you.</em><br/>Not for everyone.
          </h1>
          <p style={{ fontSize: 18, color: C.textLight, lineHeight: 1.55, maxWidth: 480, marginBottom: 36 }}>
            A short check-in. A custom session, composed by a thoughtful AI trained on Ericksonian and NLP frameworks. A voice that actually reads like a human wrote it — because, for you, one did.
          </p>
          <div style={{ display: 'flex', gap: 12, marginBottom: 40 }}>
            <button style={btnPrimary}>Download on iOS</button>
            <button style={btnGhost}>Get on Android</button>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 28, fontSize: 13, color: C.textMuted }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <span style={{ color: '#FBBF24', fontSize: 15 }}>★★★★★</span>
              <span>4.8 · 2,150 reviews</span>
            </div>
            <div>Featured in Wired, The Verge</div>
          </div>
        </div>

        <div style={{ position: 'relative', display: 'flex', justifyContent: 'center' }}>
          <div style={{
            position: 'absolute', width: 360, height: 360, borderRadius: 9999, top: 50,
            background: `radial-gradient(circle, ${C.primary}33, transparent 60%)`, filter: 'blur(30px)',
          }} />
          <PhoneEmbed screen="audio" audioState="ready" width={280} />
        </div>
      </div>
    </div>
  );
}

// ---------------- HERO B — "Bold statement" ----------------
function HeroB() {
  return (
    <div style={{ position: 'relative', overflow: 'hidden', padding: '120px 0 100px' }}>
      <div style={{ ...container, textAlign: 'center', position: 'relative' }}>
        <div style={{
          display: 'inline-block', fontSize: 12, letterSpacing: 2.5, textTransform: 'uppercase',
          color: C.secondary, marginBottom: 32, fontWeight: 500,
        }}>Clinical hypnotherapy, on your phone</div>
        <h1 style={{ ...serif, fontSize: 104, fontWeight: 300, lineHeight: 0.98, letterSpacing: -4.5, margin: 0, marginBottom: 24 }}>
          Rewire the loop<br/>that keeps you<br/><em style={{ color: C.primary, fontWeight: 400 }}>awake at 3am.</em>
        </h1>
        <p style={{ fontSize: 19, color: C.textLight, lineHeight: 1.55, maxWidth: 620, margin: '0 auto 44px' }}>
          Quantum Mind composes a hypnotherapy session from your words, your pace, your life. Sleep, anxiety, confidence — rewritten overnight, by an AI that learns what works for your mind.
        </p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginBottom: 60 }}>
          <button style={btnPrimary}>Start free · 10 min</button>
          <button style={btnGhost}>Watch a session</button>
        </div>

        {/* Floating phone + two caption bubbles */}
        <div style={{ position: 'relative', display: 'flex', justifyContent: 'center', marginTop: 20 }}>
          <div style={{
            position: 'absolute', width: 560, height: 560, borderRadius: 9999, top: -40,
            background: `radial-gradient(circle, ${C.primary}22, transparent 60%)`, filter: 'blur(40px)',
          }} />
          <PhoneEmbed screen="audio" audioState="ready" width={320} />

          <div style={{
            position: 'absolute', left: 'calc(50% - 340px)', top: 120, maxWidth: 220, textAlign: 'left',
            background: C.card, border: `1px solid ${C.border}`, borderRadius: 14, padding: 14,
            boxShadow: '0 14px 40px rgba(0,0,0,0.4)',
          }}>
            <div style={{ fontSize: 11, color: C.secondary, letterSpacing: 1.3, textTransform: 'uppercase', marginBottom: 6, fontWeight: 600 }}>Intake</div>
            <div style={{ ...serif, fontSize: 15, fontWeight: 400, lineHeight: 1.35, color: C.text, fontStyle: 'italic' }}>
              "I can't fall asleep. My brain keeps rehearsing Thursday."
            </div>
          </div>
          <div style={{
            position: 'absolute', right: 'calc(50% - 340px)', top: 260, maxWidth: 240, textAlign: 'left',
            background: C.card, border: `1px solid ${C.border}`, borderRadius: 14, padding: 14,
            boxShadow: '0 14px 40px rgba(0,0,0,0.4)',
          }}>
            <div style={{ fontSize: 11, color: C.primary, letterSpacing: 1.3, textTransform: 'uppercase', marginBottom: 6, fontWeight: 600 }}>Your session</div>
            <div style={{ ...serif, fontSize: 14, fontWeight: 400, lineHeight: 1.5, color: C.textLight }}>
              "Imagine a staircase, warm stone, lit by something you can't quite see. Ten… nine…"
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ---------------- HERO C — "Split screen with live flow preview" ----------------
function HeroC() {
  const phases = [
    { k: 'intake', label: 'Intake' },
    { k: 'audio', label: 'Audio' },
    { k: 'progress', label: 'Progress' },
  ];
  const [phase, setPhase] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setPhase(p => (p+1) % 3), 3600);
    return () => clearInterval(id);
  }, []);
  return (
    <div style={{ position: 'relative', overflow: 'hidden' }}>
      <div className="qm-grid" style={{ ...container, padding: '72px 32px 90px', display: 'grid', gridTemplateColumns: '0.95fr 1.05fr', gap: 60, alignItems: 'center' }}>
        <div>
          <div style={{ fontSize: 12, color: C.textMuted, letterSpacing: 2, textTransform: 'uppercase', marginBottom: 22, fontFamily: 'JetBrains Mono, monospace' }}>
            01 · Quantum Mind · AI Hypnotherapy
          </div>
          <h1 style={{ ...serif, fontSize: 62, fontWeight: 400, lineHeight: 1.05, letterSpacing: -2, margin: 0, marginBottom: 20 }}>
            A quiet place<br/>inside of you, <em style={{ color: C.secondary }}>written down.</em>
          </h1>
          <p style={{ fontSize: 17, color: C.textLight, lineHeight: 1.55, maxWidth: 460, marginBottom: 34 }}>
            Tell us what's on your mind. We compose a hypnotherapy session that fits it — voiced, scored, and shaped to how your brain actually responds.
          </p>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 2, marginBottom: 30, maxWidth: 460 }}>
            {[
              { n: '01', t: 'You tell us what\'s happening', d: 'Two minutes. Your words, no drop-downs.' },
              { n: '02', t: 'We compose a session', d: 'Ericksonian framework + NLP, shaped to you.' },
              { n: '03', t: 'You press play, and sleep', d: 'A warm voice, a breathing soundscape.' },
            ].map((row, i) => {
              const active = i === phase;
              return (
                <div key={i} style={{
                  display: 'flex', gap: 16, padding: '14px 4px',
                  borderBottom: i < 2 ? `1px solid ${C.border}` : 'none',
                  opacity: active ? 1 : 0.55, transition: 'opacity .4s',
                }}>
                  <div style={{
                    ...serif, fontSize: 16, fontWeight: 500, color: active ? C.secondary : C.textMuted,
                    fontVariantNumeric: 'tabular-nums', minWidth: 26,
                  }}>{row.n}</div>
                  <div>
                    <div style={{ fontSize: 15, fontWeight: 500, color: C.text, marginBottom: 2 }}>{row.t}</div>
                    <div style={{ fontSize: 13, color: C.textMuted }}>{row.d}</div>
                  </div>
                </div>
              );
            })}
          </div>

          <div style={{ display: 'flex', gap: 12 }}>
            <button style={btnPrimary}>Get the app · free</button>
            <button style={btnGhost}>See the science</button>
          </div>
        </div>

        <div style={{ position: 'relative', display: 'flex', justifyContent: 'center' }}>
          <div style={{
            position: 'absolute', width: 440, height: 440, borderRadius: 9999, top: 40,
            background: `radial-gradient(circle, ${C.primary}25, transparent 65%)`, filter: 'blur(36px)',
          }} />
          {/* Auto-rotating phone */}
          <div key={phase} style={{ position: 'relative', animation: 'fadeIn .6s ease' }}>
            <PhoneEmbed
              screen={phases[phase].k === 'intake' ? 'intake' : phases[phase].k}
              audioState={phases[phase].k === 'audio' ? 'ready' : 'ready'}
              width={300}
            />
          </div>
          <style>{`@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }`}</style>
        </div>
      </div>
    </div>
  );
}

// ---------------- Shared page sections below hero (used by each variation) ----------------
function Section({ id, eyebrow, title, subtitle, children, style }) {
  return (
    <section id={id} style={{ padding: '100px 0', borderTop: `1px solid ${C.border}`, ...style }}>
      <div style={container}>
        {eyebrow && <div style={{ fontSize: 12, color: C.secondary, letterSpacing: 2, textTransform: 'uppercase', marginBottom: 14, fontWeight: 500 }}>{eyebrow}</div>}
        {title && <h2 style={{ ...serif, fontSize: 48, fontWeight: 400, letterSpacing: -1.2, lineHeight: 1.1, margin: 0, marginBottom: subtitle ? 14 : 32, maxWidth: 760 }}>{title}</h2>}
        {subtitle && <p style={{ fontSize: 17, color: C.textLight, lineHeight: 1.55, maxWidth: 640, marginBottom: 48 }}>{subtitle}</p>}
        {children}
      </div>
    </section>
  );
}

function HowItWorks() {
  return (
    <Section id="how" eyebrow="How it works" title="Three steps. Fifteen minutes. A session that fits you.">
      <div className="qm-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 20 }}>
        {[
          { n: '01', t: 'A short check-in', d: 'In your own words. Whatever comes up first. Two minutes, tops.', phone: 'intake' },
          { n: '02', t: 'Your session, composed', d: 'An Ericksonian script, anchored to a memory only you have. Voiced in the tone you picked.', phone: 'preview' },
          { n: '03', t: 'Press play, rest', d: 'A breathing soundscape. A voice that sounds like it means it. Wake up lighter.', phone: 'audio-ready' },
        ].map((row, i) => (
          <div key={i} style={{
            background: C.card, border: `1px solid ${C.border}`, borderRadius: 20, padding: 24,
            display: 'flex', flexDirection: 'column', gap: 16,
          }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
              <span style={{ ...serif, fontSize: 28, fontWeight: 400, color: C.secondary, fontVariantNumeric: 'tabular-nums' }}>{row.n}</span>
              <span style={{ ...serif, fontSize: 22, fontWeight: 500, letterSpacing: -0.5 }}>{row.t}</span>
            </div>
            <p style={{ fontSize: 14, color: C.textLight, lineHeight: 1.55, margin: 0, minHeight: 60 }}>{row.d}</p>
            <div style={{ display: 'flex', justifyContent: 'center', marginTop: 8 }}>
              <PhoneEmbed screen={row.phone === 'audio-ready' ? 'audio' : row.phone} audioState={row.phone === 'audio-ready' ? 'ready' : undefined} width={210} />
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}

function AIFramework() {
  return (
    <Section id="ai" eyebrow="The framework" title="Real hypnotherapy, written by an AI that knows what it's doing." subtitle="Under the hood: a 10-step clinical intake, a script engine grounded in Ericksonian hypnotherapy and NLP, and an adaptive layer that learns which techniques actually shift your mood.">
      <div className="qm-grid" style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 40, alignItems: 'center' }}>
        <div style={{
          background: C.card, border: `1px solid ${C.border}`, borderRadius: 22, padding: 28,
          position: 'relative', overflow: 'hidden', minHeight: 360,
        }}>
          {/* Flow diagram */}
          <svg width="100%" height="340" viewBox="0 0 520 340" style={{ display: 'block' }}>
            <defs>
              <linearGradient id="flow-grad" x1="0" y1="0" x2="1" y2="0">
                <stop offset="0" stopColor={C.primary} />
                <stop offset="1" stopColor={C.secondary} />
              </linearGradient>
            </defs>
            {/* nodes */}
            {[
              { x: 40, y: 40, l: 'Your words', c: C.secondary },
              { x: 40, y: 130, l: 'Intake vectors', c: C.primaryLight },
              { x: 40, y: 220, l: 'Mood history', c: C.primaryLight },
              { x: 240, y: 130, l: 'Technique selector', c: C.primary },
              { x: 240, y: 220, l: 'Script engine', c: C.primary },
              { x: 420, y: 170, l: 'Your session', c: C.secondary },
            ].map((n, i) => (
              <g key={i}>
                <rect x={n.x} y={n.y} width={140} height={46} rx={10} fill={C.cardAlt} stroke={n.c} strokeOpacity={0.4}/>
                <text x={n.x+14} y={n.y+28} fill={C.text} fontSize="13" fontWeight="500" fontFamily="Inter">{n.l}</text>
                <circle cx={n.x+130} cy={n.y+23} r={4} fill={n.c} />
              </g>
            ))}
            {/* paths */}
            {[
              ['M180,63 C210,63 210,153 240,153'],
              ['M180,153 L240,153'],
              ['M180,243 C210,243 210,243 240,243'],
              ['M380,153 C400,153 400,193 420,193'],
              ['M380,243 C400,243 400,193 420,193'],
            ].map((d, i) => (
              <path key={i} d={d[0]} stroke="url(#flow-grad)" strokeWidth={1.5} fill="none" opacity={0.7} strokeDasharray="3 3"/>
            ))}
            {/* labels on arrows */}
            <text x={196} y={108} fill={C.textMuted} fontSize="10" fontFamily="JetBrains Mono">embed</text>
            <text x={390} y={188} fill={C.textMuted} fontSize="10" fontFamily="JetBrains Mono">render</text>
          </svg>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {[
            { t: 'Ericksonian induction', d: 'Indirect suggestion, metaphor, confusion technique.' },
            { t: 'NLP reframing', d: 'Swish pattern, parts integration, timeline therapy.' },
            { t: 'Resource anchoring', d: 'Uses a real memory you name in the intake.' },
            { t: 'Adaptive selection', d: 'Your mood Δ teaches the model what works for you.' },
          ].map(row => (
            <div key={row.t} style={{
              background: C.card, border: `1px solid ${C.border}`, borderRadius: 14, padding: '14px 18px',
              display: 'flex', gap: 14, alignItems: 'flex-start',
            }}>
              <div style={{ width: 7, height: 7, borderRadius: 4, background: C.secondary, marginTop: 8, flexShrink: 0 }} />
              <div>
                <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 2 }}>{row.t}</div>
                <div style={{ fontSize: 13, color: C.textLight, lineHeight: 1.5 }}>{row.d}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </Section>
  );
}

function FocusAreas() {
  const items = [
    { e: '🌿', t: 'Anxiety', d: 'Release the loop. Settle the body.' },
    { e: '🌙', t: 'Sleep', d: 'Fall faster. Stay there longer.' },
    { e: '✨', t: 'Confidence', d: 'Rewrite the stories you tell yourself.' },
    { e: '🕊', t: 'Release', d: 'Set down what you\'ve been carrying.' },
    { e: '◎', t: 'Focus', d: 'Find one thing, and stay with it.' },
    { e: '↻', t: 'Habits', d: 'Change the default, not just the choice.' },
  ];
  return (
    <Section id="focus" eyebrow="Six paths" title="What would you like to work on tonight?">
      <div className="qm-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {items.map(x => (
          <div key={x.t} style={{
            background: C.card, border: `1px solid ${C.border}`, borderRadius: 16, padding: 24,
            display: 'flex', gap: 16, alignItems: 'flex-start',
          }}>
            <div style={{ fontSize: 32, lineHeight: 1 }}>{x.e}</div>
            <div>
              <div style={{ ...serif, fontSize: 20, fontWeight: 500, marginBottom: 4, letterSpacing: -0.3 }}>{x.t}</div>
              <div style={{ fontSize: 14, color: C.textLight, lineHeight: 1.5 }}>{x.d}</div>
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}

function Testimonials() {
  const quotes = [
    { q: "Fell asleep before the session ended. Three nights in a row. Haven't done that in two years.", n: 'Marta K.', r: 'Sleep · 14 sessions', init: 'M', tone: C.primary },
    { q: "The intake felt like someone actually listening. The session referenced my grandmother's kitchen. I cried.", n: 'Javier S.', r: 'Anxiety · 22 sessions', init: 'J', tone: C.secondary },
    { q: "Healthier than my meditation app — it actually does something instead of just playing ocean noises.", n: 'Priya R.', r: 'Confidence · 8 sessions', init: 'P', tone: C.accent },
  ];
  return (
    <Section id="stories" eyebrow="Stories" title="What 2,150 quiet hours have sounded like.">
      <div className="qm-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 20 }}>
        {quotes.map(q => (
          <div key={q.n} style={{
            background: C.card, border: `1px solid ${C.border}`, borderRadius: 18, padding: 26,
            display: 'flex', flexDirection: 'column', gap: 20,
          }}>
            <div style={{ ...serif, fontSize: 20, fontWeight: 400, lineHeight: 1.4, letterSpacing: -0.3, color: C.text }}>
              "{q.q}"
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 'auto' }}>
              <div style={{
                width: 42, height: 42, borderRadius: 21, background: q.tone, color: '#fff',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                ...serif, fontSize: 17, fontWeight: 500,
              }}>{q.init}</div>
              <div>
                <div style={{ fontSize: 13, fontWeight: 500 }}>{q.n}</div>
                <div style={{ fontSize: 12, color: C.textMuted }}>{q.r}</div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}

function Science() {
  return (
    <Section id="science" eyebrow="Science" title="Clinical hypnotherapy, recognized by the APA. Not hand-waving." subtitle="Hypnosis is a focused attentional state — studied for decades, used in medical settings for pain, anxiety, and behavior change. Quantum Mind applies two of its most evidence-based schools.">
      <div className="qm-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {[
          { k: '76%', l: 'Felt calmer after one session', s: 'n=1,204, post-session survey' },
          { k: '+2.4', l: 'Average mood shift per session', s: '1–10 self-report scale' },
          { k: '8 days', l: 'Median streak after week one', s: 'Active users, 2025 cohort' },
        ].map(x => (
          <div key={x.k} style={{
            background: C.card, border: `1px solid ${C.border}`, borderRadius: 16, padding: 26,
          }}>
            <div style={{ ...serif, fontSize: 48, fontWeight: 300, color: C.secondary, letterSpacing: -1.5, marginBottom: 6 }}>{x.k}</div>
            <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 4 }}>{x.l}</div>
            <div style={{ fontSize: 11, color: C.textMuted, fontFamily: 'JetBrains Mono, monospace' }}>{x.s}</div>
          </div>
        ))}
      </div>
    </Section>
  );
}

function Pricing() {
  const tiers = [
    { k: 'Starter', p: '$19.99', m: '3 sessions', r: '~$6.66/session', f: ['First session free', '3 sessions per month', 'All techniques + voices', '15-min custom scripts'] },
    { k: 'Standard', p: '$49.99', m: '8 sessions', r: '~$6.25/session', best: true, f: ['Everything in Starter', '8 sessions per month', 'Programs (14/21/28-day)', 'Mood tracking + insights'] },
    { k: 'Pro', p: '$89.99', m: '15 sessions', r: '~$6.00/session', f: ['Everything in Standard', '15 sessions per month', 'Priority generation', 'Export your sessions'] },
  ];
  return (
    <Section id="pricing" eyebrow="Pricing" title="A real session costs real money. Here's ours." subtitle="Each Quantum Mind session is a 15-minute custom hypnotherapy script, voiced in studio-grade 44.1 kHz audio. Unused sessions roll over 90 days. No auto-renew traps, no 7-day trial that silently converts.">
      <div className="qm-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {tiers.map(t => (
          <div key={t.k} style={{
            background: t.best ? `linear-gradient(180deg, rgba(123,110,246,0.15), ${C.card})` : C.card,
            border: `1.5px solid ${t.best ? C.primary : C.border}`,
            borderRadius: 20, padding: 28, position: 'relative',
            display: 'flex', flexDirection: 'column', gap: 20,
          }}>
            {t.best && <div style={{
              position: 'absolute', top: -11, left: 24, background: C.primary, color: '#fff',
              fontSize: 11, fontWeight: 600, padding: '4px 12px', borderRadius: 10,
              letterSpacing: 1, textTransform: 'uppercase',
            }}>Best value</div>}
            <div>
              <div style={{ fontSize: 13, color: C.textMuted, textTransform: 'uppercase', letterSpacing: 1.4, marginBottom: 12, fontWeight: 500 }}>{t.k}</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                <span style={{ ...serif, fontSize: 48, fontWeight: 400, letterSpacing: -1.5 }}>{t.p}</span>
                <span style={{ fontSize: 13, color: C.textMuted }}>/month</span>
              </div>
              <div style={{ fontSize: 13, color: C.textLight, marginTop: 6 }}>{t.m} · {t.r}</div>
            </div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {t.f.map(f => (
                <li key={f} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 13.5, color: C.textLight, lineHeight: 1.5 }}>
                  {QMI.check(C.success, 15)}<span>{f}</span>
                </li>
              ))}
            </ul>
            <button style={{
              ...btnPrimary, background: t.best ? C.primary : 'transparent',
              border: t.best ? 'none' : `1px solid ${C.border}`,
              boxShadow: t.best ? btnPrimary.boxShadow : 'none',
              marginTop: 'auto',
            }}>Start with {t.k}</button>
          </div>
        ))}
      </div>
    </Section>
  );
}

function FAQ() {
  const [open, setOpen] = React.useState(0);
  const faqs = [
    { q: 'How is this different from a meditation app?', a: 'Meditation apps play the same recording for everyone. Quantum Mind composes a script from your intake, using Ericksonian hypnotherapy and NLP techniques, then voices it. Every session is yours specifically.' },
    { q: 'Is clinical hypnotherapy actually safe?', a: 'Yes. It\'s recognized by the American Psychological Association. You stay conscious, in control, and can emerge anytime. We use evidence-based techniques and don\'t make therapeutic claims we can\'t support.' },
    { q: 'What if I don\'t like the session?', a: 'Regenerate it. Edit the script. Try a different voice. Your first session is free — no card. After that, unused sessions roll over 90 days.' },
    { q: 'Can I use this instead of therapy?', a: 'No. Quantum Mind is a wellness tool, not a replacement for care if you\'re in crisis. If you are, please reach out to a clinician or a local helpline.' },
    { q: 'What data do you keep?', a: 'Your intake answers, your session scripts, your mood ratings. Nothing is sold. You can export or delete everything from Settings at any time.' },
  ];
  return (
    <Section id="faq" eyebrow="FAQ" title="Honest answers.">
      <div style={{ maxWidth: 780 }}>
        {faqs.map((f, i) => (
          <div key={i} style={{
            borderBottom: `1px solid ${C.border}`, padding: '20px 0', cursor: 'pointer',
          }} onClick={() => setOpen(open === i ? -1 : i)}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 20 }}>
              <div style={{ ...serif, fontSize: 20, fontWeight: 500, letterSpacing: -0.3, color: C.text }}>{f.q}</div>
              <div style={{ color: C.textMuted, fontSize: 22, lineHeight: 1, marginTop: 4, transition: 'transform .2s', transform: open === i ? 'rotate(45deg)' : 'none' }}>+</div>
            </div>
            {open === i && (
              <div style={{ fontSize: 15, color: C.textLight, lineHeight: 1.65, marginTop: 12, maxWidth: 620 }}>{f.a}</div>
            )}
          </div>
        ))}
      </div>
    </Section>
  );
}

function FinalCTA() {
  return (
    <Section id="cta" style={{ borderBottom: `1px solid ${C.border}`, background: `linear-gradient(180deg, ${C.bg}, ${C.bgLight})` }}>
      <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto' }}>
        <div style={{ fontSize: 12, color: C.secondary, letterSpacing: 2, textTransform: 'uppercase', marginBottom: 20, fontWeight: 500 }}>Your first 10 minutes are on us</div>
        <h2 style={{ ...serif, fontSize: 56, fontWeight: 400, letterSpacing: -1.8, lineHeight: 1.08, margin: 0, marginBottom: 18 }}>
          Tonight could be <em style={{ color: C.secondary }}>different.</em>
        </h2>
        <p style={{ fontSize: 17, color: C.textLight, lineHeight: 1.55, marginBottom: 36 }}>
          No credit card. No trial trap. Just a session that fits you — and a night that finally does too.
        </p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
          <button style={btnPrimary}>Download on iOS</button>
          <button style={btnGhost}>Get on Android</button>
        </div>
      </div>
    </Section>
  );
}

function Footer() {
  return (
    <footer style={{ padding: '60px 0 40px', borderTop: `1px solid ${C.border}`, background: C.bg }}>
      <div className="qm-grid" style={{ ...container, display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: 40 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 14 }}>
            <svg width="24" height="24" viewBox="0 0 88 88" style={{ flexShrink: 0 }}>
              <defs>
                <linearGradient id="ft-breath" x1="0" y1="0" x2="1" y2="1">
                  <stop offset="0" stopColor={C.primary}/>
                  <stop offset="1" stopColor={C.secondary}/>
                </linearGradient>
              </defs>
              <circle cx="44" cy="44" r="40" fill="none" stroke="url(#ft-breath)" strokeOpacity="0.4" strokeWidth="1.6"/>
              <circle cx="44" cy="44" r="28" fill="none" stroke="url(#ft-breath)" strokeOpacity="0.75" strokeWidth="1.8"/>
              <circle cx="44" cy="44" r="17" fill="none" stroke={C.secondary} strokeWidth="2"/>
              <circle cx="44" cy="44" r="6" fill={C.secondary}/>
            </svg>
            <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 300, letterSpacing: '0.38em', paddingLeft: '0.38em', color: C.text, display: 'flex', alignItems: 'center' }}>
              QUANTUM
              <span style={{ display: 'inline-block', width: 3.5, height: 3.5, borderRadius: '50%', background: C.secondary, margin: '0 7px 2px' }} />
              MIND
            </span>
          </div>
          <div style={{ fontSize: 13, color: C.textMuted, lineHeight: 1.6, maxWidth: 280 }}>
            Personalized hypnotherapy for sleep, anxiety, and the stories you keep telling yourself.
          </div>
        </div>
        {[
          { t: 'Company', l: [['Contact support', 'support.html'], ['Press', 'mailto:press@quantummind.app'], ['Careers', 'mailto:careers@quantummind.app']] },
          { t: 'Legal', l: [['Privacy', 'privacy.html'], ['Terms', 'terms.html'], ['Data export', 'support.html#data']] },
        ].map(g => (
          <div key={g.t}>
            <div style={{ fontSize: 12, color: C.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: C.textLight, marginBottom: 10, textDecoration: 'none' }}>{label}</a>
            ))}
          </div>
        ))}
      </div>
      <div style={{ ...container, borderTop: `1px solid ${C.border}`, marginTop: 50, paddingTop: 24, display: 'flex', justifyContent: 'space-between', fontSize: 12, color: C.textMuted }}>
        <span>© Quantum Mind App 2026. All rights reserved.</span>
        <span>Made with care · Not a substitute for medical care</span>
      </div>
    </footer>
  );
}

// A full page uses a specific hero, then shared sections.
function FullPage({ hero: Hero }) {
  return (
    <div style={page}>
      <Nav />
      <Hero />
      <HowItWorks />
      <AIFramework />
      <FocusAreas />
      <Science />
      <Testimonials />
      <Pricing />
      <FAQ />
      <FinalCTA />
      <Footer />
    </div>
  );
}

// End of reusable exports. Render is handled by the host HTML.