// Hi-fi kit navy — usado por todas as telas
// Garante: tela = 390x844, sem scroll interno, paleta navy + ouro consistente

const T = window.TOKENS;

// Wrapper hi-fi: fundo navy gradient + partículas + tab bar dark fixa
function HiFiScreen({ children, hideTabs, activeTab = 'home', go, padding = '60px 20px 0' }) {
  return (
    <div style={{
      width: '100%', height: '100%',
      background: `radial-gradient(ellipse at 50% 0%, ${T.navy2} 0%, ${T.navy} 50%, #060B1F 100%)`,
      position: 'relative', overflow: 'hidden',
    }}>
      {/* partículas decorativas */}
      {Array.from({ length: 18 }).map((_, i) => (
        <div key={i} style={{
          position: 'absolute',
          left: `${(i * 37 + 13) % 100}%`,
          top: `${(i * 53 + 7) % 90}%`,
          width: 1 + (i % 3), height: 1 + (i % 3), borderRadius: '50%',
          background: T.gold, opacity: 0.12 + (i % 4) * 0.08,
          pointerEvents: 'none',
        }} />
      ))}
      <div style={{
        position: 'relative', zIndex: 2,
        height: '100%', overflow: 'hidden',
        padding,
        display: 'flex', flexDirection: 'column',
        paddingBottom: hideTabs ? 30 : 80,
      }}>
        {children}
      </div>
      {!hideTabs && <HiFiTabs active={activeTab} go={go} />}
    </div>
  );
}
window.HiFiScreen = HiFiScreen;

function HiFiHeader({ title, onBack, action }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
      {onBack ? (
        <button onClick={onBack} style={{
          width: 36, height: 36, borderRadius: '50%',
          background: 'rgba(255,255,255,0.06)', border: `1px solid rgba(255,255,255,0.12)`,
          display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
          color: '#fff', fontSize: 14,
        }}>‹</button>
      ) : <div style={{ width: 36 }} />}
      <div style={{ fontFamily: T.serif, fontSize: 18, color: '#fff', fontWeight: 500, flex: 1, textAlign: 'center' }}>{title}</div>
      {action || <div style={{ width: 36 }} />}
    </div>
  );
}
window.HiFiHeader = HiFiHeader;

function HiFiCard({ children, padding = 14, style = {}, onClick }) {
  return (
    <div onClick={onClick} style={{
      background: 'rgba(255,255,255,0.05)',
      border: `1px solid rgba(201,162,74,0.25)`,
      borderRadius: 14, padding,
      cursor: onClick ? 'pointer' : 'default',
      ...style,
    }}>{children}</div>
  );
}
window.HiFiCard = HiFiCard;

function HiFiButton({ children, primary, full, onClick, style = {} }) {
  return (
    <button onClick={onClick} style={{
      width: full ? '100%' : 'auto',
      padding: '12px 18px', borderRadius: 999, cursor: 'pointer',
      background: primary ? T.gold : 'rgba(255,255,255,0.06)',
      border: primary ? `1px solid ${T.gold}` : `1px solid rgba(255,255,255,0.15)`,
      color: primary ? T.navy : '#fff',
      fontFamily: T.sans, fontSize: 13, fontWeight: 600,
      ...style,
    }}>{children}</button>
  );
}
window.HiFiButton = HiFiButton;

function HiFiPill({ children, gold, onClick }) {
  return (
    <button onClick={onClick} style={{
      background: 'rgba(255,255,255,0.08)',
      border: `1px solid rgba(201,162,74,${gold ? 0.5 : 0.25})`,
      borderRadius: 999, padding: '6px 12px', cursor: 'pointer',
      display: 'inline-flex', alignItems: 'center', gap: 6,
      fontFamily: T.sans, fontSize: 10, color: '#fff', fontWeight: 500,
    }}>{children}</button>
  );
}
window.HiFiPill = HiFiPill;

function HiFiTabs({ active = 'home', go }) {
  const tabs = [
    { id: 'home', l: 'Início' },
    { id: 'chat', l: 'Orar' },
    { id: 'creator', l: 'Criar' },
    { id: 'promise', l: 'Promessas' },
    { id: 'talents', l: 'Eu' },
  ];
  return (
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0,
      paddingBottom: 24, paddingTop: 10,
      background: 'rgba(6,11,31,0.85)', backdropFilter: 'blur(12px)',
      borderTop: `1px solid rgba(201,162,74,0.2)`,
      display: 'flex', justifyContent: 'space-around', zIndex: 10,
    }}>
      {tabs.map(t => (
        <button key={t.id} onClick={() => go?.(t.id)} style={{
          background: 'transparent', border: 'none', cursor: 'pointer',
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
          fontFamily: T.sans, fontSize: 9,
          color: active === t.id ? T.gold : 'rgba(255,255,255,0.5)',
        }}>
          <div style={{ width: 5, height: 5, borderRadius: '50%', background: active === t.id ? T.gold : 'rgba(255,255,255,0.3)' }} />
          {t.l}
        </button>
      ))}
    </div>
  );
}
window.HiFiTabs = HiFiTabs;

function HiFiTitle({ children, style = {} }) {
  return (
    <div style={{ fontFamily: T.serif, fontSize: 16, color: '#fff', fontWeight: 500, marginBottom: 10, ...style }}>{children}</div>
  );
}
window.HiFiTitle = HiFiTitle;