/* Makers — Site Explorador Comercial · Opção 2 */

function SiteExploradorO2() {
  const SectionLabel = ({ children, light }) => (
    <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: light ? 'rgba(255,255,255,0.5)' : 'var(--o2-explorador)', marginBottom: 16, fontWeight: 500 }}>{children}</div>
  );

  const companies = [
    { name: 'Turismo Algarve Lda', sector: 'Turismo', location: 'Albufeira', score: 94, employees: '12–50', revenue: '€500k–1M', tag: 'HOT' },
    { name: 'Sete Mares Viagens', sector: 'Turismo', location: 'Porto', score: 87, employees: '5–12', revenue: '€200k–500k', tag: 'QUENTE' },
    { name: 'Sun & Sea Tours', sector: 'Turismo', location: 'Faro', score: 81, employees: '10–25', revenue: '€300k–600k', tag: null },
    { name: 'Horizonte Viagens', sector: 'Turismo', location: 'Lisboa', score: 76, employees: '5–10', revenue: '€100k–300k', tag: null },
    { name: 'Atlântico Premium', sector: 'Turismo', location: 'Cascais', score: 72, employees: '20–60', revenue: '€800k–2M', tag: 'NOVO' },
  ];

  const features = [
    { icon: '◉', title: 'Filtros inteligentes', desc: 'Segmente por sector, localização, dimensão, faturação e sinais de intenção de compra.' },
    { icon: '◆', title: 'Dados comerciais', desc: 'Contactos, email, telefone, LinkedIn e indicadores de actividade digital actualizados.' },
    { icon: '▶', title: 'Score de oportunidade', desc: 'Algoritmo proprietário que pontua cada empresa com base no perfil de cliente ideal.' },
    { icon: '→', title: 'Integração directa', desc: 'Exporte para o Bot WhatsApp, AOS ou CRM com um clique. Zero fricção entre ferramentas.' },
  ];

  const pricingPlans = [
    { name: 'Starter', price: '€49', period: '/mês', leads: '100 empresas/mês', color: 'var(--o2-line)', textColor: 'var(--o2-ink)' },
    { name: 'Pro', price: '€149', period: '/mês', leads: '500 empresas/mês', color: 'var(--o2-explorador)', textColor: '#fff', highlight: true },
    { name: 'Scale', price: '€349', period: '/mês', leads: 'Ilimitado', color: 'var(--o2-petrol)', textColor: '#fff' },
  ];

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

      {/* ── NAV ── */}
      <nav style={{ background: 'var(--o2-white)', borderBottom: '1px solid var(--o2-line)', padding: '0 48px', height: 64, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
          <MakersLogoO2 size={32} color="var(--o2-ink)" markBg="var(--o2-petrol)" accent="var(--o2-cyan)"/>
          <div style={{ width: 1, height: 20, background: 'var(--o2-line)' }}/>
          <MakersLogoO2 size={28} color="var(--o2-ink)" markBg="#22C55E" markColor="#fff" accent="#22C55E" product="explorador"/>
        </div>
        <div style={{ display: 'flex', gap: 12 }}>
          <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--o2-ink)', cursor: 'pointer', padding: '8px 16px' }}>Ver demo</div>
          <div style={{ background: '#22C55E', color: '#fff', borderRadius: 8, padding: '9px 20px', fontSize: 14, fontWeight: 600, cursor: 'pointer' }}>Começar grátis</div>
        </div>
      </nav>

      {/* ── HERO ── */}
      <section style={{ background: 'var(--o2-petrol)', padding: '80px 48px 72px', position: 'relative', overflow: 'hidden' }}>
        {/* Abstract map/radar bg */}
        <svg style={{ position: 'absolute', right: 0, top: 0, width: '55%', height: '100%', opacity: 0.08, pointerEvents: 'none' }} viewBox="0 0 700 500" preserveAspectRatio="xMidYMid slice">
          {[120, 90, 60, 30].map(r => <circle key={r} cx="500" cy="250" r={r * 2} stroke="var(--o2-explorador)" strokeWidth="1" fill="none"/>)}
          {[[500,250],[420,180],[560,310],[390,300],[530,170],[460,330]].map(([cx,cy],i) => (
            <circle key={i} cx={cx} cy={cy} r={i===0?8:5} fill={i===0?"var(--o2-explorador)":i<3?"var(--o2-cyan)":"rgba(255,255,255,0.3)"}/>
          ))}
          <path d="M350 250 L420 180 M350 250 L560 310 M350 250 L390 300" stroke="var(--o2-explorador)" strokeWidth="0.8" opacity={0.5}/>
        </svg>
        <div style={{ position: 'relative', maxWidth: 680 }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'rgba(34,197,94,0.15)', borderRadius: 99, padding: '6px 14px', marginBottom: 24, border: '1px solid rgba(34,197,94,0.3)' }}>
            <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#22C55E', display: 'inline-block' }}/>
            <span style={{ fontFamily: 'var(--o2-mono)', fontSize: 11, color: '#22C55E', letterSpacing: '0.1em', textTransform: 'uppercase' }}>Explorador Comercial · makers</span>
          </div>
          <h1 style={{ fontFamily: 'var(--o2-sans)', fontSize: 64, fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 1.0, margin: '0 0 24px', color: '#fff' }}>
            Encontre empresas<br/>com perfil para <span style={{ color: '#22C55E' }}>comprar</span><br/>antes de começar<br/>a vender.
          </h1>
          <p style={{ fontSize: 17, lineHeight: 1.65, color: 'rgba(255,255,255,0.6)', margin: '0 0 36px', maxWidth: 520 }}>
            Base de dados de empresas portuguesas enriquecida com dados comerciais, score de oportunidade e integração directa com o seu processo de vendas.
          </p>
          <div style={{ display: 'flex', gap: 12 }}>
            <div style={{ background: '#22C55E', color: '#fff', borderRadius: 10, padding: '14px 28px', fontSize: 15, fontWeight: 700, cursor: 'pointer' }}>Começar grátis · 14 dias</div>
            <div style={{ background: 'rgba(255,255,255,0.08)', color: '#fff', border: '1px solid rgba(255,255,255,0.15)', borderRadius: 10, padding: '14px 22px', fontSize: 15, fontWeight: 600, cursor: 'pointer' }}>Ver demo ao vivo</div>
          </div>
        </div>
      </section>

      {/* ── FILTER UI PREVIEW ── */}
      <section style={{ padding: '72px 48px', background: 'var(--o2-paper)' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <SectionLabel>Filtros inteligentes</SectionLabel>
          <h2 style={{ fontFamily: 'var(--o2-sans)', fontSize: 40, fontWeight: 800, letterSpacing: '-0.035em', margin: '0 0 40px', color: 'var(--o2-ink)', maxWidth: 480 }}>
            Segmente o mercado com precisão
          </h2>

          {/* Mock filter panel */}
          <div style={{ background: 'var(--o2-white)', borderRadius: 16, border: '1px solid var(--o2-line)', overflow: 'hidden', boxShadow: '0 4px 24px rgba(15,47,58,0.08)' }}>
            {/* Top bar */}
            <div style={{ background: 'var(--o2-petrol)', padding: '14px 24px', display: 'flex', alignItems: 'center', gap: 16 }}>
              <MakersLogoO2 size={24} color="#fff" markBg="#22C55E" markColor="#fff" accent="#22C55E" product="explorador"/>
              <div style={{ flex: 1, background: 'rgba(255,255,255,0.08)', borderRadius: 6, padding: '6px 12px', fontSize: 13, color: 'rgba(255,255,255,0.4)', display: 'flex', alignItems: 'center', gap: 8 }}>
                <span>⊙</span> Pesquisar empresas...
              </div>
              <div style={{ background: '#22C55E', color: '#fff', borderRadius: 6, padding: '7px 14px', fontSize: 12, fontWeight: 600, cursor: 'pointer' }}>Exportar lista</div>
            </div>

            <div style={{ display: 'flex' }}>
              {/* Filters sidebar */}
              <div style={{ width: 240, borderRight: '1px solid var(--o2-line)', padding: 20 }}>
                <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--o2-ink)', marginBottom: 16, letterSpacing: '-0.01em' }}>Filtros activos</div>
                {[
                  { label: 'Sector', val: 'Turismo', color: '#22C55E' },
                  { label: 'Região', val: 'Algarve', color: 'var(--o2-cyan)' },
                  { label: 'Dimensão', val: '5–50 emp.', color: 'var(--o2-aos)' },
                  { label: 'Score mín.', val: '> 70', color: 'var(--o2-petrol)' },
                ].map((f, i) => (
                  <div key={i} style={{ background: 'var(--o2-paper)', borderRadius: 8, padding: '8px 12px', marginBottom: 8, display: 'flex', justifyContent: 'space-between', alignItems: 'center', border: `1px solid ${f.color}22` }}>
                    <span style={{ fontSize: 11, color: 'var(--o2-muted)' }}>{f.label}</span>
                    <span style={{ fontSize: 12, fontWeight: 600, color: f.color }}>{f.val}</span>
                  </div>
                ))}
                <div style={{ marginTop: 16, fontSize: 12, color: '#22C55E', fontWeight: 600, cursor: 'pointer' }}>+ Adicionar filtro</div>
              </div>

              {/* Results list */}
              <div style={{ flex: 1, padding: 20 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
                  <div style={{ fontSize: 13, color: 'var(--o2-muted)' }}>
                    <span style={{ fontFamily: 'var(--o2-mono)', fontWeight: 600, color: 'var(--o2-ink)' }}>247 empresas</span> encontradas
                  </div>
                  <div style={{ display: 'flex', gap: 8 }}>
                    <div style={{ background: 'var(--o2-petrol)', color: '#fff', borderRadius: 6, padding: '6px 14px', fontSize: 12, fontWeight: 600, cursor: 'pointer' }}>Contactar via WhatsApp</div>
                    <div style={{ background: 'var(--o2-green-pale)', color: '#22C55E', border: '1px solid #22C55E44', borderRadius: 6, padding: '6px 14px', fontSize: 12, fontWeight: 600, cursor: 'pointer' }}>Enviar para AOS</div>
                  </div>
                </div>

                {/* Table header */}
                <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 80px 80px', gap: 0, padding: '6px 12px', background: 'var(--o2-paper)', borderRadius: '8px 8px 0 0', marginBottom: 2 }}>
                  {['Empresa', 'Sector', 'Localização', 'Dimensão', 'Revenue', 'Score'].map(h => (
                    <div key={h} style={{ fontFamily: 'var(--o2-mono)', fontSize: 10, color: 'var(--o2-muted)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>{h}</div>
                  ))}
                </div>

                {companies.map((c, i) => (
                  <div key={i} style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 80px 80px', gap: 0, padding: '12px', background: i % 2 === 0 ? 'var(--o2-white)' : 'var(--o2-paper)', borderRadius: 0, alignItems: 'center', borderBottom: '1px solid var(--o2-line)' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <div style={{ width: 28, height: 28, background: 'var(--o2-petrol)', borderRadius: 6, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                        <span style={{ color: 'var(--o2-cyan)', fontSize: 11, fontWeight: 700 }}>{c.name[0]}</span>
                      </div>
                      <div>
                        <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--o2-ink)' }}>{c.name}</div>
                        {c.tag && <span style={{ background: c.tag === 'HOT' ? '#22C55E22' : c.tag === 'QUENTE' ? '#F59E0B22' : 'var(--o2-cyan-pale)', color: c.tag === 'HOT' ? '#22C55E' : c.tag === 'QUENTE' ? 'var(--o2-aos)' : 'var(--o2-cyan-2)', fontSize: 9, fontFamily: 'var(--o2-mono)', fontWeight: 700, borderRadius: 4, padding: '1px 6px', letterSpacing: '0.06em' }}>{c.tag}</span>}
                      </div>
                    </div>
                    <div style={{ fontSize: 12, color: 'var(--o2-muted)' }}>{c.sector}</div>
                    <div style={{ fontSize: 12, color: 'var(--o2-muted)' }}>{c.location}</div>
                    <div style={{ fontSize: 12, color: 'var(--o2-muted)' }}>{c.employees}</div>
                    <div style={{ fontSize: 11, color: 'var(--o2-muted)', fontFamily: 'var(--o2-mono)' }}>{c.revenue}</div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                      <div style={{ flex: 1, height: 4, background: 'var(--o2-line)', borderRadius: 99 }}>
                        <div style={{ height: '100%', width: `${c.score}%`, background: c.score > 90 ? '#22C55E' : c.score > 80 ? 'var(--o2-cyan)' : 'var(--o2-aos)', borderRadius: 99 }}/>
                      </div>
                      <span style={{ fontFamily: 'var(--o2-mono)', fontSize: 11, fontWeight: 600, color: c.score > 90 ? '#22C55E' : 'var(--o2-ink)' }}>{c.score}</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ── FEATURES ── */}
      <section style={{ padding: '72px 48px', background: 'var(--o2-white)' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <SectionLabel>Funcionalidades</SectionLabel>
          <h2 style={{ fontFamily: 'var(--o2-sans)', fontSize: 40, fontWeight: 800, letterSpacing: '-0.035em', margin: '0 0 48px', color: 'var(--o2-ink)', maxWidth: 480 }}>
            Dados que viram acção comercial
          </h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
            {features.map((f, i) => (
              <div key={i} style={{ background: 'var(--o2-green-pale)', borderRadius: 14, padding: 24, border: '1px solid #22C55E22' }}>
                <div style={{ width: 36, height: 36, background: '#22C55E', borderRadius: 9, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
                  <span style={{ color: '#fff', fontSize: 14 }}>{f.icon}</span>
                </div>
                <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--o2-ink)', marginBottom: 8 }}>{f.title}</div>
                <div style={{ fontSize: 13, lineHeight: 1.65, color: 'var(--o2-muted)' }}>{f.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── FLOW ── */}
      <section style={{ padding: '72px 48px', background: 'var(--o2-paper)' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <SectionLabel>Fluxo de prospecção</SectionLabel>
          <h2 style={{ fontFamily: 'var(--o2-sans)', fontSize: 40, fontWeight: 800, letterSpacing: '-0.035em', margin: '0 0 40px', color: 'var(--o2-ink)', maxWidth: 500 }}>
            Do mercado ao contacto em minutos
          </h2>
          <div style={{ display: 'flex', gap: 0, alignItems: 'stretch' }}>
            {[
              { step: '1', label: 'Defina o perfil', desc: 'Sector, região, dimensão e critérios personalizados', color: '#22C55E', bg: 'var(--o2-green-pale)' },
              { step: '2', label: 'Descubra empresas', desc: 'O Explorador encontra e pontua automaticamente', color: 'var(--o2-cyan)', bg: 'var(--o2-cyan-pale)' },
              { step: '3', label: 'Analise os dados', desc: 'Contactos, score e sinais de oportunidade', color: 'var(--o2-aos)', bg: 'var(--o2-amber-pale)' },
              { step: '4', label: 'Active a campanha', desc: 'WhatsApp Bot inicia contacto automático', color: 'var(--o2-whatsapp)', bg: '#f0fdf4' },
              { step: '5', label: 'Gerencie no AOS', desc: 'Acompanhe follow-ups e resultados em tempo real', color: 'var(--o2-petrol)', bg: 'var(--o2-petrol-pale)' },
            ].map((s, i) => (
              <React.Fragment key={i}>
                <div style={{ flex: 1, background: s.bg, borderRadius: 12, padding: '24px 20px', display: 'flex', flexDirection: 'column', gap: 12, border: `1px solid ${s.color}22` }}>
                  <div style={{ width: 32, height: 32, borderRadius: '50%', background: s.color, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <span style={{ color: '#fff', fontSize: 13, fontWeight: 700 }}>{s.step}</span>
                  </div>
                  <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--o2-ink)' }}>{s.label}</div>
                  <div style={{ fontSize: 12, lineHeight: 1.6, color: 'var(--o2-muted)' }}>{s.desc}</div>
                </div>
                {i < 4 && <div style={{ display: 'flex', alignItems: 'center', padding: '0 6px', flexShrink: 0 }}><span style={{ color: 'var(--o2-muted)', fontSize: 16 }}>→</span></div>}
              </React.Fragment>
            ))}
          </div>
        </div>
      </section>

      {/* ── PRICING ── */}
      <section style={{ padding: '72px 48px', background: 'var(--o2-white)' }}>
        <div style={{ maxWidth: 800, margin: '0 auto', textAlign: 'center' }}>
          <SectionLabel>Pricing</SectionLabel>
          <h2 style={{ fontFamily: 'var(--o2-sans)', fontSize: 40, fontWeight: 800, letterSpacing: '-0.035em', margin: '0 0 48px', color: 'var(--o2-ink)' }}>
            Simples. Sem surpresas.
          </h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
            {pricingPlans.map((p, i) => (
              <div key={i} style={{ background: p.highlight ? '#22C55E' : p.color === 'var(--o2-petrol)' ? 'var(--o2-petrol)' : 'var(--o2-paper)', borderRadius: 14, padding: 28, border: p.highlight ? 'none' : '1px solid var(--o2-line)', position: 'relative' }}>
                {p.highlight && <div style={{ position: 'absolute', top: -10, left: '50%', transform: 'translateX(-50%)', background: '#16A34A', color: '#fff', borderRadius: 99, padding: '3px 12px', fontSize: 10, fontWeight: 700, fontFamily: 'var(--o2-mono)', letterSpacing: '0.08em', whiteSpace: 'nowrap' }}>MAIS POPULAR</div>}
                <div style={{ fontSize: 14, fontWeight: 700, color: p.textColor, marginBottom: 16, opacity: p.highlight ? 1 : 0.7 }}>{p.name}</div>
                <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 40, fontWeight: 700, color: p.textColor, lineHeight: 1 }}>{p.price}</div>
                <div style={{ fontSize: 12, color: p.textColor, opacity: 0.6, marginBottom: 20, marginTop: 2 }}>{p.period}</div>
                <div style={{ fontSize: 13, color: p.textColor, opacity: 0.8, marginBottom: 24, fontWeight: 500 }}>{p.leads}</div>
                <div style={{ background: p.highlight ? '#16A34A' : p.color === 'var(--o2-petrol)' ? 'var(--o2-cyan)' : 'var(--o2-petrol)', color: p.highlight ? '#fff' : p.color === 'var(--o2-petrol)' ? 'var(--o2-petrol)' : '#fff', borderRadius: 8, padding: '10px 0', fontSize: 13, fontWeight: 700, textAlign: 'center', cursor: 'pointer' }}>
                  Começar →
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── CTA ── */}
      <section style={{ background: 'var(--o2-petrol)', padding: '72px 48px', textAlign: 'center' }}>
        <SectionLabel light>Começar agora</SectionLabel>
        <h2 style={{ fontFamily: 'var(--o2-sans)', fontSize: 48, fontWeight: 800, letterSpacing: '-0.04em', margin: '0 0 20px', color: '#fff', lineHeight: 1.05 }}>
          A sua agência responde<br/><span style={{ color: '#22C55E' }}>antes da concorrência?</span>
        </h2>
        <p style={{ fontSize: 16, color: 'rgba(255,255,255,0.55)', margin: '0 auto 36px', maxWidth: 440, lineHeight: 1.6 }}>
          14 dias grátis, sem cartão de crédito. Comece a encontrar oportunidades hoje.
        </p>
        <div style={{ background: '#22C55E', color: '#fff', borderRadius: 10, padding: '15px 36px', fontSize: 15, fontWeight: 700, display: 'inline-block', cursor: 'pointer' }}>
          Começar grátis · 14 dias
        </div>
      </section>

      {/* Footer mini */}
      <footer style={{ background: 'var(--o2-petrol-2)', padding: '24px 48px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <MakersLogoO2 size={28} color="#fff" markBg="#22C55E" markColor="#fff" accent="#22C55E" product="explorador"/>
        <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.3)' }}>© 2026 Makers · explorador.makers.pt</div>
      </footer>
    </div>
  );
}

Object.assign(window, { SiteExploradorO2 });