function Platform() {
  const [active, setActive] = React.useState('Dashboard');
  const items = ['Dashboard', 'Radar', 'Empresas', 'Sites', 'Automação', 'CRM', 'Relatórios', 'Configurações'];
  const ref = React.useRef(null);
  const [mouse, setMouse] = React.useState({ x: 0, y: 0 });

  React.useEffect(() => {
    const onMove = (e) => {
      if (!ref.current) return;
      const r = ref.current.getBoundingClientRect();
      const x = ((e.clientX - r.left) / r.width - 0.5) * 2;
      const y = ((e.clientY - r.top) / r.height - 0.5) * 2;
      setMouse({ x, y });
    };
    const el = ref.current;
    if (el) el.addEventListener('mousemove', onMove);
    return () => { if (el) el.removeEventListener('mousemove', onMove); };
  }, []);

  const parallaxAmt = (window.__tweaks?.parallax ?? 1);

  return (
    <section id="recursos" style={{ padding: '60px 0' }}>
      <div className="container">
        <div className="panel bracketed reveal" style={{
          padding: '40px',
          display: 'grid',
          gridTemplateColumns: '0.95fr 1.4fr',
          gap: 40,
          alignItems: 'center'
        }} data-platform>

          {/* LEFT: copy */}
          <div>
            <div className="eyebrow" style={{ color: 'var(--purple)', marginBottom: 14 }}>
              Seu site com a CodeKid
            </div>
            <h2 className="display" style={{
              fontSize: 'clamp(28px, 3vw, 40px)',
              margin: '0 0 22px',
              lineHeight: 1.15
            }}>
              Uma presença digital<br/>
              para apresentar<br/>
              o <span className="gradient-text">seu negócio</span>.
            </h2>

            <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 28px' }}>
              {[
                'Informações da sua loja em um só lugar',
                'Layout para apresentar seus produtos e serviços',
                'Canais de contato do seu negócio',
                'Textos e imagens revisados com você'
              ].map((t, i) => (
                <li key={i} style={{
                  display: 'flex', alignItems: 'center', gap: 12,
                  padding: '10px 0',
                  fontSize: 14,
                  color: 'rgba(255,255,255,0.85)'
                }}>
                  <span style={{
                    width: 22, height: 22, borderRadius: 5,
                    background: 'rgba(0,255,163,0.12)',
                    border: '1px solid rgba(0,255,163,0.5)',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    color: 'var(--green)',
                    flexShrink: 0
                  }}>
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none">
                      <path d="M5 12l5 5 9-11" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  </span>
                  {t}
                </li>
              ))}
            </ul>

            <a href="#contato" className="btn btn-primary"
               onClick={e => { e.preventDefault(); if (window.scrollToSection) window.scrollToSection('contato'); }}>
              Pedir análise gratuita
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
                <path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </a>
          </div>

          {/* RIGHT: 3D dashboard mockup */}
          <div ref={ref} className="scene" style={{ position: 'relative' }}>
            <div className="layer" style={{
              transform: `rotateY(${mouse.x * -6 * parallaxAmt}deg) rotateX(${mouse.y * 4 * parallaxAmt}deg)`,
              transformStyle: 'preserve-3d',
              transition: 'transform .15s linear'
            }}>
              <div style={{
                background: '#0a0d14',
                border: '1px solid rgba(124, 58, 237, 0.4)',
                borderRadius: 14,
                padding: 16,
                boxShadow: `
                  0 0 0 1px rgba(0,229,255,0.1),
                  0 30px 80px -20px rgba(0,0,0,0.8),
                  0 0 60px rgba(124, 58, 237, 0.15)
                `,
                transformStyle: 'preserve-3d'
              }}>
                {/* Mini header */}
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
                  <CodeKidLogo size={20}/>
                  <div style={{ display: 'flex', gap: 8 }}>
                    {[0,1,2,3,4,5].map(i => (
                      <span key={i} style={{
                        width: 22, height: 22, borderRadius: 5,
                        background: 'rgba(255,255,255,0.04)',
                        border: '1px solid rgba(255,255,255,0.08)'
                      }}/>
                    ))}
                  </div>
                </div>

                <div className="dash-mock" style={{ display: 'grid', gridTemplateColumns: '140px 1fr 180px', gap: 12 }}>
                  {/* Sidebar */}
                  <div style={{
                    background: 'rgba(255,255,255,0.02)',
                    border: '1px solid rgba(124,58,237,0.15)',
                    borderRadius: 8,
                    padding: 8,
                    transform: 'translateZ(10px)'
                  }}>
                    {items.map(it => (
                      <button type="button" aria-pressed={active === it} key={it}
                        onClick={() => setActive(it)}
                        style={{
                          padding: '8px 10px',
                          borderRadius: 6,
                          fontSize: 11,
                          color: active === it ? '#fff' : 'var(--text-dim)',
                          background: active === it ? 'rgba(0,229,255,0.1)' : 'transparent',
                          border: active === it ? '1px solid rgba(0,229,255,0.3)' : '1px solid transparent',
                          marginBottom: 2,
                          cursor: 'pointer',
                          display: 'flex',
                          alignItems: 'center',
                          gap: 8
                        }}
                      >
                        <span style={{
                          width: 4, height: 4, borderRadius: '50%',
                          background: active === it ? 'var(--cyan)' : 'rgba(255,255,255,0.2)'
                        }}/>
                        {it}
                      </button>
                    ))}
                  </div>

                  {/* Center: radar */}
                  <div style={{
                    background: 'rgba(0,229,255,0.03)',
                    border: '1px solid rgba(0,229,255,0.2)',
                    borderRadius: 8,
                    padding: 14,
                    transform: 'translateZ(20px)',
                    minHeight: 280
                  }}>
                    <div style={{ marginBottom: 10 }}>
                      <div style={{ fontSize: 13, fontWeight: 600 }}>Radar de Negócios</div>
                      <div style={{ fontSize: 10, color: 'var(--text-dim)' }}>Interface ilustrativa do estúdio</div>
                    </div>
                    <RadarVisual />
                  </div>

                  {/* Right column: stats */}
                  <div className="dash-mock-stats" style={{ display: 'flex', flexDirection: 'column', gap: 8, transform: 'translateZ(15px)' }}>
                    <StatCard label="Seu negócio" value="Site" sub="prévia ilustrativa" color="var(--cyan)"/>
                    <StatCard label="Seu conteúdo" value="Layout" sub="exemplo visual" color="var(--purple)"/>
                    <a href="#exemplos" className="btn btn-primary" style={{ padding: '10px 14px', fontSize: 11, justifyContent: 'center' }}>Ver exemplos</a>
                  </div>
                </div>
              </div>

              {/* Floating accent chips */}
              <div style={{
                position: 'absolute', top: -16, right: -20,
                background: 'rgba(0, 255, 163, 0.1)',
                border: '1px solid rgba(0, 255, 163, 0.5)',
                borderRadius: 8,
                padding: '6px 12px',
                fontSize: 11,
                color: 'var(--green)',
                fontFamily: 'JetBrains Mono, monospace',
                transform: 'translateZ(50px) rotate(4deg)',
                boxShadow: '0 0 20px rgba(0,255,163,0.3)'
              }}>
                DEMONSTRAÇÃO
              </div>
              <div style={{
                position: 'absolute', bottom: -10, left: -16,
                background: 'rgba(124, 58, 237, 0.1)',
                border: '1px solid rgba(124, 58, 237, 0.5)',
                borderRadius: 8,
                padding: '6px 10px',
                fontSize: 10,
                color: 'var(--purple)',
                fontFamily: 'JetBrains Mono, monospace',
                transform: 'translateZ(40px) rotate(-3deg)'
              }}>
                Dados ilustrativos
              </div>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) {
          [data-platform] { grid-template-columns: 1fr !important; }
        }
        /* mockup do dashboard encolhe no celular (nao vaza a largura da pagina) */
        @media (max-width: 560px) {
          .dash-mock { grid-template-columns: 96px 1fr !important; }
          .dash-mock-stats { display: none !important; }
        }
      `}</style>
    </section>
  );
}

function StatCard({ label, value, sub, color }) {
  return (
    <div style={{
      background: 'rgba(255,255,255,0.02)',
      border: `1px solid ${color === 'var(--cyan)' ? 'rgba(0,229,255,0.25)' : 'rgba(124,58,237,0.25)'}`,
      borderRadius: 8,
      padding: 12,
      textAlign: 'center'
    }}>
      <div style={{ fontSize: 9, color: 'var(--text-dim)', textTransform: 'uppercase', letterSpacing: 1 }}>{label}</div>
      <div style={{ fontFamily: 'Orbitron', fontSize: 24, fontWeight: 700, color: '#fff', margin: '4px 0', textShadow: `0 0 12px ${color}` }}>{value}</div>
      <div style={{ fontSize: 9, color: 'var(--text-dim)' }}>{sub}</div>
    </div>
  );
}

function RadarVisual() {
  // Lots of dots scattered, with sweeping arc and pulses
  const dots = React.useMemo(() => (
    Array.from({ length: 60 }).map(() => ({
      x: 10 + Math.random() * 80,
      y: 10 + Math.random() * 80,
      r: 1 + Math.random() * 2.5,
      delay: Math.random() * 4
    }))
  ), []);

  const speed = window.__tweaks?.radarSpeed ?? 1;

  return (
    <div style={{ position: 'relative', width: '100%', aspectRatio: '1.1 / 1' }}>
      <svg viewBox="0 0 100 100" style={{ width: '100%', height: '100%', position: 'absolute', inset: 0 }}>
        <defs>
          <radialGradient id="rd-bg" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#00E5FF" stopOpacity="0.18"/>
            <stop offset="100%" stopColor="#00E5FF" stopOpacity="0"/>
          </radialGradient>
          <linearGradient id="rd-sweep" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stopColor="#00E5FF" stopOpacity="0"/>
            <stop offset="100%" stopColor="#00E5FF" stopOpacity="0.7"/>
          </linearGradient>
        </defs>

        <rect width="100" height="100" fill="url(#rd-bg)"/>
        {/* Grid */}
        <g stroke="#00E5FF" strokeOpacity="0.08" strokeWidth="0.2">
          {[...Array(11)].map((_, i) => <line key={`h${i}`} x1="0" y1={i * 10} x2="100" y2={i * 10}/>)}
          {[...Array(11)].map((_, i) => <line key={`v${i}`} x1={i * 10} y1="0" x2={i * 10} y2="100"/>)}
        </g>
        {/* Rings */}
        {[15, 28, 42].map(r => (
          <circle key={r} cx="50" cy="50" r={r} stroke="#00E5FF" strokeWidth="0.3" fill="none" opacity="0.25"/>
        ))}
        {/* Sweep */}
        <g style={{ transformOrigin: '50px 50px', animation: `radar-sweep ${4/speed}s linear infinite` }}>
          <path d="M50 50 L50 8 A42 42 0 0 1 92 50 Z" fill="url(#rd-sweep)" opacity="0.5"/>
        </g>
        {/* Center pulse */}
        <circle cx="50" cy="50" r="2.5" fill="#00E5FF"/>
        <circle cx="50" cy="50" r="2.5" fill="none" stroke="#00E5FF" strokeWidth="0.5">
          <animate attributeName="r" from="2" to="20" dur="2.5s" repeatCount="indefinite"/>
          <animate attributeName="opacity" from="1" to="0" dur="2.5s" repeatCount="indefinite"/>
        </circle>
        {/* Dots = businesses */}
        {dots.map((d, i) => (
          <circle key={i} cx={d.x} cy={d.y} r={d.r} fill="#00E5FF" opacity="0.7">
            <animate attributeName="opacity" values="0.3;1;0.3" dur="3s" begin={`${d.delay}s`} repeatCount="indefinite"/>
          </circle>
        ))}
      </svg>
    </div>
  );
}

window.Platform = Platform;