var {useState,useEffect,useRef,useCallback,useLayoutEffect} = React;

/* ============================================================
   WHATSAPP CONTACT
   ============================================================ */
window.WA_NUMBER = "917760367456";          // +91 77603 67456
window.WA_DISPLAY = "+91 77603 67456";
window.GOOGLE_URL = "https://share.google/tW8m8U7WqtDkIlzPa";  // Google Business page
window.SOC_URL = {
  insta:"https://www.instagram.com/lalaland_holidays/",
  fb:"https://www.facebook.com/p/Lalaland-Holidays-100090407787526/",
  linkedin:"https://www.linkedin.com/in/lalaland-holidays-784766283/",
  google:"https://share.google/tW8m8U7WqtDkIlzPa",
};
window.GOOGLE_URL = "https://share.google/tW8m8U7WqtDkIlzPa";  // Google Business page
window.waLink = function(message){
  const base = "https://wa.me/" + window.WA_NUMBER;
  return message ? base + "?text=" + encodeURIComponent(message) : base;
};
// open a WhatsApp chat with an optional pre-filled message
window.openWA = function(message){
  window.open(window.waLink(message), "_blank", "noopener");
};

// clamp a date-input value so the year never exceeds 4 digits / 2099,
// and stays within optional min/max (all in YYYY-MM-DD form)
window.clampDate = function(v, min, max){
  if(!v) return v;
  let [y="", m="", d=""] = v.split("-");
  if(y.length > 4) y = y.slice(0,4);              // hard 4-digit cap
  let nv = [y, m, d].join("-");
  const maxV = max || "2099-12-31";
  if(y.length === 4){                              // only compare once year is complete
    if(nv > maxV) nv = maxV;
    if(min && nv < min) nv = min;
  }
  return nv;
};

/* ============================================================
   HOOKS
   ============================================================ */
// ---- global scroll-based reveal manager (IntersectionObserver is unreliable in some embeds) ----
if(!window.__revealInit){
  window.__revealInit = true;
  window.__revealEls = new Set();
  window.__checkReveals = function(){
    const vh = window.innerHeight || document.documentElement.clientHeight;
    window.__revealEls.forEach(el=>{
      if(!el || !el.isConnected){ window.__revealEls.delete(el); return; }
      const r = el.getBoundingClientRect();
      if(r.top < vh*0.9 && r.bottom > -40){ el.classList.add('in'); window.__revealEls.delete(el); }
    });
  };
  window.registerReveal = function(el){ if(el){ window.__revealEls.add(el); window.__checkReveals(); } };
  window.addEventListener('scroll',()=>window.__checkReveals(),{passive:true});
  window.addEventListener('resize',()=>window.__checkReveals());
  // safety net so reveals fire even without a scroll event or if IO/raf stalls
  setInterval(()=>window.__checkReveals(),350);
}

// reveal on scroll
window.useReveal = function(opts={}){
  const ref = useRef(null);
  useEffect(()=>{
    const el = ref.current; if(!el) return;
    window.registerReveal(el);
    const r1=requestAnimationFrame(()=>window.registerReveal(el));
    return ()=>{ cancelAnimationFrame(r1); if(window.__revealEls) window.__revealEls.delete(el); };
  },[]);
  return ref;
};

// parallax: translateY based on element's viewport position
window.useParallax = function(speed=0.15){
  const ref = useRef(null);
  useEffect(()=>{
    const el = ref.current; if(!el) return;
    let raf=null;
    const update=()=>{
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight;
      const center = r.top + r.height/2;
      const off = (center - vh/2);
      el.style.transform = `translate3d(0,${(-off*speed).toFixed(1)}px,0)`;
      raf=null;
    };
    const onScroll=()=>{ if(!raf) raf=requestAnimationFrame(update); };
    update();
    window.addEventListener('scroll',onScroll,{passive:true});
    window.addEventListener('resize',onScroll);
    return ()=>{window.removeEventListener('scroll',onScroll);window.removeEventListener('resize',onScroll);};
  },[speed]);
  return ref;
};

window.useScrolled = function(threshold=40){
  const [s,setS]=useState(false);
  useEffect(()=>{
    const on=()=>setS(window.scrollY>threshold);
    on(); window.addEventListener('scroll',on,{passive:true});
    return ()=>window.removeEventListener('scroll',on);
  },[]);
  return s;
};

/* ============================================================
   PRIMITIVES
   ============================================================ */
window.Reveal = function({children,delay=0,className="",variant="",as="div",style={}}){
  const ref = window.useReveal();
  const Tag = as;
  return <Tag ref={ref} className={`reveal ${variant} ${className}`}
    style={{transitionDelay:delay+'ms',...style}}>{children}</Tag>;
};

/* ---- dotted world map with city lights twinkling at staggered times ---- */
window.WORLD_CITIES = [
  {n:"Bengaluru",lat:12.97,lng:77.59,home:true},
  {n:"Delhi",lat:28.61,lng:77.21},
  {n:"Varanasi",lat:25.32,lng:82.97},
  {n:"Dubai",lat:25.20,lng:55.27},
  {n:"London",lat:51.51,lng:-0.12},
  {n:"Paris",lat:48.85,lng:2.35},
  {n:"New York",lat:40.71,lng:-74.0},
  {n:"Tokyo",lat:35.68,lng:139.69},
  {n:"Singapore",lat:1.35,lng:103.82},
  {n:"Bangkok",lat:13.75,lng:100.5},
  {n:"Bali",lat:-8.41,lng:115.19},
  {n:"Sydney",lat:-33.87,lng:151.21},
  {n:"Cape Town",lat:-33.92,lng:18.42},
  {n:"Rio",lat:-22.91,lng:-43.17},
  {n:"Istanbul",lat:41.01,lng:28.98},
  {n:"Cairo",lat:30.04,lng:31.24},
];
window.WorldMapLights = function({className=""}){
  return (
    <div className={`wml ${className}`} aria-hidden="true">
      <div className="wml-stage">
        <img className="wml-map" src="assets/world-dots.png" alt=""/>
        <div className="wml-lights">
          {window.WORLD_CITIES.map((c,i)=>{
            const left=((c.lng+180)/360)*100;
            const top=((90-c.lat)/180)*100;
            const dur=(2.4+(i%5)*0.6).toFixed(2);
            const delay=((i*0.67)%4.5).toFixed(2);
            return <span key={c.n} className={`wml-dot${c.home?' home':''}`}
              style={{left:left+'%',top:top+'%',animationDuration:dur+'s',animationDelay:delay+'s'}}/>;
          })}
        </div>
      </div>
    </div>
  );
};
// inject WorldMapLights styles once
if(!document.getElementById('wml-style')){
  const ws=document.createElement('style');ws.id='wml-style';
  ws.textContent=`
.wml{width:100%;display:flex;align-items:center;justify-content:center;pointer-events:none}
.wml-stage{position:relative;width:100%;aspect-ratio:2/1}
.wml-map{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.wml-lights{position:absolute;inset:0}
.wml-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--accent-blue);
  transform:translate(-50%,-50%) scale(.6);box-shadow:0 0 9px 2px rgba(53,103,230,.7);
  animation:wmlPulse ease-in-out infinite}
.wml-dot.home{width:10px;height:10px;background:var(--terra);box-shadow:0 0 12px 3px rgba(214,118,71,.8)}
@keyframes wmlPulse{0%,100%{opacity:.12;transform:translate(-50%,-50%) scale(.55)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.25)}}
@media(prefers-reduced-motion:reduce){.wml-dot{animation:none;opacity:.7}}
`;
  document.head.appendChild(ws);
}

/* ============================================================
   STOCK IMAGE LIBRARY (Unsplash: verified loadable)
   ============================================================ */
window.IMG = (function(){
  const u=(id,w)=>`https://images.unsplash.com/photo-${id}?auto=format&fit=crop&w=${w||1100}&q=78`;
  const ids={
    heroValley:'1506905925346-21bda4d32df4',
    founders:'1469474968028-56623f02e42e',
    valleyMist:'1464822759023-fed622ff2c3b',
    spiti:'1626621341517-bbf3d9990a23',
    santorini:'1570077188670-e3a8d69ac5ff',
    kyoto:'1493976040374-85c8e12f0c0e',
    kyotoNight:'1528360983277-13d401cdc186',
    patagonia:'1454496522488-7a8e488e8606',
    kerala:'1602216056096-3b40cc0c9944',
    houseboat:'1593693397690-362cb9666fc2',
    fort:'1571536802807-30451e3955d8',
    greenHills:'1605649487212-47bdab064df7',
    lagoon:'1518509562904-e7ef99cdcc86',
    overwater:'1531366936337-7c912a4589a7',
    temple:'1612438214708-f428a707dd4e',
    forest:'1441974231531-c6227db76b6e',
    desert:'1509316785289-025f5b846b35',
    beachAerial:'1507525428034-b723cf961d3e',
    greekSail:'1601581875309-fafbf2d3ed3a',
    zanskar:'1467890947394-8171244e5410',
    tuscany:'1523906834658-6e24ef2386f9',
    ocean:'1505228395891-9a51e7e86bf6',
    m1:'1500648767791-00dcc994a43e',
    w1:'1494790108377-be9c29b29330',
    m2:'1507003211169-0a1dd7228f2d',
    w2:'1438761681033-6461ffad8d80',
    varanasi:'1596402184320-417e7178b2cd',
    rajasthan:'1477587458883-47145ed94245',
    whiteRann:'1542401886-65d6c61db217',
    singapore:'1525625293386-3f8f99389edd',
    kl:'1596422846543-75c6fc197f07',
    dubai:'1512453979798-5ea266f8880c',
    abudhabi:'1512632578888-169bbbc64f33',
    taj:'1524492412937-b28074a5d7da',
  };
  const out={};
  for(const k in ids){ out[k]=u(ids[k]); out[k+'_sm']=u(ids[k],640); }
  // user-supplied real photos override the stock keys for these destinations
  const local={
    varanasi:'assets/dest/ayodhya.jpeg',   // Ram Mandir, Ayodhya (Spiritual North India)
    ayodhya:'assets/dest/ayodhya.jpeg',
    kerala:'assets/dest/kerala.avif',
    houseboat:'assets/dest/kerala.avif',   // God's Own Country (Kerala)
    rajasthan:'assets/dest/rajasthan.jpg',
    singapore:'assets/dest/singapore.jpeg',
    dubai:'assets/dest/dubai.jpeg',
  };
  for(const k in local){ out[k]=local[k]; out[k+'_sm']=local[k]; }
  out.url=u;
  return out;
})();

// cinematic image placeholder: renders a real photo over a tonal gradient fallback
window.Frame = function({tone="t-forest",src,label,tag,ratio,className="",style={},parallax=0,mask=false,children}){
  const pRef = parallax ? window.useParallax(parallax) : null;
  const rRef = window.useReveal();
  const arStyle = ratio ? {aspectRatio:ratio} : {};
  const imgUrl = src ? (window.IMG[src]||src) : null;
  const [ok,setOk]=useState(true);
  const layerStyle = parallax?{position:'absolute',inset:'-12% 0',height:'124%',width:'100%'}:{position:'absolute',inset:0};
  return (
    <div ref={mask?rRef:null} className={`frame ${className} ${mask?'mask-rise':''}`} style={{...arStyle,...style}}>
      <div ref={pRef} className="ph-layer" style={layerStyle}>
        <div className={`ph-grad ${tone}`} style={{position:'absolute',inset:0}}></div>
        {imgUrl && ok && (
          <img src={imgUrl} alt={label||''} loading="lazy" onError={()=>setOk(false)}
            style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}}/>
        )}
      </div>
      <div className="ph-grain"></div>
      {tag && <span className="ph-tag">{tag}</span>}
      {children}
    </div>
  );
};

window.SectionLabel = function({children,muted,index}){
  return <span className={`eyebrow ${muted?'muted':''}`}>{index && <em style={{fontStyle:'normal',opacity:.6,marginRight:'.4em'}}>{index}</em>}{children}</span>;
};

// line-by-line reveal text. lines = array of strings (or nodes)
window.RevealLines = function({lines,className="",delay=0}){
  const ref = window.useReveal({margin:'0px 0px -12% 0px'});
  useEffect(()=>{
    const el=ref.current; if(!el) return;
  },[]);
  return (
    <span ref={ref} className={className} style={{display:'block'}}>
      {lines.map((ln,i)=>(
        <span key={i} className="tline reveal-line"><span style={{transitionDelay:(delay+i*90)+'ms'}}>{ln}</span></span>
      ))}
    </span>
  );
};

// counter that animates when in view
window.Counter = function({to,suffix="",dur=1600,className=""}){
  const ref=useRef(null);
  const [val,setVal]=useState(0);
  useEffect(()=>{
    const el=ref.current; if(!el) return;
    let started=false;
    const io=new IntersectionObserver(es=>{
      es.forEach(e=>{
        if(e.isIntersecting && !started){
          started=true;
          const start=performance.now();
          const tick=(now)=>{
            const p=Math.min(1,(now-start)/dur);
            const eased=1-Math.pow(1-p,3);
            setVal(Math.round(eased*to));
            if(p<1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    },{threshold:.5});
    io.observe(el);
    return ()=>io.disconnect();
  },[to,dur]);
  return <span ref={ref} className={className}>{val.toLocaleString()}{suffix}</span>;
};

/* ============================================================
   ICONS (simple line set)
   ============================================================ */
window.Icon = function({name,size=20,stroke=1.6,className="",style={}}){
  const p={width:size,height:size,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",
    strokeWidth:stroke,strokeLinecap:"round",strokeLinejoin:"round",className,style};
  const paths={
    arrow:<><line x1="5" y1="12" x2="19" y2="12"/><polyline points="13 6 19 12 13 18"/></>,
    chevronLeft:<polyline points="15 5 8 12 15 19"/>,
    chevronRight:<polyline points="9 5 16 12 9 19"/>,
    person:<><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></>,
    arrowUR:<><line x1="7" y1="17" x2="17" y2="7"/><polyline points="8 7 17 7 17 16"/></>,
    pin:<><path d="M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z"/><circle cx="12" cy="10" r="2.5"/></>,
    compass:<><circle cx="12" cy="12" r="9"/><polygon points="16 8 13.5 13.5 8 16 10.5 10.5 16 8"/></>,
    calendar:<><rect x="3" y="5" width="18" height="16" rx="2"/><line x1="3" y1="10" x2="21" y2="10"/><line x1="8" y1="3" x2="8" y2="7"/><line x1="16" y1="3" x2="16" y2="7"/></>,
    users:<><circle cx="9" cy="8" r="3.2"/><path d="M3 20a6 6 0 0 1 12 0"/><path d="M16 5.5a3 3 0 0 1 0 5.6M21 20a6 6 0 0 0-4-5.6"/></>,
    search:<><circle cx="11" cy="11" r="7"/><line x1="16.5" y1="16.5" x2="21" y2="21"/></>,
    mountain:<><path d="M3 19l5.5-9 3.5 5.5L14.5 12 21 19z"/><circle cx="9" cy="6.5" r="1.6"/></>,
    plus:<><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></>,
    minus:<><line x1="5" y1="12" x2="19" y2="12"/></>,
    star:<polygon points="12 3 14.6 9 21 9.5 16 13.8 17.6 20 12 16.4 6.4 20 8 13.8 3 9.5 9.4 9"/>,
    quote:<><path d="M7 7h4v5c0 2.5-1.5 4-4 4.5"/><path d="M14 7h4v5c0 2.5-1.5 4-4 4.5"/></>,
    leaf:<><path d="M5 19c0-8 6-13 14-13 0 8-6 13-14 13z"/><path d="M5 19c3-4 6-6 9-7.5"/></>,
    sparkle:<><path d="M12 3v6M12 15v6M3 12h6M15 12h6"/></>,
    route:<><circle cx="6" cy="6" r="2.5"/><circle cx="18" cy="18" r="2.5"/><path d="M6 8.5v4a4 4 0 0 0 4 4h5.5"/></>,
    shield:<><path d="M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6z"/><polyline points="9 12 11 14 15 9.5"/></>,
    globe:<><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.6 2.5 4 5.7 4 9s-1.4 6.5-4 9c-2.6-2.5-4-5.7-4-9s1.4-6.5 4-9z"/></>,
    phone:<><path d="M5 4h3l1.5 4-2 1.5a11 11 0 0 0 5 5l1.5-2 4 1.5V19a2 2 0 0 1-2 2A16 16 0 0 1 4 6a2 2 0 0 1 1-2z"/></>,
    mail:<><rect x="3" y="5" width="18" height="14" rx="2"/><polyline points="4 7 12 13 20 7"/></>,
    clock:<><circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 15.5 14"/></>,
    check:<polyline points="5 12.5 10 17 19 6.5"/>,
    close:<><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></>,
    play:<polygon points="8 5 19 12 8 19 8 5"/>,
    insta:<><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0" fill="currentColor" stroke="none"/><circle cx="17.5" cy="6.5" r="1.1" fill="currentColor" stroke="none"/></>,
    fb:<path d="M14 8h2V5h-2c-2 0-3.5 1.5-3.5 3.5V11H8v3h2.5v7h3v-7H16l.5-3h-3V8.5c0-.3.2-.5.5-.5z"/>,
    tw:<path d="M21 6.5c-.7.3-1.4.5-2.1.6.8-.5 1.3-1.2 1.6-2-.7.4-1.5.7-2.3.9A3.5 3.5 0 0 0 12 9.2c0 .3 0 .6.1.8-3-.2-5.6-1.6-7.3-3.8-.3.6-.5 1.2-.5 1.9 0 1.2.6 2.3 1.6 2.9-.6 0-1.1-.2-1.6-.4 0 1.7 1.2 3.1 2.8 3.4-.5.1-1 .2-1.5.1.4 1.4 1.7 2.4 3.2 2.4A7 7 0 0 1 3 18.3 9.9 9.9 0 0 0 8.4 20c6.5 0 10-5.4 10-10v-.5c.7-.5 1.3-1.1 1.8-1.9z"/>,
    google:<path d="M20.6 8A8.4 8.4 0 1 0 21 12h-7.3"/>,
    wa:<path d="M12 3a9 9 0 0 0-7.7 13.6L3 21l4.6-1.2A9 9 0 1 0 12 3z"/>,
  };
  return <svg {...p}>{paths[name]||null}</svg>;
};

/* filled brand glyphs for socials (no outer circle) */
window.SocialIcon = function({name,size=22}){
  if(name==='google'){
    return (
      <svg width={size} height={size} viewBox="0 0 24 24" style={{display:'block'}} aria-hidden="true">
        <path fill="#4285F4" d="M21.6 12.23c0-.68-.06-1.36-.18-2.02H12v3.82h5.38a4.6 4.6 0 0 1-2 3.02v2.5h3.23c1.89-1.74 2.99-4.3 2.99-7.32z"/>
        <path fill="#34A853" d="M12 22c2.7 0 4.96-.9 6.62-2.43l-3.23-2.5c-.9.6-2.05.96-3.39.96-2.6 0-4.8-1.76-5.59-4.12H3.07v2.59A10 10 0 0 0 12 22z"/>
        <path fill="#FBBC05" d="M6.41 13.91a6 6 0 0 1 0-3.82V7.5H3.07a10 10 0 0 0 0 9z"/>
        <path fill="#EA4335" d="M12 6.07c1.47 0 2.79.5 3.83 1.5l2.86-2.86A10 10 0 0 0 12 2 10 10 0 0 0 3.07 7.5l3.34 2.59C7.2 7.83 9.4 6.07 12 6.07z"/>
      </svg>
    );
  }
  const paths={
    insta:"M12 2.2c3.2 0 3.6.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.25.07 1.65.07 4.85s-.01 3.6-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.25.06-1.65.07-4.85.07s-3.6-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.7 3.7 0 0 1-1.38-.9 3.7 3.7 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23C2.21 15.6 2.2 15.2 2.2 12s.01-3.6.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.43-.16 1.06-.36 2.23-.41C8.4 2.21 8.8 2.2 12 2.2zm0 1.98c-3.15 0-3.52.01-4.76.07-.85.04-1.31.18-1.62.3-.41.16-.7.35-1 .66-.31.3-.5.59-.66 1-.12.31-.26.77-.3 1.62-.06 1.24-.07 1.61-.07 4.76s.01 3.52.07 4.76c.04.85.18 1.31.3 1.62.16.41.35.7.66 1 .3.31.59.5 1 .66.31.12.77.26 1.62.3 1.24.06 1.61.07 4.76.07s3.52-.01 4.76-.07c.85-.04 1.31-.18 1.62-.3.41-.16.7-.35 1-.66.31-.3.5-.59.66-1 .12-.31.26-.77.3-1.62.06-1.24.07-1.61.07-4.76s-.01-3.52-.07-4.76c-.04-.85-.18-1.31-.3-1.62a2.7 2.7 0 0 0-.66-1 2.7 2.7 0 0 0-1-.66c-.31-.12-.77-.26-1.62-.3-1.24-.06-1.61-.07-4.76-.07zm0 3.37a4.45 4.45 0 1 1 0 8.9 4.45 4.45 0 0 1 0-8.9zm0 1.98a2.47 2.47 0 1 0 0 4.94 2.47 2.47 0 0 0 0-4.94zm4.67-.6a1.04 1.04 0 1 1 0 2.08 1.04 1.04 0 0 1 0-2.08z",
    fb:"M22 12a10 10 0 1 0-11.56 9.88v-6.99H7.9V12h2.54V9.8c0-2.5 1.49-3.89 3.78-3.89 1.09 0 2.23.2 2.23.2v2.46h-1.26c-1.24 0-1.62.77-1.62 1.56V12h2.77l-.44 2.89h-2.33v6.99A10 10 0 0 0 22 12z",
    linkedin:"M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.63-1.85 3.36-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z",
    wa:"M19.05 4.91A9.82 9.82 0 0 0 12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.86 9.86 0 0 0 4.79 1.22c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.02zm-7.01 15.22a8.2 8.2 0 0 1-4.18-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.18 8.18 0 0 1-1.26-4.37c0-4.54 3.7-8.23 8.24-8.23 2.2 0 4.27.86 5.82 2.42a8.18 8.18 0 0 1 2.41 5.82c0 4.54-3.69 8.23-8.24 8.23zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.25-.64.81-.79.97-.14.17-.29.19-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.01-.38.11-.51.11-.11.25-.29.37-.43.13-.15.17-.25.25-.41.08-.17.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.4-.42-.56-.43h-.47c-.17 0-.43.06-.66.31-.22.25-.86.85-.86 2.07 0 1.22.89 2.4 1.01 2.56.12.17 1.75 2.67 4.23 3.74.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.47-.07 1.47-.6 1.68-1.18.21-.58.21-1.07.14-1.18-.06-.11-.22-.17-.47-.29z",
  };
  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" style={{display:'block'}} aria-hidden="true"><path d={paths[name]}/></svg>;
};

/* ============================================================
   NAV
   ============================================================ */
window.Nav = function({route,navigate,dark,mobileOpen,setMobileOpen,routes}){
  const scrolled = window.useScrolled(40);
  const onDark = dark && !scrolled;
  return (
    <React.Fragment>
      <nav className={`nav ${scrolled?'scrolled':''} ${dark?'on-dark':''}`}>
        <div className="wrap">
          <a className="logo" href="index.html" onClick={(e)=>{e.preventDefault();navigate('home');}}>
            <img className="logo-img" src="assets/logo.webp" alt="LaLaLand Holidays"/>
            <span className="logo-word">LaLaLand<small>Our places · Your stories</small></span>
          </a>
          <div className="nav-links">
            {Object.keys(routes).filter(k=>!routes[k].hidden).map(k=>(
              <a key={k} href={routes[k].file} className={route===k?'active':''}
                 onClick={(e)=>{e.preventDefault();navigate(k);}}>{routes[k].label}</a>
            ))}
          </div>
          <div className="nav-right">
            <a className="nav-cta" href="contact.html" onClick={(e)=>{e.preventDefault();navigate('contact');}}>Plan my trip</a>
            <button className="burger" aria-label="Menu" onClick={()=>setMobileOpen(o=>!o)}>
              <i></i><i></i><i></i>
            </button>
          </div>
        </div>
      </nav>
      <div className="mobile-menu">
        {Object.keys(routes).filter(k=>!routes[k].hidden).map((k,i)=>(
          <a key={k} href={routes[k].file} onClick={(e)=>{e.preventDefault();navigate(k);}}>
            {routes[k].label}<span className="mono">0{i+1}</span>
          </a>
        ))}
      </div>
    </React.Fragment>
  );
};

/* ============================================================
   FOOTER
   ============================================================ */
window.Footer = function({navigate}){
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-cta">
          <div>
            <window.Reveal variant="fade"><span className="eyebrow muted">Let's begin</span></window.Reveal>
            <window.Reveal className="big" as="h2" delay={60} style={{marginTop:18}}>
              Your next story<br/>starts with <span className="tcolor">hello</span>.
            </window.Reveal>
          </div>
          <window.Reveal delay={120} style={{display:'flex',flexDirection:'column',gap:16,alignItems:'flex-start'}}>
            <p className="lead" style={{color:'rgba(245,240,231,.72)'}}>Tell us where your heart wants to wander. We'll handle the rest.</p>
            <button className="btn on-dark" onClick={()=>window.openWA("Hi LaLaLand! I'd like to start planning a trip.")}>
              <span>Start planning <window.Icon name="arrow" size={17} className="arrow"/></span>
            </button>
          </window.Reveal>
        </div>

        <div className="footer-grid">
          <div className="footer-col">
            <a className="logo footer-logo" style={{marginBottom:16}} href="index.html" onClick={(e)=>{e.preventDefault();navigate('home');}}>
              <img className="logo-img" src="assets/logo.webp" alt="LaLaLand Holidays"/>
              <span className="logo-word">LaLaLand</span>
            </a>
            <p style={{maxWidth:280,opacity:.7}}>Bespoke journeys through the hidden gems of India and the world. Crafted by humans who've been there.</p>
          </div>
          <div className="footer-col">
            <h5>Explore</h5>
            <a href="index.html" onClick={(e)=>{e.preventDefault();navigate('home');}}>Home</a>
            <a href="about.html" onClick={(e)=>{e.preventDefault();navigate('about');}}>About</a>
            <a href="services.html" onClick={(e)=>{e.preventDefault();navigate('services');}}>Journeys</a>
            <a href="gallery.html" onClick={(e)=>{e.preventDefault();navigate('gallery');}}>Gallery & Journals</a>
          </div>
          <div className="footer-col">
            <h5>Journeys</h5>
            <a href="services.html" onClick={(e)=>{e.preventDefault();navigate('services');}}>Hidden India</a>
            <a href="services.html" onClick={(e)=>{e.preventDefault();navigate('services');}}>Global Luxury</a>
            <a href="services.html" onClick={(e)=>{e.preventDefault();navigate('services');}}>Adventure</a>
            <a href="services.html" onClick={(e)=>{e.preventDefault();navigate('services');}}>Honeymoons</a>
          </div>
          <div className="footer-col">
            <h5>Reach us</h5>
            <p style={{opacity:.82}}>Indiranagar, Bengaluru<br/>Karnataka, India</p>
            <a href="mailto:sales@lalalandholidays.com">sales@lalalandholidays.com</a>
            <a href={window.waLink("Hi LaLaLand! I'd like to plan a trip.")} target="_blank" rel="noopener">{window.WA_DISPLAY}</a>
            <div style={{display:'flex',gap:18,marginTop:16}}>
              {['insta','fb','linkedin','google','wa'].map(s=>{
                const ext = s==='wa' ? window.waLink("Hi LaLaLand! I'd like to plan a trip.") : window.SOC_URL[s];
                return (
                  <a key={s} href={ext} target="_blank" rel="noopener"
                     className="soc-ico" aria-label={s==='google'?'Google':s==='linkedin'?'LinkedIn':s}>
                    <window.SocialIcon name={s} size={22}/>
                  </a>
                );
              })}
            </div>
          </div>
        </div>

        <div className="footer-bottom">
          <span>© 2026 LaLaLand Holidays. All rights reserved.</span>
          <span className="mono" style={{letterSpacing:'.04em'}}>12.9716° N · 77.5946° E: Bengaluru</span>
          <span>Privacy · Terms</span>
        </div>

        <a className="crafted-badge" href="https://ishtadigitals.com/" target="_blank" rel="noopener">
          <window.Icon name="pin" size={15}/>
          <span>Proudly Crafted in Kundapura by <strong>ISHTA DIGITALS</strong></span>
        </a>
      </div>
      <div className="ghost-word" aria-hidden="true">LALALAND</div>
    </footer>
  );
};

/* social icon styling injected once */
(function(){
  if(document.getElementById('soc-style'))return;
  const s=document.createElement('style');s.id='soc-style';
  s.textContent=`.soc-ico{display:inline-flex;align-items:center;justify-content:center;color:var(--cream);opacity:.78;
    transition:transform .35s var(--ease-out),opacity .35s,color .35s}
    .soc-ico svg{display:block;flex:0 0 auto}
    .soc-ico:hover{opacity:1;color:#fff;transform:translateY(-3px)}
    .crafted-badge{display:flex;align-items:center;justify-content:center;gap:9px;width:fit-content;margin:26px auto 4px;
      padding:11px 22px;border-radius:100px;border:1px solid var(--line-light);background:rgba(245,240,231,.03);
      font-size:13.5px;letter-spacing:.01em;color:rgba(245,240,231,.78);transition:all .4s var(--ease-out)}
    .crafted-badge svg{color:var(--terra-soft);flex:0 0 auto}
    .crafted-badge strong{color:var(--terra-soft);font-weight:700;letter-spacing:.06em}
    .crafted-badge:hover{border-color:var(--terra-soft);background:rgba(245,240,231,.06);transform:translateY(-2px)}
    .reveal-line.in > span,.tline.in > span{transform:none}`;
  document.head.appendChild(s);
})();