/* ============================================================
   Seções — Lavender Eventos
   ============================================================ */

/* ---------------- HEADER ---------------- */
function Header() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 40);
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  const solid = scrolled || open;
  return (
    <header
      className={
      "fixed top-0 inset-x-0 z-50 transition-all duration-500 " + (
      solid ? "bg-cream backdrop-blur-md border-b border-ink/8 shadow-sm py-3" : "py-5")
      }>
      
      <div className="mx-auto max-w-[1240px] px-6 flex items-center justify-between">
        <a href="#inicio" className="relative shrink-0 block h-9 md:h-11" aria-label="Lavender Eventos">
          <img
            src={LV.logo.horizontalBranco}
            alt="Lavender Eventos"
            className="h-full w-auto transition-opacity duration-500"
            style={{ opacity: solid ? 0 : 1 }} />
          
          <img
            src={LV.logo.horizontalVerde}
            alt=""
            aria-hidden="true"
            className="absolute inset-0 h-full w-auto transition-opacity duration-500"
            style={{ opacity: solid ? 1 : 0 }} />
          
        </a>

        <nav className="hidden md:flex items-center gap-6 lg:gap-8">
          {LV.nav.map((n) =>
          <a
            key={n.href}
            href={n.href}
            className={
            "text-[14px] tracking-wide transition-colors duration-300 link-underline " + (
            solid ? "text-ink/80 hover:text-forest" : "text-cream/90 hover:text-cream")
            }>
            
              {n.label}
            </a>
          )}
          <a
            href={WA("Olá! Gostaria de reservar a Chácara Lavender.")}
            target="_blank"
            rel="noopener noreferrer"
            className={
            "inline-flex items-center gap-2 px-5 py-2.5 rounded-full text-[13px] font-medium tracking-wide transition-all duration-300 " + (
            solid ?
            "bg-forest text-cream hover:bg-forest-deep" :
            "border border-cream/40 text-cream hover:bg-cream hover:text-forest-deep")
            }>
            
            {Ic.wa()} Reservar
          </a>
        </nav>

        <button
          className="md:hidden flex flex-col gap-[5px] p-2"
          onClick={() => setOpen((o) => !o)}
          aria-label="Menu">
          
          {[0, 1, 2].map((i) =>
          <span
            key={i}
            className={"block h-[2px] w-6 transition-all duration-300 " + (solid ? "bg-forest" : "bg-cream")}
            style={
            open ?
            i === 0 ?
            { transform: "translateY(7px) rotate(45deg)" } :
            i === 1 ?
            { opacity: 0 } :
            { transform: "translateY(-7px) rotate(-45deg)" } :
            {}
            }>
          </span>
          )}
        </button>
      </div>

      {/* mobile drawer */}
      <div
        className={
        "md:hidden overflow-hidden transition-[max-height] duration-500 " + (open ? "max-h-96" : "max-h-0")
        }>
        
        <div className="px-6 pt-4 pb-6 flex flex-col gap-1">
          {LV.nav.map((n) =>
          <a
            key={n.href}
            href={n.href}
            onClick={() => setOpen(false)}
            className="py-2.5 text-[15px] text-ink/80 border-b border-ink/8">
            
              {n.label}
            </a>
          )}
          <a
            href={WA("Olá! Gostaria de reservar a Chácara Lavender.")}
            target="_blank"
            rel="noopener noreferrer"
            className="mt-4 inline-flex items-center justify-center gap-2 px-5 py-3 rounded-full bg-forest text-cream text-[14px]">
            
            {Ic.wa()} Reservar pelo WhatsApp
          </a>
        </div>
      </div>
    </header>);

}

/* ---------------- HERO ---------------- */
function Hero() {
  return (
    <section id="inicio" className="relative min-h-[100svh] flex items-end overflow-hidden pt-28">
      <div className="absolute inset-0">
        <img src={LV.img.heroGramado} alt="" className="w-full h-full object-cover hero-kenburns" />
        <div className="absolute inset-0 bg-gradient-to-t from-forest-deep via-forest-deep/30 to-forest-deep/55"></div>
        <div className="absolute inset-x-0 bottom-0 h-2/3 bg-gradient-to-t from-forest-deep/95 to-transparent"></div>
      </div>

      <div className="relative z-10 mx-auto max-w-[1240px] w-full px-6 pb-20 md:pb-28">
        <div className="max-w-[860px]" style={{ opacity: 1 }}>
          <Eyebrow light>{LV.contact.cidade}</Eyebrow>
          <h1 className="mt-6 font-display text-cream text-[clamp(3rem,9vw,7rem)] leading-[0.92] font-light">
            Onde a floresta
            <br />
            <span className="italic text-gold-soft">vira celebração.</span>
          </h1>
          <p className="mt-7 max-w-[560px] text-cream/85 text-[clamp(1rem,1.6vw,1.25rem)] leading-relaxed font-light">Uma chácara de 12.000 m² entre mata nativa e gramado, a minutos do Show Rural e do Autódromo de Cascavel. Para o seu fim de semana em família ou para o seu próximo investimento.


          </p>
          <div className="mt-9 flex flex-wrap gap-4">
            <Btn href={WA("Olá! Quero reservar um fim de semana na Chácara Lavender.")} target="_blank" variant="gold">
              Reservar fim de semana
            </Btn>
            <Btn href="#compre" variant="ghostLight">
              Investir na propriedade
            </Btn>
          </div>
        </div>
      </div>

      <a href="#sobre" className="absolute bottom-7 left-1/2 -translate-x-1/2 text-cream/60 hidden md:block animate-bounce-slow" aria-label="Rolar">
        <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" strokeWidth="1.3"><path d="M12 4v15M6 13l6 6 6-6" /></svg>
      </a>
    </section>);

}

/* ---------------- STATS ---------------- */
function Stats() {
  return (
    <section className="bg-forest-deep text-cream">
      <div className="mx-auto max-w-[1240px] px-6 grid grid-cols-2 md:grid-cols-4 divide-x divide-cream/12 border-x border-cream/12">
        {LV.stats.map((s, i) =>
        <Reveal key={i} delay={i * 90} className="py-9 px-5 text-center">
            <div className="font-display text-[clamp(2.2rem,4.5vw,3.4rem)] leading-none text-gold-soft">{s.n}</div>
            <div className="mt-2 text-[12px] tracking-[0.18em] uppercase text-cream/65">{s.u}</div>
          </Reveal>
        )}
      </div>
    </section>);

}

/* ---------------- SOBRE ---------------- */
function Sobre() {
  return (
    <section id="sobre" className="bg-cream">
      <div className="mx-auto max-w-[1240px] px-6 py-24 md:py-32 grid md:grid-cols-12 gap-12 items-center">
        <Reveal className="md:col-span-5">
          <Eyebrow>A chácara</Eyebrow>
          <h2 className="mt-6 font-display text-forest text-[clamp(2.4rem,5vw,4rem)] leading-[1.02] font-light">
            Respire fundo.
            <br />
            O tempo aqui
            <br />
            desacelera.
          </h2>
        </Reveal>
        <Reveal className="md:col-span-6 md:col-start-7" delay={120}>
          <p className="text-ink/75 text-[clamp(1.05rem,1.6vw,1.3rem)] leading-relaxed font-light">
            A <span className="text-forest font-normal">Chácara Lavender</span> é um refúgio cercado por
            9.000 m² de mata nativa preservada e 3.000 m² de gramado aberto. Piscina, quiosque gourmet,
            salão fechado e energia solar autônoma tudo pronto para receber a sua família, os seus amigos
            e os seus melhores momentos.
          </p>
          <div className="mt-8 flex items-center gap-4">
            <img src={LV.logo.simbolo} alt="" className="h-12 w-auto opacity-90" />
            <p className="text-[13px] tracking-[0.2em] uppercase text-forest/60">Natureza · Lazer · Memórias</p>
          </div>
        </Reveal>
      </div>
    </section>);

}

/* ---------------- IMAGE CARD ---------------- */
function FeatureCard({ item, tall = false }) {
  return (
    <Reveal className="group relative overflow-hidden rounded-[3px] bg-ink/5">
      <div className={"overflow-hidden " + (tall ? "aspect-[3/4]" : "aspect-[4/5]")}>
        <img
          src={item.img}
          alt={item.titulo}
          className="w-full h-full object-cover transition-transform duration-[1.2s] ease-out group-hover:scale-105" />
        
      </div>
      <div className="absolute inset-x-0 bottom-0 h-[62%]" style={{ background: "linear-gradient(to top, rgba(13,38,23,0.92) 0%, rgba(13,38,23,0.78) 22%, rgba(13,38,23,0.40) 55%, rgba(13,38,23,0) 100%)" }}></div>
      <div className="absolute inset-x-0 bottom-0 p-6 md:p-7" style={{ textShadow: "0 1px 14px rgba(8,28,17,0.55)" }}>
        <h3 className="font-display text-cream text-[clamp(1.4rem,2.4vw,1.9rem)] leading-tight">{item.titulo}</h3>
        <p className="mt-2.5 text-cream/90 text-[14px] leading-relaxed font-light max-w-[34ch]">{item.texto}</p>
      </div>
    </Reveal>);

}

/* ---------------- INFRAESTRUTURA ---------------- */
function Infra() {
  return (
    <section id="infra" className="bg-paper">
      <div className="mx-auto max-w-[1240px] px-6 py-24 md:py-32">
        <Reveal className="max-w-[680px]">
          <Eyebrow>Infraestrutura · Lazer</Eyebrow>
          <h2 className="mt-6 font-display text-forest text-[clamp(2.2rem,4.6vw,3.6rem)] leading-[1.04] font-light">
            Tudo para o dia inteiro ao ar livre.
          </h2>
        </Reveal>
        <div className="mt-12 grid md:grid-cols-3 gap-5">
          {LV.lazer.map((it, i) =>
          <div key={i} style={{ transitionDelay: i * 80 + "ms" }}>
              <FeatureCard item={it} />
            </div>
          )}
        </div>

        <Reveal className="mt-24 max-w-[680px]">
          <Eyebrow>Infraestrutura · Espaços</Eyebrow>
          <h2 className="mt-6 font-display text-forest text-[clamp(2.2rem,4.6vw,3.6rem)] leading-[1.04] font-light">
            Estrutura pronta para receber.
          </h2>
        </Reveal>
        <div className="mt-12 grid md:grid-cols-3 gap-5">
          {LV.espacos.map((it, i) =>
          <div key={i} style={{ transitionDelay: i * 80 + "ms" }}>
              <FeatureCard item={it} />
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------------- TECNOLOGIA (premium / dark) ---------------- */
function Tech() {
  return (
    <section className="relative overflow-hidden bg-forest-deep text-cream">
      <div className="absolute inset-0 opacity-[0.16]">
        <img src={LV.img.salaoInt} alt="" className="w-full h-full object-cover" />
      </div>
      <div className="absolute inset-0 bg-gradient-to-b from-forest-deep via-forest-deep/92 to-forest-deep"></div>

      <div className="relative mx-auto max-w-[1240px] px-6 py-24 md:py-32">
        <Reveal className="max-w-[760px]">
          <Eyebrow light>Tecnologia & Autonomia</Eyebrow>
          <h2 className="mt-6 font-display text-[clamp(2.3rem,5vw,4rem)] leading-[1.02] font-light">
            Um refúgio na natureza,
            <br />
            <span className="italic text-gold-soft">com tecnologia de verdade.</span>
          </h2>
          <p className="mt-6 text-cream/70 text-[1.1rem] leading-relaxed font-light max-w-[58ch]">
            Diferente de qualquer chácara da região: aqui a energia nunca falta e a iluminação obedece
            ao seu celular.
          </p>
        </Reveal>

        <div className="mt-14 grid md:grid-cols-2 gap-5">
          {LV.tech.map((t, i) =>
          <Reveal key={i} delay={i * 120} className="relative rounded-[4px] border border-cream/15 bg-cream/[0.04] p-8 md:p-10 backdrop-blur-sm">
              <div className="flex items-center gap-4">
                <span className="grid place-items-center w-14 h-14 rounded-full bg-gold/15 text-gold-soft">
                  {i === 0 ? Ic.sun() : Ic.bulb()}
                </span>
                <span className="text-[11px] tracking-[0.3em] uppercase text-gold-soft/80">Destaque premium</span>
              </div>
              <h3 className="mt-6 font-display text-cream text-[clamp(1.6rem,2.6vw,2.1rem)] leading-tight">{t.titulo}</h3>
              <p className="mt-3.5 text-cream/75 text-[15px] leading-relaxed font-light">{t.texto}</p>
              <div className="mt-6 flex flex-wrap gap-2.5">
                {t.tags.map((tag, j) =>
              <span key={j} className="px-3.5 py-1.5 rounded-full border border-cream/20 text-[12px] tracking-wide text-cream/80">
                    {tag}
                  </span>
              )}
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

/* ---------------- ALUGUE ---------------- */
function Alugue() {
  const bullets = [
  "Day use ou pernoite",
  "Aniversários & confraternizações",
  "Casamentos íntimos",
  "Eventos corporativos",
  "Até 30 convidados",
  "Pet friendly"];

  return (
    <section id="alugue" className="bg-cream">
      <div className="mx-auto max-w-[1240px] px-6 py-24 md:py-32 grid md:grid-cols-2 gap-14 md:gap-16 items-center">
        <Reveal className="order-2 md:order-1">
          <Eyebrow>Alugue</Eyebrow>
          <h2 className="mt-6 font-display text-forest text-[clamp(2.4rem,5vw,4rem)] leading-[1.0] font-light">
            Fins de semana
            <br />
            que viram memória.
          </h2>
          <p className="mt-6 text-ink/75 text-[1.1rem] leading-relaxed font-light max-w-[50ch]">
            Reúna a família e os amigos em um cenário de mata nativa, piscina e quiosque gourmet.
            O espaço perfeito para celebrar, descansar e criar histórias longe da cidade.
          </p>
          <ul className="mt-8 grid grid-cols-2 gap-x-6 gap-y-3.5">
            {bullets.map((b, i) =>
            <li key={i} className="flex items-center gap-3 text-[15px] text-ink/80">
                <span className="text-gold">✦</span>
                {b}
              </li>
            )}
          </ul>
          <div className="mt-10 flex flex-wrap gap-4">
            <Btn href={WA("Olá! Quero consultar datas e valores para alugar a Chácara Lavender.")} target="_blank" variant="wa">
              {Ic.wa("#fff")} Consultar datas e valores
            </Btn>
            <Btn href={LV.contact.airbnb} target="_blank" variant="outline">
              Ver no Airbnb
            </Btn>
          </div>
        </Reveal>

        <Reveal className="order-1 md:order-2" delay={120}>
          <div className="relative">
            <div className="overflow-hidden rounded-[3px] aspect-[4/5]">
              <img src={LV.img.quiosqueDeck} alt="Quiosque e piscina" className="w-full h-full object-cover" />
            </div>
            <div className="absolute -bottom-6 -left-6 w-40 overflow-hidden rounded-[3px] border-4 border-cream shadow-lg hidden md:block aspect-square">
              <img src={LV.img.piscina} alt="" className="w-full h-full object-cover" />
            </div>
          </div>
        </Reveal>
      </div>
    </section>);

}

/* ---------------- COMPRE ---------------- */
function Compre() {
  const pontos = [
  "12.000 m² com escritura + negócio + lazer no mesmo lugar",
  "Estrutura completa e pronta para gerar renda com locação",
  "Localização estratégica: Show Rural e Autódromo a poucos minutos",
  "Energia solar própria | Valorização e custo de operação baixo"];

  return (
    <section id="compre" className="relative overflow-hidden bg-forest text-cream">
      <div className="absolute inset-0">
        <img src={LV.img.casaJardim} alt="" className="w-full h-full object-cover opacity-25" />
        <div className="absolute inset-0 bg-gradient-to-r from-forest via-forest/85 to-forest/55"></div>
      </div>
      <div className="relative mx-auto max-w-[1240px] px-6 py-24 md:py-32 grid md:grid-cols-12 gap-12 items-center">
        <Reveal className="md:col-span-7">
          <Eyebrow light>Compre · Oportunidade de investimento</Eyebrow>
          <h2 className="mt-6 font-display text-[clamp(2.4rem,5vw,4rem)] leading-[1.0] font-light">
            Um investimento
            <br />
            que rende lazer.
          </h2>
          <p className="mt-6 text-cream/80 text-[1.1rem] leading-relaxed font-light max-w-[52ch]">
            A Chácara Lavender está à venda como uma oportunidade única: um patrimônio que une renda de
            locação, valorização imobiliária e o melhor refúgio para a sua família.
          </p>
          <ul className="mt-8 space-y-3.5 max-w-[56ch]">
            {pontos.map((p, i) =>
            <li key={i} className="flex items-start gap-3 text-cream/85 text-[15px] leading-relaxed">
                <span className="mt-1 text-gold-soft">✦</span>
                {p}
              </li>
            )}
          </ul>
        </Reveal>

        <Reveal className="md:col-span-5 md:col-start-8" delay={140}>
          <div className="rounded-[5px] border border-cream/20 bg-forest-deep/55 backdrop-blur-md p-8 md:p-10">
            <p className="text-[12px] tracking-[0.28em] uppercase text-cream/60">Valor do imóvel</p>
            <div className="mt-3 font-display leading-none">
              <span className="text-cream/70 text-[1.6rem] align-top">R$</span>
              <span className="text-gold-soft text-[clamp(3rem,7vw,5rem)]"> 750</span>
              <span className="text-cream/70 text-[1.6rem]"> mil</span>
            </div>
            <p className="mt-4 text-cream/65 text-[14px] leading-relaxed font-light">
              Negócio + lazer no mesmo lugar. Agende uma visita e conheça cada detalhe da propriedade.
            </p>
            <div className="mt-7 flex flex-col gap-3">
              <Btn href={WA("Olá! Tenho interesse na COMPRA da Chácara Lavender (R$ 750 mil). Podemos conversar?")} target="_blank" variant="gold">
                Falar sobre a compra
              </Btn>
              <Btn href={WA("Olá! Gostaria de agendar uma visita à Chácara Lavender.")} target="_blank" variant="ghostLight">
                Agendar uma visita
              </Btn>
            </div>
          </div>
        </Reveal>
      </div>
    </section>);

}

/* ---------------- GALERIA ---------------- */
function Galeria() {
  const railRef = useRef(null);
  const scroll = (dir) => {
    const el = railRef.current;
    if (el) el.scrollBy({ left: dir * el.clientWidth * 0.75, behavior: "smooth" });
  };
  return (
    <section id="fotos" className="bg-paper py-24 md:py-32 overflow-hidden">
      <div className="mx-auto max-w-[1240px] px-6 flex items-end justify-between gap-6">
        <Reveal>
          <Eyebrow>Galeria</Eyebrow>
          <h2 className="mt-6 font-display text-forest text-[clamp(2.2rem,4.6vw,3.6rem)] leading-[1.04] font-light">
            Um passeio pela chácara.
          </h2>
        </Reveal>
        <div className="hidden md:flex gap-3 shrink-0">
          <button onClick={() => scroll(-1)} className="w-12 h-12 rounded-full border border-forest/25 text-forest grid place-items-center hover:bg-forest hover:text-cream transition-colors" aria-label="Anterior">←</button>
          <button onClick={() => scroll(1)} className="w-12 h-12 rounded-full border border-forest/25 text-forest grid place-items-center hover:bg-forest hover:text-cream transition-colors" aria-label="Próximo">→</button>
        </div>
      </div>

      <div ref={railRef} className="mt-12 flex gap-4 overflow-x-auto px-6 pb-4 snap-x snap-mandatory no-scrollbar">
        {LV.galeria.map((src, i) =>
        <div
          key={i}
          className={
          "snap-start shrink-0 overflow-hidden rounded-[3px] " + (
          i % 3 === 0 ? "w-[78vw] md:w-[640px] aspect-[16/10]" : "w-[64vw] md:w-[420px] aspect-[4/5]")
          }>
          
            <img src={src} alt="" className="w-full h-full object-cover hover:scale-[1.03] transition-transform duration-700" />
          </div>
        )}
        <div className="shrink-0 w-6"></div>
      </div>
    </section>);

}

/* ---------------- LOCALIZAÇÃO ---------------- */
function Local() {
  return (
    <section id="localizacao" className="bg-cream border-t border-ink/8">
      <div className="mx-auto max-w-[1240px] px-6 py-20 md:py-28">
        <Reveal className="max-w-[640px]">
          <Eyebrow>Localização · Como chegar</Eyebrow>
          <h2 className="mt-6 font-display text-forest text-[clamp(2rem,4.4vw,3.4rem)] leading-[1.04] font-light">
            O caminho certo
            <br />
            até o seu refúgio.
          </h2>
          <p className="mt-5 text-ink/70 text-[1.05rem] leading-relaxed font-light">
            Em Cascavel, Paraná — a poucos minutos do Trevo das Cataratas pela BR-277.
            Siga a rota recomendada abaixo: <span className="text-forest font-normal">{LV.rota.resumo}</span>.
          </p>
        </Reveal>

        <div className="mt-12 grid lg:grid-cols-12 gap-8 items-start">
          {/* mapa animado */}
          <Reveal className="lg:col-span-7">
            <RouteMap />
            <p className="mt-3 text-[12px] text-ink/45 text-center">
              Mapa ilustrativo. Toque em <span className="text-forest">▶</span> para refazer o trajeto.
            </p>
          </Reveal>

          {/* direções + aviso */}
          <Reveal className="lg:col-span-5" delay={120}>
            <div className="rounded-[6px] border border-ink/10 bg-paper p-7 md:p-8">
              <p className="text-[12px] tracking-[0.26em] uppercase text-forest/60">Passo a passo</p>
              <ol className="mt-6 space-y-5">
                {LV.rota.passos.map((p, i) => (
                  <li key={i} className="flex gap-4">
                    <span
                      className={
                        "flex-none grid place-items-center w-8 h-8 rounded-full text-[14px] font-semibold " +
                        (i === LV.rota.passos.length - 1
                          ? "bg-forest text-cream"
                          : "bg-gold/20 text-forest border border-gold/50")
                      }
                    >
                      {i === LV.rota.passos.length - 1 ? "★" : i + 1}
                    </span>
                    <span className="pt-0.5">
                      <span className="block text-forest text-[15px] font-medium leading-tight">{p.t}</span>
                      <span className="block mt-1 text-ink/65 text-[13.5px] leading-relaxed font-light">{p.d}</span>
                    </span>
                  </li>
                ))}
              </ol>

              {/* aviso estrada de terra */}
              <div className="mt-7 flex gap-3 rounded-[5px] border border-[#d4584a]/35 bg-[#d4584a]/[0.07] p-4">
                <span className="flex-none text-[#c0473b] text-[20px] leading-none mt-0.5">⚠</span>
                <p className="text-[13px] leading-relaxed text-ink/75">{LV.rota.aviso}</p>
              </div>

              <a
                href={LV.mapsUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="mt-6 group inline-flex w-full items-center justify-center gap-2.5 px-6 py-3.5 rounded-full bg-forest text-cream text-[14px] font-medium tracking-wide hover:bg-forest-deep transition-colors"
              >
                {Ic.pin("#f3efe6")} Abrir no Google Maps
                <span className="transition-transform duration-300 group-hover:translate-x-1">→</span>
              </a>
            </div>
          </Reveal>
        </div>

        {/* faixa de distâncias */}
        <div className="mt-10 grid sm:grid-cols-3 divide-y sm:divide-y-0 sm:divide-x divide-ink/10 border-y sm:border border-ink/10 rounded-[4px]">
          {LV.local.map((l, i) => (
            <Reveal key={i} delay={i * 90} className="p-7 text-center">
              <div className="flex justify-center mb-3">{Ic.pin("#c2a15a")}</div>
              <div className="font-display text-forest text-[clamp(1.8rem,3vw,2.4rem)] leading-none">{l.n}</div>
              <div className="mt-2 text-[13px] text-ink/65 leading-snug">{l.u}</div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>);

}

/* ---------------- FOOTER / CONTATO ---------------- */
function Footer() {
  const links = [
  { icon: Ic.wa, label: "WhatsApp", sub: LV.contact.whatsappDisplay, href: WA("Olá! Vim pelo site da Chácara Lavender.") },
  { icon: Ic.insta, label: "Instagram", sub: LV.contact.instagramHandle, href: LV.contact.instagram },
  { icon: Ic.airbnb, label: "Airbnb", sub: "Reserve online", href: LV.contact.airbnb }];

  return (
    <footer id="contato" className="bg-forest-deep text-cream">
      <div className="mx-auto max-w-[1240px] px-6 py-20 md:py-24">
        <div className="grid md:grid-cols-12 gap-12">
          <Reveal className="md:col-span-5">
            <img src={LV.logo.branco} alt="Lavender Eventos" className="h-28 w-auto" />
            <p className="mt-6 text-cream/65 text-[1.05rem] leading-relaxed font-light max-w-[42ch]">
              Sua chácara de eventos e refúgio na natureza em {LV.contact.cidade.replace("·", "-")}.
              Venha celebrar ou faça dela o seu próximo investimento.
            </p>
          </Reveal>

          <Reveal className="md:col-span-6 md:col-start-7" delay={120}>
            <p className="text-[12px] tracking-[0.28em] uppercase text-cream/55">Fale com a gente</p>
            <div className="mt-6 grid sm:grid-cols-1 gap-3">
              {links.map((l, i) =>
              <a
                key={i}
                href={l.href}
                target="_blank"
                rel="noopener noreferrer"
                className="group flex items-center gap-4 rounded-[4px] border border-cream/15 hover:border-gold/60 bg-cream/[0.03] hover:bg-cream/[0.06] px-5 py-4 transition-all duration-300">
                
                  <span className="grid place-items-center w-11 h-11 rounded-full bg-gold/15 text-gold-soft shrink-0">{l.icon()}</span>
                  <span className="flex-1">
                    <span className="block text-cream text-[15px]">{l.label}</span>
                    <span className="block text-cream/55 text-[13px]">{l.sub}</span>
                  </span>
                  <span className="text-cream/40 group-hover:text-gold-soft group-hover:translate-x-1 transition-all">→</span>
                </a>
              )}
            </div>
          </Reveal>
        </div>

        <div className="mt-16 pt-7 border-t border-cream/12 flex flex-col sm:flex-row items-center justify-between gap-4">
          <p className="text-cream/45 text-[13px]">© {new Date().getFullYear()} Lavender Eventos · Cascavel/PR</p>
          <p className="text-cream/35 text-[12px] tracking-wide">Natureza · Lazer · Memórias</p>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { Header, Hero, Stats, Sobre, Infra, Tech, Alugue, Compre, Galeria, Local, Footer });