/* Como funciona — 4-step process */

const STEPS = [
  { n: 1, t: "Briefing do imóvel", d: "Você nos passa o endereço, o objetivo (venda rápida ou maior valor) e a urgência. Alinhamos o escopo em até 24h." },
  { n: 2, t: "Visita técnica", d: "Nossa equipe vai ao local em até 3 dias úteis. Fazemos medição, levantamento fotográfico, análise estrutural e das instalações." },
  { n: 3, t: "Estudo e entrega", d: "Em até 5 dias úteis você recebe o relatório completo: planta, projeto, orçamento, análise de mercado e/ou rentabilidade — tudo num único documento." },
  { n: 4, t: "Anúncio e venda", d: "O material vai direto para o anúncio. Comprador mais informado, negociação mais forte, facilita venda mais rápida e por melhor preço." },
];

const ComoFuncionaSection = () => (
  <section style={{ background: "#fff", padding: "72px 80px" }}>
    <PIEyebrow>Como funciona</PIEyebrow>
    <h2 style={{ fontSize: 44, fontWeight: 700, letterSpacing: "-0.02em", color: "#0B3D33", margin: "12px 0 12px" }}>Do pedido à entrega em 4 passos</h2>
    <p style={{ fontSize: 17, color: "#4A6B5E", maxWidth: 720, margin: "0 0 40px" }}>
      Processo ágil, sem burocracia. Você indica o imóvel e a gente entrega o estudo completo pronto para usar no anúncio.
    </p>

    <div>
      {STEPS.map((s, i) => (
        <div key={s.n} style={{
          display: "grid", gridTemplateColumns: "44px 1fr",
          gap: 18, padding: "20px 0",
          borderTop: i === 0 ? "none" : "1px solid #E4ECE8",
        }}>
          <span style={{
            width: 36, height: 36, borderRadius: "50%", background: "#0F6E56",
            color: "#fff", display: "grid", placeItems: "center",
            font: "700 14px/1 'Plus Jakarta Sans'",
          }}>{s.n}</span>
          <div>
            <div style={{ fontWeight: 700, fontSize: 18, color: "#0B3D33" }}>{s.t}</div>
            <div style={{ fontSize: 14.5, color: "#4A6B5E", marginTop: 4, lineHeight: 1.55, maxWidth: 880 }}>{s.d}</div>
          </div>
        </div>
      ))}
    </div>

    <div style={{ background: "#E1F5EE", borderRadius: 16, padding: "22px 26px", marginTop: 28, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16 }}>
      <div>
        <div style={{ fontWeight: 700, fontSize: 17, color: "#0B3D33" }}>Quer testar antes de contratar?</div>
        <div style={{ fontSize: 14, color: "#4A6B5E", marginTop: 4 }}>Escolha um imóvel parado há mais de 60 dias. Entregamos o estudo piloto em 5 dias úteis.</div>
      </div>
      <PIButton variant="primary">Falar com a gente →</PIButton>
    </div>
  </section>
);

Object.assign(window, { ComoFuncionaSection });