// Cream-unified "Selected Set" — V1 picks + cream-recolored Rewards V2, Profile V3, Finn V3 (text-first), plus new screens.
// Single shared cream palette: bg #f4ede1, ink #0b1f3a, accent #6fb6ff.

const CREAM = '#f4ede1';
const INK = '#0b1f3a';
const ACCENT = '#6fb6ff';

// Drinks repeated locally so file is self-contained
const DRINKS = [
  {name:'Baklava Latte', img:'Baklava-Latte-Studio', price:'6.25', cal:280, tag:'★'},
  {name:'Tiramisu Latte', img:'tiramisu-latte', price:'6.25', cal:310, tag:'NEW'},
  {name:"S'mores Latte", img:'S_mores-Latte', price:'6.50', cal:340},
  {name:'Banana Bread Matcha', img:'BAnana-Bread-matcha', price:'6.50', cal:295},
  {name:'Strawberry Matcha', img:'strawberry-matcha', price:'6.50', cal:240},
  {name:'Hazel Crunch Latte', img:'HAzel-Crunch-Latte', price:'6.25', cal:285},
];
const drinkUrl = (i) => `https://dolphincafedc.com/wp-content/uploads/${i}.png`;
const ImgCream = ({src}) => (
  <div style={{width:'100%',height:'100%',background:INK,display:'flex',alignItems:'center',justifyContent:'center',position:'relative',overflow:'hidden'}}>
    <img src={src} alt="" style={{width:'100%',height:'100%',objectFit:'cover',position:'absolute',inset:0}} onError={(e)=>{e.target.style.display='none'}}/>
  </div>
);

// Cream tabbar (liquid glass over cream)
const CreamTab = ({active}) => {
  const tabs = [{id:'home',l:'Menu'},{id:'rewards',l:'Rewards'},{id:'finn',l:'Finn',sp:true},{id:'profile',l:'You'}];
  return (
    <div style={{position:'absolute',bottom:18,left:18,right:18,height:62,borderRadius:32,backdropFilter:'blur(24px) saturate(180%)',WebkitBackdropFilter:'blur(24px) saturate(180%)',background:'rgba(255,255,255,0.55)',border:'1px solid rgba(255,255,255,0.7)',boxShadow:'0 8px 24px rgba(11,31,58,0.12)',display:'flex',alignItems:'center',justifyContent:'space-around',padding:'0 14px'}}>
      {tabs.map(t=>{
        const a = t.id===active;
        if(t.sp) return (
          <div key={t.id} style={{display:'flex',flexDirection:'column',alignItems:'center'}}>
            <div style={{width:42,height:42,borderRadius:'50%',background:a?INK:ACCENT,color:'#fff',display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--wf-script)',fontSize:22,transform:'translateY(-12px)',boxShadow:'0 4px 12px rgba(111,182,255,0.5)'}}>F</div>
            <div style={{fontFamily:'var(--wf-mono)',fontSize:9,color:INK,letterSpacing:'0.1em',marginTop:-10}}>{t.l}</div>
          </div>
        );
        return (
          <div key={t.id} style={{display:'flex',flexDirection:'column',alignItems:'center',gap:4,opacity:a?1:0.55}}>
            <div style={{width:18,height:18,borderRadius:5,border:`1.5px solid ${INK}`,background:a?INK:'transparent'}}></div>
            <div style={{fontFamily:'var(--wf-mono)',fontSize:9,fontWeight:a?700:400,letterSpacing:'0.08em',color:INK}}>{t.l}</div>
          </div>
        );
      })}
    </div>
  );
};

// Splash V1 — cream-version (was navy; recoloring per "all consistent one color")
const SelSplash = () => (
  <div style={{position:'absolute',inset:0,background:CREAM,color:INK,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center'}}>
    <div style={{width:120,height:120,borderRadius:'50%',background:'#fff',display:'flex',alignItems:'center',justifyContent:'center',marginBottom:24,overflow:'hidden',boxShadow:'0 4px 16px rgba(11,31,58,0.1)'}}>
      <img src="https://dolphincafedc.com/wp-content/uploads/cropped-cropped-dolphin-logo-low-150x150-1.webp" style={{width:'90%',height:'90%',objectFit:'contain'}} onError={(e)=>{e.target.style.display='none';e.target.parentElement.innerHTML='<div style="font-family:var(--wf-script);font-size:60px;color:#0b1f3a;">D</div>'}}/>
    </div>
    <div style={{fontFamily:'var(--wf-display)',fontSize:32,letterSpacing:'0.05em',fontWeight:600}}>Dolphin Cafe</div>
    <div style={{fontFamily:'var(--wf-mono)',fontSize:11,opacity:0.6,marginTop:8,letterSpacing:'0.2em'}}>WASHINGTON · D.C.</div>
    <div style={{position:'absolute',bottom:60,fontFamily:'var(--wf-mono)',fontSize:10,opacity:0.45,letterSpacing:'0.15em'}}>EST. ISTANBUL · D.C.</div>
  </div>
);

// Onboarding V1 — already cream
const SelOnb1 = () => (
  <div style={{position:'absolute',inset:0,background:CREAM,display:'flex',flexDirection:'column'}}>
    <div style={{flex:1,padding:'70px 28px 0',display:'flex',flexDirection:'column'}}>
      <div style={{fontFamily:'var(--wf-mono)',fontSize:10,letterSpacing:'0.2em',opacity:0.5}}>01 / 03</div>
      <div style={{flex:1,marginTop:24,borderRadius:18,background:INK,overflow:'hidden'}}>
        <ImgCream src="https://dolphincafedc.com/wp-content/uploads/dolphincafe-signatures.png"/>
      </div>
      <div style={{padding:'24px 0 28px'}}>
        <div style={{fontFamily:'var(--wf-script)',fontSize:38,lineHeight:1,color:INK}}>welcome to</div>
        <div style={{fontFamily:'var(--wf-display)',fontSize:30,fontWeight:600,marginTop:4,color:INK,lineHeight:1}}>Dolphin Cafe.</div>
        <div style={{fontFamily:'var(--wf-display)',fontSize:14,marginTop:10,lineHeight:1.4,color:INK,opacity:0.75}}>A cozy escape steps from the White House. Specialty coffee, signature drinks, and a feeling that makes you stay.</div>
      </div>
    </div>
    <SelOnFooter step={0}/>
  </div>
);
const SelOnb2 = () => (
  <div style={{position:'absolute',inset:0,background:CREAM,display:'flex',flexDirection:'column'}}>
    <div style={{flex:1,padding:'70px 28px 0',display:'flex',flexDirection:'column'}}>
      <div style={{fontFamily:'var(--wf-mono)',fontSize:10,letterSpacing:'0.2em',opacity:0.5}}>02 / 03</div>
      <div style={{flex:1,marginTop:24,display:'grid',gridTemplateColumns:'1fr 1fr',gridTemplateRows:'1fr 1fr',gap:8}}>
        {['Baklava-Latte-Studio','tiramisu-latte','strawberry-matcha','S_mores-Latte'].map(n=>(
          <div key={n} style={{borderRadius:12,background:INK,overflow:'hidden'}}><ImgCream src={drinkUrl(n)}/></div>
        ))}
      </div>
      <div style={{padding:'24px 0 28px'}}>
        <div style={{fontFamily:'var(--wf-script)',fontSize:32,lineHeight:1,color:INK}}>signature</div>
        <div style={{fontFamily:'var(--wf-display)',fontSize:30,fontWeight:600,color:INK,lineHeight:1,marginTop:2}}>tastes await.</div>
        <div style={{fontFamily:'var(--wf-display)',fontSize:14,marginTop:10,lineHeight:1.4,color:INK,opacity:0.75}}>Baklava Latte. Tiramisu. Cereal Matcha. One tap, skip the line.</div>
      </div>
    </div>
    <SelOnFooter step={1}/>
  </div>
);
const SelOnb3 = () => (
  <div style={{position:'absolute',inset:0,background:CREAM,display:'flex',flexDirection:'column'}}>
    <div style={{flex:1,padding:'70px 28px 0',display:'flex',flexDirection:'column'}}>
      <div style={{fontFamily:'var(--wf-mono)',fontSize:10,letterSpacing:'0.2em',opacity:0.5}}>03 / 03</div>
      <div style={{flex:1,marginTop:24,borderRadius:18,background:INK,display:'flex',alignItems:'center',justifyContent:'center',position:'relative',overflow:'hidden'}}>
        <div style={{textAlign:'center',color:'#fff'}}>
          <div style={{fontSize:64,fontFamily:'var(--wf-script)',color:ACCENT}}>Finn</div>
          <div style={{fontFamily:'var(--wf-mono)',fontSize:10,letterSpacing:'0.25em',opacity:0.6,marginTop:4}}>YOUR CAFE COMPANION</div>
          <div style={{marginTop:24,padding:'10px 14px',borderRadius:14,background:'#fff',color:INK,display:'inline-block',maxWidth:200,fontFamily:'var(--wf-display)',fontSize:13,textAlign:'left'}}>
            <span style={{fontFamily:'var(--wf-mono)',fontSize:9,opacity:0.5}}>FINN</span><br/>
            "Rainy day in DC? Try a Hazel Crunch — warmest hug on the menu 🐬"
          </div>
        </div>
      </div>
      <div style={{padding:'24px 0 28px'}}>
        <div style={{fontFamily:'var(--wf-script)',fontSize:32,lineHeight:1,color:INK}}>meet finn,</div>
        <div style={{fontFamily:'var(--wf-display)',fontSize:30,fontWeight:600,color:INK,lineHeight:1,marginTop:2}}>your AI barista.</div>
        <div style={{fontFamily:'var(--wf-display)',fontSize:14,marginTop:10,lineHeight:1.4,color:INK,opacity:0.75}}>Picks for your mood, counts calories, whispers offers. Lives in the dolphin tab.</div>
      </div>
    </div>
    <SelOnFooter step={2} last/>
  </div>
);
const SelOnFooter = ({step,last}) => (
  <div style={{padding:'0 28px 36px',display:'flex',alignItems:'center',justifyContent:'space-between',color:INK}}>
    <div style={{display:'flex',gap:6}}>
      {[0,1,2].map(i=>(<div key={i} style={{width:i===step?22:6,height:6,borderRadius:3,background:i===step?INK:'rgba(11,31,58,0.2)',transition:'all 0.3s'}}/>))}
    </div>
    <button style={{border:'none',background:INK,color:'#fff',padding:'12px 22px',borderRadius:30,fontFamily:'var(--wf-display)',fontSize:14,fontWeight:600,whiteSpace:'nowrap'}}>{last?'Get Started':'Next →'}</button>
  </div>
);

// Home V1 — already cream (with the line-height fix)
const SelHome = () => (
  <div style={{position:'absolute',inset:0,background:CREAM,overflow:'hidden'}}>
    <div style={{padding:'56px 22px 0'}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
        <div>
          <div style={{fontFamily:'var(--wf-mono)',fontSize:10,letterSpacing:'0.2em',opacity:0.5}}>WED · MAY 6</div>
          <div style={{fontFamily:'var(--wf-script)',fontSize:32,color:INK,marginTop:2,lineHeight:1.05}}>good morning,</div>
          <div style={{fontFamily:'var(--wf-display)',fontSize:24,fontWeight:600,color:INK,marginTop:2,lineHeight:1}}>Alex.</div>
        </div>
        <div style={{width:40,height:40,borderRadius:'50%',background:INK,color:'#fff',display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--wf-display)',fontSize:14,fontWeight:600}}>A</div>
      </div>
      <div style={{marginTop:14,display:'inline-flex',alignItems:'center',gap:8,padding:'8px 12px 8px 10px',background:'#fff',borderRadius:20,boxShadow:'0 2px 8px rgba(11,31,58,0.06)'}}>
        <div style={{width:8,height:8,borderRadius:'50%',background:ACCENT,boxShadow:'0 0 0 3px rgba(111,182,255,0.25)'}}></div>
        <div style={{fontFamily:'var(--wf-mono)',fontSize:9,letterSpacing:'0.15em',opacity:0.5,color:INK}}>PICKUP</div>
        <div style={{fontFamily:'var(--wf-display)',fontSize:13,fontWeight:600,color:INK}}>Washington, DC</div>
        <div style={{fontFamily:'var(--wf-display)',fontSize:11,color:INK,opacity:0.6}}>▾</div>
      </div>
      <div style={{marginTop:12,padding:'14px 16px',background:INK,color:'#fff',borderRadius:18,display:'flex',alignItems:'center',gap:12}}>
        <div style={{width:36,height:36,borderRadius:'50%',background:ACCENT,display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--wf-script)',fontSize:20,color:INK}}>F</div>
        <div style={{flex:1,fontFamily:'var(--wf-display)',fontSize:13,lineHeight:1.3}}>
          <span style={{fontFamily:'var(--wf-mono)',fontSize:9,opacity:0.6,letterSpacing:'0.15em'}}>FINN ·</span> Cloudy & 58°. Hazel Crunch is calling your name today ☁️
        </div>
      </div>
    </div>
    <div style={{padding:'18px 22px 6px',display:'flex',gap:8,overflowX:'auto'}}>
      {['Signatures','Classics','Matcha','Tea','Food'].map((c,i)=>(
        <div key={c} style={{padding:'7px 14px',borderRadius:20,background:i===0?INK:'transparent',color:i===0?'#fff':INK,border:i===0?'none':'1px solid rgba(11,31,58,0.2)',fontFamily:'var(--wf-display)',fontSize:13,fontWeight:i===0?600:400,whiteSpace:'nowrap'}}>{c}</div>
      ))}
    </div>
    <div style={{padding:'8px 22px 100px',overflowY:'auto',height:'calc(100% - 330px)'}}>
      <div style={{fontFamily:'var(--wf-mono)',fontSize:10,letterSpacing:'0.2em',opacity:0.5,margin:'12px 0 10px'}}>BARISTA'S PICKS</div>
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
        {DRINKS.slice(0,4).map(d=>(
          <div key={d.name} style={{background:'#fff',borderRadius:16,overflow:'hidden',boxShadow:'0 2px 8px rgba(11,31,58,0.06)'}}>
            <div style={{height:120,position:'relative'}}>
              <ImgCream src={drinkUrl(d.img)}/>
              {d.tag && <div style={{position:'absolute',top:8,right:8,padding:'3px 7px',background:'#fff',borderRadius:10,fontFamily:'var(--wf-mono)',fontSize:9,fontWeight:700,color:INK}}>{d.tag}</div>}
            </div>
            <div style={{padding:'10px 12px'}}>
              <div style={{fontFamily:'var(--wf-display)',fontSize:13,fontWeight:600,color:INK,lineHeight:1.2}}>{d.name}</div>
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginTop:6}}>
                <div style={{fontFamily:'var(--wf-mono)',fontSize:11,color:INK}}>${d.price}</div>
                <div style={{fontFamily:'var(--wf-mono)',fontSize:9,opacity:0.5}}>{d.cal} cal</div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
    <CreamTab active="home"/>
  </div>
);

// Rewards V2 (wallet stack) — recolored to cream
const CreamCard = ({tier='blue', stars=2840, name='ALEX MORGAN', style={}}) => {
  const tierMeta = {
    green:{c:'#3a6f4a', a:'#a8d5a8', l:'GREEN'},
    brown:{c:'#5a3a28', a:'#d6a370', l:'BROWN'},
    blue: {c:INK,        a:ACCENT,   l:'BLUE'},
  }[tier];
  return (
    <div style={{position:'relative',width:'100%',aspectRatio:'1.585/1',borderRadius:18,overflow:'hidden',background:tierMeta.c,color:'#fff',boxShadow:'0 12px 28px rgba(11,31,58,0.25), inset 0 1px 0 rgba(255,255,255,0.15)',...style}}>
      <div style={{position:'absolute',inset:0,background:'linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.08) 100%)'}}/>
      <div style={{position:'absolute',inset:0,background:`radial-gradient(circle at 80% 20%, ${tierMeta.a}33 0%, transparent 60%)`}}/>
      <svg viewBox="0 0 200 120" style={{position:'absolute',right:-10,bottom:-10,width:'55%',opacity:0.18}}>
        <path d="M20 80 Q 50 30, 100 50 Q 150 70, 180 40 L 175 55 Q 145 85, 100 65 Q 55 50, 30 90 Z" fill={tierMeta.a}/>
      </svg>
      <div style={{position:'absolute',top:14,left:18,right:18,display:'flex',justifyContent:'space-between',alignItems:'center'}}>
        <div style={{fontFamily:'var(--wf-display)',fontSize:13,fontWeight:600,letterSpacing:'0.02em'}}>Dolphin</div>
        <div style={{fontFamily:'var(--wf-mono)',fontSize:8,letterSpacing:'0.25em',opacity:0.7}}>{tierMeta.l}</div>
      </div>
      <div style={{position:'absolute',bottom:14,left:18,right:18}}>
        <div style={{fontFamily:'var(--wf-mono)',fontSize:9,letterSpacing:'0.18em',opacity:0.6}}>MEMBER</div>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',marginTop:2}}>
          <div style={{fontFamily:'var(--wf-display)',fontSize:14,fontWeight:600,letterSpacing:'0.05em'}}>{name}</div>
          <div style={{textAlign:'right'}}>
            <div style={{fontFamily:'var(--wf-mono)',fontSize:8,letterSpacing:'0.18em',opacity:0.6}}>★ STARS</div>
            <div style={{fontFamily:'var(--wf-display)',fontSize:14,fontWeight:600}}>{stars.toLocaleString()}</div>
          </div>
        </div>
      </div>
    </div>
  );
};

const SelRewards = () => (
  <div style={{position:'absolute',inset:0,background:CREAM,overflow:'hidden',color:INK}}>
    <div style={{padding:'56px 22px 0'}}>
      <div style={{fontFamily:'var(--wf-mono)',fontSize:10,letterSpacing:'0.2em',opacity:0.5}}>WALLET</div>
      <div style={{fontFamily:'var(--wf-display)',fontSize:30,fontWeight:700,marginTop:2,letterSpacing:'-0.02em'}}>2,840 <span style={{color:ACCENT}}>★</span></div>
      <div style={{fontFamily:'var(--wf-mono)',fontSize:10,opacity:0.5,marginTop:2}}>+45 THIS WEEK</div>
    </div>
    <div style={{padding:'24px 22px 0',position:'relative',height:300}}>
      <div style={{position:'absolute',top:24,left:38,right:38,transform:'rotate(-3deg)'}}>
        <CreamCard tier="green" stars={420} name="LAST YEAR"/>
      </div>
      <div style={{position:'absolute',top:50,left:30,right:30,transform:'rotate(2deg)'}}>
        <CreamCard tier="brown" stars={1840} name="THIS YEAR"/>
      </div>
      <div style={{position:'absolute',top:80,left:22,right:22}}>
        <CreamCard tier="blue" stars={2840}/>
      </div>
    </div>
    <div style={{padding:'8px 22px 0'}}>
      <div style={{fontFamily:'var(--wf-mono)',fontSize:10,letterSpacing:'0.2em',opacity:0.5,marginBottom:10}}>RECENT</div>
      <div style={{display:'flex',justifyContent:'space-between',padding:'8px 0',borderBottom:'1px solid rgba(11,31,58,0.1)'}}>
        <div>
          <div style={{fontFamily:'var(--wf-display)',fontSize:13}}>Baklava Latte</div>
          <div style={{fontFamily:'var(--wf-mono)',fontSize:10,opacity:0.5}}>YESTERDAY · $6.25</div>
        </div>
        <div style={{fontFamily:'var(--wf-display)',fontSize:13,color:INK,fontWeight:600}}>+31 ★</div>
      </div>
      <div style={{display:'flex',justifyContent:'space-between',padding:'8px 0'}}>
        <div>
          <div style={{fontFamily:'var(--wf-display)',fontSize:13}}>Cookies & Cream Matcha</div>
          <div style={{fontFamily:'var(--wf-mono)',fontSize:10,opacity:0.5}}>MAY 3 · $6.50</div>
        </div>
        <div style={{fontFamily:'var(--wf-display)',fontSize:13,color:INK,fontWeight:600}}>+33 ★</div>
      </div>
    </div>
    <CreamTab active="rewards"/>
  </div>
);

// Profile V3 — already cream-friendly, keep as-is style with cream bg confirmed
const SelProfile = () => (
  <div style={{position:'absolute',inset:0,background:CREAM,overflow:'hidden'}}>
    <div style={{padding:'56px 22px 8px',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
      <div style={{fontFamily:'var(--wf-script)',fontSize:32,color:INK,lineHeight:1}}>hey alex</div>
      <div style={{fontFamily:'var(--wf-mono)',fontSize:10,opacity:0.5,letterSpacing:'0.1em'}}>⚙ SETTINGS</div>
    </div>
    <div style={{padding:'18px 22px 0'}}>
      <CreamCard tier="blue" stars={2840} name="ALEX MORGAN"/>
    </div>
    <div style={{padding:'14px 22px 0',display:'grid',gridTemplateColumns:'2fr 1fr',gap:10}}>
      <div style={{padding:'12px',borderRadius:14,background:INK,color:'#fff'}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
          <div style={{fontFamily:'var(--wf-mono)',fontSize:9,color:ACCENT,letterSpacing:'0.2em'}}>FREE DRINK IN</div>
          <div style={{fontFamily:'var(--wf-display)',fontSize:14,fontWeight:600}}>11×</div>
        </div>
        <div style={{height:5,background:'rgba(255,255,255,0.15)',borderRadius:3,marginTop:8,position:'relative'}}>
          <div style={{position:'absolute',inset:0,width:'100%',background:ACCENT,borderRadius:3}}/>
        </div>
        <div style={{fontFamily:'var(--wf-mono)',fontSize:9,opacity:0.5,marginTop:6}}>2,840 / 250 ★</div>
      </div>
      <div style={{padding:'12px',borderRadius:14,background:ACCENT,color:INK,textAlign:'center'}}>
        <div style={{fontFamily:'var(--wf-display)',fontSize:22,fontWeight:700,lineHeight:1}}>5×</div>
        <div style={{fontFamily:'var(--wf-mono)',fontSize:9,letterSpacing:'0.15em',opacity:0.7,marginTop:4}}>★ PER $1</div>
      </div>
    </div>
    <div style={{padding:'14px 22px 0'}}>
      <div style={{fontFamily:'var(--wf-mono)',fontSize:10,letterSpacing:'0.2em',opacity:0.5,marginBottom:10,color:INK}}>YEAR-LONG STATUS</div>
      <div style={{display:'flex',gap:8}}>
        {[
          {l:'GREEN',c:'#3a6f4a',r:'0–999'},
          {l:'BROWN',c:'#5a3a28',r:'1k–2.5k'},
          {l:'BLUE',c:INK,r:'2.5k+',current:true},
        ].map(t=>(
          <div key={t.l} style={{flex:1,padding:'10px 8px',borderRadius:12,background:t.c,color:'#fff',textAlign:'center',border:t.current?`2px solid ${ACCENT}`:'2px solid transparent',position:'relative'}}>
            <div style={{fontFamily:'var(--wf-mono)',fontSize:9,letterSpacing:'0.15em',fontWeight:700}}>{t.l}</div>
            <div style={{fontFamily:'var(--wf-mono)',fontSize:9,opacity:0.6,marginTop:4}}>{t.r} ★</div>
            {t.current && <div style={{position:'absolute',top:-6,right:-6,padding:'2px 6px',background:ACCENT,color:INK,borderRadius:8,fontFamily:'var(--wf-mono)',fontSize:8,letterSpacing:'0.1em',fontWeight:700}}>YOU</div>}
          </div>
        ))}
      </div>
    </div>
    <div style={{padding:'12px 22px 0'}}>
      <div style={{fontFamily:'var(--wf-mono)',fontSize:10,letterSpacing:'0.2em',opacity:0.5,marginBottom:8,color:INK}}>FROM THE CAFE</div>
      <div style={{padding:'10px 14px',borderRadius:12,background:'#fff',border:'1px dashed rgba(11,31,58,0.27)',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
        <div>
          <div style={{fontFamily:'var(--wf-display)',fontSize:13,fontWeight:600,color:INK}}>2× Star Friday</div>
          <div style={{fontFamily:'var(--wf-mono)',fontSize:9,opacity:0.5,marginTop:2}}>EVERY FRI THIS MAY</div>
        </div>
        <div style={{fontSize:18}}>✨</div>
      </div>
    </div>
    <CreamTab active="profile"/>
  </div>
);

// Finn — message-first, original navy theme
const SelFinn = () => (
  <div style={{position:'absolute',inset:0,background:INK,overflow:'hidden',display:'flex',flexDirection:'column',color:'#fff'}}>
    <div style={{padding:'56px 22px 12px',display:'flex',alignItems:'center',gap:12,borderBottom:'1px solid rgba(255,255,255,0.1)'}}>
      <div style={{width:42,height:42,borderRadius:'50%',background:ACCENT,display:'flex',alignItems:'center',justifyContent:'center',color:INK,fontFamily:'var(--wf-script)',fontSize:24}}>F</div>
      <div style={{flex:1}}>
        <div style={{fontFamily:'var(--wf-display)',fontSize:16,fontWeight:600}}>Finn</div>
        <div style={{fontFamily:'var(--wf-mono)',fontSize:9,letterSpacing:'0.15em',opacity:0.55}}>YOUR CAFE COMPANION · ONLINE</div>
      </div>
    </div>
    <div style={{flex:1,padding:'14px 18px',overflowY:'auto',display:'flex',flexDirection:'column',gap:10}}>
      <div style={{alignSelf:'flex-start',maxWidth:'80%',padding:'10px 14px',background:'#142a4a',borderRadius:'14px 14px 14px 4px',fontFamily:'var(--wf-display)',fontSize:13,lineHeight:1.4}}>
        Morning, Alex 🐬 Cloudy & 58° in DC. Want something cozy?
      </div>
      <div style={{alignSelf:'flex-end',maxWidth:'78%',padding:'10px 14px',background:ACCENT,color:INK,borderRadius:'14px 14px 4px 14px',fontFamily:'var(--wf-display)',fontSize:13,lineHeight:1.4,fontWeight:500}}>
        Something under 250 cal?
      </div>
      <div style={{alignSelf:'flex-start',maxWidth:'82%',padding:'10px 14px',background:'#142a4a',borderRadius:'14px 14px 14px 4px',fontFamily:'var(--wf-display)',fontSize:13,lineHeight:1.4}}>
        Strawberry Matcha — 240 cal, oat milk swap saves another 30. Want it?
        <div style={{display:'flex',gap:6,marginTop:8}}>
          <button style={{padding:'5px 10px',background:ACCENT,color:INK,border:'none',borderRadius:10,fontFamily:'var(--wf-mono)',fontSize:9,fontWeight:700,letterSpacing:'0.1em'}}>ADD $6.50</button>
          <button style={{padding:'5px 10px',background:'transparent',color:'#fff',border:'1px solid rgba(255,255,255,0.3)',borderRadius:10,fontFamily:'var(--wf-mono)',fontSize:9,fontWeight:700,letterSpacing:'0.1em'}}>OPTIONS</button>
        </div>
      </div>
      <div style={{alignSelf:'flex-start',display:'flex',gap:6,flexWrap:'wrap'}}>
        {['Tell me a story','Today\'s offer','Healthier swap'].map(s=>(
          <div key={s} style={{padding:'6px 10px',background:'transparent',border:'1px solid rgba(255,255,255,0.25)',borderRadius:14,fontFamily:'var(--wf-mono)',fontSize:10,color:'#fff'}}>{s}</div>
        ))}
      </div>
    </div>
    <div style={{padding:'10px 16px 100px',display:'flex',gap:8,alignItems:'center'}}>
      <div style={{flex:1,padding:'12px 14px',background:'#142a4a',borderRadius:24,fontFamily:'var(--wf-display)',fontSize:13,color:'rgba(255,255,255,0.5)'}}>Ask Finn anything cafe…</div>
      <div style={{width:42,height:42,borderRadius:'50%',background:ACCENT,color:INK,display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--wf-display)',fontSize:18}}>↑</div>
    </div>
    {/* dark variant tabbar */}
    <div style={{position:'absolute',bottom:18,left:18,right:18,height:62,borderRadius:32,backdropFilter:'blur(24px) saturate(180%)',WebkitBackdropFilter:'blur(24px) saturate(180%)',background:'rgba(20,30,50,0.55)',border:'1px solid rgba(255,255,255,0.12)',boxShadow:'0 8px 24px rgba(11,31,58,0.18)',display:'flex',alignItems:'center',justifyContent:'space-around',padding:'0 14px'}}>
      {[{l:'Menu'},{l:'Rewards'},{l:'Finn',sp:true,a:true},{l:'You'}].map((t,i)=>(
        t.sp ? (
          <div key={i} style={{display:'flex',flexDirection:'column',alignItems:'center'}}>
            <div style={{width:42,height:42,borderRadius:'50%',background:INK,color:'#fff',display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--wf-script)',fontSize:22,transform:'translateY(-12px)',boxShadow:'0 4px 12px rgba(111,182,255,0.5)'}}>F</div>
            <div style={{fontFamily:'var(--wf-mono)',fontSize:9,color:'#fff',letterSpacing:'0.1em',marginTop:-10,fontWeight:700}}>{t.l}</div>
          </div>
        ) : (
          <div key={i} style={{display:'flex',flexDirection:'column',alignItems:'center',gap:4,opacity:0.55}}>
            <div style={{width:18,height:18,borderRadius:5,border:'1.5px solid #fff'}}></div>
            <div style={{fontFamily:'var(--wf-mono)',fontSize:9,letterSpacing:'0.08em',color:'#fff'}}>{t.l}</div>
          </div>
        )
      ))}
    </div>
  </div>
);

// ────── NEW SCREENS ──────

// Product Detail — drink customizer
const SelProduct = () => (
  <div style={{position:'absolute',inset:0,background:CREAM,overflow:'hidden'}}>
    <div style={{height:280,background:INK,position:'relative'}}>
      <ImgCream src={drinkUrl('Baklava-Latte-Studio')}/>
      <div style={{position:'absolute',top:50,left:18,width:36,height:36,borderRadius:'50%',background:'rgba(255,255,255,0.8)',display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--wf-display)',fontSize:18,color:INK}}>‹</div>
      <div style={{position:'absolute',top:50,right:18,width:36,height:36,borderRadius:'50%',background:'rgba(255,255,255,0.8)',display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--wf-display)',fontSize:14,color:INK}}>♡</div>
    </div>
    <div style={{padding:'18px 22px 0'}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',gap:12}}>
        <div>
          <div style={{fontFamily:'var(--wf-mono)',fontSize:10,letterSpacing:'0.2em',opacity:0.5}}>★ SIGNATURE</div>
          <div style={{fontFamily:'var(--wf-display)',fontSize:24,fontWeight:700,color:INK,marginTop:2,lineHeight:1.05}}>Baklava Latte</div>
          <div style={{fontFamily:'var(--wf-display)',fontSize:13,color:INK,opacity:0.7,marginTop:6,lineHeight:1.4}}>Espresso, pistachio, honey, creamy milk — inspired by the Turkish dessert.</div>
        </div>
        <div style={{textAlign:'right'}}>
          <div style={{fontFamily:'var(--wf-display)',fontSize:22,fontWeight:700,color:INK}}>$6.25</div>
          <div style={{fontFamily:'var(--wf-mono)',fontSize:10,opacity:0.5,marginTop:2}}>280 CAL</div>
        </div>
      </div>
    </div>
    <div style={{padding:'18px 22px 0'}}>
      <div style={{fontFamily:'var(--wf-mono)',fontSize:10,letterSpacing:'0.2em',opacity:0.5,marginBottom:10}}>SIZE</div>
      <div style={{display:'flex',gap:8}}>
        {[{s:'12oz',p:'$5.95'},{s:'16oz',p:'$6.25',sel:true},{s:'20oz',p:'$6.85'}].map(x=>(
          <div key={x.s} style={{flex:1,padding:'10px 0',borderRadius:12,border:x.sel?`2px solid ${INK}`:'1.5px solid rgba(11,31,58,0.2)',background:x.sel?'#fff':'transparent',textAlign:'center'}}>
            <div style={{fontFamily:'var(--wf-display)',fontSize:13,fontWeight:600,color:INK}}>{x.s}</div>
            <div style={{fontFamily:'var(--wf-mono)',fontSize:10,opacity:0.6,marginTop:2}}>{x.p}</div>
          </div>
        ))}
      </div>
    </div>
    <div style={{padding:'18px 22px 0'}}>
      <div style={{fontFamily:'var(--wf-mono)',fontSize:10,letterSpacing:'0.2em',opacity:0.5,marginBottom:10}}>MILK</div>
      <div style={{display:'flex',gap:6,flexWrap:'wrap'}}>
        {['Whole','Oat +$0.75','Almond +$0.75','Skim'].map((m,i)=>(
          <div key={m} style={{padding:'7px 12px',borderRadius:18,background:i===1?INK:'#fff',color:i===1?'#fff':INK,fontFamily:'var(--wf-display)',fontSize:12,fontWeight:i===1?600:400,border:i===1?'none':'1px solid rgba(11,31,58,0.15)'}}>{m}</div>
        ))}
      </div>
    </div>
    <div style={{position:'absolute',bottom:18,left:18,right:18,display:'flex',alignItems:'center',gap:10}}>
      <div style={{display:'flex',alignItems:'center',gap:10,padding:'7px 10px',background:'#fff',borderRadius:24,boxShadow:'0 4px 12px rgba(11,31,58,0.08)'}}>
        <div style={{width:22,height:22,borderRadius:'50%',border:`1.5px solid ${INK}`,display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--wf-display)',fontSize:13,color:INK}}>−</div>
        <div style={{fontFamily:'var(--wf-display)',fontSize:13,fontWeight:600,color:INK,minWidth:12,textAlign:'center'}}>1</div>
        <div style={{width:22,height:22,borderRadius:'50%',background:INK,color:'#fff',display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--wf-display)',fontSize:13}}>+</div>
      </div>
      <div style={{flex:1,padding:'12px 0',background:INK,color:'#fff',borderRadius:24,textAlign:'center',fontFamily:'var(--wf-display)',fontSize:13,fontWeight:600,whiteSpace:'nowrap'}}>Add to bag · $7.00</div>
    </div>
  </div>
);

// Cart / Checkout
const SelCart = () => (
  <div style={{position:'absolute',inset:0,background:CREAM,overflow:'hidden'}}>
    <div style={{padding:'56px 22px 8px',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
      <div>
        <div style={{fontFamily:'var(--wf-mono)',fontSize:10,letterSpacing:'0.2em',opacity:0.5}}>YOUR ORDER · 3 ITEMS</div>
        <div style={{fontFamily:'var(--wf-script)',fontSize:34,color:INK,marginTop:2,lineHeight:1}}>checkout.</div>
      </div>
    </div>
    <div style={{position:'absolute',top:150,left:0,right:0,bottom:86,overflowY:'auto'}}>
    <div style={{padding:'0 22px'}}>
      {[{n:'Baklava Latte',d:'16oz · Oat',p:'7.00',i:'Baklava-Latte-Studio'},{n:'Strawberry Matcha',d:'12oz',p:'6.20',i:'strawberry-matcha'},{n:"S'mores Latte",d:'16oz · Whole',p:'6.50',i:'S_mores-Latte'}].map(d=>(
        <div key={d.n} style={{display:'flex',gap:12,padding:'10px 0',borderBottom:'1px solid rgba(11,31,58,0.08)'}}>
          <div style={{width:54,height:54,borderRadius:12,overflow:'hidden',background:INK,flexShrink:0}}>
            <ImgCream src={drinkUrl(d.i)}/>
          </div>
          <div style={{flex:1}}>
            <div style={{fontFamily:'var(--wf-display)',fontSize:13,fontWeight:600,color:INK}}>{d.n}</div>
            <div style={{fontFamily:'var(--wf-mono)',fontSize:10,opacity:0.5,marginTop:2}}>{d.d}</div>
          </div>
          <div style={{fontFamily:'var(--wf-display)',fontSize:13,fontWeight:600,color:INK}}>${d.p}</div>
        </div>
      ))}
    </div>
    {/* Finn nudge */}
    <div style={{padding:'14px 22px 0'}}>
      <div style={{padding:'10px 14px',background:INK,color:'#fff',borderRadius:14,display:'flex',alignItems:'center',gap:10}}>
        <div style={{width:28,height:28,borderRadius:'50%',background:ACCENT,color:INK,display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--wf-script)',fontSize:16,flexShrink:0}}>F</div>
        <div style={{fontFamily:'var(--wf-display)',fontSize:12,lineHeight:1.3,flex:1}}>Add a baklava ($3.50) to hit free pickup. <span style={{color:ACCENT,fontFamily:'var(--wf-mono)',fontSize:10,letterSpacing:'0.05em'}}>YES →</span></div>
      </div>
    </div>
    {/* Pickup */}
    <div style={{padding:'14px 22px 0'}}>
      <div style={{padding:'12px 14px',background:'#fff',borderRadius:14}}>
        <div style={{fontFamily:'var(--wf-mono)',fontSize:10,letterSpacing:'0.2em',opacity:0.5}}>PICKUP</div>
        <div style={{fontFamily:'var(--wf-display)',fontSize:14,fontWeight:600,color:INK,marginTop:4}}>1510 H St NW · 0.2mi</div>
        <div style={{fontFamily:'var(--wf-mono)',fontSize:10,opacity:0.5,marginTop:2}}>READY IN ~6 MIN</div>
      </div>
    </div>
    {/* Totals */}
    <div style={{padding:'14px 22px 14px',fontFamily:'var(--wf-display)',fontSize:13,color:INK}}>
      <div style={{display:'flex',justifyContent:'space-between',padding:'4px 0'}}><span style={{opacity:0.7}}>Subtotal</span><span>$19.70</span></div>
      <div style={{display:'flex',justifyContent:'space-between',padding:'4px 0'}}><span style={{opacity:0.7}}>Tax</span><span>$1.18</span></div>
      <div style={{display:'flex',justifyContent:'space-between',padding:'4px 0',color:ACCENT,fontWeight:600}}><span>★ Stars earned</span><span>+99</span></div>
      <div style={{height:1,background:'rgba(11,31,58,0.15)',margin:'8px 0'}}/>
      <div style={{display:'flex',justifyContent:'space-between',fontSize:16,fontWeight:700}}><span>Total</span><span>$20.88</span></div>
    </div>
    </div>
    <div style={{position:'absolute',bottom:18,left:22,right:22,padding:'14px',background:INK,color:'#fff',borderRadius:24,textAlign:'center',fontFamily:'var(--wf-display)',fontSize:14,fontWeight:600,display:'flex',alignItems:'center',justifyContent:'center',gap:10}}>
      <span>Pay with Apple Pay</span><span style={{opacity:0.6}}>·</span><span style={{fontFamily:'var(--wf-mono)',fontSize:11,letterSpacing:'0.1em'}}>$20.88</span>
    </div>
  </div>
);

// Order Tracking — pickup status
const SelOrder = () => (
  <div style={{position:'absolute',inset:0,background:CREAM,overflow:'hidden'}}>
    <div style={{padding:'56px 22px 0'}}>
      <div style={{fontFamily:'var(--wf-mono)',fontSize:10,letterSpacing:'0.2em',opacity:0.5}}>ORDER #DC-7421</div>
      <div style={{fontFamily:'var(--wf-script)',fontSize:34,color:INK,marginTop:2,lineHeight:1}}>almost ready.</div>
    </div>
    {/* Big timer */}
    <div style={{padding:'24px 22px 0',textAlign:'center'}}>
      <div style={{position:'relative',width:160,height:160,margin:'0 auto'}}>
        <svg viewBox="0 0 100 100" style={{width:'100%',height:'100%',transform:'rotate(-90deg)'}}>
          <circle cx="50" cy="50" r="44" fill="none" stroke="rgba(11,31,58,0.1)" strokeWidth="6"/>
          <circle cx="50" cy="50" r="44" fill="none" stroke={INK} strokeWidth="6" strokeDasharray="276" strokeDashoffset="80" strokeLinecap="round"/>
        </svg>
        <div style={{position:'absolute',inset:0,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center'}}>
          <div style={{fontFamily:'var(--wf-display)',fontSize:36,fontWeight:700,color:INK,lineHeight:1}}>4</div>
          <div style={{fontFamily:'var(--wf-mono)',fontSize:10,letterSpacing:'0.2em',opacity:0.5,marginTop:2}}>MIN LEFT</div>
        </div>
      </div>
    </div>
    {/* Steps */}
    <div style={{padding:'24px 22px 0'}}>
      {[
        {l:'Order placed',t:'9:42 AM',done:true},
        {l:'Brewing now',t:'9:43 AM',done:true,active:true},
        {l:'Ready for pickup',t:'~9:48 AM',done:false},
        {l:'Picked up',t:'',done:false},
      ].map((s,i)=>(
        <div key={s.l} style={{display:'flex',alignItems:'center',gap:14,padding:'10px 0'}}>
          <div style={{width:14,height:14,borderRadius:'50%',background:s.done?INK:'rgba(11,31,58,0.15)',position:'relative'}}>
            {s.active && <div style={{position:'absolute',inset:-4,borderRadius:'50%',border:`2px solid ${ACCENT}`,animation:'wfPulse 1.6s infinite'}}/>}
          </div>
          <div style={{flex:1}}>
            <div style={{fontFamily:'var(--wf-display)',fontSize:13,fontWeight:s.active?600:400,color:INK,opacity:s.done||s.active?1:0.45}}>{s.l}</div>
          </div>
          <div style={{fontFamily:'var(--wf-mono)',fontSize:10,opacity:0.5}}>{s.t}</div>
        </div>
      ))}
    </div>
    {/* Pickup info */}
    <div style={{padding:'18px 22px 0'}}>
      <div style={{padding:'12px 14px',background:'#fff',borderRadius:14,display:'flex',justifyContent:'space-between',alignItems:'center'}}>
        <div>
          <div style={{fontFamily:'var(--wf-mono)',fontSize:10,letterSpacing:'0.2em',opacity:0.5}}>PICKUP AT</div>
          <div style={{fontFamily:'var(--wf-display)',fontSize:13,fontWeight:600,color:INK,marginTop:2}}>1510 H St NW</div>
        </div>
        <div style={{padding:'8px 14px',background:INK,color:'#fff',borderRadius:18,fontFamily:'var(--wf-display)',fontSize:12,fontWeight:600}}>Directions</div>
      </div>
    </div>
    {/* Finn waiting tip */}
    <div style={{padding:'14px 22px 0'}}>
      <div style={{padding:'10px 14px',borderRadius:14,background:'rgba(255,255,255,0.7)',border:'1px dashed rgba(11,31,58,0.2)',display:'flex',alignItems:'center',gap:10}}>
        <div style={{width:28,height:28,borderRadius:'50%',background:INK,color:ACCENT,display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--wf-script)',fontSize:16,flexShrink:0}}>F</div>
        <div style={{fontFamily:'var(--wf-display)',fontSize:12,lineHeight:1.3,color:INK,flex:1}}>While you walk — fun fact: our Istanbul shop is older than Bay Atlantic University.</div>
      </div>
    </div>
  </div>
);

// Cart (bag preview)
const SelBag = () => (
  <div style={{position:'absolute',inset:0,background:CREAM,overflow:'hidden'}}>
    <div style={{padding:'56px 22px 0',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
      <div style={{width:36,height:36,borderRadius:'50%',background:'rgba(255,255,255,0.7)',display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--wf-display)',fontSize:18,color:INK}}>‹</div>
      <div style={{fontFamily:'var(--wf-mono)',fontSize:10,letterSpacing:'0.2em',opacity:0.5}}>BAG · 3 ITEMS</div>
      <div style={{width:36}}></div>
    </div>
    <div style={{padding:'12px 22px 0'}}>
      <div style={{fontFamily:'var(--wf-script)',fontSize:36,color:INK,lineHeight:1}}>your bag.</div>
    </div>
    <div style={{padding:'18px 22px 0'}}>
      {[{n:'Baklava Latte',d:'16oz · Oat',p:'7.00',i:'Baklava-Latte-Studio',q:1},{n:'Strawberry Matcha',d:'12oz · Whole',p:'6.20',i:'strawberry-matcha',q:1},{n:"S'mores Latte",d:'16oz · Whole',p:'6.50',i:'S_mores-Latte',q:1}].map(d=>(
        <div key={d.n} style={{display:'flex',gap:12,padding:'12px',background:'#fff',borderRadius:14,marginBottom:8,boxShadow:'0 2px 6px rgba(11,31,58,0.04)'}}>
          <div style={{width:62,height:62,borderRadius:12,overflow:'hidden',background:INK,flexShrink:0}}>
            <ImgCream src={drinkUrl(d.i)}/>
          </div>
          <div style={{flex:1,display:'flex',flexDirection:'column',justifyContent:'space-between'}}>
            <div>
              <div style={{fontFamily:'var(--wf-display)',fontSize:13,fontWeight:600,color:INK}}>{d.n}</div>
              <div style={{fontFamily:'var(--wf-mono)',fontSize:10,opacity:0.5,marginTop:2}}>{d.d}</div>
            </div>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
              <div style={{display:'flex',alignItems:'center',gap:8}}>
                <div style={{width:20,height:20,borderRadius:'50%',border:`1.2px solid ${INK}`,display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--wf-display)',fontSize:12,color:INK}}>−</div>
                <div style={{fontFamily:'var(--wf-display)',fontSize:12,fontWeight:600,color:INK}}>{d.q}</div>
                <div style={{width:20,height:20,borderRadius:'50%',background:INK,color:'#fff',display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--wf-display)',fontSize:12}}>+</div>
              </div>
              <div style={{fontFamily:'var(--wf-display)',fontSize:13,fontWeight:600,color:INK}}>${d.p}</div>
            </div>
          </div>
        </div>
      ))}
    </div>
    <div style={{padding:'10px 22px 0'}}>
      <div style={{padding:'10px 14px',background:INK,color:'#fff',borderRadius:14,display:'flex',alignItems:'center',gap:10}}>
        <div style={{width:28,height:28,borderRadius:'50%',background:ACCENT,color:INK,display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--wf-script)',fontSize:16,flexShrink:0}}>F</div>
        <div style={{fontFamily:'var(--wf-display)',fontSize:12,lineHeight:1.3,flex:1}}>Pair with a baklava ($3.50)? Your latte's lonely.</div>
        <div style={{fontFamily:'var(--wf-mono)',fontSize:10,color:ACCENT,letterSpacing:'0.05em'}}>ADD</div>
      </div>
    </div>
    <div style={{padding:'14px 22px 0',fontFamily:'var(--wf-display)',fontSize:13,color:INK}}>
      <div style={{display:'flex',justifyContent:'space-between',padding:'4px 0'}}><span style={{opacity:0.7}}>Subtotal</span><span>$19.70</span></div>
      <div style={{display:'flex',justifyContent:'space-between',padding:'4px 0',color:ACCENT,fontWeight:600}}><span>★ You'll earn</span><span>+99</span></div>
    </div>
    <div style={{position:'absolute',bottom:18,left:18,right:18,padding:'14px',background:INK,color:'#fff',borderRadius:24,textAlign:'center',fontFamily:'var(--wf-display)',fontSize:14,fontWeight:600,display:'flex',alignItems:'center',justifyContent:'center',gap:10}}>
      <span>Checkout</span><span style={{opacity:0.5}}>·</span><span style={{fontFamily:'var(--wf-mono)',fontSize:11,letterSpacing:'0.1em'}}>$19.70</span>
    </div>
  </div>
);


// Auth field (shared)
const AuthField = ({label, placeholder, hint}) => (
  <div>
    <div style={{fontFamily:'var(--wf-mono)',fontSize:9,letterSpacing:'0.2em',opacity:0.5,color:INK}}>{label}</div>
    <div style={{marginTop:6,padding:'12px 14px',background:'#fff',borderRadius:12,fontFamily:'var(--wf-display)',fontSize:13,color:'rgba(11,31,58,0.45)',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
      <span>{placeholder}</span>
      {hint ? <span style={{fontFamily:'var(--wf-mono)',fontSize:9,letterSpacing:'0.12em',opacity:0.6}}>{hint}</span> : null}
    </div>
  </div>
);

// Log in
const SelLogin = () => (
  <div style={{position:'absolute',inset:0,background:CREAM,display:'flex',flexDirection:'column'}}>
    <div style={{padding:'62px 28px 0'}}>
      <div style={{width:58,height:58,borderRadius:'50%',background:'#fff',display:'flex',alignItems:'center',justifyContent:'center',overflow:'hidden',boxShadow:'0 6px 18px rgba(11,31,58,0.14)',marginBottom:18}}>
        <img src="https://dolphincafedc.com/wp-content/uploads/cropped-cropped-dolphin-logo-low-150x150-1.webp" alt="Dolphin Cafe" style={{width:'88%',height:'88%',objectFit:'contain'}}/>
      </div>
      <div style={{fontFamily:'var(--wf-mono)',fontSize:10,letterSpacing:'0.2em',opacity:0.5}}>WELCOME BACK</div>
      <div style={{fontFamily:'var(--wf-script)',fontSize:38,lineHeight:1,color:INK,marginTop:4}}>log in.</div>
      <div style={{fontFamily:'var(--wf-display)',fontSize:14,marginTop:8,lineHeight:1.4,color:INK,opacity:0.75}}>Your stars, your usual order, your Finn — right where you left them.</div>
    </div>
    <div style={{padding:'26px 28px 0',display:'flex',flexDirection:'column',gap:14}}>
      <AuthField label="EMAIL" placeholder="alex@email.com"/>
      <AuthField label="PASSWORD" placeholder="••••••••" hint="SHOW"/>
      <div style={{fontFamily:'var(--wf-display)',fontSize:12,color:INK,opacity:0.7,textDecoration:'underline',alignSelf:'flex-start'}}>Forgot password?</div>
    </div>
    <div style={{marginTop:'auto',padding:'0 28px 36px'}}>
      <button style={{width:'100%',border:'none',background:INK,color:'#fff',padding:'14px 0',borderRadius:30,fontFamily:'var(--wf-display)',fontSize:14,fontWeight:600}}>Log in</button>
      <div style={{textAlign:'center',marginTop:14,fontFamily:'var(--wf-display)',fontSize:12,color:INK,opacity:0.7}}>New here? <span style={{fontWeight:600,opacity:1,textDecoration:'underline'}}>Create an account</span></div>
    </div>
  </div>
);

// Sign up
const SelSignup = () => (
  <div style={{position:'absolute',inset:0,background:CREAM,display:'flex',flexDirection:'column'}}>
    <div style={{padding:'58px 28px 0'}}>
      <div style={{display:'flex',alignItems:'center',gap:12}}>
        <div style={{width:44,height:44,borderRadius:'50%',background:'#fff',display:'flex',alignItems:'center',justifyContent:'center',overflow:'hidden',boxShadow:'0 4px 14px rgba(11,31,58,0.12)',flexShrink:0}}>
          <img src="https://dolphincafedc.com/wp-content/uploads/cropped-cropped-dolphin-logo-low-150x150-1.webp" alt="Dolphin Cafe" style={{width:'88%',height:'88%',objectFit:'contain'}}/>
        </div>
        <div>
          <div style={{fontFamily:'var(--wf-mono)',fontSize:10,letterSpacing:'0.2em',opacity:0.5}}>JOIN THE CAFE</div>
          <div style={{fontFamily:'var(--wf-script)',fontSize:32,lineHeight:1,color:INK,marginTop:2}}>sign up.</div>
        </div>
      </div>
      <div style={{marginTop:14,padding:'10px 14px',background:INK,color:'#fff',borderRadius:14,display:'flex',alignItems:'center',gap:10}}>
        <div style={{fontFamily:'var(--wf-display)',fontSize:20,fontWeight:700,color:ACCENT,lineHeight:1}}>5★</div>
        <div style={{fontFamily:'var(--wf-display)',fontSize:12,lineHeight:1.3,flex:1}}>per $1 from your very first order · 250★ = a free drink</div>
      </div>
    </div>
    <div style={{padding:'22px 28px 0',display:'flex',flexDirection:'column',gap:12,overflowY:'auto'}}>
      <AuthField label="FULL NAME" placeholder="Alex Morgan"/>
      <AuthField label="EMAIL" placeholder="alex@email.com"/>
      <AuthField label="PHONE NUMBER" placeholder="(202) 555-0134"/>
      <AuthField label="PASSWORD" placeholder="••••••••" hint="SHOW"/>
      <AuthField label="CONFIRM PASSWORD" placeholder="••••••••" hint="SHOW"/>
    </div>
    <div style={{marginTop:'auto',padding:'16px 28px 36px'}}>
      <div style={{fontFamily:'var(--wf-display)',fontSize:11,lineHeight:1.4,color:INK,opacity:0.6,marginBottom:12}}>By joining you agree to our Terms and Privacy Policy.</div>
      <button style={{width:'100%',border:'none',background:INK,color:'#fff',padding:'14px 0',borderRadius:30,fontFamily:'var(--wf-display)',fontSize:14,fontWeight:600}}>Create account</button>
      <div style={{textAlign:'center',marginTop:14,fontFamily:'var(--wf-display)',fontSize:12,color:INK,opacity:0.7}}>Already a member? <span style={{fontWeight:600,opacity:1,textDecoration:'underline'}}>Log in</span></div>
    </div>
  </div>
);

window.SelLogin = SelLogin; window.SelSignup = SelSignup;


// Settings
const SetRow = ({label, value, action='Edit', locked, last}) => (
  <div style={{display:'flex',alignItems:'center',gap:12,padding:'12px 14px',borderBottom:last?'none':'1px solid rgba(11,31,58,0.08)'}}>
    <div style={{flex:1,minWidth:0}}>
      <div style={{fontFamily:'var(--wf-mono)',fontSize:9,letterSpacing:'0.2em',opacity:0.5,color:INK}}>{label}</div>
      <div style={{fontFamily:'var(--wf-display)',fontSize:13,fontWeight:500,color:INK,marginTop:3,opacity:locked?0.6:1,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{value}</div>
    </div>
    {locked
      ? <div style={{padding:'4px 8px',borderRadius:10,background:'rgba(11,31,58,0.06)',fontFamily:'var(--wf-mono)',fontSize:9,letterSpacing:'0.12em',color:INK,opacity:0.6}}>LOCKED</div>
      : <div style={{fontFamily:'var(--wf-display)',fontSize:12,fontWeight:600,color:INK,textDecoration:'underline'}}>{action}</div>}
  </div>
);

const SelSettings = () => (
  <div style={{position:'absolute',inset:0,background:CREAM,overflow:'hidden'}}>
    <div style={{padding:'56px 22px 0',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
      <div style={{width:36,height:36,borderRadius:'50%',background:'rgba(255,255,255,0.7)',display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--wf-display)',fontSize:18,color:INK}}>‹</div>
      <div style={{fontFamily:'var(--wf-mono)',fontSize:10,letterSpacing:'0.2em',opacity:0.5}}>ACCOUNT</div>
      <div style={{width:36}}></div>
    </div>
    <div style={{position:'absolute',top:100,left:0,right:0,bottom:0,overflowY:'auto',padding:'0 22px 30px'}}>
      <div style={{fontFamily:'var(--wf-script)',fontSize:36,color:INK,lineHeight:1}}>settings.</div>
      <div style={{fontFamily:'var(--wf-mono)',fontSize:10,letterSpacing:'0.2em',opacity:0.5,margin:'18px 0 8px'}}>PERSONAL INFO</div>
      <div style={{background:'#fff',borderRadius:14}}>
        <SetRow label="FULL NAME" value="Alex Morgan"/>
        <SetRow label="EMAIL" value="alex@email.com"/>
        <SetRow label="PHONE NUMBER" value="(202) 555-0134" last/>
      </div>
      <div style={{fontFamily:'var(--wf-mono)',fontSize:10,letterSpacing:'0.2em',opacity:0.5,margin:'18px 0 8px'}}>SECURITY</div>
      <div style={{background:'#fff',borderRadius:14}}>
        <SetRow label="PASSWORD" value="••••••••••" action="Change" last/>
      </div>
      <div style={{fontFamily:'var(--wf-mono)',fontSize:10,letterSpacing:'0.2em',opacity:0.5,margin:'18px 0 8px'}}>BIRTHDAY</div>
      <div style={{background:'#fff',borderRadius:14}}>
        <SetRow label="DATE OF BIRTH" value="June 14" locked last/>
      </div>
      <div style={{fontFamily:'var(--wf-display)',fontSize:11,lineHeight:1.4,color:INK,opacity:0.6,marginTop:8,padding:'0 4px'}}>Your birthday unlocks a free drink each year, so it can't be changed once set.</div>
      <div style={{marginTop:24,padding:'14px 0',borderRadius:30,border:'1.5px solid rgba(11,31,58,0.2)',textAlign:'center',fontFamily:'var(--wf-display)',fontSize:14,fontWeight:600,color:INK}}>Sign out</div>
    </div>
  </div>
);

window.SelSettings = SelSettings;


// Catering — bulk order
const SelCatering = () => {
  const items = [
    {n:'Coffee Traveler', d:'96oz box · serves 12', p:'42.00', img:'Salted-Caramel-Latte', q:2},
    {n:'Signature Latte Pack', d:'10 drinks · mix & match', p:'58.00', img:'Baklava-Latte-Studio', q:1},
    {n:'Matcha Pack', d:'10 drinks · mix & match', p:'60.00', img:'strawberry-matcha', q:0},
    {n:'Pastry Platter', d:'baklava · simit · cookies · serves 12', p:'48.00', img:'cookies-and-cream-matcha', q:1},
  ];
  return (
    <div style={{position:'absolute',inset:0,background:CREAM,overflow:'hidden'}}>
      <div style={{padding:'56px 22px 0',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
        <div style={{width:36,height:36,borderRadius:'50%',background:'rgba(255,255,255,0.7)',display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--wf-display)',fontSize:18,color:INK}}>‹</div>
        <div style={{fontFamily:'var(--wf-mono)',fontSize:10,letterSpacing:'0.2em',opacity:0.5}}>FOR TEAMS & EVENTS</div>
        <div style={{width:36}}></div>
      </div>
      <div style={{position:'absolute',top:100,left:0,right:0,bottom:86,overflowY:'auto',padding:'0 22px 16px'}}>
        <div style={{fontFamily:'var(--wf-script)',fontSize:36,color:INK,lineHeight:1}}>catering.</div>
        <div style={{fontFamily:'var(--wf-display)',fontSize:13,marginTop:6,lineHeight:1.4,color:INK,opacity:0.75}}>Office meeting, study group, party — order for everyone at once.</div>
        <div style={{marginTop:14,display:'grid',gridTemplateColumns:'1fr 1fr',gap:8}}>
          <div style={{padding:'10px 12px',background:'#fff',borderRadius:12}}>
            <div style={{fontFamily:'var(--wf-mono)',fontSize:9,letterSpacing:'0.2em',opacity:0.5}}>GUESTS</div>
            <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginTop:6}}>
              <div style={{width:22,height:22,borderRadius:'50%',border:`1.5px solid ${INK}`,display:'flex',alignItems:'center',justifyContent:'center',fontSize:13,color:INK}}>−</div>
              <div style={{fontFamily:'var(--wf-display)',fontSize:16,fontWeight:700,color:INK}}>24</div>
              <div style={{width:22,height:22,borderRadius:'50%',background:INK,color:'#fff',display:'flex',alignItems:'center',justifyContent:'center',fontSize:13}}>+</div>
            </div>
          </div>
          <div style={{padding:'10px 12px',background:'#fff',borderRadius:12}}>
            <div style={{fontFamily:'var(--wf-mono)',fontSize:9,letterSpacing:'0.2em',opacity:0.5}}>PICKUP</div>
            <div style={{fontFamily:'var(--wf-display)',fontSize:13,fontWeight:600,color:INK,marginTop:6}}>Fri, Oct 2 · 9:00</div>
          </div>
        </div>
        <div style={{marginTop:10,padding:'10px 14px',background:INK,color:'#fff',borderRadius:14,display:'flex',alignItems:'center',gap:10}}>
          <div style={{width:28,height:28,borderRadius:'50%',background:ACCENT,color:INK,display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--wf-script)',fontSize:16,flexShrink:0}}>F</div>
          <div style={{fontFamily:'var(--wf-display)',fontSize:12,lineHeight:1.3,flex:1}}>For 24 guests I'd do 2 Travelers + 1 Latte Pack + a platter.</div>
        </div>
        <div style={{fontFamily:'var(--wf-mono)',fontSize:10,letterSpacing:'0.2em',opacity:0.5,margin:'16px 0 8px'}}>PACKAGES</div>
        {items.map(d=>(
          <div key={d.n} style={{display:'flex',gap:12,padding:10,background:'#fff',borderRadius:14,marginBottom:8,alignItems:'center'}}>
            <div style={{width:54,height:54,borderRadius:12,overflow:'hidden',background:INK,flexShrink:0}}><ImgCream src={drinkUrl(d.img)}/></div>
            <div style={{flex:1,minWidth:0}}>
              <div style={{fontFamily:'var(--wf-display)',fontSize:13,fontWeight:600,color:INK}}>{d.n}</div>
              <div style={{fontFamily:'var(--wf-mono)',fontSize:9,opacity:0.5,marginTop:2}}>{d.d}</div>
              <div style={{fontFamily:'var(--wf-display)',fontSize:12,fontWeight:600,color:INK,marginTop:3}}>${d.p}</div>
            </div>
            {d.q>0 ? (
              <div style={{display:'flex',alignItems:'center',gap:6}}>
                <div style={{width:22,height:22,borderRadius:'50%',border:`1.2px solid ${INK}`,display:'flex',alignItems:'center',justifyContent:'center',fontSize:12,color:INK}}>−</div>
                <div style={{fontFamily:'var(--wf-display)',fontSize:12,fontWeight:700,color:INK,minWidth:10,textAlign:'center'}}>{d.q}</div>
                <div style={{width:22,height:22,borderRadius:'50%',background:INK,color:'#fff',display:'flex',alignItems:'center',justifyContent:'center',fontSize:12}}>+</div>
              </div>
            ) : (
              <div style={{padding:'6px 12px',borderRadius:14,border:'1.5px solid rgba(11,31,58,0.2)',fontFamily:'var(--wf-display)',fontSize:12,fontWeight:600,color:INK}}>Add</div>
            )}
          </div>
        ))}
        <div style={{fontFamily:'var(--wf-display)',fontSize:11,lineHeight:1.4,color:INK,opacity:0.6,marginTop:4}}>Order at least 24 hours ahead · stars earned on the full order.</div>
      </div>
      <div style={{position:'absolute',bottom:18,left:18,right:18,padding:'14px',background:INK,color:'#fff',borderRadius:24,textAlign:'center',fontFamily:'var(--wf-display)',fontSize:14,fontWeight:600,display:'flex',alignItems:'center',justifyContent:'center',gap:10}}>
        <span>Review order · 4 items</span><span style={{opacity:0.5}}>·</span><span style={{fontFamily:'var(--wf-mono)',fontSize:11,letterSpacing:'0.1em'}}>$190.00</span>
      </div>
    </div>
  );
};

window.SelCatering = SelCatering;


// Location picker — map (Mapbox in production; OSM tiles as stand-in)
const SelLocation = () => {
  const tiles = [[9371,12533],[9372,12533],[9371,12534],[9372,12534]];
  const Store = ({city, addr, meta, selected}) => (
    <div style={{display:'flex',alignItems:'center',gap:12,padding:'12px 14px',borderRadius:14,background:selected?'#fff':'transparent',border:selected?`2px solid ${INK}`:'1.5px solid rgba(11,31,58,0.15)'}}>
      <div style={{width:40,height:40,borderRadius:'50%',background:'#fff',display:'flex',alignItems:'center',justifyContent:'center',overflow:'hidden',flexShrink:0,boxShadow:'0 2px 8px rgba(11,31,58,0.1)'}}>
        <img src="https://dolphincafedc.com/wp-content/uploads/cropped-cropped-dolphin-logo-low-150x150-1.webp" alt="" style={{width:'86%',height:'86%',objectFit:'contain'}}/>
      </div>
      <div style={{flex:1,minWidth:0}}>
        <div style={{fontFamily:'var(--wf-display)',fontSize:14,fontWeight:600,color:INK}}>{city}</div>
        <div style={{fontFamily:'var(--wf-display)',fontSize:12,color:INK,opacity:0.65,marginTop:1}}>{addr}</div>
        <div style={{fontFamily:'var(--wf-mono)',fontSize:9,letterSpacing:'0.12em',opacity:0.5,marginTop:3}}>{meta}</div>
      </div>
      <div style={{width:20,height:20,borderRadius:'50%',border:`2px solid ${INK}`,display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
        {selected ? <div style={{width:10,height:10,borderRadius:'50%',background:INK}}></div> : null}
      </div>
    </div>
  );
  return (
    <div style={{position:'absolute',inset:0,background:CREAM,overflow:'hidden'}}>
      <div style={{position:'absolute',top:0,left:0,right:0,height:310,overflow:'hidden',background:'#e9e4d8'}}>
        <div style={{position:'absolute',left:-155,top:-35,width:512,height:512,display:'grid',gridTemplateColumns:'256px 256px',filter:'grayscale(0.55) sepia(0.18) contrast(0.95)'}}>
          {tiles.map(([x,y])=>(<img key={x+'-'+y} src={`https://tile.openstreetmap.org/15/${x}/${y}.png`} alt="" style={{width:256,height:256,display:'block'}}/>))}
        </div>
        <div style={{position:'absolute',left:152,top:170,transform:'translate(-50%,-100%)',display:'flex',flexDirection:'column',alignItems:'center'}}>
          <div style={{padding:'6px 10px',background:INK,color:'#fff',borderRadius:12,fontFamily:'var(--wf-display)',fontSize:11,fontWeight:600,whiteSpace:'nowrap',boxShadow:'0 6px 16px rgba(11,31,58,0.3)'}}>Dolphin Cafe</div>
          <div style={{width:2,height:10,background:INK}}></div>
          <div style={{width:14,height:14,borderRadius:'50%',background:ACCENT,border:`3px solid ${INK}`,marginTop:-2}}></div>
        </div>
        <div style={{position:'absolute',top:54,left:18,right:18,display:'flex',gap:8,alignItems:'center'}}>
          <div style={{width:40,height:40,borderRadius:'50%',background:'rgba(255,255,255,0.9)',display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--wf-display)',fontSize:18,color:INK,boxShadow:'0 4px 12px rgba(11,31,58,0.12)',flexShrink:0}}>‹</div>
          <div style={{flex:1,padding:'11px 14px',background:'rgba(255,255,255,0.9)',borderRadius:20,fontFamily:'var(--wf-display)',fontSize:13,color:'rgba(11,31,58,0.5)',boxShadow:'0 4px 12px rgba(11,31,58,0.12)'}}>Search a location</div>
        </div>
        <div style={{position:'absolute',bottom:38,right:18,padding:'4px 8px',background:'rgba(255,255,255,0.85)',borderRadius:8,fontFamily:'var(--wf-mono)',fontSize:8,letterSpacing:'0.1em',color:INK,opacity:0.7}}>MAP · MAPBOX SDK</div>
      </div>
      <div style={{position:'absolute',left:0,right:0,bottom:0,top:280,background:CREAM,borderRadius:'24px 24px 0 0',boxShadow:'0 -8px 24px rgba(11,31,58,0.08)',padding:'10px 22px 84px'}}>
        <div style={{width:36,height:4,borderRadius:2,background:'rgba(11,31,58,0.2)',margin:'0 auto 12px'}}></div>
        <div style={{fontFamily:'var(--wf-script)',fontSize:30,color:INK,lineHeight:1}}>pick your cafe.</div>
        <div style={{fontFamily:'var(--wf-mono)',fontSize:10,letterSpacing:'0.2em',opacity:0.5,margin:'8px 0 10px'}}>2 LOCATIONS · TWO CITIES</div>
        <div style={{display:'flex',flexDirection:'column',gap:8}}>
          <Store city="Washington, DC" addr="1510 H St NW" meta="OPEN · UNTIL 7 PM · 0.2 MI" selected/>
          <Store city="Istanbul, Türkiye" addr="The original Dolphin Cafe" meta="THE FIRST ONE · ORDER FOR PICKUP"/>
        </div>
      </div>
      <div style={{position:'absolute',bottom:18,left:18,right:18,padding:'14px',background:INK,color:'#fff',borderRadius:24,textAlign:'center',fontFamily:'var(--wf-display)',fontSize:14,fontWeight:600}}>Order from Washington, DC</div>
    </div>
  );
};

window.SelLocation = SelLocation;

window.SelBag = SelBag;
window.SelSplash = SelSplash;
window.SelOnb1 = SelOnb1; window.SelOnb2 = SelOnb2; window.SelOnb3 = SelOnb3;
window.SelHome = SelHome;
window.SelRewards = SelRewards;
window.SelProfile = SelProfile;
window.SelFinn = SelFinn;
window.SelProduct = SelProduct;
window.SelCart = SelCart;
window.SelOrder = SelOrder;