/* SECTION 03 — Problema → Solução. */
function ProblemSection({ onGo }) {
  const problems = [
    ["compass", "Não sabe por onde começar?", "Score de crédito, documentação, orçamento real — existe uma ordem certa, e poucos explicam isso com clareza."],
    ["map-pin", "Medo de escolher o bairro errado?", "Localização é tudo. Um imóvel mal localizado não valoriza — e você pode perceber isso tarde demais."],
    ["file-warning", "Insegurança no processo de compra e venda?", "Sem uma corretora de confiança, você corre o risco de assinar o que não devia — ou perder o negócio certo."],
    ["piggy-bank", "Achando que aluguel é mais seguro?", "Se você paga R$ 1.200 de aluguel há 5 anos, já foram R$ 72.000. Esse valor poderia ser a entrada do seu imóvel."]
  ];
  return (
    <section className="cn-light-section" style={{ background: "var(--ivory-50)", padding: "clamp(84px, 10vw, 136px) 0" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 40px" }}>
        <div className="cn-problem-layout">
          <div className="cn-problem-copy-shell">
            <Reveal>
              <div className="cn-problem-copy">
                <div className="cn-eyebrow">Por que tantos travam</div>
                <h2 style={{
                  fontFamily: "var(--font-serif)", fontWeight: 500,
                  fontSize: "clamp(38px,5.1vw,62px)", color: "var(--fg)",
                  margin: "18px 0 0", lineHeight: 1.04, letterSpacing: "var(--track-tight)",
                  textWrap: "balance", maxWidth: 650
                }}>
                  Comprar ou vender um imóvel não precisa ser difícil.
                </h2>
                <p style={{
                  fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: 17,
                  color: "var(--fg-muted)", lineHeight: 1.78, margin: "24px 0 0",
                  maxWidth: 560, textWrap: "pretty"
                }}>
                  Mas sem o apoio certo, pode ser. Documentação confusa, bairros desconhecidos,
                  medo de pagar mais do que vale — são armadilhas reais. A Carina existe para
                  eliminar cada uma delas antes que elas atrasem sua decisão.
                </p>
              </div>
            </Reveal>
          </div>

          <div className="cn-problem-stack" role="list" aria-label="Principais travas na compra ou venda de um imóvel">
            {problems.map(([ic, q, d], i) => (
              <Reveal key={q} delay={i * 55}>
                <article className="cn-problem-card" role="listitem" style={{
                  background: "var(--bg-card)", border: "1px solid var(--surface-line)",
                  borderRadius: "var(--r-md)", padding: "26px 28px", minHeight: 132,
                  display: "grid", gridTemplateColumns: "48px minmax(0,1fr)", gap: 18, alignItems: "start",
                  boxShadow: i === 0 ? "0 22px 60px -48px rgba(10,9,8,.34)" : "none"
                }}>
                  <div style={{
                    width: 48, height: 48, borderRadius: "var(--r-sm)",
                    border: "1px solid rgba(166,72,59,0.38)", background: "rgba(166,72,59,0.08)",
                    display: "grid", placeItems: "center"
                  }}>
                    <Icon name={ic} size={22} color="#C9756A" strokeWidth={1.45} />
                  </div>
                  <div style={{ minWidth: 0 }}>
                    <h3 style={{
                      fontFamily: "var(--font-serif)", fontWeight: 600, fontSize: "clamp(20px,1.65vw,24px)",
                      color: "var(--fg)", margin: 0, lineHeight: 1.16, textWrap: "balance"
                    }}>{q}</h3>
                    <p style={{
                      fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: 16,
                      color: "var(--fg-muted)", margin: "11px 0 0", lineHeight: 1.68, textWrap: "pretty"
                    }}>{d}</p>
                  </div>
                </article>
              </Reveal>
            ))}
          </div>
        </div>

        <div style={{ textAlign: "center", marginTop: "clamp(44px,5vw,64px)" }}>
          <PrimaryCTA label="Quero entender meu caso agora" href={window.CARINA_WHATS_SITE} />
        </div>
      </div>
    </section>
  );
}

/* SECTION 04 — Benefícios / Por que a Carina. */
function BenefitsSection() {
  const trackRef = React.useRef(null);
  const benefits = [
    ["map-pinned", "Conhece cada bairro de Gurupi", "Não é só GPS. É saber quais regiões valorizam, onde tem escola, hospital, comércio e acesso fácil."],
    ["heart-handshake", "Atendimento de amiga, olhar de especialista", "Direto, honesto e sem enrolação. Você entende cada etapa do processo do começo ao fim."],
    ["folder-check", "Organiza toda a sua documentação", "Da análise de crédito ao registro final, você não fica perdido no meio do caminho."],
    ["trending-up", "Vende com preço justo e estratégia certa", "Fotos profissionais, avaliação de mercado e rede ativa de compradores. Imóveis parados há um ano vendem em semanas."],
    ["sparkles", "Valoriza seu imóvel antes de vender", "Pequenas melhorias estratégicas podem elevar o valor do seu imóvel em até 20%."],
    ["shield-check", "Segurança jurídica do início ao fim", "Documentação 100% em dia. Você assina sabendo exatamente o que está fechando."]
  ];
  const scrollBenefits = (dir) => {
    const el = trackRef.current;
    if (!el) return;
    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    el.scrollBy({ left: dir * Math.min(460, el.clientWidth * 0.72), behavior: reduceMotion ? "auto" : "smooth" });
  };
  return (
    <section id="porque-a-carina" className="cn-light-section" style={{
      background: "var(--ivory-50)", borderTop: "1px solid var(--border-gold)",
      padding: "clamp(72px, 9vw, 120px) 0"
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 40px" }}>
        <Reveal>
          <div className="cn-benefits-head" style={{
            display: "grid", gridTemplateColumns: "minmax(0, 0.95fr) minmax(320px, 0.72fr)",
            gap: 56, alignItems: "end"
          }}>
            <div>
              <div className="cn-eyebrow">Por que a Carina</div>
              <h2 style={{
                fontFamily: "var(--font-serif)", fontWeight: 500, color: "var(--fg)",
                fontSize: "clamp(36px, 5vw, 58px)", lineHeight: 1.08, margin: "16px 0 0",
                letterSpacing: "var(--track-tight)", textWrap: "balance"
              }}>
                Por que quem busca imóvel em Gurupi escolhe a Carina?
              </h2>
            </div>
            <div style={{ paddingBottom: 8 }}>
              <p style={{
                fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: 17,
                color: "var(--fg-muted)", lineHeight: 1.7, margin: 0, textWrap: "pretty"
              }}>
                Uma curadoria imobiliária para decidir com segurança, entender cada bairro e negociar sem perder tempo.
              </p>
              <div style={{ display: "flex", gap: 12, marginTop: 32 }}>
                <button className="cn-benefit-arrow" type="button" aria-label="Ver diferenciais anteriores" onClick={() => scrollBenefits(-1)}>
                  <Icon name="chevron-left" size={21} color="currentColor" />
                </button>
                <button className="cn-benefit-arrow cn-benefit-arrow--active" type="button" aria-label="Ver próximos diferenciais" onClick={() => scrollBenefits(1)}>
                  <Icon name="chevron-right" size={21} color="currentColor" />
                </button>
              </div>
            </div>
          </div>
        </Reveal>

        <div
          ref={trackRef}
          className="cn-benefit-carousel"
          role="list"
          aria-label="Diferenciais da Carina Imóveis"
          style={{ display: "flex", gap: 24, overflowX: "auto", overflowY: "hidden", scrollSnapType: "x mandatory", marginTop: 46, padding: "6px 120px 14px 0" }}
        >
          {benefits.map(([ic, t, d], i) => (
            <article key={t} className="cn-benefit-slide" role="listitem" style={{
              position: "relative", flex: "0 0 clamp(320px, 27vw, 390px)", scrollSnapAlign: "start",
              color: "var(--cream)"
            }}>
              <div className="cn-benefit-visual" style={{
                position: "relative", aspectRatio: "1.2 / 1", overflow: "hidden", borderRadius: "var(--r-md)",
                border: "1px solid rgba(209,169,90,0.22)", background: "var(--bg-card)"
              }}>
                <Photo
                  src={CARINA_GURUPI_IMAGE(i)}
                  alt={t}
                  tone={i + 1}
                  watermark={false}
                  corner={false}
                />
                <div style={{
                  position: "absolute", inset: 0,
                  background: "linear-gradient(to top, rgba(0,0,0,0.44), transparent 58%)"
                }} />
                <div style={{
                  position: "absolute", left: 22, bottom: 22, width: 54, height: 54,
                  display: "grid", placeItems: "center", borderRadius: "50%",
                  background: "rgba(10,9,8,0.72)", border: "1px solid var(--border-gold-strong)",
                  backdropFilter: "blur(8px)"
                }}>
                  <Icon name={ic} size={24} color="var(--accent)" strokeWidth={1.35} />
                </div>
              </div>
              <div style={{ marginTop: 22 }}>
                <h3 style={{
                  fontFamily: "var(--font-serif)", fontWeight: 600, fontSize: "clamp(22px, 2vw, 27px)",
                  color: "var(--fg)", lineHeight: 1.12, margin: 0, textWrap: "balance"
                }}>{t}</h3>
              </div>
              <p style={{
                fontFamily: "var(--font-sans)", fontWeight: 300, fontSize: 16.5,
                color: "var(--ink-300)", lineHeight: 1.62, margin: "14px 0 0", textWrap: "pretty"
              }}>{d}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ProblemSection, BenefitsSection });
