// Interrupt — marketing site

const { useState, useEffect, useRef } = React;

// ───── Live demo: working interrupt button + breathing circle ─────
function HeroDemo() {
  const [state, setState] = useState('idle'); // idle | running | done
  const [t, setT] = useState(0);
  const DURATION = 60;

  useEffect(() => {
    if (state !== 'running') return;
    const id = setInterval(() => {
      setT((prev) => {
        if (prev >= DURATION) {setState('done');return DURATION;}
        return prev + 1;
      });
    }, 1000);
    return () => clearInterval(id);
  }, [state]);

  const start = () => {setT(0);setState('running');};
  const reset = () => {setT(0);setState('idle');};

  const size = 280,sw = 5,r = (size - sw) / 2,c = r * 2 * Math.PI;
  const pct = t / DURATION;

  // Breathing — 6 breaths/min: 5s in, 5s out (10s cycle, scale 0.85 → 1.0 → 0.85)
  const [scale, setScale] = useState(0.85);
  const [phase, setPhase] = useState('Breathe in');
  useEffect(() => {
    if (state !== 'running') {setScale(0.85);setPhase('Breathe in');return;}
    let id;
    const cycle = () => {
      setPhase('Breathe in');setScale(1);
      id = setTimeout(() => {
        setPhase('Breathe out');setScale(0.85);
        id = setTimeout(cycle, 5000);
      }, 5000);
    };
    cycle();
    return () => clearTimeout(id);
  }, [state]);

  return (
    <div style={{
      width: '100%', minHeight: 420,
      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
      padding: '24px'
    }}>
      <div style={{ position: 'relative', width: size, height: size }}>
        <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>
          <circle cx={size / 2} cy={size / 2} r={r} stroke="hsl(220, 14%, 93%)" strokeWidth={sw} fill="none" />
          <circle cx={size / 2} cy={size / 2} r={r} stroke="var(--primary)" strokeWidth={sw} fill="none"
          strokeLinecap="round"
          strokeDasharray={c} strokeDashoffset={c - pct * c}
          style={{ transition: 'stroke-dashoffset 0.9s linear' }} />
        </svg>
        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          {state === 'idle' &&
          <button onClick={start} style={{
            width: 200, height: 200, borderRadius: '50%',
            background: 'var(--primary)', color: '#fff', border: 'none', cursor: 'pointer',
            fontFamily: 'inherit',
            boxShadow: '0 0 0 3px hsla(220, 55%, 62%, 0.15), 0 8px 32px hsla(220, 65%, 54%, 0.3)',
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 4,
            transition: 'transform 0.1s'
          }}
          onMouseDown={(e) => e.currentTarget.style.transform = 'scale(0.97)'}
          onMouseUp={(e) => e.currentTarget.style.transform = 'scale(1)'}
          onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'}>
              <div style={{ fontSize: 26, fontWeight: 700, letterSpacing: '-0.01em' }}>Interrupt</div>
              <div style={{ fontSize: 12, fontWeight: 500, opacity: 0.85 }}>Tap to try · 60s</div>
            </button>
          }
          {state === 'running' &&
          <div style={{
            width: 200, height: 200, borderRadius: '50%',
            background: 'linear-gradient(135deg, hsla(220, 65%, 54%, 0.1), hsla(220, 65%, 54%, 0.18))',
            boxShadow: '0 0 60px hsla(220, 55%, 62%, 0.25)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            transform: `scale(${scale})`,
            transition: `transform 5s ease-in-out`
          }}>
              <div style={{ textAlign: 'center' }}>
                <div style={{ fontSize: 14, color: 'var(--primary)', fontWeight: 600 }}>{phase}</div>
                <div style={{ fontSize: 40, fontWeight: 700, letterSpacing: '-0.02em', marginTop: 2 }}>
                  {Math.floor((DURATION - t) / 60)}:{String((DURATION - t) % 60).padStart(2, '0')}
                </div>
              </div>
            </div>
          }
          {state === 'done' &&
          <div style={{ textAlign: 'center', maxWidth: 220 }}>
              <div style={{
              width: 56, height: 56, borderRadius: 28, margin: '0 auto 12px',
              background: 'hsla(220, 65%, 54%, 0.1)',
              display: 'flex', alignItems: 'center', justifyContent: 'center'
            }}>
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg>
              </div>
              <div className="serif" style={{ fontSize: 22, marginBottom: 6 }}>You made it through.</div>
              <div style={{ fontSize: 13, color: 'var(--muted)', marginBottom: 14 }}>That's how it feels in the app.</div>
              <button onClick={reset} style={{
              background: 'transparent', border: '1px solid var(--border)',
              padding: '8px 16px', borderRadius: 999, fontSize: 13, fontWeight: 500,
              cursor: 'pointer', color: 'var(--fg)', fontFamily: 'inherit'
            }}>Try again</button>
            </div>
          }
        </div>
      </div>
      <div style={{ marginTop: 28, fontSize: 13, color: 'var(--muted)', textAlign: 'center' }}>
        {state === 'idle' && 'A real 60-second interrupt. No download, no shame.'}
        {state === 'running' && 'Stay with the breath. The wave is already passing.'}
        {state === 'done' && 'Most urges peak in 90 seconds. You just outlasted one.'}
      </div>
    </div>);

}

// ───── Section components ─────

function NavBar() {
  return (
    <nav className="top">
      <div className="wrap row">
        <div className="logo">
          <img src="assets/interrupt-logo.png" alt="Interrupt" style={{ width: 32, height: 32, borderRadius: 8, display: 'block' }} />
          <span>Interrupt</span>
        </div>
        <div className="links">
          <a className="link" href="#how">How it works</a>
          <a className="link" href="#science">Science</a>
          <a className="link" href="#packs">Situation Packs</a>
          <a className="link" href="#pricing">Pricing</a>
          <a className="link" href="#faq">FAQ</a>
        </div>
        <a className="btn-primary" href="#download" style={{ padding: '10px 18px', fontSize: 14 }}>
          Get the app
        </a>
      </div>
    </nav>);

}

function Hero() {
  return (
    <section style={{ padding: '80px 0 40px', position: 'relative', overflow: 'hidden' }}>
      {/* soft background */}
      <div style={{
        position: 'absolute', top: -200, left: '50%', transform: 'translateX(-50%)',
        width: 900, height: 900, borderRadius: '50%',
        background: 'radial-gradient(circle, hsla(220, 65%, 54%, 0.08), transparent 60%)',
        pointerEvents: 'none', zIndex: 0
      }} />
      <div className="wrap" style={{ position: 'relative', zIndex: 1 }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 48, alignItems: 'center'
        }} className="hero-grid">
          <div>
            <div className="pill" style={{ marginBottom: 20 }}>
              <span className="pulse-dot" />
              It's about giving you a moment of control when cravings hit
            </div>
            <h1 style={{ fontSize: 'clamp(40px, 5.4vw, 68px)', lineHeight: 1.05, letterSpacing: '-0.03em', fontWeight: 700, marginBottom: 20 }}>
              A pause button<br />
              <span className="serif" style={{ fontStyle: 'italic', color: 'var(--primary)' }}>for cravings.</span>
            </h1>
            <p style={{ fontSize: 19, color: 'var(--muted-2)', maxWidth: 520, marginBottom: 32, lineHeight: 1.55 }}>
              Interrupt the urge — without the shame spiral. One tap, 60 seconds of breath
              and a timer ring — long enough to break the loop and let the wave start to pass.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 10 }}>
              <a href="#download" className="btn-primary">
                Download for iPhone
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" /></svg>
              </a>
              <a href="#how" className="btn-secondary">See how it works</a>
            </div>
            <div style={{ fontSize: 12, color: 'var(--muted)', marginBottom: 28 }}>Android coming soon.</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 13, color: 'var(--muted)' }}>
              <Lock /> Free · No account required · Private by default
            </div>
          </div>

          <div style={{
            background: 'linear-gradient(160deg, var(--bg-tint), #fff)',
            border: '1px solid var(--border-soft)',
            borderRadius: 32, position: 'relative',
            boxShadow: '0 1px 3px rgba(0,0,0,0.02), 0 24px 60px rgba(0,0,0,0.05)'
          }}>
            <HeroDemo />
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .hero-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>);

}

function ProblemSection() {
  const items = [
  { t: 'Willpower runs out.', d: 'You spent the day saying no. By 9pm the cookie wins because your brain is depleted, not weak.' },
  { t: 'Shame fuels the loop.', d: 'You give in once, label yourself a failure, and the next urge feels inevitable. The story is the trap.' },
  { t: 'Cravings have a clock.', d: 'They rise, peak, and fall on their own — once you stop reinforcing them. The work isn\'t defeating them. It\'s getting out of the loop.' }];

  return (
    <section style={{ padding: '100px 0', background: 'var(--bg-tint)' }}>
      <div className="wrap">
        <div style={{ maxWidth: 720, marginBottom: 56 }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>The problem with quitting apps</div>
          <h2 style={{ fontSize: 'clamp(28px, 3.6vw, 44px)', lineHeight: 1.15, fontWeight: 700 }}>
            Most apps treat cravings like a habit to <span className="serif" style={{ fontStyle: 'italic' }}>track.</span>
            <br />We treat them like a wave to <span className="serif" style={{ fontStyle: 'italic', color: 'var(--primary)' }}>ride.</span>
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 20 }}>
          {items.map((it, i) =>
          <div key={i} style={{
            background: '#fff', border: '1px solid var(--border-soft)',
            borderRadius: 20, padding: 28
          }}>
              <div style={{
              width: 38, height: 38, borderRadius: 19, marginBottom: 16,
              background: 'hsla(220, 65%, 54%, 0.1)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 14, fontWeight: 700, color: 'var(--primary)',
              fontFamily: 'Fraunces, serif'
            }}>{i + 1}</div>
              <h3 className="serif" style={{ fontSize: 22, marginBottom: 8 }}>{it.t}</h3>
              <p style={{ fontSize: 15, color: 'var(--muted-2)', lineHeight: 1.55 }}>{it.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function HowItWorks() {
  const steps = [
  {
    n: 'One',
    t: 'Tap when the urge hits.',
    d: 'One tap. The Interrupt button is the home screen — no setup, no goals, no streaks to protect.',
    Phone: () => <img src="assets/step1-home.png" alt="Interrupt home screen" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />,
    noNav: true,
    bareScreen: true
  },
  {
    n: 'Two',
    t: 'Breathe through the wave.',
    d: '60 seconds. A timer ring counts down. A breathing circle paces you — 5 in, 5 out, six breaths a minute. No lectures, no streaks to protect.',
    Phone: () => <img src="assets/step2-breathe.png" alt="Interrupt breathing screen" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />,
    noNav: true,
    bareScreen: true
  },
  {
    n: 'Three',
    t: 'Log how you feel — that\'s it.',
    d: 'Slide where the urge is now, tap what triggered it. Saved. Move on with your day. No journaling required, no judgment, no streaks to protect.',
    Phone: () => <img src="assets/step3-result.png" alt="Interrupt result screen" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />,
    noNav: true,
    bareScreen: true
  }];

  return (
    <section id="how" style={{ padding: '100px 0' }}>
      <div className="wrap">
        <div style={{ maxWidth: 720, marginBottom: 64 }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>How it works</div>
          <h2 style={{ fontSize: 'clamp(28px, 3.6vw, 44px)', lineHeight: 1.15, fontWeight: 700 }}>
            Three taps, sixty seconds, <span className="serif" style={{ fontStyle: 'italic' }}>done.</span>
          </h2>
        </div>

        {steps.map((s, i) =>
        <div key={i} style={{
          display: 'grid', gridTemplateColumns: i % 2 === 0 ? '1fr 1.05fr' : '1.05fr 1fr',
          gap: 64, alignItems: 'center', marginBottom: 96
        }} className="how-row">
            <div style={{ order: i % 2 === 0 ? 1 : 2 }}>
              <div className="serif" style={{ fontSize: 14, color: 'var(--primary)', fontWeight: 600, marginBottom: 14, letterSpacing: '0.02em' }}>
                Step {s.n}
              </div>
              <h3 className="serif" style={{ fontSize: 'clamp(28px, 3vw, 38px)', lineHeight: 1.15, marginBottom: 16 }}>
                {s.t}
              </h3>
              <p style={{ fontSize: 17, color: 'var(--muted-2)', lineHeight: 1.6, maxWidth: 460 }}>
                {s.d}
              </p>
            </div>
            <div style={{ order: i % 2 === 0 ? 2 : 1, display: 'flex', justifyContent: 'center' }}>
              <div style={{ position: 'relative' }}>
                <IOSDevice width={310} height={672}>
                  <div style={{ position: 'relative', width: '100%', height: '100%', overflow: 'hidden', background: '#fff', zIndex: s.bareScreen ? 20 : 'auto' }}>
                    <s.Phone />
                    {!s.noNav && <PhoneBottomNav active="home" />}
                  </div>
                </IOSDevice>
              </div>
            </div>
          </div>
        )}
      </div>
      <style>{`
        @media (max-width: 900px) {
          .how-row { grid-template-columns: 1fr !important; gap: 32px !important; margin-bottom: 64px !important; }
          .how-row > div { order: unset !important; }
          .how-row > div:first-child { order: 2 !important; }
          .how-row > div:last-child { order: 1 !important; }
        }
      `}</style>
    </section>);

}

function ScienceSection() {
  const stats = [
  { n: '30', u: 'min', l: 'How long an unaided urge lasts when you fight it' },
  { n: '60', u: 'sec', l: 'How long Interrupt asks for', sub: 'Long enough to break the loop. Short enough that you\u2019ll actually do it.' },
  { n: '0',  u: '',    l: 'Streaks, shame, push notifications. The opposite of what already didn\'t work.' }];

  return (
    <section id="science" style={{
      padding: '100px 0',
      background: 'linear-gradient(180deg, var(--bg-tint) 0%, #fff 100%)'
    }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 64, alignItems: 'flex-start' }} className="sci-grid">
          <div>
            <div className="eyebrow" style={{ marginBottom: 12 }}>The science</div>
            <h2 style={{ fontSize: 'clamp(28px, 3.6vw, 44px)', lineHeight: 1.15, fontWeight: 700, marginBottom: 24 }}>
              Built on <span className="serif" style={{ fontStyle: 'italic' }}>urge surfing,</span> not white-knuckling.
            </h2>
            <p style={{ fontSize: 16, color: 'var(--muted-2)', lineHeight: 1.65, marginBottom: 16 }}>
              In the 1980s, addiction researcher Alan Marlatt watched relapse patients try to suppress
              cravings — and watched them lose. Then he had them <em>observe</em> the craving instead,
              like a wave that rises, peaks, and falls. They started winning.
            </p>
            <p style={{ fontSize: 16, color: 'var(--muted-2)', lineHeight: 1.65, marginBottom: 24 }}>
              That's the entire premise of Interrupt. Not motivation. Not streaks.
              Just sixty seconds of structured pause, paced breath, and a clear visual of the wave passing.
            </p>
            <a href="research.html" style={{ color: 'var(--primary)', textDecoration: 'none', fontWeight: 600, fontSize: 14 }}>
              Read the research notes →
            </a>
          </div>
          <div style={{ display: 'grid', gap: 16 }}>
            {stats.map((s, i) =>
            <div key={i} style={{
              background: '#fff', border: '1px solid var(--border-soft)',
              borderRadius: 20, padding: '24px 28px',
              display: 'flex', alignItems: 'center', gap: 24,
              boxShadow: '0 1px 2px rgba(0,0,0,0.02)'
            }}>
                <div style={{
                minWidth: 140, display: 'flex', alignItems: 'baseline', gap: 8,
                color: 'var(--primary)',
              }}>
                  <span className="serif" style={{
                  fontSize: 64, fontWeight: 600,
                  letterSpacing: '-0.03em', lineHeight: 1,
                }}>{s.n}</span>
                  {s.u && <span className="serif" style={{
                  fontSize: 22, fontWeight: 500,
                  letterSpacing: '-0.01em', lineHeight: 1, opacity: 0.85,
                }}>{s.u}</span>}
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 15, color: 'var(--muted-2)', lineHeight: 1.5 }}>{s.l}</div>
                  {s.sub && <div className="serif" style={{ fontSize: 14, fontStyle: 'italic', color: 'var(--muted)', marginTop: 6, lineHeight: 1.4 }}>{s.sub}</div>}
                </div>
              </div>
            )}
            <div style={{ fontSize: 11, color: 'var(--muted)', marginTop: 4, lineHeight: 1.5 }}>
              Urge duration based on Marlatt &amp; Gordon, <em>Relapse Prevention</em> (Guilford, 1985).
              Individual experience varies.
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .sci-grid { grid-template-columns: 1fr !important; gap: 32px !important; } }
      `}</style>
    </section>);

}

// Pack icons — matched to the in-app set
const PackIcon = ({ name }) => {
  const s = { width: 22, height: 22, fill: 'none', stroke: 'currentColor', strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'Doomscroll':
      return <svg viewBox="0 0 24 24" {...s}><rect x="7" y="2.5" width="10" height="19" rx="2" /><line x1="11" y1="18.5" x2="13" y2="18.5" /></svg>;
    case 'Procrastination':
      return <svg viewBox="0 0 24 24" {...s}><circle cx="12" cy="12" r="9" /><polyline points="12 7 12 12 15.5 14" /></svg>;
    case 'Racing Mind':
      return <svg viewBox="0 0 24 24" {...s}><path d="M3 9h11a2.5 2.5 0 1 0-2.5-2.5" /><path d="M3 14h14a2.5 2.5 0 1 1-2.5 2.5" /><path d="M3 12h8" /></svg>;
    case 'Overload':
      return <svg viewBox="0 0 24 24" {...s}><polygon points="13 2 4 14 12 14 11 22 20 10 12 10 13 2" /></svg>;
    case 'After Meals':
      return <svg viewBox="0 0 24 24" {...s}><path d="M7 2v8a2 2 0 0 0 2 2v9" /><path d="M11 2v8a2 2 0 0 1-2 2" /><path d="M9 2v6" /><path d="M16 2c-1.5 1-2 2.5-2 5s.5 4 2 5v9" /></svg>;
    case 'Coffee Trigger':
      return <svg viewBox="0 0 24 24" {...s}><path d="M4 9h13v6a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V9z" /><path d="M17 11h2a2.5 2.5 0 0 1 0 5h-2" /><path d="M8 5c0-1 1-1.5 1-2.5M12 5c0-1 1-1.5 1-2.5" /></svg>;
    case 'Frozen':
      return <svg viewBox="0 0 24 24" {...s}><line x1="12" y1="3" x2="12" y2="21" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="5.5" y1="5.5" x2="18.5" y2="18.5" /><line x1="18.5" y1="5.5" x2="5.5" y2="18.5" /></svg>;
    case 'Inner Critic':
      return <svg viewBox="0 0 24 24" {...s}><path d="M4 5h16v11H9l-5 4V5z" /></svg>;
    case 'Urge Spike':
      return <svg viewBox="0 0 24 24" {...s}><polyline points="3 16 9 10 13 14 21 6" /><polyline points="15 6 21 6 21 12" /></svg>;
    case 'On Repeat':
      return <svg viewBox="0 0 24 24" {...s}><polyline points="17 3 21 7 17 11" /><path d="M3 12V9a2 2 0 0 1 2-2h16" /><polyline points="7 21 3 17 7 13" /><path d="M21 12v3a2 2 0 0 1-2 2H3" /></svg>;
    default: return null;
  }
};

function PacksSection() {
  const packs = [
  { n: 'Doomscroll',      tag: 'Break the scroll loop.',        d: 'For the 11pm "just one more video." A 3-minute tactile flow that puts the phone down.', c: 'hsl(195, 65%, 50%)' },
  { n: 'Procrastination', tag: 'Start before resistance builds.', d: 'For the task you\'ve circled for an hour. Two minutes to get past the freeze.', c: 'hsl(38, 80%, 55%)' },
  { n: 'Racing Mind',     tag: 'Slow the spiral.',              d: 'For the 3am loop, the meeting replay, the worry you can\'t exit.', c: 'hsl(220, 65%, 54%)' },
  { n: 'Overload',        tag: 'Cool the surge.',               d: 'For the moment your nervous system is past full and decisions feel impossible.', c: 'hsl(0, 65%, 58%)' },
  { n: 'After Meals',     tag: 'Reset after eating.',           d: 'For the pull that comes after the plate clears — without making it a willpower fight.', c: 'hsl(160, 45%, 48%)' },
  { n: 'Coffee Trigger',  tag: 'Decouple the routine.',         d: 'For the cigarette-with-coffee, the cookie-with-coffee, the scroll-with-coffee.', c: 'hsl(25, 55%, 45%)' },
  { n: 'Frozen',          tag: 'Move first.',                   d: 'For the days you can\'t start. Thaw enough to move, no pressure to feel ready.', c: 'hsl(200, 60%, 62%)' },
  { n: 'Inner Critic',    tag: 'Soften the voice.',             d: 'For the line that won\'t let up — without pretending the voice isn\'t there.', c: 'hsl(280, 50%, 62%)' },
  { n: 'Urge Spike',      tag: 'Ride the urge.',                d: 'For the moment the wave is already cresting. Six steps to surf, not fight.', c: 'hsl(12, 70%, 58%)' },
  { n: 'On Repeat',       tag: 'Break the repeat.',             d: 'For the loop you\'ve been around twice today.', c: 'hsl(330, 55%, 58%)' }];

  return (
    <section id="packs" style={{ padding: '100px 0' }}>
      <div className="wrap">
        <div style={{ maxWidth: 720, marginBottom: 48 }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>Situation Packs</div>
          <h2 style={{ fontSize: 'clamp(28px, 3.6vw, 44px)', lineHeight: 1.15, fontWeight: 700, marginBottom: 16 }}>
            Specific moments get <span className="serif" style={{ fontStyle: 'italic' }}>specific tools.</span>
          </h2>
          <p style={{ fontSize: 17, color: 'var(--muted-2)', maxWidth: 620, lineHeight: 1.55 }}>
            Generic mindfulness tells you to "notice the breath." We give you a flow built for the
            moment you're actually in — the 11pm scroll, the post-meal pull, the 3am spiral.
          </p>
        </div>
        <div className="packs-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 14 }}>
          {packs.map((p, i) =>
          <div key={i} style={{
            background: '#fff', border: '1px solid var(--border-soft)',
            borderRadius: 20, padding: 22, position: 'relative',
            boxShadow: '0 1px 2px rgba(0,0,0,0.03), 0 4px 12px rgba(0,0,0,0.04)',
            display: 'flex', flexDirection: 'column', gap: 12,
            transition: 'transform 0.15s, box-shadow 0.15s'
          }}>
              <div style={{
              width: 40, height: 40, borderRadius: 12,
              background: `${p.c}1a`, color: p.c,
              display: 'flex', alignItems: 'center', justifyContent: 'center'
            }}>
                <PackIcon name={p.n} />
              </div>
              <div>
                <h3 className="serif" style={{ fontSize: 20, marginBottom: 4, lineHeight: 1.2 }}>{p.n}</h3>
                <div className="serif" style={{ fontSize: 13, fontStyle: 'italic', color: p.c, marginBottom: 8 }}>{p.tag}</div>
                <p style={{ fontSize: 13.5, color: 'var(--muted-2)', lineHeight: 1.5, margin: 0 }}>{p.d}</p>
              </div>
            </div>
          )}
        </div>
      </div>
      <style>{`
        @media (max-width: 1100px) { .packs-grid { grid-template-columns: repeat(3, 1fr) !important; } }
        @media (max-width: 720px)  { .packs-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 460px)  { .packs-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>);

}

function HistoryShowcase() {
  return (
    <section style={{ padding: '100px 0', background: 'var(--bg-tint)' }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 64, alignItems: 'center' }} className="hist-grid">
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <IOSDevice width={310} height={672}>
              <div style={{ position: 'relative', width: '100%', height: '100%', overflow: 'hidden', background: '#fff' }}>
                <PhoneHistory />
                <PhoneBottomNav active="history" />
              </div>
            </IOSDevice>
          </div>
          <div>
            <div className="eyebrow" style={{ marginBottom: 12 }}>What you get back</div>
            <h2 style={{ fontSize: 'clamp(28px, 3.6vw, 42px)', lineHeight: 1.15, fontWeight: 700, marginBottom: 20 }}>
              Patterns you couldn't see <span className="serif" style={{ fontStyle: 'italic' }}>in the moment.</span>
            </h2>
            <p style={{ fontSize: 17, color: 'var(--muted-2)', lineHeight: 1.6, marginBottom: 24, maxWidth: 460 }}>
              When the urge is happening, you only see this urge. The History view shows you
              the shape across all of them — the trigger that keeps coming back, the hour
              you're most exposed, whether your average urge is dropping over time.
              Five clinically meaningful numbers, not fifty vanity ones.
            </p>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 14 }}>
              {[
              'Five numbers that actually mean something — sessions, urge change, top triggers, time-of-day clusters.',
              'Updated every session, available the moment you finish.',
              'No streaks, no scoreboard — just the record of what\'s actually happening.'].
              map((t, i) =>
              <li key={i} style={{ display: 'flex', gap: 12, fontSize: 15, color: 'var(--fg)' }}>
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" 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>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .hist-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </section>);

}

function Testimonials() {
  const items = [
  { q: 'My head races before meetings — especially after lunch, especially when I\'m presenting. Interrupt slows me down enough to get a decent meeting in.', n: 'Marta L.', t: '— Beta tester · pre-meeting reset' },
  { q: 'I was doomscrolling TikTok for three hours before bed. The shortcut into Interrupt has cut it way down — some nights I don\'t open the app at all.', n: 'Lis N.', t: '— Beta tester · evening doomscroll' },
  { q: 'I used to circle a task for an hour before starting it. The “one tiny step for 60 seconds” part finally got me through the freeze — once you\'ve done a minute, you\'ve started.', n: 'Clara C.', t: '— Beta tester · the freeze before starting' }];

  return (
    <section style={{ padding: '100px 0' }}>
      <div className="wrap">
        <div style={{ maxWidth: 720, marginBottom: 48 }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>What people say</div>
          <h2 style={{ fontSize: 'clamp(28px, 3.6vw, 42px)', lineHeight: 1.15, fontWeight: 700 }}>
            Quiet wins, in their <span className="serif" style={{ fontStyle: 'italic' }}>own words.</span>
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 20 }}>
          {items.map((it, i) =>
          <figure key={i} style={{
            margin: 0, background: '#fff', border: '1px solid var(--border-soft)',
            borderRadius: 22, padding: 28, display: 'flex', flexDirection: 'column', gap: 20
          }}>
              <svg width="28" height="28" viewBox="0 0 24 24" fill="hsla(220, 65%, 54%, 0.18)">
                <path d="M9 7c-3 0-5 2-5 5v5h5v-5H7c0-1.5 1-2.5 2-2.5V7zm9 0c-3 0-5 2-5 5v5h5v-5h-2c0-1.5 1-2.5 2-2.5V7z" />
              </svg>
              <blockquote className="serif" style={{ margin: 0, fontSize: 18, lineHeight: 1.45, color: 'var(--fg)' }}>
                "{it.q}"
              </blockquote>
              <figcaption style={{ fontSize: 13, color: 'var(--muted)', marginTop: 'auto' }}>
                <strong style={{ color: 'var(--fg)', fontWeight: 600 }}>{it.n}</strong> {it.t}
              </figcaption>
            </figure>
          )}
        </div>
        <div style={{ marginTop: 28, fontSize: 12, color: 'var(--muted)', textAlign: 'center', lineHeight: 1.5 }}>
          From beta testers. Individual experience varies. Interrupt is not a substitute for medical or psychiatric care.
        </div>
      </div>
    </section>);

}

function Pricing() {
  const [billing, setBilling] = useState('annual'); // 'monthly' | 'annual'

  const freeFeats = [
    'The Interrupt button',
    'Trigger tagging',
    'Emergency mode (SOS)',
    'Last 3 sessions in history'
  ];
  const proFeats = [
    'Everything in Free',
    <span key="packs">All 10 <a href="#packs" style={{ color: 'var(--primary)', textDecoration: 'none', fontWeight: 600 }}>Situation Packs</a></span>,
    'Unlimited session history',
    'Trigger insights & time-of-day patterns'
  ];

  return (
    <section id="pricing" style={{ padding: '100px 0', background: 'var(--bg-tint)' }}>
      <div className="wrap">
        <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto 48px' }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>Pricing</div>
          <h2 style={{ fontSize: 'clamp(28px, 3.6vw, 44px)', lineHeight: 1.15, fontWeight: 700, marginBottom: 14 }}>
            Free forever. <span className="serif" style={{ fontStyle: 'italic' }}>Pro is optional.</span>
          </h2>
          <p style={{ fontSize: 16, color: 'var(--muted-2)' }}>
            The Interrupt button works on day one with no paywall.
          </p>
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: 16, maxWidth: 800, margin: '0 auto'
        }}>
          {/* Free card */}
          <div style={{
            background: '#fff', border: '1px solid var(--border)',
            borderRadius: 24, padding: 32, position: 'relative',
            display: 'flex', flexDirection: 'column'
          }}>
            <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--muted)', marginBottom: 6 }}>Free</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 4 }}>
              <span className="serif" style={{ fontSize: 44, fontWeight: 600, letterSpacing: '-0.03em' }}>$0</span>
              <span style={{ fontSize: 14, color: 'var(--muted)' }}>forever</span>
            </div>
            <ul style={{ listStyle: 'none', padding: 0, margin: '24px 0', display: 'grid', gap: 12 }}>
              {freeFeats.map((f, j) =>
                <li key={j} style={{ display: 'flex', gap: 10, fontSize: 14, color: 'var(--fg)' }}>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
                    <polyline points="20 6 9 17 4 12" />
                  </svg>
                  <span>{f}</span>
                </li>
              )}
            </ul>
            <a href="#download" className="btn-secondary" style={{ width: '100%', justifyContent: 'center', marginTop: 'auto' }}>
              Download
            </a>
          </div>

          {/* Pro card */}
          <div style={{
            background: '#fff', border: '2px solid var(--primary)',
            borderRadius: 24, padding: 32, position: 'relative',
            boxShadow: '0 8px 32px hsla(220, 65%, 54%, 0.12)',
            display: 'flex', flexDirection: 'column'
          }}>
            <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--muted)', marginBottom: 6 }}>Pro</div>

            {/* Billing toggle */}
            <div style={{
              display: 'inline-flex', alignSelf: 'flex-start',
              background: 'var(--bg-tint)', border: '1px solid var(--border)',
              borderRadius: 999, padding: 3, marginBottom: 16
            }}>
              {[
                { k: 'monthly', label: 'Monthly' },
                { k: 'annual',  label: 'Annual'  }
              ].map(opt => (
                <button key={opt.k} onClick={() => setBilling(opt.k)} style={{
                  background: billing === opt.k ? '#fff' : 'transparent',
                  color: billing === opt.k ? 'var(--fg)' : 'var(--muted)',
                  border: 'none', borderRadius: 999,
                  padding: '6px 14px', fontSize: 13, fontWeight: 600,
                  cursor: 'pointer', fontFamily: 'inherit',
                  boxShadow: billing === opt.k ? '0 1px 2px rgba(0,0,0,0.06)' : 'none',
                  display: 'inline-flex', alignItems: 'center', gap: 8
                }}>
                  {opt.label}
                  {opt.k === 'annual' && (
                    <span style={{
                      fontSize: 10, fontWeight: 700, letterSpacing: '0.04em',
                      background: billing === 'annual' ? 'hsla(220, 65%, 54%, 0.1)' : 'transparent',
                      color: 'var(--primary)',
                      padding: '2px 6px', borderRadius: 999
                    }}>SAVE 63%</span>
                  )}
                </button>
              ))}
            </div>

            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 4 }}>
              <span className="serif" style={{ fontSize: 44, fontWeight: 600, letterSpacing: '-0.03em' }}>
                {billing === 'monthly' ? '$9.99' : '$45.99'}
              </span>
              <span style={{ fontSize: 14, color: 'var(--muted)' }}>
                {billing === 'monthly' ? '/ month' : '/ year'}
              </span>
            </div>
            <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 2 }}>
              USD. App Store localizes for other regions.
            </div>

            <ul style={{ listStyle: 'none', padding: 0, margin: '24px 0', display: 'grid', gap: 12 }}>
              {proFeats.map((f, j) =>
                <li key={j} style={{ display: 'flex', gap: 10, fontSize: 14, color: 'var(--fg)' }}>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
                    <polyline points="20 6 9 17 4 12" />
                  </svg>
                  <span>{f}</span>
                </li>
              )}
            </ul>
            <a href="#download" className="btn-primary" style={{ width: '100%', justifyContent: 'center', marginTop: 'auto' }}>
              Get Pro
            </a>
          </div>
        </div>
      </div>
    </section>);

}

function FAQ() {
  const qs = [
  {
    q: 'Will this actually help me quit something?',
    a: 'Interrupt won\'t quit anything for you. What it does is buy you a structured 60-second pause at the moment of an urge — long enough for the craving to lose immediacy, your attention to shift, and your cognitive control to come back online. The science says short delays in the 30–120 second range are the sweet spot for this. Interrupt picks ~60 because that\'s also the longest pause most people will actually take when an urge hits.'
  },
  {
    q: 'Do I have to commit to a goal?',
    a: 'No. There\'s no "I quit X on this date" setup. Open the app, hit Interrupt. That\'s the whole onboarding.'
  },
  {
    q: 'What about my data?',
    a: 'Sessions are stored on your device. No account, no email required. We don\'t have a copy of your data and we can\'t read it.'
  },
  {
    q: 'Is there an Android app?',
    a: 'Not yet — iPhone first. Tap the Android button on this page to email us — we\'ll send a one-time message when Android lands.'
  },
  {
    q: 'I\'ve tried mindfulness apps before. Why is this different?',
    a: 'Mindfulness apps assume you have ten minutes and a quiet room. Interrupt assumes you have sixty seconds and you\'re in a parking lot. The whole experience is built around: tap, breathe, done.'
  },
  {
    q: 'What\'s the SOS button?',
    a: 'A separate, faster flow for moments where the urge is already cresting. Free for everyone, no Pro required. It runs a shorter, more grounding sequence designed for high-intensity peaks.'
  }];

  const [open, setOpen] = useState(0);
  return (
    <section id="faq" style={{ padding: '100px 0' }}>
      <div className="wrap" style={{ maxWidth: 820 }}>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>Questions, asked honestly</div>
          <h2 style={{ fontSize: 'clamp(28px, 3.6vw, 42px)', lineHeight: 1.15, fontWeight: 700 }}>
            Things people <span className="serif" style={{ fontStyle: 'italic' }}>actually</span> ask.
          </h2>
        </div>
        <div style={{ borderTop: '1px solid var(--border)' }}>
          {qs.map((it, i) =>
          <div key={i} style={{ borderBottom: '1px solid var(--border)' }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{
              width: '100%', textAlign: 'left', background: 'transparent', border: 'none',
              padding: '24px 0', cursor: 'pointer', fontFamily: 'inherit',
              display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16
            }}>
                <span style={{ fontSize: 17, fontWeight: 600, color: 'var(--fg)' }}>{it.q}</span>
                <span style={{
                width: 28, height: 28, borderRadius: 14,
                background: open === i ? 'var(--primary)' : 'var(--bg-tint)',
                color: open === i ? '#fff' : 'var(--muted)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                flexShrink: 0, transition: 'all 0.15s'
              }}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" style={{
                  transform: open === i ? 'rotate(45deg)' : 'rotate(0)',
                  transition: 'transform 0.2s'
                }}>
                    <line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" />
                  </svg>
                </span>
              </button>
              {open === i &&
            <div style={{ paddingBottom: 24, paddingRight: 56, fontSize: 15, color: 'var(--muted-2)', lineHeight: 1.65 }}>
                  {it.a}
                </div>
            }
            </div>
          )}
        </div>
      </div>
    </section>);

}

function FinalCTA() {
  return (
    <section id="download" style={{ padding: '120px 0', position: 'relative', overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse at center, hsla(220, 65%, 54%, 0.08), transparent 70%)'
      }} />
      <div className="wrap" style={{ position: 'relative', textAlign: 'center', maxWidth: 720 }}>
        <h2 style={{ fontSize: 'clamp(36px, 5vw, 56px)', lineHeight: 1.05, fontWeight: 700, marginBottom: 20 }}>
          The next urge is coming.<br />
          <span className="serif" style={{ fontStyle: 'italic', color: 'var(--primary)' }}>Be ready for it.</span>
        </h2>
        <p style={{ fontSize: 18, color: 'var(--muted-2)', marginBottom: 36, lineHeight: 1.55 }}>
          Free to download. Free to use. Pro available if you want it.
        </p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap', marginBottom: 24 }}>
          <a href="#" className="btn-primary" style={{ padding: '16px 28px', fontSize: 16 }}>
            <svg width="18" height="20" viewBox="0 0 16 20" fill="currentColor">
              <path d="M11.6 10.6c0-2 1.6-2.9 1.7-3-1-1.4-2.4-1.6-3-1.6-1.3-.1-2.5.7-3.1.7-.7 0-1.6-.7-2.7-.7-1.4 0-2.7.8-3.4 2-1.5 2.5-.4 6.3 1 8.4.7 1 1.6 2.1 2.7 2.1 1.1 0 1.5-.7 2.8-.7 1.3 0 1.6.7 2.8.7 1.1 0 1.9-1 2.6-2 .8-1.2 1.1-2.3 1.1-2.4 0 0-2.2-.8-2.5-3.5zM9.7 4.5c.6-.7 1-1.7.9-2.7-.9 0-1.9.6-2.5 1.3-.5.6-1 1.6-.9 2.6 1 .1 2-.5 2.5-1.2z" />
            </svg>
            Download for iPhone
          </a>
          <a href="mailto:support@interrupt-app.com?subject=Android%20list" className="btn-secondary" style={{ padding: '16px 28px', fontSize: 16 }}>
            Notify me about Android
          </a>
        </div>
        <div className="fine">No account required. No email required. The button works the moment you open the app.</div>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 32, marginBottom: 48 }} className="ftr-grid">
          <div>
            <div className="logo" style={{ marginBottom: 14 }}>
              <img src="assets/interrupt-logo.png" alt="Interrupt" style={{ width: 32, height: 32, borderRadius: 8, display: 'block' }} />
              <span>Interrupt</span>
            </div>
            <p style={{ fontSize: 14, color: 'var(--muted)', maxWidth: 320, lineHeight: 1.55 }}>
              A pause button for cravings. Made with care, in public, by a small team that has been there.
            </p>
          </div>
          {[
          { h: 'Product', l: [['How it works', '#how'], ['Packs', '#packs'], ['Pricing', '#pricing'], ['FAQ', '#faq']] },
          { h: 'Support', l: [['Contact', 'support.html'], ['Crisis resources', 'crisis.html']] },
          { h: 'Legal', l: [['Privacy', 'privacy.html'], ['Terms', 'terms.html']] }].
          map((c, i) =>
          <div key={i}>
              <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--fg)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 14 }}>
                {c.h}
              </div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 10 }}>
                {c.l.map(([label, href]) =>
              <li key={label}><a href={href} style={{ fontSize: 14, color: 'var(--muted-2)', textDecoration: 'none' }}>{label}</a></li>
              )}
              </ul>
            </div>
          )}
        </div>
        <div style={{
          paddingTop: 24, borderTop: '1px solid var(--border)',
          display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16,
          fontSize: 13, color: 'var(--muted)'
        }}>
          <div>© 2026 Interrupt. Not a substitute for medical care. <a href="crisis.html" style={{ color: 'var(--muted-2)' }}>If you're in crisis →</a></div>
          <div>Made for the moment between the urge and the act.</div>
        </div>
      </div>
      <style>{`
        @media (max-width: 760px) { .ftr-grid { grid-template-columns: 1fr 1fr !important; } }
      `}</style>
    </footer>);

}

// ───── Tiny inline icons ─────
function Star() {
  return <svg width="14" height="14" viewBox="0 0 24 24" fill="hsl(38, 92%, 50%)"><polygon points="12 2 15 9 22 9 17 14 19 22 12 17 5 22 7 14 2 9 9 9" /></svg>;
}
function Lock() {
  return <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><rect x="4" y="11" width="16" height="10" rx="2" /><path d="M8 11V7a4 4 0 0 1 8 0v4" /></svg>;
}

function App() {
  return (
    <div>
      <NavBar />
      <Hero />
      <ProblemSection />
      <HowItWorks />
      <ScienceSection />
      <PacksSection />
      <HistoryShowcase />
      <Testimonials />
      <Pricing />
      <FAQ />
      <FinalCTA />
      <Footer />
    </div>);

}

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