// AurumPhone — interactive phone mock using the Aurum UI Kit vocabulary.
// Three screens: Discover (greeting + city pills + curated PlaceCards) →
// Place Detail (hero photo, stats, tags, actions) → Private Request form.
// Dark charcoal ground, gold accents, rounded cards, Inter+Editorial type.

const AurumPhone = () => {
  const [screen, setScreen]   = React.useState("discover");
  const [tab, setTab]         = React.useState("home");
  const [city, setCity]       = React.useState("Paris");
  const [saved, setSaved]     = React.useState({});
  const [opened, setOpened]   = React.useState(null);
  const [sent, setSent]       = React.useState(false);

  React.useEffect(() => { if (window.lucide) lucide.createIcons(); });

  const toggleSave = (id) => setSaved(s => ({...s, [id]: !s[id]}));

  const places = {
    Paris: [
      {id:"crillon", city:"Paris · 1st",  name:"Hôtel de Crillon",
        tagline:"Bernstein Suite · Concorde terrace.", tone:"gold",  price:"€ 2 235",
        img:"assets/aurum/crillon-suite.avif"},
      {id:"bristol", city:"Paris · 8th",   name:"Le Bristol",
        tagline:"Panoramic Suite · Sacré-Cœur view.",  tone:"ember", price:"€ 2 115",
        img:"assets/aurum/bristol-garden.jpg"},
      {id:"ritz",    city:"Paris · 1st",  name:"Ritz Paris",
        tagline:"Coco Chanel Suite · place Vendôme.",    tone:"warm",  price:"€ 2 211",
        img:"assets/aurum/ritz-pool.jpg"}
    ],
    Dubai: [
      {id:"bulgari", city:"Dubai · Jumeira Bay", name:"Bulgari Resort",
        tagline:"Marine Villa · private beach.", tone:"gold",  price:"€ 9 200"},
      {id:"armani",  city:"Dubai · Downtown",    name:"Armani Hotel",
        tagline:"Dubai Suite · Burj Khalifa.",   tone:"ember", price:"€ 7 600"}
    ],
    London: [
      {id:"claridges", city:"London · Mayfair", name:"Claridge’s",
        tagline:"Royal Suite · art déco.",  tone:"warm", price:"£ 8 400"},
      {id:"connaught", city:"London · Mayfair", name:"The Connaught",
        tagline:"Apartment Suite · Carlos Place.", tone:"gold", price:"£ 7 100"}
    ]
  };
  const cities = ["Paris","Dubai","London","New York","Ibiza"];

  const toneMap = {
    gold: "radial-gradient(circle at 70% 30%,rgba(242,222,164,.22),transparent 40%),linear-gradient(135deg,#5a3f22,#1a120b 70%)",
    ember:"radial-gradient(circle at 30% 80%,rgba(192,163,111,.18),transparent 45%),linear-gradient(160deg,#3a2a1b,#0f0a06 75%)",
    warm: "radial-gradient(circle at 50% 40%,rgba(170,135,87,.28),transparent 50%),linear-gradient(180deg,#4a3520,#1a120b 80%)"
  };

  const currentPlaces = places[city] || places.Paris;
  const place = opened ? [...places.Paris, ...places.Dubai, ...places.London].find(p => p.id===opened) : null;

  // Mini PlaceCard — kit vocabulary at phone scale
  const PhoneCard = ({p}) => (
    <div onClick={()=>{ setOpened(p.id); setScreen("detail"); }}
      style={{background:"linear-gradient(180deg,#2A1E14,#241A11)",
        border:"1px solid var(--epa-border-subtle)", borderRadius:14,
        overflow:"hidden", marginBottom:10, cursor:"pointer",
        boxShadow:"0 4px 12px rgba(0,0,0,.4)",
        transition:"transform .2s, box-shadow .2s"}}
      onMouseEnter={e=>{e.currentTarget.style.transform="translateY(-2px)";
        e.currentTarget.style.boxShadow="0 10px 22px rgba(0,0,0,.55),0 0 0 1px rgba(192,163,111,.18)";}}
      onMouseLeave={e=>{e.currentTarget.style.transform="translateY(0)";
        e.currentTarget.style.boxShadow="0 4px 12px rgba(0,0,0,.4)";}}>
      <div style={{position:"relative", aspectRatio:"16/9", background:toneMap[p.tone], overflow:"hidden"}}>
        {p.img && <img src={p.img} alt={p.name} style={{
          position:"absolute", inset:0, width:"100%", height:"100%",
          objectFit:"cover"}}/>}
        <div style={{position:"absolute", top:8, left:8,
          background:"rgba(15,10,6,.7)", backdropFilter:"blur(6px)",
          border:".5px solid rgba(170,135,87,.4)",
          color:"var(--epa-champagne)", font:"500 8px/1 var(--font-ui)",
          padding:"4px 7px", borderRadius:999,
          letterSpacing:".14em", textTransform:"uppercase"}}>Curated</div>
        <div onClick={e=>{e.stopPropagation(); toggleSave(p.id);}} style={{
          position:"absolute", top:8, right:8, width:24, height:24,
          background:"rgba(15,10,6,.7)", backdropFilter:"blur(6px)",
          borderRadius:999,
          display:"flex", alignItems:"center", justifyContent:"center"}}>
          <i data-lucide="bookmark" style={{width:11, height:11,
            color: saved[p.id] ? "var(--epa-gold)" : "#F5EFE0",
            fill:   saved[p.id] ? "var(--epa-gold)" : "none",
            strokeWidth:1.5}}/>
        </div>
      </div>
      <div style={{padding:"10px 12px 12px"}}>
        <div style={{font:"500 8px/1 var(--font-ui)", color:"var(--epa-gold)",
          letterSpacing:".18em", textTransform:"uppercase",
          marginBottom:5}}>{p.city}</div>
        <div style={{font:"500 14px/1.2 var(--font-display)",
          letterSpacing:".01em", color:"var(--epa-paper-ivory)",
          marginBottom:3}}>{p.name}</div>
        <div style={{font:"400 10.5px/1.4 var(--font-ui)",
          color:"var(--epa-text-secondary)"}}>{p.tagline}</div>
        {p.price && (
          <div style={{marginTop:8, paddingTop:8,
            borderTop:"1px solid var(--epa-border-subtle)",
            display:"flex", alignItems:"center", justifyContent:"space-between"}}>
            <div style={{font:"500 11.5px/1 var(--font-ui)",
              color:"var(--epa-gold-light)"}}>{p.price}</div>
            <div style={{font:"500 7.5px/1 var(--font-ui)", color:"var(--epa-text-secondary)",
              letterSpacing:".12em", textTransform:"uppercase"}}>per night</div>
          </div>
        )}
      </div>
    </div>
  );

  return (
    <div data-aurum-phone style={{position:"relative", width:340, height:700,
      borderRadius:"48px",
      background:"linear-gradient(180deg,#1B130C,#0A0604)",
      border:"1px solid rgba(170,135,87,.4)",
      padding:14,
      boxShadow:"0 80px 140px -40px rgba(0,0,0,.9), 0 1px 0 rgba(212,175,125,.2) inset",
      fontFamily:"var(--font-ui)"}}>

      {/* Interactive badge */}
      <div style={{position:"absolute", top:-14, right:-14, zIndex:30,
        padding:"7px 12px",
        background:"var(--epa-gold)", color:"var(--epa-charcoal)",
        font:"500 9px/1 var(--font-ui)", letterSpacing:".32em",
        textTransform:"uppercase",
        boxShadow:"0 8px 20px rgba(0,0,0,.6)"}}>Interactive</div>

      <div style={{width:"100%", height:"100%", borderRadius:"34px",
        background:"var(--epa-charcoal-deep)", overflow:"hidden",
        position:"relative", display:"flex", flexDirection:"column"}}>

        {/* notch */}
        <div style={{position:"absolute", top:14, left:"50%",
          transform:"translateX(-50%)", width:90, height:22,
          background:"#000", borderRadius:"12px", zIndex:20}}/>

        {/* Status bar */}
        <div style={{padding:"14px 22px 0", display:"flex",
          justifyContent:"space-between",
          font:"500 9px/1 var(--font-ui)", color:"var(--epa-text-secondary)",
          letterSpacing:".16em"}}>
          <span>19:12</span>
          <span style={{display:"flex", gap:5, alignItems:"center"}}>
            <i data-lucide="signal" style={{width:10, height:10}}/>
            <i data-lucide="wifi"   style={{width:10, height:10}}/>
            <i data-lucide="battery-full" style={{width:13, height:10}}/>
          </span>
        </div>

        {/* Topbar — Aurum wordmark + avatar */}
        <div style={{padding:"14px 18px 10px",
          display:"flex", alignItems:"center", justifyContent:"space-between",
          borderBottom:"1px solid var(--epa-border-subtle)",
          background:"var(--epa-charcoal)"}}>
          <div style={{font:"500 11px/1 var(--font-display)",
            color:"var(--epa-gold)", letterSpacing:".32em",
            textTransform:"uppercase"}}>Aurum</div>
          <div style={{display:"flex", gap:10, alignItems:"center"}}>
            <i data-lucide="search" style={{width:13, height:13,
              color:"#F5EFE0", opacity:.8, strokeWidth:1.4}}/>
            <i data-lucide="bell" style={{width:13, height:13,
              color:"#F5EFE0", opacity:.8, strokeWidth:1.4}}/>
            <div style={{width:24, height:24, borderRadius:999,
              background:"linear-gradient(135deg,#866741,#C0A36F)",
              border:"1px solid #AA8757",
              display:"flex", alignItems:"center", justifyContent:"center",
              font:"500 9px/1 var(--font-ui)", color:"var(--epa-charcoal)"}}>JA</div>
          </div>
        </div>

        {/* Scroll body */}
        <div style={{flex:1, overflowY:"auto", background:"var(--epa-charcoal-deep)"}}>

          {/* DISCOVER */}
          {screen==="discover" && (
            <>
              {/* Hero greeting */}
              <div style={{padding:"20px 18px 16px",
                borderBottom:"1px solid var(--epa-border-subtle)"}}>
                <div style={{font:"500 8px/1 var(--font-ui)", color:"var(--epa-gold)",
                  letterSpacing:".28em", textTransform:"uppercase",
                  marginBottom:10}}>
                  Tuesday · 14 April · 19:12
                </div>
                <h1 style={{font:"400 28px/1.05 var(--font-display)",
                  letterSpacing:"-.01em", margin:"0 0 6px",
                  color:"var(--epa-paper-ivory)"}}>Good evening, James.</h1>
                <p style={{font:"italic 400 12px/1.4 var(--font-editorial)",
                  color:"var(--epa-text-secondary)", margin:0}}>
                  Twelve curated addresses await you. Paris is quiet tonight.
                </p>
              </div>

              {/* Search */}
              <div style={{padding:"12px 18px 0"}}>
                <div style={{display:"flex", alignItems:"center", gap:8,
                  background:"var(--epa-charcoal-raised)",
                  border:"1px solid var(--epa-border-subtle)",
                  borderRadius:4, padding:"9px 12px"}}>
                  <i data-lucide="search" style={{width:12, height:12,
                    color:"var(--epa-text-secondary)", strokeWidth:1.4}}/>
                  <div style={{flex:1, font:"400 11px/1 var(--font-ui)",
                    color:"var(--epa-text-secondary)"}}>
                    Search an address…
                  </div>
                </div>
              </div>

              {/* City pills */}
              <div style={{padding:"12px 18px 4px",
                display:"flex", gap:6, overflowX:"auto", WebkitOverflowScrolling:"touch"}}>
                {cities.map(c => {
                  const active = c===city;
                  const locked = c!=="Paris";
                  return (
                    <button key={c} onClick={()=>{ if(!locked) setCity(c); }}
                      disabled={locked}
                      style={{
                      flexShrink:0,
                      background: active ? "rgba(192,163,111,.14)" : "transparent",
                      color: active ? "var(--epa-champagne)"
                            : locked ? "rgba(245,239,224,.28)"
                            : "var(--epa-text-secondary)",
                      border:`1px solid ${active ? "var(--epa-gold-dark)"
                            : locked ? "rgba(170,135,87,.18)"
                            : "var(--epa-border-subtle)"}`,
                      borderRadius:999, padding:"6px 12px",
                      font:"500 10px/1 var(--font-ui)",
                      letterSpacing:".08em", textTransform:"uppercase",
                      cursor: locked ? "not-allowed" : "pointer",
                      opacity: locked ? .55 : 1}}>{c}</button>
                  );
                })}
              </div>

              {/* Private Request banner */}
              <div style={{margin:"14px 18px 4px",
                background:"linear-gradient(135deg,#2a1e14,#1a120b)",
                border:"1px solid var(--epa-gold-dark)", borderRadius:14,
                padding:"14px 14px", position:"relative", overflow:"hidden"}}>
                <div style={{position:"absolute", inset:0,
                  background:"radial-gradient(200px 80px at 80% 50%,rgba(192,163,111,.14),transparent)",
                  pointerEvents:"none"}}/>
                <div style={{position:"relative"}}>
                  <div style={{font:"500 8px/1 var(--font-ui)", color:"var(--epa-gold)",
                    letterSpacing:".3em", textTransform:"uppercase", marginBottom:6}}>
                    Private Request
                  </div>
                  <div style={{font:"400 17px/1.15 var(--font-display)",
                    letterSpacing:".01em", margin:"0 0 4px"}}>
                    Bespoke orchestration
                  </div>
                  <div style={{font:"italic 400 10.5px/1.4 var(--font-editorial)",
                    color:"var(--epa-text-secondary)", marginBottom:10}}>
                    A concierge replies in under 2 hours.
                  </div>
                  <div onClick={()=>{ setScreen("request"); setTab("requests"); }}
                    style={{display:"inline-flex", alignItems:"center", gap:6,
                    cursor:"pointer",
                    background:"var(--epa-gold)", color:"var(--epa-charcoal)",
                    padding:"7px 12px", borderRadius:6,
                    font:"500 10px/1 var(--font-ui)", letterSpacing:".02em"}}>
                    <i data-lucide="send" style={{width:11, height:11, strokeWidth:1.6}}/>
                    New request
                  </div>
                </div>
              </div>

              {/* Curated section */}
              <section style={{padding:"20px 18px 22px"}}>
                <div style={{display:"flex", alignItems:"baseline",
                  justifyContent:"space-between", marginBottom:12}}>
                  <h2 style={{font:"500 14px/1 var(--font-display)",
                    letterSpacing:".01em", margin:0}}>Tonight in {city}</h2>
                  <div style={{font:"500 8.5px/1 var(--font-ui)",
                    color:"var(--epa-gold)", letterSpacing:".16em",
                    textTransform:"uppercase"}}>See all —</div>
                </div>
                {currentPlaces.map(p => <PhoneCard key={p.id} p={p}/>)}
              </section>
            </>
          )}

          {/* DETAIL */}
          {screen==="detail" && place && (
            <>
              <div style={{padding:"14px 18px 0"}}>
                <button onClick={()=>setScreen("discover")} style={{
                  background:"transparent", border:"none", color:"var(--epa-gold)",
                  font:"500 9.5px/1 var(--font-ui)", letterSpacing:".14em",
                  textTransform:"uppercase", cursor:"pointer",
                  display:"inline-flex", alignItems:"center", gap:5, padding:0}}>
                  <i data-lucide="arrow-left" style={{width:11, height:11, strokeWidth:1.6}}/>
                  Back
                </button>
              </div>
              {/* hero photo */}
              <div style={{margin:"12px 18px 0",
                aspectRatio:"16/10", borderRadius:14,
                background: toneMap[place.tone],
                border:"1px solid var(--epa-border-subtle)",
                position:"relative", overflow:"hidden"}}>
                {place.img && <img src={place.img} alt={place.name} style={{
                  position:"absolute", inset:0, width:"100%", height:"100%",
                  objectFit:"cover"}}/>}
                <div style={{position:"absolute", bottom:10, left:12,
                  font:"italic 400 10px/1.3 var(--font-editorial)",
                  color:"var(--epa-champagne)"}}>
                  Panoramic city view
                </div>
                <div onClick={()=>toggleSave(place.id)} style={{
                  position:"absolute", top:10, right:10,
                  width:28, height:28, borderRadius:999,
                  background:"rgba(15,10,6,.7)", backdropFilter:"blur(6px)",
                  display:"flex", alignItems:"center", justifyContent:"center",
                  cursor:"pointer"}}>
                  <i data-lucide="bookmark" style={{width:12, height:12,
                    color: saved[place.id] ? "var(--epa-gold)" : "#F5EFE0",
                    fill:   saved[place.id] ? "var(--epa-gold)" : "none",
                    strokeWidth:1.5}}/>
                </div>
              </div>

              {/* stats row */}
              <div style={{display:"grid", gridTemplateColumns:"repeat(3,1fr)",
                gap:6, padding:"10px 18px 0"}}>
                {[
                  {k:"From",      v:place.price, c:"var(--epa-paper-ivory)"},
                  {k:"Check-in",  v:"15:00",      c:"var(--epa-paper-ivory)"},
                  {k:"Available", v:"Tonight",    c:"var(--epa-success)"}
                ].map(s => (
                  <div key={s.k} style={{background:"var(--epa-charcoal-raised)",
                    border:"1px solid var(--epa-border-subtle)",
                    borderRadius:10, padding:"8px 10px"}}>
                    <div style={{font:"500 7.5px/1 var(--font-ui)",
                      color:"var(--epa-text-secondary)",
                      letterSpacing:".14em", textTransform:"uppercase",
                      marginBottom:5}}>{s.k}</div>
                    <div style={{font:"500 13px/1 var(--font-display)",
                      color:s.c}}>{s.v}</div>
                  </div>
                ))}
              </div>

              {/* title + prose */}
              <div style={{padding:"14px 18px 0"}}>
                <div style={{font:"500 8.5px/1 var(--font-ui)", color:"var(--epa-gold)",
                  letterSpacing:".28em", textTransform:"uppercase",
                  marginBottom:8}}>{place.city}</div>
                <h2 style={{font:"400 26px/1.05 var(--font-display)",
                  margin:"0 0 8px", letterSpacing:".01em"}}>{place.name}</h2>
                <p style={{font:"italic 400 12px/1.5 var(--font-editorial)",
                  color:"var(--epa-text-secondary)", margin:"0 0 12px"}}>
                  {place.tagline} Top-floor suite with open views,
                  dedicated butler and early arrival when available.
                </p>
                <p style={{font:"400 10.5px/1.6 var(--font-editorial)",
                  color:"var(--epa-paper-ivory)", margin:"0 0 12px"}}>
                  Best rates guaranteed. Upgrade, breakfast included,
                  and private airport transfer.
                </p>

                {/* Tags */}
                <div style={{display:"flex", flexWrap:"wrap", gap:5, marginBottom:14}}>
                  {["Sisley Spa","Michelin ★★","Butler","Terrace","Transfer"].map(t => (
                    <span key={t} style={{display:"inline-flex", alignItems:"center",
                      background:"var(--epa-charcoal-raised)",
                      border:"1px solid var(--epa-border-subtle)",
                      color:"var(--epa-text-secondary)",
                      borderRadius:999, padding:"3px 8px",
                      font:"500 8px/1 var(--font-ui)",
                      letterSpacing:".1em", textTransform:"uppercase"}}>{t}</span>
                  ))}
                </div>
              </div>

              {/* Actions — sticky-ish bottom of scroll */}
              <div style={{padding:"4px 18px 22px",
                display:"flex", gap:8}}>
                <button style={{flex:1,
                  background:"var(--epa-gold)", color:"var(--epa-charcoal)",
                  border:"1px solid var(--epa-gold)", borderRadius:8,
                  padding:"11px 10px",
                  font:"500 11px/1 var(--font-ui)", letterSpacing:".02em",
                  cursor:"pointer",
                  display:"inline-flex", alignItems:"center", justifyContent:"center", gap:6}}>
                  <i data-lucide="calendar" style={{width:12, height:12, strokeWidth:1.6}}/>
                  Book
                </button>
                <button onClick={()=>toggleSave(place.id)} style={{flex:"0 0 auto",
                  background:"transparent", color:"var(--epa-paper-ivory)",
                  border:"1px solid var(--epa-gold-dark)", borderRadius:8,
                  padding:"11px 14px",
                  font:"500 11px/1 var(--font-ui)",
                  cursor:"pointer",
                  display:"inline-flex", alignItems:"center", gap:6}}>
                  <i data-lucide="bookmark" style={{width:12, height:12, strokeWidth:1.6,
                    fill: saved[place.id] ? "var(--epa-gold)" : "none",
                    color: saved[place.id] ? "var(--epa-gold)" : "currentColor"}}/>
                </button>
              </div>
            </>
          )}

          {/* PRIVATE REQUEST */}
          {screen==="request" && (
            <div style={{padding:"18px 18px 24px"}}>
              <button onClick={()=>{ setScreen("discover"); setTab("home"); setSent(false); }}
                style={{background:"transparent", border:"none", color:"var(--epa-gold)",
                font:"500 9.5px/1 var(--font-ui)", letterSpacing:".14em",
                textTransform:"uppercase", cursor:"pointer",
                display:"inline-flex", alignItems:"center", gap:5, padding:0,
                marginBottom:14}}>
                <i data-lucide="arrow-left" style={{width:11, height:11, strokeWidth:1.6}}/>
                Back
              </button>

              {!sent ? (
                <>
                  <div style={{font:"500 8.5px/1 var(--font-ui)", color:"var(--epa-gold)",
                    letterSpacing:".3em", textTransform:"uppercase",
                    marginBottom:10}}>— Private Request —</div>
                  <h2 style={{font:"400 26px/1.1 var(--font-display)",
                    letterSpacing:".01em", margin:"0 0 6px"}}>
                    Compose your request.
                  </h2>
                  <p style={{font:"italic 400 11.5px/1.4 var(--font-editorial)",
                    color:"var(--epa-text-secondary)", margin:"0 0 18px"}}>
                    A concierge replies in under 2 hours, 24/7.
                  </p>

                  {[
                    {l:"City",      v:"Paris",                  i:"map-pin"},
                    {l:"Dates",     v:"14 — 18 April 2026",      i:"calendar"},
                    {l:"Travellers", v:"2 adults",              i:"users"}
                  ].map(f => (
                    <label key={f.l} style={{display:"flex", flexDirection:"column",
                      gap:5, marginBottom:10}}>
                      <span style={{font:"500 9.5px/1 var(--font-ui)",
                        color:"var(--epa-paper-ivory)",
                        letterSpacing:".05em"}}>{f.l}</span>
                      <div style={{display:"flex", alignItems:"center",
                        background:"var(--epa-charcoal-raised)",
                        border:"1px solid var(--epa-border-subtle)",
                        borderRadius:4, padding:"8px 10px", gap:8}}>
                        <i data-lucide={f.i} style={{width:12, height:12,
                          color:"var(--epa-text-secondary)", strokeWidth:1.4}}/>
                        <div style={{flex:1, font:"400 12px/1 var(--font-ui)",
                          color:"var(--epa-paper-ivory)"}}>{f.v}</div>
                      </div>
                    </label>
                  ))}

                  <label style={{display:"flex", flexDirection:"column",
                    gap:5, marginBottom:14}}>
                    <span style={{font:"500 9.5px/1 var(--font-ui)",
                      color:"var(--epa-paper-ivory)", letterSpacing:".05em"}}>
                      Your request
                    </span>
                    <div style={{background:"var(--epa-charcoal-raised)",
                      border:"1px solid var(--epa-gold)",
                      boxShadow:"0 0 0 3px rgba(192,163,111,.18)",
                      borderRadius:4, padding:"9px 10px",
                      font:"400 11px/1.5 var(--font-ui)",
                      color:"var(--epa-paper-ivory)", minHeight:82}}>
                      Suite with view over the Concorde, late-afternoon arrival,
                      a table at Taillevent for two, white bouquet in the room.
                    </div>
                  </label>

                  <button onClick={()=>setSent(true)} style={{
                    width:"100%",
                    background:"var(--epa-gold)", color:"var(--epa-charcoal)",
                    border:"1px solid var(--epa-gold)", borderRadius:8,
                    padding:"12px 14px",
                    font:"500 12px/1 var(--font-ui)", letterSpacing:".02em",
                    cursor:"pointer",
                    display:"inline-flex", alignItems:"center", justifyContent:"center", gap:8}}>
                    <i data-lucide="send" style={{width:13, height:13, strokeWidth:1.6}}/>
                    Send request
                  </button>
                </>
              ) : (
                <div style={{textAlign:"center", padding:"40px 10px"}}>
                  <div style={{width:56, height:56,
                    border:"1px solid var(--epa-gold)",
                    borderRadius:"50%", margin:"0 auto 18px",
                    display:"flex", alignItems:"center", justifyContent:"center",
                    color:"var(--epa-gold)"}}>
                    <i data-lucide="check" style={{width:20, height:20}}/>
                  </div>
                  <div style={{font:"400 22px/1.2 var(--font-display)",
                    letterSpacing:".01em", marginBottom:10}}>Sent.</div>
                  <div style={{font:"italic 400 12px/1.5 var(--font-editorial)",
                    color:"var(--epa-text-secondary)", maxWidth:240, marginInline:"auto"}}>
                    Elvire replies within the hour — that is our promise.
                  </div>
                </div>
              )}
            </div>
          )}
        </div>

        {/* Tab bar */}
        <div style={{padding:"8px 8px 14px",
          borderTop:"1px solid var(--epa-border-subtle)",
          background:"var(--epa-charcoal)",
          display:"grid", gridTemplateColumns:"repeat(5,1fr)", gap:2}}>
          {[
            {id:"home",       i:"compass",      l:"Discover", enabled:true},
            {id:"stays",      i:"bed-double",   l:"Stays",    enabled:false},
            {id:"dining",     i:"utensils",     l:"Dining",   enabled:false},
            {id:"saved",      i:"bookmark",     l:"Saved",    enabled:false},
            {id:"requests",   i:"sparkles",     l:"Private",  enabled:true}
          ].map(t => {
            const active = tab===t.id;
            const locked = !t.enabled;
            return (
              <div key={t.id} onClick={()=>{
                if (locked) return;
                setTab(t.id);
                if (t.id==="requests") setScreen("request");
                else if (t.id==="home") { setScreen("discover"); setSent(false); }
              }}
                style={{textAlign:"center",
                  cursor: locked ? "not-allowed" : "pointer",
                  opacity: locked ? .4 : 1,
                  padding:"3px 0"}}>
                <i data-lucide={t.i} style={{width:13, height:13, strokeWidth:1.4,
                  color: active ? "var(--epa-gold)" : "var(--epa-text-secondary)"}}/>
                <div style={{font:"500 6.5px/1 var(--font-ui)",
                  color: active ? "var(--epa-gold)" : "var(--epa-text-secondary)",
                  letterSpacing:".18em", textTransform:"uppercase", marginTop:5}}>{t.l}</div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, {AurumPhone});