/* ============================================================
   Regiões · Objeções · Depoimentos · Sobre · CTA final · Footer · WA flutuante
   ============================================================ */

/* ---------- 7. Regiões de São Paulo ---------- */
const REGIOES = [
  { z: "Zona Sul", slug: "zona-sul", v: "a partir de R$ 170 mil", d: "Santo Amaro, Capão, Grajaú e arredores em alta valorização.", img: "assets/regiao-zona-sul.jpg" },
  { z: "Zona Norte", slug: "zona-norte", v: "a partir de R$ 165 mil", d: "Santana, Tucuruvi e Casa Verde com ótima conexão de metrô.", img: "assets/regiao-zona-norte.jpg" },
  { z: "Zona Leste", slug: "zona-leste", v: "a partir de R$ 150 mil", d: "Itaquera, São Mateus e Penha — onde mais aprovamos.", img: "assets/regiao-zona-leste.jpg" },
  { z: "Zona Oeste", slug: "zona-oeste", v: "a partir de R$ 190 mil", d: "Lapa, Pirituba e Butantã com infraestrutura completa.", img: "assets/regiao-zona-oeste.jpg" },
  { z: "Centro", slug: "centro", v: "a partir de R$ 175 mil", d: "Coração de SP, mobilidade total e novos lançamentos.", img: "assets/regiao-centro.jpg" },
];

function Regioes() {
  return (
    <section className="section regioes" id="regioes">
      <div className="wrap">
        <div className="sec-head">
          <Reveal><span className="kicker">Atuação em toda a capital</span></Reveal>
          <Reveal as="h2" delay={1} className="sec-title">São Paulo inteira, zona a zona</Reveal>
          <Reveal as="p" delay={2} className="sec-sub">
            Onde quer que você sonhe em morar, existe um caminho. Conheço cada região
            e o que faz sentido para o seu bolso.
          </Reveal>
        </div>

        <div className="reg-grid">
          {REGIOES.map((r, i) => (
            <Reveal key={r.z} delay={(i % 3) + 1} className={`reg-card ${i === 0 ? "reg-tall" : ""}`}>
              <a className="reg-card-link" href={`#regiao?z=${r.slug}`} aria-label={`Empreendimentos na ${r.z}`}>
                {r.img
                  ? <img className="reg-img" src={r.img} alt={`${r.z} de São Paulo`} loading="lazy" />
                  : <Placeholder className="reg-img" label={`FOTO · ${r.z} de SP`} />}
                <div className="reg-shade" />
                <div className="reg-body">
                  <span className="reg-val">{r.v}</span>
                  <h4>{r.z}</h4>
                  <p>{r.d}</p>
                  <span className="reg-link">
                    Ver empreendimentos
                    <span style={{ width: 15, height: 15 }}>{Icons.arrow}</span>
                  </span>
                </div>
              </a>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- 8. Quebra de objeções ---------- */
const OBJ = [
  { t: "Sou autônomo", d: "Renda comprovada de outras formas. Existem caminhos para quem não tem carteira assinada." },
  { t: "Não tenho entrada", d: "FGTS, subsídios e parcelamento da entrada podem resolver isso por você." },
  { t: "Nunca fui aprovado", d: "Um \"não\" do passado não define o presente. Revisamos seu perfil do zero." },
  { t: "Nome negativado", d: "Há estratégias e prazos. Vamos entender sua situação real com calma." },
  { t: "Não entendo de financiamento", d: "Esse é o meu trabalho. Eu traduzo tudo e fico ao seu lado em cada etapa." },
];

function Objecoes() {
  return (
    <section className="section objecoes grain" id="objecoes">
      <div className="glow" style={{ width: 560, height: 560, top: "0%", left: "-12%", background: "radial-gradient(circle, rgba(57,69,102,0.5), transparent 65%)" }} />
      <div className="wrap">
        <div className="sec-head">
          <Reveal><span className="kicker">Sem medo de perguntar</span></Reveal>
          <Reveal as="h2" delay={1} className="sec-title">
            Você talvez ache que <span className="gold-ital">não consegue.</span>
          </Reveal>
          <Reveal as="p" delay={2} className="sec-sub">
            Quase todo mundo começa achando isso. Olha quantas histórias começaram exatamente aqui.
          </Reveal>
        </div>

        <div className="obj-grid">
          {OBJ.map((o, i) => (
            <Reveal key={o.t} delay={(i % 3) + 1} className="obj-card">
              <span className="obj-quote">“</span>
              <h4>{o.t}</h4>
              <p>{o.d}</p>
            </Reveal>
          ))}
          <Reveal delay={2} className="obj-close">
            <span style={{ width: 24, height: 24, color: "var(--gold-400)" }}>{Icons.spark}</span>
            <p>Existem possibilidades para <strong>diferentes perfis.</strong> O primeiro passo é conversar.</p>
            <a className="btn btn-gold" href={waLink("Olá Wanderson! Acho que meu caso é difícil, mas gostaria de entender minhas possibilidades.")} target="_blank" rel="noopener">
              <span style={{ width: 18, height: 18 }}>{Icons.whats}</span>
              Quero conversar
            </a>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---------- 9. Depoimentos ---------- */
const DEPO = [
  { n: "Cintia & Léo", q: "Que outras pessoas que tenham o sonho de conquistar a casa própria encontrem corretores como o Cruz, que se sensibiliza e ajuda no que for preciso o cliente para realizar esse sonho." },
  { n: "Juliana M.", q: "Eu já tinha sido recusada antes. Ele revisou tudo com calma e em poucas semanas estava aprovada." },
  { n: "Luiz Fernando", q: "Eu fui lá, fiz todo o processo e não deu certo. Fiquei em cima de outro corretor, falaram que meu nome estava sujo mesmo após ter limpado. O Cruz e outra corretora disseram que deu certo, mas o Cruz foi mais atencioso, mais simpático — fechei com ele. Obrigado de coração Cruz." },
];

function Depoimentos() {
  return (
    <section className="section depo" id="depoimentos">
      <div className="wrap">
        <div className="sec-head center">
          <Reveal><span className="kicker center">Histórias reais</span></Reveal>
          <Reveal as="h2" delay={1} className="sec-title">Quem já está em casa</Reveal>
          <Reveal as="p" delay={2} className="sec-sub">
            Vídeos e prints reais entram aqui. Por enquanto, um gostinho das conversas que mais me emocionam.
          </Reveal>
        </div>

        <div className="depo-grid">
          {/* vídeo real do depoimento (YouTube Short) */}
          <Reveal delay={1} className="depo-video">
            <div className="depo-video-ph">
              <iframe
                src="https://www.youtube.com/embed/wnF_1s3EhaI?rel=0&modestbranding=1"
                title="Depoimento real de cliente · Wanderson Cruz"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                referrerPolicy="strict-origin-when-cross-origin"
                allowFullScreen
              ></iframe>
            </div>
            <div className="depo-video-cap">
              <strong>Higor e Karol</strong>
              <span>Um sonho realizado</span>
            </div>
          </Reveal>

          {DEPO.map((d, i) => (
            <Reveal key={d.n} delay={(i % 3) + 1} className="depo-card glass">
              <Stars size={14} />
              <p className="depo-q">{d.q}</p>
              <div className="depo-who">
                <div><strong>{d.n}</strong></div>
              </div>
            </Reveal>
          ))}

          <Reveal delay={2} className="depo-more">
            <a href="Conquistas.html" className="depo-more-inner">
              <span className="depo-more-ico" style={{ width: 30, height: 30 }}>{Icons.spark}</span>
              <strong>Veja as últimas conquistas</strong>
              <span className="depo-more-sub">Fotos reais de famílias que já estão em casa.</span>
              <div className="depo-more-thumbs">
                <img src="assets/depo-1.jpg" alt="" loading="lazy" />
                <img src="assets/depo-5.jpg" alt="" loading="lazy" />
                <img src="assets/depo-3.jpg" alt="" loading="lazy" />
                <span className="depo-more-count">+6</span>
              </div>
              <span className="depo-more-link">
                Abrir galeria
                <span style={{ width: 16, height: 16 }}>{Icons.arrow}</span>
              </span>
            </a>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---------- 10. Sobre o Wanderson ---------- */
function Sobre() {
  return (
    <section className="section sobre grain" id="sobre">
      <div className="glow" style={{ width: 600, height: 600, bottom: "-20%", right: "-10%", background: "radial-gradient(circle, var(--gold-glow), transparent 66%)", opacity: 0.42 }} />
      <div className="wrap sobre-grid">
        <Reveal delay={1} className="sobre-visual">
          <img className="sobre-photo" src="assets/sobre-wanderson.jpg" alt="Wanderson Cruz — corretor campeão Cury" />
          <div className="sobre-creci glass">
            <span style={{ width: 20, height: 20, color: "var(--navy-900)" }}>{Icons.badge}</span>
            <div><strong>CRECI 299734-F</strong><span>Corretor registrado</span></div>
          </div>
        </Reveal>

        <div className="sobre-copy">
          <Reveal><span className="kicker">Quem vai te acompanhar</span></Reveal>
          <Reveal as="h2" delay={1} className="sec-title">Sou o Wanderson. Prazer.</Reveal>
          <Reveal as="p" delay={2} className="sobre-text">
            Comecei nesse mercado porque cansei de ver gente boa desistindo do próprio
            sonho por falta de informação. Hoje, meu trabalho é o oposto disso:
            aproximar pessoas das chaves que elas achavam impossíveis.
          </Reveal>
          <Reveal as="p" delay={2} className="sobre-text">
            Não trabalho com pressão nem promessa fácil. Trabalho com verdade, presença
            e um acompanhamento próximo — do primeiro "será que eu consigo?" até o dia
            da mudança.
          </Reveal>
          <Reveal delay={3} className="sobre-values">
            {[["Próximo", "Você fala comigo, não com um robô."], ["Honesto", "Se não der, eu te digo na hora."], ["Presente", "Do início à entrega das chaves."]].map(([t, d]) => (
              <div key={t} className="sobre-val">
                <span style={{ width: 18, height: 18, color: "var(--gold-400)" }}>{Icons.check}</span>
                <div><strong>{t}</strong><span>{d}</span></div>
              </div>
            ))}
          </Reveal>
          <Reveal delay={3}>
            <a className="btn btn-ghost btn-lg" href={waLink("Olá Wanderson! Gostei da sua forma de trabalhar e gostaria de conversar.")} target="_blank" rel="noopener" style={{ marginTop: 30 }}>
              <span style={{ width: 18, height: 18 }}>{Icons.whats}</span>
              Conversar com o Wanderson
            </a>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---------- 11. CTA final ---------- */
function FinalCTA() {
  return (
    <section className="section final grain">
      <div className="glow" style={{ width: 760, height: 760, top: "-30%", left: "50%", transform: "translateX(-50%)", background: "radial-gradient(circle, var(--gold-glow), transparent 64%)", opacity: 0.5 }} />
      <Placeholder className="final-bg" label="" />
      <div className="final-shade" />
      <div className="wrap final-inner">
        <Reveal><span className="kicker center">O primeiro passo é uma conversa</span></Reveal>
        <Reveal as="h2" delay={1} className="final-title">
          Seu primeiro imóvel<br />pode começar <span className="gold-ital">hoje.</span>
        </Reveal>
        <Reveal as="p" delay={2} className="final-sub">
          Sem compromisso, sem pressão. Só uma conversa honesta sobre o que é possível pra você.
        </Reveal>
        <Reveal delay={3} className="final-cta">
          <a className="btn btn-wa btn-lg" href={waLink(WA_DEFAULT)} target="_blank" rel="noopener">
            <span style={{ width: 20, height: 20 }}>{Icons.whats}</span>
            Conversar com Wanderson no WhatsApp
          </a>
        </Reveal>
        <Reveal delay={4} className="final-mini">
          <span><span style={{ width: 15, height: 15, color: "var(--gold-400)" }}>{Icons.check}</span> Resposta no mesmo dia</span>
          <span><span style={{ width: 15, height: 15, color: "var(--gold-400)" }}>{Icons.check}</span> Atendimento humano</span>
          <span><span style={{ width: 15, height: 15, color: "var(--gold-400)" }}>{Icons.check}</span> CRECI 299734-F</span>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap footer-inner">
        <div className="footer-brand">
          <a href="#top" className="brand" aria-label="Cruz Consultoria Imobiliária">
            <CruzLogo height={66} />
          </a>
          <p>Acompanhamento humano para você conquistar seu primeiro imóvel em São Paulo — com clareza, segurança e presença até a entrega das chaves.</p>
          <div className="footer-social">
            <span className="footer-social-label">Siga-nos nas redes sociais</span>
            <a href="https://www.instagram.com/cruzconsultoriaimobiliaria/" target="_blank" rel="noopener" aria-label="Instagram">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
                <circle cx="12" cy="12" r="4"/>
                <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/>
              </svg>
            </a>
          </div>
        </div>
        <div className="footer-links">
          <div>
            <h5>Navegação</h5>
            <a href="#como-funciona">Como funciona</a>
            <a href="#analise">Análise de crédito</a>
            <a href="#regioes">Regiões</a>
            <a href="#sobre">Sobre</a>
          </div>
          <div>
            <h5>Contato</h5>
            <a href={waLink(WA_DEFAULT)} target="_blank" rel="noopener">WhatsApp</a>
            <a href="#analise">Simular financiamento</a>
            <span>São Paulo · Capital</span>
          </div>
        </div>
      </div>
      <div className="wrap footer-base">
        <span>© {new Date().getFullYear()} Wanderson Cruz · Todos os direitos reservados.</span>
        <span>CRECI 299734-F</span>
      </div>
    </footer>
  );
}

/* ---------- Botão WhatsApp flutuante ---------- */
function WhatsFloat() {
  const [show, setShow] = useState(false);
  const [bump, setBump] = useState(false);
  useEffect(() => {
    const onScroll = () => setShow(window.scrollY > 640);
    window.addEventListener("scroll", onScroll, { passive: true });
    const t = setTimeout(() => setBump(true), 2600);
    return () => { window.removeEventListener("scroll", onScroll); clearTimeout(t); };
  }, []);
  return (
    <a
      className={`wa-float ${show ? "show" : ""}`}
      href={waLink(WA_DEFAULT)} target="_blank" rel="noopener"
      aria-label="Falar no WhatsApp"
      onMouseEnter={() => setBump(false)}
    >
      <span className="wa-ring" />
      <span className="wa-ico" style={{ width: 28, height: 28 }}>{Icons.whats}</span>
      <span className={`wa-tip ${bump ? "show" : ""}`}>Fale comigo agora 👋</span>
    </a>
  );
}

Object.assign(window, { Regioes, Objecoes, Depoimentos, Sobre, FinalCTA, Footer, WhatsFloat });