// Page — Aurum (teaser)
// Focus: what the app will be, phone mock, 3-city launch → global with time, end-of-year release.
// No pricing, no tiers.

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

  return (
    <div style={{background:"#0B0703", color:ink, width:"100%", minHeight:"100%",
      fontFamily:"var(--font-editorial)"}}>
      <SiteNav current="aurum"/>

      {/* HERO — gilt wordmark + phone mock */}
      <section style={{position:"relative", minHeight:"100vh",
        padding:"80px 120px 100px",
        background:"radial-gradient(ellipse at 50% 20%, #2A1C0E 0%, #140D08 55%, #080502 100%)"}}>

        <div style={{textAlign:"center",
          font:"400 10px/1 var(--font-editorial)", color:"var(--epa-gold)",
          letterSpacing:".6em", textTransform:"uppercase",
          marginBottom:60}}>
          — Coming · End of 2026 —
        </div>

        <div style={{display:"grid", gridTemplateColumns:"1fr auto 1fr",
          gap:80, alignItems:"center", maxWidth:1500, margin:"0 auto"}}>

          {/* Left copy */}
          <div>
            <div style={{font:"400 11px/1 var(--font-editorial)", color:"var(--epa-gold)",
              letterSpacing:".5em", textTransform:"uppercase", marginBottom:28}}>— An atelier venture</div>
            <h1 style={{
              font:"400 140px/1 var(--font-display)",
              letterSpacing:".1em", margin:"0 0 18px",
              background:"linear-gradient(180deg, #F4E0B3 0%, #D4AF7D 40%, #8B6530 100%)",
              WebkitBackgroundClip:"text", backgroundClip:"text",
              color:"transparent"
            }}>AURUM</h1>
            <Arabesque w={140}/>
            <div style={{font:"italic 300 22px/1.4 var(--font-editorial)",
              color:"var(--epa-champagne)", margin:"22px 0 22px"}}>
              Only the Gold Standard.
            </div>
            <p style={{font:"400 16px/1.7 var(--font-editorial)",
              color:"var(--epa-text-secondary)", margin:"0 0 36px", maxWidth:460}}>
              The atelier's own address book — made legible. A founder-curated venue intelligence,
              for members of the Private Circle and those they travel with.
            </p>
            <div style={{display:"inline-flex", gap:14, flexWrap:"wrap"}}>
              {["iOS","Android"].map(p => (
                <div key={p} style={{display:"inline-flex", alignItems:"center", gap:10,
                  padding:"12px 20px",
                  border:"1px solid rgba(170,135,87,.35)",
                  font:"500 10px/1 var(--font-ui)", color:"var(--epa-gold)",
                  letterSpacing:".3em", textTransform:"uppercase"}}>
                  <i data-lucide="circle-dot" style={{width:10, height:10, strokeWidth:1.4}}/>
                  {p} — end of 2026
                </div>
              ))}
            </div>
          </div>

          {/* Phone mock centre — INTERACTIVE */}
          <div style={{position:"relative"}}>
            <AurumPhone/>
          </div>

          {/* Right — small details column */}
          <div style={{textAlign:"right"}}>
            <div style={{font:"400 11px/1 var(--font-editorial)", color:"var(--epa-gold)",
              letterSpacing:".5em", textTransform:"uppercase", marginBottom:26}}>— At launch</div>
            {[
              {n:"3",      l:"Launch cities"},
              {n:"4,5★",   l:"Minimum threshold"},
              {n:"End of 2026", l:"Public release"},
              {n:"— 0 —",  l:"Purchasable placements"}
            ].map((f,i) => (
              <div key={f.l} style={{padding:"22px 0",
                borderTop: i===0 ? "1px solid rgba(170,135,87,.25)" : "1px solid rgba(170,135,87,.15)"}}>
                <div style={{font:"300 40px/1 var(--font-display)",
                  color:"var(--epa-champagne)", letterSpacing:"-.01em",
                  marginBottom:8}}>{f.n}</div>
                <div style={{font:"500 10px/1.3 var(--font-ui)", color:"var(--epa-gold)",
                  letterSpacing:".28em", textTransform:"uppercase"}}>{f.l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* WHAT IT IS — editorial manifesto */}
      <section style={{padding:"160px 120px",
        background:"linear-gradient(180deg, #080502 0%, #140D08 100%)",
        borderTop:"1px solid rgba(170,135,87,.18)"}}>
        <div style={{display:"grid", gridTemplateColumns:"1fr 1.1fr", gap:100,
          alignItems:"start", maxWidth:1400, margin:"0 auto"}}>
          <div style={{position:"sticky", top:80}}>
            <div style={{font:"400 11px/1 var(--font-editorial)", color:"var(--epa-gold)",
              letterSpacing:".5em", textTransform:"uppercase", marginBottom:24}}>— Chapitre 01 · The idea</div>
            <h2 style={{font:"400 72px/1.05 var(--font-display)",
              letterSpacing:".02em", margin:"0 0 40px"}}>
              The venue<br/>
              <em style={{color:"var(--epa-champagne)"}}>is the evidence.</em>
            </h2>
            <Arabesque w={140}/>
          </div>
          <div>
            <p style={{font:"italic 300 22px/1.5 var(--font-editorial)",
              color:"var(--epa-champagne)", margin:"0 0 36px"}}>
              When one of our people arrives in a city they do not know,
              finding the right table should be effortless.
            </p>
            <p style={{font:"400 17px/1.75 var(--font-editorial)",
              color:"var(--epa-text-secondary)", margin:"0 0 28px"}}>
              Instead, it is noisy. A thousand listings, anonymous reviews, no sense of
              context nor of the room. The premium traveller does not want more choice —
              they want <em style={{color:"var(--epa-champagne)"}}>better choice</em>,
              curated by people with the same standards as their own.
            </p>
            <p style={{font:"400 17px/1.75 var(--font-editorial)",
              color:"var(--epa-text-secondary)", margin:"0 0 28px"}}>
              Aurum is that filter. A founder-curated directory of the world's finest venues,
              validated editorially, enriched with insider intelligence. Soho House's judgement,
              the Michelin Guide's rigour — built for the pocket.
            </p>
            <p style={{font:"400 17px/1.75 var(--font-editorial)",
              color:"var(--epa-text-secondary)", margin:0}}>
              It is, in the simplest terms, the atelier's own address book —
              and we have chosen to share it.
            </p>
          </div>
        </div>
      </section>

      {/* WHAT THE APP WILL DO — six plates of features */}
      <section style={{padding:"140px 120px", background:"var(--epa-charcoal)",
        borderTop:"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:22}}>— Chapitre 02 · What the app will do</div>
          <h2 style={{font:"400 64px/1.05 var(--font-display)",
            letterSpacing:".02em", margin:"0 0 22px", maxWidth:900, marginInline:"auto"}}>
            An atelier — <em style={{color:"var(--epa-champagne)"}}>in the pocket.</em>
          </h2>
        </div>

        <div style={{display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:28,
          maxWidth:1400, margin:"0 auto"}}>
          {[
            {kind:"compass", t:"Curated discovery",
              b:"Browse the atelier's shortlist, filtered by city, moment, and mood. Restaurants, hotels, bars, private clubs, jewellers, ateliers — the places our editors would send their own."},
            {kind:"star", t:"Gold Standard rating",
              b:"Three tiers — Listed, Validated, Gold Standard. Each visited by our editors, signed by the founders. No venue may purchase its badge, its rating, or its placement."},
            {kind:"book", t:"Insider fiches",
              b:"Every venue comes with the details that matter — best table, signature dish, ideal hour, reservation tip, dress code. Written as if by a friend who knows the room."},
            {kind:"sliders", t:"Advanced filters",
              b:"Noise level, intimacy, dress, budget, service hours, child-friendly, pet-friendly. Find the right room for the evening, in under a minute."},
            {kind:"phone", t:"A concierge channel",
              b:"From any fiche, one line to the atelier. Members of the Private Circle — request a table, a suite, a charter — routed directly to their day and night concierge."},
            {kind:"pin", t:"City guides",
              b:"Curated itineraries for the days you simply want the atelier to plan. Lunch, atelier visit, early dinner, a quiet bar to close — handed over as a single card."}
          ].map(c => (
            <FeatureCard key={c.t} kind={c.kind} title={c.t} body={c.b}/>
          ))}
        </div>
      </section>

      {/* TWO CHANNELS — research vs concierge split */}
      <section style={{padding:"140px 120px",
        background:"var(--epa-charcoal)",
        borderTop:"1px solid rgba(170,135,87,.18)"}}>
        <div style={{maxWidth:1200, margin:"0 auto"}}>
          <div style={{textAlign:"center", marginBottom:60}}>
            <div style={{font:"400 11px/1 var(--font-editorial)", color:"var(--epa-gold)",
              letterSpacing:".5em", textTransform:"uppercase", marginBottom:22}}>— Chapitre 03 · Two channels, one app</div>
            <h2 style={{font:"400 60px/1.05 var(--font-display)",
              letterSpacing:".02em", margin:"0 0 18px"}}>
              How the <em style={{color:"var(--epa-champagne)"}}>app divides.</em>
            </h2>
            <p style={{font:"italic 300 17px/1.5 var(--font-editorial)",
              color:"var(--epa-text-secondary)", margin:"0 auto", maxWidth:560}}>
              The research tool, open to all approved users.
              The concierge channel, reserved to the Private Circle.
            </p>
          </div>

          <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:36}}>
            {[
              {kind:"research", icon:"search", tag:"Open to approved users",
                title:"The research tool",
                body:"The directory, editorial fiches, Gold Standard badges, insider intelligence, filters. Decide where to go — and book through the venue yourself."},
              {kind:"concierge", icon:"phone-call", tag:"Reserved to the Private Circle",
                title:"The concierge channel",
                body:"From any fiche — or a fresh request — a single line to the atelier. Your day or night concierge picks up, books the table, arranges the car, carries the arrangement end to end."}
            ].map((c,i) => (
              <ChannelCard key={c.title} {...c} emphasis={i===1}/>
            ))}
          </div>
        </div>
      </section>

      {/* CITY HORIZON — 3 now → the world */}
      <section style={{padding:"160px 120px",
        background:"radial-gradient(ellipse at 50% 0%, #2A1E14 0%, #1A120B 55%, #0B0703 100%)",
        borderTop:"1px solid rgba(170,135,87,.18)"}}>
        <div style={{textAlign:"center", marginBottom:64}}>
          <div style={{font:"400 11px/1 var(--font-editorial)", color:"var(--epa-gold)",
            letterSpacing:".5em", textTransform:"uppercase", marginBottom:22}}>— Chapitre 04 · The horizon</div>
          <h2 style={{font:"400 64px/1.05 var(--font-display)",
            letterSpacing:".02em", margin:"0 0 22px", maxWidth:900, marginInline:"auto"}}>
            Three cities, <em style={{color:"var(--epa-champagne)"}}>then the world.</em>
          </h2>
          <p style={{font:"italic 300 17px/1.5 var(--font-editorial)",
            color:"var(--epa-text-secondary)", margin:"0 auto", maxWidth:640}}>
            Aurum opens in Paris, London and Dubai at launch — and in time will cover
            every major city worldwide, one editorial notebook at a time. No faster than our editors
            can keep up.
          </p>
        </div>

        {/* City progression — current & horizon */}
        <div style={{maxWidth:1300, margin:"0 auto"}}>
          <div style={{display:"grid", gridTemplateColumns:"1fr 1fr",
            gap:60, marginBottom:60}}>
            {/* AT LAUNCH */}
            <div>
              <div style={{font:"500 10px/1 var(--font-ui)", color:"var(--epa-gold)",
                letterSpacing:".4em", textTransform:"uppercase", marginBottom:26}}>— At launch · End of 2026</div>
              {["Paris","London","Dubai"].map((city,i) => (
                <div key={city} style={{
                  display:"flex", alignItems:"baseline", justifyContent:"space-between",
                  padding:"24px 0",
                  borderTop: i===0 ? "1px solid var(--epa-gold-dark)" : "1px solid rgba(170,135,87,.18)"
                }}>
                  <div style={{font:"300 44px/1 var(--font-display)",
                    letterSpacing:".02em"}}>{city}</div>
                  <div style={{font:"italic 300 13px/1 var(--font-editorial)",
                    color:"var(--epa-champagne)"}}>— ready</div>
                </div>
              ))}
            </div>

            {/* NEXT */}
            <div>
              <div style={{font:"500 10px/1 var(--font-ui)", color:"var(--epa-gold)",
                letterSpacing:".4em", textTransform:"uppercase", marginBottom:26}}>— Next seasons · 2027+</div>
              {[
                "New York","Monaco","Miami","Geneva","Milan","Hong Kong","Tokyo","Los Angeles","Singapore"
              ].map((city,i) => (
                <div key={city} style={{
                  display:"flex", alignItems:"baseline", justifyContent:"space-between",
                  padding:"14px 0",
                  borderTop: i===0 ? "1px solid rgba(170,135,87,.3)" : "1px solid rgba(170,135,87,.12)"
                }}>
                  <div style={{font:"300 22px/1 var(--font-display)",
                    letterSpacing:".02em", color:"var(--epa-text-secondary)"}}>{city}</div>
                  <div style={{font:"italic 300 11px/1 var(--font-editorial)",
                    color:"var(--epa-text-secondary)"}}>— in preparation</div>
                </div>
              ))}
              <div style={{padding:"18px 0 0",
                font:"italic 300 13px/1.5 var(--font-editorial)",
                color:"var(--epa-gold)"}}>
                — and every major city, in time.
              </div>
            </div>
          </div>

          <div style={{textAlign:"center",
            paddingTop:36, borderTop:"1px solid rgba(170,135,87,.2)",
            font:"italic 300 14px/1.5 var(--font-editorial)",
            color:"var(--epa-text-secondary)"}}>
            One city at a time — no editors before their notebooks are complete.
          </div>
        </div>
      </section>

      {/* CLOSING — apply */}
      <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:22}}>— The door</div>
        <h2 style={{font:"400 72px/1.05 var(--font-display)",
          letterSpacing:".02em", margin:"0 0 26px", maxWidth:820, marginInline:"auto"}}>
          To enter Aurum first,<br/><em style={{color:"var(--epa-champagne)"}}>write to the atelier.</em>
        </h2>
        <p style={{font:"italic 300 17px/1.55 var(--font-editorial)",
          color:"var(--epa-text-secondary)", margin:"0 auto 40px", maxWidth:560}}>
          Members of the Private Circle receive the app at release —
          complimentary, without condition. Others may write, and a founder will reply within twenty-four hours.
        </p>
        <div style={{display:"inline-flex", gap:18}}>
          <HairlineBtn size="lg" href="request-access.html" filled>Apply to the Circle</HairlineBtn>
          <HairlineBtn size="lg" href="membership.html">About Membership</HairlineBtn>
        </div>
      </section>

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