function Ecosystem() {
  const products = [
    {
      id: 'metrifiquei',
      name: 'Metrifiquei',
      domain: 'metrifiquei.com.br',
      tag: 'B2B · DADOS · BI',
      tagline: 'Dashboards e atribuição para marketing de performance.',
      blurb: 'Unifica dados de mídia, CRM e vendas em dashboards vivos. Respostas em minutos, não em reuniões.',
      color: '#1E7BFF',
      metric: { k: '7.3k', v: 'dashboards ativos' },
      signals: [
        { k: 'MMM ativo', v: 'ativo' },
        { k: 'Canais integrados', v: '18' },
        { k: 'Latência dashboard', v: '1.4s' },
      ],
      chart: 'bars',
    },
    {
      id: 'tevler',
      name: 'Tevler',
      domain: 'tevler.com',
      tag: 'B2B · GESTÃO PARA AGÊNCIAS',
      tagline: 'Run smart. Decide better. — o hub de gestão estratégica para agências.',
      blurb: 'Centraliza operação, transforma dados em inteligência e libera a liderança para focar em estratégia. Copilot de IA embutido analisa, identifica padrões e antecipa gargalos.',
      color: '#5AC9C7',
      metric: { k: '1 hub', v: 'para decidir melhor' },
      signals: [
        { k: 'Copilot IA', v: 'tempo real' },
        { k: 'Pilares', v: 'Centralização · Clareza' },
        { k: 'Foco', v: 'Agências' },
      ],
      chart: 'flow',
    },
    {
      id: 'pregaai',
      name: 'PregaAI',
      domain: 'pregaai.com',
      tag: 'B2C · APP · IA',
      tagline: 'Estude a Bíblia, prepare sermões e crie devocionais com IA.',
      blurb: 'App para pregadores e estudantes da Bíblia: chat com IA, devocionais, planos de leitura personalizados, gravação de pregações com transcrição e geração de sermões. Disponível na Google Play.',
      color: '#3BD07A',
      metric: { k: 'Android', v: 'Google Play' },
      signals: [
        { k: 'Chat com IA', v: 'passagens, hebraico, grego' },
        { k: 'Sermões gerados por IA', v: 'ilimitados no Premium' },
        { k: 'Plano', v: 'Grátis + Premium' },
      ],
      chart: 'waveform',
    },
  ];

  return (
    <section id="ecosystem" className="section">
      <div className="container">
        <div className="section-head">
          <div className="label">
            <span className="num">§ 02 / ECOSSISTEMA</span>
            <span className="eyebrow"><span className="dot"></span>PRODUTOS EM OPERAÇÃO</span>
          </div>
          <div className="title">
            <h2 className="h2">
              Três plataformas. Um mesmo <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic' }}>sistema operacional</span> de crescimento.
            </h2>
            <p>
              Cada produto resolve uma camada do funil — dado, ação e conversa. Juntos, formam uma infraestrutura de receita automatizada.
            </p>
          </div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {products.map((p, i) => (
            <ProductRow key={p.id} p={p} index={i} />
          ))}
        </div>
      </div>
    </section>
  );
}

function ProductRow({ p, index }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a
      href={`https://${p.domain}`}
      target="_blank"
      rel="noreferrer"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'grid',
        gridTemplateColumns: '80px 1.4fr 1fr 1fr 40px',
        gap: 32,
        padding: '40px 0',
        borderBottom: '1px solid var(--line)',
        alignItems: 'center',
        position: 'relative',
        transition: 'padding .25s ease',
      }}
      className="product-row"
    >
      {/* glow bar on hover */}
      <div style={{
        position: 'absolute',
        left: 0, right: 0, top: 0,
        height: 1,
        background: hover ? p.color : 'transparent',
        boxShadow: hover ? `0 0 18px ${p.color}` : 'none',
        transition: 'all .3s ease',
      }} />

      {/* index */}
      <div className="mono" style={{ color: 'var(--ink-3)', fontSize: 11, letterSpacing: '0.1em' }}>
        {String(index + 1).padStart(2, '0')}
      </div>

      {/* name + domain */}
      <div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, flexWrap: 'wrap' }}>
          <h3 style={{
            fontSize: 'clamp(28px, 3vw, 44px)',
            fontWeight: 500,
            letterSpacing: '-0.03em',
            margin: 0,
            color: hover ? p.color : 'var(--ink)',
            transition: 'color .25s ease',
          }}>{p.name}</h3>
          <span className="mono" style={{ fontSize: 12, color: 'var(--ink-3)' }}>
            {p.domain} ↗
          </span>
        </div>
        <div style={{ color: 'var(--ink-2)', fontSize: 15, marginTop: 8, maxWidth: 420, lineHeight: 1.5 }}>
          {p.tagline}
        </div>
        <span className="mono" style={{
          display: 'inline-block',
          marginTop: 14,
          fontSize: 10,
          padding: '3px 9px',
          borderRadius: 3,
          background: `${p.color}1A`,
          color: p.color,
          letterSpacing: '0.12em',
        }}>
          {p.tag}
        </span>
      </div>

      {/* description + signals */}
      <div>
        <p style={{ color: 'var(--ink-2)', fontSize: 14, margin: 0, lineHeight: 1.55, maxWidth: 340 }}>
          {p.blurb}
        </p>
        <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 6 }}>
          {p.signals.map(s => (
            <div key={s.k} className="mono" style={{
              display: 'flex', justifyContent: 'space-between', gap: 12,
              fontSize: 11, color: 'var(--ink-3)',
              borderBottom: '1px dashed var(--line)',
              paddingBottom: 4,
            }}>
              <span>{s.k}</span>
              <span style={{ color: 'var(--ink)' }}>{s.v}</span>
            </div>
          ))}
        </div>
      </div>

      {/* mini visual */}
      <div style={{
        height: 120,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        background: 'var(--bg-elev)',
        border: '1px solid var(--line)',
        borderRadius: 10,
        position: 'relative',
        overflow: 'hidden',
      }}>
        {p.chart === 'bars' && <BarsViz color={p.color} hover={hover} />}
        {p.chart === 'flow' && <FlowViz color={p.color} hover={hover} />}
        {p.chart === 'waveform' && <WaveViz color={p.color} hover={hover} />}
      </div>

      {/* arrow */}
      <div style={{
        fontSize: 20,
        color: hover ? p.color : 'var(--ink-3)',
        transform: hover ? 'translateX(6px)' : 'none',
        transition: 'transform .25s ease, color .25s ease',
        textAlign: 'right',
      }}>
        →
      </div>

      <style>{`
        @media (max-width: 900px) {
          .product-row { grid-template-columns: 40px 1fr 40px !important; grid-template-rows: auto auto auto; row-gap: 20px; }
          .product-row > *:nth-child(3) { grid-column: 1 / -1; }
          .product-row > *:nth-child(4) { grid-column: 1 / -1; height: 100px; }
          .product-row > *:nth-child(5) { grid-column: 1 / -1; text-align: left; }
        }
      `}</style>
    </a>
  );
}

function BarsViz({ color, hover }) {
  const heights = [30, 50, 38, 72, 58, 90, 76, 95];
  return (
    <svg viewBox="0 0 200 100" width="100%" height="100%" preserveAspectRatio="none" style={{ padding: 14 }}>
      {heights.map((h, i) => (
        <rect key={i}
          x={i * 24 + 4}
          y={100 - h}
          width={14}
          height={h}
          fill={i === heights.length - 1 ? color : `${color}55`}
          style={{
            transition: 'transform .5s ease',
            transform: hover ? `translateY(-${i * 1}px)` : 'none',
            transformOrigin: 'bottom',
          }}
        />
      ))}
      <line x1="0" y1="99" x2="200" y2="99" stroke="var(--line-strong)" strokeWidth="1" />
    </svg>
  );
}

function FlowViz({ color, hover }) {
  return (
    <svg viewBox="0 0 200 100" width="100%" height="100%" preserveAspectRatio="none" style={{ padding: 14 }}>
      <defs>
        <marker id="arr" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto">
          <path d="M0,0 L10,5 L0,10 z" fill={color} />
        </marker>
      </defs>
      {/* nodes */}
      <circle cx="25" cy="30" r="6" fill={color} />
      <circle cx="100" cy="20" r="6" fill={`${color}88`} />
      <circle cx="100" cy="70" r="6" fill={`${color}88`} />
      <circle cx="175" cy="50" r="8" fill={color} stroke={color} strokeWidth="2" fillOpacity="0.2" />
      {/* lines */}
      <path d="M 31 30 Q 65 25 94 20" stroke={color} strokeWidth="1.4" fill="none" markerEnd="url(#arr)" strokeDasharray="2 3" />
      <path d="M 31 30 Q 65 55 94 70" stroke={color} strokeWidth="1.4" fill="none" markerEnd="url(#arr)" strokeDasharray="2 3" />
      <path d="M 106 20 Q 140 35 169 50" stroke={color} strokeWidth="1.4" fill="none" markerEnd="url(#arr)" />
      <path d="M 106 70 Q 140 60 169 50" stroke={color} strokeWidth="1.4" fill="none" markerEnd="url(#arr)" />
      {/* pulse */}
      <circle cx="175" cy="50" r={hover ? 14 : 8} fill="none" stroke={color} strokeWidth="1" opacity={hover ? 0.3 : 0} style={{ transition: 'all .6s ease' }} />
    </svg>
  );
}

function WaveViz({ color, hover }) {
  const points = React.useMemo(() => {
    const n = 40;
    return Array.from({ length: n }).map((_, i) => {
      const x = (i / (n - 1)) * 200;
      const amp = 6 + Math.sin(i * 0.7) * 14 + Math.sin(i * 0.3) * 20;
      return `${x},${50 + Math.sin(i * 0.9) * amp}`;
    }).join(' ');
  }, []);
  return (
    <svg viewBox="0 0 200 100" width="100%" height="100%" preserveAspectRatio="none" style={{ padding: 14 }}>
      <polyline points={points} fill="none" stroke={color} strokeWidth="1.6" strokeLinecap="round" />
      <line x1="0" y1="50" x2="200" y2="50" stroke="var(--line)" strokeDasharray="2 3" />
      <circle cx={hover ? 180 : 100} cy="50" r="3" fill={color} style={{ transition: 'cx .8s ease' }} />
    </svg>
  );
}

window.Ecosystem = Ecosystem;