// Home — Manuscrit · Interactive
// Dark editorial journal w/ ceremonial letter reveal, candle-glow cursor,
// hero parallax, animated membership & testimonial cards, scroll-in arabesques.

// —— Interactive helpers ———————————————————————————————————————

// useReveal is provided globally by shared.jsx

// ───────────────────────────────────────────────────────────────
// IGFeed — pulls the latest posts from Behold.so's JSON endpoint
// and renders them into our own 6-tile grid (no Behold HTML used).
//
// Behold's JSON shape is stable: { posts: [{ id, permalink, sizes:{...},
// mediaUrl, mediaType, caption, ... }, ...] } — we're defensive about
// field naming in case they shuffle things.
//
// Graceful fallback: if fetch fails (offline, CORS, 4xx), we render the
// original curated placeholder tiles so the section is never empty.
// ───────────────────────────────────────────────────────────────
const IG_FEED_URL = "https://feeds.behold.so/CFuzQRSb5qcAkqviEe2C";
const IG_PROFILE_URL = "https://instagram.com/eliteprivateagency";
const IG_FALLBACK = [
  {tone:"warm",          cap:"Paris · Le Bristol"},
  {tone:"mediterranean", cap:"Porto Cervo · July"},
  {tone:"ember",         cap:"Capri · private dinner"},
  {tone:"alpine",        cap:"Gstaad · first light"},
  {tone:"dusk",          cap:"Monte-Carlo · transfer"},
  {tone:"night",         cap:"London · atelier"}
];

function IGFeed() {
  const [posts, setPosts] = React.useState(null); // null = loading, [] = failed, [...] = ok

  React.useEffect(() => {
    if (window.lucide) lucide.createIcons();
  }, [posts]);

  React.useEffect(() => {
    let cancelled = false;
    fetch(IG_FEED_URL)
      .then(r => r.ok ? r.json() : Promise.reject(new Error("HTTP " + r.status)))
      .then(data => {
        if (cancelled) return;
        // Behold returns { posts: [...] } — normalise into the shape we need.
        const raw = Array.isArray(data) ? data
                  : Array.isArray(data.posts) ? data.posts
                  : [];
        const six = raw.slice(0, 6).map(p => {
          // thumbnail priority: sizes.medium → sizes.small → mediaUrl → thumbnailUrl
          const img =
            (p.sizes && (p.sizes.medium?.mediaUrl || p.sizes.medium?.url)) ||
            (p.sizes && (p.sizes.small?.mediaUrl  || p.sizes.small?.url))  ||
            p.mediaUrl || p.thumbnailUrl || p.url || "";
          const cap = (p.caption || p.prunedCaption || "").toString().trim();
          const href = p.permalink || p.url || IG_PROFILE_URL;
          return { img, cap, href };
        }).filter(p => p.img);
        setPosts(six.length ? six : []); // empty array = "failed" path
      })
      .catch(() => { if (!cancelled) setPosts([]); });
    return () => { cancelled = true; };
  }, []);

  // Truncate caption to its first few meaningful words
  const firstWords = (s, maxChars = 56) => {
    if (!s) return "";
    const clean = s.replace(/\s+/g, " ").trim();
    if (clean.length <= maxChars) return clean;
    const cut = clean.slice(0, maxChars);
    const lastSpace = cut.lastIndexOf(" ");
    return (lastSpace > 24 ? cut.slice(0, lastSpace) : cut) + "…";
  };

  // ─── Failure path: keep the curated placeholders so section is never empty
  if (posts !== null && posts.length === 0) {
    return (
      <div style={{display:"grid", gridTemplateColumns:"repeat(6, 1fr)",
        gap:0, borderTop:"1px solid rgba(170,135,87,.18)"}}>
        {IG_FALLBACK.map((t,i) => (
          <a key={i} href={IG_PROFILE_URL} target="_blank" rel="noreferrer"
            style={{position:"relative", display:"block", aspectRatio:"1/1",
              borderRight: i<5 ? "1px solid rgba(170,135,87,.18)" : "none",
              overflow:"hidden", cursor:"pointer"}}
            onMouseEnter={e => { const ov = e.currentTarget.querySelector("[data-ig-overlay]"); if (ov) ov.style.opacity="1"; }}
            onMouseLeave={e => { const ov = e.currentTarget.querySelector("[data-ig-overlay]"); if (ov) ov.style.opacity="0"; }}>
            <Photo tone={t.tone} h="100%"/>
            <div data-ig-overlay style={{position:"absolute", inset:0,
              background:"rgba(15,10,6,.78)", opacity:0, transition:"opacity .3s",
              display:"flex", flexDirection:"column",
              alignItems:"center", justifyContent:"center", gap:12,
              padding:"0 14px", textAlign:"center"}}>
              <i data-lucide="instagram" style={{width:22, height:22,
                color:"var(--epa-gold)", strokeWidth:1.2}}/>
              <div style={{font:"italic 400 12px/1.3 var(--font-editorial)",
                color:"var(--epa-champagne)"}}>{t.cap}</div>
            </div>
          </a>
        ))}
      </div>
    );
  }

  // ─── Loading path: 6 shimmering gold placeholders — same grid shape
  if (posts === null) {
    return (
      <div style={{display:"grid", gridTemplateColumns:"repeat(6, 1fr)", gap:0,
        borderTop:"1px solid rgba(170,135,87,.18)"}}>
        {Array.from({length:6}).map((_,i) => (
          <div key={i} style={{position:"relative", aspectRatio:"1/1",
            borderRight: i<5 ? "1px solid rgba(170,135,87,.18)" : "none",
            background:"linear-gradient(90deg, #1a120b 0%, #2a1e14 50%, #1a120b 100%)",
            backgroundSize:"200% 100%",
            animation:"epaShimmer 2.4s ease-in-out infinite"}}/>
        ))}
      </div>
    );
  }

  // ─── Live path: render the real posts
  return (
    <div style={{display:"grid", gridTemplateColumns:"repeat(6, 1fr)", gap:0,
      borderTop:"1px solid rgba(170,135,87,.18)"}}>
      {posts.map((p,i) => (
        <a key={i} href={p.href} target="_blank" rel="noreferrer"
          style={{position:"relative", display:"block", aspectRatio:"1/1",
            borderRight: i<5 ? "1px solid rgba(170,135,87,.18)" : "none",
            overflow:"hidden", cursor:"pointer", background:"#0f0a06"}}
          onMouseEnter={e => {
            const ov = e.currentTarget.querySelector("[data-ig-overlay]");
            if (ov) ov.style.opacity = "1";
            const im = e.currentTarget.querySelector("img");
            if (im) im.style.transform = "scale(1.04)";
          }}
          onMouseLeave={e => {
            const ov = e.currentTarget.querySelector("[data-ig-overlay]");
            if (ov) ov.style.opacity = "0";
            const im = e.currentTarget.querySelector("img");
            if (im) im.style.transform = "scale(1)";
          }}>
          <img src={p.img} alt="" loading="lazy"
            style={{width:"100%", height:"100%", objectFit:"cover",
              display:"block", transition:"transform 1.2s cubic-bezier(.22,.61,.36,1)",
              filter:"saturate(.92) contrast(1.02)"}}/>
          <div data-ig-overlay style={{position:"absolute", inset:0,
            background:"rgba(15,10,6,.78)", opacity:0, transition:"opacity .3s",
            display:"flex", flexDirection:"column",
            alignItems:"center", justifyContent:"center", gap:12,
            padding:"0 14px", textAlign:"center"}}>
            <i data-lucide="instagram" style={{width:22, height:22,
              color:"var(--epa-gold)", strokeWidth:1.2}}/>
            <div style={{font:"italic 400 12px/1.3 var(--font-editorial)",
              color:"var(--epa-champagne)"}}>{firstWords(p.cap) || "@eliteprivateagency"}</div>
          </div>
        </a>
      ))}
    </div>
  );
}

function CeremonialTitle() {
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => { const t = setTimeout(() => setMounted(true), 120); return () => clearTimeout(t); }, []);
  // Mobile: static, wrapping, no per-letter staggered reveal.
  if (IS_MOBILE) {
    return (
      <h1 style={{font:"400 56px/1.02 var(--font-display)", letterSpacing:".01em",
        margin:"0 0 24px", textAlign:"center"}}>
        <span style={{display:"block"}}>A private</span>
        <span style={{display:"block", fontStyle:"italic", color:"var(--epa-champagne)"}}>atelier</span>
        <span style={{display:"block"}}>of desires.</span>
      </h1>
    );
  }
  const Line = ({children, base, italic, color}) => (
    <span style={{display:"block", whiteSpace:"nowrap"}}>
      {[...children].map((c,i) => (
        <span key={i} style={{
          display:"inline-block",
          fontStyle: italic ? "italic" : "normal",
          color: color || "inherit",
          opacity: mounted ? 1 : 0,
          transform: mounted ? "translateY(0)" : "translateY(22px)",
          transition: `opacity .9s cubic-bezier(.22,.61,.36,1) ${base + i*.055}s, transform 1s cubic-bezier(.22,.61,.36,1) ${base + i*.055}s`
        }}>{c === " " ? "\u00A0" : c}</span>
      ))}
    </span>
  );
  return (
    <h1 style={{font:"400 110px/.98 var(--font-display)", letterSpacing:".01em", margin:"0 0 32px"}}>
      <Line base={.1}>A private</Line>
      <Line base={.55} italic color="var(--epa-champagne)">atelier</Line>
      <Line base={1.0}>of desires.</Line>
    </h1>
  );
}

function CandleGlow() {
  // Mobile: no cursor glow, no mouse tracking.
  if (IS_MOBILE) return null;
  const [xy, setXy] = React.useState({x:.5, y:.35});
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const move = e => { setVisible(true); setXy({x:e.clientX/window.innerWidth, y:e.clientY/window.innerHeight}); };
    const leave = () => setVisible(false);
    window.addEventListener("mousemove", move);
    window.addEventListener("mouseleave", leave);
    return () => { window.removeEventListener("mousemove", move); window.removeEventListener("mouseleave", leave); };
  }, []);
  return (
    <div aria-hidden style={{
      position:"fixed", inset:0, pointerEvents:"none", zIndex:5,
      opacity: visible ? 1 : 0, transition:"opacity 1.2s ease",
      background:`radial-gradient(460px circle at ${xy.x*100}% ${xy.y*100}%, rgba(212,175,125,.09), rgba(212,175,125,.03) 40%, transparent 70%)`
    }}/>
  );
}

function useParallax(rate = .12) {
  const ref = React.useRef(null);
  const [dy, setDy] = React.useState(0);
  React.useEffect(() => {
    if (IS_MOBILE) return; // no parallax on touch devices
    const onScroll = () => {
      if (!ref.current) return;
      const r = ref.current.getBoundingClientRect();
      const center = r.top + r.height/2 - window.innerHeight/2;
      setDy(-center * rate);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, {passive:true});
    return () => window.removeEventListener("scroll", onScroll);
  }, [rate]);
  return [ref, dy];
}

function MembershipCard({p, ink}) {
  const [hover, setHover] = React.useState(false);
  React.useEffect(() => { if (window.lucide) lucide.createIcons(); });
  return (
    <div
      onMouseEnter={()=>setHover(true)}
      onMouseLeave={()=>setHover(false)}
      style={{
        background: p.featured ? "linear-gradient(180deg,#2a1e14,#1a120b)" : "rgba(26,18,11,.5)",
        border:`1px solid ${p.featured ? "var(--epa-gold-dark)" : (hover ? "rgba(212,175,125,.45)" : "rgba(170,135,87,.2)")}`,
        padding:"48px 44px", position:"relative",
        boxShadow: hover ? "0 32px 60px -20px rgba(0,0,0,.75)" : "0 0 0 rgba(0,0,0,0)",
        transform: hover ? "translateY(-3px)" : "translateY(0)",
        transition:"transform .5s cubic-bezier(.22,.61,.36,1), border-color .4s ease, box-shadow .5s ease",
        overflow:"hidden"}}>
      {p.featured && (
        <div aria-hidden style={{position:"absolute", inset:-1, pointerEvents:"none",
          background:"linear-gradient(120deg, transparent 30%, rgba(244,224,179,.16) 48%, transparent 66%)",
          backgroundSize:"260% 100%", animation:"epaShimmer 7s linear infinite",
          mixBlendMode:"screen", opacity:.55}}/>
      )}
      <div aria-hidden style={{position:"absolute", top:0, right:0,
        width: hover ? 72 : 0, height: hover ? 72 : 0,
        background:"linear-gradient(225deg, rgba(212,175,125,.3) 0%, rgba(212,175,125,0) 70%)",
        borderLeft: hover ? "1px solid rgba(212,175,125,.4)" : "none",
        borderBottom: hover ? "1px solid rgba(212,175,125,.4)" : "none",
        transition:"all .5s cubic-bezier(.22,.61,.36,1)"}}/>
      {p.featured && (
        <div style={{position:"absolute", top:-1, right:-1, zIndex:2,
          background:"var(--epa-gold)", color:"var(--epa-charcoal)",
          font:"500 10px/1 var(--font-ui)", letterSpacing:".24em",
          textTransform:"uppercase", padding:"8px 14px"}}>Recommended</div>
      )}
      <div style={{font:"500 10px/1 var(--font-ui)", color:"var(--epa-gold)",
        letterSpacing:".3em", textTransform:"uppercase", marginBottom:14, position:"relative"}}>{p.label}</div>
      <h3 style={{font:"400 44px/1 var(--font-display)", letterSpacing:".02em", margin:"0 0 10px",
        color: hover ? "var(--epa-champagne)" : "inherit", transition:"color .4s ease", position:"relative"}}>{p.t}</h3>
      <div style={{font:"italic 400 16px/1 var(--font-editorial)",
        color:"var(--epa-champagne)", marginBottom:22, position:"relative"}}>{p.price}</div>
      <div style={{width: hover ? 120 : 60, height:1, background:"var(--epa-gold)",
        transition:"width .6s cubic-bezier(.22,.61,.36,1)", position:"relative"}}/>
      <p style={{font:"400 14px/1.6 var(--font-editorial)",
        color:"var(--epa-text-secondary)", margin:"20px 0 28px", position:"relative"}}>{p.body}</p>
      <div style={{display:"flex", flexDirection:"column", gap:10, marginBottom:32, position:"relative"}}>
        {p.features.map((f,i) => (
          <div key={f} style={{display:"flex", alignItems:"center", gap:12,
            font:"400 13px/1.4 var(--font-ui)", color:ink,
            paddingBottom:10, borderBottom:"1px solid rgba(170,135,87,.1)",
            transform: hover ? "translateX(0)" : "translateX(-6px)",
            opacity: hover ? 1 : .78,
            transition:`transform .5s cubic-bezier(.22,.61,.36,1) ${i*.06}s, opacity .5s ease ${i*.06}s`}}>
            <i data-lucide="check" style={{width:14, height:14,
              color:"var(--epa-gold)", strokeWidth:1.5}}/>{f}
          </div>
        ))}
      </div>
      <div style={{position:"relative"}}>
        <HairlineBtn filled={p.featured} size="md">
          {p.featured ? "Request invitation" : "Make a request"}
        </HairlineBtn>
      </div>
    </div>
  );
}

function TestimonialCard({t, ink}) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={()=>setHover(true)}
      onMouseLeave={()=>setHover(false)}
      style={{background:"#120C07", padding:"44px 40px", position:"relative",
        transition:"background .5s ease", cursor:"default", overflow:"hidden"}}>
      <div aria-hidden style={{position:"absolute", top:8, right:20,
        font:"400 96px/1 var(--font-display)", color:"var(--epa-gold)",
        opacity: hover ? .24 : 0,
        transform: hover ? "scale(1)" : "scale(.55)",
        transformOrigin:"top right",
        transition:"opacity .5s ease, transform .6s cubic-bezier(.22,.61,.36,1)",
        pointerEvents:"none"}}>“</div>
      <div style={{display:"flex", alignItems:"center", gap:10, marginBottom:22, position:"relative"}}>
        <div style={{font:"500 10px/1 var(--font-ui)", color:"var(--epa-gold)",
          letterSpacing:".3em", textTransform:"uppercase"}}>— {t.tag}</div>
      </div>
      <p style={{font:"italic 300 19px/1.55 var(--font-editorial)",
        color:ink, margin:"0 0 28px", position:"relative"}} dangerouslySetInnerHTML={{__html:`“${t.q}”`}}/>
      <div style={{display:"flex", alignItems:"center", gap:12,
        paddingTop:20, borderTop:"1px solid rgba(170,135,87,.15)", position:"relative"}}>
        <div style={{font:"400 22px/1 var(--font-script)",
          color:"var(--epa-champagne)",
          filter: hover ? "drop-shadow(0 0 6px rgba(212,175,125,.35))" : "none",
          transition:"filter .5s ease"}}
          dangerouslySetInnerHTML={{__html:t.a}}/>
        <div style={{flex:1, height:1, background:"rgba(170,135,87,.15)", position:"relative", overflow:"hidden"}}>
          <div style={{position:"absolute", inset:0, background:"var(--epa-gold)",
            transform: hover ? "scaleX(1)" : "scaleX(0)", transformOrigin:"left",
            transition:"transform .7s cubic-bezier(.22,.61,.36,1)"}}/>
        </div>
        <div style={{font:"500 10px/1 var(--font-ui)", color:"var(--epa-gold)",
          letterSpacing:".24em", textTransform:"uppercase"}}>{t.r}</div>
      </div>
    </div>
  );
}

// —— Page ————————————————————————————————————————————————————————

const Home = () => {
  React.useEffect(() => { if (window.lucide) lucide.createIcons(); });
  const C = "var(--epa-charcoal)";
  const ink = "var(--epa-paper-ivory)";
  const [heroPhotoRef, heroDy] = useParallax(.08);
  const [manifestoRef, manifestoShown] = useReveal();
  const [univRef, univShown] = useReveal(0.1);
  const [memRef, memShown] = useReveal(0.12);
  const [testRef, testShown] = useReveal(0.12);

  return (
    <div style={{background:C, color:ink, width:"100%", minHeight:"100%",
      fontFamily:"var(--font-ui)", position:"relative"}}>
      <style>{`
        @keyframes epaShimmer { 0%{background-position:200% 0} 100%{background-position:-60% 0} }
        @keyframes epaDraw { 0%{stroke-dashoffset:240} 100%{stroke-dashoffset:0} }
      `}</style>

      <CandleGlow/>

      <SiteNav current="home"/>

      {/* HERO */}
      <section className="epa-hero-section" style={{position:"relative", height:960, padding:"120px 80px 0",
        display:"grid", gridTemplateColumns:"1fr 1fr", gap:80, alignItems:"center"}}>
        <div>
          <div style={{font:"400 11px/1 var(--font-editorial)", color:"var(--epa-gold)",
            letterSpacing:".5em", textTransform:"uppercase", marginBottom:40}}>— Chapitre 01 · Préambule</div>
          <CeremonialTitle/>
          <Arabesque w={160}/>
          <p style={{font:"italic 300 22px/1.5 var(--font-editorial)",
            color:"var(--epa-text-secondary)", maxWidth:480, margin:"32px 0 0"}}>
            Elite Private Agency is not a simple company. It is an atelier —
            where a handful of concierges compose journeys, evenings,
            and arrangements for those who require discretion as a standard.
          </p>
          <div style={{marginTop:44, font:"400 42px/1 var(--font-script)",
            color:"var(--epa-champagne)"}}>Philippe</div>
          <div style={{font:"500 10px/1 var(--font-ui)", color:"var(--epa-gold)",
            letterSpacing:".3em", textTransform:"uppercase", marginTop:6}}>Founder</div>
        </div>

        <div style={{position:"relative", height:720}} className="epa-hero-photo">
          <div ref={heroPhotoRef} style={{
            transform:`translateY(${heroDy}px)`,
            transition:"transform .08s linear", height:"100%"}}>
            <img src="assets/hero-paris-night.jpeg" alt="Paris by night — the atelier on call"
              style={{width:"100%", height:"100%", objectFit:"cover", objectPosition:"center", display:"block"}}/>
          </div>
          {/* cartouche */}
          <div className="epa-hero-cartouche" style={{position:"absolute", bottom:-40, left:-60,
            width:360, background:"rgba(26,18,11,.88)",
            backdropFilter:"blur(8px)", border:".5px solid rgba(170,135,87,.4)",
            padding:"30px 32px", textAlign:"center"}}>
            <div style={{position:"absolute", left:"50%", top:-7, transform:"translateX(-50%)",
              width:14, height:14, borderRadius:999,
              background:"radial-gradient(circle at 35% 30%,#F2DEA4,#C0A36F 55%,#866741)",
              boxShadow:"0 0 12px rgba(244,224,179,.4)"}}/>
            <div style={{font:"400 10px/1 var(--font-editorial)", color:"var(--epa-gold)",
              letterSpacing:".4em", textTransform:"uppercase", marginBottom:14}}>On call · 24/7</div>
            <div style={{font:"400 28px/1.1 var(--font-display)",
              letterSpacing:".04em", marginBottom:10}}>Paris</div>
            <div style={{font:"italic 400 14px/1.4 var(--font-editorial)",
              color:"var(--epa-champagne)"}}>VIP arrangement · Nathan Collins</div>
          </div>
        </div>
      </section>

      {/* MANIFESTO */}
      <section ref={manifestoRef} style={{padding:"180px 120px", textAlign:"center",
        background:"linear-gradient(180deg, #1A120B 0%, #0F0A06 100%)"}}>
        <div style={{font:"400 11px/1 var(--font-editorial)", color:"var(--epa-gold)",
          letterSpacing:".5em", textTransform:"uppercase", marginBottom:30,
          opacity: manifestoShown ? 1 : 0, transform: manifestoShown ? "translateY(0)" : "translateY(14px)",
          transition:"all .9s cubic-bezier(.22,.61,.36,1)"}}>— Chapitre 02 · Manifeste</div>
        <blockquote style={{font:"italic 300 44px/1.25 var(--font-editorial)",
          color:ink, margin:"0 auto", maxWidth:880, letterSpacing:".005em",
          opacity: manifestoShown ? 1 : 0, transform: manifestoShown ? "translateY(0)" : "translateY(20px)",
          transition:"all 1.1s cubic-bezier(.22,.61,.36,1) .15s"}}>
          “Serving you is not a slogan. It is a protocol —
          quiet, precise, orchestrated before you have finished asking.”
        </blockquote>
        <div style={{margin:"44px auto 0", display:"flex", justifyContent:"center",
          opacity: manifestoShown ? 1 : 0, transition:"opacity 1.2s ease .4s"}}>
          <Arabesque w={200}/>
        </div>
        <div style={{font:"400 32px/1 var(--font-script)",
          color:"var(--epa-champagne)", marginTop:28,
          opacity: manifestoShown ? 1 : 0, transform: manifestoShown ? "translateY(0)" : "translateY(10px)",
          transition:"all 1s cubic-bezier(.22,.61,.36,1) .6s"}}>Elite Private Agency</div>
      </section>

      {/* UNIVERSES */}
      <section ref={univRef} style={{padding:"140px 120px", background:C}}>
        <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 · Univers</div>
          <h2 style={{font:"400 68px/1.05 var(--font-display)", letterSpacing:".02em", margin:0}}>
            Three disciplines,<br/>one atelier.
          </h2>
        </div>

        <div style={{display:"flex", flexDirection:"column", gap:4}}>
          {[
            {n:"01", t:"Concierge services", fr:"Conciergerie",
              body:"Your day, arranged before you think of it. A private driver, a florist at sunrise, an unlisted table, a tailor at your suite. The aspects of life that deserve quiet management.",
              tone:"warm", img:"assets/concierge-tarmac.jpg?v=2", alt:"Private car on a night tarmac"},
            {n:"02", t:"Travel agency", fr:"Voyage",
              body:"Private residences from Saint-Barth to Courchevel. Commercial and private aviation. Yachts crewed and routed. Itineraries composed, not booked.",
              tone:"mediterranean", img:"assets/travel-alila.webp", alt:"Private residence overlooking the sea"},
            {n:"03", t:"Events", fr:"Événements",
              body:"Birthdays in London. Weddings in Capri. Private concerts, closed venues, access that cannot be purchased — orchestrated end to end.",
              tone:"ember", img:"assets/events-monaco-gp.avif", alt:"Evening event scene"}
          ].map((u, i) => (
            <div key={u.n} style={{display:"grid",
              gridTemplateColumns: i%2===0 ? "140px 1fr 420px" : "420px 1fr 140px",
              gap:56, alignItems:"center", padding:"32px 0",
              borderTop:"1px solid rgba(170,135,87,.18)",
              opacity: univShown ? 1 : 0,
              transform: univShown ? "translateY(0)" : "translateY(24px)",
              transition:`opacity .9s ease ${i*.15}s, transform .9s cubic-bezier(.22,.61,.36,1) ${i*.15}s`}}>
              {i%2===0 ? (
                <>
                  <div style={{font:"300 120px/.85 var(--font-editorial)",
                    color:"var(--epa-champagne)", letterSpacing:"-.02em"}}>{u.n}</div>
                  <div>
                    <div style={{font:"500 10px/1 var(--font-ui)", color:"var(--epa-gold)",
                      letterSpacing:".3em", textTransform:"uppercase", marginBottom:12}}>{u.fr}</div>
                    <h3 style={{font:"400 44px/1 var(--font-display)", letterSpacing:".02em",
                      margin:"0 0 18px"}}>{u.t}</h3>
                    <p style={{font:"400 15px/1.6 var(--font-editorial)",
                      color:"var(--epa-text-secondary)", margin:0, maxWidth:460}}>{u.body}</p>
                  </div>
                  <Photo tone={u.tone} src={u.img} alt={u.alt} h={260}/>
                </>
              ) : (
                <>
                  <Photo tone={u.tone} src={u.img} alt={u.alt} h={260}/>
                  <div style={{textAlign:"right"}}>
                    <div style={{font:"500 10px/1 var(--font-ui)", color:"var(--epa-gold)",
                      letterSpacing:".3em", textTransform:"uppercase", marginBottom:12}}>{u.fr}</div>
                    <h3 style={{font:"400 44px/1 var(--font-display)", letterSpacing:".02em",
                      margin:"0 0 18px"}}>{u.t}</h3>
                    <p style={{font:"400 15px/1.6 var(--font-editorial)",
                      color:"var(--epa-text-secondary)", margin:"0 0 0 auto", maxWidth:460}}>{u.body}</p>
                  </div>
                  <div style={{font:"300 120px/.85 var(--font-editorial)",
                    color:"var(--epa-champagne)", letterSpacing:"-.02em", textAlign:"right"}}>{u.n}</div>
                </>
              )}
            </div>
          ))}
        </div>
      </section>

      {/* MEMBERSHIP — Two ways in (interactive cards) */}
      <section ref={memRef} style={{padding:"140px 120px",
        background:"radial-gradient(ellipse at 50% 0%, #2A1E14 0%, #1A120B 55%, #0F0A06 100%)"}}>
        <div style={{textAlign:"center", marginBottom:80,
          opacity: memShown ? 1 : 0, transform: memShown ? "translateY(0)" : "translateY(18px)",
          transition:"all .9s cubic-bezier(.22,.61,.36,1)"}}>
          <div style={{font:"400 11px/1 var(--font-editorial)", color:"var(--epa-gold)",
            letterSpacing:".5em", textTransform:"uppercase", marginBottom:20}}>— Chapitre 04 · Adhésion</div>
          <h2 style={{font:"400 68px/1.05 var(--font-display)", letterSpacing:".02em", margin:"0 0 18px"}}>
            Two ways in.
          </h2>
          <p style={{font:"italic 300 20px/1.5 var(--font-editorial)",
            color:"var(--epa-text-secondary)", margin:"0 auto", maxWidth:620}}>
            Pay only for what you request. Or hold a seat at the atelier — with priorities, standing arrangements, and a concierge on retainer.
          </p>
        </div>

        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:40, maxWidth:1000, margin:"0 auto"}}>
          {[
            {label:"À la carte", t:"Pay as you go", price:"No retainer",
              body:"Engage the atelier one request at a time. Billed per arrangement, fully transparent, at the same tariff as our members.",
              features:["One-off requests","Member-equal pricing","48h response time","No commitment"]},
            {label:"Private Circle", t:"Membership", price:"By invitation",
              body:"A seat at the atelier. Standing preferences on file. A dedicated concierge. Priority over non-members on every booking.",
              features:["Dedicated concierge","2h response · 24/7","Standing preferences","Priority access","Complimentary upgrades"],
              featured:true}
          ].map((p,i) => (
            <div key={p.t} style={{
              opacity: memShown ? 1 : 0,
              transform: memShown ? "translateY(0)" : "translateY(24px)",
              transition:`opacity .9s ease ${.15+i*.15}s, transform .9s cubic-bezier(.22,.61,.36,1) ${.15+i*.15}s`}}>
              <MembershipCard p={p} ink={ink}/>
            </div>
          ))}
        </div>
      </section>

      {/* HOTEL PARTNERS */}
      <section style={{padding:"120px 120px 100px", background:"var(--epa-charcoal)"}}>
        <div style={{textAlign:"center", marginBottom:56}}>
          <div style={{font:"400 11px/1 var(--font-editorial)", color:"var(--epa-gold)",
            letterSpacing:".5em", textTransform:"uppercase", marginBottom:20}}>— Chapitre 05 · Maisons partenaires</div>
          <h2 style={{font:"400 52px/1.05 var(--font-display)", letterSpacing:".02em", margin:"0 0 18px"}}>
            The houses we work with.
          </h2>
          <p style={{font:"italic 300 17px/1.5 var(--font-editorial)",
            color:"var(--epa-text-secondary)", margin:"0 auto", maxWidth:620}}>
            Preferred partners across Europe and beyond — where our members are received as ours, not as guests.
          </p>
        </div>
        <div className="home-logo-grid" style={{display:"grid", gridTemplateColumns:"repeat(4, 1fr)",
          borderTop:"1px solid rgba(170,135,87,.18)",
          borderLeft:"1px solid rgba(170,135,87,.18)"}}>
          {[
            {name:"Accor",         logo:"assets/hotels/accor.png"},
            {name:"Aman",          logo:"assets/hotels/aman.png"},
            {name:"Bvlgari",       logo:"assets/hotels/bvlgari.png"},
            {name:"Four Seasons",  logo:"assets/hotels/four-seasons.png"},
            {name:"Jumeirah",      logo:"assets/hotels/jumeirah.png"},
            {name:"Mandarin Oriental", logo:"assets/hotels/mandarin.png"},
            {name:"Six Senses",    logo:"assets/hotels/six-senses.png"},
            {name:"The Peninsula", logo:"assets/hotels/peninsula.png"}
          ].map(h => (
            <div key={h.name} className="home-logo-cell" style={{
              borderRight:"1px solid rgba(170,135,87,.18)",
              borderBottom:"1px solid rgba(170,135,87,.18)",
              padding:"48px 32px", textAlign:"center",
              display:"flex", alignItems:"center", justifyContent:"center",
              minHeight:160,
              transition:"background .3s, transform .5s", cursor:"default"}}
              onMouseEnter={e => { e.currentTarget.style.background="rgba(170,135,87,.05)";
                e.currentTarget.style.transform="translateY(-2px)";
                const img = e.currentTarget.querySelector('img');
                if (img) { img.style.filter="brightness(0) invert(1) opacity(1)"; }
              }}
              onMouseLeave={e => { e.currentTarget.style.background="transparent";
                e.currentTarget.style.transform="translateY(0)";
                const img = e.currentTarget.querySelector('img');
                if (img) { img.style.filter="brightness(0) invert(1) opacity(.72)"; }
              }}>
              <img src={h.logo} alt={h.name} style={{
                width:"100%", height:"76px",
                objectFit:"contain",
                filter:"brightness(0) invert(1) opacity(.72)",
                transition:"filter .4s ease"}}/>
            </div>
          ))}
        </div>
        <div style={{textAlign:"center", marginTop:40,
          font:"italic 300 14px/1 var(--font-editorial)", color:"var(--epa-text-secondary)"}}>
          &amp; forty-two others, on four continents.
        </div>
      </section>

      {/* TESTIMONIALS — interactive */}
      <section ref={testRef} style={{padding:"140px 120px",
        background:"linear-gradient(180deg,#0F0A06 0%, #1A120B 100%)"}}>
        <div style={{textAlign:"center", marginBottom:80,
          opacity: testShown ? 1 : 0, transform: testShown ? "translateY(0)" : "translateY(18px)",
          transition:"all .9s cubic-bezier(.22,.61,.36,1)"}}>
          <div style={{font:"400 11px/1 var(--font-editorial)", color:"var(--epa-gold)",
            letterSpacing:".5em", textTransform:"uppercase", marginBottom:20}}>— Chapitre 06 · Voix</div>
          <h2 style={{font:"400 68px/1.05 var(--font-display)", letterSpacing:".02em", margin:"0 0 22px"}}>
            What our <em style={{color:"var(--epa-champagne)"}}>members</em> say.
          </h2>
          <div style={{display:"flex", justifyContent:"center"}}><Arabesque w={180}/></div>
        </div>

        <div style={{maxWidth:960, margin:"0 auto 80px", textAlign:"center",
          opacity: testShown ? 1 : 0, transform: testShown ? "translateY(0)" : "translateY(20px)",
          transition:"all 1s cubic-bezier(.22,.61,.36,1) .2s"}}>
          <div style={{font:"400 64px/1 var(--font-display)",
            color:"var(--epa-gold)", marginBottom:16}}>“</div>
          <blockquote style={{font:"italic 300 34px/1.35 var(--font-editorial)",
            color:ink, margin:"0 0 32px", letterSpacing:".005em"}}>
            A birthday in London, organised in forty-eight hours —
            down to the calligrapher who painted our daughter's name on the cake.
          </blockquote>
          <div style={{display:"flex", flexDirection:"column", alignItems:"center", gap:10}}>
            <div style={{font:"400 34px/1 var(--font-script)",
              color:"var(--epa-champagne)", whiteSpace:"nowrap"}}>Caroline V.</div>
            <div style={{display:"flex", alignItems:"center", gap:12}}>
              <div style={{width:24, height:1, background:"var(--epa-gold)"}}/>
              <div style={{font:"500 10px/1 var(--font-ui)", color:"var(--epa-gold)",
                letterSpacing:".3em", textTransform:"uppercase", whiteSpace:"nowrap"}}>Member · Geneva</div>
              <div style={{width:24, height:1, background:"var(--epa-gold)"}}/>
            </div>
          </div>
        </div>

        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr",
          gap:2, maxWidth:1200, margin:"0 auto",
          border:"1px solid rgba(170,135,87,.18)",
          background:"rgba(170,135,87,.18)"}}>
          {[
            {q:"They know my coffee. They know my driver. They know which seat I prefer at Le Cinq. That is the work.",
              a:"Alexander R.", r:"Member · London", tag:"Concierge"},
            {q:"Three weeks in the Cyclades — crew, chef, route and last-minute changes. Not one detail I had to manage myself.",
              a:"Sofía M.", r:"Member · Madrid", tag:"Travel"},
            {q:"Our wedding in Capri felt like a private island. Ninety guests, zero press, one brief to the atelier.",
              a:"D. &amp; N. Chen", r:"Members · Hong Kong", tag:"Events"},
            {q:"A suite, a tailor, a jeweller, a table — arranged before my flight landed. They simply anticipate.",
              a:"Philippe D.", r:"Member · Paris", tag:"Concierge"}
          ].map((t,i) => (
            <div key={i} style={{
              opacity: testShown ? 1 : 0,
              transform: testShown ? "translateY(0)" : "translateY(20px)",
              transition:`opacity .8s ease ${.3+i*.12}s, transform .8s cubic-bezier(.22,.61,.36,1) ${.3+i*.12}s`}}>
              <TestimonialCard t={t} ink={ink}/>
            </div>
          ))}
        </div>
      </section>

      {/* AURUM TEASER — replaces former concierge form */}
      <section id="aurum" style={{padding:"160px 120px",
        background:"radial-gradient(ellipse at 50% 0%, #2A1E14 0%, #1A120B 55%, #0B0703 100%)",
        textAlign:"center", position:"relative", overflow:"hidden"}}>
        <div aria-hidden style={{position:"absolute", inset:0,
          background:"radial-gradient(circle at 50% 40%, rgba(244,224,179,.08), transparent 55%)",
          pointerEvents:"none"}}/>
        <div style={{position:"relative", maxWidth:760, margin:"0 auto"}}>
          <div style={{font:"400 11px/1 var(--font-editorial)", color:"var(--epa-gold)",
            letterSpacing:".5em", textTransform:"uppercase", marginBottom:22}}>— Chapitre 07 · Aurum</div>
          <h2 style={{font:"400 76px/1.02 var(--font-display)", letterSpacing:".015em",
            margin:"0 0 24px"}}>
            The atelier,<br/><em style={{color:"var(--epa-champagne)"}}>in your pocket.</em>
          </h2>
          <div style={{display:"flex", justifyContent:"center", margin:"0 0 28px"}}>
            <Arabesque w={180}/>
          </div>
          <p style={{font:"italic 300 20px/1.55 var(--font-editorial)",
            color:"var(--epa-text-secondary)", margin:"0 auto 44px", maxWidth:600}}>
            Aurum is our companion application — a private line to your concierge,
            a notebook of preferences, and a curated atlas of places, people and arrangements.
            By invitation only.
          </p>
          <div style={{display:"inline-flex", gap:16}}>
            <HairlineBtn filled size="lg" href="aurum.html">Discover Aurum</HairlineBtn>
            <HairlineBtn size="lg" href="request-access.html">Request access</HairlineBtn>
          </div>
        </div>
      </section>

      {/* INSTAGRAM */}
      {/*
        Live feed via Behold.so JSON endpoint. The React IGFeed component
        fetches the feed on mount, injects the 6 most recent posts into our
        own grid (no Behold HTML). Fallback to curated placeholders if
        network/endpoint fails — so the section is never empty.
      */}
      <section style={{background:"#0a0705", borderTop:"1px solid rgba(170,135,87,.18)"}}>
        <div style={{padding:"100px 120px 60px", textAlign:"center"}}>
          <div style={{font:"400 11px/1 var(--font-editorial)", color:"var(--epa-gold)",
            letterSpacing:".5em", textTransform:"uppercase", marginBottom:22}}>— Follow the atelier —</div>
          <h2 style={{font:"400 56px/1.05 var(--font-display)", letterSpacing:".02em", margin:"0 0 14px"}}>
            Glimpses, <em style={{color:"var(--epa-champagne)"}}>in passing.</em>
          </h2>
          <a href="https://instagram.com/eliteprivateagency" target="_blank" rel="noreferrer"
            style={{display:"inline-flex", alignItems:"center", gap:14, marginTop:10,
              font:"400 22px/1 var(--font-script)",
              color:"var(--epa-champagne)", textDecoration:"none"}}>
            <i data-lucide="instagram" style={{width:18, height:18,
              color:"var(--epa-gold)", strokeWidth:1.2}}/>
            @eliteprivateagency
          </a>
        </div>

        {/* ⇩ Live feed — see IGFeed component at top of this file. ⇩ */}
        <IGFeed/>

        <a href="https://instagram.com/eliteprivateagency" target="_blank" rel="noreferrer"
          style={{display:"flex", alignItems:"center", justifyContent:"center",
            gap:16, padding:"36px 20px",
            background:"var(--epa-gold)", color:"var(--epa-charcoal)",
            font:"500 13px/1 var(--font-ui)",
            letterSpacing:".36em", textTransform:"uppercase",
            textDecoration:"none", transition:"background .3s"}}
          onMouseEnter={e => e.currentTarget.style.background="var(--epa-champagne)"}
          onMouseLeave={e => e.currentTarget.style.background="var(--epa-gold)"}>
          <i data-lucide="instagram" style={{width:20, height:20, strokeWidth:1.4}}/>
          Follow us on Instagram
          <i data-lucide="arrow-up-right" style={{width:18, height:18, strokeWidth:1.4}}/>
        </a>
      </section>

      <SiteFooter/>

      {/* FOOTER (legacy, hidden) */}
      <footer style={{display:"none", padding:"80px 80px 48px", background:"#060403",
        borderTop:"1px solid rgba(170,135,87,.2)"}}>
        <div style={{display:"flex", justifyContent:"space-between",
          alignItems:"flex-start", gap:40, paddingBottom:48,
          borderBottom:"1px solid rgba(170,135,87,.15)"}}>
          <div>
            <a href="index.html" aria-label="Home · Elite Private Agency"
              style={{display:"inline-block", textDecoration:"none"}}>
              <Emblem size={80}/>
            </a>
            <div style={{font:"500 11px/1 var(--font-ui)", color:"var(--epa-gold)",
              letterSpacing:".36em", textTransform:"uppercase", margin:"20px 0 10px"}}>Elite Private Agency</div>
            <div style={{font:"italic 400 13px/1.4 var(--font-editorial)",
              color:"var(--epa-text-secondary)", maxWidth:300}}>
              Paris · London · Dubai<br/>
              A private atelier, since 2022.
            </div>
          </div>
          <div style={{display:"grid", gridTemplateColumns:"repeat(3,auto)", gap:64,
            font:"500 11px/2.2 var(--font-ui)", letterSpacing:".16em", textTransform:"uppercase"}}>
            <div>
              <div style={{color:"var(--epa-gold)", marginBottom:8}}>Agency</div>
              <div><a href="agency.html"    style={{color:"var(--epa-text-secondary)", textDecoration:"none"}}>About</a></div>
              <div><a href="universes.html" style={{color:"var(--epa-text-secondary)", textDecoration:"none"}}>Universes</a></div>
            </div>
            <div>
              <div style={{color:"var(--epa-gold)", marginBottom:8}}>Access</div>
              <div><a href="membership.html"                    style={{color:"var(--epa-text-secondary)", textDecoration:"none"}}>Membership</a></div>
              <div><a href="membership.html#pay-as-you-go"       style={{color:"var(--epa-text-secondary)", textDecoration:"none"}}>Pay as you go</a></div>
              <div><a href="#concierge"                          style={{color:"var(--epa-text-secondary)", textDecoration:"none"}}>Concierge</a></div>
            </div>
            <div>
              <div style={{color:"var(--epa-gold)", marginBottom:8}}>Contact</div>
              <div style={{color:"var(--epa-text-secondary)"}}>+33 6 42 31 78 69</div>
              <div style={{color:"var(--epa-text-secondary)"}}>info@eliteprivateagency.com</div>
              <div style={{color:"var(--epa-text-secondary)"}}>@eliteprivateagency</div>
            </div>
          </div>
        </div>

        <div style={{display:"flex", alignItems:"center", justifyContent:"center",
          gap:24, padding:"32px 0 24px", borderBottom:"1px solid rgba(170,135,87,.15)"}}>
          <div style={{font:"400 11px/1 var(--font-editorial)", color:"var(--epa-gold)",
            letterSpacing:".4em", textTransform:"uppercase", marginRight:12}}>Follow the atelier</div>
          {[
            {icon:"instagram", url:"https://instagram.com/eliteprivateagency", label:"Instagram"},
            {icon:"linkedin",  url:"https://linkedin.com/company/eliteprivateagency", label:"LinkedIn"},
            {icon:"facebook",  url:"https://facebook.com/eliteprivateagency", label:"Facebook"}
          ].map(s => (
            <a key={s.icon} href={s.url} target="_blank" rel="noreferrer" aria-label={s.label}
              style={{width:40, height:40, borderRadius:"50%",
                border:"1px solid rgba(170,135,87,.3)",
                display:"flex", alignItems:"center", justifyContent:"center",
                color:"var(--epa-champagne)", transition:"all .22s", textDecoration:"none"}}
              onMouseEnter={e=>{
                e.currentTarget.style.background="var(--epa-gold)";
                e.currentTarget.style.borderColor="var(--epa-gold)";
                e.currentTarget.style.color="var(--epa-charcoal)";
              }}
              onMouseLeave={e=>{
                e.currentTarget.style.background="transparent";
                e.currentTarget.style.borderColor="rgba(170,135,87,.3)";
                e.currentTarget.style.color="var(--epa-champagne)";
              }}>
              <i data-lucide={s.icon} style={{width:16, height:16, strokeWidth:1.4}}/>
            </a>
          ))}
        </div>
        <div style={{display:"flex", justifyContent:"space-between", paddingTop:28,
          font:"400 10px/1 var(--font-ui)", color:"var(--epa-text-secondary)",
          letterSpacing:".18em", textTransform:"uppercase"}}>
          <div>© 2026 Elite Private Agency · All rights reserved</div>
          <div style={{display:"flex", gap:28}}>
            <span>Legal</span><span>Privacy</span><span>Cookies</span>
          </div>
        </div>
      </footer>
    </div>
  );
};

Object.assign(window, {Home});
