// V3 — theme-aware brand atoms. These consume the ThemeCtx (useTheme) so
// the same components render for both dark and light themes.

// Brand logo — fixed (viola gradient + corallo dot, always brand colors)
function HelloLogo({ size = 32 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-label="HelloAI">
      <defs>
        <linearGradient id="hlg" x1="0" y1="0" x2="40" y2="40">
          <stop offset="0" stopColor="#a78bfa" />
          <stop offset="1" stopColor="#7c3aed" />
        </linearGradient>
      </defs>
      <rect x="0" y="0" width="40" height="40" rx="11" fill="url(#hlg)" />
      <rect x="10" y="14" width="3" height="12" rx="1.5" fill="#fff" />
      <rect x="16" y="10" width="3" height="20" rx="1.5" fill="#fff" />
      <rect x="22" y="16" width="3" height="8"  rx="1.5" fill="#fff" />
      <circle cx="31" cy="11" r="3.2" fill="#f43f5e" />
    </svg>
  );
}

function HelloWordmark({ size = 22 }) {
  const T = useTheme();
  return (
    <span style={{ display: 'inline-flex', alignItems: 'baseline', gap: 8, fontFamily: T.font }}>
      <HelloLogo size={size * 1.35} />
      <span style={{ fontSize: size, letterSpacing: -0.4, color: T.text, fontWeight: 500 }}>
        Hello<span style={{ fontWeight: 800, color: T.corallo }}>AI</span>
      </span>
    </span>
  );
}

function Waveform({ bars = 24, height = 36, active = -1 }) {
  const T = useTheme();
  const pattern = [0.35,0.6,0.9,0.5,0.75,0.4,1,0.65,0.85,0.5,0.3,0.7,0.9,0.55,0.8,0.4,0.65,0.95,0.55,0.7,0.35,0.8,0.6,0.45];
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 3, height }}>
      {Array.from({ length: bars }).map((_, i) => {
        const h = pattern[i % pattern.length] * height;
        const isActive = i === active;
        return (
          <div key={i} style={{
            width: 3, height: h, borderRadius: 2,
            background: isActive ? T.corallo : T.viola,
            opacity: isActive ? 1 : 0.8,
          }} />
        );
      })}
    </div>
  );
}

function ChipPill({ children, active }) {
  const T = useTheme();
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '6px 12px', borderRadius: 999,
      fontSize: 12, fontWeight: 500, letterSpacing: -0.1,
      fontFamily: T.font,
      background: active ? T.corallo : T.violaSoft,
      color: active ? '#fff' : T.text,
      border: `1px solid ${active ? T.corallo : T.violaBorder}`,
      whiteSpace: 'nowrap',
    }}>{children}</span>
  );
}

function CTAPrimary({ children, size = 'md' }) {
  const T = useTheme();
  const s = size === 'lg' ? { padding: '16px 28px', fontSize: 15 } : { padding: '10px 18px', fontSize: 13 };
  return (
    <button style={{
      ...s, fontFamily: T.font, fontWeight: 600,
      border: 'none', borderRadius: 10, cursor: 'pointer',
      background: T.corallo, color: '#fff',
      boxShadow: '0 6px 20px rgba(244,63,94,0.35), inset 0 1px 0 rgba(255,255,255,0.15)',
      letterSpacing: -0.1,
    }}>{children}</button>
  );
}

function CTASecondary({ children, size = 'md' }) {
  const T = useTheme();
  const s = size === 'lg' ? { padding: '16px 24px', fontSize: 15 } : { padding: '10px 16px', fontSize: 13 };
  return (
    <button style={{
      ...s, fontFamily: T.font, fontWeight: 500,
      border: `1px solid ${T.violaBorder}`, borderRadius: 10, cursor: 'pointer',
      background: T.violaSoft, color: T.text,
      letterSpacing: -0.1,
    }}>{children}</button>
  );
}

Object.assign(window, { HelloLogo, HelloWordmark, Waveform, ChipPill, CTAPrimary, CTASecondary });