const solutionsStyles = {
  inner: { maxWidth: 1200, margin: '0 auto', padding: '0 32px' },
  header: {
    display: 'flex', justifyContent: 'space-between',
    alignItems: 'flex-end', gap: 32, marginBottom: 56,
    flexWrap: 'wrap',
  },
  grid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(3, 1fr)',
    gap: 20,
  },
  iconTile: {
    width: 48, height: 48,
    background: 'rgba(201,169,110,0.08)',
    border: '1px solid rgba(201,169,110,0.2)',
    borderRadius: 12,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    color: 'var(--brand-gold)',
    marginBottom: 22,
  },
  cardTitle: {
    fontFamily: 'var(--font-display)',
    fontSize: 21, fontWeight: 700,
    letterSpacing: '-0.02em',
    color: 'var(--fg-1)',
    marginBottom: 8,
  },
  cardDesc: {
    fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.65,
    margin: 0,
  },
  tags: {
    display: 'flex', gap: 6, flexWrap: 'wrap',
    marginTop: 20,
  },
  tag: {
    fontFamily: 'var(--font-mono)',
    fontSize: 10, fontWeight: 700,
    color: 'var(--fg-2)', letterSpacing: '0.1em',
    textTransform: 'uppercase',
    padding: '4px 9px',
    border: '1px solid var(--border-default)',
    borderRadius: 99,
    background: 'var(--bg-surface-3)',
  },
  cornerArrow: {
    position: 'absolute', top: 22, right: 22,
    color: 'var(--fg-3)',
    transition: 'all 220ms var(--ease-smooth)',
  },
};

const solutions = [
  {
    Icon: () => <IconBot size={22} />,
    title: 'Agentes de IA',
    desc: 'Atendentes virtuais especialistas que entendem seu produto e operam em qualquer canal — site, WhatsApp, e-mail.',
    tags: ['LLM', 'Multi-canal', '24/7'],
  },
  {
    Icon: () => <IconZap size={22} />,
    title: 'Automação com IA',
    desc: 'Workflows inteligentes que decidem, classificam, escrevem e executam — sem precisar de regra fixa.',
    tags: ['No-code', 'Triggers', 'Smart'],
    accent: true,
  },
  {
    Icon: () => <IconGitBranch size={22} />,
    title: 'Integrações inteligentes',
    desc: 'Conectamos seu CRM, ERP, planilhas, e-mail e WhatsApp em um só fluxo. Dados rodando sozinhos.',
    tags: ['REST', 'Webhooks', '200+ apps'],
  },
  {
    Icon: () => <IconWorkflow size={22} />,
    title: 'Fluxos automatizados',
    desc: 'Pipelines de qualificação, follow-up, onboarding, cobrança e renovação — orquestrados por IA.',
    tags: ['Pipelines', 'Sales-ops', 'CX-ops'],
  },
  {
    Icon: () => <IconBarChart size={22} />,
    title: 'Dashboards & analytics',
    desc: 'Dados consolidados em tempo real. KPIs operacionais respondendo a perguntas em linguagem natural.',
    tags: ['BI', 'Realtime', 'Natural query'],
  },
  {
    Icon: () => <IconCpu size={22} />,
    title: 'Sistemas inteligentes',
    desc: 'Software customizado, com IA no núcleo. Para problemas específicos da sua operação, sem prateleira.',
    tags: ['Custom', 'SaaS interno', 'Enterprise'],
  },
];

function Solutions() {
  return (
    <section className="bb-section" id="solucoes">
      <div style={solutionsStyles.inner}>
        <div style={solutionsStyles.header}>
          <div>
            <div className="bb-eyebrow">O que oferecemos</div>
            <h2 className="bb-section-title">
              Seis frentes de IA.<br />
              <span className="bb-gold">Um stack inteiro a serviço da sua operação.</span>
            </h2>
          </div>
          <p className="bb-section-desc">
            Não vendemos "ferramentas". Implantamos sistemas de IA com SLA,
            documentação e responsabilidade técnica — do diagnóstico
            à operação contínua.
          </p>
        </div>

        <div data-grid="3col" style={solutionsStyles.grid}>
          {solutions.map((s) => (
            <SolutionCard key={s.title} {...s} />
          ))}
        </div>
      </div>
    </section>
  );
}

function SolutionCard({ Icon, title, desc, tags, accent }) {
  const [hov, setHov] = React.useState(false);
  return (
    <div
      className={`bb-card${accent ? ' bb-card--accent' : ''}`}
      style={{ position: 'relative' }}
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
    >
      <div style={{
        ...solutionsStyles.cornerArrow,
        color: hov ? 'var(--brand-gold)' : 'var(--fg-3)',
        transform: hov ? 'translate(2px, -2px)' : 'translate(0, 0)',
      }}>
        <IconArrowUpRight size={18} />
      </div>
      <div style={solutionsStyles.iconTile}><Icon /></div>
      <div style={solutionsStyles.cardTitle}>{title}</div>
      <p style={solutionsStyles.cardDesc}>{desc}</p>
      <div style={solutionsStyles.tags}>
        {tags.map((t) => <span key={t} style={solutionsStyles.tag}>{t}</span>)}
      </div>
    </div>
  );
}

Object.assign(window, { Solutions });