/* Makers institutional site v2 — Suisse minimal × cyber accents */

function MakersSiteArtboard() {
  return (
    <div style={{ background: 'var(--paper)', minHeight: '100%', fontFamily: 'var(--font-sans)', color: 'var(--ink)' }}>
      <header style={{ position: 'sticky', top: 0, background: 'rgba(255,255,255,0.92)', backdropFilter: 'blur(10px)', borderBottom: '1px solid var(--line)', zIndex: 10 }}>
        <div style={{ maxWidth: 1320, margin: '0 auto', padding: '20px 48px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <MakersLogoC color="var(--ink)" accent="var(--red)" size={32}/>
          <nav style={{ display: 'flex', gap: 32, fontSize: 14, fontWeight: 500 }}>
            <a style={{ color: 'inherit', textDecoration: 'none' }}>Produtos</a>
            <a style={{ color: 'inherit', textDecoration: 'none' }}>Manifesto</a>
            <a style={{ color: 'inherit', textDecoration: 'none' }}>Casos</a>
            <a style={{ color: 'inherit', textDecoration: 'none' }}>Contacto</a>
          </nav>
          <div style={{ display: 'flex', gap: 8 }}>
            <button style={{ background: 'transparent', border: 'none', padding: '12px 16px', fontFamily: 'inherit', fontSize: 14, cursor: 'pointer', fontWeight: 500 }}>Entrar</button>
            <button style={{ background: 'var(--ink)', color: 'var(--paper)', border: 'none', padding: '12px 20px', fontFamily: 'inherit', fontSize: 14, cursor: 'pointer', fontWeight: 500 }}>Marcar conversa →</button>
          </div>
        </div>
      </header>

      <section style={{ padding: '80px 48px 80px', maxWidth: 1320, margin: '0 auto', position: 'relative' }}>
        <div style={{ position: 'absolute', inset: '0 48px', backgroundImage: 'linear-gradient(var(--grid) 1px, transparent 1px)', backgroundSize: '100% 80px', opacity: 0.6, pointerEvents: 'none', top: 64, bottom: 0 }}/>
        <div style={{ position: 'relative' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--ink)', marginBottom: 32, fontWeight: 500, border: '1px solid var(--ink)', padding: '6px 12px' }}>
            <span style={{ width: 6, height: 6, background: 'var(--red)', borderRadius: '50%' }}/>
            Estúdio comercial · Oeiras, PT
          </div>
          <h1 style={{ fontFamily: 'var(--font-sans)', fontSize: 168, lineHeight: 0.86, letterSpacing: '-0.06em', margin: 0, fontWeight: 800 }}>
            Vendas que<br/>não dependem<br/>da <span style={{ color: 'var(--red)' }}>sorte.</span>
          </h1>
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64, marginTop: 56, alignItems: 'end' }}>
            <p style={{ fontSize: 22, lineHeight: 1.4, margin: 0, maxWidth: 620, fontWeight: 400 }}>
              Construímos o lado comercial das pequenas empresas portuguesas. Listas certas, conversas no canal certo, processo que se mede.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <button style={{ background: 'var(--red)', color: 'var(--paper)', border: 'none', padding: '18px 24px', fontFamily: 'inherit', fontSize: 15, cursor: 'pointer', fontWeight: 500 }}>Marcar conversa de 30 min →</button>
              <button style={{ background: 'transparent', color: 'var(--ink)', border: '1px solid var(--ink)', padding: '18px 24px', fontFamily: 'inherit', fontSize: 15, cursor: 'pointer', fontWeight: 500 }}>Ver produtos</button>
            </div>
          </div>
        </div>

        <div style={{ marginTop: 96, padding: '32px 0', borderTop: '1px solid var(--ink)', borderBottom: '1px solid var(--ink)', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1, background: 'var(--line)', position: 'relative' }}>
          {[
            ['1.10M', 'micro e pequenas empresas em PT'],
            ['54%', 'das PME em maturidade básica'],
            ['89,9%', 'de penetração do WhatsApp'],
            ['23,6%', 'usam publicidade paga online'],
          ].map(([n, t]) => (
            <div key={n} style={{ background: 'var(--paper)', padding: '24px 32px' }}>
              <div style={{ fontFamily: 'var(--font-sans)', fontSize: 56, lineHeight: 1, letterSpacing: '-0.04em', fontWeight: 700 }}>{n}</div>
              <div style={{ fontSize: 12, color: 'var(--mute)', marginTop: 8, lineHeight: 1.5 }}>{t}</div>
            </div>
          ))}
        </div>
      </section>

      <section style={{ background: 'var(--ink)', color: 'var(--paper)', padding: '120px 48px' }}>
        <div style={{ maxWidth: 1320, margin: '0 auto' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 64 }}>
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--acid)', marginBottom: 16, fontWeight: 500 }}>// 02 — produtos</div>
              <h2 style={{ fontFamily: 'var(--font-sans)', fontSize: 96, lineHeight: 0.92, letterSpacing: '-0.05em', margin: 0, fontWeight: 700 }}>
                Três ferramentas.<br/>Um <span style={{ color: 'var(--red)' }}>método.</span>
              </h2>
            </div>
            <a style={{ color: 'var(--paper)', fontSize: 14, borderBottom: '1px solid var(--paper)', paddingBottom: 4 }}>Ver todos →</a>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: 'rgba(255,255,255,0.12)' }}>
            {[
              { name: 'explorador', tagline: 'Encontra os prospects que ninguém viu.', desc: 'Lista, filtra e contacta empresas portuguesas que se encaixam no teu perfil ideal.', accent: 'var(--red)' },
              { name: 'bots', tagline: 'Atende no WhatsApp como tu atenderias.', desc: 'Bot conversacional treinado no teu negócio. Triagem, qualificação, marcação.', accent: 'var(--acid)' },
              { name: 'estúdio', tagline: 'Automação à medida, com gente.', desc: 'Quando a ferramenta de prateleira não chega: equipa Makers desenha o teu fluxo.', accent: 'var(--paper)' },
            ].map((p, i) => (
              <div key={p.name} style={{ background: 'var(--ink)', padding: 40, display: 'flex', flexDirection: 'column', gap: 24, minHeight: 380 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                  <MakersMark size={40} color="var(--paper)" bg={p.accent === 'var(--paper)' ? 'var(--ink-2)' : p.accent}/>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: p.accent, letterSpacing: '0.14em', fontWeight: 500 }}>0{i+1}</div>
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontFamily: 'var(--font-sans)', fontSize: 36, letterSpacing: '-0.04em', lineHeight: 1, fontWeight: 700 }}>
                    makers<span style={{ color: p.accent }}>/</span>{p.name}
                  </div>
                  <div style={{ fontSize: 18, lineHeight: 1.35, marginTop: 24, fontWeight: 500 }}>
                    {p.tagline}
                  </div>
                  <div style={{ fontSize: 14, lineHeight: 1.6, color: 'rgba(255,255,255,0.65)', marginTop: 16 }}>
                    {p.desc}
                  </div>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderTop: '1px solid rgba(255,255,255,0.15)', paddingTop: 16 }}>
                  <span style={{ fontSize: 13, color: p.accent, fontWeight: 500 }}>Saber mais</span>
                  <span style={{ color: p.accent, fontSize: 18 }}>→</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ background: 'var(--paper)', padding: '120px 48px' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--red)', marginBottom: 32, fontWeight: 500 }}>// 03 — manifesto</div>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 64, lineHeight: 1.05, letterSpacing: '-0.045em', margin: 0, fontWeight: 700 }}>
            Há mais de um milhão de PME portuguesas a vender de forma <span style={{ color: 'var(--red)' }}>improvisada.</span> Não é falta de internet — é falta de método.
          </p>

          <div style={{ marginTop: 80, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: 'var(--line)' }}>
            {[
              { n: '01', t: 'Ferramenta antes de plataforma', d: 'Não vendemos "transformação digital". Vendemos coisas que se usam na segunda-feira de manhã.' },
              { n: '02', t: 'Português, não traduzido', d: 'Fontes, canais e escrita pensados para o tecido empresarial português, não para o do Vale do Silício.' },
              { n: '03', t: 'Operação > demo', d: 'Acompanhamos a primeira semana de uso. Se não dá resultado real, não dá receita recorrente.' },
            ].map(p => (
              <div key={p.n} style={{ background: 'var(--paper)', padding: 32 }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', color: 'var(--red)', fontWeight: 500 }}>{p.n}</div>
                <div style={{ fontFamily: 'var(--font-sans)', fontSize: 24, lineHeight: 1.15, marginTop: 12, letterSpacing: '-0.025em', fontWeight: 700 }}>{p.t}</div>
                <div style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--mute)', marginTop: 12 }}>{p.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ background: 'var(--ink)', color: 'var(--paper)', padding: '120px 48px' }}>
        <div style={{ maxWidth: 1320, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
          <h2 style={{ fontFamily: 'var(--font-sans)', fontSize: 96, lineHeight: 0.92, letterSpacing: '-0.05em', margin: 0, fontWeight: 700 }}>
            Mete a tua máquina comercial a <span style={{ color: 'var(--red)' }}>trabalhar.</span>
          </h2>
          <div>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: 'rgba(255,255,255,0.75)', maxWidth: 480 }}>
              Conversa de 30 minutos, sem custo. Saímos com um diagnóstico e três coisas que podes fazer já esta semana — usemos ou não algum produto Makers.
            </p>
            <button style={{ background: 'var(--red)', color: 'var(--paper)', border: 'none', padding: '20px 32px', fontFamily: 'inherit', fontSize: 16, cursor: 'pointer', marginTop: 24, fontWeight: 500 }}>Marcar conversa →</button>
            <div style={{ marginTop: 16, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--acid)', letterSpacing: '0.14em', fontWeight: 500 }}>OU WHATSAPP · +351 967 822 668</div>
          </div>
        </div>
      </section>

      <footer style={{ background: 'var(--ink)', color: 'rgba(255,255,255,0.65)', padding: '64px 48px 32px', borderTop: '1px solid rgba(255,255,255,0.1)' }}>
        <div style={{ maxWidth: 1320, margin: '0 auto' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 48, paddingBottom: 48, borderBottom: '1px solid rgba(255,255,255,0.12)' }}>
            <div>
              <MakersLogoC color="var(--paper)" accent="var(--red)" size={36}/>
              <p style={{ fontSize: 14, lineHeight: 1.55, marginTop: 24, maxWidth: 320 }}>Estúdio comercial para PME portuguesas. Construímos a parte chata para tu fechares mais negócio.</p>
            </div>
            {[
              { h: 'Produtos', items: ['Explorador', 'Bots', 'Estúdio'] },
              { h: 'Empresa', items: ['Sobre', 'Casos', 'Manifesto', 'Contacto'] },
              { h: 'Legal', items: ['Termos', 'Privacidade', 'FAQ'] },
            ].map(c => (
              <div key={c.h}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--red)', marginBottom: 16, fontWeight: 500 }}>{c.h}</div>
                {c.items.map(i => <div key={i} style={{ fontSize: 14, padding: '6px 0', color: 'var(--paper)' }}>{i}</div>)}
              </div>
            ))}
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', paddingTop: 24, fontSize: 12, fontFamily: 'var(--font-mono)', letterSpacing: '0.14em', fontWeight: 500 }}>
            <span>© 2026 MAKERS · OEIRAS, PT</span>
            <span style={{ color: 'var(--acid)' }}>● BUILT WITH METHOD</span>
          </div>
        </div>
      </footer>
    </div>
  );
}

Object.assign(window, { MakersSiteArtboard });
