// components.jsx — page sections for Loteamento Panorama
const { useState, useEffect, useRef } = React;
const Ic = window.Ic;

// Turn "*palavra*" markers into animated, colored emphasis spans.
function emphasize(text) {
  if (typeof text !== "string") return text;
  return text.split(/(\*[^*]+\*)/g).map((p, i) =>
    p.length > 2 && p.startsWith("*") && p.endsWith("*")
      ? <span className="hl-word" key={i}>{p.slice(1, -1)}</span>
      : p
  );
}

function Ph({ label, className = "", icon }) {
  return (
    <div className={"ph " + className} data-label={label}>
      {icon && <div className="ph-icon">{icon}</div>}
    </div>
  );
}

function scrollToId(id) {
  const el = document.getElementById(id);
  if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 64, behavior: "smooth" });
}

// ---------- Header ----------
function Header({ wa }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 12);
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  return (
    <header className="site-header" data-scrolled={scrolled ? "1" : "0"}>
      <div className="container header-inner">
        <a className="brand" href="#topo" onClick={(e) => { e.preventDefault(); scrollToId("topo"); }}>
          <img className="brand-mark" src="assets/logo.png" alt="Logo Loteamento Panorama" />
          <span className="brand-text">
            <span className="brand-name">Panorama</span>
            <span className="brand-sub">Sta. Maria do Itabira · MG</span>
          </span>
        </a>
        <nav className="nav">
          <a href="#diferenciais" onClick={(e) => { e.preventDefault(); scrollToId("diferenciais"); }}>Diferenciais</a>
          <a href="#galeria" onClick={(e) => { e.preventDefault(); scrollToId("galeria"); }}>Galeria</a>
          <a href="#localizacao" onClick={(e) => { e.preventDefault(); scrollToId("localizacao"); }}>Localização</a>
          <a href="#condicoes" onClick={(e) => { e.preventDefault(); scrollToId("condicoes"); }}>Condições</a>
        </nav>
        <div className="header-cta">
          <a className="btn btn-primary" href="#contato" onClick={(e) => { e.preventDefault(); scrollToId("contato"); }}>
            <span className="btn-label">Falar com <span className="long">o&nbsp;</span>vendedor</span>
          </a>
        </div>
      </div>
    </header>
  );
}

// ---------- Hero ----------
// Slideshow de fundo: troque as URLs por fotos reais do loteamento.
// Os itens com `src` viram <img>; sem `src` exibem uma cena-placeholder.
const HERO_SLIDES = [
  { src: "", scene: "aerea",   label: "vista aérea do loteamento" },
  { src: "", scene: "verde",   label: "áreas verdes e natureza" },
  { src: "", scene: "rua",     label: "ruas pavimentadas" },
  { src: "", scene: "porfim",  label: "pôr do sol nas montanhas" },
];

function HeroSlideshow() {
  const [idx, setIdx] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setIdx((i) => (i + 1) % HERO_SLIDES.length), 6000);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="hero-bg">
      {HERO_SLIDES.map((s, i) => (
        <div
          key={i}
          className={"hero-slide" + (i === idx ? " is-active" : "")}
          data-scene={s.scene}
          aria-hidden="true"
        >
          {s.src
            ? <img className="hero-media-el" src={s.src} alt="" />
            : <div className="hero-media-ph" data-label={s.label}></div>}
        </div>
      ))}
    </div>
  );
}

function Hero({ headline, sub }) {
  return (
    <section className="hero" id="topo">
      <HeroSlideshow />
      <div className="hero-grad"></div>

      <div className="hero-locchip glass-dark">
        <span className="badge-ico"><Ic.pin /></span>
        <span className="badge-txt">
          <span className="big">Santa Maria do Itabira</span>
          <span className="small">Minas Gerais</span>
        </span>
      </div>

      <div className="container hero-content">
        <div className="hero-copy reveal">
          <span className="eyebrow">Loteamento · Santa Maria do Itabira, MG</span>
          <h1>{emphasize(headline)}</h1>
          <p className="lede">{sub}</p>
          <div className="hero-actions">
            <a className="btn btn-primary btn-lg" href="#contato" onClick={(e) => { e.preventDefault(); scrollToId("contato"); }}>
              Falar com o vendedor <Ic.arrow style={{ width: 18, height: 18 }} />
            </a>
            <a className="btn btn-ghost btn-lg" href="#galeria" onClick={(e) => { e.preventDefault(); scrollToId("galeria"); }}>
              Ver galeria
            </a>
          </div>
          <div className="hero-trust glass-dark">
            <span className="hero-trust-item"><Ic.leaf /> Amplas áreas verdes</span>
            <span className="hero-trust-item"><Ic.road /> Ruas pavimentadas</span>
            <span className="hero-trust-item"><Ic.shield /> Financiamento facilitado</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Diferenciais ----------
const FEATURES = [
  { ico: "leaf", t: "Áreas verdes preservadas", d: "Espaços arborizados e áreas de convivência integradas ao loteamento, para viver perto da natureza." },
  { ico: "road", t: "Ruas pavimentadas", d: "Infraestrutura completa de vias pavimentadas, com acesso confortável a todos os lotes." },
  { ico: "sun", t: "Sossego e qualidade de vida", d: "Ar puro, tranquilidade e o ritmo bom do interior — ideal para a casa própria ou o refúgio de fim de semana." },
  { ico: "pin", t: "Pertinho do centro", d: "A poucos minutos do centro de Santa Maria do Itabira, com tudo o que sua família precisa por perto." },
];

function Diferenciais() {
  return (
    <section className="section" id="diferenciais">
      <div className="blobs" aria-hidden="true"></div>
      <div className="container">
        <div className="sec-head reveal">
          <span className="eyebrow">Diferenciais & infraestrutura</span>
          <h2>Feito para quem quer <span className="hl-word">viver bem</span>, com os pés na <span className="hl-word">natureza</span>.</h2>
          <p className="lede">Mais do que um terreno: um lugar planejado para o dia a dia da família, com infraestrutura e o verde que faz a diferença.</p>
        </div>
        <div className="feature-grid">
          {FEATURES.map((f, i) => {
            const Icon = Ic[f.ico];
            return (
              <article className="feature-card glass-soft reveal" key={i} style={{ transitionDelay: (i * 70) + "ms" }}>
                <div className="feature-ico"><Icon /></div>
                <h3>{f.t}</h3>
                <p>{f.d}</p>
              </article>
            );
          })}
        </div>

        <div className="infra-band">
          <div className="reveal">
            <Ph label="foto-infraestrutura.jpg · entrada / portaria" icon={<Ic.image />} />
          </div>
          <div className="reveal">
            <span className="eyebrow">Estrutura pronta</span>
            <h2 style={{ fontSize: "clamp(26px,3vw,38px)", marginTop: 14 }}>Tudo pronto para você <span className="hl-word">construir</span>.</h2>
            <ul className="infra-list">
              <li><span className="chk"><Ic.check /></span><span><strong>Vias pavimentadas</strong>Ruas preparadas e de fácil acesso em todo o empreendimento.</span></li>
              <li><span className="chk"><Ic.check /></span><span><strong>Áreas verdes e de lazer</strong>Espaços de convivência preservados para a comunidade.</span></li>
              <li><span className="chk"><Ic.check /></span><span><strong>Lotes prontos para registro</strong>Documentação regularizada para você começar com segurança.</span></li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Galeria ----------
const GALLERY = [
  { c: "g-a", l: "render-aereo.jpg · vista geral do loteamento" },
  { c: "g-b", l: "foto-area-verde.jpg" },
  { c: "g-c", l: "foto-rua-pavimentada.jpg" },
  { c: "g-d", l: "render-lote.jpg" },
  { c: "g-e", l: "foto-entrada.jpg" },
  { c: "g-f", l: "foto-por-do-sol.jpg" },
];

function Galeria() {
  return (
    <section className="section gallery" id="galeria">
      <div className="container">
        <div className="sec-head center reveal">
          <span className="eyebrow">Galeria & renders</span>
          <h2>Conheça o <span className="hl-word">Panorama</span> de perto.</h2>
          <p className="lede">Imagens do projeto e do entorno. Em breve, substituídas pelas fotos e renders oficiais do empreendimento.</p>
        </div>
        <div className="gallery-grid">
          {GALLERY.map((g, i) => (
            <div className={"reveal " + g.c} key={i} style={{ transitionDelay: (i * 60) + "ms" }}>
              <Ph label={g.l} icon={<Ic.image />} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Localização ----------
// Mapa Leaflet + tiles OpenStreetMap — sem HUD/overlay do Google.
// Coordenadas exatas do Loteamento Panorama, Santa Maria do Itabira, MG.
const MAP_CENTER = [-19.45321240276157, -43.11258941078374];

// Estilos de mapa disponíveis (todos com tiles gratuitos, sem HUD do Google).
const MAP_TILES = {
  voyager: {
    url: "https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png",
    maxZoom: 19,
  },
  positron: {
    url: "https://{s}.basemaps.cartocdn.com/rastertiles/light_all/{z}/{x}/{y}{r}.png",
    maxZoom: 19,
  },
  dark: {
    url: "https://{s}.basemaps.cartocdn.com/rastertiles/dark_all/{z}/{x}/{y}{r}.png",
    maxZoom: 19,
  },
  osm: {
    url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
    maxZoom: 19,
  },
  terrain: {
    url: "https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png",
    maxZoom: 17,
  },
  satellite: {
    url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
    maxZoom: 19,
    maxNativeZoom: 18,
  },
  satClarity: {
    url: "https://clarity.maptiles.arcgis.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
    maxZoom: 19,
    maxNativeZoom: 19,
  },
  satGoogle: {
    url: "https://mt{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
    subdomains: ["0", "1", "2", "3"],
    maxZoom: 20,
    maxNativeZoom: 20,
  },
  satGoogleHybrid: {
    url: "https://mt{s}.google.com/vt/lyrs=y&x={x}&y={y}&z={z}",
    subdomains: ["0", "1", "2", "3"],
    maxZoom: 20,
    maxNativeZoom: 20,
  },
  satEsriHybrid: {
    url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
    maxZoom: 19,
    maxNativeZoom: 18,
    labels: "https://{s}.basemaps.cartocdn.com/rastertiles/light_only_labels/{z}/{x}/{y}{r}.png",
  },
};

function LeafletMap({ mapStyle = "voyager" }) {
  const ref = useRef(null);
  const mapRef = useRef(null);
  const tileRef = useRef(null);
  const labelRef = useRef(null);

  useEffect(() => {
    if (!ref.current || !window.L || ref.current._leaflet_id) return;
    const map = window.L.map(ref.current, {
      center: MAP_CENTER,
      zoom: 16,
      zoomControl: false,
      scrollWheelZoom: false,
      attributionControl: false,
    });
    mapRef.current = map;
    // marcador customizado (gota terracota)
    const icon = window.L.divIcon({
      className: "map-pin",
      html: '<span class="map-pin-dot"></span>',
      iconSize: [26, 26],
      iconAnchor: [13, 13],
    });
    window.L.marker(MAP_CENTER, { icon }).addTo(map);
    window.L.control.zoom({ position: "bottomright" }).addTo(map);

    // Leaflet desenha os tiles com base no tamanho do container no momento da
    // criação. Como o container pode ainda não ter o tamanho final (imagens
    // acima, animação .reveal, troca de estilo), forçamos o recálculo.
    const fix = () => map.invalidateSize();
    const tA = setTimeout(fix, 60);
    const tB = setTimeout(fix, 350);
    const tC = setTimeout(fix, 800);
    let ro;
    if ("ResizeObserver" in window) {
      ro = new ResizeObserver(() => fix());
      ro.observe(ref.current);
    }
    window.addEventListener("resize", fix);

    return () => {
      clearTimeout(tA); clearTimeout(tB); clearTimeout(tC);
      if (ro) ro.disconnect();
      window.removeEventListener("resize", fix);
      map.remove(); mapRef.current = null;
    };
  }, []);

  // (re)apply the chosen tile layer whenever mapStyle changes
  useEffect(() => {
    const map = mapRef.current;
    if (!map || !window.L) return;
    if (tileRef.current) map.removeLayer(tileRef.current);
    const cfg = MAP_TILES[mapStyle] || MAP_TILES.voyager;
    if (labelRef.current) { map.removeLayer(labelRef.current); labelRef.current = null; }
    tileRef.current = window.L.tileLayer(cfg.url, {
      maxZoom: cfg.maxZoom,
      maxNativeZoom: cfg.maxNativeZoom || cfg.maxZoom,
      subdomains: cfg.subdomains || "abc",
    }).addTo(map);
    if (cfg.labels) {
      labelRef.current = window.L.tileLayer(cfg.labels, { maxZoom: cfg.maxZoom, pane: "shadowPane" }).addTo(map);
    }
    // recalcula o tamanho para preencher todo o quadro
    requestAnimationFrame(() => map.invalidateSize());
    setTimeout(() => map.invalidateSize(), 200);
  }, [mapStyle]);

  return <div ref={ref} className="loc-map-frame" aria-label="Mapa de Santa Maria do Itabira, MG"></div>;
}

// Embeds via iframe (Google, OpenStreetMap). Cada um é recortado para ocultar o HUD.
const MAP_EMBEDS = {
  google: {
    src: "https://www.google.com/maps?q=-19.45321240276157,-43.11258941078374&z=16&output=embed",
    clip: false,
  },
  googleSat: {
    src: "https://www.google.com/maps?q=-19.45321240276157,-43.11258941078374&z=16&t=k&output=embed",
    clip: false,
  },
  osmEmbed: {
    src: "https://www.openstreetmap.org/export/embed.html?bbox=-43.1336%2C-19.4677%2C-43.0916%2C-19.4387&layer=mapnik&marker=-19.45321240276157%2C-43.11258941078374",
    clip: false,
  },
};

function MapEmbed({ embed }) {
  const cfg = MAP_EMBEDS[embed] || MAP_EMBEDS.google;
  if (cfg.clip) {
    // oversize + offset to crop out the provider's HUD/controls
    return (
      <div className="loc-map-frame loc-map-clip">
        <iframe
          className="loc-iframe loc-iframe-clip"
          title="Mapa de Santa Maria do Itabira, MG"
          src={cfg.src}
          loading="lazy"
          referrerPolicy="no-referrer-when-downgrade"
        ></iframe>
      </div>
    );
  }
  return (
    <iframe
      className="loc-map-frame loc-iframe"
      title="Mapa de Santa Maria do Itabira, MG"
      src={cfg.src}
      loading="lazy"
      referrerPolicy="no-referrer-when-downgrade"
      allowFullScreen
    ></iframe>
  );
}

// Decide entre mapa Leaflet (tiles) ou embed via iframe conforme a escolha.
function MapaLocal({ mapStyle = "voyager" }) {
  if (MAP_EMBEDS[mapStyle]) return <MapEmbed embed={mapStyle} />;
  return <LeafletMap mapStyle={mapStyle} />;
}

const POINTS = [
  { t: "Centro de Santa Maria do Itabira", m: "5 min" },
  { t: "Escolas e comércio local", m: "perto" },
  { t: "Acesso à rodovia", m: "fácil" },
  { t: "Belo Horizonte", m: "região" },
];

function Localizacao({ mapStyle, pinColor }) {
  return (
    <section className="section" id="localizacao">
      <div className="blobs" aria-hidden="true"></div>
      <div className="container loc-grid">
        <div className="reveal">
          <span className="eyebrow">Localização</span>
          <h2 style={{ fontSize: "clamp(28px,3.5vw,42px)", marginTop: 14 }}>No <span className="hl-word">coração de Minas</span>, perto de tudo.</h2>
          <p className="lede" style={{ marginTop: 16 }}>Em Santa Maria do Itabira, o Panorama une a tranquilidade do interior à praticidade de estar a poucos minutos do centro da cidade.</p>
          <ul className="loc-points">
            {POINTS.map((p, i) => (
              <li key={i}><span className="dot" />{p.t}<span className="mins">{p.m}</span></li>
            ))}
          </ul>
        </div>
        <div className="loc-map reveal" style={pinColor ? { "--map-pin-color": pinColor } : {}}>
          <MapaLocal mapStyle={mapStyle} />
          <a
            className="loc-card glass"
            href="https://www.google.com/maps/search/?api=1&query=-19.45321240276157,-43.11258941078374"
            target="_blank"
            rel="noopener noreferrer"
            title="Abrir no Google Maps"
          >
            <span className="loc-card-ico"><Ic.pin /></span>
            <div className="loc-card-txt">
              <strong>Loteamento Panorama</strong>
              <span>Santa Maria do Itabira · Minas Gerais</span>
            </div>
          </a>
        </div>
      </div>
    </section>
  );
}

// ---------- Condições ----------
const CONDS = [
  { n: "01", t: "Entrada facilitada", d: "Comece a realizar o sonho com uma entrada que cabe no seu planejamento.", hl: "Entrada acessível" },
  { n: "02", t: "Parcelas que cabem no bolso", d: "Condições pensadas para a família, com parcelamento direto e sem complicação.", hl: "Parcelado" },
  { n: "03", t: "Atendimento direto", d: "Fale diretamente com o vendedor e receba a tabela de valores e disponibilidade atualizada.", hl: "Sem intermediários" },
];

function Condicoes() {
  return (
    <section className="section cond" id="condicoes">
      <div className="container">
        <div className="sec-head center reveal">
          <span className="eyebrow">Condições de pagamento</span>
          <h2>Condições pensadas para a <span className="hl-word">sua família</span>.</h2>
          <p className="lede">Converse com o vendedor para conhecer os valores, a disponibilidade de lotes e as melhores condições para você.</p>
        </div>
        <div className="cond-grid">
          {CONDS.map((c, i) => (
            <article className="cond-card reveal" key={i} style={{ transitionDelay: (i * 80) + "ms" }}>
              <span className="num">{c.n}</span>
              <h3>{c.t}</h3>
              <p>{c.d}</p>
              <span className="hl">{c.hl}</span>
            </article>
          ))}
        </div>
        <p className="cond-note">* Valores e condições sujeitos à disponibilidade. Consulte o vendedor para informações atualizadas.</p>
      </div>
    </section>
  );
}

// ---------- Footer ----------
function Footer({ contact }) {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand">
            <a className="brand" href="#topo" onClick={(e) => { e.preventDefault(); scrollToId("topo"); }}>
              <img className="brand-mark" src="assets/logo.png" alt="Logo Loteamento Panorama" />
              <span className="brand-text">
                <span className="brand-name">Panorama</span>
                <span className="brand-sub">Sta. Maria do Itabira · MG</span>
              </span>
            </a>
            <p>Loteamento em meio à natureza, com áreas verdes e ruas pavimentadas — o lugar certo para a casa própria ou o refúgio da família.</p>
          </div>
          <div className="footer-cols">
            <div className="footer-col">
              <h4>Navegação</h4>
              <ul>
                <li><a href="#diferenciais" onClick={(e) => { e.preventDefault(); scrollToId("diferenciais"); }}>Diferenciais</a></li>
                <li><a href="#galeria" onClick={(e) => { e.preventDefault(); scrollToId("galeria"); }}>Galeria</a></li>
                <li><a href="#localizacao" onClick={(e) => { e.preventDefault(); scrollToId("localizacao"); }}>Localização</a></li>
                <li><a href="#condicoes" onClick={(e) => { e.preventDefault(); scrollToId("condicoes"); }}>Condições</a></li>
              </ul>
            </div>
            <div className="footer-col">
              <h4>Contato</h4>
              <ul>
                <li><a href={`https://wa.me/${contact.whatsapp}`} target="_blank" rel="noopener">WhatsApp direto</a></li>
                <li>Atendimento de segunda a sábado</li>
              </ul>
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© {new Date().getFullYear()} Loteamento Panorama. Todos os direitos reservados.</span>
          <span>Imagens meramente ilustrativas · CRECI 00000</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Ph, scrollToId, Header, Hero, Diferenciais, Galeria, Localizacao, Condicoes, Footer });