const casesStyles = {
  inner: { maxWidth: 1200, margin: '0 auto', padding: '0 32px' },
  header: { textAlign: 'center', marginBottom: 56, maxWidth: 760, marginLeft: 'auto', marginRight: 'auto' },
  grid: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 },
  card: {
    background: 'var(--bg-surface-2)',
    border: '1px solid var(--border-accent)',
    borderRadius: 16,
    padding: 32,
    display: 'flex', flexDirection: 'column', gap: 16,
    transition: 'box-shadow 180ms var(--ease-smooth), transform 180ms var(--ease-smooth)',
  },
  cardAccent: {
    boxShadow: 'var(--glow-gold)',
  },
  icon: {
    width: 44, height: 44, borderRadius: 12,
    background: 'rgba(201,169,110,0.1)',
    border: '1px solid rgba(201,169,110,0.25)',
    color: 'var(--brand-gold)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    marginBottom: 4,
  },
  cardTitle: {
    fontFamily: 'var(--font-display)',
    fontSize: 20, fontWeight: 700,
    color: 'var(--fg-1)', letterSpacing: '-0.02em',
    lineHeight: 1.2, margin: 0,
  },
  cardDesc: {
    fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.65,
    margin: 0, textWrap: 'pretty',
  },
  ctaRow: {
    display: 'flex', justifyContent: 'center', marginTop: 48,
  },
};

const pillars = [
  {
    Icon: () => <IconShield size={22} />,
    title: 'Transparência total',
    desc: 'Você sabe exatamente o que está sendo construído, quanto custa e por quê. Sem caixa-preta, sem letra miúda.',
  },
  {
    Icon: () => <IconUsers size={22} />,
    title: 'Atendimento direto',
    desc: 'Nada de SDR ou camadas de venda. Você conversa com quem realmente constrói a automação, do diagnóstico à entrega.',
    accent: true,
  },
  {
    Icon: () => <IconZap size={22} />,
    title: 'Condições de parceiro inicial',
    desc: 'Estamos montando nosso portfólio. Isso significa preço justo e atenção redobrada para quem entra agora, no começo.',
  },
];

function Cases() {
  const scrollToForm = (e) => {
    e?.preventDefault();
    document.getElementById('contato')?.scrollIntoView({ behavior: 'smooth' });
  };
  const [hov, setHov] = React.useState(null);

  return (
    <section className="bb-section" id="abordagem">
      <div style={casesStyles.inner}>
        <div style={casesStyles.header}>
          <div className="bb-eyebrow" style={{ justifyContent: 'center' }}>Abordagem</div>
          <h2 className="bb-section-title" style={{ margin: '14px auto 18px' }}>
            Ainda não temos um mural de cases —<br />
            <span className="bb-gold">e preferimos ser honestos sobre isso.</span>
          </h2>
          <p className="bb-section-desc" style={{ margin: '0 auto' }}>
            A Black Bear AI está no começo. O que oferecemos agora não é um
            histórico inflado: é foco, transparência e a chance de construir
            algo sob medida com quem está com fome de fazer dar certo.
          </p>
        </div>

        <div data-grid="cases" style={casesStyles.grid}>
          {pillars.map((p, i) => (
            <article key={p.title} style={{
              ...casesStyles.card,
              ...(p.accent ? casesStyles.cardAccent : {}),
              ...(hov === i ? { boxShadow: 'var(--glow-gold-strong)', transform: 'translateY(-2px)' } : {}),
            }}
              onMouseEnter={() => setHov(i)} onMouseLeave={() => setHov(null)}>
              <div style={casesStyles.icon}><p.Icon /></div>
              <h3 style={casesStyles.cardTitle}>{p.title}</h3>
              <p style={casesStyles.cardDesc}>{p.desc}</p>
            </article>
          ))}
        </div>

        <div style={casesStyles.ctaRow}>
          <button className="btn btn-lg btn-gold" onClick={scrollToForm}>
            Seja um dos primeiros <IconArrowRight size={16} />
          </button>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Cases });