// vsl-props.jsx — reusable physical/UI props across scenes
const { HORUS: H, GRAD: G } = window;

// ── Phone prop — the recurring symbol (off in S2, lit in S8) ─────────────────
function PhoneProp({ x, y, scale = 1, rot = -8, lit = false, glow = 0, agendaFill = 0 }) {
  const slots = [
    { t: '09:00', label: 'Consulta — cliente novo' },
    { t: '11:30', label: 'Audiência · revisão' },
    { t: '14:00', label: 'Onboarding — contrato' },
    { t: '16:30', label: 'Retorno · qualificado' },
    { t: '18:00', label: 'Diagnóstico de caso' },
  ];
  const shown = Math.round(agendaFill * slots.length);
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      transform: `translate(-50%,-50%) scale(${scale}) rotate(${rot}deg)`,
      transformOrigin: 'center',
    }}>
      <div style={{
        width: 320, height: 660, borderRadius: 46, background: 'linear-gradient(150deg,#1b1b24,#101016)',
        border: '1.5px solid rgba(255,255,255,0.10)', padding: 12,
        boxShadow: lit
          ? `0 30px 90px rgba(0,0,0,0.6), 0 0 ${40 + glow * 60}px hsl(263 70% 50% / ${0.25 + glow * 0.35})`
          : '0 30px 80px rgba(0,0,0,0.7)',
        position: 'relative',
      }}>
        {/* screen */}
        <div style={{
          width: '100%', height: '100%', borderRadius: 36, overflow: 'hidden', position: 'relative',
          background: lit ? '#0c0c14' : '#060608',
        }}>
          {!lit && (
            <div style={{ position: 'absolute', inset: 0,
              background: 'linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 30%, transparent 70%, rgba(255,255,255,0.03) 100%)' }} />
          )}
          {lit && (
            <div style={{ position: 'absolute', inset: 0, opacity: glow, display: 'flex', flexDirection: 'column' }}>
              {/* header */}
              <div style={{ padding: '26px 22px 14px' }}>
                <div style={{ fontFamily: H.display, fontSize: 13, letterSpacing: '0.22em', color: H.purpleLight, textTransform: 'uppercase' }}>Hoje · Agenda</div>
                <div style={{ fontFamily: H.display, fontSize: 30, fontWeight: 700, color: H.white, marginTop: 4 }}>Cheia.</div>
              </div>
              {/* slots */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 9, padding: '4px 16px' }}>
                {slots.map((s, i) => (
                  <div key={i} style={{
                    display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px', borderRadius: 14,
                    background: i < shown ? 'linear-gradient(120deg, hsl(263 70% 50% / 0.18), hsl(217 91% 60% / 0.12))' : 'rgba(255,255,255,0.03)',
                    border: `1px solid ${i < shown ? 'hsl(263 70% 60% / 0.35)' : 'rgba(255,255,255,0.05)'}`,
                    opacity: i < shown ? 1 : 0.35,
                  }}>
                    <div style={{ fontFamily: H.display, fontSize: 14, fontWeight: 600, color: i < shown ? H.blueLight : H.faint, width: 46 }}>{s.t}</div>
                    <div style={{ fontFamily: H.sans, fontSize: 13, color: i < shown ? H.white : H.faint }}>{s.label}</div>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 'auto', padding: 16 }}>
                <div style={{ height: 52, borderRadius: 14, background: G, display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: H.display, fontWeight: 600, color: '#fff', fontSize: 15 }}>Próximo cliente</div>
              </div>
            </div>
          )}
        </div>
        {/* notch */}
        <div style={{ position: 'absolute', top: 22, left: '50%', transform: 'translateX(-50%)', width: 96, height: 22, borderRadius: 14, background: '#000' }} />
      </div>
    </div>
  );
}

// ── Generic browser/app frame for product screens ───────────────────────────
function DeviceFrame({ x, y, w, h, scale = 1, title = '', accent = H.purple, children, glow = false }) {
  return (
    <div style={{
      position: 'absolute', left: x, top: y, width: w, transform: `translate(-50%,-50%) scale(${scale})`, transformOrigin: 'center',
    }}>
      <div style={{
        width: w, height: h, borderRadius: 18, overflow: 'hidden', background: '#0c0c14',
        border: '1px solid rgba(255,255,255,0.10)',
        boxShadow: glow ? `0 40px 110px rgba(0,0,0,0.6), 0 0 70px hsl(263 70% 50% / 0.22)` : '0 40px 100px rgba(0,0,0,0.55)',
      }}>
        {/* titlebar */}
        <div style={{ height: 46, background: 'rgba(255,255,255,0.03)', borderBottom: '1px solid rgba(255,255,255,0.07)',
          display: 'flex', alignItems: 'center', gap: 9, padding: '0 18px' }}>
          <div style={{ display: 'flex', gap: 7 }}>
            {['#ff5f57','#febc2e','#28c840'].map(c => <div key={c} style={{ width: 11, height: 11, borderRadius: 6, background: c, opacity: 0.85 }} />)}
          </div>
          <div style={{ flex: 1, textAlign: 'center', fontFamily: H.display, fontSize: 13, letterSpacing: '0.04em', color: H.dim }}>{title}</div>
          <div style={{ width: 44 }} />
        </div>
        <div style={{ position: 'relative', height: h - 46 }}>{children}</div>
      </div>
    </div>
  );
}

Object.assign(window, { PhoneProp, DeviceFrame });