// 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>
  );
}

// ---------- Hero: vídeo de fundo ----------
// Aceita arquivo local/URL de mp4/webm OU link do YouTube/Vimeo.
function ytId(u) { const m = String(u).match(/(?:youtu\.be\/|[?&]v=|embed\/|shorts\/)([\w-]{11})/); return m ? m[1] : null; }
function vimeoId(u) { const m = String(u).match(/vimeo\.com\/(?:video\/)?(\d+)/); return m ? m[1] : null; }

function HeroVideo({ src, poster }) {
  const yt = ytId(src), vm = vimeoId(src);
  const aRef = useRef(null), bRef = useRef(null);
  const [front, setFront] = useState(0);
  // loop suave sem rebobinar: dois players do mesmo arquivo se cruzam em fade
  // no fim de cada volta — nada de seek, então a reprodução fica fluida.
  useEffect(() => {
    const a = aRef.current, b = bRef.current;
    if (!a || !b) return;
    const FADE = 1.2;
    let cur = 0, armed = false;
    const els = [a, b];
    a.play().catch(() => {});
    const onTime = (e) => {
      const v = e.target;
      if (els[cur] !== v || !v.duration || armed) return;
      if (v.duration - v.currentTime <= FADE) {
        armed = true;
        const nxt = els[1 - cur];
        nxt.currentTime = 0;
        nxt.play().catch(() => {});
        cur = 1 - cur;
        setFront(cur);
        setTimeout(() => { v.pause(); v.currentTime = 0; armed = false; }, FADE * 1000);
      }
    };
    els.forEach((v) => v.addEventListener("timeupdate", onTime));
    return () => els.forEach((v) => v.removeEventListener("timeupdate", onTime));
  }, [src]);
  return (
    <div className="hero-bg">
      <div className="hero-slide is-active hero-video-wrap" aria-hidden="true">
        {!src && <div className="hero-media-ph" data-label="vídeo do loteamento — cole o link ou arquivo nos Tweaks"></div>}
        {src && yt && (
          <iframe className="hero-video-frame" title="Vídeo do loteamento" allow="autoplay; encrypted-media" frameBorder="0"
            src={`https://www.youtube.com/embed/${yt}?autoplay=1&mute=1&loop=1&controls=0&playsinline=1&modestbranding=1&rel=0&showinfo=0&disablekb=1&playlist=${yt}`}></iframe>
        )}
        {src && !yt && vm && (
          <iframe className="hero-video-frame" title="Vídeo do loteamento" allow="autoplay" frameBorder="0"
            src={`https://player.vimeo.com/video/${vm}?autoplay=1&muted=1&loop=1&background=1`}></iframe>
        )}
        {src && !yt && !vm && (
          <>
            <video ref={aRef} className={"hero-media-el hero-vid" + (front === 0 ? " is-front" : "")}
              src={src} poster={poster || undefined} muted playsInline preload="auto"></video>
            <video ref={bRef} className={"hero-media-el hero-vid" + (front === 1 ? " is-front" : "")}
              src={src} muted playsInline preload="auto"></video>
          </>
        )}
      </div>
    </div>
  );
}

function Hero({ headline, sub, media = "slideshow", videoSrc = "", videoPoster = "" }) {
  return (
    <section className="hero" id="topo">
      {media === "video" ? <HeroVideo src={videoSrc} poster={videoPoster} /> : <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">
            <img className="infra-photo" src="assets/foto-infraestrutura.jpg" alt="Rua pavimentada do loteamento com vista para as montanhas" loading="lazy" />
          </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>Amplas áreas verdes</strong>Espaços abertos e a melhor vista da cidade em todos os lotes.</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 ----------
// Mosaico em 3 colunas de larguras diferentes: cada foto mantem sua proporcao
// original (sem corte) e os dois retratos ficam em tamanhos distintos.
const GALLERY = [
  { t: "Vista geral do loteamento", src: "assets/vista-geral.jpg", col: 0 },
  { t: "Casas e entrada", src: "assets/entrada.jpeg", col: 0 },
  { t: "Lotes demarcados", src: "assets/lotes.png", col: 1 },
  { t: "Maquete do projeto", src: "assets/maquete.png", col: 2 },
  { t: "Ruas pavimentadas", src: "assets/foto-infraestrutura.jpg", col: 2 },
];

function Lightbox({ items, index, onClose, onStep }) {
  useEffect(() => {
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowRight") onStep(1);
      if (e.key === "ArrowLeft") onStep(-1);
    };
    document.addEventListener("keydown", onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = prev; };
  }, [onClose, onStep]);
  const it = items[index];
  return (
    <div className="lb" role="dialog" aria-modal="true" aria-label={it.t} onClick={onClose}>
      <button type="button" className="lb-close" aria-label="Fechar" onClick={onClose}>&times;</button>
      <button type="button" className="lb-nav prev" aria-label="Anterior"
        onClick={(e) => { e.stopPropagation(); onStep(-1); }}>&#8249;</button>
      <figure className="lb-figure" onClick={(e) => e.stopPropagation()}>
        <img src={it.src} alt={it.t} />
        <figcaption>{it.t}<span>{index + 1} / {items.length}</span></figcaption>
      </figure>
      <button type="button" className="lb-nav next" aria-label="Próxima"
        onClick={(e) => { e.stopPropagation(); onStep(1); }}>&#8250;</button>
    </div>
  );
}

function Galeria() {
  const [open, setOpen] = useState(-1);
  const step = (d) => setOpen((i) => (i + d + GALLERY.length) % GALLERY.length);
  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, da infraestrutura e do entorno do loteamento. Clique para ampliar.</p>
        </div>
        <div className="gal-mosaic reveal">
          {[0, 1, 2].map((c) => (
            <div className="gal-col" key={c}>
              {GALLERY.map((it, i) => it.col === c && (
                <button type="button" className="gal-tile" key={i} aria-label={`Ampliar: ${it.t}`}
                  onClick={() => setOpen(i)}>
                  <img src={it.src} alt={it.t} loading="lazy" />
                  <span className="gal-zoom" aria-hidden="true">+</span>
                </button>
              ))}
            </div>
          ))}
        </div>
      </div>
      {open >= 0 && <Lightbox items={GALLERY} index={open} onClose={() => setOpen(-1)} onStep={step} />}
    </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 });