// phone.jsx — interactive "Begin" app mock (3 tappable screens + breathing prayer)
const { useState, useEffect, useRef } = React;

const PEACH = 'var(--peach)';

/* ——— small building blocks ——— */
function Ring({ value, label, sub, color, active }) {
  const r = 30, c = 2 * Math.PI * r;
  const [shown, setShown] = useState(0);
  useEffect(() => {
    if (!active) { setShown(0); return; }
    let v = 0; const id = setInterval(() => {
      v += 0.06; if (v >= 1) { v = 1; clearInterval(id); }
      setShown(v);
    }, 16);
    return () => clearInterval(id);
  }, [active, value]);
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, flex: 1 }}>
      <div style={{ position: 'relative', width: 74, height: 74 }}>
        <svg width="74" height="74" style={{ transform: 'rotate(-90deg)' }}>
          <circle cx="37" cy="37" r={r} fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="5" />
          <circle cx="37" cy="37" r={r} fill="none" stroke={color} strokeWidth="5"
            strokeLinecap="round"
            strokeDasharray={c} strokeDashoffset={c * (1 - value * shown)} />
        </svg>
        <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center',
          fontWeight: 700, fontSize: 15, color: 'var(--text)' }}>
          {label}
        </div>
      </div>
      <span style={{ fontSize: 10.5, color: 'var(--muted)', letterSpacing: '0.02em' }}>{sub}</span>
    </div>
  );
}

function HomeScreen({ onPray }) {
  return (
    <div style={{ padding: '26px 20px 16px' }}>
      <p className="font-serif" style={{ fontSize: 25, lineHeight: 1.05, color: 'var(--text)' }}>
        Good afternoon,<br />Sarah
      </p>
      <p style={{ fontSize: 12.5, color: 'var(--muted)', marginTop: 6 }}>Wednesday, March 4</p>
      <p style={{ fontSize: 11, color: 'rgba(255,255,255,0.45)', marginTop: 2 }}>Week 1 · Day 2 / 30</p>

      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 7, marginTop: 14,
        padding: '7px 13px', borderRadius: 999,
        background: 'rgba(227,185,138,0.12)', border: '1px solid rgba(227,185,138,0.25)' }}>
        <span style={{ fontSize: 13 }}>🔥</span>
        <span style={{ fontSize: 12, fontWeight: 600, color: PEACH }}>1-day streak</span>
      </div>

      {/* prayer of the day */}
      <div style={{ marginTop: 16, borderRadius: 20, overflow: 'hidden', position: 'relative',
        height: 252, border: '1px solid var(--border)',
        background: 'linear-gradient(165deg, #2c3550 0%, #3a3147 45%, #4a3326 100%)' }}>
        <div style={{ position: 'absolute', top: 18, right: 20, fontSize: 26 }}>🌙</div>
        <div style={{ position: 'absolute', inset: 0,
          background: 'radial-gradient(80% 50% at 70% 25%, rgba(255,225,170,0.22), transparent 70%)' }} />
        <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '18px 18px 20px',
          background: 'linear-gradient(to top, rgba(10,8,14,0.85), transparent)' }}>
          <p className="font-mono" style={{ fontSize: 9, letterSpacing: '0.22em', color: 'rgba(255,255,255,0.7)' }}>
            PRAYER OF THE DAY
          </p>
          <p className="font-serif" style={{ fontSize: 22, color: '#fff', marginTop: 4 }}>Peace &amp; Stillness</p>
          <p style={{ fontSize: 12, color: 'rgba(255,255,255,0.7)', marginTop: 2 }}>God is near to you · 3 min</p>
          <button onClick={onPray} className="mt-press" style={{
            marginTop: 14, width: '100%', padding: '12px', borderRadius: 13, border: 'none',
            background: PEACH, color: '#2a2014', fontWeight: 700, fontSize: 14,
            fontFamily: 'inherit', cursor: 'pointer', display: 'flex', alignItems: 'center',
            justifyContent: 'center', gap: 8 }}>
            ▶ Start prayer
          </button>
        </div>
      </div>
    </div>
  );
}

function PlanScreen() {
  const days = [
    { n: 1, t: 'Come as you are', open: true },
    { n: 2, t: 'God is near', open: false },
    { n: 3, t: 'Cast the burden', open: false },
    { n: 4, t: "Peace isn't denial", open: false },
    { n: 5, t: 'Guard your mind', open: false },
    { n: 6, t: 'You are held', open: false },
  ];
  const [active, setActive] = useState(1);
  return (
    <div style={{ padding: '26px 20px 16px' }}>
      <p className="font-serif" style={{ fontSize: 24, color: 'var(--text)' }}>Your 30-Day Plan</p>
      <p style={{ fontSize: 12.5, color: PEACH, marginTop: 3 }}>Focused on Peace</p>
      <p style={{ fontSize: 11, color: 'var(--muted)', marginTop: 1 }}>5 min/day · 30 days</p>

      <p className="font-mono" style={{ fontSize: 9.5, letterSpacing: '0.2em', color: 'var(--muted)',
        marginTop: 22, marginBottom: 4 }}>WEEK 1</p>
      <p className="font-serif" style={{ fontSize: 16, color: 'var(--text)', marginBottom: 12 }}>Peace &amp; Stillness</p>

      <div style={{ position: 'relative' }}>
        <div style={{ position: 'absolute', left: 15, top: 8, bottom: 8, width: 1.5,
          background: 'var(--border)' }} />
        {days.map((d) => {
          const on = active === d.n;
          return (
            <button key={d.n} onClick={() => setActive(d.n)} style={{
              display: 'flex', alignItems: 'center', gap: 12, width: '100%', textAlign: 'left',
              background: 'none', border: 'none', cursor: 'pointer', padding: '7px 0',
              fontFamily: 'inherit', position: 'relative', zIndex: 1 }}>
              <span style={{ width: 32, height: 32, borderRadius: '50%', flexShrink: 0,
                display: 'grid', placeItems: 'center', fontSize: 12, fontWeight: 700,
                transition: 'all .3s',
                background: on ? PEACH : 'var(--card-2)',
                color: on ? '#2a2014' : 'var(--muted)',
                border: on ? 'none' : '1px solid var(--border)' }}>
                {on ? d.n : '🔒'}
              </span>
              <span>
                <span className="font-mono" style={{ fontSize: 8.5, letterSpacing: '0.15em',
                  color: 'var(--muted)', display: 'block' }}>DAY {d.n}</span>
                <span className="font-serif" style={{ fontSize: 15,
                  color: on ? 'var(--text)' : 'rgba(255,255,255,0.5)' }}>{d.t}</span>
              </span>
            </button>
          );
        })}
      </div>
      <button className="mt-press" style={{ marginTop: 16, width: '100%', padding: '12px',
        borderRadius: 13, border: 'none', background: PEACH, color: '#2a2014',
        fontWeight: 700, fontSize: 14, fontFamily: 'inherit', cursor: 'pointer' }}>
        Begin my journey
      </button>
    </div>
  );
}

function JourneyScreen({ active }) {
  return (
    <div style={{ padding: '26px 20px 16px' }}>
      <p className="font-serif" style={{ fontSize: 24, color: 'var(--text)' }}>My journey</p>

      <div style={{ marginTop: 16, padding: 16, borderRadius: 18, background: 'var(--card-2)',
        border: '1px solid var(--border)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10 }}>
          <span style={{ fontSize: 13, color: 'var(--text)', fontWeight: 600, whiteSpace: 'nowrap' }}>📍 Week 3 · Peace</span>
          <span style={{ fontSize: 12, fontWeight: 700, color: PEACH, whiteSpace: 'nowrap',
            background: 'rgba(227,185,138,0.14)', padding: '3px 9px', borderRadius: 999 }}>🔥 10</span>
        </div>
        <div style={{ display: 'flex', gap: 6, marginTop: 12 }}>
          {[16,17,18,19,20,21].map((d, i) => (
            <span key={d} style={{ flex: 1, textAlign: 'center', fontSize: 11, padding: '6px 0',
              borderRadius: 999, fontWeight: 600,
              background: i < 2 ? 'rgba(157,200,150,0.18)' : (i === 2 ? 'rgba(227,185,138,0.16)' : 'transparent'),
              border: i === 2 ? `1px solid ${PEACH}` : '1px solid var(--border)',
              color: i < 2 ? '#a8d3a0' : (i === 2 ? PEACH : 'var(--muted)') }}>
              {i < 2 ? '✓' : d}
            </span>
          ))}
        </div>
      </div>

      <div style={{ marginTop: 14, padding: '18px 14px', borderRadius: 18, background: 'var(--card-2)',
        border: '1px solid var(--border)' }}>
        <p className="font-mono" style={{ fontSize: 9, letterSpacing: '0.2em', color: 'var(--muted)',
          marginBottom: 14 }}>📈 YOUR FAITHFULNESS</p>
        <div style={{ display: 'flex', gap: 4 }}>
          <Ring value={0.53} label="16/30" sub="Days" color="var(--primary)" active={active} />
          <Ring value={0.84} label="84%" sub="Consistency" color={PEACH} active={active} />
          <Ring value={0.46} label="46%" sub="Calmer" color="var(--mauve)" active={active} />
        </div>
        <div style={{ marginTop: 14, paddingTop: 12, borderTop: '1px solid var(--border)',
          fontSize: 10.5, color: 'var(--muted)', textAlign: 'center' }}>
          ✦ 16 prayers · 128 min with God · 🔥 10 day streak
        </div>
      </div>

      <div style={{ marginTop: 14, padding: 16, borderRadius: 18,
        background: 'rgba(227,185,138,0.07)', border: '1px solid rgba(227,185,138,0.2)' }}>
        <p className="font-mono" style={{ fontSize: 9, letterSpacing: '0.18em', color: PEACH,
          marginBottom: 8 }}>✦ WEEKLY INSIGHT</p>
        <p style={{ fontSize: 12.5, lineHeight: 1.55, color: 'rgba(255,255,255,0.8)' }}>
          Your prayers around peace have moved from anxious toward neutral. That shift isn't random —
          it's the quiet fruit of showing up.
        </p>
      </div>
    </div>
  );
}

/* ——— breathing prayer overlay ——— */
function PrayerOverlay({ onClose }) {
  const [phase, setPhase] = useState('Breathe in');
  useEffect(() => {
    const seq = ['Breathe in', 'Hold', 'Breathe out', 'Rest'];
    let i = 0;
    const id = setInterval(() => { i = (i + 1) % seq.length; setPhase(seq[i]); }, 4000);
    return () => clearInterval(id);
  }, []);
  return (
    <div onClick={onClose} style={{ position: 'absolute', inset: 0, zIndex: 30, display: 'grid',
      placeItems: 'center', cursor: 'pointer',
      background: 'linear-gradient(165deg, #2c3550, #3a3147 55%, #4a3326)' }}>
      <div style={{ textAlign: 'center', color: '#fff' }}>
        <div style={{ width: 130, height: 130, borderRadius: '50%', margin: '0 auto 26px',
          background: 'radial-gradient(circle, rgba(255,225,170,0.5), rgba(255,225,170,0.05) 70%)',
          animation: 'breathe 8s ease-in-out infinite', display: 'grid', placeItems: 'center' }}>
          <span style={{ fontSize: 30 }}>🌙</span>
        </div>
        <p className="font-serif" style={{ fontSize: 24, transition: 'opacity .5s' }}>{phase}</p>
        <p style={{ fontSize: 11, color: 'rgba(255,255,255,0.6)', marginTop: 28,
          letterSpacing: '0.08em' }}>tap anywhere to close</p>
      </div>
      <style>{`@keyframes breathe {
        0%,100% { transform: scale(0.8); } 25% { transform: scale(1.18); }
        50% { transform: scale(1.18); } 75% { transform: scale(0.85); } }`}</style>
    </div>
  );
}

function BeginPhone({ src = 'assets/begin-demo.mp4' }) {
  const videoRef = useRef(null);
  const [paused, setPaused] = useState(false);

  const toggle = () => {
    const v = videoRef.current; if (!v) return;
    if (v.paused) { v.play().catch(() => {}); setPaused(false); }
    else { v.pause(); setPaused(true); }
  };

  return (
    <div className="phone-frame" style={{
      width: 300, height: 624, borderRadius: 46, padding: 11, flexShrink: 0,
      background: 'linear-gradient(160deg, #34323d, #1a181f)',
      boxShadow: '0 50px 90px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06), inset 0 0 0 2px rgba(0,0,0,0.5)',
    }}>
      <div onClick={toggle} role="button" aria-label={paused ? 'Play video' : 'Pause video'}
        style={{ position: 'relative', width: '100%', height: '100%', borderRadius: 36,
          overflow: 'hidden', background: 'var(--bg-deep)', cursor: 'pointer' }}>
        {/* notch */}
        <div style={{ position: 'absolute', top: 9, left: '50%', transform: 'translateX(-50%)',
          width: 92, height: 24, background: '#000', borderRadius: 999, zIndex: 20 }} />

        {/* Begin demo video */}
        <video
          ref={videoRef}
          src={src}
          autoPlay
          muted
          loop
          playsInline
          webkit-playsinline="true"
          preload="auto"
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%',
            objectFit: 'cover', objectPosition: 'center top' }}
        />

        {/* play indicator when paused */}
        {paused && (
          <div style={{ position: 'absolute', inset: 0, zIndex: 21, display: 'grid',
            placeItems: 'center', background: 'rgba(0,0,0,0.35)' }}>
            <div style={{ width: 64, height: 64, borderRadius: '50%', display: 'grid',
              placeItems: 'center', background: 'rgba(255,255,255,0.92)',
              boxShadow: '0 8px 28px rgba(0,0,0,0.4)' }}>
              <span style={{ fontSize: 22, color: '#1a181f', marginLeft: 4 }}>▶</span>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

window.BeginPhone = BeginPhone;