// InstantDevis — Logo marque (éclair + onde vocale)
// Évoque la vitesse (lightning) + la voix (onde) + le devis (chronomètre)

function IdLogo({ size = 32, t, variant = 'square' }) {
  // variant: 'square' (badge), 'mark' (trait)
  const bg = t.primary;
  const bolt = t.safety;
  const stroke = '#fff';

  return (
    <div style={{
      width: size, height: size, borderRadius: Math.max(4, size * 0.15),
      background: bg, display: 'flex', alignItems: 'center', justifyContent: 'center',
      position: 'relative', overflow: 'hidden',
      boxShadow: `0 1px 2px rgba(0,0,0,0.2)`,
    }}>
      {/* Hazard stripe subtile */}
      <div style={{
        position: 'absolute', top: 0, right: 0, width: size * 0.18, height: '100%',
        background: `repeating-linear-gradient(-45deg, ${bolt} 0, ${bolt} 2px, transparent 2px, transparent 5px)`,
        opacity: 0.4,
      }}/>
      <svg width={size * 0.62} height={size * 0.62} viewBox="0 0 24 24" fill="none" style={{ position: 'relative' }}>
        {/* Onde vocale gauche */}
        <path d="M3 10 L3 14" stroke={stroke} strokeWidth="1.8" strokeLinecap="round" opacity="0.55"/>
        <path d="M6 8 L6 16" stroke={stroke} strokeWidth="1.8" strokeLinecap="round" opacity="0.75"/>
        {/* Éclair principal */}
        <path d="M14 2 L8 13 L12 13 L10 22 L17 10 L13 10 L14 2 Z"
          fill={bolt} stroke={bolt} strokeWidth="0.8" strokeLinejoin="round"/>
        {/* Onde vocale droite */}
        <path d="M20 9 L20 15" stroke={stroke} strokeWidth="1.8" strokeLinecap="round" opacity="0.55"/>
      </svg>
    </div>
  );
}

function IdLogoWordmark({ t, size = 'md', showTag, tag = 'Prototype · v0.1' }) {
  const sizes = {
    sm: { logo: 26, title: 16, tag: 9 },
    md: { logo: 34, title: 20, tag: 10 },
    lg: { logo: 42, title: 26, tag: 11 },
  };
  const s = sizes[size];
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <IdLogo size={s.logo} t={t}/>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{
          fontSize: s.title, fontWeight: 800, color: t.text,
          letterSpacing: -0.6, lineHeight: 1,
        }}>
          <span style={{ color: t.text }}>Instant</span>
          <span style={{ color: t.primary }}>Devis</span>
        </div>
        {showTag && (
          <span style={{
            padding: '3px 7px', borderRadius: 3, fontSize: s.tag, fontWeight: 800,
            background: t.safety + '22', color: t.safety, letterSpacing: 1,
            textTransform: 'uppercase', border: `1px solid ${t.safety}55`,
          }}>
            {tag}
          </span>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { IdLogo, IdLogoWordmark });