// SBA Logo explorations
const logoFrame = {
  width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center',
  flexDirection: 'column', gap: 24, padding: 48, background: '#F5F2ED', position: 'relative',
  fontFamily: "'Geist', sans-serif",
};
const logoGrid = {
  position: 'absolute', inset: 0,
  backgroundImage: 'linear-gradient(rgba(10,10,10,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(10,10,10,0.04) 1px, transparent 1px)',
  backgroundSize: '24px 24px',
  pointerEvents: 'none',
};
const logoCaption = {
  position: 'absolute', bottom: 16, left: 24, right: 24,
  fontFamily: "'Geist Mono', monospace", fontSize: 10, letterSpacing: '0.08em',
  textTransform: 'uppercase', color: 'rgba(10,10,10,0.45)',
  display: 'flex', justifyContent: 'space-between',
};

// A — Wordmark técnico. Monospace aggressive, com tracker /sba e underscore piscando.
function LogoA() {
  return (
    <div style={logoFrame}>
      <div style={logoGrid} />
      <div style={{ position: 'relative', display: 'flex', alignItems: 'baseline', gap: 0 }}>
        <span style={{ fontFamily: "'Geist Mono', monospace", fontWeight: 500, fontSize: 140, letterSpacing: '-0.06em', color: '#0A0A0A', lineHeight: 1 }}>
          SBA
        </span>
        <span style={{ fontFamily: "'Geist Mono', monospace", fontWeight: 400, fontSize: 140, letterSpacing: '-0.06em', color: 'oklch(75% 0.12 75)', lineHeight: 1 }}>
          _
        </span>
      </div>
      <div style={{ fontFamily: "'Geist Mono', monospace", fontSize: 13, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'rgba(10,10,10,0.6)' }}>
        systems&nbsp;·&nbsp;by&nbsp;·&nbsp;ai
      </div>
      <div style={logoCaption}>
        <span>A — MONO WORDMARK</span><span>SYMBOL + UNDERSCORE</span>
      </div>
    </div>
  );
}

// B — Monograma geométrico. S/B/A sobrepostos formando um bloco.
function LogoB() {
  return (
    <div style={logoFrame}>
      <div style={logoGrid} />
      <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 28 }}>
        <svg width="180" height="180" viewBox="0 0 180 180" fill="none">
          <rect x="1" y="1" width="178" height="178" stroke="#0A0A0A" strokeWidth="2" fill="none" />
          {/* S */}
          <path d="M36 52 Q36 36 52 36 L80 36 Q96 36 96 52 L96 60 Q96 76 80 76 L52 76 Q36 76 36 92 L36 100 Q36 116 52 116 L80 116 Q96 116 96 100" stroke="#0A0A0A" strokeWidth="8" fill="none" strokeLinecap="square" />
          {/* B (vertical bar + bumps) */}
          <rect x="108" y="36" width="10" height="108" fill="#0A0A0A" />
          <path d="M118 36 L138 36 Q154 36 154 52 L154 68 Q154 84 138 84 L118 84" stroke="#0A0A0A" strokeWidth="8" fill="none" />
          <path d="M118 96 L142 96 Q158 96 158 112 L158 128 Q158 144 142 144 L118 144" stroke="#0A0A0A" strokeWidth="8" fill="none" />
          {/* amber accent */}
          <circle cx="160" cy="20" r="6" fill="oklch(75% 0.12 75)" />
        </svg>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <span style={{ fontWeight: 700, fontSize: 64, letterSpacing: '-0.04em', lineHeight: 0.9 }}>SBA</span>
          <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(10,10,10,0.6)' }}>
            systems by ai
          </span>
        </div>
      </div>
      <div style={logoCaption}>
        <span>B — MONOGRAMA</span><span>GRID 8×8</span>
      </div>
    </div>
  );
}

// C — Nó / sistema. Três nós conectados formando um triângulo.
function LogoC() {
  return (
    <div style={logoFrame}>
      <div style={logoGrid} />
      <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 32 }}>
        <svg width="160" height="160" viewBox="0 0 160 160">
          {/* edges */}
          <line x1="30" y1="130" x2="130" y2="130" stroke="#0A0A0A" strokeWidth="1.5" />
          <line x1="30" y1="130" x2="80" y2="30" stroke="#0A0A0A" strokeWidth="1.5" />
          <line x1="80" y1="30" x2="130" y2="130" stroke="#0A0A0A" strokeWidth="1.5" />
          <line x1="80" y1="30" x2="80" y2="130" stroke="oklch(75% 0.12 75)" strokeWidth="1.5" strokeDasharray="3 3" />
          {/* nodes */}
          <circle cx="30" cy="130" r="11" fill="#F5F2ED" stroke="#0A0A0A" strokeWidth="2.5" />
          <circle cx="130" cy="130" r="11" fill="#F5F2ED" stroke="#0A0A0A" strokeWidth="2.5" />
          <circle cx="80" cy="30" r="14" fill="#0A0A0A" />
          <circle cx="80" cy="130" r="5" fill="oklch(75% 0.12 75)" />
          {/* labels */}
          <text x="12" y="152" fontFamily="Geist Mono" fontSize="9" fill="rgba(10,10,10,0.5)">S</text>
          <text x="127" y="152" fontFamily="Geist Mono" fontSize="9" fill="rgba(10,10,10,0.5)">A</text>
          <text x="77" y="18" fontFamily="Geist Mono" fontSize="9" fill="rgba(10,10,10,0.5)">B</text>
        </svg>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          <span style={{ fontWeight: 500, fontSize: 56, letterSpacing: '-0.05em', lineHeight: 0.9 }}>SBA</span>
          <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(10,10,10,0.6)' }}>
            systems · by · ai
          </span>
        </div>
      </div>
      <div style={logoCaption}>
        <span>C — NÓ / SISTEMA</span><span>GRAFO CONECTADO</span>
      </div>
    </div>
  );
}

// D — Selo industrial. Circular com marca + meta.
function LogoD() {
  return (
    <div style={logoFrame}>
      <div style={logoGrid} />
      <div style={{ position: 'relative' }}>
        <svg width="220" height="220" viewBox="0 0 220 220">
          <circle cx="110" cy="110" r="104" stroke="#0A0A0A" strokeWidth="1.5" fill="none" />
          <circle cx="110" cy="110" r="92" stroke="#0A0A0A" strokeWidth="1" fill="none" strokeDasharray="2 4" />
          <text x="110" y="125" textAnchor="middle" fontFamily="Geist" fontWeight="700" fontSize="48" letterSpacing="-3" fill="#0A0A0A">SBA</text>
          <path d="M 110 22 A 88 88 0 0 1 198 110" stroke="oklch(75% 0.12 75)" strokeWidth="2" fill="none" />
          {/* around text */}
          <defs>
            <path id="sba-circ" d="M 110 110 m -78 0 a 78 78 0 1 1 156 0 a 78 78 0 1 1 -156 0" />
          </defs>
          <text fontFamily="Geist Mono" fontSize="9" letterSpacing="3.5" fill="rgba(10,10,10,0.55)">
            <textPath href="#sba-circ" startOffset="0">SYSTEMS · BY · AI · EST · 2025 · SÃO · PAULO · ·</textPath>
          </text>
          <circle cx="110" cy="110" r="3" fill="#0A0A0A" />
        </svg>
      </div>
      <div style={logoCaption}>
        <span>D — SELO INDUSTRIAL</span><span>MARCA OFICIAL / CARIMBO</span>
      </div>
    </div>
  );
}

// Horizontal variation (baseada na LogoA — direção recomendada)
function LogoHorizontal({ dark }) {
  const bg = dark ? '#0A0A0A' : '#F5F2ED';
  const fg = dark ? '#F5F2ED' : '#0A0A0A';
  const muted = dark ? 'rgba(245,242,237,0.5)' : 'rgba(10,10,10,0.5)';
  return (
    <div style={{ ...logoFrame, background: bg, flexDirection: 'row', gap: 28 }}>
      <div style={{ ...logoGrid, opacity: dark ? 0.3 : 1 }} />
      <div style={{ position: 'relative', display: 'flex', alignItems: 'baseline' }}>
        <span style={{ fontFamily: "'Geist Mono', monospace", fontWeight: 500, fontSize: 88, letterSpacing: '-0.06em', color: fg, lineHeight: 1 }}>SBA</span>
        <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 88, letterSpacing: '-0.06em', color: 'oklch(75% 0.12 75)', lineHeight: 1 }}>_</span>
      </div>
      <div style={{ position: 'relative', width: 1, height: 72, background: muted }} />
      <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 4 }}>
        <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: fg }}>systems by ai</span>
        <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: muted }}>automação para pmes</span>
      </div>
      <div style={{ ...logoCaption, color: muted }}>
        <span>HORIZONTAL · {dark ? 'DARK' : 'LIGHT'}</span><span>MIN 120PX</span>
      </div>
    </div>
  );
}

function LogoMono({ dark }) {
  const bg = dark ? '#0A0A0A' : '#F5F2ED';
  const fg = dark ? '#F5F2ED' : '#0A0A0A';
  return (
    <div style={{ ...logoFrame, background: bg }}>
      <div style={{ ...logoGrid, opacity: dark ? 0.3 : 1 }} />
      <div style={{ position: 'relative', display: 'flex', alignItems: 'baseline' }}>
        <span style={{ fontFamily: "'Geist Mono', monospace", fontWeight: 500, fontSize: 180, letterSpacing: '-0.06em', color: fg, lineHeight: 1 }}>S</span>
        <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 180, letterSpacing: '-0.06em', color: 'oklch(75% 0.12 75)', lineHeight: 1 }}>_</span>
      </div>
      <div style={{ ...logoCaption, color: dark ? 'rgba(245,242,237,0.5)' : 'rgba(10,10,10,0.5)' }}>
        <span>MONOGRAMA</span><span>FAVICON / AVATAR</span>
      </div>
    </div>
  );
}

Object.assign(window, { LogoA, LogoB, LogoC, LogoD, LogoHorizontal, LogoMono });