// Phone screen mockups for the marketing site.
// Mirrors the actual app's components: TimerRing, BreathingCircle, TriggerChips, UrgeSlider.

const _PHONE_FF = "'Helvetica Neue', Inter, system-ui, sans-serif";

const I_PRIMARY = 'hsl(220, 65%, 54%)';
const I_PRIMARY_SOFT = 'hsl(220, 55%, 62%)';
const I_FG = 'hsl(220, 13%, 7%)';
const I_MUTED = 'hsl(220, 9%, 46%)';
const I_BORDER = 'hsl(220, 13%, 91%)';
const I_CARD = 'hsl(0, 0%, 98%)';
const I_CHIP_BG = 'hsl(220, 14%, 95%)';

// ─── Home screen: single big Interrupt button + Situation Packs tile ──
function PhoneHome() {
  return (
    <div style={{ background: '#fff', height: '100%', padding: '60px 20px 0', fontFamily: _PHONE_FF, display: 'flex', flexDirection: 'column', boxSizing: 'border-box' }}>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', paddingTop: 60 }}>
        <div style={{ fontSize: 11, fontWeight: 500, color: I_MUTED, letterSpacing: '0.22em', textTransform: 'uppercase' }}>
          Pause before acting
        </div>
        <div style={{ position: 'relative', marginTop: 28, width: 220, height: 220 }}>
          <div style={{ position: 'absolute', inset: -8, borderRadius: '50%', background: 'hsla(220, 55%, 62%, 0.22)', filter: 'blur(4px)' }}/>
          <button style={{
            position: 'relative', width: 220, height: 220, borderRadius: '50%',
            background: I_PRIMARY, color: '#fff', border: 'none', cursor: 'pointer',
            boxShadow: '0 0 60px hsla(220, 65%, 54%, 0.35), 0 0 0 1px hsla(220, 55%, 62%, 0.4)',
            fontFamily: _PHONE_FF,
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
          }}>
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
              <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
            </svg>
            <div style={{ marginTop: 8, fontSize: 26, fontWeight: 700, letterSpacing: '-0.02em' }}>Interrupt</div>
          </button>
        </div>
        <div style={{ marginTop: 22, fontSize: 13, color: I_MUTED }}>
          <span style={{ color: I_FG, fontWeight: 600 }}>1 min</span>
          <span style={{ margin: '0 8px', opacity: 0.5 }}>·</span>
          <span>Change in Settings</span>
        </div>
      </div>
      <div style={{ padding: '0 0 16px' }}>
        <div style={{ padding: '14px 16px', borderRadius: 16, background: I_CHIP_BG, display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ width: 40, height: 40, borderRadius: 12, background: 'hsla(220, 65%, 54%, 0.10)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={I_PRIMARY} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
              <rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/>
              <rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/>
            </svg>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 15, fontWeight: 700, color: I_FG, letterSpacing: '-0.01em' }}>Situation packs</div>
            <div style={{ fontSize: 13, color: I_MUTED, marginTop: 2 }}>10 tailored interventions</div>
          </div>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={I_MUTED} strokeWidth="1.6" strokeLinecap="round"><polyline points="9 6 15 12 9 18"/></svg>
        </div>
      </div>
    </div>
  );
}

// ─── Pause screen: timer ring + breathing circle ──────────────────────
function PhonePause() {
  const [t, setT] = React.useState(38);
  React.useEffect(() => {
    const id = setInterval(() => setT(prev => (prev >= 60 ? 0 : prev + 1)), 1000);
    return () => clearInterval(id);
  }, []);
  const pct = t / 60;
  const remaining = 60 - t;

  // Breathing scale loop: 5s in, 5s out (six breaths a minute)
  const [scale, setScale] = React.useState(0.85);
  const [phase, setPhase] = React.useState('BREATHE IN');
  React.useEffect(() => {
    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);
  }, []);

  const size = 260, sw = 6, r = (size - sw) / 2, c = r * 2 * Math.PI;

  return (
    <div style={{ background: '#fff', minHeight: '100%', padding: '60px 20px 40px', fontFamily: _PHONE_FF,
      display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
      <div style={{ width: '100%', display: 'flex', justifyContent: 'space-between', padding: '8px 0 24px' }}>
        <div style={{ fontSize: 14, fontWeight: 500, color: I_MUTED }}>Cancel</div>
        <div style={{ fontSize: 14, fontWeight: 500, color: I_MUTED }}>Scrolling · 1 min</div>
      </div>

      <div style={{ marginTop: 12, 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={I_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' }}>
          <div style={{
            width: 180, height: 180, 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.2)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            transform: `scale(${scale})`,
            transition: `transform 5s ease-in-out`,
          }}>
            <div style={{ textAlign: 'center' }}>
              <div style={{ fontSize: 11, color: I_PRIMARY, fontWeight: 700, letterSpacing: '0.18em' }}>{phase}</div>
              <div style={{ fontSize: 36, fontWeight: 700, color: I_FG, letterSpacing: '-0.02em', marginTop: 2 }}>
                0:{String(remaining).padStart(2, '0')}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div style={{ marginTop: 36, textAlign: 'center', maxWidth: 280 }}>
        <div className="serif" style={{ fontSize: 22, color: I_FG, fontWeight: 600, letterSpacing: '-0.02em', fontFamily: 'Fraunces, Georgia, serif' }}>
          Breathe
        </div>
        <div style={{ fontSize: 14, color: I_MUTED, marginTop: 6, lineHeight: 1.5 }}>
          Slower than the urge.
        </div>
      </div>
    </div>
  );
}

// ─── Result screen: urge slider + outcomes ────────────────────────────
function PhoneResult() {
  const [urge, setUrge] = React.useState(3);
  const [trigger, setTrigger] = React.useState('Scrolling');
  const triggers = ['Scrolling', 'Avoiding', 'Racing thoughts', 'Overload', 'After meal', 'Coffee', 'Stuck', 'Self-criticism', 'Strong urge', 'Same loop'];

  return (
    <div style={{ background: '#fff', minHeight: '100%', padding: '52px 18px 32px', fontFamily: _PHONE_FF }}>
      <div style={{ textAlign: 'center', padding: '12px 0 22px' }}>
        <div style={{
          width: 50, height: 50, borderRadius: 25, margin: '0 auto 12px',
          background: 'hsla(220, 65%, 54%, 0.1)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke={I_PRIMARY} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="20 6 9 17 4 12"/>
          </svg>
        </div>
        <div style={{ fontSize: 22, fontWeight: 700, color: I_FG, letterSpacing: '-0.02em' }}>
          You interrupted it.
        </div>
      </div>

      <div style={{ background: I_CARD, border: `1px solid ${I_BORDER}`, borderRadius: 16, padding: '14px 16px', marginBottom: 12 }}>
        <div style={{ fontSize: 12.5, fontWeight: 600, color: I_FG, marginBottom: 10 }}>
          How strong is the urge now?
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', fontSize: 11, color: I_MUTED, marginBottom: 6 }}>
          <span>None</span>
          <span style={{ fontSize: 26, fontWeight: 700, color: I_FG, lineHeight: 1 }}>{urge}</span>
          <span>Intense</span>
        </div>
        <input type="range" min="0" max="10" value={urge} onChange={e => setUrge(+e.target.value)}
          style={{
            width: '100%', height: 5, borderRadius: 3, appearance: 'none',
            background: `linear-gradient(to right, ${I_PRIMARY} 0%, ${I_PRIMARY} ${urge*10}%, ${I_CHIP_BG} ${urge*10}%, ${I_CHIP_BG} 100%)`,
            outline: 'none',
          }}/>
      </div>

      <div style={{ background: I_CARD, border: `1px solid ${I_BORDER}`, borderRadius: 16, padding: '14px 16px', marginBottom: 14 }}>
        <div style={{ fontSize: 12.5, fontWeight: 600, color: I_FG, marginBottom: 10 }}>
          What triggered it?
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
          {triggers.map(name => {
            const active = trigger === name;
            return (
              <button key={name} onClick={() => setTrigger(name)} style={{
                padding: '6px 11px', borderRadius: 999,
                border: `1px solid ${active ? I_PRIMARY : I_BORDER}`,
                background: active ? I_PRIMARY : '#fff',
                color: active ? '#fff' : I_FG,
                fontSize: 11.5, fontWeight: 600, fontFamily: 'inherit',
                cursor: 'pointer',
              }}>{name}</button>
            );
          })}
        </div>
      </div>

      <button style={{ width: '100%', padding: '14px 0', borderRadius: 14, border: 'none', background: I_PRIMARY, color: '#fff', fontSize: 14, fontWeight: 600, fontFamily: 'inherit' }}>
        Save & Exit
      </button>
    </div>
  );
}

// ─── History screen: Pro analytics (no therapist export yet) ──────────
function PhoneHistory() {
  const rows = [
    ['Sessions logged', '26', I_FG],
    ['Average urge change', '−4.2 pts', I_PRIMARY],
    ['Most frequent trigger', 'Scrolling (11)', I_FG],
    ['Time-of-day cluster', 'Evening (6–10 PM)', I_FG],
    ['Felt easier', '18 of 26', I_FG],
  ];
  const ranges = ['1w', '4w', '12w', 'All'];
  return (
    <div style={{ background: '#fff', height: '100%', fontFamily: _PHONE_FF, padding: '72px 22px 80px', boxSizing: 'border-box', overflow: 'hidden' }}>
      <div style={{ fontSize: 26, fontWeight: 700, letterSpacing: '-0.02em', color: I_FG }}>History</div>
      <div style={{ fontSize: 13, color: I_MUTED, marginTop: 4, marginBottom: 22 }}>4 weeks · Apr 8 – May 6</div>

      {/* What's in it */}
      <div style={{ fontSize: 10, fontWeight: 600, color: I_MUTED, letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 8 }}>What's in it</div>
      <div style={{ background: '#fff', border: `1px solid ${I_BORDER}`, borderRadius: 14, padding: '4px 14px', marginBottom: 20 }}>
        {rows.map(([k, v, c], i) => (
          <div key={i} style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            padding: '13px 0',
            borderTop: i === 0 ? 'none' : `1px solid ${I_BORDER}`,
          }}>
            <div style={{ fontSize: 13, color: I_FG }}>{k}</div>
            <div style={{ fontSize: 13, fontWeight: 700, color: c }}>{v}</div>
          </div>
        ))}
      </div>

      {/* Range chips */}
      <div style={{ display: 'flex', gap: 8, marginBottom: 22 }}>
        {ranges.map((r, i) => (
          <div key={i} style={{
            padding: '7px 16px', borderRadius: 999, fontSize: 12.5, fontWeight: 600,
            background: i === 1 ? I_PRIMARY : I_CHIP_BG,
            color: i === 1 ? '#fff' : I_FG,
          }}>{r}</div>
        ))}
      </div>

      {/* Session log */}
      <div style={{ fontSize: 10, fontWeight: 600, color: I_MUTED, letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 10 }}>Session log</div>
      {[
        { tag: 'Scrolling',  date: 'May 6, 3:42 PM',  dur: '60s', from: 8, to: 3 },
        { tag: 'Coffee',  date: 'May 6, 11:08 AM', dur: '30s', from: 6, to: 2 },
        { tag: 'After meal', date: 'May 5, 9:14 PM',  dur: '2m',  from: 7, to: 4 },
      ].map((s, i) => (
        <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px 2px', borderTop: i === 0 ? 'none' : `1px solid ${I_BORDER}` }}>
          <div>
            <div style={{ fontSize: 13.5, fontWeight: 700, color: I_FG }}>{s.tag}</div>
            <div style={{ fontSize: 11.5, color: I_MUTED, marginTop: 2 }}>{s.date} · {s.dur}</div>
          </div>
          <div style={{ fontSize: 13, fontWeight: 600, color: I_FG, display: 'flex', alignItems: 'center', gap: 6 }}>
            <span>{s.from}</span>
            <svg width="12" height="10" viewBox="0 0 24 24" fill="none" stroke="hsl(160, 50%, 42%)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
            <span style={{ color: 'hsl(160, 50%, 42%)' }}>{s.to}</span>
          </div>
        </div>
      ))}
    </div>
  );
}

// Bottom nav for phone screens that need it
function PhoneBottomNav({ active = 'home' }) {
  const tabs = [
    { id: 'home', label: 'Home', icon: <path d="M3 12l9-9 9 9M5 10v10h5v-6h4v6h5V10"/> },
    { id: 'history', label: 'History', icon: <><circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 15 14"/></> },
    { id: 'settings', label: 'Settings', icon: <><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h0a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82v0a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></> },
  ];
  return (
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0,
      background: 'rgba(255,255,255,0.95)', backdropFilter: 'blur(16px)',
      borderTop: `1px solid ${I_BORDER}`, paddingBottom: 28, paddingTop: 8,
      display: 'flex', justifyContent: 'space-around',
    }}>
      {tabs.map(t => (
        <div key={t.id} style={{
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
          padding: '8px 16px',
          color: active === t.id ? I_PRIMARY : I_MUTED,
        }}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
            strokeWidth={active === t.id ? 2.5 : 2} strokeLinecap="round" strokeLinejoin="round">
            {t.icon}
          </svg>
          <div style={{ fontSize: 10, fontWeight: 500 }}>{t.label}</div>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { PhoneHome, PhonePause, PhoneResult, PhoneHistory, PhoneBottomNav });