// Componentes compartilhados — Landing v2 · Estúdio 9J
// Logo, ON AIR, Wave, Kicker, Display, CTA, Container, Section
// + SVG renderings (câmera, mesa de som, mesa de iluminação, workstation, microfone, control room)
// + Modal de contato rápido

// ─────────────────────────────────────────────────────────────
// Tipografia
// ─────────────────────────────────────────────────────────────
const Kicker = ({ children, color, style }) =>
<div style={{
  fontFamily: T.mono, fontSize: 11, letterSpacing: '0.3em',
  textTransform: 'uppercase', color: color || T.fog, ...style
}}>{children}</div>;


const Display = ({ children, size = 80, color = T.cream, weight = 300, style }) =>
<div style={{
  fontFamily: T.sans, fontWeight: weight,
  fontSize: size, lineHeight: 0.98, letterSpacing: '-0.035em',
  color, ...style
}}>{children}</div>;


// ─────────────────────────────────────────────────────────────
// Logo — wordmark com ponto magenta no canto superior do "J"
// ─────────────────────────────────────────────────────────────
function Logo({ color = T.cream, accent = T.magenta, size = 22, short = false, live = false }) {
  const dot = size * 0.20;
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'baseline',
      gap: size * 0.32, color,
      fontFamily: T.mono, fontSize: size,
      letterSpacing: '0.04em', lineHeight: 1
    }}>
      {!short &&
      <span style={{ fontWeight: 400, letterSpacing: '0.22em', fontSize: size * 0.6, opacity: 0.78 }}>
          ESTUDIO
        </span>
      }
      <span style={{ position: 'relative', display: 'inline-block', fontWeight: 700, letterSpacing: '-0.02em' }}>
        9J
        <span style={{
          position: 'absolute', top: -dot * 0.08, right: -dot * 1.05,
          width: dot, height: dot, borderRadius: '50%', background: accent,
          boxShadow: live ? `0 0 ${size * 0.25}px ${accent}66` : 'none',
          animation: live ? 'pulse9j 2.6s ease-in-out infinite' : 'none'
        }} />
      </span>
    </div>);

}

// ON AIR
function OnAir({ scale = 1, label = 'ON AIR', accent = T.magenta }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 10 * scale,
      padding: `${7 * scale}px ${14 * scale}px`,
      border: `1px solid ${accent}`, color: accent,
      borderRadius: 999,
      fontFamily: T.mono, fontSize: 12 * scale, letterSpacing: '0.32em', fontWeight: 600
    }}>
      <span style={{
        width: 7 * scale, height: 7 * scale, borderRadius: '50%', background: accent,
        animation: 'pulse9j 1.6s ease-in-out infinite'
      }} />
      {label}
    </div>);

}

// Waveform
function Wave({ bars = 56, height = 60, width = 480, color = T.cream, seed = 1, weight = 1, animate = false }) {
  const arr = Array.from({ length: bars }, (_, i) => {
    const v = Math.abs(Math.sin((i + seed) * 1.7) * 0.55 + Math.cos((i + seed) * 0.93) * 0.45);
    return 0.14 + v * 0.86;
  });
  return (
    <svg viewBox={`0 0 ${width} ${height}`} style={{ width: '100%', height, display: 'block' }} preserveAspectRatio="none">
      {arr.map((h, i) => {
        const gap = width / bars;
        const x = i * gap + gap / 2;
        const bh = h * height * 0.94;
        return (
          <line key={i}
          x1={x} y1={(height - bh) / 2}
          x2={x} y2={(height + bh) / 2}
          stroke={color} strokeWidth={weight} strokeLinecap="round"
          style={animate ? {
            animation: `waveBar 1.8s ease-in-out infinite`,
            animationDelay: `${i % 12 * 0.08}s`,
            transformOrigin: 'center'
          } : null} />);


      })}
    </svg>);

}

// ─────────────────────────────────────────────────────────────
// CTA primary — botão
// ─────────────────────────────────────────────────────────────
function CTA({ children, href = '#', accent = T.magenta, fg = T.ink, kind = 'primary', sub, style, onClick }) {
  const isPrimary = kind === 'primary';
  return (
    <a href={href} onClick={onClick}
    target={href.startsWith('http') ? '_blank' : undefined}
    rel="noopener"
    style={{
      display: 'inline-flex', alignItems: 'center', gap: 14,
      padding: '18px 28px',
      background: isPrimary ? accent : 'transparent',
      color: isPrimary ? fg : T.cream,
      border: isPrimary ? 'none' : `1px solid ${T.hairline}`,
      fontFamily: T.mono, fontSize: 13, fontWeight: 600, letterSpacing: '0.18em',
      textTransform: 'uppercase', textDecoration: 'none',
      borderRadius: 4, transition: 'transform .15s ease, background .15s ease, border-color .15s ease',
      cursor: 'pointer', whiteSpace: 'nowrap',
      ...style
    }}
    onMouseEnter={(e) => {e.currentTarget.style.transform = 'translateY(-1px)';if (!isPrimary) e.currentTarget.style.borderColor = T.cream;}}
    onMouseLeave={(e) => {e.currentTarget.style.transform = 'translateY(0)';if (!isPrimary) e.currentTarget.style.borderColor = T.hairline;}}>
      
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
        {isPrimary &&
        <span style={{
          width: 8, height: 8, borderRadius: '50%', background: fg,
          animation: 'pulse9j 1.6s ease-in-out infinite', opacity: 0.85
        }} />
        }
        {children}
      </span>
      {sub &&
      <span style={{ fontWeight: 400, letterSpacing: '0.18em', opacity: 0.65, fontSize: 11 }}>
          {sub}
        </span>
      }
    </a>);

}

// ─────────────────────────────────────────────────────────────
// Containers
// ─────────────────────────────────────────────────────────────
function Container({ children, style, narrow }) {
  return (
    <div style={{
      maxWidth: narrow ? 960 : T.maxW,
      margin: '0 auto',
      padding: `0 ${T.gutter}px`,
      ...style
    }}>
      {children}
    </div>);

}

function Section({ children, id, bg = T.night, fg = T.cream, py = 120, style }) {
  return (
    <section id={id} style={{
      background: bg, color: fg,
      padding: `${py}px 0`,
      position: 'relative',
      ...style
    }}>
      {children}
    </section>);

}

// Header da seção: Kicker à esquerda + ref técnica à direita + Display + caption
function SectionHead({ kicker, eyebrow, title1, title1Hi, title1Punct, caption, accent, displaySize = 56, captionRight = true }) {
  return (
    <>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        marginBottom: 48, flexWrap: 'wrap', gap: 24
      }}>
        <Kicker>{kicker}</Kicker>
        {eyebrow && <Kicker>{eyebrow}</Kicker>}
      </div>
      <div style={{
        display: 'grid',
        gridTemplateColumns: caption ? '1.45fr 1fr' : '1fr',
        gap: 56, alignItems: 'end', marginBottom: 64
      }}>
        <Display size={displaySize}>
          {title1}<span style={{ color: accent, fontWeight: 500 }}>{title1Hi}</span>{title1Punct}
        </Display>
        {caption &&
        <p style={{
          fontSize: 18, lineHeight: 1.55, color: T.bone,
          margin: 0, textWrap: 'pretty', paddingBottom: 14, fontFamily: "Geist"
        }}>{caption}</p>
        }
      </div>
    </>);

}

// ─────────────────────────────────────────────────────────────
// SVG ILLUSTRATIONS — broadcast set
// All in stroke-only line-art matching brand
// ─────────────────────────────────────────────────────────────

// Camera on tripod
function IllusCamera({ size = 280, color = T.cream, accent = T.magenta }) {
  return (
    <svg viewBox="0 0 280 280" width={size} height={size} style={{ display: 'block' }} fill="none" stroke={color} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      {/* tripod */}
      <path d="M70 250 L140 145 L210 250 M140 145 L140 250 M100 220 L180 220" />
      {/* head plate */}
      <rect x="118" y="125" width="44" height="20" />
      {/* body */}
      <rect x="78" y="68" width="124" height="60" rx="2" />
      {/* viewfinder */}
      <rect x="180" y="76" width="38" height="22" />
      <path d="M218 87 L232 80 L232 94 Z" />
      {/* lens */}
      <circle cx="58" cy="98" r="22" />
      <circle cx="58" cy="98" r="14" />
      <circle cx="58" cy="98" r="2" fill={color} />
      <path d="M36 98 L20 98" strokeWidth="2" />
      {/* top accessories */}
      <rect x="92" y="56" width="40" height="12" />
      <circle cx="158" cy="62" r="4" fill={accent} stroke="none" />
      <text x="100" y="100" fill={color} fontSize="10" fontFamily="JetBrains Mono" letterSpacing="0.15em" stroke="none">CAM·01</text>
      {/* REC indicator */}
      <circle cx="186" cy="118" r="3" fill={accent} stroke="none" />
    </svg>);

}

// Audio mixer console
function IllusMixer({ size = 280, color = T.cream, accent = T.magenta }) {
  return (
    <svg viewBox="0 0 280 280" width={size} height={size * 0.72} style={{ display: 'block' }} fill="none" stroke={color} strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
      {/* console body */}
      <path d="M16 180 L264 180 L256 70 L24 70 Z" />
      <path d="M16 180 L24 200 L256 200 L264 180" />
      {/* divider */}
      <path d="M28 130 L252 130" opacity="0.5" />
      {/* faders 8 channels */}
      {[0, 1, 2, 3, 4, 5, 6, 7].map((i) => {
        const x = 38 + i * 28;
        const fy = 140 + i * 37 % 26;
        return (
          <g key={i}>
            <path d={`M${x} 138 L${x} 174`} opacity="0.6" />
            <rect x={x - 4} y={fy} width="8" height="6" fill={i === 3 ? accent : color} stroke="none" />
            {/* knobs above */}
            <circle cx={x} cy="100" r="6" />
            <path d={`M${x} 96 L${x} 100`} />
            <circle cx={x} cy="80" r="3" opacity="0.7" />
          </g>);

      })}
      {/* level meter */}
      <rect x="220" y="92" width="32" height="32" />
      {[0, 1, 2, 3, 4, 5, 6].map((i) =>
      <line key={i} x1="226" y1={120 - i * 4} x2="246" y2={120 - i * 4}
      stroke={i > 4 ? accent : color} strokeWidth="2" opacity={0.4 + i * 0.1} />
      )}
      <text x="40" y="62" fill={color} fontSize="9" fontFamily="JetBrains Mono" letterSpacing="0.3em" stroke="none">MIXER · 8CH</text>
    </svg>);

}

// DMX lighting console
function IllusLights({ size = 280, color = T.cream, accent = T.magenta }) {
  return (
    <svg viewBox="0 0 280 280" width={size} height={size * 0.85} style={{ display: 'block' }} fill="none" stroke={color} strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
      {/* truss top */}
      <path d="M30 30 L250 30" strokeWidth="2" />
      <path d="M30 30 L30 50 M250 30 L250 50 M70 30 L70 38 M120 30 L120 38 M170 30 L170 38 M220 30 L220 38" />
      {/* fixtures */}
      {[
      { x: 70, color: accent },
      { x: 120, color: '#8C5BFF' },
      { x: 170, color: '#36E8E1' },
      { x: 220, color: '#FF8C42' }].
      map((f, i) =>
      <g key={i}>
          <rect x={f.x - 12} y="38" width="24" height="20" rx="2" />
          {/* cone */}
          <path d={`M${f.x - 10} 58 L${f.x - 50 + i * 4} 220 L${f.x + 50 - i * 4} 220 L${f.x + 10} 58 Z`} fill={f.color} fillOpacity="0.13" stroke={f.color} strokeOpacity="0.55" strokeWidth="1" />
          <circle cx={f.x} cy="58" r="3" fill={f.color} stroke="none" />
        </g>
      )}
      {/* DMX console at bottom */}
      <rect x="30" y="232" width="220" height="36" />
      {[0, 1, 2, 3, 4, 5, 6, 7].map((i) =>
      <g key={i}>
          <rect x={42 + i * 26} y="240" width="6" height="20" />
          <rect x={42 + i * 26} y={244 + i * 3 % 12} width="6" height="4" fill={i % 3 === 0 ? accent : color} stroke="none" />
        </g>
      )}
      <text x="200" y="262" fill={color} fontSize="8" fontFamily="JetBrains Mono" letterSpacing="0.2em" stroke="none">DMX·512</text>
    </svg>);

}

// Workstation (dual monitors)
function IllusWorkstation({ size = 280, color = T.cream, accent = T.magenta }) {
  return (
    <svg viewBox="0 0 280 200" width={size} height={size * 0.71} style={{ display: 'block' }} fill="none" stroke={color} strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
      {/* left monitor — timeline */}
      <rect x="14" y="18" width="118" height="80" />
      <path d="M73 98 L73 116 M55 116 L91 116" />
      {/* tracks */}
      <path d="M20 38 L126 38 M20 50 L126 50 M20 62 L126 62 M20 74 L126 74 M20 86 L126 86" opacity="0.4" />
      <rect x="28" y="46" width="42" height="6" fill={accent} stroke="none" />
      <rect x="76" y="46" width="22" height="6" fill={accent} stroke="none" opacity="0.6" />
      <rect x="22" y="58" width="62" height="6" fill={color} stroke="none" opacity="0.5" />
      <rect x="32" y="70" width="32" height="6" fill={color} stroke="none" opacity="0.5" />
      <rect x="72" y="82" width="38" height="6" fill={color} stroke="none" opacity="0.5" />
      {/* playhead */}
      <line x1="60" y1="32" x2="60" y2="92" stroke={accent} strokeWidth="1.4" />
      {/* right monitor — preview with waveform */}
      <rect x="148" y="18" width="118" height="80" />
      <path d="M207 98 L207 116 M189 116 L225 116" />
      {/* preview face */}
      <circle cx="207" cy="52" r="18" opacity="0.5" />
      <rect x="172" y="78" width="70" height="6" opacity="0.5" />
      {/* mini wave at bottom */}
      {Array.from({ length: 18 }).map((_, i) => {
        const h = 4 + Math.abs(Math.sin(i * 1.3)) * 8;
        return <line key={i} x1={170 + i * 6} y1={94 - h / 2} x2={170 + i * 6} y2={94 + h / 2} stroke={color} strokeWidth="1" opacity="0.6" />;
      })}
      {/* keyboard / desk */}
      <rect x="40" y="138" width="200" height="6" />
      <rect x="60" y="148" width="160" height="14" />
      <text x="18" y="184" fill={color} fontSize="9" fontFamily="JetBrains Mono" letterSpacing="0.22em" stroke="none">WORKSTATION · EDIT · AI POST</text>
    </svg>);

}

// Microphone (suspended)
function IllusMic({ size = 200, color = T.cream, accent = T.magenta }) {
  return (
    <svg viewBox="0 0 200 280" width={size * 0.71} height={size} style={{ display: 'block' }} fill="none" stroke={color} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      {/* arm */}
      <path d="M18 30 L70 30 L70 90 L100 110" />
      <circle cx="18" cy="30" r="5" />
      <circle cx="70" cy="30" r="3" fill={color} stroke="none" />
      <circle cx="70" cy="90" r="3" fill={color} stroke="none" />
      {/* shock mount */}
      <ellipse cx="106" cy="146" rx="34" ry="42" opacity="0.55" />
      {/* mic body */}
      <rect x="92" y="118" width="28" height="64" rx="14" />
      {/* grille */}
      <path d="M92 124 L120 124 M92 132 L120 132 M92 140 L120 140 M92 148 L120 148 M92 156 L120 156 M92 164 L120 164 M92 172 L120 172" opacity="0.5" />
      {/* foam pop filter circle */}
      <circle cx="148" cy="148" r="28" opacity="0.4" />
      <circle cx="148" cy="148" r="22" opacity="0.3" />
      {/* xlr cable */}
      <path d="M106 184 C 106 220 70 230 50 250" />
      {/* on indicator */}
      <circle cx="106" cy="195" r="3" fill={accent} stroke="none" />
    </svg>);

}

// Control room — schematic top-down view
function IllusControlRoom({ width = 600, height = 320, color = T.cream, accent = T.magenta }) {
  return (
    <svg viewBox="0 0 600 320" width={width} height={height} style={{ display: 'block', width: '100%', height: 'auto' }} fill="none" stroke={color} strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
      {/* room outline */}
      <path d="M30 30 L570 30 L570 290 L30 290 Z" />
      {/* curved bench */}
      <path d="M120 200 C 240 150, 360 150, 480 200" strokeWidth="1.6" />
      {/* mics */}
      {[0, 1, 2, 3].map((i) => {
        const x = 156 + i * 96;
        const y = 200 - Math.sin(i / 3 * Math.PI) * 22;
        return (
          <g key={i}>
            <circle cx={x} cy={y - 18} r="6" />
            <line x1={x} y1={y - 12} x2={x} y2={y - 4} />
            <text x={x - 11} y={y + 22} fill={color} fontSize="8" fontFamily="JetBrains Mono" letterSpacing="0.18em" stroke="none">M·{i + 1}</text>
          </g>);

      })}
      {/* 3 cameras */}
      {[
      { x: 110, y: 100, label: 'CAM·01' },
      { x: 300, y: 80, label: 'CAM·02' },
      { x: 490, y: 100, label: 'CAM·03' }].
      map((c, i) =>
      <g key={i}>
          <rect x={c.x - 18} y={c.y - 10} width="36" height="22" />
          <circle cx={c.x} cy={c.y + 1} r="5" />
          <path d={`M${c.x - 18} ${c.y + 12} L${c.x - 40} ${c.y + 80} L${c.x + 40} ${c.y + 80} L${c.x + 18} ${c.y + 12} Z`} fill={accent} fillOpacity={i === 1 ? 0.18 : 0.08} stroke={i === 1 ? accent : color} strokeOpacity={i === 1 ? 0.8 : 0.3} />
          <text x={c.x - 14} y={c.y - 16} fill={color} fontSize="8" fontFamily="JetBrains Mono" letterSpacing="0.2em" stroke="none">{c.label}</text>
          {i === 1 && <circle cx={c.x + 14} cy={c.y - 4} r="2.5" fill={accent} stroke="none" />}
        </g>
      )}
      {/* 55" reference screen */}
      <rect x="220" y="244" width="160" height="32" />
      <text x="270" y="265" fill={color} fontSize="10" fontFamily="JetBrains Mono" letterSpacing="0.18em" stroke="none">REF · 55"</text>
      {/* lighting truss above */}
      <path d="M60 50 L540 50" strokeDasharray="4 4" opacity="0.5" />
      {[0, 1, 2, 3, 4].map((i) =>
      <g key={i}>
          <circle cx={90 + i * 105} cy="50" r="4" />
          <line x1={90 + i * 105} y1="54" x2={90 + i * 105} y2="58" />
        </g>
      )}
      {/* labels */}
      <text x="40" y="46" fill={color} fontSize="8" fontFamily="JetBrains Mono" letterSpacing="0.22em" stroke="none">DMX TRUSS</text>
      <text x="40" y="284" fill={color} fontSize="8" fontFamily="JetBrains Mono" letterSpacing="0.22em" stroke="none">CONTROL ROOM · TOP VIEW</text>
    </svg>);

}

// 55" reference screen — used in personalization
function IllusScreen55({ width = 600, height = 360, color = T.cream, accent = T.magenta, screenContent = null, lightColor = '#FF3E8E', bgVariant = 'wood', shelfVariant = 'books' }) {
  // wall background variants
  const wallFill = {
    wood: 'rgba(180, 140, 90, 0.10)',
    concrete: 'rgba(120, 120, 120, 0.10)',
    black: 'rgba(20, 8, 32, 0.85)',
    purple: 'rgba(60, 40, 90, 0.20)'
  }[bgVariant] || 'rgba(180, 140, 90, 0.10)';
  const wallStrokeOpacity = bgVariant === 'black' ? 0.4 : 0.6;
  const isDark = bgVariant === 'black';
  const fg = isDark ? T.night : color;
  return (
    <svg viewBox="0 0 600 360" width={width} height={height} style={{ display: 'block', width: '100%', height: 'auto' }} fill="none" stroke={color} strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
      {/* wall behind */}
      <rect x="0" y="0" width="600" height="360" fill={wallFill} stroke="none" />
      {/* light wash from above */}
      <defs>
        <radialGradient id={`wash-${bgVariant}`} cx="50%" cy="0%" r="65%">
          <stop offset="0%" stopColor={lightColor} stopOpacity="0.42" />
          <stop offset="100%" stopColor={lightColor} stopOpacity="0" />
        </radialGradient>
      </defs>
      <rect x="0" y="0" width="600" height="240" fill={`url(#wash-${bgVariant})`} stroke="none" />
      {/* shelf above (left) */}
      <path d="M40 80 L240 80 M40 142 L240 142 M40 204 L240 204" stroke={fg} strokeOpacity={wallStrokeOpacity} />
      {/* shelf objects */}
      {shelfVariant === 'books' &&
      <g stroke={fg} strokeOpacity="0.7">
          <rect x="48" y="58" width="8" height="22" />
          <rect x="60" y="50" width="10" height="30" />
          <rect x="74" y="62" width="6" height="18" />
          <rect x="84" y="55" width="9" height="25" />
          <rect x="98" y="60" width="7" height="20" />
          <rect x="110" y="50" width="12" height="30" />
          <rect x="48" y="120" width="10" height="22" />
          <rect x="62" y="115" width="7" height="27" />
          <rect x="74" y="122" width="9" height="20" />
        </g>
      }
      {shelfVariant === 'plants' &&
      <g stroke={fg} strokeOpacity="0.7">
          <path d="M58 80 L58 58 M50 64 L58 60 L66 64 M52 70 L58 66 L64 70" />
          <ellipse cx="58" cy="80" rx="10" ry="3" />
          <circle cx="100" cy="74" r="8" />
          <path d="M140 80 L140 58 M132 62 L140 56 L148 62" />
          <ellipse cx="140" cy="80" rx="10" ry="3" />
          <rect x="200" y="62" width="20" height="18" />
        </g>
      }
      {shelfVariant === 'vinyl' &&
      <g stroke={fg} strokeOpacity="0.7">
          <rect x="48" y="48" width="32" height="32" />
          <rect x="84" y="48" width="32" height="32" />
          <rect x="120" y="48" width="32" height="32" />
          <circle cx="64" cy="64" r="10" />
          <circle cx="100" cy="64" r="10" />
          <circle cx="136" cy="64" r="10" />
        </g>
      }
      {shelfVariant === 'catalog' &&
      <g stroke={fg} strokeOpacity="0.7">
          <rect x="50" y="56" width="22" height="24" />
          <rect x="76" y="54" width="22" height="26" />
          <rect x="102" y="58" width="22" height="22" />
          <circle cx="61" cy="68" r="3" fill={accent} stroke="none" />
          <circle cx="87" cy="67" r="3" fill={accent} stroke="none" />
          <circle cx="113" cy="69" r="3" fill={accent} stroke="none" />
          <rect x="160" y="60" width="40" height="20" />
        </g>
      }
      {/* 55" reference screen (right side) */}
      <rect x="280" y="60" width="280" height="160" rx="2" fill={isDark ? 'rgba(0,0,0,0.6)' : 'rgba(20, 8, 32, 0.94)'} />
      {/* screen content */}
      {screenContent === 'logo' &&
      <g>
          <text x="370" y="140" fill={T.night} fontSize="36" fontFamily="JetBrains Mono" fontWeight="700" letterSpacing="0.04em" stroke="none">9J</text>
          <circle cx="408" cy="118" r="5" fill={accent} stroke="none" />
          <text x="320" y="170" fill="rgba(245,239,224,0.55)" fontSize="11" fontFamily="JetBrains Mono" letterSpacing="0.3em" stroke="none">SEU PROGRAMA</text>
        </g>
      }
      {screenContent === 'video' &&
      <g>
          <circle cx="420" cy="140" r="22" fill="none" stroke={T.night} strokeWidth="1.5" />
          <path d="M414 130 L432 140 L414 150 Z" fill={T.night} stroke="none" />
          <text x="320" y="195" fill="rgba(245,239,224,0.55)" fontSize="10" fontFamily="JetBrains Mono" letterSpacing="0.3em" stroke="none">VÍDEO DE CAPA</text>
        </g>
      }
      {screenContent === 'neutral' &&
      <g>
          <rect x="320" y="100" width="200" height="80" fill={accent} fillOpacity="0.12" stroke="none" />
          <text x="320" y="200" fill="rgba(245,239,224,0.55)" fontSize="10" fontFamily="JetBrains Mono" letterSpacing="0.3em" stroke="none">WALLPAPER NEUTRO</text>
        </g>
      }
      {/* TV bezel detail */}
      <circle cx="552" cy="218" r="2" fill={accent} stroke="none" />
      {/* bench / desk */}
      <path d="M40 280 L560 280 L580 320 L20 320 Z" fill={isDark ? 'rgba(255,255,255,0.04)' : 'rgba(20, 8, 32, 0.06)'} stroke={fg} strokeOpacity={wallStrokeOpacity} />
      {/* mics on bench */}
      {[150, 300, 450].map((x, i) =>
      <g key={i} stroke={fg} strokeOpacity="0.8">
          <line x1={x} y1="240" x2={x} y2="270" />
          <ellipse cx={x} cy="240" rx="8" ry="4" />
        </g>
      )}
      {/* floor label */}
      <text x="40" y="346" fill={fg} fontSize="9" fontFamily="JetBrains Mono" letterSpacing="0.22em" stroke="none" opacity="0.6">PREVIEW · STAGE A</text>
    </svg>);

}

// ─────────────────────────────────────────────────────────────
// Modal de contato rápido
// ─────────────────────────────────────────────────────────────
function ContactModal({ open, onClose, copy, accent, waLink }) {
  const [name, setName] = React.useState('');
  const [wa, setWa] = React.useState('');
  const [type, setType] = React.useState(copy.modal.types[0]);
  const m = copy.modal;
  if (!open) return null;

  const handleSubmit = (e) => {
    e.preventDefault();
    const msg = `Oi! Sou ${name || '[sem nome]'}. Projeto: ${type}. WhatsApp: ${wa || '[não informado]'}. Vim do site.`;
    const url = `https://wa.me/5511936213170?text=${encodeURIComponent(msg)}`;
    window.open(url, '_blank');
    onClose();
  };

  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, zIndex: 100,
      background: 'rgba(20, 8, 32, 0.45)',
      backdropFilter: 'blur(6px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 24,
      animation: 'fadeUp 0.18s ease-out'
    }}>
      <form onSubmit={handleSubmit} onClick={(e) => e.stopPropagation()} style={{
        background: T.night,
        border: `1px solid ${T.hairline}`,
        maxWidth: 520, width: '100%',
        padding: '44px 44px 36px',
        position: 'relative',
        borderRadius: 6
      }}>
        <button type="button" onClick={onClose} aria-label={m.close} style={{
          position: 'absolute', top: 18, right: 18,
          background: 'transparent', border: 'none', cursor: 'pointer',
          fontFamily: T.mono, fontSize: 11, letterSpacing: '0.22em',
          color: T.fog, textTransform: 'uppercase', padding: 8
        }}>{m.close} ✕</button>

        <Kicker style={{ marginBottom: 12 }}>· QUICK BRIEF ·</Kicker>
        <Display size={36} style={{ marginBottom: 12 }}>{m.title}</Display>
        <p style={{ fontSize: 15, color: T.bone, margin: '0 0 28px', lineHeight: 1.5 }}>{m.lede}</p>

        <Field label={m.nameLabel}>
          <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder={m.namePh} style={inputStyle} />
        </Field>
        <Field label={m.waLabel}>
          <input type="tel" value={wa} onChange={(e) => setWa(e.target.value)} placeholder={m.waPh} style={inputStyle} />
        </Field>
        <Field label={m.typeLabel}>
          <select value={type} onChange={(e) => setType(e.target.value)} style={{ ...inputStyle, appearance: 'none' }}>
            {m.types.map((t) => <option key={t} value={t}>{t}</option>)}
          </select>
        </Field>

        <button type="submit" style={{
          marginTop: 16,
          width: '100%',
          padding: '18px 28px',
          background: accent, color: T.ink,
          fontFamily: T.mono, fontSize: 13, fontWeight: 600,
          letterSpacing: '0.18em', textTransform: 'uppercase',
          border: 'none', borderRadius: 4, cursor: 'pointer',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 12
        }}>
          <span style={{ width: 8, height: 8, borderRadius: '50%', background: T.ink, animation: 'pulse9j 1.6s ease-in-out infinite' }} />
          {m.submit}
        </button>
      </form>
    </div>);

}

const inputStyle = {
  width: '100%',
  padding: '14px 16px',
  background: T.night2,
  border: `1px solid ${T.hairline}`,
  borderRadius: 4,
  fontFamily: T.sans, fontSize: 15,
  color: T.cream,
  outline: 'none',
  transition: 'border-color .15s ease'
};

function Field({ label, children }) {
  return (
    <div style={{ marginBottom: 14 }}>
      <label style={{
        display: 'block', marginBottom: 6,
        fontFamily: T.mono, fontSize: 10, letterSpacing: '0.22em',
        textTransform: 'uppercase', color: T.fog
      }}>{label}</label>
      {children}
    </div>);

}

// ─────────────────────────────────────────────────────────────
// CTA flutuante WhatsApp (compartilhado entre home e segmentos)
// ─────────────────────────────────────────────────────────────
function FloatingCTA({ waLink, accent }) {
  return (
    <a href={waLink} target="_blank" rel="noopener"
    style={{
      position: 'fixed', bottom: 28, right: 28, zIndex: 40,
      display: 'inline-flex', alignItems: 'center', gap: 12,
      padding: '14px 18px',
      background: accent, color: T.ink,
      fontFamily: T.mono, fontSize: 12, fontWeight: 600,
      letterSpacing: '0.18em', textTransform: 'uppercase',
      textDecoration: 'none', borderRadius: 999,
      boxShadow: `0 8px 32px ${accent}55, 0 0 0 1px ${T.ink}22`,
      transition: 'transform .15s ease, box-shadow .15s ease'
    }}
    onMouseEnter={(e) => {
      e.currentTarget.style.transform = 'translateY(-2px)';
      e.currentTarget.style.boxShadow = `0 12px 40px ${accent}88, 0 0 0 1px ${T.ink}22`;
    }}
    onMouseLeave={(e) => {
      e.currentTarget.style.transform = 'translateY(0)';
      e.currentTarget.style.boxShadow = `0 8px 32px ${accent}55, 0 0 0 1px ${T.ink}22`;
    }}>
      
      <svg width="18" height="18" viewBox="0 0 24 24" fill={T.ink}>
        <path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.2-.7.2-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-1.7-.8-2.8-1.5-3.9-3.4-.3-.5.3-.5.8-1.5.1-.2.05-.3 0-.5-.05-.1-.7-1.7-.95-2.3-.25-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.15.2 2.1 3.2 5.2 4.5 1.9.8 2.7.9 3.6.7.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.3.1-1.4-.1-.1-.3-.2-.6-.3zM12 2C6.5 2 2 6.5 2 12c0 1.9.5 3.7 1.5 5.3L2 22l4.8-1.5c1.5.8 3.3 1.3 5.2 1.3 5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18c-1.7 0-3.3-.5-4.7-1.3l-.3-.2-3 .9.9-2.9-.2-.3C3.8 14.9 3.3 13.5 3.3 12 3.3 7.2 7.2 3.3 12 3.3c4.8 0 8.7 3.9 8.7 8.7s-3.9 8.7-8.7 8.7z" />
      </svg>
      WhatsApp
    </a>);

}

// ─────────────────────────────────────────────────────────────
// Media Slot — placeholders pra vídeo e imagem (genéricos por ora)
// ─────────────────────────────────────────────────────────────
function MediaSlot({
  kind = 'image', // 'image' | 'video'
  src = '', // se preenchido, mostra a foto de verdade sob o chrome
  label = '', // e.g. "B-ROLL · MAIN ROOM"
  caption = '', // legenda discreta abaixo
  aspect = '16/9', // CSS aspect-ratio
  accent = T.magenta,
  duration = '02:18', // só pra video
  timecode = '00:00:24',
  showChrome = true, // mostrar barra de status acima
  fill = true, // se false, ratio definido pelo container
  style
}) {
  const isVideo = kind === 'video';
  const hasPhoto = !!src;
  // Background pattern: very subtle scan lines + crosshair center
  return (
    <div style={{
      background: '#0B0515',
      border: `1px solid ${T.hairline}`,
      position: 'relative',
      overflow: 'hidden',
      aspectRatio: aspect,
      width: '100%',
      ...style
    }}>
      {/* Foto real, se houver */}
      {hasPhoto &&
      <img src={src} alt={label} style={{
        position: 'absolute', inset: 0,
        width: '100%', height: '100%', objectFit: 'cover',
        zIndex: 0
      }} />
      }
      {/* Scan-line pattern background — só quando placeholder */}
      {!hasPhoto &&
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `
          linear-gradient(180deg, rgba(245, 239, 224, 0.04) 0%, rgba(245, 239, 224, 0) 50%, rgba(245, 239, 224, 0.04) 100%),
          repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(245, 239, 224, 0.025) 3px, rgba(245, 239, 224, 0.025) 4px)
        `,
        pointerEvents: 'none'
      }} />
      }
      {/* Vignette (mais leve quando há foto) */}
      <div style={{
        position: 'absolute', inset: 0,
        background: hasPhoto
          ? 'radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.35) 100%)'
          : 'radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, 0.55) 100%)',
        pointerEvents: 'none'
      }} />

      {/* Top chrome */}
      {showChrome &&
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0,
        padding: '14px 18px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontFamily: T.mono, fontSize: 10, color: 'rgba(245, 239, 224, 0.7)',
        letterSpacing: '0.22em', textTransform: 'uppercase',
        background: 'linear-gradient(180deg, rgba(11, 5, 21, 0.85) 0%, rgba(11, 5, 21, 0) 100%)',
        zIndex: 2
      }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            <span style={{
            width: 7, height: 7, borderRadius: '50%',
            background: isVideo ? accent : 'rgba(245, 239, 224, 0.5)',
            animation: isVideo ? 'pulse9j 1.6s ease-in-out infinite' : 'none'
          }} />
            {label || (isVideo ? 'B-ROLL · LIVE' : 'IMAGE · PLACEHOLDER')}
          </span>
          {isVideo && <span>{timecode}</span>}
          {!isVideo && <span>4:3 · 12MP</span>}
        </div>
      }

      {/* Center icon (escondido quando tem foto real) */}
      {!hasPhoto &&
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        zIndex: 1
      }}>
        {isVideo ?
        // Play button
        <div style={{
          width: 88, height: 88, borderRadius: '50%',
          border: `1.5px solid rgba(245, 239, 224, 0.6)`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          background: 'rgba(11, 5, 21, 0.35)',
          backdropFilter: 'blur(4px)',
          transition: 'transform .2s ease, border-color .2s ease, background .2s ease',
          cursor: 'pointer'
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.transform = 'scale(1.08)';
          e.currentTarget.style.borderColor = accent;
          e.currentTarget.style.background = 'rgba(11, 5, 21, 0.55)';
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.transform = 'scale(1)';
          e.currentTarget.style.borderColor = 'rgba(245, 239, 224, 0.6)';
          e.currentTarget.style.background = 'rgba(11, 5, 21, 0.35)';
        }}>
          
            <svg width="28" height="28" viewBox="0 0 24 24" fill="rgba(245, 239, 224, 0.92)" stroke="none">
              <path d="M8 5 L20 12 L8 19 Z" />
            </svg>
          </div> :

        // Crosshair / framing marks
        <svg width="64" height="64" viewBox="0 0 64 64" fill="none" stroke="rgba(245, 239, 224, 0.35)" strokeWidth="1" strokeLinecap="round">
            {/* corners */}
            <path d="M4 18 L4 4 L18 4" />
            <path d="M46 4 L60 4 L60 18" />
            <path d="M60 46 L60 60 L46 60" />
            <path d="M18 60 L4 60 L4 46" />
            {/* crosshair */}
            <path d="M32 22 L32 42" />
            <path d="M22 32 L42 32" />
            <circle cx="32" cy="32" r="4" />
          </svg>
        }
      </div>
      }

      {/* Bottom chrome — scrubber for video */}
      {isVideo && showChrome &&
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        padding: '14px 18px',
        background: 'linear-gradient(0deg, rgba(11, 5, 21, 0.85) 0%, rgba(11, 5, 21, 0) 100%)',
        zIndex: 2
      }}>
          <div style={{ height: 2, background: 'rgba(245, 239, 224, 0.18)', marginBottom: 10, position: 'relative' }}>
            <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: '32%', background: accent }} />
            <div style={{ position: 'absolute', left: '32%', top: -3, width: 8, height: 8, background: accent, borderRadius: '50%', transform: 'translateX(-50%)' }} />
          </div>
          <div style={{
          display: 'flex', justifyContent: 'space-between',
          fontFamily: T.mono, fontSize: 10, color: 'rgba(245, 239, 224, 0.6)',
          letterSpacing: '0.18em'
        }}>
            <span>4K · 25fps · -12dB</span>
            <span>{timecode} · {duration}</span>
          </div>
        </div>
      }

      {/* Caption tag — small marker outside on the right */}
      {caption &&
      <div style={{
        position: 'absolute', bottom: showChrome && isVideo ? 64 : 14, left: 18,
        fontFamily: T.mono, fontSize: 10, color: 'rgba(245, 239, 224, 0.55)',
        letterSpacing: '0.22em', textTransform: 'uppercase',
        pointerEvents: 'none', zIndex: 2
      }}>
          {caption}
        </div>
      }
    </div>);

}

Object.assign(window, {
  Kicker, Display, Logo, OnAir, Wave, CTA, Container, Section, SectionHead,
  IllusCamera, IllusMixer, IllusLights, IllusWorkstation, IllusMic, IllusControlRoom, IllusScreen55,
  ContactModal, Field, FloatingCTA, MediaSlot, PillarIcon, Icon
});

// ─────────────────────────────────────────────────────────────
// PillarIcon — pequenos ícones stroke pra Áudio / Vídeo / Iluminação
// ─────────────────────────────────────────────────────────────
function PillarIcon({ kind, size = 36, color, accent = '#FF3E8E' }) {
  const c = color || T.cream;
  const k = kind === 'LIT' ? 'LUZ' : kind;
  if (k === 'AUD') {
    return (
      <svg width={size} height={size} viewBox="0 0 32 32" fill="none" stroke={c} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
        <rect x="12" y="4" width="8" height="14" rx="4" />
        <path d="M7 14 a9 9 0 0 0 18 0" />
        <path d="M16 23 L16 28" />
        <path d="M11 28 L21 28" />
        <circle cx="22" cy="6" r="1.6" fill={accent} stroke="none" />
      </svg>);

  }
  if (k === 'VID') {
    return (
      <svg width={size} height={size} viewBox="0 0 32 32" fill="none" stroke={c} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
        <rect x="3" y="9" width="18" height="14" rx="1" />
        <path d="M21 13 L29 9 L29 23 L21 19 Z" />
        <circle cx="9" cy="13" r="1.4" fill={accent} stroke="none" />
      </svg>);

  }
  // LUZ
  if (k === 'LUZ') {
    return (
      <svg width={size} height={size} viewBox="0 0 32 32" fill="none" stroke={c} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
        <path d="M16 4 L16 9" />
        <path d="M7 7 L10 10" />
        <path d="M25 7 L22 10" />
        <path d="M4 16 L9 16" />
        <path d="M28 16 L23 16" />
        <circle cx="16" cy="17" r="6" />
        <path d="M13 22 L13 27 L19 27 L19 22" />
        <path d="M14 27 L14 29 L18 29 L18 27" />
        <circle cx="16" cy="17" r="2" fill={accent} stroke="none" />
      </svg>);

  }
  // PRC — workstation
  if (k === 'PRC') {
    return (
      <svg width={size} height={size} viewBox="0 0 32 32" fill="none" stroke={c} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
        <rect x="3" y="6" width="26" height="16" rx="1" />
        <path d="M9 26 L23 26" />
        <path d="M16 22 L16 26" />
        <path d="M7 11 L13 11" />
        <path d="M7 15 L11 15" />
        <circle cx="22" cy="13" r="3" />
        <circle cx="22" cy="13" r="1" fill={accent} stroke="none" />
      </svg>);

  }
  // INF — building / room
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" stroke={c} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 28 L5 11 L16 4 L27 11 L27 28 Z" />
      <path d="M5 28 L27 28" />
      <rect x="10" y="16" width="5" height="6" />
      <rect x="17" y="16" width="5" height="6" />
      <circle cx="20" cy="10" r="1.4" fill={accent} stroke="none" />
    </svg>);

}

// ─────────────────────────────────────────────────────────────
// Icon — biblioteca unificada de ícones stroke (servicos, segmentos, passos)
// ─────────────────────────────────────────────────────────────
function Icon({ kind, size = 32, color, accent = '#FF3E8E', strokeWidth = 1.5 }) {
  const c = color || T.cream;
  const common = {
    width: size, height: size, viewBox: '0 0 32 32',
    fill: 'none', stroke: c, strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round'
  };
  switch (kind) {
    // ─── SERVIÇOS ───
    case 'podcast': // mic on stand
      return (
        <svg {...common}>
          <rect x="12" y="4" width="8" height="13" rx="4" />
          <path d="M8 14 a8 8 0 0 0 16 0" />
          <path d="M16 22 L16 28" />
          <path d="M11 28 L21 28" />
          <circle cx="22" cy="6" r="1.4" fill={accent} stroke="none" />
        </svg>);
    case 'live': // signal tower with bars
      return (
        <svg {...common}>
          <path d="M16 22 L16 28" />
          <path d="M11 28 L21 28" />
          <path d="M12 18 L20 18 L18 22 L14 22 Z" />
          <path d="M9 14 a10 10 0 0 1 14 0" />
          <path d="M11.5 16.5 a6 6 0 0 1 9 0" />
          <circle cx="16" cy="12" r="1.6" fill={accent} stroke="none" />
        </svg>);
    case 'hybrid': // split screen / two participants
      return (
        <svg {...common}>
          <rect x="3" y="9" width="12" height="9" rx="1" />
          <rect x="17" y="14" width="12" height="9" rx="1" />
          <circle cx="9" cy="13.5" r="1.8" />
          <circle cx="23" cy="18.5" r="1.8" fill={accent} stroke="none" />
          <path d="M5 25 L11 25" />
          <path d="M19 27 L25 27" />
        </svg>);
    case 'corporate': // building / institutional
      return (
        <svg {...common}>
          <path d="M6 28 L6 8 L26 8 L26 28 Z" />
          <rect x="10" y="12" width="3" height="3" />
          <rect x="15.5" y="12" width="3" height="3" />
          <rect x="21" y="12" width="3" height="3" />
          <rect x="10" y="18" width="3" height="3" />
          <rect x="15.5" y="18" width="3" height="3" fill={accent} stroke="none" />
          <rect x="21" y="18" width="3" height="3" />
          <rect x="13" y="24" width="6" height="4" />
        </svg>);
    case 'branded': // mic + sparkle (brand)
      return (
        <svg {...common}>
          <rect x="11" y="6" width="6" height="11" rx="3" />
          <path d="M7 14 a7 7 0 0 0 14 0" />
          <path d="M14 22 L14 26" />
          <path d="M10 26 L18 26" />
          <path d="M24 7 L24 13" />
          <path d="M21 10 L27 10" />
          <circle cx="24" cy="20" r="1.8" fill={accent} stroke="none" />
        </svg>);
    case 'reels': // vertical phone with play
      return (
        <svg {...common}>
          <rect x="9" y="3" width="14" height="26" rx="2.5" />
          <path d="M11 7 L21 7" />
          <path d="M14 26 L18 26" />
          <path d="M14 14 L19 16.5 L14 19 Z" fill={accent} stroke="none" />
        </svg>);

    // ─── SEGMENTOS ───
    case 'criadores': // person with play badge
      return (
        <svg {...common}>
          <circle cx="13" cy="11" r="4" />
          <path d="M5 27 a8 8 0 0 1 16 0" />
          <circle cx="24" cy="22" r="5" />
          <path d="M22.5 20 L26 22 L22.5 24 Z" fill={accent} stroke="none" />
        </svg>);
    case 'corporativo': // briefcase
      return (
        <svg {...common}>
          <rect x="4" y="10" width="24" height="16" rx="1.5" />
          <path d="M12 10 L12 7 a2 2 0 0 1 2 -2 L18 5 a2 2 0 0 1 2 2 L20 10" />
          <path d="M4 17 L28 17" />
          <circle cx="16" cy="17" r="1.4" fill={accent} stroke="none" />
        </svg>);
    case 'midia': // newspaper / article
      return (
        <svg {...common}>
          <path d="M5 7 L23 7 L23 27 L5 27 a1 1 0 0 1 -1 -1 L4 10 a1 1 0 0 1 1 -1 L4 9" />
          <path d="M23 11 L27 11 L27 25 a2 2 0 0 1 -2 2 L23 27" />
          <path d="M8 11 L20 11" />
          <path d="M8 15 L20 15" />
          <path d="M8 19 L20 19" />
          <path d="M8 23 L15 23" stroke={accent} />
        </svg>);
    case 'eventos': // calendar with star / event
      return (
        <svg {...common}>
          <rect x="4" y="7" width="24" height="20" rx="1.5" />
          <path d="M4 13 L28 13" />
          <path d="M10 4 L10 9" />
          <path d="M22 4 L22 9" />
          <path d="M16 16 L17.5 19 L21 19.4 L18.5 21.7 L19.2 25 L16 23.4 L12.8 25 L13.5 21.7 L11 19.4 L14.5 19 Z" fill={accent} stroke="none" />
        </svg>);

    // ─── COMO FUNCIONA / PASSOS ───
    case 'pick': // checklist
      return (
        <svg {...common}>
          <rect x="6" y="5" width="20" height="23" rx="1.5" />
          <path d="M11 5 L11 3 L21 3 L21 5" />
          <path d="M10 12 L13 14.5 L18 9.5" stroke={accent} />
          <path d="M10 20 L13 22.5 L18 17.5" />
          <path d="M21 13 L24 13" />
          <path d="M21 21 L24 21" />
        </svg>);
    case 'configure': // sliders
      return (
        <svg {...common}>
          <path d="M5 9 L27 9" />
          <path d="M5 16 L27 16" />
          <path d="M5 23 L27 23" />
          <circle cx="11" cy="9" r="2.5" fill={T.night} />
          <circle cx="21" cy="16" r="2.5" fill={accent} stroke={accent} />
          <circle cx="9" cy="23" r="2.5" fill={T.night} />
        </svg>);
    case 'record': // microphone with rec dot
      return (
        <svg {...common}>
          <rect x="12" y="4" width="8" height="13" rx="4" />
          <path d="M8 14 a8 8 0 0 0 16 0" />
          <path d="M16 22 L16 28" />
          <path d="M11 28 L21 28" />
          <circle cx="6" cy="6" r="2.2" fill={accent} stroke="none" />
        </svg>);
    case 'receive': // download / package
      return (
        <svg {...common}>
          <path d="M4 19 L4 26 a1 1 0 0 0 1 1 L27 27 a1 1 0 0 0 1 -1 L28 19" />
          <path d="M16 4 L16 21" />
          <path d="M10 15 L16 21 L22 15" stroke={accent} />
        </svg>);

    // fallback
    default:
      return (
        <svg {...common}>
          <circle cx="16" cy="16" r="10" />
          <circle cx="16" cy="16" r="3" fill={accent} stroke="none" />
        </svg>);
  }
}