/* Social, merch & app icons v2 — Suisse minimal */

function SocialArtboard() {
  return (
    <div style={{ background: 'var(--paper-2)', padding: 56, height: '100%' }}>
      <Eyebrow>06 · Redes sociais</Eyebrow>
      <h3 style={{ fontFamily: 'var(--font-sans)', fontSize: 36, lineHeight: 1, letterSpacing: '-0.035em', margin: '0 0 32px', fontWeight: 700 }}>LinkedIn + Instagram, com sistema.</h3>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {/* Post 1 — quote */}
        <div style={{ background: 'var(--ink)', color: 'var(--paper)', padding: 32, aspectRatio: '1', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--acid)', letterSpacing: '0.14em', fontWeight: 500 }}>// CITAÇÃO #18</div>
          <div style={{ fontFamily: 'var(--font-sans)', fontSize: 38, lineHeight: 1, letterSpacing: '-0.04em', fontWeight: 700 }}>
            "O CRM<br/>não vende.<br/>Tu <span style={{ color: 'var(--red)' }}>vendes.</span>"
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
            <MakersMark size={32} color="var(--paper)" bg="var(--red)"/>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.14em', fontWeight: 500 }}>MAKERS<span style={{ color: 'var(--red)' }}>.</span></div>
          </div>
        </div>

        {/* Post 2 — stat */}
        <div style={{ background: 'var(--paper)', padding: 32, aspectRatio: '1', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', border: '1px solid var(--ink)' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--red)', letterSpacing: '0.14em', fontWeight: 500 }}>// DADO #07</div>
          <div>
            <div style={{ fontFamily: 'var(--font-sans)', fontSize: 120, lineHeight: 0.85, letterSpacing: '-0.06em', fontWeight: 800 }}>89,9<span style={{ color: 'var(--red)' }}>%</span></div>
            <div style={{ fontSize: 14, color: 'var(--ink)', marginTop: 12, lineHeight: 1.4, fontWeight: 500 }}>dos portugueses usa<br/>WhatsApp todos os dias.</div>
          </div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--mute)', letterSpacing: '0.14em', fontWeight: 500 }}>FONTE: ANACOM 2025</div>
        </div>

        {/* Post 3 — carousel cover */}
        <div style={{ background: 'var(--red)', color: 'var(--paper)', padding: 32, aspectRatio: '1', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', position: 'relative', overflow: 'hidden' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', fontWeight: 500 }}>// CARROSSEL · 7 SLIDES</div>
          <div style={{ fontFamily: 'var(--font-sans)', fontSize: 56, lineHeight: 0.92, letterSpacing: '-0.05em', fontWeight: 800 }}>
            7 erros que matam o pipeline.
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
            <MakersMark size={32} color="var(--red)" bg="var(--ink)"/>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', fontWeight: 500 }}>desliza →</div>
          </div>
        </div>
      </div>

      {/* LinkedIn cover */}
      <div style={{ marginTop: 24 }}>
        <Eyebrow>LinkedIn cover · 1584×396</Eyebrow>
        <div style={{ marginTop: 12, background: 'var(--paper)', padding: '60px 56px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', border: '1px solid var(--line)', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', inset: 0, backgroundImage: 'linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px)', backgroundSize: '32px 32px', opacity: 0.6 }}/>
          <div style={{ position: 'relative', flex: 1 }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--red)', letterSpacing: '0.16em', textTransform: 'uppercase', fontWeight: 500 }}>// ESTÚDIO COMERCIAL · OEIRAS</div>
            <div style={{ fontFamily: 'var(--font-sans)', fontSize: 56, lineHeight: 0.95, letterSpacing: '-0.045em', marginTop: 12, fontWeight: 800 }}>
              Vendas que não dependem da <span style={{ color: 'var(--red)' }}>sorte.</span>
            </div>
          </div>
          <div style={{ position: 'relative' }}>
            <MakersMark size={120} color="var(--paper)" bg="var(--ink)"/>
          </div>
        </div>
      </div>
    </div>
  );
}

function MerchArtboard() {
  return (
    <div style={{ background: 'var(--paper-2)', padding: 56, height: '100%' }}>
      <Eyebrow>06 · Merch</Eyebrow>
      <h3 style={{ fontFamily: 'var(--font-sans)', fontSize: 36, lineHeight: 1, letterSpacing: '-0.035em', margin: '0 0 32px', fontWeight: 700 }}>Coisas reais para gente real.</h3>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
        {/* T-shirt */}
        <div>
          <div style={{ background: 'var(--ink)', aspectRatio: '1', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
            <svg viewBox="0 0 200 200" width="80%">
              <path d="M50 50 L80 30 Q100 50 120 30 L150 50 L160 80 L140 90 L140 170 L60 170 L60 90 L40 80 Z" fill="#0A0A0A" stroke="#222" strokeWidth="1"/>
            </svg>
            <div style={{ position: 'absolute', color: 'var(--paper)', fontFamily: 'var(--font-sans)', fontSize: 28, fontWeight: 800, letterSpacing: '-0.04em', textAlign: 'center', marginTop: 16 }}>
              <span>makers</span><span style={{ color: 'var(--red)' }}>.</span>
            </div>
          </div>
          <div style={{ marginTop: 12, fontSize: 13, fontWeight: 500 }}>T-shirt preta · wordmark</div>
          <div style={{ fontSize: 11, color: 'var(--mute)', marginTop: 4, fontFamily: 'var(--font-mono)', fontWeight: 500 }}>100% ALGODÃO BIO · 240G</div>
        </div>

        {/* Tote */}
        <div>
          <div style={{ background: 'var(--paper)', aspectRatio: '1', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', border: '1px solid var(--line)' }}>
            <svg viewBox="0 0 200 200" width="75%">
              <path d="M40 60 L40 180 L160 180 L160 60 L130 60 Q130 30 100 30 Q70 30 70 60 Z" fill="none" stroke="#0A0A0A" strokeWidth="2"/>
              <path d="M70 60 Q70 35 100 35 Q130 35 130 60" fill="none" stroke="#0A0A0A" strokeWidth="2"/>
            </svg>
            <div style={{ position: 'absolute', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, marginTop: 24 }}>
              <MakersMark size={28} color="var(--paper)" bg="var(--red)"/>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.16em', color: 'var(--ink)', fontWeight: 500 }}>BUILT WITH METHOD</div>
            </div>
          </div>
          <div style={{ marginTop: 12, fontSize: 13, fontWeight: 500 }}>Tote bag · cru</div>
          <div style={{ fontSize: 11, color: 'var(--mute)', marginTop: 4, fontFamily: 'var(--font-mono)', fontWeight: 500 }}>SERIGRAFIA · 1 COR + VERMELHO</div>
        </div>

        {/* Mug */}
        <div>
          <div style={{ background: 'var(--paper-2)', aspectRatio: '1', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
            <div style={{ width: 140, height: 130, background: 'var(--paper)', border: '2px solid var(--ink)', borderRadius: '4px 4px 8px 8px', position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <div style={{ position: 'absolute', right: -22, top: 30, width: 28, height: 50, border: '2px solid var(--ink)', borderRadius: '0 50% 50% 0', borderLeft: 'none' }}/>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 16, color: 'var(--red)', fontWeight: 600 }}>$ ./run</div>
            </div>
          </div>
          <div style={{ marginTop: 12, fontSize: 13, fontWeight: 500 }}>Caneca · porcelana</div>
          <div style={{ fontSize: 11, color: 'var(--mute)', marginTop: 4, fontFamily: 'var(--font-mono)', fontWeight: 500 }}>$ ./RUN · MONO 600</div>
        </div>

        {/* Notebook */}
        <div>
          <div style={{ background: 'var(--paper-2)', aspectRatio: '1', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <div style={{ width: 130, height: 170, background: 'var(--paper)', boxShadow: '0 8px 24px -8px rgba(0,0,0,0.25)', padding: 20, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
              <MakersMark size={28} color="var(--paper)" bg="var(--red)"/>
              <div>
                <div style={{ fontFamily: 'var(--font-sans)', fontSize: 16, fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1 }}>caderno<br/>de campo</div>
                <div style={{ height: 1, background: 'var(--ink)', width: 24, marginTop: 8 }}/>
              </div>
            </div>
          </div>
          <div style={{ marginTop: 12, fontSize: 13, fontWeight: 500 }}>Caderno A5 · capa branca</div>
          <div style={{ fontSize: 11, color: 'var(--mute)', marginTop: 4, fontFamily: 'var(--font-mono)', fontWeight: 500 }}>96 PÁGINAS · PAUTADO</div>
        </div>

        {/* Stickers */}
        <div>
          <div style={{ background: 'var(--paper-2)', aspectRatio: '1', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12 }}>
            <div style={{ background: 'var(--red)', color: 'var(--paper)', padding: '10px 14px', fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 800, letterSpacing: '-0.03em', transform: 'rotate(-6deg)' }}>makers<span style={{ color: 'var(--ink)' }}>.</span></div>
            <div style={{ background: 'var(--ink)', color: 'var(--acid)', padding: '10px 14px', fontFamily: 'var(--font-mono)', fontSize: 12, transform: 'rotate(4deg)', fontWeight: 500 }}>$ ./vende</div>
            <div style={{ background: 'var(--paper)', color: 'var(--ink)', padding: '10px 14px', fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 700, transform: 'rotate(-3deg)', border: '2px solid var(--ink)' }}>BUILT WITH METHOD</div>
          </div>
          <div style={{ marginTop: 12, fontSize: 13, fontWeight: 500 }}>Pack stickers · 3 designs</div>
          <div style={{ fontSize: 11, color: 'var(--mute)', marginTop: 4, fontFamily: 'var(--font-mono)', fontWeight: 500 }}>VINIL · DIE-CUT · 7CM</div>
        </div>

        {/* Cap */}
        <div>
          <div style={{ background: 'var(--paper-2)', aspectRatio: '1', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <div style={{ width: 160, height: 90, background: 'var(--ink)', borderRadius: '50% 50% 0 0', position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <MakersMark size={26} color="var(--paper)" bg="var(--red)"/>
              <div style={{ position: 'absolute', bottom: -10, left: -10, right: -10, height: 20, background: 'var(--ink)', borderRadius: '50%' }}/>
            </div>
          </div>
          <div style={{ marginTop: 12, fontSize: 13, fontWeight: 500 }}>Cap preto · M bordado</div>
          <div style={{ fontSize: 11, color: 'var(--mute)', marginTop: 4, fontFamily: 'var(--font-mono)', fontWeight: 500 }}>BORDADO · VERMELHO + BRANCO</div>
        </div>
      </div>
    </div>
  );
}

function AppIconArtboard() {
  return (
    <div style={{ background: 'var(--paper-2)', padding: 56, height: '100%' }}>
      <Eyebrow>06 · Favicon, App icon, OG</Eyebrow>
      <h3 style={{ fontFamily: 'var(--font-sans)', fontSize: 36, lineHeight: 1, letterSpacing: '-0.035em', margin: '0 0 32px', fontWeight: 700 }}>Pixel-perfect em qualquer escala.</h3>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
        <div style={{ background: 'var(--paper)', padding: 24, textAlign: 'center', border: '1px solid var(--line)' }}>
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: 80 }}>
            <MakersMark size={16} color="var(--paper)" bg="var(--red)"/>
          </div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, marginTop: 12, letterSpacing: '0.14em', color: 'var(--mute)', fontWeight: 500 }}>FAVICON · 16×16</div>
        </div>
        <div style={{ background: 'var(--paper)', padding: 24, textAlign: 'center', border: '1px solid var(--line)' }}>
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: 80 }}>
            <MakersMark size={32} color="var(--paper)" bg="var(--red)"/>
          </div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, marginTop: 12, letterSpacing: '0.14em', color: 'var(--mute)', fontWeight: 500 }}>BROWSER TAB · 32</div>
        </div>
        <div style={{ background: 'var(--paper)', padding: 24, textAlign: 'center', border: '1px solid var(--line)' }}>
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: 80 }}>
            <div style={{ width: 64, height: 64, background: 'var(--red)', borderRadius: 14, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <span style={{ fontFamily: 'var(--font-sans)', color: 'var(--paper)', fontSize: 48, fontWeight: 800, letterSpacing: '-0.06em', lineHeight: 1, marginTop: -2 }}>M</span>
            </div>
          </div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, marginTop: 12, letterSpacing: '0.14em', color: 'var(--mute)', fontWeight: 500 }}>APP ICON · iOS · 64</div>
        </div>
        <div style={{ background: 'var(--paper)', padding: 24, textAlign: 'center', border: '1px solid var(--line)' }}>
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: 80 }}>
            <div style={{ width: 64, height: 64, background: 'var(--red)', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <span style={{ fontFamily: 'var(--font-sans)', color: 'var(--paper)', fontSize: 44, fontWeight: 800, letterSpacing: '-0.06em', lineHeight: 1 }}>M</span>
            </div>
          </div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, marginTop: 12, letterSpacing: '0.14em', color: 'var(--mute)', fontWeight: 500 }}>SOCIAL AVATAR · 64</div>
        </div>
      </div>

      {/* OG image */}
      <div style={{ marginTop: 32 }}>
        <Eyebrow>OG image · 1200×630 (twitter, linkedin)</Eyebrow>
        <div style={{ marginTop: 12, background: 'var(--ink)', color: 'var(--paper)', aspectRatio: '1200/630', padding: 56, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', inset: 0, backgroundImage: 'linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px)', backgroundSize: '40px 40px' }}/>
          <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
            <MakersLogoC color="var(--paper)" accent="var(--red)" size={36}/>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--acid)', letterSpacing: '0.16em', fontWeight: 500 }}>// MAKERS.PT</div>
          </div>
          <div style={{ position: 'relative' }}>
            <div style={{ fontFamily: 'var(--font-sans)', fontSize: 88, lineHeight: 0.92, letterSpacing: '-0.05em', fontWeight: 800, maxWidth: 800 }}>
              Vendas que<br/>não dependem<br/>da <span style={{ color: 'var(--red)' }}>sorte.</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SocialArtboard, MerchArtboard, AppIconArtboard });