// Page — The Agency
// Editorial deep page about EPA: story, founders (collective), numbers, hotel benefits, cities, languages.

const AgencyPage = () => {
  React.useEffect(() => { if (window.lucide) lucide.createIcons(); });
  const C = "var(--epa-charcoal)";
  const ink = "var(--epa-paper-ivory)";

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

      <SiteNav current="agency"/>

      {/* HERO — full-bleed editorial cover */}
      <section style={{position:"relative", height:780, padding:"0 80px",
        display:"flex", alignItems:"center", justifyContent:"center", textAlign:"center",
        overflow:"hidden"}}>
        <div style={{position:"absolute", inset:0, zIndex:0}}>
          <Photo tone="ember" h="100%"/>
          <div style={{position:"absolute", inset:0,
            background:"linear-gradient(180deg, rgba(15,10,6,.4) 0%, rgba(15,10,6,.85) 100%)"}}/>
        </div>
        <Reveal style={{position:"relative", zIndex:1, maxWidth:900}} threshold={0.01}>
          <div style={{font:"400 11px/1 var(--font-editorial)", color:"var(--epa-gold)",
            letterSpacing:".5em", textTransform:"uppercase", marginBottom:32}}>— Chapitre 01 · The agency</div>
          <h1 style={{font:"400 96px/1.02 var(--font-display)", letterSpacing:".01em",
            margin:"0 0 28px"}}>
            A quiet<br/>
            <em style={{color:"var(--epa-champagne)"}}>atelier.</em>
          </h1>
          <div style={{display:"flex", justifyContent:"center", margin:"0 0 28px"}}>
            <Arabesque w={200}/>
          </div>
          <p style={{font:"italic 300 20px/1.55 var(--font-editorial)",
            color:"var(--epa-paper-ivory)", margin:"0 auto", maxWidth:680}}>
            Elite Private Agency is a private lifestyle management, wealth management
            and event planning company — composed for individuals and corporations
            whose time, schedules, and standards require global, all-inclusive service.
          </p>
        </Reveal>
      </section>

      {/* STORY — asymmetric, big pull quote + two columns */}
      <section style={{padding:"140px 120px", background:C}}>
        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:100,
          alignItems:"start"}}>
          <div>
            <div style={{font:"400 11px/1 var(--font-editorial)", color:"var(--epa-gold)",
              letterSpacing:".5em", textTransform:"uppercase", marginBottom:30}}>— Chapitre 02 · Origins</div>
            <h2 style={{font:"400 64px/1.05 var(--font-display)",
              letterSpacing:".02em", margin:"0 0 40px"}}>
              Founded by an ex-banker<br/>
              <em style={{color:"var(--epa-champagne)"}}>and athletes.</em>
            </h2>
            <Arabesque w={140}/>
            <p style={{font:"400 16px/1.7 var(--font-editorial)",
              color:"var(--epa-text-secondary)", margin:"32px 0 24px"}}>
              Elite Private Agency was founded in 2022 by three partners — active
              and retired professional footballers alongside a seasoned team of
              investment professionals. A coincidence of worlds: one accustomed to
              performance and privacy on the pitch, the other to discretion and
              precision in finance.
            </p>
            <p style={{font:"400 16px/1.7 var(--font-editorial)",
              color:"var(--epa-text-secondary)", margin:"0 0 24px"}}>
              From that intersection came a conviction: the people our founders
              came to serve — athletes, executives, families of standing — were
              asking for the same thing and finding it nowhere. A private atelier
              that could arrange a suite, a charter, a wedding, a portfolio
              introduction, a driver at 3 a.m. — with the same quiet protocol.
            </p>
            <p style={{font:"400 16px/1.7 var(--font-editorial)",
              color:"var(--epa-text-secondary)", margin:0}}>
              Four years later, we remain small by design. The atelier answers,
              not a call center. Names are on file, preferences remembered,
              protocols rehearsed.
            </p>
          </div>
          <div style={{position:"sticky", top:80}}>
            <Photo tone="warm" h={620} src="assets/benoit-kounkoud.jpeg" alt="Benoit Kounkoud" caption="VIP arrangement · Benoit Kounkoud"/>
          </div>
        </div>
      </section>

      {/* NUMBERS — editorial plate of figures */}
      <section style={{padding:"120px 120px",
        background:"var(--epa-charcoal)",
        borderTop:"1px solid rgba(170,135,87,.18)",
        borderBottom:"1px solid rgba(170,135,87,.18)"}}>
        <div style={{textAlign:"center", marginBottom:80}}>
          <div style={{font:"400 11px/1 var(--font-editorial)", color:"var(--epa-gold)",
            letterSpacing:".5em", textTransform:"uppercase", marginBottom:20}}>— Chapitre 03 · Figures</div>
          <h2 style={{font:"400 56px/1.05 var(--font-display)",
            letterSpacing:".02em", margin:0}}>
            The atelier in <em style={{color:"var(--epa-champagne)"}}>figures.</em>
          </h2>
        </div>
        <div className="agency-figures-grid" style={{display:"grid", gridTemplateColumns:"repeat(4,1fr)",
          borderTop:"1px solid rgba(170,135,87,.2)",
          borderLeft:"1px solid rgba(170,135,87,.2)"}}>
          {[
            {n:"150+",   l:"Members",      s:"Private Circle"},
            {n:"4,000+", l:"Requests",     s:"Handled each year"},
            {n:"5,000+", l:"Luxury hotels",s:"Worldwide partnerships"},
            {n:"100+",   l:"Countries",    s:"Partners on the ground"},
            {n:"4",      l:"Languages",    s:"French · English · Spanish · German"},
            {n:"3",      l:"Cities",       s:"Paris · London · Dubai"},
            {n:"24/7",   l:"Response",     s:"2h average, day and night"},
            {n:"2022",   l:"Founded",      s:"Four years of service"}
          ].map((f,i) => (
            <Reveal key={f.l} d={(i%4)*.08} y={18} threshold={0.1} style={{
              borderRight:"1px solid rgba(170,135,87,.2)",
              borderBottom:"1px solid rgba(170,135,87,.2)"}}>
              <div style={{padding:"48px 36px", textAlign:"center", height:"100%",
                transition:"background .3s, transform .5s", cursor:"default"}}
                onMouseEnter={e=>{e.currentTarget.style.background="rgba(170,135,87,.06)";e.currentTarget.style.transform="translateY(-2px)"}}
                onMouseLeave={e=>{e.currentTarget.style.background="transparent";e.currentTarget.style.transform="translateY(0)"}}>
                <div style={{font:"300 64px/1 var(--font-display)",
                  color:"var(--epa-champagne)", letterSpacing:"-.01em",
                  marginBottom:16}}>{f.n}</div>
                <div style={{font:"500 11px/1 var(--font-ui)", color:"var(--epa-gold)",
                  letterSpacing:".3em", textTransform:"uppercase", marginBottom:10}}>{f.l}</div>
                <div style={{font:"italic 300 12px/1.4 var(--font-editorial)",
                  color:"var(--epa-text-secondary)"}}>{f.s}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* HOTEL BENEFITS — editorial list, styled as a menu */}
      <section style={{padding:"140px 120px", background:C}}>
        <div style={{display:"grid", gridTemplateColumns:"1fr 1.1fr", gap:100,
          alignItems:"start"}}>
          <div>
            <Photo tone="mediterranean" h={640} src="assets/monceau-stairs.jpg" alt="Grand staircase at a member hotel" caption="Preferred partners · worldwide"/>
          </div>
          <div>
            <div style={{font:"400 11px/1 var(--font-editorial)", color:"var(--epa-gold)",
              letterSpacing:".5em", textTransform:"uppercase", marginBottom:24}}>— Chapitre 04 · Hotel privileges</div>
            <h2 style={{font:"400 56px/1.05 var(--font-display)",
              letterSpacing:".02em", margin:"0 0 28px"}}>
              Received <em style={{color:"var(--epa-champagne)"}}>as ours</em>,<br/>not as guests.
            </h2>
            <p style={{font:"italic 300 17px/1.55 var(--font-editorial)",
              color:"var(--epa-text-secondary)", margin:"0 0 40px", maxWidth:520}}>
              Through partnerships with five thousand luxury houses worldwide,
              our members are extended the following privileges at every stay —
              without request, without negotiation.
            </p>
            <Arabesque w={100}/>
            <ul style={{listStyle:"none", padding:0, margin:"36px 0 0"}}>
              {[
                ["01","Daily breakfast","For two guests, each morning"],
                ["02","Room upgrade","Priority or guaranteed, subject to availability"],
                ["03","Hotel credit","$100 per stay, applied on property"],
                ["04","Early / late arrivals","Priority check-in and check-out"],
                ["05","Personal welcome","A note, a preference, something remembered"],
                ["06","& further privileges","Varying by house — spa, dining, transfers"]
              ].map(([n,t,s],i) => (
                <Reveal key={n} d={i*.08} y={14} threshold={0.12}>
                  <li style={{display:"grid",
                    gridTemplateColumns:"48px 220px 1fr",
                    gap:24, alignItems:"baseline",
                    padding:"22px 0",
                    borderTop:"1px solid rgba(170,135,87,.15)",
                    transition:"background .3s, padding-left .4s", cursor:"default"}}
                    onMouseEnter={e=>{e.currentTarget.style.background="rgba(170,135,87,.04)";e.currentTarget.style.paddingLeft="10px"}}
                    onMouseLeave={e=>{e.currentTarget.style.background="transparent";e.currentTarget.style.paddingLeft="0"}}>
                    <div style={{font:"400 11px/1 var(--font-editorial)",
                      color:"var(--epa-gold)", letterSpacing:".3em"}}>{n}</div>
                    <div style={{font:"400 22px/1.2 var(--font-display)",
                      color:ink, letterSpacing:".02em"}}>{t}</div>
                    <div style={{font:"italic 300 14px/1.4 var(--font-editorial)",
                      color:"var(--epa-text-secondary)"}}>{s}</div>
                  </li>
                </Reveal>
              ))}
            </ul>
          </div>
        </div>
      </section>

      {/* PRESENCE — cities + languages, map-free editorial */}
      <section style={{padding:"140px 120px",
        background:"var(--epa-charcoal)"}}>
        <div style={{textAlign:"center", marginBottom:80}}>
          <div style={{font:"400 11px/1 var(--font-editorial)", color:"var(--epa-gold)",
            letterSpacing:".5em", textTransform:"uppercase", marginBottom:20}}>— Chapitre 05 · Presence</div>
          <h2 style={{font:"400 64px/1.05 var(--font-display)",
            letterSpacing:".02em", margin:"0 0 22px"}}>
            Three <em style={{color:"var(--epa-champagne)"}}>offices,</em><br/>
            one hundred borders.
          </h2>
          <p style={{font:"italic 300 17px/1.55 var(--font-editorial)",
            color:"var(--epa-text-secondary)", margin:"0 auto", maxWidth:620}}>
            Home offices in three cities. Local partners in over a hundred countries.
            Multilingual service, day and night.
          </p>
        </div>

        {/* Cities */}
        <div style={{display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:2,
          background:"rgba(170,135,87,.2)", border:"1px solid rgba(170,135,87,.2)"}}>
          {[
            {c:"Paris",  tz:"CET · UTC+1",  sub:"Maison mère",  tone:"warm",   img:"assets/paris-eiffel.webp", alt:"Eiffel Tower over the Seine at sunset"},
            {c:"London", tz:"GMT · UTC+0",  sub:"Bureau",       tone:"alpine", img:"assets/london-westminster.jpeg", alt:"Westminster and Big Ben at night"},
            {c:"Dubai",  tz:"GST · UTC+4",  sub:"Bureau",       tone:"ember",  img:"assets/dubai-atlantis.webp", alt:"Atlantis The Royal infinity pool over the Palm"}
          ].map((city,i) => (
            <Reveal key={city.c} d={i*.12} y={22} threshold={0.1}>
            <div style={{position:"relative", height:360,
              background:"#120C07", overflow:"hidden", cursor:"default"}}
              onMouseEnter={e=>{const p=e.currentTarget.querySelector('[data-photo]');if(p)p.style.transform="scale(1.06)"}}
              onMouseLeave={e=>{const p=e.currentTarget.querySelector('[data-photo]');if(p)p.style.transform="scale(1)"}}>
              <div data-photo style={{position:"absolute", inset:0, transition:"transform 1.2s cubic-bezier(.22,.61,.36,1)"}}>
                <Photo tone={city.tone} src={city.img} alt={city.alt} h="100%"/>
              </div>
              <div style={{position:"absolute", inset:0,
                background:"linear-gradient(180deg, rgba(15,10,6,.2) 50%, rgba(15,10,6,.9) 100%)"}}/>
              <div style={{position:"absolute", bottom:28, left:32, right:32}}>
                <div style={{font:"500 10px/1 var(--font-ui)", color:"var(--epa-gold)",
                  letterSpacing:".3em", textTransform:"uppercase", marginBottom:10}}>{city.sub}</div>
                <h3 style={{font:"400 42px/1 var(--font-display)",
                  letterSpacing:".02em", margin:"0 0 10px"}}>{city.c}</h3>
                <div style={{font:"italic 300 13px/1 var(--font-editorial)",
                  color:"var(--epa-champagne)"}}>{city.tz}</div>
              </div>
            </div>
            </Reveal>
          ))}
        </div>

        {/* Languages */}
        <div style={{marginTop:72, display:"flex", alignItems:"center",
          justifyContent:"center", gap:40, flexWrap:"wrap"}}>
          <div style={{font:"400 11px/1 var(--font-editorial)", color:"var(--epa-gold)",
            letterSpacing:".4em", textTransform:"uppercase"}}>Spoken at the atelier</div>
          <div style={{width:28, height:1, background:"var(--epa-gold)"}}/>
          {["Français","English","Español","Deutsch"].map((l,i) => (
            <div key={l} style={{display:"flex", alignItems:"center", gap:40}}>
              <div style={{font:"400 32px/1 var(--font-display)",
                color:ink, letterSpacing:".02em"}}>{l}</div>
              {i<3 && <div style={{width:4, height:4, background:"var(--epa-gold)",
                transform:"rotate(45deg)"}}/>}
            </div>
          ))}
        </div>
      </section>

      {/* CLIENTS — individual + corporate */}
      <section style={{padding:"140px 120px", background:"var(--epa-charcoal)"}}>
        <div style={{textAlign:"center", marginBottom:80}}>
          <div style={{font:"400 11px/1 var(--font-editorial)", color:"var(--epa-gold)",
            letterSpacing:".5em", textTransform:"uppercase", marginBottom:20}}>— Chapitre 06 · Clientèle</div>
          <h2 style={{font:"400 64px/1.05 var(--font-display)",
            letterSpacing:".02em", margin:0}}>
            For <em style={{color:"var(--epa-champagne)"}}>individuals</em>
            &nbsp;&&nbsp;
            <em style={{color:"var(--epa-champagne)"}}>corporations.</em>
          </h2>
        </div>
        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:40}}>
          {[
            {t:"Private individuals",
              sub:"Members & families",
              body:"Heads of household, heirs, founders, public figures, athletes and their families — for whom discretion is a baseline and time the scarcest asset.",
              points:["Family travel · multi-generational","Relocation & schooling","Personal shopping · atelier visits","Events · anniversaries · weddings","On-call concierge · 24/7"]},
            {t:"Corporate clients",
              sub:"Offices, funds, partnerships",
              body:"Investment offices, family offices, clubs and firms retaining the atelier on behalf of their principals and their visiting counterparts.",
              points:["Executive travel & transfers","Private aviation & yacht charter","Board retreats · offsites","Client hospitality · entertainment","Corporate membership · on retainer"]}
          ].map((p,i) => (
            <Reveal key={p.t} d={i*.15} y={24} threshold={0.12}>
            <Lift y={-4} style={{padding:"48px 44px",
              background:"rgba(26,18,11,.5)",
              border:"1px solid rgba(170,135,87,.2)"}}>
              <div style={{font:"500 10px/1 var(--font-ui)", color:"var(--epa-gold)",
                letterSpacing:".3em", textTransform:"uppercase", marginBottom:14}}>{p.sub}</div>
              <h3 style={{font:"400 44px/1 var(--font-display)",
                letterSpacing:".02em", margin:"0 0 20px"}}>{p.t}</h3>
              <Arabesque w={80}/>
              <p style={{font:"italic 300 16px/1.6 var(--font-editorial)",
                color:"var(--epa-text-secondary)", margin:"22px 0 28px"}}>{p.body}</p>
              <ul style={{listStyle:"none", padding:0, margin:0}}>
                {p.points.map(pt => (
                  <li key={pt} style={{display:"flex", alignItems:"center", gap:12,
                    font:"400 14px/1.4 var(--font-ui)", color:ink,
                    padding:"10px 0", borderTop:"1px solid rgba(170,135,87,.12)"}}>
                    <i data-lucide="minus" style={{width:12, height:12,
                      color:"var(--epa-gold)", strokeWidth:2}}/>{pt}
                  </li>
                ))}
              </ul>
            </Lift>
            </Reveal>
          ))}
        </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}}>— The atelier</div>
        <h2 style={{font:"400 68px/1.05 var(--font-display)",
          letterSpacing:".02em", margin:"0 0 24px", maxWidth:820, marginLeft:"auto", marginRight:"auto"}}>
          Write to us — a concierge replies within one hour.
        </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">Discover membership</HairlineBtn>
        </div>
      </section>

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

Object.assign(window, {AgencyPage});