/* ============================================================
   Trust bar · Emotional · How it works
   ============================================================ */

/* ---------- 2. Barra de benefícios (clara, premium) ---------- */
const TRUST = [
  { ic: Icons.user, t: "Atendimento humano e personalizado" },
  { ic: Icons.badge, t: "Especialista em Minha Casa Minha Vida" },
  { ic: Icons.pin, t: "Atuação em todas as regiões de SP" },
  { ic: Icons.doc, t: "Acompanhamento do início à entrega das chaves" },
];

function TrustBar() {
  return (
    <section className="section trust" id="confianca">
      <div className="wrap">
        <div className="trust-grid">
          {TRUST.map((it, i) => (
            <Reveal key={i} delay={(i % 4) + 1} className="trust-card">
              <span className="trust-ico" style={{ width: 46, height: 46 }}>{it.ic}</span>
              <h4>{it.t}</h4>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- 3. Seção emocional ---------- */
function Emotional() {
  return (
    <section className="section emotional grain">
      <div className="glow" style={{ width: 700, height: 700, top: "-20%", left: "-12%", background: "radial-gradient(circle, rgba(57,69,102,0.55), transparent 64%)" }} />
      <div className="glow" style={{ width: 520, height: 520, bottom: "-18%", right: "-8%", background: "radial-gradient(circle, var(--gold-glow), transparent 66%)", opacity: 0.4 }} />
      <div className="wrap emo-grid">
        <div className="emo-copy">
          <Reveal><span className="kicker">Mais do que um imóvel</span></Reveal>
          <Reveal as="h2" delay={1} className="emo-title">
            Não é só sobre imóveis.<br /><span className="gold-ital">É sobre mudar de vida.</span>
          </Reveal>
          <Reveal as="p" delay={2} className="emo-text">
            Existe um momento exato em que a chave gira pela primeira vez e a casa
            deixa de ser um sonho distante para virar endereço. É por esse momento
            que eu trabalho.
          </Reveal>
          <Reveal as="p" delay={2} className="emo-text">
            Cada família tem uma história, um medo e um ponto de partida diferente.
            Meu papel é transformar a insegurança do começo em um caminho claro —
            com você entendendo cada etapa, sem letras miúdas.
          </Reveal>
          <Reveal delay={3} className="emo-stats">
            <div><strong><CountUp to={320} suffix="+" /></strong><span>famílias acompanhadas</span></div>
            <div><strong><CountUp to={12} /></strong><span>anos no mercado de SP</span></div>
            <div><strong>5.0</strong><span>avaliação dos clientes</span></div>
          </Reveal>
        </div>

        <Reveal delay={2} className="emo-visual">
          <img className="emo-photo" src="assets/emo-familia.jpg" alt="Família realizando o sonho do imóvel próprio com o Wanderson" />

          <div className="emo-phone">
            <div className="phone-notch" />
            <div className="phone-screen">
              <div className="wa-bar">
                <span className="wa-bar-back">‹</span>
                <span className="wa-bar-av"><img src="assets/wanderson-avatar.jpg?v=3" alt="Wanderson" /></span>
                <div className="wa-bar-txt">
                  <strong>Wanderson Cruz</strong>
                  <em><span className="dot-on" /> online</em>
                </div>
                <span className="wa-bar-ico" style={{ width: 16, height: 16 }}>{Icons.whats}</span>
              </div>
              <div className="wa-chat">
                <div className="wa-bubble"><span className="wa-strong">Aprovado! 🎉</span><time>11:40</time></div>
                <div className="wa-bubble">Parabéns! Seu financiamento foi aprovado.<time>11:40</time></div>
                <div className="wa-bubble">Agora é hora de realizar seu sonho!<time>11:40</time></div>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- 4. Como funciona ---------- */
const STEPS = [
  { n: "01", ic: Icons.chat, t: "Entendemos seu momento", d: "Uma conversa leve para conhecer sua renda, seus planos e o que faz sentido pra você." },
  { n: "02", ic: Icons.shield, t: "Acompanhamos toda a aprovação", d: "Documentos, banco e financiamento com você seguro em cada etapa do processo." },
  { n: "03", ic: Icons.map, t: "Encontramos possibilidades reais", d: "Cruzamos seu perfil com o programa e as regiões certas — sem promessas vazias." },
  { n: "04", ic: Icons.home, t: "Visitamos os imóveis juntos", d: "Você conhece de perto os imóveis e o decorado, sem pressa e sem pressão." },
  { n: "05", ic: Icons.key, t: "Entrega das chaves", d: "O dia em que o sonho vira endereço. E eu estou lá com você." },
];

function HowItWorks() {
  return (
    <section className="section how" id="como-funciona">
      <div className="wrap">
        <div className="sec-head center">
          <Reveal><span className="kicker center">Simples do começo ao fim</span></Reveal>
          <Reveal as="h2" delay={1} className="sec-title">Como funciona, na prática</Reveal>
          <Reveal as="p" delay={2} className="sec-sub">
            Cinco etapas claras. Sem burocracia escondida, sem termos que você não entende.
          </Reveal>
        </div>

        <div className="how-track">
          <div className="how-line" aria-hidden="true"><i /></div>
          {STEPS.map((s, i) => (
            <Reveal key={i} delay={(i % 4) + 1} className="how-step">
              <div className="how-node">
                <span className="how-ico" style={{ width: 24, height: 24 }}>{s.ic}</span>
                <span className="how-n">{s.n}</span>
              </div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { TrustBar, Emotional, HowItWorks });