// Operação Brasil — como funciona (3 passos)
const { SectionHeading: CfSH, Step: CfStep } = window.OperaOBrasilDesignSystem_ac060f;

function ComoFunciona() {
  return (
    <section id="como" style={{
      position: "relative", isolation: "isolate",
      padding: "clamp(56px, 8vw, 110px) clamp(20px, 4vw, 62px)",
      borderBlock: "1px solid rgba(242, 208, 100, 0.18)",
    }}>
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0, zIndex: -1,
        backgroundImage: "linear-gradient(90deg, rgba(4,5,4,0.74), rgba(17,24,13,0.58) 50%, rgba(4,5,4,0.76)), linear-gradient(180deg, rgba(4,5,4,0.14), rgba(4,5,4,0.48)), url('../../assets/landing-page/como-funciona-operacao-brasil-bg.png')",
        backgroundPosition: "center",
        backgroundSize: "cover",
      }} />
      <div style={{ width: "min(100%, 1200px)", margin: "0 auto" }}>
        <HudEyebrow style={{ marginBottom: "20px" }}>Como funciona</HudEyebrow>
        <CfSH
          title="Entre na Operação Brasil em três passos"
          description="Conheça as oportunidades, escolha a loja e envie seus dados para continuar o atendimento com a equipe responsável." />
        <div className="process-steps" style={{
          display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))",
          gap: "16px", marginTop: "clamp(28px, 4vw, 48px)",
        }}>
          <CfStep number={1} title="Conheça as oportunidades">Compare os equipamentos participantes e identifique o que combina com você.</CfStep>
          <CfStep number={2} title="Escolha a loja">Selecione a loja parceira que deve receber sua solicitação.</CfStep>
          <CfStep number={3} title="Envie seu cadastro">Após a confirmação, você segue pelo site, quando disponível, ou recebe o retorno da equipe da loja.</CfStep>
        </div>
      </div>
    </section>
  );
}
window.ComoFunciona = ComoFunciona;