/* Makers — Sistema de Produtos · Opção 2 */

function ProductSystemArtboardO2() {
  const stages = [
    { id: 'mercado',    label: 'Mercado',    icon: '◆', color: '#22C55E', bg: 'var(--o2-green-pale)',  product: 'Explorador', desc: 'Encontra empresas com perfil de compra', sub: '247 empresas encontradas' },
    { id: 'lead',       label: 'Lead',       icon: '◎', color: '#22C55E', bg: 'var(--o2-green-pale)',  product: 'Explorador', desc: 'Qualifica e pontua automaticamente',     sub: 'Score 87–94 · 47 leads activos' },
    { id: 'conversa',   label: 'Conversa',   icon: '◉', color: '#16A34A', bg: '#f0fdf4',               product: 'WhatsApp Bot', desc: 'Inicia e acompanha o contacto',        sub: 'Resposta < 2 min · 24/7' },
    { id: 'proposta',   label: 'Proposta',   icon: '▶', color: '#18C7D4', bg: 'var(--o2-cyan-pale)',   product: 'Bots / Makers', desc: 'Gera e envia proposta automática',   sub: 'Ref. 2026-041 · €2.400' },
    { id: 'operacao',   label: 'Operação',   icon: '▣', color: '#F59E0B', bg: 'var(--o2-amber-pale)', product: 'AOS',          desc: 'Tickets, follow-ups e tarefas',       sub: 'TK-0041 · Segue amanhã 10h' },
    { id: 'resultado',  label: 'Resultado',  icon: '◇', color: 'var(--o2-petrol)', bg: 'var(--o2-petrol-pale)', product: 'Dashboard', desc: 'Métricas, pipeline e conversão', sub: '+32% conversão este mês' },
  ];

  const products = [
    { name: 'Explorador Comercial', color: '#22C55E', bg: 'var(--o2-green-pale)', stages: ['mercado', 'lead'], desc: 'Encontra e qualifica oportunidades de mercado com base em dados reais.', slug: 'explorador', markColor: '#fff' },
    { name: 'Bot WhatsApp',         color: '#16A34A', bg: '#f0fdf4',               stages: ['conversa'],       desc: 'Inicia contacto, qualifica pedidos e encaminha para a equipa certa.',   slug: 'whatsapp',  markColor: '#fff' },
    { name: 'AOS',                  color: '#F59E0B', bg: 'var(--o2-amber-pale)', stages: ['operacao'],       desc: 'Organiza follow-ups, tickets e tarefas com acompanhamento por IA.',      slug: 'aos',       markColor: '#fff' },
    { name: 'Bots',                 color: '#18C7D4', bg: 'var(--o2-cyan-pale)',   stages: ['proposta'],       desc: 'Automatiza conversas e tarefas recorrentes em qualquer ponto do fluxo.',  slug: 'bots',      markColor: 'var(--o2-petrol)' },
  ];

  return (
    <div className="o2" style={{ background: 'var(--o2-paper)', padding: 56, width: '100%', height: '100%' }}>
      <O2Eyebrow>08 · Sistema de produtos · família Makers</O2Eyebrow>
      <h2 style={{ fontFamily: 'var(--o2-sans)', fontSize: 36, fontWeight: 800, letterSpacing: '-0.03em', margin: '0 0 8px', color: 'var(--o2-ink)' }}>
        Da oportunidade ao resultado — um sistema coerente
      </h2>
      <p style={{ fontSize: 15, color: 'var(--o2-muted)', margin: '0 0 48px', lineHeight: 1.6 }}>
        Cada produto actua num ponto específico da jornada comercial e passa o contexto para o seguinte.
      </p>

      {/* Flow diagram */}
      <div style={{ background: 'var(--o2-white)', borderRadius: 16, padding: 32, border: '1px solid var(--o2-line)', marginBottom: 32 }}>
        <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--o2-muted)', marginBottom: 24 }}>Fluxo comercial completo</div>
        <div style={{ position: 'relative' }}>
          {/* Connecting line */}
          <div style={{ position: 'absolute', top: 28, left: 40, right: 40, height: 2, background: 'linear-gradient(90deg, #22C55E, #16A34A, #18C7D4, #F59E0B, var(--o2-petrol))', borderRadius: 99, opacity: 0.3 }}/>
          <div style={{ display: 'flex', gap: 0, position: 'relative', zIndex: 1 }}>
            {stages.map((s, i) => (
              <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 56, height: 56, background: s.color, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: `0 0 0 4px ${s.color}22` }}>
                  <span style={{ color: '#fff', fontSize: 20 }}>{s.icon}</span>
                </div>
                <div style={{ textAlign: 'center' }}>
                  <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--o2-ink)', marginBottom: 4 }}>{s.label}</div>
                  <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 9, color: s.color, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 4, fontWeight: 600 }}>{s.product}</div>
                  <div style={{ fontSize: 11, color: 'var(--o2-muted)', lineHeight: 1.5, maxWidth: 120, textAlign: 'center' }}>{s.desc}</div>
                </div>
                <div style={{ background: s.bg, border: `1px solid ${s.color}33`, borderRadius: 8, padding: '6px 10px', textAlign: 'center' }}>
                  <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 10, color: s.color, fontWeight: 600 }}>{s.sub}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Product cards */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 32 }}>
        {products.map((p, i) => (
          <div key={i} style={{ background: p.bg, borderRadius: 14, padding: 24, border: `1px solid ${p.color}33` }}>
            <MakersLogoO2 size={32} color="var(--o2-ink)" markBg={p.color} markColor={p.markColor} accent={p.color} product={p.slug}/>
            <div style={{ marginTop: 16, marginBottom: 12 }}>
              {p.stages.map(sid => {
                const st = stages.find(s => s.id === sid);
                return (
                  <div key={sid} style={{ display: 'inline-flex', alignItems: 'center', gap: 4, background: `${st.color}22`, borderRadius: 6, padding: '3px 8px', marginRight: 6, marginBottom: 6 }}>
                    <span style={{ fontSize: 9, color: st.color }}>{st.icon}</span>
                    <span style={{ fontFamily: 'var(--o2-mono)', fontSize: 9, color: st.color, fontWeight: 600, letterSpacing: '0.06em' }}>{st.label.toUpperCase()}</span>
                  </div>
                );
              })}
            </div>
            <div style={{ fontSize: 13, lineHeight: 1.6, color: 'var(--o2-muted)' }}>{p.desc}</div>
          </div>
        ))}
      </div>

      {/* Integration row */}
      <div style={{ background: 'var(--o2-petrol)', borderRadius: 14, padding: 28, display: 'flex', alignItems: 'center', gap: 32 }}>
        <MakersLogoO2 size={44} color="#fff" markBg="var(--o2-cyan)" markColor="var(--o2-petrol)" accent="var(--o2-petrol)"/>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 10, color: 'var(--o2-cyan)', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 8 }}>Sistema integrado</div>
          <div style={{ fontSize: 18, fontWeight: 700, color: '#fff', marginBottom: 8, letterSpacing: '-0.02em' }}>
            Explorador encontra · WhatsApp conversa · AOS organiza
          </div>
          <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.55)', lineHeight: 1.6 }}>
            Os três produtos partilham contexto, dados e histórico de cliente. Uma plataforma, um fluxo, resultados mensuráveis.
          </div>
        </div>
        <div style={{ display: 'flex', gap: 10 }}>
          {[
            { slug: 'explorador', color: '#22C55E', markColor: '#fff' },
            { slug: 'whatsapp',   color: '#16A34A', markColor: '#fff' },
            { slug: 'aos',        color: '#F59E0B', markColor: '#fff' },
          ].map((p, i) => (
            <MakersMarkO2 key={i} size={44} bg={p.color} accent="rgba(255,255,255,0.2)" radius={10}/>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ProductSystemArtboardO2 });