// AFTER landing page sections — content-only components
const { useState: useStateLP, useRef: useRefLP, useEffect: useEffectLP } = React;

const LP = {
  cream: '#fafaf8',
  black: '#0f0f0f',
  green: '#3d6b4f',
  greenDark: '#2d5239',
  greenLight: '#e8f0eb',
  greenLighter: '#f1f6f2',
  gray: '#6b6b6b',
  grayLight: '#f0efed',
  border: '#e2e0db',
};

// ─── Nav ───────────────────────────────────────────────
function Nav() {
  return (
    <nav style={{
      maxWidth: 1240, margin: '0 auto',
      padding: '24px 32px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <Wordmark />
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 32 }}>
        <a href="#how" style={navLink}>How it works</a>
        <a href="#science" style={navLink}>Why it works</a>
        <a href="#pricing" style={navLink}>Pricing</a>
        <a href="blog.html" style={navLink}>Field notes</a>
        <a href="#faq" style={navLink}>FAQ</a>
        <a href="#cta" style={{
          padding: '10px 18px',
          background: LP.black, color: LP.cream,
          fontFamily: '"DM Sans"', fontSize: 14, fontWeight: 600,
          borderRadius: 999, textDecoration: 'none',
        }}>Join the beta</a>
      </div>
    </nav>
  );
}
const navLink = {
  fontFamily: '"DM Sans"', fontSize: 14, fontWeight: 500,
  color: LP.black, textDecoration: 'none',
};

function Wordmark({ color = LP.black }) {
  return (
    <span style={{
      fontFamily: '"DM Serif Display", Georgia, serif',
      fontSize: 26, color, letterSpacing: '-.01em', lineHeight: 1,
    }}>Keep<span style={{ color: LP.green }}>After</span></span>
  );
}

// ─── Hero ──────────────────────────────────────────────
function Hero() {
  return (
    <section style={{
      maxWidth: 1240, margin: '0 auto',
      padding: '32px 32px 80px',
      display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 64,
      alignItems: 'center',
    }} className="lp-hero-grid">
      <div>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '6px 12px',
          background: LP.greenLight, color: LP.greenDark,
          borderRadius: 999, marginBottom: 28,
          fontFamily: '"DM Sans"', fontSize: 12, fontWeight: 600,
          letterSpacing: '.05em', textTransform: 'uppercase',
        }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: LP.green }} />
          Now in TestFlight beta
        </div>
        <h1 style={{
          fontFamily: '"DM Serif Display", Georgia, serif',
          fontSize: 'clamp(44px, 5.5vw, 72px)',
          lineHeight: 1.05,
          letterSpacing: '-.015em',
          color: LP.black,
          margin: 0, marginBottom: 28,
          textWrap: 'balance',
        }}>
          Your GLP-1 off ramp.
          <br/>
          <em style={{ color: LP.green, fontStyle: 'italic' }}>However you got here, we keep going.</em>
        </h1>
        <p style={{
          fontFamily: '"DM Sans"',
          fontSize: 19, lineHeight: 1.55, color: LP.gray,
          margin: 0, marginBottom: 36,
          maxWidth: 540,
          textWrap: 'pretty',
        }}>
          KeepAfter is the AI-first companion for the GLP-1 off ramp — whether you're still on the drug or already off it. We protect your weight, your muscle, and your peace of mind, without another prescription. For people on or after Ozempic, Wegovy, Zepbound, and Mounjaro.
        </p>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 12,
          padding: '14px 16px',
          background: LP.greenLighter, border: `1px solid ${LP.greenLight}`,
          borderRadius: 12, marginBottom: 28, maxWidth: 540,
        }}>
          <div style={{
            width: 32, height: 32, borderRadius: '50%', flexShrink: 0,
            background: `radial-gradient(circle at 35% 30%, #6a9476, ${LP.green} 65%, ${LP.greenDark})`,
            boxShadow: `0 0 0 2px ${LP.cream}, 0 0 0 3px ${LP.greenLight}`,
          }} />
          <div style={{
            fontFamily: '"DM Sans"', fontSize: 14, lineHeight: 1.45, color: LP.black,
          }}>
            <strong style={{ fontWeight: 600 }}>Meet Mira</strong>
            <span style={{ color: LP.gray }}> — your steady voice for what comes after. Trained on the research, not the diet industry.</span>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
          <a href="#cta" style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '18px 30px',
            background: LP.green, color: LP.cream,
            fontFamily: '"DM Sans"', fontSize: 17, fontWeight: 600,
            borderRadius: 14, textDecoration: 'none',
            boxShadow: '0 12px 30px -10px rgba(61,107,79,0.5)',
          }}>
            Join the beta
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
              <line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>
            </svg>
          </a>
          <a href="#cta" style={{
            fontFamily: '"DM Sans"', fontSize: 14, color: LP.gray,
            textDecoration: 'none', borderBottom: `1px dotted ${LP.gray}`,
            paddingBottom: 2,
          }}>
            or talk to Mira below
          </a>
        </div>

        {/* Trust row */}
        <div style={{
          marginTop: 56, paddingTop: 28,
          borderTop: `1px solid ${LP.border}`,
          display: 'flex', gap: 36, flexWrap: 'wrap',
        }}>
          {[
            { num: '2 in 3', label: 'people regain weight within a year of stopping GLP-1s (JAMA, 2022)' },
            { num: 'No Rx', label: 'never another prescription, never another scale lecture' },
            { num: '24/7', label: 'a steady voice when food noise gets loud' },
          ].map((it, i) => (
            <div key={i} style={{ flex: '1 1 140px', minWidth: 140 }}>
              <div style={{
                fontFamily: '"DM Serif Display", Georgia, serif',
                fontSize: 24, color: LP.green, lineHeight: 1.1,
              }}>{it.num}</div>
              <div style={{
                fontFamily: '"DM Sans"', fontSize: 13, color: LP.gray,
                lineHeight: 1.4, marginTop: 6,
              }}>{it.label}</div>
            </div>
          ))}
        </div>
        <div style={{
          marginTop: 20, paddingTop: 16,
          fontFamily: '"DM Sans"', fontSize: 12, color: LP.gray,
          fontStyle: 'italic', lineHeight: 1.5, maxWidth: 520,
        }}>
          Built with input from board-certified obesity-medicine physicians and registered dietitians.
        </div>
      </div>

      {/* Right: Mira chat demo (real backend) */}
      <div style={{ display: 'flex', justifyContent: 'center', position: 'relative' }}>
        <div style={{
          position: 'absolute', inset: -40,
          background: `radial-gradient(circle at 60% 40%, ${LP.greenLight} 0%, transparent 60%)`,
          pointerEvents: 'none',
        }} />
        <MiraChat />
      </div>
    </section>
  );
}

// ─── Section: Problem ──────────────────────────────────
function Problem() {
  const items = [
    { tag: 'Food noise', title: "It's not in your head. It's in your hormones.", body: "When the GLP-1 leaves your system, the appetite signals it quieted come roaring back. Not a willpower problem. A biology problem." },
    { tag: 'Scale anxiety', title: "One number, every morning, all the meaning.", body: "We help you read the trend, not the snapshot. Your body weight swings two to three pounds from sleep, salt, and your cycle alone." },
    { tag: 'Habit collapse', title: "The structure was the medication.", body: "When the scaffolding came off, so did the routines. We rebuild them — slowly, specifically, on your terms." },
  ];
  return (
    <section style={{ background: LP.cream, padding: '120px 32px', borderTop: `1px solid ${LP.border}` }}>
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>
        <div style={{ maxWidth: 720, marginBottom: 64 }}>
          <Eyebrow>The three things nobody warned you about</Eyebrow>
          <h2 style={{
            fontFamily: '"DM Serif Display", Georgia, serif',
            fontSize: 'clamp(36px, 4vw, 52px)',
            lineHeight: 1.1, color: LP.black,
            margin: '20px 0 0', letterSpacing: '-.01em',
            textWrap: 'balance',
          }}>
            Stopping the medication was supposed to feel like the finish line.
            <em style={{ color: LP.green, fontStyle: 'italic' }}> It's actually the starting one.</em>
          </h2>
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: 20,
        }}>
          {items.map((it, i) => (
            <div key={i} style={{
              background: LP.cream,
              border: `1px solid ${LP.border}`,
              borderRadius: 20,
              padding: 32,
            }}>
              <div style={{
                fontFamily: '"DM Sans"', fontSize: 12, fontWeight: 600,
                color: LP.green, letterSpacing: '.06em', textTransform: 'uppercase',
                marginBottom: 16,
              }}>{String(i+1).padStart(2,'0')} · {it.tag}</div>
              <h3 style={{
                fontFamily: '"DM Serif Display", Georgia, serif',
                fontSize: 24, lineHeight: 1.2, color: LP.black,
                margin: '0 0 14px', textWrap: 'balance',
              }}>{it.title}</h3>
              <p style={{
                fontFamily: '"DM Sans"', fontSize: 15, lineHeight: 1.55,
                color: LP.gray, margin: 0, textWrap: 'pretty',
              }}>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Eyebrow({ children }) {
  return (
    <div style={{
      fontFamily: '"DM Sans"', fontSize: 12, fontWeight: 600,
      color: LP.gray, letterSpacing: '.08em', textTransform: 'uppercase',
    }}>{children}</div>
  );
}

// ─── Section: How it works ─────────────────────────────
function HowItWorks() {
  const steps = [
    {
      n: '01', tag: 'Every morning',
      title: 'A steady check-in to start the day.',
      body: 'Two taps. Thirty seconds. Log today, then read the trend — not the snapshot. Mira leaves a note about what your week is telling her.',
      visual: <DashboardPreview />,
    },
    {
      n: '02', tag: 'Whenever it hits',
      title: "Here for the in-between moments. By text, or out loud.",
      body: 'Cravings at 9pm. A hard weigh-in. The fear of regain. Tap a suggested prompt or just start talking — Mira is trained on the actual hard parts of coming off Ozempic, Wegovy, Zepbound, or Mounjaro.',
      visual: <CoachPreview />,
    },
    {
      n: '03', tag: 'Over weeks',
      title: 'Your vibe over weeks. Patterns become a plan.',
      body: 'Mira learns when food noise spikes, what situations turn into spirals, and which routines actually stick. The map grows. The plan tightens. Life after Ozempic — or any GLP-1 — gets quieter.',
      visual: <TrendPreview />,
    },
  ];
  return (
    <section id="how" style={{ background: LP.greenLighter, padding: '120px 32px' }}>
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>
        <div style={{ maxWidth: 720, marginBottom: 64 }}>
          <Eyebrow>How it works</Eyebrow>
          <h2 style={{
            fontFamily: '"DM Serif Display", Georgia, serif',
            fontSize: 'clamp(36px, 4vw, 52px)',
            lineHeight: 1.1, color: LP.black,
            margin: '20px 0 0', letterSpacing: '-.01em',
            textWrap: 'balance',
          }}>
            Two minutes a day. <em style={{ color: LP.green, fontStyle: 'italic' }}>One steady voice in your corner.</em>
          </h2>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
          {steps.map((s, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: i % 2 === 0 ? '1fr 1.1fr' : '1.1fr 1fr',
              gap: 48, alignItems: 'center',
              background: LP.cream,
              border: `1px solid ${LP.border}`,
              borderRadius: 24, padding: 40,
            }} className="lp-step">
              <div style={{ order: i % 2 === 0 ? 1 : 2 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
                  <span style={{
                    fontFamily: '"DM Serif Display", Georgia, serif',
                    fontSize: 32, color: LP.green, lineHeight: 1,
                  }}>{s.n}</span>
                  <span style={{
                    fontFamily: '"DM Sans"', fontSize: 12, fontWeight: 600,
                    color: LP.gray, letterSpacing: '.06em', textTransform: 'uppercase',
                  }}>{s.tag}</span>
                </div>
                <h3 style={{
                  fontFamily: '"DM Serif Display", Georgia, serif',
                  fontSize: 30, lineHeight: 1.15, color: LP.black,
                  margin: '0 0 16px', letterSpacing: '-.005em',
                  textWrap: 'balance',
                }}>{s.title}</h3>
                <p style={{
                  fontFamily: '"DM Sans"', fontSize: 16, lineHeight: 1.6,
                  color: LP.gray, margin: 0, maxWidth: 460,
                  textWrap: 'pretty',
                }}>{s.body}</p>
              </div>
              <div style={{ order: i % 2 === 0 ? 2 : 1, display: 'flex', justifyContent: 'center' }}>
                {s.visual}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Mini visuals for steps ────────────────────────────
// Visual vocabulary lifted from KeepAfter intake wireframe:
//   - flat status bar (9:41 + signal/battery), no notch
//   - white cards on cream, 1px LP.border, 14–16px radius
//   - eyebrow tags: 10–11px, 600, .12em, uppercase, gray
//   - DM Serif headings inside phones (22–26)
//   - micro-win callout: greenLight bg, 2px green left border, italic 11–12
//   - maintenance/pattern callouts: greenLight bg + 1px green border
function PhoneFrame({ children, height = 380 }) {
  return (
    <div style={{
      width: 260, height,
      background: LP.cream,
      border: `8px solid #111`,
      borderRadius: 38,
      overflow: 'hidden',
      boxShadow: '0 30px 60px -24px rgba(15,15,15,0.3), 0 0 0 1px rgba(0,0,0,0.04)',
      position: 'relative',
      flexShrink: 0,
    }}>
      <div style={{ width: '100%', height: '100%', overflow: 'hidden', borderRadius: 26, display: 'flex', flexDirection: 'column' }}>
        {children}
      </div>
    </div>
  );
}

function PhoneStatusBar() {
  return (
    <div style={{
      height: 30, flexShrink: 0,
      display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
      padding: '0 18px 4px',
      background: LP.cream,
      fontFamily: '"DM Sans"', fontSize: 11, fontWeight: 600, color: LP.black,
    }}>
      <span>9:41</span>
      <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
        {/* signal bars */}
        <svg width="14" height="9" viewBox="0 0 14 9" fill={LP.black}>
          <rect x="0" y="6" width="2" height="3" rx="0.5"/>
          <rect x="3.5" y="4" width="2" height="5" rx="0.5"/>
          <rect x="7" y="2" width="2" height="7" rx="0.5"/>
          <rect x="10.5" y="0" width="2" height="9" rx="0.5"/>
        </svg>
        {/* battery */}
        <svg width="20" height="10" viewBox="0 0 20 10" fill="none">
          <rect x="0.5" y="0.5" width="16" height="9" rx="2" stroke={LP.black} strokeOpacity="0.5"/>
          <rect x="2" y="2" width="13" height="6" rx="1" fill={LP.black}/>
          <rect x="17" y="3" width="1.5" height="4" rx="0.5" fill={LP.black} fillOpacity="0.5"/>
        </svg>
      </span>
    </div>
  );
}

function DashboardMini() {
  return (
    <PhoneFrame height={420}>
      <PhoneStatusBar />
      <div style={{ padding: '14px 16px 18px', flex: 1, overflow: 'hidden', background: LP.cream }}>
        <div style={{ fontFamily: '"DM Serif Display"', fontSize: 24, color: LP.black, lineHeight: 1.1 }}>Good morning,<br/>Sarah.</div>
        <div style={{ fontFamily: '"DM Sans"', fontSize: 11, color: LP.gray, marginTop: 6 }}>A quick check-in for today.</div>

        {/* Weight card */}
        <div style={{
          marginTop: 16, padding: '12px 14px 14px',
          background: '#fff',
          border: `1px solid ${LP.border}`, borderRadius: 14,
        }}>
          <div style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
          }}>
            <div style={{ fontFamily: '"DM Sans"', fontSize: 10, fontWeight: 600, color: LP.gray, letterSpacing: '.1em', textTransform: 'uppercase' }}>Weight · Today</div>
            <div style={{ fontFamily: '"DM Sans"', fontSize: 9, fontWeight: 500, color: LP.green }}>−1.8 lb · 7d</div>
          </div>
          <div style={{ fontFamily: '"DM Serif Display"', fontSize: 30, color: LP.black, marginTop: 4, lineHeight: 1, letterSpacing: '-0.5px' }}>
            182.4<span style={{ fontFamily: '"DM Sans"', fontSize: 13, color: LP.gray, fontWeight: 400, marginLeft: 4 }}>lb</span>
          </div>
          <div style={{ marginTop: 10, height: 30 }}>
            <Sparkline />
          </div>
        </div>

        {/* Food noise card */}
        <div style={{
          marginTop: 10, padding: '12px 14px 14px',
          background: '#fff',
          border: `1px solid ${LP.border}`, borderRadius: 14,
        }}>
          <div style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          }}>
            <div style={{ fontFamily: '"DM Sans"', fontSize: 10, fontWeight: 600, color: LP.gray, letterSpacing: '.1em', textTransform: 'uppercase' }}>Food Noise Today</div>
            <div style={{ fontFamily: '"DM Sans"', fontSize: 10, fontWeight: 500, color: LP.black }}>7<span style={{ color: LP.gray, fontWeight: 400 }}>/10</span></div>
          </div>
          <div style={{ display: 'flex', gap: 3, marginTop: 10 }}>
            {[1,2,3,4,5,6,7,8,9,10].map(n => (
              <div key={n} style={{
                flex: 1, aspectRatio: '1 / 1', borderRadius: '50%',
                background: n === 7 ? LP.green : (n < 7 ? LP.greenLight : LP.cream),
                border: `1px solid ${n === 7 ? LP.green : (n < 7 ? LP.greenLight : LP.border)}`,
                fontFamily: '"DM Sans"', fontSize: 8, fontWeight: 600,
                color: n === 7 ? LP.cream : (n < 7 ? LP.green : LP.gray),
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>{n}</div>
            ))}
          </div>
        </div>

        {/* Micro-win banner */}
        <div style={{
          marginTop: 12,
          background: LP.greenLight,
          borderLeft: `2px solid ${LP.green}`,
          padding: '8px 11px',
          borderRadius: '0 6px 6px 0',
          fontFamily: '"DM Sans"', fontSize: 11, fontStyle: 'italic',
          color: LP.greenDark, lineHeight: 1.4,
        }}>
          Down from 9 yesterday. The trend is your friend.
        </div>
      </div>
    </PhoneFrame>
  );
}

function Sparkline() {
  const pts = [184.2, 183.8, 183.5, 183.9, 183.1, 182.8, 182.4];
  const W = 200, H = 28;
  const min = Math.min(...pts), max = Math.max(...pts), range = max - min || 1;
  const xs = pts.map((_, i) => (i / (pts.length - 1)) * W);
  const ys = pts.map(v => H - 2 - ((v - min) / range) * (H - 6));
  const d = xs.map((x, i) => `${i === 0 ? 'M' : 'L'} ${x} ${ys[i]}`).join(' ');
  return (
    <svg width="100%" height={H} viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none">
      <path d={d} fill="none" stroke={LP.green} strokeWidth="1.5" strokeLinecap="round" />
      <circle cx={xs[xs.length-1]} cy={ys[ys.length-1]} r="2.5" fill={LP.green} />
    </svg>
  );
}

function CoachMini() {
  return (
    <PhoneFrame height={420}>
      <PhoneStatusBar />
      <div style={{ padding: '8px 14px 14px', flex: 1, display: 'flex', flexDirection: 'column', background: LP.cream }}>
        {/* Header */}
        <div style={{
          paddingBottom: 10, marginBottom: 10,
          borderBottom: `1px solid ${LP.border}`,
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <div style={{
            width: 28, height: 28, borderRadius: '50%', flexShrink: 0,
            background: `radial-gradient(circle at 35% 30%, #6a9476, ${LP.green} 65%, ${LP.greenDark})`,
          }} />
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: '"DM Serif Display"', fontSize: 18, color: LP.black, lineHeight: 1 }}>Mira</div>
            <div style={{ fontFamily: '"DM Sans"', fontSize: 9, color: LP.green, marginTop: 2, display: 'flex', alignItems: 'center', gap: 4 }}>
              <span style={{ width: 5, height: 5, borderRadius: '50%', background: LP.green, display: 'inline-block' }} />
              Listening
            </div>
          </div>
        </div>

        {/* Messages */}
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 7, overflow: 'hidden' }}>
          {[
            { role: 'a', text: "I'm here for food noise, scale anxiety, and habits. What's on your mind?" },
            { role: 'u', text: "It's 9pm and I can't stop thinking about the kitchen." },
            { role: 'a', text: "That sounds loud. When did this start tonight, and how long since dinner?" },
          ].map((m, i) => (
            <div key={i} style={{
              display: 'flex', justifyContent: m.role === 'u' ? 'flex-end' : 'flex-start',
            }}>
              <div style={{
                maxWidth: '82%',
                padding: '8px 11px',
                borderRadius: 14,
                borderBottomRightRadius: m.role === 'u' ? 4 : 14,
                borderBottomLeftRadius: m.role === 'u' ? 14 : 4,
                background: m.role === 'u' ? LP.green : '#fff',
                border: m.role === 'u' ? 'none' : `1px solid ${LP.border}`,
                color: m.role === 'u' ? LP.cream : LP.black,
                fontFamily: '"DM Sans"', fontSize: 11, lineHeight: 1.45,
              }}>{m.text}</div>
            </div>
          ))}
        </div>

        {/* Composer */}
        <div style={{
          marginTop: 10,
          padding: '7px 7px 7px 12px', borderRadius: 999,
          background: '#fff',
          border: `1px solid ${LP.border}`,
          fontFamily: '"DM Sans"', fontSize: 11, color: LP.gray,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        }}>
          <span>Message Mira</span>
          <div style={{ width: 26, height: 26, borderRadius: '50%', background: LP.green, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke={LP.cream} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
              <rect x="9" y="2" width="6" height="13" rx="3"/>
              <path d="M5 11v1a7 7 0 0 0 14 0v-1"/>
              <line x1="12" y1="19" x2="12" y2="23"/>
            </svg>
          </div>
        </div>
      </div>
    </PhoneFrame>
  );
}

function TrendMini() {
  return (
    <PhoneFrame height={420}>
      <PhoneStatusBar />
      <div style={{ padding: '8px 14px 14px', flex: 1, background: LP.cream, overflow: 'hidden' }}>
        <div style={{ fontFamily: '"DM Sans"', fontSize: 10, fontWeight: 600, color: LP.gray, letterSpacing: '.12em', textTransform: 'uppercase' }}>30-day view</div>
        <div style={{ fontFamily: '"DM Serif Display"', fontSize: 24, color: LP.black, marginTop: 4, lineHeight: 1.1 }}>Holding steady.</div>
        <div style={{ fontFamily: '"DM Sans"', fontSize: 11, color: LP.gray, marginTop: 4, lineHeight: 1.45 }}>Within 1.4 lb of where you started maintenance.</div>

        {/* Chart card */}
        <div style={{
          marginTop: 14, padding: '12px 12px 8px',
          background: '#fff',
          border: `1px solid ${LP.border}`, borderRadius: 14,
        }}>
          <div style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 4,
          }}>
            <div style={{ fontFamily: '"DM Sans"', fontSize: 9, fontWeight: 600, color: LP.gray, letterSpacing: '.1em', textTransform: 'uppercase' }}>Weight trend</div>
            <div style={{ fontFamily: '"DM Sans"', fontSize: 9, fontWeight: 500, color: LP.green }}>Maintenance band</div>
          </div>
          <div style={{ height: 96, position: 'relative' }}>
            <BigChart />
          </div>
        </div>

        {/* Pattern callout — wireframe-style green-tinted */}
        <div style={{
          marginTop: 10,
          background: LP.greenLight,
          border: `1px solid ${LP.green}`,
          borderRadius: 12,
          padding: '10px 12px',
        }}>
          <div style={{ fontFamily: '"DM Sans"', fontSize: 9, fontWeight: 600, color: LP.green, letterSpacing: '.12em', textTransform: 'uppercase', marginBottom: 3 }}>
            Pattern Mira noticed
          </div>
          <div style={{ fontFamily: '"DM Sans"', fontSize: 11, color: LP.greenDark, lineHeight: 1.45 }}>
            Food noise spikes Sunday evenings. Want to plan a Sunday ritual together?
          </div>
        </div>
      </div>
    </PhoneFrame>
  );
}

function BigChart() {
  // Deterministic 30-day weight series — drifts within a 175 ± 3 lb band
  // Tiny pseudo-noise from sin so it isn't perfectly smooth, but stable across renders.
  const W = 200, H = 96;
  const center = 175;
  const bandHi = 178, bandLo = 172;
  const pts = Array.from({ length: 30 }, (_, i) => {
    const drift = Math.sin(i * 0.32) * 1.4;
    const wobble = Math.sin(i * 1.7) * 0.4 + Math.sin(i * 2.9 + 1) * 0.3;
    return center + drift + wobble + (i < 4 ? 0.6 : 0); // slightly higher early
  });
  // Y maps a weight in lb to chart pixel — fixed scale 170..180
  const yMin = 170, yMax = 180;
  const yOf = v => H - 6 - ((v - yMin) / (yMax - yMin)) * (H - 12);
  const xOf = i => (i / (pts.length - 1)) * W;
  const xs = pts.map((_, i) => xOf(i));
  const ys = pts.map(yOf);
  const line = xs.map((x, i) => `${i === 0 ? 'M' : 'L'} ${x.toFixed(2)} ${ys[i].toFixed(2)}`).join(' ');
  const fill = line + ` L ${W} ${H} L 0 ${H} Z`;
  const yBandHi = yOf(bandHi), yBandLo = yOf(bandLo);
  return (
    <svg width="100%" height="100%" viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none">
      <defs>
        <linearGradient id="lpch" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={LP.green} stopOpacity=".22"/>
          <stop offset="100%" stopColor={LP.green} stopOpacity="0"/>
        </linearGradient>
      </defs>
      {/* maintenance band */}
      <rect x="0" y={yBandHi} width={W} height={yBandLo - yBandHi} fill={LP.green} fillOpacity="0.07"/>
      <line x1="0" x2={W} y1={yBandHi} y2={yBandHi} stroke={LP.green} strokeOpacity="0.35" strokeDasharray="2 3" strokeWidth="0.8"/>
      <line x1="0" x2={W} y1={yBandLo} y2={yBandLo} stroke={LP.green} strokeOpacity="0.35" strokeDasharray="2 3" strokeWidth="0.8"/>
      {/* trend */}
      <path d={fill} fill="url(#lpch)"/>
      <path d={line} fill="none" stroke={LP.green} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
      <circle cx={xs[xs.length-1]} cy={ys[ys.length-1]} r="2.6" fill={LP.green}/>
      <circle cx={xs[xs.length-1]} cy={ys[ys.length-1]} r="5" fill={LP.green} fillOpacity="0.18"/>
    </svg>
  );
}

// ─── Section: Why it works (science) ───────────────────
function Science() {
  return (
    <section id="science" style={{
      background: LP.black,
      color: LP.cream,
      padding: '120px 32px',
    }}>
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start' }} className="lp-science-grid">
          <div>
            <Eyebrow><span style={{ color: '#a8c5b0' }}>Why this, why now</span></Eyebrow>
            <h2 style={{
              fontFamily: '"DM Serif Display", Georgia, serif',
              fontSize: 'clamp(36px, 4vw, 52px)',
              lineHeight: 1.1, color: LP.cream,
              margin: '20px 0 24px', letterSpacing: '-.01em',
              textWrap: 'balance',
            }}>
              The medication did its job. <em style={{ color: '#a8c5b0', fontStyle: 'italic' }}>What happens next is the actual work.</em>
            </h2>
            <p style={{
              fontFamily: '"DM Sans"', fontSize: 17, lineHeight: 1.65,
              color: '#c9c9c4', margin: 0, maxWidth: 520,
              textWrap: 'pretty',
            }}>
              The big trials get the headlines. The phase nobody studies enough is the one you're in: stopping. Mira was built on the published research, the patient testimony, and the day-to-day reality of GLP-1 discontinuation — not on diet-industry talking points.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            {[
              { stat: '67%', label: 'of patients regain ≥20% of lost weight within a year of stopping semaglutide.', src: 'JAMA, 2022' },
              { stat: '15-25%', label: 'of weight loss on GLP-1s comes from lean muscle. Maintaining it requires intentional protein and resistance training.', src: 'Obesity Reviews' },
              { stat: '#1', label: 'food noise is the most-cited returning symptom in published patient surveys after GLP-1 discontinuation.', src: 'Northwell Health & clinical patient reporting' },
            ].map((s, i) => (
              <div key={i} style={{
                padding: 24,
                border: `1px solid #2a2a2a`,
                borderRadius: 16,
                background: '#161616',
              }}>
                <div style={{
                  fontFamily: '"DM Serif Display"', fontSize: 36, color: '#a8c5b0',
                  lineHeight: 1, marginBottom: 8,
                }}>{s.stat}</div>
                <div style={{
                  fontFamily: '"DM Sans"', fontSize: 15, lineHeight: 1.5,
                  color: LP.cream, marginBottom: 10, textWrap: 'pretty',
                }}>{s.label}</div>
                <div style={{
                  fontFamily: '"DM Sans"', fontSize: 11, fontWeight: 600,
                  color: '#7d7d77', letterSpacing: '.06em', textTransform: 'uppercase',
                }}>Source · {s.src}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Section: Mira can talk back ─────────────────────
function VoiceCallout() {
  return (
    <section id="voice-callout" style={{
      background: LP.cream, padding: '120px 32px',
    }}>
      <div style={{
        maxWidth: 1080, margin: '0 auto',
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center',
      }} className="lp-voice-grid">
        <div>
          <Eyebrow>New: voice mode</Eyebrow>
          <h2 style={{
            fontFamily: '"DM Serif Display", Georgia, serif',
            fontSize: 'clamp(36px, 4vw, 52px)',
            lineHeight: 1.1, color: LP.black,
            margin: '20px 0 24px', letterSpacing: '-.01em',
            textWrap: 'balance',
          }}>
            Sometimes typing is too much. <em style={{ color: LP.green, fontStyle: 'italic' }}>Just talk.</em>
          </h2>
          <p style={{
            fontFamily: '"DM Sans"', fontSize: 17, lineHeight: 1.65,
            color: LP.gray, margin: 0, marginBottom: 32, textWrap: 'pretty',
          }}>
            For 9pm cravings, post-weigh-in spirals, or the moments when you can't quite name what's wrong — open the app, tap Voice, and start a conversation with Mira. She listens. She answers out loud. No keyboard, no screen-stare.
          </p>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
            {[
              'Hands-free — works while you walk, drive, or fold laundry',
              'Mira speaks in a calm, even voice, not a hype-machine',
              'Switch to chat any time without losing the thread',
            ].map((t, i) => (
              <li key={i} style={{
                display: 'flex', gap: 12, alignItems: 'flex-start',
                fontFamily: '"DM Sans"', fontSize: 15, color: LP.black, lineHeight: 1.5,
              }}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={LP.green} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, marginTop: 2 }}>
                  <polyline points="20 6 9 17 4 12"/>
                </svg>
                <span>{t}</span>
              </li>
            ))}
          </ul>
          <div style={{
            marginTop: 32,
            padding: '14px 18px',
            background: LP.greenLight, borderRadius: 14,
            fontFamily: '"DM Sans"', fontSize: 14, color: LP.greenDark, lineHeight: 1.5,
          }}>
            ↑ Try the Voice button at the top of the demo. Yes — it actually listens.
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <VoiceCoach defaultMode="voice" />
        </div>
      </div>
    </section>
  );
}

// ─── Section: FAQ ──────────────────────────────────────
function FAQ() {
  const items = [
    { q: 'What is a GLP-1 off ramp?', a: "The GLP-1 off ramp is the transition from being on a GLP-1 medication like Ozempic, Wegovy, Zepbound, or Mounjaro to maintaining your weight without it.\n\nKeepAfter is built specifically for that transition — whether you're still on the drug and preparing, tapering down, or already off. The earlier you start, the more useful Mira is, because she learns your patterns before the food noise comes back." },
    { q: 'How do you keep weight off after Ozempic?', a: "By rebuilding the structure the medication used to provide.\n\nConsistent protein, resistance training to protect lean muscle, a routine for the moments food noise comes back, and a way to read the scale as a trend instead of a verdict. None of this is a quick fix. All of it is doable — and it's exactly what KeepAfter and Mira walk you through, day by day." },
    { q: 'What happens when I stop my GLP-1?', a: "Appetite signals the medication quieted typically return within weeks. About two-thirds of people regain a significant share of the weight they lost within a year of stopping (JAMA, 2022). For many, food noise is louder than it was before they started.\n\nIt's biology, not willpower — and it's the exact problem KeepAfter is built for." },
    { q: 'Is rebound weight gain after Ozempic inevitable?', a: "No. The default outcome is regain, but it isn't inevitable.\n\nThe people who hold their weight after stopping a GLP-1 have a few things in common: they protect lean muscle through protein and resistance training, they have a plan for food-noise spikes instead of white-knuckling them, and they read the trend, not the snapshot. That's the system KeepAfter helps you build — before you need it." },
    { q: 'Is KeepAfter for men too?', a: "Yes. KeepAfter is for anyone on or after a GLP-1 — men and women. The biology of regain doesn't care about gender, and neither does Mira.\n\nOur demos often use Sarah and Marcus because they're the canonical personas we built around, but the product itself is built for you, whoever you are." },
    { q: "I'm still on my GLP-1. Is KeepAfter for me?", a: "Especially.\n\nThe window while the medication is still doing the heavy lifting is the best possible time to build the routines you'll need when it stops. Mira learns your patterns — what you eat, when food noise spikes, what works for you — before the food noise comes back. By the time you taper or stop, the off ramp is already built." },
    { q: 'What is "your vibe"?', a: "Your vibe is a living map of what's around you this week. Emotions, times of day, food triggers, situations.\n\nBigger nodes mean louder signals. Tap one and Mira tells you what it means and what to do with it. It's the part of KeepAfter people stay for — the one place that actually shows you what's driving your week, instead of just logging it." },
    { q: 'Is Mira a doctor?', a: "No. Mira is an AI — trained on the published research, clinical protocols from board-certified obesity-medicine physicians, and the lived experience of people coming off GLP-1s.\n\nThat means she's great for the day-to-day: food noise at 9pm, scale anxiety, planning meals, talking through hard moments. She's not a replacement for your doctor, therapist, or dietitian — and she'll tell you so when something needs a real human.\n\nIf you mention anything that points to an eating disorder, mental-health crisis, or medical emergency, Mira pauses coaching and connects you to the right resources. That's a hard line, not a soft promise." },
    { q: 'Will you prescribe me anything?', a: "Never.\n\nThat's the entire point. Every other app in this space is owned by, partnered with, or paid by someone trying to keep you on a prescription. We don't prescribe GLP-1s, supplements, compounded versions, or anything else.\n\nIf you're considering changes to your medication, that's a conversation for your prescriber. Mira can help you write down what to ask them — but the decision is yours and theirs, never ours." },
    { q: 'Is my data private?', a: "Yes. Three things you should know.\n\nWe don't sell your data — not to advertisers, not to insurance companies, not to anyone. This is a brand-level commitment, not a privacy-policy footnote.\n\nYour conversations with Mira are encrypted in transit and at rest. Only you can see them.\n\nYou can export everything we have on you, or delete it permanently, in two taps from the app. No support ticket, no retention email, no friction." },
    { q: 'When will it be on Android?', a: "Early 2026. We launched on iOS first because the people we built this for over-index on iPhone, and shipping one platform well beats shipping two badly. Android is in active design now — drop your email at the bottom of this page and we'll send the invite the day it goes live." },
    { q: 'How do I get in?', a: "KeepAfter is in private beta. Join the waitlist at the bottom of this page — we're onboarding new members in small cohorts so Mira gets the attention to learn your patterns. Beta members get priority access and early-supporter perks at launch." },
  ];
  const [open, setOpen] = useStateLP([0, 4]); // multi-open; default: off ramp + men too
  const toggle = (i) => setOpen(o => o.includes(i) ? o.filter(x => x !== i) : [...o, i]);
  return (
    <section id="faq" style={{ background: LP.cream, padding: '120px 32px', borderTop: `1px solid ${LP.border}` }}>
      <div style={{ maxWidth: 760, margin: '0 auto' }}>
        <div style={{ marginBottom: 48 }}>
          <Eyebrow>Questions you might have</Eyebrow>
          <h2 style={{
            fontFamily: '"DM Serif Display", Georgia, serif',
            fontSize: 'clamp(36px, 4vw, 52px)',
            lineHeight: 1.1, color: LP.black,
            margin: '20px 0 0', letterSpacing: '-.01em',
            textWrap: 'balance',
          }}>
            Straight answers, <em style={{ color: LP.green, fontStyle: 'italic' }}>no hedging.</em>
          </h2>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {items.map((it, i) => {
            const isOpen = open.includes(i);
            return (
            <div key={i} style={{ borderTop: `1px solid ${LP.border}`, ...(i === items.length - 1 ? { borderBottom: `1px solid ${LP.border}` } : {}) }}>
              <button
                onClick={() => toggle(i)}
                style={{
                  width: '100%', padding: '24px 0',
                  background: 'transparent', border: 'none', cursor: 'pointer',
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  fontFamily: '"DM Sans"', fontSize: 18, fontWeight: 500, color: LP.black,
                  textAlign: 'left',
                }}>
                {it.q}
                <span style={{
                  width: 28, height: 28, borderRadius: '50%',
                  background: isOpen ? LP.green : LP.grayLight,
                  color: isOpen ? LP.cream : LP.black,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 18, lineHeight: 1, fontWeight: 400,
                  transition: 'all .2s',
                  transform: isOpen ? 'rotate(45deg)' : 'none',
                  flexShrink: 0,
                }}>+</span>
              </button>
              {isOpen && (
                <div style={{
                  padding: '0 0 24px',
                  fontFamily: '"DM Sans"', fontSize: 16, lineHeight: 1.65,
                  color: LP.gray, maxWidth: 640, textWrap: 'pretty',
                  animation: 'vc-fade-in .25s ease-out',
                }}>{it.a}</div>
              )}
            </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ─── Section: CTA ─────────────────────────────────────
function CTA() {
  const [email, setEmail] = useStateLP('');
  const [status, setStatus] = useStateLP('idle'); // idle | submitting | success | error | duplicate
  const [errorMsg, setErrorMsg] = useStateLP('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!email) return;
    setStatus('submitting');
    setErrorMsg('');
    try {
      const res = await fetch('https://after-backend.vercel.app/api/waitlist', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email: email.trim().toLowerCase(), source: 'founding500' }),
      });
      if (res.status === 409) {
        setStatus('duplicate');
        return;
      }
      if (res.ok) {
        setStatus('success');
      } else {
        const data = await res.json().catch(() => ({}));
        setErrorMsg((data && data.error) || 'Something went wrong. Please try again.');
        setStatus('error');
      }
    } catch {
      setErrorMsg('Network error. Please try again.');
      setStatus('error');
    }
  };

  const submitted = status === 'success';
  const duplicate = status === 'duplicate';
  const submitting = status === 'submitting';

  return (
    <section id="cta" style={{
      background: LP.green, padding: '120px 32px',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(circle at 80% 30%, ${LP.greenDark}aa 0%, transparent 50%), radial-gradient(circle at 20% 80%, ${LP.greenDark}66 0%, transparent 60%)`,
        pointerEvents: 'none',
      }} />
      <div style={{ maxWidth: 760, margin: '0 auto', position: 'relative', textAlign: 'center' }}>
        {/* Founding 500 badge */}
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '6px 14px',
          background: 'rgba(255,255,255,0.15)', color: LP.cream,
          borderRadius: 999, marginBottom: 28,
          fontFamily: '"DM Sans"', fontSize: 12, fontWeight: 600,
          letterSpacing: '.06em', textTransform: 'uppercase',
          border: '1px solid rgba(255,255,255,0.25)',
        }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#a8ffbc' }} />
          Founding 500 · Limited spots
        </div>
        <h2 style={{
          fontFamily: '"DM Serif Display", Georgia, serif',
          fontSize: 'clamp(40px, 5vw, 64px)',
          lineHeight: 1.05, color: LP.cream,
          margin: '0 0 20px', letterSpacing: '-.015em',
          textWrap: 'balance',
        }}>
          $39/mo for life.{' '}
          <em style={{ fontStyle: 'italic', color: '#d4e3d8' }}>First 500 members lock this price forever.</em>
        </h2>
        <p style={{
          fontFamily: '"DM Sans"', fontSize: 18, lineHeight: 1.6,
          color: '#d4e3d8', margin: '0 auto 40px', maxWidth: 520,
          textWrap: 'pretty',
        }}>
          Founding 500 — $39/mo for life. We'll never raise your price. Includes everything: Mira, memory, pattern map, unlimited check-ins.
        </p>
        {!submitted && !duplicate ? (
          <form onSubmit={handleSubmit}
            style={{
              display: 'flex', gap: 8, maxWidth: 460, margin: '0 auto',
              padding: 6, background: LP.cream, borderRadius: 16,
            }}>
            <input
              type="email" required placeholder="your@email.com" name="email"
              value={email} onChange={e => setEmail(e.target.value)}
              disabled={submitting}
              style={{
                flex: 1, border: 'none', outline: 'none',
                background: 'transparent', padding: '12px 14px',
                fontFamily: '"DM Sans"', fontSize: 16, color: LP.black,
              }}
            />
            <button type="submit" disabled={submitting} style={{
              padding: '12px 22px', background: LP.green, color: LP.cream,
              fontFamily: '"DM Sans"', fontSize: 15, fontWeight: 600,
              border: 'none', borderRadius: 12, cursor: submitting ? 'wait' : 'pointer',
              opacity: submitting ? 0.7 : 1, whiteSpace: 'nowrap',
            }}>{submitting ? 'Claiming…' : 'Claim your spot'}</button>
          </form>
        ) : (
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 12,
            padding: '14px 22px',
            background: LP.cream, borderRadius: 16,
            fontFamily: '"DM Sans"', fontSize: 16,
            color: duplicate ? LP.gray : LP.green,
            fontWeight: 600,
          }}>
            {!duplicate && (
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={LP.green} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                <polyline points="20 6 9 17 4 12"/>
              </svg>
            )}
            {duplicate
              ? "You're already on the list. Check your inbox!"
              : "You're in. Check your inbox."}
          </div>
        )}
        {status === 'error' && (
          <div style={{
            marginTop: 16,
            fontFamily: '"DM Sans"', fontSize: 13, color: '#ffd9d9',
          }}>{errorMsg}</div>
        )}
        <div style={{
          marginTop: 28,
          fontFamily: '"DM Sans"', fontSize: 13, color: '#a8c5b0',
        }}>iOS only for now · Android in 2026 · No spam, ever · Cancel anytime</div>
      </div>
    </section>
  );
}

// ─── Footer ────────────────────────────────────────────
function Footer() {
  return (
    <footer style={{
      background: LP.cream, padding: '60px 32px 40px',
      borderTop: `1px solid ${LP.border}`,
    }}>
      <div style={{
        maxWidth: 1240, margin: '0 auto',
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
        flexWrap: 'wrap', gap: 32,
      }}>
        <div style={{ maxWidth: 320 }}>
          <Wordmark />
          <div style={{
            marginTop: 14,
            fontFamily: '"DM Sans"', fontSize: 13, color: LP.gray, lineHeight: 1.55,
          }}>The companion for the GLP-1 off ramp — for men and women on or after Ozempic, Wegovy, Zepbound, and Mounjaro. Made by KeepAfter, Inc.</div>
        </div>
        <div style={{ display: 'flex', gap: 48, flexWrap: 'wrap' }}>
          <FooterCol title="Product" items={[{label:'How it works', href:'#how'},{label:'Why it works', href:'#science'},{label:'Pricing', href:'#pricing'},{label:'Join the beta', href:'#cta'}]}/>
          <FooterCol title="Company" items={[{label:'Contact', href:'mailto:hello@keepafter.app'},{label:'Press inquiries', href:'mailto:press@keepafter.app'}]}/>
          <FooterCol title="Trust" items={[{label:'Privacy', href:'mailto:privacy@keepafter.app'},{label:'Medical disclaimer', href:'#cta'}]}/>
        </div>
      </div>
      <div style={{
        maxWidth: 1240, margin: '40px auto 0', paddingTop: 24,
        borderTop: `1px solid ${LP.border}`,
        display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12,
        fontFamily: '"DM Sans"', fontSize: 12, color: LP.gray,
      }}>
        <div>© 2026 KeepAfter, Inc. All rights reserved.</div>
        <div>Not medical advice. Talk to your doctor before changing any treatment plan.</div>
      </div>
    </footer>
  );
}

function FooterCol({ title, items }) {
  return (
    <div>
      <div style={{
        fontFamily: '"DM Sans"', fontSize: 11, fontWeight: 600,
        color: LP.black, letterSpacing: '.08em', textTransform: 'uppercase',
        marginBottom: 14,
      }}>{title}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map((it, i) => {
          const item = typeof it === 'string' ? { label: it, href: '#' } : it;
          return (
            <a key={i} href={item.href} style={{
              fontFamily: '"DM Sans"', fontSize: 13, color: LP.gray,
              textDecoration: 'none',
            }}>{item.label}</a>
          );
        })}
      </div>
    </div>
  );
}

// ─── Section: Who this is for ────────────────────────
function WhoFor() {
  const yes = [
    "You stopped a GLP-1 in the last 90 days",
    "You're tapering down or planning to",
    "You're still on your GLP-1 and want to build the off ramp now",
    "You're worried about weight regain after Ozempic, Wegovy, Zepbound, or Mounjaro",
    "You don't want another prescription, ever",
  ];
  const no = [
    "You want a coach to tell you what to eat each day",
    "You want a quick-fix pill or supplement stack",
  ];
  return (
    <section id="who-for" style={{
      background: LP.greenLighter, padding: '120px 32px',
      borderTop: `1px solid ${LP.border}`,
    }}>
      <div style={{ maxWidth: 980, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56, maxWidth: 680, marginInline: 'auto' }}>
          <Eyebrow>Who this is for</Eyebrow>
          <h2 style={{
            fontFamily: '"DM Serif Display", Georgia, serif',
            fontSize: 'clamp(36px, 4.4vw, 52px)',
            lineHeight: 1.2, color: LP.black,
            margin: '20px auto 16px', letterSpacing: '-.015em',
            textWrap: 'balance',
          }}>
            KeepAfter is for the moment <em style={{ color: LP.green, fontStyle: 'italic' }}>you stop.</em>
          </h2>
          <p style={{
            fontFamily: '"DM Sans"', fontSize: 16, lineHeight: 1.6, color: LP.gray,
            margin: '0 auto', maxWidth: 540, textWrap: 'pretty',
          }}>
            We built one thing very well, for one specific situation. If that's you, we'll be the most useful app on your phone.
          </p>
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24,
        }} className="lp-whofor-grid">
          <div style={{
            background: LP.cream, border: `1px solid ${LP.border}`,
            borderRadius: 20, padding: '32px 32px 28px',
          }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '5px 11px', background: LP.greenLight, color: LP.greenDark,
              borderRadius: 999, fontFamily: '"DM Sans"', fontSize: 11,
              fontWeight: 600, letterSpacing: '.06em', textTransform: 'uppercase',
              marginBottom: 18,
            }}>
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
              KeepAfter is for you if
            </div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
              {yes.map((t, i) => (
                <li key={i} style={{
                  display: 'flex', gap: 12, alignItems: 'flex-start',
                  fontFamily: '"DM Sans"', fontSize: 16, color: LP.black, lineHeight: 1.45,
                }}>
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={LP.green} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, marginTop: 2 }}>
                    <polyline points="20 6 9 17 4 12"/>
                  </svg>
                  <span>{t}</span>
                </li>
              ))}
            </ul>
          </div>
          <div style={{
            background: 'transparent', border: `1px dashed ${LP.border}`,
            borderRadius: 20, padding: '32px 32px 28px',
          }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '5px 11px', background: LP.grayLight, color: LP.gray,
              borderRadius: 999, fontFamily: '"DM Sans"', fontSize: 11,
              fontWeight: 600, letterSpacing: '.06em', textTransform: 'uppercase',
              marginBottom: 18,
            }}>
              Not the right fit yet
            </div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
              {no.map((t, i) => (
                <li key={i} style={{
                  display: 'flex', gap: 12, alignItems: 'flex-start',
                  fontFamily: '"DM Sans"', fontSize: 16, color: LP.gray, lineHeight: 1.45,
                }}>
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={LP.gray} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, marginTop: 2 }}>
                    <line x1="5" y1="12" x2="19" y2="12"/>
                  </svg>
                  <span>{t}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Section: Pricing ─────────────────────────────────────────────
function Pricing() {

  const tiers = [
    {
      id: 'free',
      name: 'Free',
      tagline: 'See what AFTER feels like. No card, no trial timer.',
      price: 0,
      priceSuffix: 'forever',
      featured: false,
      features: [
        'Daily weight + 14-day trend chart',
        'Daily food-noise check-in',
        '3 Mira messages a day',
        'Mira starts fresh every chat — no memory',
        'iOS app + email support',
      ],
      cta: 'Download AFTER',
      ctaHref: '#cta',
    },
    {
      id: 'pro',
      name: 'Pro',
      tagline: 'Mira remembers you. Your Vibe knowledge graph unlocks. Unlimited chat.',
      price: 99.99,
      priceSuffix: '/year',
      featured: true,
      badge: 'Most popular',
      sub: '3-day free trial · or $19.99 every 4 weeks',
      features: [
        'Everything in Free',
        'Mira with persistent memory across sessions',
        'Your Vibe — the personal knowledge graph',
        'Unlimited Mira chat',
        'Weekly Sunday summary from Mira',
        'Full searchable chat history',
        'Pattern detection (e.g. "Sundays spike")',
      ],
      cta: 'Start 3-day free trial',
      ctaHref: '#cta',
    },
    {
      id: 'lifetime',
      name: 'Lifetime',
      tagline: 'Pay once. Mira remembers you forever. No renewals, no surprises.',
      price: 179.99,
      priceSuffix: 'one-time',
      featured: false,
      features: [
        'Everything in Pro — forever',
        'No annual renewals, ever',
        'Locks in current Mira features for life',
        'First in line for new features',
      ],
      cta: 'Get Lifetime',
      ctaHref: '#cta',
    },
  ];

  return (
    <section id="pricing" style={{ background: LP.cream, padding: '120px 32px 80px', borderTop: `1px solid ${LP.border}` }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        {/* Header */}
        <div style={{ textAlign: 'center', marginBottom: 36, maxWidth: 760, marginInline: 'auto' }}>
          <Eyebrow>Pricing</Eyebrow>
          <h2 style={{
            fontFamily: '"DM Serif Display", Georgia, serif',
            fontSize: 'clamp(36px, 4.4vw, 56px)',
            lineHeight: 1.05, color: LP.black,
            margin: '20px auto 20px', letterSpacing: '-.015em',
            textWrap: 'balance',
          }}>
            The first program built for <em style={{ color: LP.green, fontStyle: 'italic' }}>what comes after.</em>
          </h2>
          <p style={{
            fontFamily: '"DM Sans"', fontSize: 17, lineHeight: 1.6, color: LP.gray,
            margin: '0 auto', maxWidth: 600, textWrap: 'pretty',
          }}>
            You did the hard work on GLP-1. KeepAfter protects your weight, muscle, and mental peace — without another prescription.
          </p>
        </div>

        {/* Honest pricing reassurance — no fake scarcity */}
        <div style={{
          maxWidth: 720, margin: '0 auto 48px',
          background: LP.cream, color: LP.black,
          border: `1px solid ${LP.border}`,
          borderRadius: 16, padding: '18px 24px',
          display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap',
          justifyContent: 'center', textAlign: 'center',
        }}>
          <div style={{
            fontFamily: '"DM Sans"', fontSize: 14, color: LP.black, lineHeight: 1.5,
          }}>
            <strong style={{ color: LP.greenDark }}>3-day free trial</strong> on Pro.
            <span style={{ color: LP.gray }}> Cancel in one tap in your Apple ID. No annual lock-in, no quiz-to-paywall.</span>
          </div>
        </div>

        {/* Tiers */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20,
          maxWidth: 1080, margin: '0 auto',
          alignItems: 'stretch',
        }} className="lp-pricing-grid">
          {tiers.map(t => {
            const isMain = t.featured;
            return (
              <div key={t.id} style={{
                background: isMain ? LP.greenLighter : LP.cream,
                color: LP.black,
                border: `1px solid ${isMain ? LP.green : LP.border}`,
                borderWidth: isMain ? 2 : 1,
                borderRadius: 24,
                padding: '40px 28px 32px',
                position: 'relative',
                display: 'flex', flexDirection: 'column',
                boxShadow: isMain ? '0 30px 80px -30px rgba(61,107,79,0.25)' : 'none',
                transform: isMain ? 'translateY(-4px)' : 'none',
              }}>
                {t.badge && (
                  <div style={{
                    position: 'absolute', top: -14, left: '50%', transform: 'translateX(-50%)',
                    padding: '6px 14px',
                    background: LP.green, color: LP.cream,
                    fontFamily: '"DM Sans"', fontSize: 11, fontWeight: 600,
                    letterSpacing: '.08em', textTransform: 'uppercase',
                    borderRadius: 999, whiteSpace: 'nowrap',
                  }}>{t.badge}</div>
                )}
                <div style={{
                  fontFamily: '"DM Sans"', fontSize: 13, fontWeight: 600,
                  color: LP.green, letterSpacing: '.06em', textTransform: 'uppercase',
                  marginBottom: 8,
                }}>{t.name}</div>
                {t.sub && (
                  <div style={{
                    fontFamily: '"DM Sans"', fontSize: 12, fontWeight: 500,
                    color: LP.greenDark, marginBottom: 8,
                  }}>{t.sub}</div>
                )}
                <div style={{
                  fontFamily: '"DM Serif Display"', fontSize: 18, lineHeight: 1.3,
                  color: LP.black, margin: '4px 0 24px', minHeight: 60, textWrap: 'balance',
                }}>{t.tagline}</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 6 }}>
                  <span style={{
                    fontFamily: '"DM Serif Display"', fontSize: t.price === 0 ? 44 : 50, lineHeight: 1,
                    color: LP.black, letterSpacing: '-.02em',
                  }}>{t.price === 0 ? 'Free' : `$${Number.isInteger(t.price) ? t.price : t.price.toFixed(2)}`}</span>
                  <span style={{
                    fontFamily: '"DM Sans"', fontSize: 13, color: LP.gray,
                  }}>{t.priceSuffix}</span>
                </div>
                <ul style={{ listStyle: 'none', padding: 0, margin: '24px 0 28px', display: 'flex', flexDirection: 'column', gap: 11, flex: 1 }}>
                  {t.features.map((f, i) => (
                    <li key={i} style={{
                      display: 'flex', gap: 10, alignItems: 'flex-start',
                      fontFamily: '"DM Sans"', fontSize: 13.5,
                      color: LP.black, lineHeight: 1.45,
                    }}>
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={LP.green} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, marginTop: 3 }}>
                        <polyline points="20 6 9 17 4 12"/>
                      </svg>
                      <span>{f}</span>
                    </li>
                  ))}
                </ul>
                <a href={t.ctaHref} style={{
                  display: 'block', textAlign: 'center',
                  padding: '14px 18px',
                  background: isMain ? LP.green : 'transparent',
                  color: isMain ? LP.cream : LP.black,
                  border: isMain ? 'none' : `1px solid ${LP.black}`,
                  fontFamily: '"DM Sans"', fontSize: 15, fontWeight: 600,
                  borderRadius: 12, textDecoration: 'none',
                }}>{t.cta}</a>
              </div>
            );
          })}
        </div>

        {/* Subscription disclosure — Apple Guideline 3.1.2 + plain-English honesty. */}
        <div style={{
          maxWidth: 820, margin: '32px auto 0', padding: '0 8px',
          fontFamily: '"DM Sans"', fontSize: 11.5, color: LP.gray, lineHeight: 1.55,
          textAlign: 'center',
        }}>
          Subscriptions auto-renew unless cancelled at least 24 hours before the end of the current period. Payment is charged to your Apple ID at confirmation of purchase. Manage or cancel in your Apple ID settings any time after purchase. See <a href="/terms" style={{ color: LP.greenDark, textDecoration: 'underline' }}>Terms</a> and <a href="/privacy" style={{ color: LP.greenDark, textDecoration: 'underline' }}>Privacy</a>.
        </div>

        {/* Trust signals */}
        <div style={{
          maxWidth: 1080, margin: '40px auto 0',
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16,
        }} className="lp-trust-grid">
          {[
            { t: 'No annual trap', d: 'Pay monthly, yearly, or once — your choice. We don\'t lock you in to keep our churn metrics looking better.' },
            { t: 'One-tap cancel', d: 'Cancel directly in Apple ID settings — no chat-bot maze, no retention call, no guilt.' },
            { t: 'No quiz-to-paywall', d: 'You see prices before signup. Always. No "personalized plan" sleight-of-hand.' },
          ].map((it, i) => (
            <div key={i} style={{
              padding: '20px 4px',
              borderTop: `1px solid ${LP.border}`,
            }}>
              <div style={{
                display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8,
              }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={LP.green} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                  <polyline points="20 6 9 17 4 12"/>
                </svg>
                <span style={{
                  fontFamily: '"DM Sans"', fontSize: 14, fontWeight: 600, color: LP.black,
                }}>{it.t}</span>
              </div>
              <div style={{
                fontFamily: '"DM Sans"', fontSize: 13, lineHeight: 1.5, color: LP.gray,
              }}>{it.d}</div>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 28, textAlign: 'center',
          fontFamily: '"DM Sans"', fontSize: 13, color: LP.gray,
        }}>
          7-day free trial on every plan · iOS only at launch
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  Nav, Hero, Problem, HowItWorks, Science, VoiceCallout, WhoFor, Pricing, FAQ, CTA, Footer,
  OffRampStages, OnboardingStrip, YourVibe, MiraRemembers, TrustSafety,
});

// ─── Section: Wherever you are on the off ramp ─────────
function OffRampStages() {
  const stages = [
    {
      tag: 'On the drug',
      title: 'On the drug, building the off ramp.',
      body: "The medication is doing the heavy lifting. Use that quiet window to build the routines you'll need when it stops. Mira learns your patterns before the food noise comes back — so the off ramp is already built when you taper.",
    },
    {
      tag: 'Off the drug',
      title: 'Off the drug, on the off ramp.',
      body: "Food noise is back. Mira helps you ride it out without spiraling — read the trend, plan around the spikes, protect your muscle, hold your line.",
    },
  ];
  return (
    <section id="off-ramp" style={{
      background: LP.cream, padding: '100px 32px 80px',
      borderTop: `1px solid ${LP.border}`,
    }}>
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>
        <div style={{ maxWidth: 760, marginBottom: 48 }}>
          <Eyebrow>The off ramp</Eyebrow>
          <h2 style={{
            fontFamily: '"DM Serif Display", Georgia, serif',
            fontSize: 'clamp(34px, 4vw, 50px)',
            lineHeight: 1.1, color: LP.black,
            margin: '20px 0 14px', letterSpacing: '-.01em',
            textWrap: 'balance',
          }}>
            Wherever you are on the off ramp, <em style={{ color: LP.green, fontStyle: 'italic' }}>we meet you there.</em>
          </h2>
          <p style={{
            fontFamily: '"DM Sans"', fontSize: 17, lineHeight: 1.6,
            color: LP.gray, margin: 0, maxWidth: 620, textWrap: 'pretty',
          }}>
            KeepAfter works for people on or after Ozempic, Wegovy, Zepbound, and Mounjaro. Tapering off a GLP-1, planning to stop, or already living life after Ozempic — Mira is built for the same job either way: hold the line.
          </p>
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20,
        }} className="lp-offramp-grid">
          {stages.map((s, i) => (
            <div key={i} style={{
              background: i === 0 ? LP.greenLighter : LP.cream,
              border: `1px solid ${i === 0 ? LP.greenLight : LP.border}`,
              borderRadius: 24, padding: 36,
            }}>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '5px 11px', background: LP.greenLight, color: LP.greenDark,
                borderRadius: 999, fontFamily: '"DM Sans"', fontSize: 11,
                fontWeight: 600, letterSpacing: '.06em', textTransform: 'uppercase',
                marginBottom: 18,
              }}>{s.tag}</div>
              <h3 style={{
                fontFamily: '"DM Serif Display", Georgia, serif',
                fontSize: 26, lineHeight: 1.2, color: LP.black,
                margin: '0 0 14px', textWrap: 'balance',
              }}>{s.title}</h3>
              <p style={{
                fontFamily: '"DM Sans"', fontSize: 15.5, lineHeight: 1.6,
                color: LP.gray, margin: 0, textWrap: 'pretty',
              }}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Section: Onboarding filmstrip (4 steps) ───────────
function OnboardingStrip() {
  const steps = [
    { n: '01', title: 'Your name', body: "Hi, I'm Mira. What should I call you?", chip: 'Sarah' },
    { n: '02', title: 'Your GLP-1 history', body: 'Where are you on the off ramp?', chip: 'On Wegovy · tapering' },
    { n: '03', title: 'Your priorities', body: 'What matters most this season?', chip: 'Hold weight · keep muscle' },
    { n: '04', title: 'What Mira is — and isn\'t', body: "I'm an AI coach, not a doctor. For urgent risk I'll pause and point you to the right help.", chip: 'Got it' },
  ];
  return (
    <section id="onboarding" style={{
      background: LP.greenLighter, padding: '100px 32px',
      borderTop: `1px solid ${LP.border}`,
    }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ maxWidth: 760, marginBottom: 40 }}>
          <Eyebrow>Onboarding</Eyebrow>
          <h2 style={{
            fontFamily: '"DM Serif Display", Georgia, serif',
            fontSize: 'clamp(32px, 3.8vw, 46px)',
            lineHeight: 1.1, color: LP.black,
            margin: '20px 0 14px', letterSpacing: '-.01em',
            textWrap: 'balance',
          }}>
            Two minutes to set up. <em style={{ color: LP.green, fontStyle: 'italic' }}>Built around you.</em>
          </h2>
          <p style={{ fontFamily: '"DM Sans"', fontSize: 16, lineHeight: 1.6, color: LP.gray, margin: 0, maxWidth: 620 }}>
            Four short questions. No quiz-to-paywall. Mira starts learning your patterns from the first answer.
          </p>
        </div>
        <div className="lp-onboard-strip" style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16,
        }}>
          {steps.map((s, i) => (
            <div key={i} style={{
              background: LP.cream, border: `1px solid ${LP.border}`,
              borderRadius: 20, padding: 20, display: 'flex', flexDirection: 'column', gap: 14,
              minWidth: 220,
            }}>
              {/* Mini phone */}
              <div style={{
                background: '#0f0f0f', borderRadius: 22, padding: 6,
                boxShadow: '0 20px 40px -20px rgba(15,15,15,0.25)',
              }}>
                <div style={{
                  background: LP.cream, borderRadius: 16, padding: '22px 14px 16px',
                  minHeight: 220, display: 'flex', flexDirection: 'column', gap: 10,
                  position: 'relative',
                }}>
                  <div style={{
                    position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)',
                    width: 50, height: 14, borderRadius: 10, background: '#0f0f0f',
                  }} />
                  <div style={{
                    fontFamily: '"DM Sans"', fontSize: 10, fontWeight: 600,
                    color: LP.green, letterSpacing: '.12em', textTransform: 'uppercase',
                    marginTop: 4,
                  }}>Step {s.n} of 04</div>
                  <div style={{
                    fontFamily: '"DM Serif Display"', fontSize: 19, color: LP.black,
                    lineHeight: 1.2,
                  }}>{s.title}</div>
                  <div style={{
                    fontFamily: '"DM Sans"', fontSize: 12, color: LP.gray,
                    lineHeight: 1.5,
                  }}>{s.body}</div>
                  <div style={{ flex: 1 }} />
                  <div style={{
                    alignSelf: 'flex-start',
                    padding: '7px 11px', borderRadius: 999,
                    background: LP.greenLight, color: LP.greenDark,
                    fontFamily: '"DM Sans"', fontSize: 11, fontWeight: 600,
                  }}>{s.chip}</div>
                  <div style={{
                    height: 36, borderRadius: 10, background: LP.green,
                    color: LP.cream, fontFamily: '"DM Sans"', fontSize: 12, fontWeight: 600,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>Continue</div>
                </div>
              </div>
              <div style={{
                fontFamily: '"DM Sans"', fontSize: 12, fontWeight: 600,
                color: LP.gray, letterSpacing: '.08em', textTransform: 'uppercase',
              }}>{s.n} · {s.title}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Section: Your vibe ────────────────────────────────
function YourVibe() {
  // 10 nodes laid out around the canvas; weight drives radius
  const nodes = [
    { label: 'Stress',         x: 280, y: 180, w: 1.0, color: LP.green },
    { label: 'After dinner',   x: 410, y: 230, w: 0.95, color: LP.green },
    { label: 'Sunday nights',  x: 200, y: 280, w: 0.7, color: LP.greenDark },
    { label: 'Carbs',          x: 350, y: 330, w: 0.6, color: LP.greenDark },
    { label: 'Weigh-in',       x: 130, y: 180, w: 0.55, color: LP.green },
    { label: 'Work stress',    x: 470, y: 130, w: 0.5, color: LP.greenDark },
    { label: 'Late nights',    x: 470, y: 320, w: 0.4, color: LP.green },
    { label: 'Travel',         x: 90,  y: 350, w: 0.35, color: LP.gray },
    { label: 'Cardio dread',   x: 280, y: 80,  w: 0.32, color: LP.gray },
    { label: 'Protein wins',   x: 60,  y: 110, w: 0.3, color: LP.gray },
  ];
  const edges = [
    [0,1],[0,2],[0,4],[1,3],[1,6],[2,3],[4,5],[0,5],[3,6],[2,7],[8,5],[9,4],
  ];
  const r = (w) => 22 + w * 26;

  return (
    <section id="vibe" style={{
      background: LP.cream, padding: '120px 32px',
      borderTop: `1px solid ${LP.border}`,
    }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ maxWidth: 720, marginBottom: 48 }}>
          <Eyebrow>The reason people stay</Eyebrow>
          <h2 style={{
            fontFamily: '"DM Serif Display", Georgia, serif',
            fontSize: 'clamp(36px, 4.2vw, 54px)',
            lineHeight: 1.1, color: LP.black,
            margin: '20px 0 16px', letterSpacing: '-.01em',
            textWrap: 'balance',
          }}>
            Your vibe: <em style={{ color: LP.green, fontStyle: 'italic' }}>the map of your week.</em>
          </h2>
          <p style={{
            fontFamily: '"DM Sans"', fontSize: 17, lineHeight: 1.6,
            color: LP.gray, margin: 0, maxWidth: 620, textWrap: 'pretty',
          }}>
            Vibe is a living knowledge graph of what's around you this week — emotions, times of day, food triggers, situations. Bigger nodes mean louder signals. Tap one and Mira tells you what it means.
          </p>
        </div>

        <div className="lp-vibe-grid" style={{
          display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 32, alignItems: 'start',
        }}>
          {/* Vibe map */}
          <div style={{
            background: LP.cream, border: `1px solid ${LP.border}`,
            borderRadius: 24, padding: 24,
          }}>
            <div style={{
              fontFamily: '"DM Sans"', fontSize: 12, fontWeight: 600,
              color: LP.gray, letterSpacing: '.1em', textTransform: 'uppercase',
              marginBottom: 4,
            }}>Your vibe this week.</div>
            <div style={{
              fontFamily: '"DM Serif Display"', fontSize: 22, color: LP.black,
              lineHeight: 1.25, marginBottom: 12, textWrap: 'balance',
            }}>
              Stress and after-dinner are doing the most talking right now.
            </div>
            {/* Lens chips */}
            <div style={{ display: 'flex', gap: 8, marginBottom: 18, flexWrap: 'wrap' }}>
              {[
                { l: 'Mood × Food', active: true },
                { l: 'Time of day', active: false },
                { l: 'Past 7 days', active: false },
              ].map((c, i) => (
                <span key={i} style={{
                  padding: '6px 12px', borderRadius: 999,
                  background: c.active ? LP.green : LP.cream,
                  color: c.active ? LP.cream : LP.black,
                  border: `1px solid ${c.active ? LP.green : LP.border}`,
                  fontFamily: '"DM Sans"', fontSize: 12, fontWeight: 600,
                }}>{c.l}</span>
              ))}
            </div>
            {/* SVG graph */}
            <div style={{
              background: LP.greenLighter, border: `1px solid ${LP.greenLight}`,
              borderRadius: 16, overflow: 'hidden',
            }}>
              <svg viewBox="0 0 560 420" width="100%" style={{ display: 'block' }}>
                {edges.map(([a,b], i) => (
                  <line key={i}
                    x1={nodes[a].x} y1={nodes[a].y}
                    x2={nodes[b].x} y2={nodes[b].y}
                    stroke={LP.green} strokeOpacity="0.22" strokeWidth="1.2" />
                ))}
                {nodes.map((n, i) => (
                  <g key={i}>
                    <circle cx={n.x} cy={n.y} r={r(n.w) + 6} fill={n.color} fillOpacity="0.10" />
                    <circle cx={n.x} cy={n.y} r={r(n.w)} fill={n.color} fillOpacity={0.55 + n.w * 0.4} />
                    <text x={n.x} y={n.y + 4} textAnchor="middle"
                      fontFamily="DM Sans, system-ui" fontSize={r(n.w) > 32 ? 13 : 11} fontWeight="600"
                      fill={n.w > 0.5 ? LP.cream : LP.black}>{n.label}</text>
                  </g>
                ))}
              </svg>
            </div>
          </div>

          {/* Vibe sheet sub-mockup */}
          <div style={{
            background: LP.cream, border: `1px solid ${LP.border}`,
            borderRadius: 24, padding: 24,
          }}>
            <div style={{
              fontFamily: '"DM Sans"', fontSize: 12, fontWeight: 600,
              color: LP.gray, letterSpacing: '.1em', textTransform: 'uppercase',
              marginBottom: 12,
            }}>Vibe sheet · bottom sheet</div>
            <div style={{
              background: '#fff', border: `1px solid ${LP.border}`,
              borderTopLeftRadius: 22, borderTopRightRadius: 22,
              borderBottomLeftRadius: 6, borderBottomRightRadius: 6,
              padding: '20px 22px 26px', position: 'relative',
            }}>
              <div style={{
                width: 44, height: 4, borderRadius: 999, background: LP.border,
                margin: '0 auto 18px',
              }}/>
              <div style={{
                fontFamily: '"DM Sans"', fontSize: 11, fontWeight: 700,
                color: LP.green, letterSpacing: '.16em', textTransform: 'uppercase',
                marginBottom: 8,
              }}>Emotion</div>
              <div style={{
                fontFamily: '"DM Serif Display"', fontSize: 32, color: LP.black,
                lineHeight: 1.1, marginBottom: 12,
              }}>Anxiety</div>
              <div style={{
                fontFamily: '"DM Sans"', fontSize: 14, color: LP.gray,
                lineHeight: 1.55, marginBottom: 18,
              }}>
                Anxiety is the loudest node in your week. Most of it lands between 8 and 11pm, usually after a long workday.
              </div>
              <div style={{
                fontFamily: '"DM Sans"', fontSize: 11, fontWeight: 600,
                color: LP.gray, letterSpacing: '.1em', textTransform: 'uppercase',
                marginBottom: 8,
              }}>Recent moments</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 18px', display: 'flex', flexDirection: 'column', gap: 8 }}>
                {[
                  'Tue · 9:42pm — spiraled over Wednesday\'s weigh-in',
                  'Sun · 10:10pm — could not stop thinking about the kitchen',
                  'Fri · 8:28pm — work email + carbs',
                ].map((m, i) => (
                  <li key={i} style={{
                    padding: '8px 12px', borderRadius: 10,
                    background: LP.greenLighter, border: `1px solid ${LP.greenLight}`,
                    fontFamily: '"DM Sans"', fontSize: 13, color: LP.black,
                  }}>{m}</li>
                ))}
              </ul>
              <button style={{
                width: '100%', padding: '12px', borderRadius: 12,
                background: LP.green, color: LP.cream, border: 'none',
                fontFamily: '"DM Sans"', fontSize: 14, fontWeight: 600, cursor: 'pointer',
              }}>Talk to Mira about this</button>
            </div>
          </div>
        </div>

        <div style={{
          marginTop: 24, textAlign: 'center',
          fontFamily: '"DM Serif Display"', fontSize: 22, color: LP.green,
          fontStyle: 'italic',
        }}>
          The reason people stay.
        </div>
      </div>
    </section>
  );
}

// ─── Section: Mira remembers ───────────────────────────
function MiraRemembers() {
  const beats = [
    {
      title: "She knows what you've tried.",
      body: "Tell her once that Greek yogurt makes you gag and she won't suggest it again.",
    },
    {
      title: 'She knows when food noise hits hardest.',
      body: "If your noise spikes Sunday nights, she'll plan a Sunday ritual with you — not lecture you on Monday.",
    },
    {
      title: 'She knows what works for you.',
      body: 'Direct or warm. Data or empathy. She learns your style and stays in it.',
    },
  ];
  const memories = [
    { tag: 'PREFERENCE', text: 'Hates cardio. Prefers home dumbbells.' },
    { tag: 'PATTERN',    text: 'Spirals on weigh-in days.' },
    { tag: 'GOAL',       text: 'Protein target: 110 g/day.' },
    { tag: 'STYLE',      text: 'Responds to data, not pep talks.' },
  ];
  return (
    <section id="remembers" style={{
      background: LP.cream, padding: '120px 32px',
      borderTop: `1px solid ${LP.border}`,
    }}>
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>
        <div style={{ maxWidth: 760, marginBottom: 48 }}>
          <Eyebrow>The differentiator</Eyebrow>
          <h2 style={{
            fontFamily: '"DM Serif Display", Georgia, serif',
            fontSize: 'clamp(36px, 4.2vw, 54px)',
            lineHeight: 1.1, color: LP.black,
            margin: '20px 0 16px', letterSpacing: '-.01em',
            textWrap: 'balance',
          }}>
            Mira <em style={{ color: LP.green, fontStyle: 'italic' }}>remembers.</em>
          </h2>
          <p style={{
            fontFamily: '"DM Sans"', fontSize: 17, lineHeight: 1.6,
            color: LP.gray, margin: 0, maxWidth: 620, textWrap: 'pretty',
          }}>
            Every other AI starts from zero every time. Mira doesn't. She holds what you tell her — preferences, patterns, what's worked, what hasn't — and uses it to coach you like a friend who's been paying attention.
          </p>
        </div>

        <div className="lp-remembers-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, marginBottom: 40,
        }}>
          {beats.map((b, i) => (
            <div key={i} style={{
              background: LP.cream, border: `1px solid ${LP.border}`,
              borderRadius: 20, padding: 28,
            }}>
              <h3 style={{
                fontFamily: '"DM Serif Display", Georgia, serif',
                fontSize: 22, lineHeight: 1.2, color: LP.black,
                margin: '0 0 12px', textWrap: 'balance',
              }}>{b.title}</h3>
              <p style={{
                fontFamily: '"DM Sans"', fontSize: 15, lineHeight: 1.6,
                color: LP.gray, margin: 0, textWrap: 'pretty',
              }}>{b.body}</p>
            </div>
          ))}
        </div>

        <div style={{
          background: LP.greenLighter, border: `1px solid ${LP.greenLight}`,
          borderRadius: 24, padding: '28px 28px 32px',
        }}>
          <div style={{
            fontFamily: '"DM Sans"', fontSize: 11, fontWeight: 700,
            color: LP.green, letterSpacing: '.16em', textTransform: 'uppercase',
            marginBottom: 6,
          }}>Mira's memory · Sarah</div>
          <div style={{
            fontFamily: '"DM Serif Display"', fontSize: 22, color: LP.black,
            lineHeight: 1.2, marginBottom: 18,
          }}>What she remembers about you.</div>
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
            gap: 12,
          }}>
            {memories.map((m, i) => (
              <div key={i} style={{
                background: LP.cream, border: `1px solid ${LP.greenLight}`,
                borderRadius: 14, padding: '14px 16px',
              }}>
                <div style={{
                  fontFamily: '"DM Sans"', fontSize: 10, fontWeight: 700,
                  color: LP.green, letterSpacing: '.16em', textTransform: 'uppercase',
                  marginBottom: 6,
                }}>{m.tag}</div>
                <div style={{
                  fontFamily: '"DM Serif Display"', fontSize: 17, color: LP.black,
                  lineHeight: 1.3,
                }}>{m.text}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Section: Trust + Safety ───────────────────────────
function TrustSafety() {
  return (
    <section id="safety" style={{
      background: LP.cream, padding: '80px 32px',
      borderTop: `1px solid ${LP.border}`,
    }}>
      <div style={{
        maxWidth: 880, margin: '0 auto',
        background: LP.greenLighter, border: `1px solid ${LP.greenLight}`,
        borderRadius: 24, padding: '36px 36px 32px',
      }}>
        <Eyebrow>Safety</Eyebrow>
        <h2 style={{
          fontFamily: '"DM Serif Display", Georgia, serif',
          fontSize: 'clamp(26px, 3vw, 36px)',
          lineHeight: 1.15, color: LP.black,
          margin: '14px 0 14px', letterSpacing: '-.005em',
          textWrap: 'balance',
        }}>
          Built for the hard moments, too.
        </h2>
        <p style={{
          fontFamily: '"DM Sans"', fontSize: 16, lineHeight: 1.6,
          color: LP.gray, margin: '0 0 22px', maxWidth: 640, textWrap: 'pretty',
        }}>
          If a conversation suggests urgent risk — an eating disorder, suicidal thoughts, or another mental-health crisis — Mira pauses coaching and surfaces real human resources. That's a hard line, not a soft promise.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 12 }}>
          <div style={{
            background: LP.cream, border: `1px solid ${LP.greenLight}`,
            borderRadius: 14, padding: '14px 16px',
          }}>
            <div style={{
              fontFamily: '"DM Sans"', fontSize: 11, fontWeight: 700,
              color: LP.green, letterSpacing: '.14em', textTransform: 'uppercase',
              marginBottom: 6,
            }}>Crisis & suicide</div>
            <div style={{ fontFamily: '"DM Serif Display"', fontSize: 19, color: LP.black, marginBottom: 4 }}>988 Suicide & Crisis Lifeline</div>
            <div style={{ fontFamily: '"DM Sans"', fontSize: 13, color: LP.gray, lineHeight: 1.5 }}>Call or text 988 · available 24/7</div>
          </div>
          <div style={{
            background: LP.cream, border: `1px solid ${LP.greenLight}`,
            borderRadius: 14, padding: '14px 16px',
          }}>
            <div style={{
              fontFamily: '"DM Sans"', fontSize: 11, fontWeight: 700,
              color: LP.green, letterSpacing: '.14em', textTransform: 'uppercase',
              marginBottom: 6,
            }}>Eating disorders</div>
            <div style={{ fontFamily: '"DM Serif Display"', fontSize: 19, color: LP.black, marginBottom: 4 }}>National Alliance for Eating Disorders</div>
            <div style={{ fontFamily: '"DM Sans"', fontSize: 13, color: LP.gray, lineHeight: 1.5 }}>1-866-662-1235 · Mon–Fri</div>
          </div>
        </div>
      </div>
    </section>
  );
}
