const whyStyles = {
  section: {
    background: 'var(--dark-grad)',
    color: 'white', position: 'relative', overflow: 'hidden',
  },
  circuitBg: {
    position: 'absolute', inset: 0, opacity: .08,
    backgroundImage: `
      linear-gradient(rgba(255,255,255,1) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,1) 1px, transparent 1px)
    `,
    backgroundSize: '72px 72px',
    mask: 'radial-gradient(ellipse at center, black 20%, transparent 70%)',
    WebkitMask: 'radial-gradient(ellipse at center, black 20%, transparent 70%)',
  },
  glow: {
    position: 'absolute', top: -200, left: -200, width: 600, height: 600,
    background: 'radial-gradient(circle, rgba(138,149,163,.2) 0%, transparent 60%)',
  },
  header: { textAlign: 'center', marginBottom: 'clamp(32px, 6vw, 56px)', maxWidth: 720, margin: '0 auto clamp(32px, 6vw, 56px)', position: 'relative' },
  grid: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 'var(--grid-gap, 18px)', position: 'relative' },
  card: {
    background: 'rgba(255,255,255,.06)', backdropFilter: 'blur(8px)',
    border: '1px solid rgba(255,255,255,.1)',
    borderRadius: 18, padding: 'var(--card-pad, 24px)',
    transition: 'all .25s ease',
  },
  iconWrap: {
    width: 52, height: 52, borderRadius: 14,
    background: 'rgba(255,255,255,.1)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    marginBottom: 18,
  },


  eyebrowDark: {
    display: 'inline-flex', alignItems: 'center', gap: 10,
    background: 'rgba(255,255,255,.08)', padding: '8px 14px', borderRadius: 999,
    fontSize: 13, fontWeight: 600, color: 'rgba(255,255,255,.9)',
    border: '1px solid rgba(255,255,255,.12)',
    marginBottom: 20,
  },
};

const whys = [
  { icon: <IconShield size={24} color="#8EB5FF"/>, title: 'Diagnóstico técnico', text: 'Analisamos causa, risco e solução antes de mexer no equipamento.' },
  { icon: <IconBolt size={24} color="#8EB5FF"/>, title: 'Resposta rápida', text: 'Atendimento ágil para reduzir seu tempo parado em casa ou no trabalho.' },
  { icon: <IconHeadset size={24} color="#8EB5FF"/>, title: 'Explicação objetiva', text: 'Você entende o problema, a solução indicada e o que será feito.' },
  { icon: <IconHome size={24} color="#8EB5FF"/>, title: 'Atendimento em domicílio', text: 'Vamos até você em Maricá com ferramentas e processo de bancada.' },
];

function Why() {
  return (
    <section style={whyStyles.section} id="diferenciais">
      <div style={whyStyles.circuitBg}></div>
      <div style={whyStyles.glow}></div>
      <div className="container">
        <div style={whyStyles.header}>
          <div style={whyStyles.eyebrowDark}>
            <span style={{ width: 8, height: 8, borderRadius: 50, background: 'var(--success)', boxShadow: '0 0 0 4px rgba(31,169,113,.25)' }}></span>
            Por que escolher a PiterTech
          </div>
          <h2 className="t-h2" style={{ color: 'white', marginBottom: 14 }}>
            Conhecimento técnico aplicado no seu computador
          </h2>
          <p className="t-lead" style={{ color: 'rgba(255,255,255,.75)' }}>
            Diagnóstico, manutenção e orientação para resolver o problema certo — sem tentativa no escuro.
          </p>
        </div>
        <div className="why-grid" style={whyStyles.grid}>
          {whys.map((w, i) => (
            <div key={i} className="why-card" style={whyStyles.card}>
              <div style={whyStyles.iconWrap}>{w.icon}</div>
              <div className="t-h4" style={{ color: 'white', marginBottom: 8 }}>{w.title}</div>
              <div className="t-small" style={{ color: 'rgba(255,255,255,.7)' }}>{w.text}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .why-card:hover { background: rgba(255,255,255,.1); transform: translateY(-3px); }
      `}</style>
    </section>
  );
}

Object.assign(window, { Why });