/* Explorador Comercial site v2 — Suisse minimal */

function ExploradorSiteArtboard() {
  return (
    <div style={{ background: 'var(--paper)', minHeight: '100%', fontFamily: 'var(--font-sans)', color: 'var(--ink)' }}>
      <header style={{ borderBottom: '1px solid var(--line)' }}>
        <div style={{ maxWidth: 1320, margin: '0 auto', padding: '20px 48px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <MakersLogoC color="var(--ink)" accent="var(--red)" product="explorador" size={32}/>
          <nav style={{ display: 'flex', gap: 32, fontSize: 13, fontWeight: 500 }}>
            <a style={{ color: 'inherit', textDecoration: 'none' }}>Como funciona</a>
            <a style={{ color: 'inherit', textDecoration: 'none' }}>Cobertura</a>
            <a style={{ color: 'inherit', textDecoration: 'none' }}>Preços</a>
            <a style={{ color: 'inherit', textDecoration: 'none' }}>Casos</a>
          </nav>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <a style={{ fontSize: 13, fontWeight: 500 }}>Entrar</a>
            <button style={{ background: 'var(--red)', color: 'var(--paper)', border: 'none', padding: '12px 18px', fontSize: 13, fontFamily: 'inherit', cursor: 'pointer', fontWeight: 500 }}>Testar 7 dias →</button>
          </div>
        </div>
      </header>

      <section style={{ padding: '64px 48px 48px', maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
          <div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink)', marginBottom: 24, border: '1px solid var(--ink)', padding: '6px 12px', fontWeight: 500 }}>
              <span style={{ width: 6, height: 6, background: 'var(--red)', borderRadius: '50%' }}/>
              Beta · 1.05M empresas mapeadas
            </div>
            <h1 style={{ fontFamily: 'var(--font-sans)', fontSize: 112, lineHeight: 0.88, letterSpacing: '-0.055em', margin: 0, fontWeight: 800 }}>
              Pára de procurar empresas <span style={{ color: 'var(--red)' }}>à mão.</span>
            </h1>
            <p style={{ fontSize: 19, lineHeight: 1.5, marginTop: 32, maxWidth: 460, fontWeight: 400 }}>
              Filtra mais de um milhão de empresas portuguesas por setor, dimensão, distrito e maturidade digital. Exporta. Aborda no canal certo.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 32 }}>
              <button style={{ background: 'var(--ink)', color: 'var(--paper)', border: 'none', padding: '16px 24px', fontFamily: 'inherit', fontSize: 15, cursor: 'pointer', fontWeight: 500 }}>Começar grátis</button>
              <button style={{ background: 'transparent', color: 'var(--ink)', border: '1px solid var(--ink)', padding: '16px 24px', fontFamily: 'inherit', fontSize: 15, cursor: 'pointer', fontWeight: 500 }}>Ver demo de 2min ▸</button>
            </div>
            <div style={{ marginTop: 24, fontSize: 12, color: 'var(--mute)', fontFamily: 'var(--font-mono)', fontWeight: 500 }}>SEM CARTÃO · 100 EMPRESAS GRÁTIS · CANCELA QUANDO QUISERES</div>
          </div>

          <div style={{ background: 'var(--ink)', padding: 12, boxShadow: '0 30px 80px -20px rgba(0,0,0,0.3)' }}>
            <div style={{ background: 'var(--ink-2)', padding: '8px 12px', display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{ display: 'flex', gap: 6 }}>
                <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#FF5F56' }}/>
                <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#FFBD2E' }}/>
                <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#27C93F' }}/>
              </div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--mute)', marginLeft: 12, fontWeight: 500 }}>explorador.makers.pt</div>
            </div>
            <div style={{ background: 'var(--paper)', minHeight: 480, display: 'flex', flexDirection: 'column' }}>
              <div style={{ display: 'flex', borderBottom: '1px solid var(--line)', padding: '0 16px' }}>
                {['Pesquisa', 'Listas', 'Exportações'].map((t, i) => (
                  <div key={t} style={{ padding: '14px 16px', fontSize: 12, fontWeight: 500, borderBottom: i === 0 ? '2px solid var(--red)' : '2px solid transparent', color: i === 0 ? 'var(--ink)' : 'var(--mute)' }}>{t}</div>
                ))}
              </div>
              <div style={{ padding: 16, display: 'flex', gap: 8, flexWrap: 'wrap', borderBottom: '1px solid var(--line)' }}>
                {[
                  { k: 'Setor', v: 'Restauração' },
                  { k: 'Distrito', v: 'Lisboa + Setúbal' },
                  { k: 'Trabalhadores', v: '5–20' },
                  { k: 'Site', v: 'Sim' },
                ].map(f => (
                  <div key={f.k} style={{ background: 'var(--paper-2)', padding: '6px 10px', fontSize: 11, display: 'flex', gap: 6 }}>
                    <span style={{ color: 'var(--mute)' }}>{f.k}:</span>
                    <span style={{ fontWeight: 500 }}>{f.v}</span>
                  </div>
                ))}
                <div style={{ background: 'var(--red)', padding: '6px 10px', fontSize: 11, color: 'var(--paper)', fontWeight: 500 }}>+ filtro</div>
              </div>
              <div style={{ padding: '12px 16px', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', color: 'var(--mute)', textTransform: 'uppercase', fontWeight: 500 }}>
                <span style={{ color: 'var(--red)', fontWeight: 600 }}>847</span> EMPRESAS ENCONTRADAS
              </div>
              {[
                { name: 'Tasca do João, Lda', city: 'Almada', size: '8 colab.', score: '92' },
                { name: 'Cantina Ribeiro', city: 'Cascais', size: '14 colab.', score: '88' },
                { name: 'Mar e Pão Restaurante', city: 'Lisboa', size: '11 colab.', score: '84' },
                { name: 'Adega da Avó', city: 'Setúbal', size: '6 colab.', score: '79' },
              ].map((r, i) => (
                <div key={r.name} style={{ padding: '14px 16px', borderTop: i === 0 ? 'none' : '1px solid var(--line)', display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 60px 60px', gap: 12, alignItems: 'center', fontSize: 12, background: i === 0 ? 'rgba(255,59,48,0.06)' : 'transparent' }}>
                  <div style={{ fontWeight: 500 }}>{r.name}</div>
                  <div style={{ color: 'var(--mute)' }}>{r.city}</div>
                  <div style={{ color: 'var(--mute)' }}>{r.size}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', color: 'var(--red)', fontWeight: 600 }}>{r.score}</div>
                  <div style={{ textAlign: 'right' }}>→</div>
                </div>
              ))}
              <div style={{ padding: 12, borderTop: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--mute)', fontFamily: 'var(--font-mono)', fontWeight: 500 }}>
                <span>1–4 DE 847</span>
                <span style={{ color: 'var(--red)' }}>EXPORTAR LISTA ↗</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: '96px 48px', background: 'var(--paper-2)' }}>
        <div style={{ maxWidth: 1320, margin: '0 auto' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--red)', marginBottom: 16, fontWeight: 500 }}>// como funciona</div>
          <h2 style={{ fontFamily: 'var(--font-sans)', fontSize: 80, lineHeight: 0.92, letterSpacing: '-0.05em', margin: 0, fontWeight: 700, maxWidth: 800 }}>
            Do <span style={{ color: 'var(--red)' }}>nada</span> a uma lista pronta — em três passos.
          </h2>

          <div style={{ marginTop: 64, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: 'var(--line)' }}>
            {[
              { n: '01', t: 'Define o teu cliente ideal', d: 'Setor, dimensão, geografia, sinais de digitalização. Granularidade que precisares.' },
              { n: '02', t: 'Recebe a lista organizada', d: 'NIF, contactos públicos, dimensão, indicadores. Score de adequação. Atualizada continuamente.' },
              { n: '03', t: 'Aborda no canal certo', d: 'CSV, integração CRM, ou direto no makers/bots. Tu decides como falar.' },
            ].map(s => (
              <div key={s.n} style={{ background: 'var(--paper)', padding: 32 }}>
                <div style={{ fontFamily: 'var(--font-sans)', fontSize: 80, color: 'var(--red)', lineHeight: 0.85, fontWeight: 700, letterSpacing: '-0.05em' }}>{s.n}</div>
                <div style={{ fontFamily: 'var(--font-sans)', fontSize: 26, lineHeight: 1.15, marginTop: 16, letterSpacing: '-0.03em', fontWeight: 700 }}>{s.t}</div>
                <div style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--mute)', marginTop: 12 }}>{s.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: '96px 48px', background: 'var(--ink)', color: 'var(--paper)' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 64 }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--acid)', fontWeight: 500 }}>// preços</div>
            <h2 style={{ fontFamily: 'var(--font-sans)', fontSize: 88, lineHeight: 0.95, letterSpacing: '-0.05em', margin: '16px 0 0', fontWeight: 700 }}>Simples. Em euros. Sem letra miudinha.</h2>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: 'rgba(255,255,255,0.12)' }}>
            {[
              { name: 'Solo', price: '29', desc: 'Para freelancers e prestadores de serviços', items: ['500 empresas/mês', '3 perfis salvos', 'Export CSV', 'WhatsApp suporte'], cta: 'Começar', featured: false },
              { name: 'Estúdio', price: '79', desc: 'Para agências e equipas comerciais pequenas', items: ['2.500 empresas/mês', '10 perfis', 'Export CSV + API', 'Integração CRM', 'makers/bots ready'], cta: 'Mais escolhido', featured: true },
              { name: 'Sob medida', price: '—', desc: 'Volumes maiores ou integrações customizadas', items: ['Volume ilimitado', 'Dados dedicados', 'SLA + onboarding', 'Conta gerida'], cta: 'Falar connosco', featured: false },
            ].map(p => (
              <div key={p.name} style={{ background: p.featured ? 'var(--ink-2)' : 'var(--ink)', padding: 32, position: 'relative' }}>
                {p.featured && <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 4, background: 'var(--red)' }}/>}
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', color: p.featured ? 'var(--red)' : 'rgba(255,255,255,0.5)', fontWeight: 500 }}>{p.name}</div>
                <div style={{ marginTop: 24, display: 'flex', alignItems: 'baseline', gap: 6 }}>
                  <span style={{ fontFamily: 'var(--font-sans)', fontSize: 72, lineHeight: 1, letterSpacing: '-0.05em', fontWeight: 700 }}>{p.price === '—' ? '—' : `€${p.price}`}</span>
                  {p.price !== '—' && <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.6)' }}>/mês</span>}
                </div>
                <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.65)', marginTop: 8, minHeight: 36 }}>{p.desc}</div>
                <div style={{ height: 1, background: 'rgba(255,255,255,0.15)', margin: '24px 0' }}/>
                {p.items.map(i => (
                  <div key={i} style={{ fontSize: 13, padding: '6px 0', display: 'flex', gap: 8 }}>
                    <span style={{ color: p.featured ? 'var(--red)' : 'var(--paper)' }}>—</span>{i}
                  </div>
                ))}
                <button style={{ marginTop: 24, width: '100%', background: p.featured ? 'var(--red)' : 'transparent', color: 'var(--paper)', border: p.featured ? 'none' : '1px solid var(--paper)', padding: 14, fontFamily: 'inherit', fontSize: 14, cursor: 'pointer', fontWeight: 500 }}>{p.cta}</button>
              </div>
            ))}
          </div>
        </div>
      </section>

      <footer style={{ background: 'var(--paper)', borderTop: '1px solid var(--line)', padding: '32px 48px', textAlign: 'center' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--mute)', letterSpacing: '0.16em', fontWeight: 500 }}>
          MAKERS<span style={{ color: 'var(--red)' }}>/</span>EXPLORADOR · UM PRODUTO <span style={{ color: 'var(--ink)' }}>MAKERS<span style={{ color: 'var(--red)' }}>.</span></span>
        </div>
      </footer>
    </div>
  );
}

Object.assign(window, { ExploradorSiteArtboard });
