function Features() {
  const items = [
    {
      title: 'CONHECEMOS\nSEU NEGÓCIO',
      desc: 'Conte sobre sua loja e o que você oferece',
      color: 'var(--cyan)',
      icon: (
        <svg viewBox="0 0 64 64" fill="none">
          <circle cx="32" cy="32" r="26" stroke="currentColor" strokeWidth="1.5" opacity="0.4"/>
          <circle cx="32" cy="32" r="18" stroke="currentColor" strokeWidth="1.5" opacity="0.6"/>
          <circle cx="32" cy="32" r="10" stroke="currentColor" strokeWidth="1.5" opacity="0.8"/>
          <circle cx="32" cy="32" r="3" fill="currentColor"/>
          <line x1="32" y1="32" x2="50" y2="20" stroke="currentColor" strokeWidth="1.5"/>
          <circle cx="50" cy="20" r="2.5" fill="currentColor"/>
        </svg>
      )
    },
    {
      title: 'CRIAMOS PRESENÇA\nDIGITAL COM IA',
      desc: 'Sites completos, rápidos e otimizados',
      color: 'var(--purple)',
      icon: (
        <svg viewBox="0 0 64 64" fill="none">
          <rect x="14" y="14" width="36" height="36" rx="6" stroke="currentColor" strokeWidth="1.5"/>
          <text x="32" y="38" textAnchor="middle" fontFamily="Orbitron" fontSize="14" fontWeight="700" fill="currentColor">IA</text>
          <line x1="14" y1="14" x2="22" y2="14" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"/>
          <line x1="50" y1="50" x2="42" y2="50" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"/>
        </svg>
      )
    },
    {
      title: 'FACILITAMOS\nO CONTATO',
      desc: 'Apresente seus canais de atendimento',
      color: 'var(--cyan)',
      icon: (
        <svg viewBox="0 0 64 64" fill="none">
          <path d="M34 8 L18 36 L30 36 L26 56 L46 28 L34 28 Z" stroke="currentColor" strokeWidth="1.5" fill="currentColor" fillOpacity="0.15"/>
        </svg>
      )
    },
    {
      title: 'APRESENTAMOS\nSUA LOJA',
      desc: 'Seus produtos e serviços em um só lugar',
      color: 'var(--green)',
      icon: (
        <svg viewBox="0 0 64 64" fill="none">
          <line x1="10" y1="50" x2="54" y2="50" stroke="currentColor" strokeWidth="1.5"/>
          <rect x="14" y="38" width="6" height="12" fill="currentColor" fillOpacity="0.5"/>
          <rect x="24" y="28" width="6" height="22" fill="currentColor" fillOpacity="0.7"/>
          <rect x="34" y="20" width="6" height="30" fill="currentColor" fillOpacity="0.85"/>
          <rect x="44" y="12" width="6" height="38" fill="currentColor"/>
          <path d="M14 40 L24 30 L34 22 L44 14" stroke="currentColor" strokeWidth="1.5" fill="none" opacity="0.6"/>
        </svg>
      )
    }
  ];

  return (
    <section id="solucoes" style={{ padding: '40px 0' }}>
      <div className="container">
        <div className="panel bracketed reveal" style={{
          padding: '36px 40px',
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 28,
          alignItems: 'flex-start'
        }} data-grid>
          {items.map((item, i) => (
            <FeatureItem key={i} {...item} delay={i * 0.05}/>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 920px) {
          [data-grid] { grid-template-columns: repeat(2, 1fr) !important; }
        }
        @media (max-width: 560px) {
          [data-grid] { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function FeatureItem({ title, desc, color, icon, delay }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'flex',
        gap: 16,
        alignItems: 'flex-start',
        transition: 'transform .3s ease',
        transform: hover ? 'translateY(-4px)' : 'translateY(0)',
        cursor: 'default'
      }}
    >
      <div style={{
        width: 56, height: 56, flexShrink: 0,
        color,
        filter: `drop-shadow(0 0 ${hover ? 14 : 6}px ${color})`,
        transition: 'filter .3s, transform .4s',
        transform: hover ? 'rotate(8deg) scale(1.08)' : 'rotate(0)'
      }}>
        {icon}
      </div>
      <div>
        <h4 style={{
          margin: 0,
          fontFamily: 'Orbitron, sans-serif',
          fontSize: 13,
          fontWeight: 700,
          letterSpacing: '0.08em',
          color: '#fff',
          whiteSpace: 'pre-line',
          lineHeight: 1.35
        }}>{title}</h4>
        <p style={{
          margin: '8px 0 0',
          fontSize: 12,
          color: 'var(--text-dim)',
          lineHeight: 1.5
        }}>{desc}</p>
      </div>
    </div>
  );
}

window.Features = Features;