/* SECTION 05 — Como funciona (3 passos). */
function ProcessSection() {
  const steps = [
    ["01", "Conversa inicial", "Me conta o que você precisa: comprar, vender ou investir. Entendo seu momento, seu orçamento e seus objetivos. Sem julgamento, sem pressa."],
    ["02", "Curadoria e estratégia", "Com base no que você compartilhou, apresento as melhores opções do mercado — ou monto a estratégia ideal para vender o seu imóvel rápido e pelo preço certo."],
    ["03", "Fechamento com segurança", "Acompanho cada detalhe: documentação, negociação e assinatura. Você fecha tranquilo, sabendo que está em boas mãos."]
  ];
  return (
    <section id="processo" className="cn-light-section" style={{
      background: "var(--ivory-50)", borderTop: "1px solid var(--border-gold)",
      padding: "clamp(72px, 9vw, 120px) 0", scrollMarginTop: "var(--header-h)"
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 40px" }}>
        <Reveal>
          <SectionHead
            center
            eyebrow="Como funciona"
            title="Como é trabalhar com a Carina?"
            sub="Simples, direto e sem surpresas. Em 3 passos você já está em movimento."
          />
        </Reveal>

        <div className="cn-process-timeline" style={{
          position: "relative", maxWidth: 980, margin: "62px auto 0", display: "grid", gap: 22
        }}>
          <span aria-hidden="true" className="cn-process-rail" style={{
            position: "absolute", left: 60, top: 18, bottom: 18, width: 1,
            background: "linear-gradient(to bottom, transparent, var(--border-gold-strong) 8%, var(--border-gold-strong) 92%, transparent)"
          }} />
          {steps.map(([num, t, d], i) => (
            <Reveal key={num} delay={i * 90}>
              <article className="cn-process-step" style={{
                position: "relative", display: "grid", gridTemplateColumns: "120px minmax(0, 1fr)",
                gap: 32, alignItems: "stretch"
              }}>
                <div className="cn-process-marker" style={{
                  position: "relative", zIndex: 1, display: "grid", justifyItems: "center", alignContent: "start"
                }}>
                  <div style={{
                    width: 76, height: 76, borderRadius: "50%", display: "grid", placeItems: "center",
                    background: "var(--bg)", border: "1px solid var(--border-gold-strong)",
                    boxShadow: "0 0 0 10px var(--bg)",
                    fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 28,
                    color: "var(--gold-700)", letterSpacing: "0.04em", lineHeight: 1
                  }}>
                    {num}
                  </div>
                </div>

                <div className="cn-process-card" style={{
                  position: "relative", minHeight: 182, background: "var(--bg-card)",
                  border: "1px solid var(--border-gold)", borderRadius: "var(--r-md)",
                  padding: "32px 34px", overflow: "hidden"
                }}>
                  <div style={{
                    position: "absolute", left: 0, top: 0, bottom: 0, width: 3,
                    background: "linear-gradient(to bottom, var(--accent), rgba(209,169,90,0.12))"
                  }} />
                  <div className="cn-eyebrow" style={{ fontSize: 11, letterSpacing: "0.2em" }}>Passo {num}</div>
                  <h3 style={{
                    fontFamily: "var(--font-serif)", fontWeight: 600, fontSize: "clamp(24px, 2.5vw, 32px)",
                    color: "var(--fg)", margin: "14px 0 0", lineHeight: 1.15, textWrap: "balance"
                  }}>{t}</h3>
                  <p style={{
                    fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: 16.5,
                    color: "var(--fg-muted)", margin: "12px 0 0", lineHeight: 1.76, maxWidth: 650, textWrap: "pretty"
                  }}>{d}</p>
                </div>
              </article>
            </Reveal>
          ))}
        </div>

        <Reveal style={{ textAlign: "center", marginTop: 48 }}>
          <PrimaryCTA label="Começar agora pelo WhatsApp" href={window.CARINA_WHATS_SITE} />
        </Reveal>
      </div>
    </section>
  );
}

/* SECTION 5.5 — Imóveis em destaque. */
function FeaturedSection({ items, onOpen, onAll }) {
  const featuredItems = window.CARINA_RECENT_LISTINGS(items, 3);
  const openAll = (event) => {
    event?.preventDefault();
    onAll();
  };

  return (
    <section id="imoveis" className="cn-light-section" style={{ background: "var(--ivory-50)", borderTop: "1px solid var(--border-gold)", padding: "clamp(72px, 9vw, 120px) 0", scrollMarginTop: "var(--header-h)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 40px" }}>
        <Reveal>
          <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", flexWrap: "wrap", gap: 24 }}>
            <SectionHead
              eyebrow="Seleção em destaque"
              title="Imóveis selecionados em Gurupi"
              sub="Confira algumas oportunidades disponíveis agora. Cada imóvel é avaliado, documentado e apresentado com cuidado para você decidir com clareza."
            />
            <a href={window.CARINA_PORTFOLIO_URL} onClick={openAll} className="cn-link-btn" style={{
              background: "none", border: "none", cursor: "pointer", color: "var(--accent)", whiteSpace: "nowrap",
              fontFamily: "var(--font-sans)", fontSize: 12.5, fontWeight: 500, letterSpacing: "0.13em",
              textTransform: "uppercase", display: "flex", alignItems: "center", gap: 8, paddingBottom: 6,
              textDecoration: "none"
            }}>Ver portfólio completo <span>→</span></a>
          </div>
        </Reveal>

        <div className="cn-3col" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 26, marginTop: 50 }}>
          {featuredItems.map((it, i) => (
            <Reveal key={it.id} delay={i * 80}><ListingCard item={it} onOpen={onOpen} /></Reveal>
          ))}
        </div>

        <Reveal style={{ textAlign: "center", marginTop: 50 }}>
          <PrimaryCTA label="Ver todos os imóveis disponíveis" href={window.CARINA_PORTFOLIO_URL} onClick={openAll} />
          <p style={{ fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: 16, color: "var(--fg-muted)", margin: "20px 0 0", lineHeight: 1.68 }}>
            Não encontrou o que procurava? <a href={window.CARINA_WHATS_SITE} target="_blank" rel="noopener" style={{ color: "var(--accent)", fontWeight: 400 }}>Me conta o que você precisa</a> — eu busco para você.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { ProcessSection, FeaturedSection });