/* Logo studies v2 — three minimal directions */

function LogoDirArtboard({ id, label, kicker, story, children, bg = 'var(--paper)', text = 'var(--ink)' }) {
  return (
    <div style={{ background: bg, color: text, padding: 48, height: '100%', display: 'flex', flexDirection: 'column' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', borderBottom: `1px solid ${text === 'var(--ink)' ? 'var(--line)' : 'rgba(255,255,255,0.15)'}`, paddingBottom: 16, marginBottom: 24 }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', opacity: 0.7, fontWeight: 500 }}>{id}</div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', opacity: 0.7, fontWeight: 500 }}>Logo system</div>
      </div>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--red)', marginBottom: 8, fontWeight: 500 }}>{kicker}</div>
      <h2 style={{ fontFamily: 'var(--font-sans)', fontSize: 44, margin: 0, lineHeight: 0.95, letterSpacing: '-0.04em', fontWeight: 700 }}>{label}</h2>
      <p style={{ fontSize: 14, lineHeight: 1.55, color: text === 'var(--ink)' ? 'var(--mute)' : 'rgba(255,255,255,0.65)', marginTop: 16, maxWidth: 520 }}>{story}</p>
      <div style={{ flex: 1, marginTop: 24, display: 'flex', flexDirection: 'column', gap: 16 }}>{children}</div>
    </div>
  );
}

function LogoStudyA() {
  return (
    <LogoDirArtboard id="A · Wordmark" label="makers." kicker="Direção 1 — Ponto-final" story="Wordmark em Geist 700 com letterspacing apertado. O ponto vermelho é o gesto. Curto, direto, funciona em qualquer tamanho. Lê-se como afirmação.">
      <div style={{ background: 'var(--paper-2)', padding: 40, display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 220 }}>
        <MakersLogoA size={120} color="var(--ink)"/>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
        <div style={{ background: 'var(--ink)', padding: 28, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <MakersLogoA size={48} color="var(--paper)"/>
        </div>
        <div style={{ background: 'var(--red)', padding: 28, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <MakersLogoA size={48} color="var(--paper)" accent="var(--ink)"/>
        </div>
        <div style={{ background: 'var(--paper)', padding: 28, display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1px solid var(--line)' }}>
          <MakersLogoA size={48} color="var(--ink)"/>
        </div>
      </div>
    </LogoDirArtboard>
  );
}

function LogoStudyB() {
  return (
    <LogoDirArtboard id="B · Terminal" label="[makers]" kicker="Direção 2 — Cyber/mono" bg="var(--ink)" text="var(--paper)" story="Wordmark mono entre brackets. Vibe terminal, infraestrutura, sistema. Quando aplicado, parece um comando, um identificador. Mais nicho, mais técnico — funciona se o produto se posicionar como ferramenta de poder.">
      <div style={{ background: 'var(--ink-2)', padding: 40, display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 220 }}>
        <MakersLogoB size={88} color="var(--acid)" accent="var(--paper)"/>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
        <div style={{ background: 'var(--paper)', padding: 28, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <MakersLogoB size={42} color="var(--ink)" accent="var(--red)"/>
        </div>
        <div style={{ background: 'var(--red)', padding: 28, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <MakersLogoB size={42} color="var(--paper)" accent="var(--ink)"/>
        </div>
        <div style={{ background: 'var(--ink)', padding: 28, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <MakersLogoB size={42} color="var(--paper)" accent="var(--acid)"/>
        </div>
      </div>
    </LogoDirArtboard>
  );
}

function LogoStudyC() {
  return (
    <LogoDirArtboard id="C · Família · RECOMENDADO" label="Quadrado vermelho + slash." kicker="Direção 3 — Família modular" story="Monograma M num quadrado vermelho. Wordmark Geist apertada. Sub-produtos entram com slash: makers/explorador, makers/bots. Sólido, escalável, sem 'M' confuso. Funciona em favicon de 16px.">
      <div style={{ background: 'var(--paper-2)', padding: 40, minHeight: 220, display: 'flex', flexDirection: 'column', gap: 24, justifyContent: 'center' }}>
        <MakersLogoC color="var(--ink)" accent="var(--red)" size={56}/>
        <div style={{ height: 1, background: 'var(--line)' }}/>
        <MakersLogoC color="var(--ink)" accent="var(--red)" product="explorador" size={44}/>
        <MakersLogoC color="var(--ink)" accent="var(--ink)" product="bots" size={44}/>
        <MakersLogoC color="var(--ink)" accent="var(--mute)" product="estúdio" size={44}/>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
        <div style={{ background: 'var(--ink)', padding: 20, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <MakersMark size={40} color="var(--paper)" bg="var(--red)"/>
        </div>
        <div style={{ background: 'var(--red)', padding: 20, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <MakersMark size={40} color="var(--paper)" bg="var(--ink)"/>
        </div>
        <div style={{ background: 'var(--acid)', padding: 20, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <MakersMark size={40} color="var(--paper)" bg="var(--ink)"/>
        </div>
        <div style={{ background: 'var(--paper)', padding: 20, display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1px solid var(--line)' }}>
          <MakersMark size={40} color="var(--paper)" bg="var(--red)"/>
        </div>
      </div>
    </LogoDirArtboard>
  );
}

function LogoConstructionArtboard() {
  return (
    <Card bg="var(--paper)">
      <Eyebrow>03 · Sistema de marcas — recomendado</Eyebrow>
      <h2 style={{ fontFamily: 'var(--font-sans)', fontSize: 56, lineHeight: 0.95, letterSpacing: '-0.045em', margin: '8px 0 16px', color: 'var(--ink)', fontWeight: 700 }}>
        Uma família.<br/>Múltiplos produtos.
      </h2>
      <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--mute)', maxWidth: 620, margin: 0 }}>
        Marca-mãe: <strong style={{ color: 'var(--ink)' }}>makers.</strong> Produtos herdam o quadrado vermelho e ganham um slash com o nome em peso 500: <strong style={{ color: 'var(--ink)' }}>makers/explorador</strong>, <strong style={{ color: 'var(--ink)' }}>makers/bots</strong>, <strong style={{ color: 'var(--ink)' }}>makers/estúdio</strong>. Inspiração: Linear, Vercel, Stripe.
      </p>

      <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
        <div style={{ background: 'var(--paper-2)', padding: 32 }}>
          <Eyebrow>Construção</Eyebrow>
          <svg viewBox="0 0 280 280" width="100%" style={{ maxWidth: 280, display: 'block', margin: '16px auto' }}>
            <defs>
              <pattern id="grid2" width="20" height="20" patternUnits="userSpaceOnUse">
                <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#D9D9D9" strokeWidth="0.5"/>
              </pattern>
            </defs>
            <rect width="280" height="280" fill="url(#grid2)"/>
            <rect x="60" y="60" width="160" height="160" fill="#FF3B30"/>
            <text x="140" y="190" fontFamily="Geist, Helvetica, sans-serif" fontSize="140" fill="white" textAnchor="middle" fontWeight="800" letterSpacing="-8">M</text>
            <line x1="60" y1="240" x2="220" y2="240" stroke="#0A0A0A" strokeWidth="0.5" strokeDasharray="2"/>
            <text x="140" y="252" fontSize="9" fill="#0A0A0A" textAnchor="middle" fontFamily="ui-monospace">8x</text>
            <line x1="40" y1="60" x2="40" y2="220" stroke="#0A0A0A" strokeWidth="0.5" strokeDasharray="2"/>
            <text x="32" y="143" fontSize="9" fill="#0A0A0A" textAnchor="middle" fontFamily="ui-monospace" transform="rotate(-90 32 143)">8x</text>
          </svg>
          <div style={{ fontSize: 12, color: 'var(--mute)', textAlign: 'center', marginTop: 8 }}>Quadrado 8×8 · M centrado · margem = 1 unidade</div>
        </div>
        <div style={{ background: 'var(--paper-2)', padding: 32 }}>
          <Eyebrow>Produtos</Eyebrow>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24, marginTop: 16 }}>
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--mute)', marginBottom: 8, fontWeight: 500 }}>Marca-mãe</div>
              <MakersLogoC color="var(--ink)" accent="var(--red)" size={40}/>
            </div>
            <div style={{ height: 1, background: 'var(--line)' }}/>
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--mute)', marginBottom: 8, fontWeight: 500 }}>Produto principal</div>
              <MakersLogoC color="var(--ink)" accent="var(--red)" product="explorador" size={32}/>
            </div>
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--mute)', marginBottom: 8, fontWeight: 500 }}>Produto secundário</div>
              <MakersLogoC color="var(--ink)" accent="var(--ink)" product="bots" size={32}/>
            </div>
          </div>
        </div>
      </div>

      <div style={{ marginTop: 16, padding: 24, border: '1px solid var(--ink)', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, alignItems: 'center' }}>
        <div>
          <Eyebrow>Tamanho mínimo</Eyebrow>
          <div style={{ fontSize: 13 }}>16px na web · 8mm impressão</div>
        </div>
        <div>
          <Eyebrow>Espaço</Eyebrow>
          <div style={{ fontSize: 13 }}>= 1× altura do quadrado</div>
        </div>
        <div>
          <Eyebrow>Não fazer</Eyebrow>
          <div style={{ fontSize: 13 }}>Esticar, rodar, gradiente, sombrear.</div>
        </div>
        <div>
          <Eyebrow>Favicon</Eyebrow>
          <div style={{ display: 'flex', gap: 8 }}>
            <MakersMark size={32} color="var(--paper)" bg="var(--red)"/>
            <MakersMark size={32} color="var(--paper)" bg="var(--ink)"/>
          </div>
        </div>
      </div>
    </Card>
  );
}

Object.assign(window, { LogoStudyA, LogoStudyB, LogoStudyC, LogoConstructionArtboard });