// Phone mockup placeholders for showing the app — used as visual until user uploads real screenshots.
// 3 variants: focus timer, blocker, prayer schedule.

function PhoneFrame({ children, scale = 1, tilt = 0 }) {
  return (
    <div style={{
      width: 280 * scale, height: 580 * scale,
      borderRadius: 44 * scale,
      background: 'linear-gradient(180deg, #1a1f2e, #0a0d18)',
      padding: 8 * scale,
      boxShadow:
        '0 1px 0 rgba(255,255,255,.08) inset, ' +
        '0 0 0 1px rgba(255,255,255,.06), ' +
        '0 30px 80px -20px rgba(0,0,0,.7), ' +
        '0 0 60px -10px rgba(255,90,54,.15)',
      transform: `rotate(${tilt}deg)`,
      transformOrigin: 'center',
      position: 'relative',
    }}>
      <div style={{
        width: '100%', height: '100%',
        borderRadius: 36 * scale,
        background: 'var(--templar-night)',
        overflow: 'hidden',
        position: 'relative',
      }}>
        {/* notch */}
        <div style={{
          position: 'absolute', top: 10 * scale, left: '50%', transform: 'translateX(-50%)',
          width: 90 * scale, height: 22 * scale, borderRadius: 12 * scale,
          background: '#000',
        }} />
        {children}
      </div>
    </div>
  );
}

function PhoneStatusBar() {
  return (
    <div style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      padding: '14px 24px 6px', fontSize: 11, color: 'var(--cloud)', fontWeight: 600,
    }}>
      <span>9:41</span>
      <span style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
        <span style={{ width: 14, height: 8, border: '1px solid var(--cloud)', borderRadius: 2, position: 'relative' }}>
          <span style={{ position: 'absolute', inset: 1, background: 'var(--cloud)', borderRadius: 1 }} />
        </span>
      </span>
    </div>
  );
}

// Focus timer
function PhoneFocus() {
  return (
    <>
      <PhoneStatusBar />
      <div style={{ padding: '28px 24px 24px', display: 'flex', flexDirection: 'column', height: 'calc(100% - 32px)' }}>
        <div style={{ fontSize: 10, letterSpacing: '.22em', textTransform: 'uppercase', color: 'var(--muted)' }}>
          Sesión de enfoque
        </div>
        <div className="display" style={{ fontSize: 22, marginTop: 6, color: 'var(--mist)' }}>
          Vigilia
        </div>

        <div style={{ marginTop: 38, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div style={{
            width: 200, height: 200, borderRadius: '50%',
            background: 'conic-gradient(var(--accent) 0deg 240deg, rgba(255,255,255,.06) 240deg 360deg)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 0 60px -10px rgba(255,90,54,.45)',
          }}>
            <div style={{
              width: 174, height: 174, borderRadius: '50%',
              background: 'var(--templar-night)',
              display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
            }}>
              <div style={{ fontSize: 48, fontWeight: 800, color: 'var(--mist)', letterSpacing: '-.02em' }}>22:14</div>
              <div style={{ fontSize: 10, letterSpacing: '.2em', color: 'var(--muted)', textTransform: 'uppercase', marginTop: 4 }}>
                queda · 47 min
              </div>
            </div>
          </div>
        </div>

        <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 10, alignItems: 'center' }}>
          <div style={{ display: 'flex', gap: 8 }}>
            {Array.from({ length: 5 }).map((_, i) => (
              <span key={i} style={{
                width: 10, height: 10, borderRadius: 2,
                background: i < 3 ? 'var(--gold)' : 'rgba(255,255,255,.1)',
                transform: 'rotate(45deg)',
              }} />
            ))}
          </div>
          <div style={{ fontSize: 11, color: 'var(--muted)' }}>3 de 5 pomodoros</div>
        </div>

        <div style={{ marginTop: 'auto', display: 'flex', gap: 8 }}>
          <button style={{
            flex: 1, padding: '12px 0', borderRadius: 999, border: '1px solid var(--stroke-strong)',
            background: 'transparent', color: 'var(--mist)', fontSize: 12, fontWeight: 600,
          }}>Pausar</button>
          <button style={{
            flex: 1, padding: '12px 0', borderRadius: 999, border: 'none',
            background: 'var(--accent)', color: '#0a0a0a', fontSize: 12, fontWeight: 700,
          }}>Rendirse</button>
        </div>
      </div>
    </>
  );
}

// Blocker
function PhoneBlocker() {
  return (
    <>
      <PhoneStatusBar />
      <div style={{ padding: '40px 24px', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', height: 'calc(100% - 32px)' }}>
        <div style={{ width: 88, height: 88, marginTop: 30 }}>
          <TemplarMark size={88} accent="var(--accent)" />
        </div>
        <div style={{ fontSize: 10, letterSpacing: '.22em', textTransform: 'uppercase', color: 'var(--accent)', marginTop: 26 }}>
          Instagram bloqueado
        </div>
        <div className="display" style={{ fontSize: 22, lineHeight: 1.15, marginTop: 14, color: 'var(--mist)', maxWidth: 220 }}>
          Cristo levanta al que cae peleando.
        </div>
        <div style={{ fontSize: 12.5, lineHeight: 1.5, color: 'var(--cloud)', marginTop: 14, maxWidth: 220 }}>
          Estás en una sesión de enfoque. Volvé al combate.
        </div>
        <div style={{ marginTop: 'auto', width: '100%' }}>
          <button style={{
            width: '100%', padding: '14px 0', borderRadius: 999, border: 'none',
            background: 'var(--accent)', color: '#0a0a0a', fontSize: 13, fontWeight: 700,
          }}>Volver a Balduino</button>
          <div style={{ fontSize: 10.5, color: 'var(--muted-deep)', marginTop: 10, letterSpacing: '.06em' }}>
            Permitido en 14 min
          </div>
        </div>
      </div>
    </>
  );
}

// Prayer schedule
function PhonePrayer() {
  const hours = [
    { t: '06:00', n: 'Laudes',    s: 'completed' },
    { t: '09:00', n: 'Tercia',    s: 'completed' },
    { t: '12:00', n: 'Sexta',     s: 'active' },
    { t: '15:00', n: 'Nona',      s: 'pending' },
    { t: '18:00', n: 'Vísperas',  s: 'pending' },
    { t: '21:00', n: 'Completas', s: 'pending' },
  ];
  return (
    <>
      <PhoneStatusBar />
      <div style={{ padding: '24px 22px', height: 'calc(100% - 32px)', display: 'flex', flexDirection: 'column' }}>
        <div style={{ fontSize: 10, letterSpacing: '.22em', textTransform: 'uppercase', color: 'var(--gold)' }}>
          Horas canónicas
        </div>
        <div className="display" style={{ fontSize: 22, marginTop: 6, color: 'var(--mist)' }}>
          Liturgia del día
        </div>

        <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 6 }}>
          {hours.map((h, i) => {
            const isActive = h.s === 'active';
            const isDone = h.s === 'completed';
            return (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 12,
                padding: '10px 12px',
                borderRadius: 10,
                background: isActive ? 'rgba(255,90,54,.10)' : 'transparent',
                border: isActive ? '1px solid rgba(255,90,54,.35)' : '1px solid transparent',
              }}>
                <div style={{
                  width: 30, height: 30, borderRadius: '50%',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  background: isDone ? 'var(--gold)' : isActive ? 'var(--accent)' : 'rgba(255,255,255,.06)',
                  color: isDone || isActive ? '#0a0a0a' : 'var(--muted)',
                  fontSize: 11, fontWeight: 800,
                }}>
                  {isDone ? '✓' : i + 1}
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
                  <span style={{ fontSize: 13, fontWeight: 600, color: isActive ? 'var(--mist)' : isDone ? 'var(--cloud)' : 'var(--muted)' }}>{h.n}</span>
                  <span style={{ fontSize: 10.5, color: 'var(--muted-deep)', letterSpacing: '.04em' }}>{h.t}</span>
                </div>
                {isActive && (
                  <span style={{ fontSize: 9.5, letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--accent)', fontWeight: 700 }}>
                    Ahora
                  </span>
                )}
              </div>
            );
          })}
        </div>

        <div style={{ marginTop: 'auto', padding: 12, borderRadius: 12, background: 'rgba(255,255,255,.04)', border: '1px solid var(--stroke)' }}>
          <div style={{ fontSize: 10, letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--muted)' }}>Próxima oración</div>
          <div style={{ fontSize: 14, color: 'var(--mist)', fontWeight: 600, marginTop: 4 }}>en 23 minutos · Sexta</div>
        </div>
      </div>
    </>
  );
}

window.PhoneFrame = PhoneFrame;
window.PhoneFocus = PhoneFocus;
window.PhoneBlocker = PhoneBlocker;
window.PhonePrayer = PhonePrayer;