/* Makers — Site Institucional · Opção 1 · Violeta Elétrico */

function SiteMakersO1() {
  const navItems = ['Produtos', 'Método', 'Casos', 'Contacto'];
  const stats = [
    ['1.1M+', 'empresas B2B no mercado ibérico'],
    ['73%', 'dos processos ainda manuais'],
    ['5×', 'mais rápido com automação IA'],
    ['24/7', 'operação sem intervenção humana'],
  ];
  const products = [
    { slug: 'explorador', name: 'Explorador', tagline: 'Prospecção inteligente de mercado.', desc: 'Mapeie, filtre e contacte empresas com o perfil ideal. Listas precisas, sem trabalho manual.', token: 'EXP' },
    { slug: 'aos',        name: 'AOS',        tagline: 'Sistema operacional agêntico.',        desc: 'Agentes de IA que constroem, delegam e monitoram fluxos operacionais. Infraestrutura que não dorme.', token: 'AOS' },
    { slug: 'whatsapp',   name: 'WhatsApp',   tagline: 'Atendimento automatizado no canal certo.', desc: 'Bot treinado no seu negócio. Triagem, qualificação e resposta em tempo real via WhatsApp.', token: 'WPP' },
    { slug: 'bots',       name: 'Bots',       tagline: 'Automação de conversas e fluxos.',     desc: 'Sistemas de resposta inteligente para suporte, vendas e operação. Escala sem equipa extra.', token: 'BOT' },
    { slug: 'estudio',    name: 'Estúdio',    tagline: 'Produto à medida, com engenharia.',    desc: 'Quando o standard não chega. A equipa Makers projeta e constrói o seu sistema do zero.', token: 'STD' },
  ];
  const steps = [
    { n: '01', title: 'Diagnóstico', body: 'Mapeamos os seus processos e identificamos onde a automação e IA geram retorno imediato.' },
    { n: '02', title: 'Arquitectura', body: 'Desenhamos o sistema: agentes, integrações, fluxos. Sem overengineering, sem caixas negras.' },
    { n: '03', title: 'Deploy', body: 'Implementamos, testamos e entregamos operacional. Suporte direto na primeira semana.' },
    { n: '04', title: 'Escala', body: 'O sistema aprende, o seu negócio escala. Iteração contínua baseada em dados reais.' },
  ];

  return (
    <div className="o1" style={{ background: 'var(--o1-paper)', fontFamily: 'var(--o1-sans)', color: 'var(--o1-ink)', minHeight: '100%' }}>

      {/* ── HEADER ── */}
      <header style={{ position: 'sticky', top: 0, background: 'rgba(250,250,250,0.94)', backdropFilter: 'blur(12px)', borderBottom: '1px solid var(--o1-line)', zIndex: 10 }}>
        <div style={{ maxWidth: 1320, margin: '0 auto', padding: '18px 48px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <MakersLogoO1 size={30} color="var(--o1-ink)" accent="var(--o1-violet)"/>
          <nav style={{ display: 'flex', gap: 32, fontSize: 14, fontWeight: 500 }}>
            {navItems.map(n => <a key={n} style={{ color: 'inherit', textDecoration: 'none' }}>{n}</a>)}
          </nav>
          <div style={{ display: 'flex', gap: 8 }}>
            <button style={{ background: 'transparent', border: 'none', padding: '10px 16px', fontFamily: 'inherit', fontSize: 14, cursor: 'pointer', fontWeight: 500, color: 'var(--o1-ink)' }}>Entrar</button>
            <button style={{ background: 'var(--o1-violet)', color: '#fff', border: 'none', padding: '10px 20px', fontFamily: 'inherit', fontSize: 14, cursor: 'pointer', fontWeight: 500 }}>Falar com a equipa →</button>
          </div>
        </div>
      </header>

      {/* ── HERO ── */}
      <section style={{ padding: '80px 48px 80px', maxWidth: 1320, margin: '0 auto', position: 'relative' }}>
        {/* Subtle grid */}
        <div style={{ position: 'absolute', inset: '0 0 0 0', backgroundImage: 'linear-gradient(var(--o1-grid) 1px, transparent 1px)', backgroundSize: '100% 80px', opacity: 0.7, pointerEvents: 'none' }}/>
        <div style={{ position: 'relative' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'var(--o1-mono)', fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--o1-ink)', marginBottom: 32, fontWeight: 500, border: '1px solid var(--o1-ink)', padding: '6px 12px' }}>
            <span style={{ width: 6, height: 6, background: 'var(--o1-violet)', borderRadius: '50%', display: 'inline-block' }}/>
            Automação · IA · Produto B2B
          </div>
          <h1 style={{ fontFamily: 'var(--o1-sans)', fontSize: 160, lineHeight: 0.87, letterSpacing: '-0.055em', margin: 0, fontWeight: 800 }}>
            Sistemas<br/>que operam<br/>por <span style={{ color: 'var(--o1-violet)' }}>você.</span>
          </h1>
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64, marginTop: 56, alignItems: 'end' }}>
            <p style={{ fontSize: 21, lineHeight: 1.45, margin: 0, maxWidth: 600, fontWeight: 400 }}>
              Makers constrói produtos e sistemas que transformam processos em software. Da prospecção ao atendimento — do dado à ação.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              <button style={{ background: 'var(--o1-violet)', color: '#fff', border: 'none', padding: '18px 24px', fontFamily: 'inherit', fontSize: 15, cursor: 'pointer', fontWeight: 500, textAlign: 'left' }}>Marcar conversa de 30 min →</button>
              <button style={{ background: 'transparent', color: 'var(--o1-ink)', border: '1px solid var(--o1-ink)', padding: '18px 24px', fontFamily: 'inherit', fontSize: 15, cursor: 'pointer', fontWeight: 500, textAlign: 'left' }}>Ver produtos</button>
            </div>
          </div>
        </div>

        {/* Stats bar */}
        <div style={{ marginTop: 88, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1, background: 'var(--o1-line)', border: '1px solid var(--o1-line)' }}>
          {stats.map(([n, t]) => (
            <div key={n} style={{ background: 'var(--o1-paper)', padding: '24px 28px' }}>
              <div style={{ fontFamily: 'var(--o1-sans)', fontSize: 52, lineHeight: 1, letterSpacing: '-0.04em', fontWeight: 700, color: 'var(--o1-ink)' }}>{n}</div>
              <div style={{ fontSize: 12, color: 'var(--o1-mute)', marginTop: 8, lineHeight: 1.5 }}>{t}</div>
            </div>
          ))}
        </div>
      </section>

      {/* ── PROPOSTA DE VALOR ── */}
      <section style={{ background: 'var(--o1-ink)', color: 'var(--o1-paper)', padding: '112px 48px' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--o1-cyan)', marginBottom: 32, fontWeight: 500 }}>// 01 — proposta</div>
          <p style={{ fontFamily: 'var(--o1-sans)', fontSize: 60, lineHeight: 1.05, letterSpacing: '-0.04em', margin: 0, fontWeight: 700, maxWidth: 900 }}>
            Automação, IA e produto para empresas que precisam escalar operação sem escalar <span style={{ color: 'var(--o1-violet)' }}>custo.</span>
          </p>
          <div style={{ marginTop: 64, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: 'rgba(255,255,255,0.08)' }}>
            {[
              { t: 'Infraestrutura comercial', d: 'Não vendemos "transformação digital". Construímos os sistemas que rodam a sua operação na segunda-feira de manhã.' },
              { t: 'IA aplicada, não teórica', d: 'Agentes que agem. Fluxos que executam. Resultados mensuráveis em semanas, não em trimestres.' },
              { t: 'Produto com engenharia', d: 'Cada sistema é construído para escalar. Arquitectura limpa, integrações reais, sem dependência de ferramentas frágeis.' },
            ].map((v, i) => (
              <div key={i} style={{ background: 'var(--o1-ink)', padding: 36 }}>
                <div style={{ width: 32, height: 2, background: 'var(--o1-violet)', marginBottom: 20 }}/>
                <div style={{ fontSize: 20, fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.15, marginBottom: 12 }}>{v.t}</div>
                <div style={{ fontSize: 14, lineHeight: 1.65, color: 'rgba(255,255,255,0.6)' }}>{v.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── PRODUTOS ── */}
      <section style={{ background: 'var(--o1-paper)', padding: '112px 48px' }}>
        <div style={{ maxWidth: 1320, margin: '0 auto' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 56 }}>
            <div>
              <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--o1-violet)', marginBottom: 16, fontWeight: 500 }}>// 02 — produtos</div>
              <h2 style={{ fontFamily: 'var(--o1-sans)', fontSize: 88, lineHeight: 0.92, letterSpacing: '-0.05em', margin: 0, fontWeight: 700 }}>
                Cinco produtos.<br/>Um <span style={{ color: 'var(--o1-violet)' }}>sistema.</span>
              </h2>
            </div>
            <a style={{ color: 'var(--o1-ink)', fontSize: 14, borderBottom: '1px solid var(--o1-ink)', paddingBottom: 4, textDecoration: 'none' }}>Ver todos →</a>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 1, background: 'var(--o1-line)' }}>
            {products.map((p, i) => (
              <div key={p.slug} style={{ background: 'var(--o1-paper)', padding: 32, display: 'flex', flexDirection: 'column', gap: 20, minHeight: 360 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                  <MakersMarkO1 size={36} bg="var(--o1-violet)" color="#FFFFFF"/>
                  <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 10, color: 'var(--o1-violet)', letterSpacing: '0.14em', fontWeight: 500 }}>{p.token}</div>
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontFamily: 'var(--o1-sans)', fontSize: 22, letterSpacing: '-0.03em', lineHeight: 1, fontWeight: 700 }}>
                    makers<span style={{ color: 'var(--o1-violet)' }}>/</span>{p.slug}
                  </div>
                  <div style={{ fontSize: 14, lineHeight: 1.4, marginTop: 16, fontWeight: 600 }}>{p.tagline}</div>
                  <div style={{ fontSize: 13, lineHeight: 1.6, color: 'var(--o1-mute)', marginTop: 10 }}>{p.desc}</div>
                </div>
                <div style={{ borderTop: '1px solid var(--o1-line)', paddingTop: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span style={{ fontSize: 13, color: 'var(--o1-violet)', fontWeight: 500 }}>Saber mais</span>
                  <span style={{ color: 'var(--o1-violet)', fontSize: 16 }}>→</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── MÉTODO / PROCESSO ── */}
      <section style={{ background: 'var(--o1-paper-2)', padding: '112px 48px' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--o1-violet)', marginBottom: 32, fontWeight: 500 }}>// 03 — método</div>
          <h2 style={{ fontFamily: 'var(--o1-sans)', fontSize: 72, lineHeight: 0.92, letterSpacing: '-0.05em', margin: '0 0 64px', fontWeight: 700 }}>
            Do diagnóstico<br/>ao <span style={{ color: 'var(--o1-violet)' }}>deploy.</span>
          </h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1, background: 'var(--o1-line)' }}>
            {steps.map((s, i) => (
              <div key={s.n} style={{ background: 'var(--o1-paper)', padding: 32 }}>
                <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 11, letterSpacing: '0.14em', color: 'var(--o1-violet)', fontWeight: 500, marginBottom: 16 }}>{s.n}</div>
                <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.15, marginBottom: 12 }}>{s.title}</div>
                <div style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--o1-mute)' }}>{s.body}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── CTA ── */}
      <section style={{ background: 'var(--o1-violet)', color: '#fff', padding: '112px 48px' }}>
        <div style={{ maxWidth: 1320, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
          <h2 style={{ fontFamily: 'var(--o1-sans)', fontSize: 88, lineHeight: 0.92, letterSpacing: '-0.05em', margin: 0, fontWeight: 700 }}>
            A sua operação<br/>a trabalhar<br/>sem você.
          </h2>
          <div>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: 'rgba(255,255,255,0.8)', maxWidth: 480, marginTop: 0 }}>
              Conversa de 30 minutos, sem custo. Saímos com um diagnóstico claro e um plano de acção concreto — usemos ou não um produto Makers.
            </p>
            <button style={{ background: '#fff', color: 'var(--o1-violet)', border: 'none', padding: '20px 32px', fontFamily: 'inherit', fontSize: 16, cursor: 'pointer', marginTop: 24, fontWeight: 600 }}>Marcar conversa →</button>
            <div style={{ marginTop: 16, fontFamily: 'var(--o1-mono)', fontSize: 12, color: 'rgba(255,255,255,0.6)', letterSpacing: '0.14em', fontWeight: 500 }}>OU WHATSAPP · +351 967 822 668</div>
          </div>
        </div>
      </section>

      {/* ── FOOTER ── */}
      <footer style={{ background: 'var(--o1-ink)', color: 'rgba(255,255,255,0.6)', padding: '64px 48px 32px', borderTop: '1px solid rgba(255,255,255,0.07)' }}>
        <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.1)' }}>
            <div>
              <MakersLogoO1 size={32} color="#FAFAFA" accent="var(--o1-violet)"/>
              <p style={{ fontSize: 14, lineHeight: 1.6, marginTop: 20, maxWidth: 320, color: 'rgba(255,255,255,0.55)' }}>
                Automação, IA e produto digital para empresas que precisam escalar operação. Oeiras, Portugal.
              </p>
            </div>
            {[
              { h: 'Produtos', items: ['Explorador', 'AOS', 'WhatsApp', 'Bots', 'Estúdio'] },
              { h: 'Empresa', items: ['Sobre', 'Método', 'Casos', 'Contacto'] },
              { h: 'Legal', items: ['Termos', 'Privacidade'] },
            ].map(c => (
              <div key={c.h}>
                <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--o1-violet)', marginBottom: 16, fontWeight: 500 }}>{c.h}</div>
                {c.items.map(i => <div key={i} style={{ fontSize: 14, padding: '5px 0', color: 'rgba(255,255,255,0.75)' }}>{i}</div>)}
              </div>
            ))}
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', paddingTop: 24, fontSize: 12, fontFamily: 'var(--o1-mono)', letterSpacing: '0.14em', fontWeight: 500 }}>
            <span>© 2026 MAKERS · OEIRAS, PT</span>
            <span style={{ color: 'var(--o1-cyan)' }}>● BUILT WITH MAKERS</span>
          </div>
        </div>
      </footer>
    </div>
  );
}

Object.assign(window, { SiteMakersO1 });
