var {useState,useEffect,useRef} = React;

/* ============================================================
   ABOUT
   ============================================================ */
function AboutHero(){
  return (
    <section className="ab-hero">
      <div className="wrap ab-hero-grid">
        <div className="ab-hero-copy">
          <h1 className="display ab-hero-title">
            <span className="tline"><span style={{transitionDelay:'.1s'}}>Our places.</span></span>
            <span className="tline"><span style={{transitionDelay:'.2s'}} className="tcolor">Your stories.</span></span>
          </h1>
          <window.Reveal variant="fade" delay={300} className="ab-hero-sub">
            <p className="lead col-moss">LaLaLand Holidays is a customized travel and destination-management company: crafting private, personalised journeys across India and around the world, designed around who you are.</p>
          </window.Reveal>
        </div>
        <window.Frame src="assets/about/varanasi.jpg" tone="t-himalaya" className="ab-hero-img mask-rise" mask
          label="The Ganga Aarti, Varanasi, where our story deepened" tag="SINCE 2014"/>
      </div>
    </section>
  );
}

/* ---- the founding narrative ---- */
function OurStory(){
  return (
    <section className="section ab-story">
      <div className="wrap ab-story-grid">
        <div className="ab-story-aside">
          <window.SectionLabel muted>Our Story</window.SectionLabel>
          <h2 className="h2 ab-story-head">Every journey<br/>begins with<br/>a story.</h2>
          <window.Frame src="assets/about/venice.webp" tone="t-ocean" className="ab-story-img" mask parallax={0.04}
            label="Where it began: a locked door in Venice" tag="THE SPARK"/>
        </div>
        <div className="ab-story-body">
          <window.Reveal variant="fade">
            <p className="ab-lede">Ours began in an unexpected way. A group of us arrived in Venice, excited to begin our adventure: only to find the hotel entrance locked. No reception, no staff, no instructions. Just as we were about to give up, a voice greeted us through a speaker above the door: a remote attendant, guiding us inside.</p>
          </window.Reveal>
          <window.Reveal variant="fade" delay={80}>
            <p>The “rooms” turned out to be little more than tiny storage spaces converted into accommodation. It was a memorable lesson: a little research and local knowledge can completely transform a travel experience. That realization stayed with us.</p>
          </window.Reveal>
          <window.Reveal variant="fade" delay={120}>
            <p>With every journey that followed, we discovered the same truth: travel is not just about visiting places. It is about understanding their stories, and every traveler experiences them differently.</p>
          </window.Reveal>
          <window.Reveal variant="fade" delay={160}>
            <p>So we built LaLaLand Holidays around a single idea. Instead of one-size-fits-all itineraries, we create journeys as unique as the people taking them.</p>
          </window.Reveal>
          <window.Reveal className="ab-pull" delay={120}>
            <window.Icon name="quote" size={26} className="ab-pull-q"/>
            <p>We don’t just showcase our places.<br/><span className="tcolor">We help you create stories.</span></p>
            <span className="ab-pull-by mono">Our Places · Your Stories</span>
          </window.Reveal>
        </div>
      </div>
    </section>
  );
}

/* word-by-word reveal manifesto */
function Manifesto(){
  const text="No two travelers are alike. No two destinations are alike. That is why we believe customization matters more than anything else.";
  const words=text.split(" ");
  const ref=useRef(null);
  const [prog,setProg]=useState(0);
  useEffect(()=>{
    const el=ref.current;if(!el)return;
    const on=()=>{
      const r=el.getBoundingClientRect();const vh=window.innerHeight;
      const start=vh*0.85, end=vh*0.25;
      const p=Math.min(1,Math.max(0,(start-r.top)/(start-end)));
      setProg(p);
    };
    on();window.addEventListener('scroll',on,{passive:true});window.addEventListener('resize',on);
    return ()=>{window.removeEventListener('scroll',on);window.removeEventListener('resize',on);};
  },[]);
  return (
    <section className="section ab-manifesto">
      <div className="wrap">
        <p ref={ref} className="manifesto-text">
          {words.map((w,i)=>{
            const lit=prog*words.length > i;
            return <span key={i} style={{opacity:lit?1:.16,transition:'opacity .4s ease'}}>{w} </span>;
          })}
        </p>
      </div>
    </section>
  );
}

/* journey timeline */
function Timeline(){
  const items=[
    {y:"Venice",place:"Where it began",t:"A locked door",d:"A trip that went sideways taught us how much a little local knowledge can change everything.",tone:"t-rose",src:"assets/about/venice.webp"},
    {y:"2014",place:"Varanasi",t:"The oldest living city",d:"Lantern-lit lanes and the mesmerising Ganga Aarti taught us that some places deserve far more time than a hurried itinerary allows.",tone:"t-himalaya",src:"assets/about/varanasi.jpg"},
    {y:"2015",place:"Jaisalmer",t:"A sky full of stars",d:"Icy desert nights revealed the sheer diversity of India: deserts, rivers, mountains, beaches and ancient civilisations within a single nation.",tone:"t-desert",src:"assets/about/jaisalmer.jpeg"},
    {y:"Today",place:"Everywhere",t:"Our places, your stories",d:"Bespoke journeys, corporate retreats, weddings and wellness: each one designed around the traveler taking it.",tone:"t-emerald",src:"kerala"},
  ];
  return (
    <section className="section dark ab-timeline">
      <div className="wrap">
        <div className="sec-head">
          <div>
            <window.Reveal as="h2" className="h2" delay={60}>The journeys that<br/>shaped us.</window.Reveal>
          </div>
        </div>
        <div className="tl">
          <div className="tl-line"><window.Reveal variant="fade" className="tl-line-fill"/></div>
          {items.map((it,i)=>(
            <window.Reveal key={it.y} delay={i*80} className="tl-row">
              <div className="tl-year mono">{it.y}</div>
              <div className="tl-node"></div>
              <div className="tl-card">
                <window.Frame tone={it.tone} src={it.src} className="tl-img" label={it.place} parallax={0.05}/>
                <div className="tl-body">
                  <span className="eyebrow muted" style={{marginBottom:9}}>{it.place}</span>
                  <h3 className="h3">{it.t}</h3>
                  <p className="col-moss" style={{color:'rgba(238,244,250,.66)',marginTop:8}}>{it.d}</p>
                </div>
              </div>
            </window.Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* what we craft: the customization philosophy in practice */
function WhatWeCraft(){
  const c=[
    {n:"01",t:"Corporate retreats & events",place:"Goa",icon:"users",
     d:"We plan and manage corporate events and retreats in the luxury resorts of Goa: tailored to your team’s objectives."},
    {n:"02",t:"Yoga & Ayurveda",place:"Kerala",icon:"leaf",
     d:"Carefully selected stays and wellness experiences in the serene villages of Kerala, to reconnect with yourself and nature."},
    {n:"03",t:"Destination weddings",place:"Udaipur",icon:"star",
     d:"Unforgettable weddings and special events in the magnificent palaces of Udaipur: memories made to last."},
  ];
  return (
    <section className="section ab-craft">
      <div className="wrap">
        <div className="sec-head">
          <div>
            <window.Reveal variant="fade"><window.SectionLabel>What we craft</window.SectionLabel></window.Reveal>
            <window.Reveal as="h2" className="h2" delay={60} style={{marginTop:16}}>Every traveler<br/>is different.</window.Reveal>
          </div>
          <window.Reveal variant="fade" delay={120} className="sec-head-side">
            <p className="lead col-moss">So is every journey we design. A few of the experiences we’re asked for most often.</p>
          </window.Reveal>
        </div>
        <div className="craft-grid">
          {c.map((it,i)=>(
            <window.Reveal key={it.n} delay={i*90} className="craft-card">
              <div className="craft-top">
                <span className="craft-ico"><window.Icon name={it.icon} size={28}/></span>
                <span className="craft-n mono">{it.n}</span>
              </div>
              <h3 className="h3">{it.t}</h3>
              <p className="col-moss" style={{marginTop:10}}>{it.d}</p>
            </window.Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* the people */
function Team(){
  const people=[
    {n:"Gutam Shetty",r:"Director · Travel & Tourism",tone:"t-ocean"},
    {n:"Smaran Shetty",r:"Director · Corporate Events & Team Building",tone:"t-sunset"},
    {n:"Rajeev Gaonkar",r:"Coordinator · Yoga & Ayurveda Events",tone:"t-emerald",img:"assets/team/rajeev-gaonkar.jpeg"},
    {n:"Preetham Shetty",r:"Director · Destination Events",tone:"t-himalaya",img:"assets/team/preetham-shetty.jpeg"},
    {n:"Rakshit Manjunath",r:"Advisor · Yoga Retreats & Travel",tone:"t-rose"},
  ];
  const initials=(n)=>n.split(/\s+/).filter(Boolean).map(w=>w[0]).join('').slice(0,2).toUpperCase();
  return (
    <section className="section ab-team">
      <div className="wrap">
        <div className="sec-head">
          <div>
            <window.Reveal variant="fade"><window.SectionLabel>Our team</window.SectionLabel></window.Reveal>
            <window.Reveal as="h2" className="h2" delay={60} style={{marginTop:16}}>The people behind<br/>your journeys.</window.Reveal>
          </div>
          <window.Reveal variant="fade" delay={120} className="sec-head-side">
            <p className="lead col-moss">A close-knit team of directors, coordinators and advisors: you’ll know us by first name long before you fly.</p>
          </window.Reveal>
        </div>
        <div className="team-grid">
          {people.map((p,i)=>(
            <window.Reveal key={p.n} delay={i*70} className="team-card">
              <span className="team-ico"><window.Icon name="person" size={26} stroke={1.5}/></span>
              <div className="team-meta">
                <h3 className="team-name">{p.n}</h3>
                <span className="col-moss team-role">{p.r}</span>
              </div>
            </window.Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

window.AboutPage = function({navigate}){
  return (
    <div className="about">
      <AboutHero/>
      <OurStory/>
      <Manifesto/>
      <Timeline/>
      <WhatWeCraft/>
      <Team/>
    </div>
  );
};

/* ============================================================
   ABOUT STYLES
   ============================================================ */
(function(){
  if(document.getElementById('about-style'))return;
  const s=document.createElement('style');s.id='about-style';
  s.textContent=`
.about{background:var(--paper)}
.about .section{padding:clamp(40px,5vw,76px) 0}
.ab-hero{padding:clamp(110px,14vh,150px) 0 clamp(40px,6vw,80px);background:var(--paper)}
.ab-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.ab-hero-title{margin-top:22px;color:var(--ink)}
.ab-hero-sub{margin-top:26px;max-width:46ch}
.ab-hero-img{aspect-ratio:5/4;border-radius:22px;box-shadow:var(--shadow-lg)}
@media(max-width:900px){.ab-hero-grid{grid-template-columns:1fr;gap:36px}.ab-hero-img{max-width:520px}}

/* our story */
.ab-story-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(40px,6vw,84px);align-items:start}
.ab-story-aside{position:sticky;top:108px}
.ab-story-head{margin-top:18px;color:var(--ink)}
.ab-story-img{aspect-ratio:4/3;border-radius:20px;margin-top:30px;box-shadow:var(--shadow)}
.ab-story-body{padding-top:8px}
.ab-story-body p{font-size:clamp(17px,1.45vw,20px);line-height:1.62;color:var(--ink-soft);margin-bottom:1.15em;max-width:60ch;text-wrap:pretty}
.ab-lede{font-size:clamp(19px,1.8vw,24px)!important;line-height:1.5!important;color:var(--ink)!important;font-weight:500}
.ab-lede::first-letter{float:left;font-size:3.4em;line-height:.78;font-weight:800;padding:6px 14px 0 0;color:var(--terra)}
.ab-pull{margin-top:34px;padding:30px 0 6px;border-top:1px solid var(--line)}
.ab-pull-q{color:var(--terra);opacity:.7;margin-bottom:10px}
.ab-pull p{font-size:clamp(24px,3vw,38px)!important;line-height:1.12!important;font-weight:700;letter-spacing:-.025em;color:var(--ink)!important;max-width:none!important;margin-bottom:14px!important}
.ab-pull-by{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--moss)}
@media(max-width:860px){.ab-story-grid{grid-template-columns:1fr}.ab-story-aside{position:static}.ab-story-img{max-width:440px}}

/* manifesto */
.about .ab-manifesto{padding:clamp(28px,3.5vw,52px) 0}
.manifesto-text{font-size:clamp(26px,4vw,52px);font-weight:600;letter-spacing:-.03em;line-height:1.22;
  margin-top:30px;max-width:24ch}

/* section heads */
.sec-head{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:end;margin-bottom:clamp(36px,5vw,60px)}
.sec-head-side{align-self:end}
@media(max-width:820px){.sec-head{grid-template-columns:1fr;gap:18px}}

/* timeline */
.tl{position:relative;margin-top:30px}
.tl-line{position:absolute;left:90px;top:10px;bottom:10px;width:2px;background:var(--line-light)}
.tl-line-fill{position:absolute;inset:0;background:linear-gradient(var(--terra),transparent);transform-origin:top}
.tl-row{display:grid;grid-template-columns:90px 40px 1fr;align-items:start;gap:0;padding:26px 0}
.tl-year{font-size:15px;color:var(--terra-soft);padding-top:6px}
.tl-node{position:relative;display:flex;justify-content:center;padding-top:10px}
.tl-node::after{content:"";width:13px;height:13px;border-radius:50%;background:var(--terra);
  box-shadow:0 0 0 5px rgba(79,111,192,.18)}
.tl-card{display:grid;grid-template-columns:230px 1fr;gap:28px;align-items:center}
.tl-img{aspect-ratio:4/3;border-radius:14px}
@media(max-width:760px){
  .tl-line{left:64px}
  .tl-row{grid-template-columns:64px 30px 1fr}
  .tl-card{grid-template-columns:1fr;gap:16px}
  .tl-img{aspect-ratio:16/9}
}

/* what we craft */
.craft-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,26px)}
.craft-card{padding:clamp(26px,2.4vw,36px) clamp(24px,2vw,32px);border:1px solid var(--line);border-radius:20px;
  background:var(--cream);box-shadow:var(--shadow-sm);transition:transform .5s var(--ease-out),box-shadow .5s}
.craft-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.craft-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.craft-ico{width:62px;height:62px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:var(--paper-2);color:var(--accent-blue);border:1px solid var(--line)}
.craft-n{font-size:13px;color:var(--moss)}
.craft-card p{max-width:40ch}
@media(max-width:820px){.craft-grid{grid-template-columns:1fr;gap:16px}}

/* team */
.about .ab-team{padding-bottom:clamp(22px,3vw,40px)}
.team-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.team-card{display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  padding:24px 22px;border:1px solid var(--line);border-radius:18px;background:var(--cream);
  box-shadow:var(--shadow-sm);transition:transform .45s var(--ease-out),box-shadow .45s,border-color .45s}
.team-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.team-ico{width:48px;height:48px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--accent-blue);color:#fff}
.team-meta{padding:0}
.team-name{font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.team-role{display:block;font-size:13px;margin-top:5px;line-height:1.4}
@media(max-width:1080px){.team-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:440px){.team-grid{grid-template-columns:1fr}}
`;
  document.head.appendChild(s);
})();