// ============================================================
// Acqua Riacho Verde — Site sections
// ============================================================

function Photo({ src, label, big }) {
  return (
    <div className={"arv-photo" + (big ? " big" : "")}>
      <img src={src} alt={label} loading="lazy" />
      {label && <span className="arv-photo-cap">{label}</span>}
    </div>
  );
}

function Hero({ onNav }) {
  return (
    <section className="arv-hero" id="top">
      <div className="arv-hero-bg">
        <img src="./assets/photos/hero-riacho.webp" alt="Riacho natural ao entardecer no Acqua Riacho Verde" />
      </div>
      <div className="arv-hero-overlay"></div>
      <div className="arv-hero-content">
        <span className="arv-eyebrow light">Barreirinhas · Maranhão</span>
        <h1>Viver à beira d'água,<br/>em harmonia com a natureza.</h1>
        <p>Condomínio fechado com riacho natural preservado. Lotes exclusivos para quem busca qualidade de vida e valorização patrimonial.</p>
        <p className="arv-hero-meta">Lotes a partir de <strong>R$ 135.000</strong></p>
        <div className="arv-hero-actions">
          <button className="arv-btn primary" onClick={() => onNav("contato")}>Agende sua visita <i className="ph ph-arrow-right"></i></button>
          <button className="arv-btn ghost-light" onClick={() => onNav("contato")}>Ver lotes disponíveis</button>
        </div>
      </div>
      <button className="arv-scroll-cue" onClick={() => onNav("sobre")} aria-label="Rolar">
        <i className="ph ph-arrow-down"></i>
      </button>
    </section>
  );
}

function Sobre() {
  const stats = [
    ["54", "lotes exclusivos"],
    ["225–400 m²", "área do lote"],
    ["+20.000 m²", "área total do condomínio"],
    ["mar/2027", "entrega prevista"],
  ];
  const mediaRef = React.useRef(null);
  React.useEffect(() => {
    const el = mediaRef.current;
    if (!el) return;
    const observer = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) { el.classList.add("arv-sobre-media--visible"); observer.disconnect(); } },
      { threshold: 0.2 }
    );
    observer.observe(el);
    return () => observer.disconnect();
  }, []);
  return (
    <section className="arv-section sobre" id="sobre">
      <div className="arv-sobre-grid">
        <div className="arv-sobre-text">
          <span className="arv-eyebrow">Quem somos</span>
          <h2>Um refúgio natural<br/><em>no coração do Maranhão</em></h2>
          <p>O Acqua Riacho Verde é um condomínio fechado em Barreirinhas, porta de entrada dos Lençóis Maranhenses. Nosso maior diferencial é o riacho natural que atravessa o empreendimento, criando um ambiente onde a vida urbana encontra a natureza preservada.</p>
          <p>Destinado a quem busca qualidade de vida, valorização patrimonial e uma conexão genuína com o meio ambiente.</p>
          <div className="arv-stats">
            {stats.map(([n, l]) => (
              <div className="arv-stat" key={l}><strong>{n}</strong><span>{l}</span></div>
            ))}
          </div>
        </div>
        <div className="arv-sobre-media arv-sobre-media--anim" ref={mediaRef}>
          <Photo src="./assets/photos/riacho-natural-2.jpeg" label="Riacho natural preservado" />
        </div>
      </div>
    </section>
  );
}

function Diferenciais() {
  const items = [
    ["ph-waves", "Riacho natural", "Água limpa preservada como patrimônio permanente dos moradores."],
    ["ph-shield-check", "Segurança", "Condomínio fechado com acesso controlado e tranquilidade para a família."],
    ["ph-trend-up", "Valorização", "Barreirinhas cresce. Seu patrimônio também, em região de forte expansão turística."],
    ["ph-tree", "Natureza preservada", "Áreas verdes nativas e vegetação do cerrado maranhense protegidas."],
    ["ph-volleyball", "Lazer completo", "Prainha do rio, quadras, piscina, churrasqueira e parquinho infantil."],
    ["ph-leaf", "Sustentabilidade", "Projeto que respeita o ambiente natural e a margem do riacho."],
  ];
  return (
    <section className="arv-section diferenciais" id="diferenciais">
      <div className="arv-section-head">
        <span className="arv-eyebrow">Diferenciais</span>
        <h2>Tudo o que faz a diferença</h2>
      </div>
      <div className="arv-feature-grid">
        {items.map(([icon, title, desc]) => (
          <div className="arv-feature" key={title}>
            <div className="arv-feature-icon"><i className={"ph " + icon}></i></div>
            <h3>{title}</h3>
            <p>{desc}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function Galeria() {
  const GRID_LIMIT = 9;
  const shots = [
    ["./assets/photos/area-piscina.jpeg",        "Piscina com ilha central",            true],
    ["./assets/photos/angulo-piscina.jpeg",      "Vista da piscina e área de lazer",    false],
    ["./assets/photos/area-lazer.jpeg",          "Área de lazer completa",              false],
    ["./assets/photos/pessoas-conversando.jpeg", "Espaços de convívio ao entardecer",   false],
    ["./assets/photos/casal-passeando.png",      "Jardins e trilhas para caminhar",     true],
    ["./assets/photos/quadra-volei-1.jpeg",      "Quadra de vôlei de areia",            false],
    ["./assets/photos/area-churrasqueira.jpeg",  "Espaço gourmet e churrasqueira",      false],
    ["./assets/photos/parquinho.jpeg",           "Parquinho infantil",                  false],
    ["./assets/photos/crianca-pedalando.jpeg",   "Segurança e liberdade para as crianças", false],
    ["./assets/photos/prainha-rio-1.jpeg",       "Prainha do riacho natural",           false],
    ["./assets/photos/prainha-rio-2.webp",       "Riacho ao entardecer",                false],
    ["./assets/photos/riacho-natural-2.jpeg",    "Riacho natural preservado",           false],
    ["./assets/photos/area-lazer-aerea.webp",    "Área de lazer — visão aérea",         false],
    ["./assets/photos/piscina-aerea.jpeg",       "Piscina — visão aérea",               false],
    ["./assets/photos/quadra-volei-upscale.png", "Quadra de vôlei",                    false],
    ["./assets/photos/quadra-volei-zoom.jpeg",   "Quadra de vôlei — detalhe",           false],
    ["./assets/photos/zoom-churrasqueira.jpeg",  "Churrasqueira gourmet — detalhe",     false],
    ["./assets/photos/ping-pong.jpeg",           "Salão de jogos",                      false],
    ["./assets/photos/banheiro.jpeg",            "Acabamento premium",                  false],
    ["./assets/photos/modelo-casa-1.jpeg",       "Modelo de casa — opção 1",            false],
    ["./assets/photos/modelo-casa-2.jpeg",       "Modelo de casa — opção 2",            false],
    ["./assets/photos/modelo-casa-3.jpeg",       "Modelo de casa — opção 3",            false],
    ["./assets/photos/fachada-entrada.jpg",      "Entrada do condomínio",               false],
  ];

  const [lightbox, setLightbox] = React.useState(null);
  const [dragStart, setDragStart] = React.useState(null);
  const thumbsRef = React.useRef(null);
  const moreCount = shots.length - GRID_LIMIT;

  const open = (i) => setLightbox(i);
  const close = () => setLightbox(null);
  const prev = (e) => { e && e.stopPropagation(); setLightbox((c) => (c - 1 + shots.length) % shots.length); };
  const next = (e) => { e && e.stopPropagation(); setLightbox((c) => (c + 1) % shots.length); };

  React.useEffect(() => {
    if (lightbox === null) return;
    const onKey = (e) => {
      if (e.key === "Escape") close();
      if (e.key === "ArrowLeft") prev();
      if (e.key === "ArrowRight") next();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [lightbox]);

  React.useEffect(() => {
    if (lightbox === null || !thumbsRef.current) return;
    const el = thumbsRef.current.children[lightbox];
    if (el) el.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
  }, [lightbox]);

  return (
    <section className="arv-section galeria" id="galeria">
      <div className="arv-section-head">
        <span className="arv-eyebrow">Galeria</span>
        <h2>O condomínio em imagens</h2>
      </div>

      <div className="arv-gallery-grid">
        {shots.slice(0, GRID_LIMIT).map(([src, label, big], i) => {
          const isLast = i === GRID_LIMIT - 1;
          return (
            <div
              className={"arv-gallery-item" + (big ? " big" : "")}
              key={i}
              onClick={() => open(i)}
              style={{ cursor: "pointer" }}
            >
              <div className="arv-photo">
                <img src={src} alt={label} loading="lazy" />
                <span className="arv-photo-cap">{label}</span>
                {isLast && (
                  <div className="arv-gallery-more">
                    <span>+{moreCount} fotos</span>
                  </div>
                )}
              </div>
            </div>
          );
        })}
      </div>

      {lightbox !== null && (
        <div className="arv-lb-backdrop" onClick={close}>
          <button className="arv-lb-close" onClick={close} aria-label="Fechar">
            <i className="ph ph-x"></i>
          </button>
          <div className="arv-lb-main" onClick={(e) => e.stopPropagation()}>
            <button className="arv-lb-arrow left" onClick={prev} aria-label="Anterior">
              <i className="ph ph-arrow-left"></i>
            </button>
            <div className="arv-lb-img-wrap">
              <img
                src={shots[lightbox][0]}
                alt={shots[lightbox][1]}
                className="arv-lb-img"
                onMouseDown={(e) => setDragStart(e.clientX)}
                onMouseUp={(e) => {
                  const diff = dragStart - e.clientX;
                  if (diff > 50) next();
                  else if (diff < -50) prev();
                }}
                onMouseLeave={() => setDragStart(null)}
              />
              <p className="arv-lb-caption">{shots[lightbox][1]}</p>
            </div>
            <button className="arv-lb-arrow right" onClick={next} aria-label="Próxima">
              <i className="ph ph-arrow-right"></i>
            </button>
          </div>
          <div className="arv-lb-thumbs-wrap" onClick={(e) => e.stopPropagation()}>
            <div className="arv-lb-thumbs" ref={thumbsRef}>
              {shots.map(([src, label], i) => (
                <button
                  key={i}
                  className={"arv-lb-thumb" + (i === lightbox ? " active" : "")}
                  onClick={() => setLightbox(i)}
                  aria-label={label}
                >
                  <img src={src} alt={label} />
                </button>
              ))}
            </div>
          </div>
        </div>
      )}
    </section>
  );
}

function Localizacao() {
  return (
    <section className="arv-section localizacao" id="localizacao">
      <div className="arv-section-head">
        <span className="arv-eyebrow">Onde estamos</span>
        <h2>Localização</h2>
        <p className="arv-section-sub">Barreirinhas, porta de entrada dos Lençóis Maranhenses. Fácil acesso pela BR-402.</p>
      </div>
      <div className="arv-loc-actions">
        <a
          href="https://maps.google.com/?q=-2.795858,-42.849087"
          target="_blank"
          rel="noopener noreferrer"
          className="arv-btn primary"
        >
          <img src="https://www.google.com/favicon.ico" width="18" height="18" style={{borderRadius:"2px"}} /> Abrir no Google Maps
        </a>
        <a
          href="https://waze.com/ul?ll=-2.795858,-42.849087&navigate=yes"
          target="_blank"
          rel="noopener noreferrer"
          className="arv-btn ghost"
        >
          <img src="https://www.waze.com/favicon.ico" width="18" height="18" /> Abrir no Waze
        </a>
      </div>
      <div className="arv-loc-map">
        <iframe
          src="https://maps.google.com/maps?q=-2.795858,-42.849087&z=15&output=embed"
          width="100%"
          height="420"
          style={{ border: 0, display: "block", borderRadius: "var(--radius-lg)" }}
          allowFullScreen=""
          loading="lazy"
          referrerPolicy="no-referrer-when-downgrade"
          title="Localização Acqua Riacho Verde"
        ></iframe>
      </div>
    </section>
  );
}

Object.assign(window, { Photo, Hero, Sobre, Diferenciais, Galeria, Localizacao });