function useClock() {
  function fmt() {
    var d = new Date();
    var h = d.getHours().toString().padStart(2,'0');
    var m = d.getMinutes().toString().padStart(2,'0');
    var off = -d.getTimezoneOffset();
    var sign = off >= 0 ? '+' : '-';
    var oh = Math.floor(Math.abs(off)/60);
    var om = Math.abs(off)%60;
    return h+':'+m+' GMT'+sign+oh+(om?':'+String(om).padStart(2,'0'):'');
  }
  var [t, setT] = React.useState(fmt);
  React.useEffect(function(){
    var id = setInterval(function(){ setT(fmt()); }, 30000);
    return function(){ clearInterval(id); };
  }, []);
  return t;
}

function Entry({ onEnter }) {
  const clock = useClock();
  const [selected, setSelected] = React.useState("USD");
  const [winW, setWinW] = React.useState(window.innerWidth);
  React.useEffect(function() {
    function handle() { setWinW(window.innerWidth); }
    window.addEventListener('resize', handle);
    return function() { window.removeEventListener('resize', handle); };
  }, []);
  const isMobile = winW < 640;
  const featured = ["USD", "EUR", "GBP", "CAD", "JPY", "CHF", "AUD", "CNY"];
  const all = window.CURRENCIES;
  const selMeta = all.find(function(x){ return x.code === selected; }) || {};

  return (
    <div style={{ position:'absolute', inset:0, background:'var(--bg)', overflow:'hidden' }}>

      {/* ── Ambient glow ── */}
      <div style={{ position:'absolute', top:'-20%', left:'50%', transform:'translateX(-50%)', width:'90vw', height:'90vw', maxWidth:900, maxHeight:900, borderRadius:'50%', background:'radial-gradient(ellipse at center, oklch(0.78 0.14 75 / 0.07) 0%, transparent 65%)', pointerEvents:'none', zIndex:0 }}/>

      {/* ── Globe SVG background ── */}
      <div style={{ position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:isMobile?'center':'flex-end', paddingRight:isMobile?0:'6vw', pointerEvents:'none', zIndex:0, animation:'globe-fadein 1.4s ease both' }}>
        <svg viewBox="-1 -1 2 2" style={{ width:isMobile?'85vw':'min(60vw,700px)', height:isMobile?'85vw':'min(60vw,700px)', opacity:0.055, flexShrink:0 }}>
          <circle cx="0" cy="0" r="1" fill="none" stroke="var(--fg)" strokeWidth="0.012"/>
          {[-60,-30,0,30,60].map(function(lat){
            var y = Math.sin(lat*Math.PI/180);
            var rx = Math.cos(lat*Math.PI/180);
            return <ellipse key={lat} cx="0" cy={-y} rx={rx} ry={rx*0.18} fill="none" stroke="var(--fg)" strokeWidth="0.008"/>;
          })}
          <g style={{ animation:'globe-spin 40s linear infinite', transformOrigin:'0 0' }}>
            {[0,30,60,90,120,150].map(function(lon){
              var a = lon*Math.PI/180;
              return <ellipse key={lon} cx="0" cy="0" rx={Math.abs(Math.cos(a))} ry="1" fill="none" stroke="var(--fg)" strokeWidth="0.006" transform={'rotate('+lon+')'}/>;
            })}
          </g>
          <circle cx="0" cy="0" r="1" fill="none" stroke="var(--accent)" strokeWidth="0.018" strokeDasharray="0.06 0.04" opacity="0.5"/>
        </svg>
      </div>

      {/* ── Content ── */}
      {isMobile ? (
        // ── Mobile ──────────────────────────────────────────────────────────
        <div style={{ position:'relative', zIndex:1, height:'100%', overflowY:'auto', display:'flex', flexDirection:'column', paddingBottom:'max(24px, env(safe-area-inset-bottom))' }}>
          <div style={{ padding:'28px 20px 0' }}>
            {/* Brand */}
            <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:32 }}>
              <div style={{ width:28, height:28, border:'1px solid var(--accent)', display:'grid', placeItems:'center', color:'var(--accent)' }}>
                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.2"><circle cx="12" cy="12" r="9.5"/><ellipse cx="12" cy="12" rx="4" ry="9.5"/><line x1="2.5" y1="12" x2="21.5" y2="12"/></svg>
              </div>
              <span style={{ fontFamily:"'JetBrains Mono',monospace", fontSize:11, letterSpacing:'0.2em', color:'var(--fg)' }}>ATLAS <span style={{opacity:0.45}}>/ FX</span></span>
              <div style={{ marginLeft:'auto', display:'flex', alignItems:'center', gap:6, fontFamily:"'JetBrains Mono',monospace", fontSize:9, color:'var(--fg-faint)', letterSpacing:'0.1em' }}>
                <span style={{ width:6, height:6, borderRadius:99, background:'var(--accent)', display:'inline-block', animation:'pulse 1.8s ease-out infinite' }}/>
                LIVE
              </div>
            </div>
            {/* Headline */}
            <h1 style={{ fontFamily:"'Instrument Serif',serif", fontWeight:400, fontSize:'clamp(34px,9vw,48px)', lineHeight:1.08, letterSpacing:'-0.02em', color:'var(--fg)', marginBottom:16 }}>
              The world,<br/><em style={{color:'var(--accent)'}}>priced</em> in your pocket.
            </h1>
            <p style={{ fontSize:13, lineHeight:1.6, color:'var(--fg-dim)', marginBottom:28, maxWidth:340 }}>
              Real-time exchange rates for 46 currencies, on a single interactive map.
            </p>
          </div>
          {/* Panel */}
          <div style={{ margin:'0 12px', padding:'18px', background:'var(--bg-elev)', border:'1px solid var(--line)', flex:1, display:'flex', flexDirection:'column', gap:14 }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', paddingBottom:10, borderBottom:'1px solid var(--line-soft)' }}>
              <span style={{ fontFamily:"'JetBrains Mono',monospace", fontSize:9, letterSpacing:'0.18em', color:'var(--fg-faint)' }}>SELECT BASE CURRENCY</span>
              <span style={{ fontFamily:"'JetBrains Mono',monospace", fontSize:9, color:'var(--fg-faint)', letterSpacing:'0.08em' }}>Change anytime</span>
            </div>
            <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:1, background:'var(--line-soft)' }}>
              {featured.map(function(code){
                var c=all.find(function(x){return x.code===code;});
                var active=selected===code;
                return (
                  <button key={code} onClick={function(){setSelected(code);}}
                    style={{ position:'relative', background:active?'color-mix(in oklch, var(--accent) 18%, var(--bg-elev))':'var(--bg)', padding:'10px 8px', border:'none', textAlign:'left', cursor:'pointer', color:'var(--fg)', fontFamily:'inherit', outline:active?'1px solid var(--accent)':'none', outlineOffset:'-1px', zIndex:active?1:0 }}>
                    <div style={{ fontFamily:"'Instrument Serif',serif", fontSize:18, color:'var(--accent)', marginBottom:4, lineHeight:1 }}>{c.symbol}</div>
                    <div style={{ fontFamily:"'JetBrains Mono',monospace", fontSize:10, fontWeight:500 }}>{c.code}</div>
                  </button>
                );
              })}
            </div>
            <window.CurrencyCombobox value={selected} onChange={function(code){setSelected(code);}} maxListHeight={160}/>
            <button onClick={function(){onEnter(selected);}}
              style={{ display:'flex', alignItems:'center', justifyContent:'center', gap:10, padding:'15px', background:'var(--accent)', color:'oklch(0.18 0.01 250)', border:'none', cursor:'pointer', fontFamily:"'JetBrains Mono',monospace", fontSize:11, letterSpacing:'0.14em', fontWeight:600 }}>
              <span>ENTER WITH</span>
              <span style={{ padding:'2px 7px', background:'rgba(0,0,0,0.2)', fontSize:10 }}>{window.flagEmoji(selMeta.flag)} {selected}</span>
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
            </button>
          </div>
        </div>
      ) : (
        // ── Desktop ──────────────────────────────────────────────────────────
        <div style={{ position:'relative', zIndex:1, height:'100%', display:'grid', gridTemplateColumns:'1fr minmax(420px,480px)', alignItems:'center', padding:'48px 6vw', gap:40 }}>

          {/* Left — hero copy */}
          <div style={{ display:'flex', flexDirection:'column', justifyContent:'center', gap:0, maxWidth:600 }}>
            {/* Brand */}
            <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:48 }}>
              <div style={{ width:32, height:32, border:'1px solid var(--accent)', display:'grid', placeItems:'center', color:'var(--accent)' }}>
                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.2"><circle cx="12" cy="12" r="9.5"/><ellipse cx="12" cy="12" rx="4" ry="9.5"/><line x1="2.5" y1="12" x2="21.5" y2="12"/><line x1="12" y1="2.5" x2="12" y2="21.5"/></svg>
              </div>
              <span style={{ fontFamily:"'JetBrains Mono',monospace", fontSize:12, letterSpacing:'0.22em', color:'var(--fg)' }}>ATLAS <span style={{opacity:0.45}}>/ FX</span></span>
            </div>

            {/* Eyebrow */}
            <div style={{ display:'flex', alignItems:'center', gap:8, fontFamily:"'JetBrains Mono',monospace", fontSize:11, letterSpacing:'0.14em', color:'var(--fg-dim)', marginBottom:24 }}>
              <span style={{ width:7, height:7, borderRadius:99, background:'var(--accent)', display:'inline-block', animation:'pulse 1.8s ease-out infinite', flexShrink:0 }}/>
              LIVE · {clock}
            </div>

            {/* Headline */}
            <h1 style={{ fontFamily:"'Instrument Serif',serif", fontWeight:400, fontSize:'clamp(48px,4.8vw,80px)', lineHeight:1.0, letterSpacing:'-0.025em', color:'var(--fg)', margin:0, marginBottom:28 }}>
              The world,<br/><em style={{ fontStyle:'italic', color:'var(--accent)' }}>priced</em><br/>in your pocket.
            </h1>

            {/* Sub */}
            <p style={{ fontSize:16, lineHeight:1.65, color:'var(--fg-dim)', maxWidth:420, margin:0, marginBottom:52 }}>
              Real-time exchange rates for 46 currencies across 52 countries — visualised on a single interactive globe.
            </p>

            {/* Stats */}
            <div style={{ display:'flex', gap:40, paddingTop:28, borderTop:'1px solid var(--line-soft)' }}>
              {[['46','Currencies'],['52','Countries'],['~4s','Refresh rate']].map(function(s){
                return (
                  <div key={s[0]}>
                    <div style={{ fontFamily:"'Instrument Serif',serif", fontSize:28, color:'var(--accent)', lineHeight:1 }}>{s[0]}</div>
                    <div style={{ fontFamily:"'JetBrains Mono',monospace", fontSize:9, letterSpacing:'0.14em', color:'var(--fg-faint)', marginTop:6, textTransform:'uppercase' }}>{s[1]}</div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Right — floating panel */}
          <div style={{ background:'var(--bg-elev)', border:'1px solid var(--line)', padding:'28px', display:'flex', flexDirection:'column', gap:20, boxShadow:'0 32px 80px rgba(0,0,0,0.5)' }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', paddingBottom:14, borderBottom:'1px solid var(--line-soft)' }}>
              <span style={{ fontFamily:"'JetBrains Mono',monospace", fontSize:10, letterSpacing:'0.18em', color:'var(--fg)' }}>01 / BASE CURRENCY</span>
              <span style={{ fontFamily:"'JetBrains Mono',monospace", fontSize:10, color:'var(--fg-faint)', letterSpacing:'0.08em' }}>Change anytime</span>
            </div>

            <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:1, background:'var(--line-soft)' }}>
              {featured.map(function(code){
                var c=all.find(function(x){return x.code===code;});
                var active=selected===code;
                return (
                  <button key={code} onClick={function(){setSelected(code);}}
                    style={{ position:'relative', background:active?'color-mix(in oklch, var(--accent) 18%, var(--bg-elev))':'var(--bg)', padding:'14px 10px', border:'none', textAlign:'left', cursor:'pointer', color:'var(--fg)', fontFamily:'inherit', outline:active?'1px solid var(--accent)':'none', outlineOffset:'-1px', zIndex:active?1:0, transition:'background 140ms' }}>
                    <div style={{ fontFamily:"'Instrument Serif',serif", fontSize:24, color:'var(--accent)', marginBottom:6, lineHeight:1 }}>{c.symbol}</div>
                    <div style={{ fontFamily:"'JetBrains Mono',monospace", fontSize:12, fontWeight:500 }}>{c.code}</div>
                    <div style={{ fontSize:9, color:'var(--fg-faint)', marginTop:2, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{c.name}</div>
                    {active&&<div style={{ position:'absolute', top:7, right:8, fontSize:7, color:'var(--accent)' }}>●</div>}
                  </button>
                );
              })}
            </div>

            <div style={{ display:'flex', alignItems:'center', gap:0 }}>
              <div style={{ flex:1, height:'1px', background:'var(--line-soft)' }}/>
              <span style={{ padding:'0 12px', fontFamily:"'JetBrains Mono',monospace", fontSize:9, letterSpacing:'0.16em', color:'var(--fg-faint)', whiteSpace:'nowrap' }}>OR SEARCH ALL 46</span>
              <div style={{ flex:1, height:'1px', background:'var(--line-soft)' }}/>
            </div>

            <window.CurrencyCombobox value={selected} onChange={function(code){setSelected(code);}}/>

            <button onClick={function(){onEnter(selected);}}
              style={{ display:'flex', alignItems:'center', justifyContent:'center', gap:14, padding:'18px', background:'var(--accent)', color:'oklch(0.18 0.01 250)', border:'none', cursor:'pointer', fontFamily:"'JetBrains Mono',monospace", fontSize:11, letterSpacing:'0.14em', fontWeight:600, textTransform:'uppercase', marginTop:4 }}>
              <span>Enter the map with</span>
              <span style={{ padding:'3px 8px', background:'rgba(0,0,0,0.2)', fontSize:11 }}>{window.flagEmoji(selMeta.flag)} {selected}</span>
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
            </button>
          </div>

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

window.Entry = Entry;
