// Page — Universes
// Overview of the 3 disciplines (Concierge / Travel / Events) with hover-reveal details,
// followed by the "How it works" 4-step process.

const UniversesPage = () => {
  React.useEffect(() => { if (window.lucide) lucide.createIcons(); });
  const [hovered, setHovered] = React.useState(null);
  const [tapped, setTapped] = React.useState(null);
  const C = "var(--epa-charcoal)";
  const ink = "var(--epa-paper-ivory)";

  const universes = [
    {key:"concierge", n:"01",
      t:"Concierge services", fr:"Conciergerie",
      tone:"warm",
      img:"assets/concierge-tarmac.jpg?v=2",
      short:"Your day, arranged.",
      desc:"A private driver, a florist at sunrise, an unlisted table, a tailor at your suite, a personal shopper at the atelier. The aspects of life that deserve quiet management — rehearsed, remembered, anticipated.",
      items:["Dining · unlisted tables","Transfers · drivers","Personal shopping · atelier visits","Florists · gifts · couture","Wellness · doctors · spas","Relocation · schooling · staff"]},
    {key:"travel", n:"02",
      t:"Travel agency", fr:"Voyage",
      tone:"mediterranean",
      img:"assets/travel-alila.webp",
      short:"Itineraries composed, not booked.",
      desc:"Private residences from Saint-Barth to Courchevel. Commercial and private aviation. Yachts crewed and routed. Itineraries composed by hand — with the 5,000 luxury houses we work with, and our partners in a hundred countries.",
      items:["Private villas & residences","Private aviation & charters","Yacht charter & routing","Hotel benefits (breakfast · upgrade · $100 credit)","Ski season · beach season","Family travel · multi-generational"]},
    {key:"events", n:"03",
      t:"Events", fr:"Événements",
      tone:"ember",
      img:"assets/events-monaco-gp.avif",
      short:"Evenings, orchestrated.",
      desc:"Birthdays in London. Weddings in Capri. Corporate retreats, private concerts, closed venues, access that cannot be purchased — orchestrated end to end, with one brief to the atelier.",
      items:["Weddings · private ceremonies","Birthdays · anniversaries","Corporate retreats · board offsites","Private concerts · performances","Closed venues · exclusive access","Client hospitality · entertainment"]}
  ];

  const steps = [
    {n:"I",   t:"Request",
      body:"Tell us the city, the dates, the budget. In a sentence or two — as you would speak to a friend.",
      items:["City & dates","Budget range","Who is travelling"]},
    {n:"II",  t:"Options",
      body:"Your concierge returns with options — preferences matched, availabilities checked, nothing confirmed.",
      items:["Hotel type · mood","Activities & dining","Availability verified"]},
    {n:"III", t:"Confirmed",
      body:"You select. We confirm — payment, bookings, and a full itinerary delivered to your inbox.",
      items:["Single payment","Bookings confirmed","Itinerary delivered"]},
    {n:"IV",  t:"Support",
      body:"Throughout the journey — a concierge on call, day and night, for any adjustment or unexpected wish.",
      items:["24/7 on call","Changes handled","Wishes anticipated"]}
  ];

  return (
    <div style={{background:C, color:ink, width:"100%", minHeight:"100%",
      fontFamily:"var(--font-ui)"}}>

      <SiteNav current="universes"/>

      {/* HERO */}
      <section style={{position:"relative", height:640, padding:"0 80px",
        display:"flex", alignItems:"center", justifyContent:"center", textAlign:"center",
        overflow:"hidden"}}>
        <div style={{position:"absolute", inset:0}}>
          <Photo tone="dusk" h="100%"/>
          <div style={{position:"absolute", inset:0,
            background:"linear-gradient(180deg, rgba(15,10,6,.5) 0%, rgba(15,10,6,.85) 100%)"}}/>
        </div>
        <div style={{position:"relative", maxWidth:900}}>
          <div style={{font:"400 11px/1 var(--font-editorial)", color:"var(--epa-gold)",
            letterSpacing:".5em", textTransform:"uppercase", marginBottom:32}}>— Chapitre 01 · The universes</div>
          <h1 style={{font:"400 96px/1.02 var(--font-display)", letterSpacing:".01em",
            margin:"0 0 28px"}}>
            Three disciplines,<br/>
            <em style={{color:"var(--epa-champagne)"}}>one atelier.</em>
          </h1>
          <div style={{display:"flex", justifyContent:"center", marginBottom:24}}>
            <Arabesque w={180}/>
          </div>
          <p style={{font:"italic 300 19px/1.5 var(--font-editorial)",
            color:ink, margin:"0 auto", maxWidth:620}}>
            Hover each plate to read its detail. One brief, one concierge —
            across all three universes.
          </p>
        </div>
      </section>

      {/* UNIVERSES — 3 interactive plates */}
      <section style={{padding:"100px 80px 140px", background:C}}>
        <div style={{display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:24}}>
          {universes.map((u,ui) => {
            const active = IS_MOBILE ? (tapped === u.key) : (hovered === u.key);
            return (
              <Reveal key={u.key} d={ui*.12} y={22} threshold={0.1}>
              <div id={u.key}
                onMouseEnter={() => setHovered(u.key)}
                onMouseLeave={() => setHovered(null)}
                onClick={() => { if (IS_MOBILE) setTapped(active ? null : u.key); }}
                style={{position:"relative", height: IS_MOBILE ? (active ? 560 : 260) : 680, cursor:"pointer",
                  transition:"height .45s cubic-bezier(.2,.7,.2,1)",
                  background:"var(--epa-charcoal)",
                  border:"1px solid rgba(170,135,87,.2)",
                  overflow:"hidden"}}>

                {/* Photo backdrop */}
                <div style={{position:"absolute", inset:0,
                  transform: active ? "scale(1.05)" : "scale(1)",
                  transition:"transform 1.2s cubic-bezier(.2,.7,.2,1)"}}>
                  {u.img ? (
                    <img src={u.img} alt={u.t}
                      style={{width:"100%", height:"100%", objectFit:"cover", display:"block"}}/>
                  ) : (
                    <Photo tone={u.tone} h="100%"/>
                  )}
                </div>

                {/* Vignette — gentle, only darkens bottom where text sits */}
                <div style={{position:"absolute", inset:0,
                  background: active
                    ? "linear-gradient(180deg, rgba(15,10,6,.15) 0%, rgba(15,10,6,.85) 100%)"
                    : "linear-gradient(180deg, rgba(15,10,6,0) 45%, rgba(15,10,6,.55) 100%)",
                  transition:"background .5s"}}/>

                {/* Numeral, always visible */}
                <div style={{position:"absolute", top:32, left:36,
                  font:"300 72px/1 var(--font-editorial)",
                  color:"var(--epa-gold)", letterSpacing:"-.02em"}}>{u.n}</div>

                {/* Content */}
                <div style={{position:"absolute", bottom:0, left:0, right:0,
                  padding:"40px 36px 40px",
                  display:"flex", flexDirection:"column", gap:16,
                  textShadow:"0 1px 20px rgba(15,10,6,.8), 0 1px 4px rgba(15,10,6,.6)"}}>

                  <div style={{font:"500 10px/1 var(--font-ui)", color:"var(--epa-gold)",
                    letterSpacing:".3em", textTransform:"uppercase"}}>{u.fr}</div>
                  <h3 style={{font:"400 42px/1.02 var(--font-display)",
                    letterSpacing:".02em", margin:0}}>{u.t}</h3>
                  <div style={{font:"italic 300 17px/1.4 var(--font-editorial)",
                    color:"var(--epa-champagne)"}}>{u.short}</div>

                  {/* Reveal on hover */}
                  <div style={{
                    maxHeight: active ? 400 : 0,
                    opacity: active ? 1 : 0,
                    overflow:"hidden",
                    transition:"max-height .55s cubic-bezier(.2,.7,.2,1), opacity .35s",
                    marginTop: active ? 4 : 0}}>
                    <div style={{marginBottom:14}}><Arabesque w={80}/></div>
                    <p style={{font:"400 14px/1.6 var(--font-editorial)",
                      color:"var(--epa-text-secondary)", margin:"0 0 16px"}}>{u.desc}</p>
                    <ul style={{listStyle:"none", padding:0, margin:0}}>
                      {u.items.map(it => (
                        <li key={it} style={{display:"flex", alignItems:"center", gap:10,
                          font:"400 12px/1.4 var(--font-ui)", color:ink,
                          padding:"6px 0", borderTop:"1px solid rgba(170,135,87,.15)"}}>
                          <i data-lucide="minus" style={{width:10, height:10,
                            color:"var(--epa-gold)", strokeWidth:2}}/>{it}
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>

                {/* Hover arrow indicator */}
                <div style={{position:"absolute", top:36, right:36,
                  width:38, height:38, borderRadius:"50%",
                  border:"1px solid rgba(170,135,87,.5)",
                  display:"flex", alignItems:"center", justifyContent:"center",
                  color:"var(--epa-champagne)",
                  transform: active ? "rotate(45deg)" : "rotate(0)",
                  transition:"transform .4s"}}>
                  <i data-lucide="plus" style={{width:16, height:16, strokeWidth:1.4}}/>
                </div>
              </div>
              </Reveal>
            );
          })}
        </div>

        <div style={{textAlign:"center", marginTop:48,
          font:"italic 300 14px/1 var(--font-editorial)", color:"var(--epa-text-secondary)"}}>
          {IS_MOBILE ? "Tap each plate — the atelier reveals its detail." : "Hover each plate — the atelier reveals its detail."}
        </div>
      </section>

      {/* HOW IT WORKS — 4-step editorial process */}
      <section style={{padding:"140px 120px",
        background:"var(--epa-charcoal)",
        borderTop:"1px solid rgba(170,135,87,.18)"}}>
        <div style={{textAlign:"center", marginBottom:90}}>
          <div style={{font:"400 11px/1 var(--font-editorial)", color:"var(--epa-gold)",
            letterSpacing:".5em", textTransform:"uppercase", marginBottom:20}}>— Chapitre 02 · The process</div>
          <h2 style={{font:"400 64px/1.05 var(--font-display)",
            letterSpacing:".02em", margin:"0 0 22px"}}>
            How it <em style={{color:"var(--epa-champagne)"}}>works.</em>
          </h2>
          <p style={{font:"italic 300 18px/1.5 var(--font-editorial)",
            color:"var(--epa-text-secondary)", margin:"0 auto", maxWidth:620}}>
            From your first message to your return home — four movements,
            one concierge, at your service.
          </p>
        </div>

        {/* 4-step timeline */}
        <div style={{position:"relative", maxWidth:1200, margin:"0 auto"}}>
          {/* Horizontal connector */}
          <div style={{position:"absolute", top:40, left:"8%", right:"8%",
            height:1, background:"linear-gradient(90deg, transparent, rgba(170,135,87,.4) 10%, rgba(170,135,87,.4) 90%, transparent)"}}/>

          <div style={{display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:32,
            position:"relative"}}>
            {steps.map((s,si) => (
              <Reveal key={s.n} d={si*.15} y={20} threshold={0.15}>
              <div style={{textAlign:"center", cursor:"default"}}
                onMouseEnter={e=>{const m=e.currentTarget.querySelector('[data-medal]');if(m){m.style.background="var(--epa-gold)";m.style.borderColor="var(--epa-gold)";const n=m.querySelector('[data-num]');if(n)n.style.color="var(--epa-charcoal)"}}}
                onMouseLeave={e=>{const m=e.currentTarget.querySelector('[data-medal]');if(m){m.style.background="#120C07";m.style.borderColor="var(--epa-gold-dark)";const n=m.querySelector('[data-num]');if(n)n.style.color="var(--epa-champagne)"}}}>
                {/* Numeral medallion */}
                <div data-medal style={{width:80, height:80, margin:"0 auto 32px",
                  borderRadius:"50%", background:"#120C07",
                  border:"1px solid var(--epa-gold-dark)",
                  display:"flex", alignItems:"center", justifyContent:"center",
                  position:"relative", transition:"background .5s, border-color .5s"}}>
                  <div style={{position:"absolute", inset:6, borderRadius:"50%",
                    border:"1px solid rgba(170,135,87,.3)"}}/>
                  <div data-num style={{font:"300 26px/1 var(--font-editorial)",
                    color:"var(--epa-champagne)", letterSpacing:".05em",
                    transition:"color .5s"}}>{s.n}</div>
                </div>

                <div style={{font:"500 10px/1 var(--font-ui)", color:"var(--epa-gold)",
                  letterSpacing:".4em", textTransform:"uppercase", marginBottom:14}}>Step {s.n}</div>
                <h3 style={{font:"400 32px/1 var(--font-display)",
                  letterSpacing:".02em", margin:"0 0 16px"}}>{s.t}</h3>
                <div style={{display:"flex", justifyContent:"center", marginBottom:16}}>
                  <Arabesque w={60}/>
                </div>
                <p style={{font:"italic 300 14px/1.55 var(--font-editorial)",
                  color:"var(--epa-text-secondary)", margin:"0 auto 20px", maxWidth:260}}>
                  {s.body}
                </p>
                <ul style={{listStyle:"none", padding:0, margin:0}}>
                  {s.items.map(it => (
                    <li key={it} style={{font:"400 12px/1.4 var(--font-ui)",
                      color:ink, letterSpacing:".12em", textTransform:"uppercase",
                      padding:"8px 0",
                      borderTop:"1px solid rgba(170,135,87,.12)"}}>{it}</li>
                  ))}
                </ul>
              </div>
              </Reveal>
            ))}
          </div>
        </div>

        {/* Closing note */}
        <div style={{textAlign:"center", marginTop:90}}>
          <div style={{display:"inline-flex", alignItems:"center", gap:16,
            padding:"18px 32px", background:"rgba(26,18,11,.6)",
            border:"1px solid rgba(170,135,87,.25)"}}>
            <i data-lucide="clock" style={{width:16, height:16,
              color:"var(--epa-gold)", strokeWidth:1.4}}/>
            <div style={{font:"italic 300 16px/1 var(--font-editorial)",
              color:"var(--epa-champagne)"}}>
              Average response time — two hours, day and night.
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{padding:"140px 120px", textAlign:"center",
        background:"var(--epa-charcoal)"}}>
        <div style={{font:"400 11px/1 var(--font-editorial)", color:"var(--epa-gold)",
          letterSpacing:".5em", textTransform:"uppercase", marginBottom:20}}>— Begin</div>
        <h2 style={{font:"400 68px/1.05 var(--font-display)",
          letterSpacing:".02em", margin:"0 0 24px", maxWidth:780, marginLeft:"auto", marginRight:"auto"}}>
          Write your first request. We take care of the rest.
        </h2>
        <div style={{display:"flex", justifyContent:"center", marginBottom:40}}>
          <Arabesque w={180}/>
        </div>
        <div style={{display:"flex", justifyContent:"center", gap:16}}>
          <HairlineBtn filled size="lg" href="request-access.html">Formulate a request</HairlineBtn>
          <HairlineBtn size="lg" href="membership.html">Become a member</HairlineBtn>
        </div>
      </section>

      <SiteFooter/>
    </div>
  );
};

Object.assign(window, {UniversesPage});