/* Makers — Site Institucional · Opção 2 */

function SiteMakersO2() {
  const NavItem = ({ label, muted }) => (
    <span style={{ fontSize: 14, fontWeight: 500, color: muted ? 'var(--o2-muted)' : 'var(--o2-ink)', cursor: 'pointer', letterSpacing: '-0.01em' }}>{label}</span>
  );

  const SectionLabel = ({ children }) => (
    <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--o2-cyan-2)', marginBottom: 16, fontWeight: 500 }}>{children}</div>
  );

  const products = [
    { slug: 'explorador', name: 'Explorador Comercial', color: '#22C55E', bg: 'var(--o2-green-pale)', desc: 'Encontre empresas com perfil ideal antes de começar a vender. Dados, segmentos e listas prontas para prospecção.', icon: '◆' },
    { slug: 'whatsapp',   name: 'Bot WhatsApp',          color: '#16A34A', bg: '#f0fdf4',              desc: 'Responda, qualifique e encaminhe conversas comerciais automaticamente, sem perder o toque humano.',         icon: '◉' },
    { slug: 'aos',        name: 'AOS',                   color: '#F59E0B', bg: 'var(--o2-amber-pale)', desc: 'Transforme a operação em fluxos acompanhados por IA. Tickets, follow-ups e tarefas organizados.',           icon: '▣' },
    { slug: 'bots',       name: 'Bots',                  color: '#18C7D4', bg: 'var(--o2-cyan-pale)',  desc: 'Automatize conversas e tarefas recorrentes em qualquer canal. Integra com os seus sistemas existentes.',    icon: '◎' },
    { slug: 'estudio',    name: 'Estúdio Makers',        color: '#374B52', bg: 'var(--o2-petrol-pale)', desc: 'Sistemas à medida para processos específicos. Consultoria, implementação e acompanhamento contínuo.',      icon: '◇' },
  ];

  const benefits = [
    { icon: '◆', title: 'Prospecção inteligente', desc: 'Identifique empresas com perfil para comprar antes de iniciar contacto.' },
    { icon: '◉', title: 'Conversas que fecham', desc: 'Qualifique automaticamente e encaminhe para a equipa no momento certo.' },
    { icon: '▣', title: 'Operação sem fricção', desc: 'Tickets, follow-ups e tarefas geridos automaticamente com contexto.' },
    { icon: '→', title: 'Resultados mensuráveis', desc: 'Dashboards claros, métricas de conversão e visibilidade de pipeline.' },
  ];

  const useCases = [
    { sector: 'Turismo', desc: 'Resposta imediata a pedidos de orçamento via WhatsApp, qualificação automática e follow-up organizado.' },
    { sector: 'Serviços B2B', desc: 'Prospecção de empresas-alvo, primeiro contacto automatizado e gestão de proposta por IA.' },
    { sector: 'Retail & E-commerce', desc: 'Atendimento omnicanal, recuperação de carrinho e gestão de tickets de suporte.' },
    { sector: 'Saúde & Clínicas', desc: 'Marcações via WhatsApp, confirmações automáticas e follow-up pós-consulta.' },
  ];

  return (
    <div className="o2" style={{ background: 'var(--o2-white)', width: '100%', fontFamily: 'var(--o2-sans)' }}>

      {/* ── NAV ── */}
      <nav style={{ background: 'rgba(246,250,251,0.95)', borderBottom: '1px solid var(--o2-line)', padding: '0 48px', height: 64, display: 'flex', alignItems: 'center', justifyContent: 'space-between', position: 'sticky', top: 0, zIndex: 10 }}>
        <MakersLogoO2 size={36} color="var(--o2-ink)" markBg="var(--o2-petrol)" accent="var(--o2-cyan)"/>
        <div style={{ display: 'flex', gap: 32, alignItems: 'center' }}>
          {['Produtos', 'Casos de uso', 'Método', 'Sobre', 'Blog'].map(l => <NavItem key={l} label={l} muted/>)}
        </div>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--o2-ink)', cursor: 'pointer' }}>Entrar</div>
          <div style={{ background: 'var(--o2-petrol)', color: '#fff', borderRadius: 8, padding: '9px 20px', fontSize: 14, fontWeight: 600, cursor: 'pointer' }}>Começar →</div>
        </div>
      </nav>

      {/* ── HERO ── */}
      <section style={{ background: 'var(--o2-paper)', padding: '96px 48px 80px', position: 'relative', overflow: 'hidden' }}>
        <svg style={{ position: 'absolute', right: 0, top: 0, height: '100%', opacity: 0.07, pointerEvents: 'none' }} viewBox="0 0 600 500" width={600}>
          <path d="M50 400 Q150 200 300 250 T550 100" stroke="var(--o2-cyan)" strokeWidth="2" fill="none"/>
          <path d="M100 450 Q200 300 350 320 T600 150" stroke="var(--o2-petrol)" strokeWidth="1.5" fill="none"/>
          {[{cx:300,cy:250},{cx:450,cy:175},{cx:200,cy:310}].map((c,i)=><circle key={i} cx={c.cx} cy={c.cy} r={6} fill="var(--o2-cyan)"/>)}
        </svg>
        <div style={{ maxWidth: 760, position: 'relative' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'var(--o2-cyan-pale)', borderRadius: 99, padding: '6px 14px', marginBottom: 28, border: '1px solid var(--o2-cyan)44' }}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--o2-cyan)', display: 'inline-block' }}/>
            <span style={{ fontFamily: 'var(--o2-mono)', fontSize: 11, color: 'var(--o2-cyan-2)', letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 500 }}>Automação B2B · Portugal</span>
          </div>
          <h1 style={{ fontFamily: 'var(--o2-sans)', fontSize: 72, fontWeight: 800, letterSpacing: '-0.045em', lineHeight: 1.0, margin: '0 0 24px', color: 'var(--o2-ink)' }}>
            Automação inteligente<br/>
            para <span style={{ color: 'var(--o2-petrol)', position: 'relative' }}>vender<span style={{ color: 'var(--o2-cyan)' }}>,</span></span>{' '}
            atender<br/>
            e operar <span style={{ color: 'var(--o2-cyan)' }}>melhor.</span>
          </h1>
          <p style={{ fontSize: 18, lineHeight: 1.65, color: 'var(--o2-muted)', margin: '0 0 36px', maxWidth: 580 }}>
            A Makers constrói sistemas que transformam conversas em operação — da prospecção ao follow-up, com IA que entende o ritmo comercial da sua empresa.
          </p>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <div style={{ background: 'var(--o2-petrol)', color: '#fff', borderRadius: 10, padding: '14px 28px', fontSize: 15, fontWeight: 700, cursor: 'pointer' }}>Agendar diagnóstico gratuito</div>
            <div style={{ color: 'var(--o2-petrol)', fontSize: 15, fontWeight: 600, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6 }}>Ver produtos <span style={{ color: 'var(--o2-cyan)' }}>→</span></div>
          </div>
        </div>

        {/* Floating cards */}
        <div style={{ position: 'absolute', right: 48, top: '50%', transform: 'translateY(-50%)', display: 'flex', flexDirection: 'column', gap: 10, width: 260 }}>
          {[
            { label: 'Lead qualificado', sub: 'Turismo Algarve · Score 92', color: '#22C55E', bg: 'var(--o2-green-pale)' },
            { label: 'Proposta enviada', sub: 'Via WhatsApp · 2 min após contacto', color: 'var(--o2-whatsapp)', bg: '#f0fdf4' },
            { label: 'Follow-up automático', sub: 'AOS agendou para amanhã 10h', color: 'var(--o2-aos)', bg: 'var(--o2-amber-pale)' },
          ].map((c, i) => (
            <div key={i} style={{ background: c.bg, borderRadius: 12, padding: '12px 16px', border: `1px solid ${c.color}33`, display: 'flex', gap: 10, alignItems: 'flex-start' }}>
              <div style={{ width: 8, height: 8, borderRadius: '50%', background: c.color, marginTop: 4, flexShrink: 0 }}/>
              <div>
                <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--o2-ink)' }}>{c.label}</div>
                <div style={{ fontSize: 11, color: 'var(--o2-muted)', marginTop: 2 }}>{c.sub}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ── PROOF BAR ── */}
      <section style={{ background: 'var(--o2-petrol)', padding: '20px 48px', display: 'flex', alignItems: 'center', gap: 40, justifyContent: 'center' }}>
        {[
          { v: '3× mais rápido', l: 'na qualificação de leads' },
          { v: '+60%', l: 'conversão com follow-up automático' },
          { v: '24/7', l: 'atendimento sem equipa adicional' },
          { v: '< 2 min', l: 'para responder ao primeiro pedido' },
        ].map((s, i) => (
          <React.Fragment key={i}>
            <div style={{ textAlign: 'center' }}>
              <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 18, fontWeight: 600, color: 'var(--o2-cyan)' }}>{s.v}</div>
              <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)', marginTop: 2 }}>{s.l}</div>
            </div>
            {i < 3 && <div style={{ width: 1, height: 32, background: 'rgba(255,255,255,0.1)' }}/>}
          </React.Fragment>
        ))}
      </section>

      {/* ── BENEFITS ── */}
      <section style={{ padding: '80px 48px', background: 'var(--o2-white)' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <SectionLabel>Por que a Makers</SectionLabel>
          <h2 style={{ fontFamily: 'var(--o2-sans)', fontSize: 44, fontWeight: 800, letterSpacing: '-0.035em', margin: '0 0 48px', color: 'var(--o2-ink)', maxWidth: 560 }}>
            Sistemas que trabalham enquanto a sua equipa vende
          </h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
            {benefits.map((b, i) => (
              <div key={i} style={{ background: 'var(--o2-paper)', borderRadius: 14, padding: 28 }}>
                <div style={{ width: 40, height: 40, background: 'var(--o2-petrol)', borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}>
                  <span style={{ color: 'var(--o2-cyan)', fontSize: 16 }}>{b.icon}</span>
                </div>
                <div style={{ fontSize: 16, fontWeight: 700, color: 'var(--o2-ink)', marginBottom: 10, letterSpacing: '-0.02em' }}>{b.title}</div>
                <div style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--o2-muted)' }}>{b.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── PRODUCTS ── */}
      <section style={{ padding: '80px 48px', background: 'var(--o2-paper)' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <SectionLabel>O que a Makers constrói</SectionLabel>
          <h2 style={{ fontFamily: 'var(--o2-sans)', fontSize: 44, fontWeight: 800, letterSpacing: '-0.035em', margin: '0 0 48px', color: 'var(--o2-ink)', maxWidth: 560 }}>
            Cinco produtos, um sistema coerente
          </h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 16 }}>
            {products.map((p, i) => (
              <div key={i} style={{ background: p.bg, borderRadius: 14, padding: 24, border: `1px solid ${p.color}33`, display: 'flex', flexDirection: 'column', gap: 16 }}>
                <div style={{ width: 36, height: 36, background: p.color, borderRadius: 9, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <span style={{ color: '#fff', fontSize: 14 }}>{p.icon}</span>
                </div>
                <MakersLogoO2 size={28} color="var(--o2-ink)" markBg={p.color} markColor="#fff" accent={p.color} product={p.slug}/>
                <div style={{ fontSize: 13, lineHeight: 1.6, color: 'var(--o2-muted)' }}>{p.desc}</div>
                <div style={{ marginTop: 'auto', fontSize: 13, fontWeight: 600, color: p.color, cursor: 'pointer' }}>Saber mais →</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── METHOD ── */}
      <section style={{ padding: '80px 48px', background: 'var(--o2-white)' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <SectionLabel>Método Makers</SectionLabel>
          <h2 style={{ fontFamily: 'var(--o2-sans)', fontSize: 44, fontWeight: 800, letterSpacing: '-0.035em', margin: '0 0 48px', color: 'var(--o2-ink)', maxWidth: 560 }}>
            Da conversa ao resultado, em cada etapa
          </h2>
          <div style={{ display: 'flex', gap: 0, position: 'relative' }}>
            <div style={{ position: 'absolute', top: 28, left: 40, right: 40, height: 1, background: 'var(--o2-line)', zIndex: 0 }}/>
            {[
              { step: '01', label: 'Mercado', desc: 'Identificação de empresas com perfil', color: '#22C55E' },
              { step: '02', label: 'Lead', desc: 'Qualificação automática por critérios', color: '#22C55E' },
              { step: '03', label: 'Conversa', desc: 'Primeiro contacto via WhatsApp', color: '#16A34A' },
              { step: '04', label: 'Proposta', desc: 'Geração e envio automatizado', color: 'var(--o2-cyan)' },
              { step: '05', label: 'Operação', desc: 'Gestão de follow-ups e tickets', color: '#F59E0B' },
              { step: '06', label: 'Resultado', desc: 'Dashboards e métricas de conversão', color: 'var(--o2-petrol)' },
            ].map((s, i) => (
              <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16, position: 'relative', zIndex: 1 }}>
                <div style={{ width: 56, height: 56, borderRadius: '50%', background: i < 2 ? s.color : i < 4 ? 'var(--o2-white)' : 'var(--o2-paper)', border: `2px solid ${s.color}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <span style={{ fontFamily: 'var(--o2-mono)', fontSize: 13, fontWeight: 600, color: i < 2 ? '#fff' : s.color }}>{s.step}</span>
                </div>
                <div style={{ textAlign: 'center' }}>
                  <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--o2-ink)', marginBottom: 4 }}>{s.label}</div>
                  <div style={{ fontSize: 12, color: 'var(--o2-muted)', lineHeight: 1.5 }}>{s.desc}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── USE CASES ── */}
      <section style={{ padding: '80px 48px', background: 'var(--o2-paper)' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <SectionLabel>Casos de uso</SectionLabel>
          <h2 style={{ fontFamily: 'var(--o2-sans)', fontSize: 44, fontWeight: 800, letterSpacing: '-0.035em', margin: '0 0 48px', color: 'var(--o2-ink)', maxWidth: 560 }}>
            Para empresas que precisam de crescer com método
          </h2>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
            {useCases.map((u, i) => (
              <div key={i} style={{ background: 'var(--o2-white)', borderRadius: 14, padding: 28, display: 'flex', gap: 20, alignItems: 'flex-start', border: '1px solid var(--o2-line)' }}>
                <div style={{ width: 44, height: 44, background: 'var(--o2-petrol)', borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <span style={{ color: 'var(--o2-cyan)', fontSize: 18, fontWeight: 700 }}>{u.sector[0]}</span>
                </div>
                <div>
                  <div style={{ fontSize: 16, fontWeight: 700, color: 'var(--o2-ink)', marginBottom: 8 }}>{u.sector}</div>
                  <div style={{ fontSize: 14, lineHeight: 1.65, color: 'var(--o2-muted)' }}>{u.desc}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── CTA ── */}
      <section style={{ background: 'var(--o2-petrol)', padding: '80px 48px', textAlign: 'center', position: 'relative', overflow: 'hidden' }}>
        <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.08, pointerEvents: 'none' }} viewBox="0 0 1200 300" preserveAspectRatio="xMidYMid slice">
          <path d="M0 200 Q300 100 600 150 T1200 80" stroke="var(--o2-cyan)" strokeWidth="2" fill="none"/>
          <path d="M0 250 Q400 150 700 200 T1200 130" stroke="var(--o2-cyan)" strokeWidth="1" fill="none"/>
        </svg>
        <div style={{ position: 'relative' }}>
          <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--o2-cyan)', marginBottom: 20 }}>Próximo passo</div>
          <h2 style={{ fontFamily: 'var(--o2-sans)', fontSize: 52, fontWeight: 800, letterSpacing: '-0.04em', margin: '0 0 20px', color: '#fff', lineHeight: 1.05 }}>
            Pronto para automatizar<br/>a sua operação comercial?
          </h2>
          <p style={{ fontSize: 17, color: 'rgba(255,255,255,0.6)', margin: '0 auto 36px', maxWidth: 480, lineHeight: 1.6 }}>
            Agende um diagnóstico gratuito de 30 minutos e descubra onde a automação pode criar mais impacto no seu negócio.
          </p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
            <div style={{ background: 'var(--o2-cyan)', color: 'var(--o2-petrol)', borderRadius: 10, padding: '15px 32px', fontSize: 15, fontWeight: 700, cursor: 'pointer' }}>Agendar diagnóstico gratuito</div>
            <div style={{ background: 'rgba(255,255,255,0.08)', color: '#fff', border: '1px solid rgba(255,255,255,0.2)', borderRadius: 10, padding: '15px 24px', fontSize: 15, fontWeight: 600, cursor: 'pointer' }}>Ver produtos</div>
          </div>
        </div>
      </section>

      {/* ── FOOTER ── */}
      <footer style={{ background: 'var(--o2-petrol-2)', padding: '48px 48px 32px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 40, marginBottom: 40 }}>
          <div>
            <MakersLogoO2 size={36} color="#fff" markBg="var(--o2-cyan)" markColor="var(--o2-petrol)" accent="var(--o2-petrol)"/>
            <p style={{ fontSize: 13, color: 'rgba(255,255,255,0.4)', marginTop: 16, lineHeight: 1.65, maxWidth: 280 }}>
              Automação inteligente para empresas que querem vender, atender e operar melhor.
            </p>
          </div>
          {[
            { title: 'Produtos', items: ['Explorador Comercial', 'Bot WhatsApp', 'AOS', 'Bots', 'Estúdio'] },
            { title: 'Empresa', items: ['Sobre', 'Blog', 'Casos de uso', 'Parceiros'] },
            { title: 'Contacto', items: ['filipe@makers.pt', '+351 967 822 668', 'Oeiras, Portugal', 'makers.pt'] },
          ].map((col, i) => (
            <div key={i}>
              <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--o2-cyan)', marginBottom: 16, fontWeight: 500 }}>{col.title}</div>
              {col.items.map(item => (
                <div key={item} style={{ fontSize: 13, color: 'rgba(255,255,255,0.45)', marginBottom: 8, cursor: 'pointer' }}>{item}</div>
              ))}
            </div>
          ))}
        </div>
        <div style={{ borderTop: '1px solid rgba(255,255,255,0.08)', paddingTop: 20, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.25)' }}>© 2026 Makers. Todos os direitos reservados.</div>
          <MakersWordmarkO2 size={14} color="rgba(255,255,255,0.2)" accent="rgba(24,199,212,0.3)"/>
        </div>
      </footer>
    </div>
  );
}

Object.assign(window, { SiteMakersO2 });