// web-screens.jsx — 1518.coffee marketing site · phone frame + app screens
// Bespoke, self-contained mock screens (so the site doesn't pull the whole app).
// Needs shared.jsx + brand1518.jsx + ig-illustrations.jsx.

// ── Phone frame ─────────────────────────────────────────────
function Phone({ children, w=300, glow=true, style={} }){
  const P = useP();
  const vw = useViewport().w;
  // Never let a phone exceed the screen; leave room for padding.
  w = Math.min(w, Math.max(180, vw - 56));
  const h = Math.round(w * 2.16);
  return (
    <div style={{ position:'relative', width:w, ...style }}>
      {glow && <div style={{ position:'absolute', inset:'-12% -18%',
        background:`radial-gradient(60% 50% at 50% 38%, ${P.sageSoft}26, transparent 70%)`,
        filter:'blur(8px)', pointerEvents:'none' }} />}
      <div style={{ position:'relative', width:w, height:h, borderRadius:w*0.135,
        background:'#0E0B08', padding:w*0.035,
        boxShadow:'0 30px 70px rgba(0,0,0,0.5), 0 0 0 1px '+P.line+', inset 0 0 0 1.5px #2A231C' }}>
        <div style={{ position:'relative', width:'100%', height:'100%', borderRadius:w*0.1,
          overflow:'hidden', background:P.paper }}>
          {/* notch */}
          <div style={{ position:'absolute', top:0, left:'50%', transform:'translateX(-50%)',
            width:w*0.34, height:w*0.052, background:'#0E0B08',
            borderBottomLeftRadius:10, borderBottomRightRadius:10, zIndex:20 }} />
          {children}
        </div>
      </div>
    </div>
  );
}

function StatusBar({ light }){
  const c = light ? '#F4ECDD' : '#F4ECDD';
  return (
    <div style={{ position:'absolute', top:0, left:0, right:0, height:42, zIndex:15,
      display:'flex', alignItems:'center', justifyContent:'space-between',
      padding:'0 20px', pointerEvents:'none' }}>
      <span className="sans tnum" style={{ fontSize:12.5, fontWeight:600, color:c }}>9:41</span>
      <div style={{ display:'flex', gap:5, alignItems:'center', opacity:0.9 }}>
        <svg width="16" height="11" viewBox="0 0 16 11" fill={c}><rect x="0" y="7" width="3" height="4" rx="1"/><rect x="4.5" y="5" width="3" height="6" rx="1"/><rect x="9" y="2.5" width="3" height="8.5" rx="1"/><rect x="13.5" y="0" width="3" height="11" rx="1"/></svg>
        <svg width="22" height="11" viewBox="0 0 22 11" fill="none"><rect x="0.5" y="0.5" width="18" height="10" rx="2.5" stroke={c} opacity="0.5"/><rect x="2" y="2" width="13" height="7" rx="1.2" fill={c}/><rect x="20" y="3.5" width="1.5" height="4" rx="0.7" fill={c} opacity="0.5"/></svg>
      </div>
    </div>
  );
}

// ── Screen A · Guided timer ─────────────────────────────────
function ScreenTimer(){
  const P = useP();
  const pct = 0.62;
  const R = 92, C = 2*Math.PI*R;
  return (
    <div style={{ position:'absolute', inset:0, background:P.paper, overflow:'hidden' }}>
      <IGLandscape terrain="andes" placement="full" opacity={0.4} />
      <div style={{ position:'absolute', inset:0,
        background:'linear-gradient(to bottom, #211B16cc 0%, #211B16ee 55%, #211B16 100%)' }} />
      <StatusBar />
      <div style={{ position:'absolute', inset:0, display:'flex', flexDirection:'column',
        alignItems:'center', padding:'58px 26px 30px', zIndex:5 }}>
        <div className="sans" style={{ fontSize:10, fontWeight:600, letterSpacing:'0.2em',
          textTransform:'uppercase', color:P.sage }}>V60 · Pour-over</div>
        <div className="serif" style={{ fontSize:18, color:P.ink, marginTop:8 }}>Finca La Esperanza</div>

        <div style={{ position:'relative', width:220, height:220, marginTop:30 }}>
          <svg width="220" height="220" viewBox="0 0 220 220" style={{ transform:'rotate(-90deg)' }}>
            <circle cx="110" cy="110" r={R} fill="none" stroke={P.line} strokeWidth="6" />
            <circle cx="110" cy="110" r={R} fill="none" stroke={P.sage} strokeWidth="6"
              strokeLinecap="round" strokeDasharray={C} strokeDashoffset={C*(1-pct)}
              style={{ filter:`drop-shadow(0 0 8px ${P.sage}77)` }} />
          </svg>
          <div style={{ position:'absolute', inset:0, display:'flex', flexDirection:'column',
            alignItems:'center', justifyContent:'center' }}>
            <div className="serif tnum" style={{ fontSize:52, fontWeight:500, color:P.ink, lineHeight:1 }}>1:58</div>
            <div className="sans" style={{ fontSize:11, color:P.stone, marginTop:6, letterSpacing:'0.04em' }}>of 3:15</div>
          </div>
        </div>

        <div style={{ marginTop:26, textAlign:'center' }}>
          <div className="sans" style={{ fontSize:10, fontWeight:600, letterSpacing:'0.18em',
            textTransform:'uppercase', color:P.clay }}>Second pour</div>
          <div className="serif" style={{ fontStyle:'italic', fontSize:15, color:P.inkSoft,
            marginTop:8, lineHeight:1.4, maxWidth:200 }}>Steady circles — keep the bed level.</div>
        </div>

        <div style={{ flex:1 }} />
        {/* timer controls — plain icons, no boxes */}
        <div style={{ display:'flex', alignItems:'center', justifyContent:'center', gap:34 }}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={P.stone}
            strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
            <path d="M19 8.5A7 7 0 1 0 20 12"/><path d="M19 3v5.5h-5.5"/>
          </svg>
          <svg width="30" height="30" viewBox="0 0 24 24" fill={P.sage}>
            <rect x="6" y="4.5" width="4" height="15" rx="1.4"/><rect x="14" y="4.5" width="4" height="15" rx="1.4"/>
          </svg>
          <svg width="22" height="22" viewBox="0 0 24 24" fill={P.stone}>
            <path d="M5 5l9 7-9 7z"/><rect x="16" y="5" width="3" height="14" rx="1.2"/>
          </svg>
        </div>
      </div>
    </div>
  );
}

// ── Screen B · Home ─────────────────────────────────────────
function ScreenHome(){
  const P = useP();
  const Card = ({ title, sub, primary, gear }) => (
    <div style={{ position:'relative', borderRadius:18, overflow:'hidden',
      border:'1px solid '+(primary?P.sage:P.line), background:primary?'transparent':P.card,
      padding:'16px', display:'flex', alignItems:'center', gap:13 }}>
      {primary && <div style={{ position:'absolute', inset:0,
        background:`radial-gradient(120% 100% at 100% 50%, ${P.sageSoft}22, transparent 60%)` }} />}
      <div style={{ position:'relative', width:42, height:42, borderRadius:12, flexShrink:0,
        background:primary?P.sage:P.cardSunk, display:'flex', alignItems:'center', justifyContent:'center' }}>
        {gear==='v60'
          ? <GearV60 size={34} color={primary?'#1C1611':P.sage} opacity={0.9} />
          : <BeanRoasted size={28} color={P.sage} opacity={0.9} />}
      </div>
      <div style={{ position:'relative', flex:1 }}>
        <div className="serif" style={{ fontSize:17, color:P.ink, lineHeight:1.05 }}>{title}</div>
        <div className="sans" style={{ fontSize:11.5, color:P.stone, marginTop:3 }}>{sub}</div>
      </div>
    </div>
  );
  return (
    <div style={{ position:'absolute', inset:0, background:P.paper, overflow:'hidden' }}>
      <StatusBar />
      <div style={{ position:'absolute', inset:0, display:'flex', flexDirection:'column',
        padding:'52px 22px 26px', zIndex:5 }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
          <Logo1518 size={24} />
          <div style={{ display:'flex', alignItems:'center', gap:6, height:30, padding:'0 12px',
            borderRadius:20, background:P.card, border:'1px solid '+P.line }}>
            <span style={{ color:P.clay, fontSize:12 }}>◆</span>
            <span className="sans tnum" style={{ fontSize:12.5, fontWeight:700, color:P.ink }}>7</span>
          </div>
        </div>
        <div className="sans" style={{ fontSize:10, fontWeight:600, letterSpacing:'0.18em',
          textTransform:'uppercase', color:P.sage, marginTop:24 }}>Tuesday, June 2</div>
        <div className="serif" style={{ fontSize:26, lineHeight:1.1, color:P.ink, marginTop:7 }}>Good evening, Maya.</div>
        <div className="serif" style={{ fontStyle:'italic', fontSize:15, color:P.stone, marginTop:6 }}>What are you brewing today?</div>
        <div style={{ display:'flex', flexDirection:'column', gap:11, marginTop:24 }}>
          <Card title="Brew a coffee" sub="A guided pour, tuned to your taste" primary gear="v60" />
          <Card title="Scan a bag" sub="Add a new coffee to your shelf" gear="bean" />
        </div>
        <div style={{ flex:1 }} />
        <div style={{ display:'flex', gap:6, padding:'5px', background:P.cardSunk,
          border:'1px solid '+P.line, borderRadius:17 }}>
          <div style={{ flex:1, textAlign:'center', padding:'11px 0', borderRadius:13,
            background:P.sage, color:'#1C1611' }} className="sans">
            <span style={{ fontSize:12.5, fontWeight:700 }}>Home</span></div>
          <div style={{ flex:1, textAlign:'center', padding:'11px 0', color:P.stoneLt }} className="sans">
            <span style={{ fontSize:12.5, fontWeight:600 }}>Codex</span></div>
        </div>
      </div>
    </div>
  );
}

// ── Screen C · Codex / collection ───────────────────────────
function ScreenCodex(){
  const P = useP();
  const tiers = [
    { name:'Pink Bourbon', sub:'Colombia · Huila', tier:'Legendary', c:P.clay, found:true },
    { name:'Gesha', sub:'Panama · Boquete', tier:'Rare', c:'#5B8CC5', found:true },
    { name:'Heirloom', sub:'Ethiopia · Guji', tier:'Notable', c:'#C49A3C', found:true },
  ];
  return (
    <div style={{ position:'absolute', inset:0, background:P.paper, overflow:'hidden' }}>
      <StatusBar />
      <div style={{ position:'absolute', inset:0, display:'flex', flexDirection:'column',
        padding:'52px 22px 26px', zIndex:5 }}>
        <div className="sans" style={{ fontSize:10, fontWeight:600, letterSpacing:'0.18em',
          textTransform:'uppercase', color:P.sage }}>Your codex</div>
        <div className="serif" style={{ fontSize:25, color:P.ink, marginTop:7 }}>24 of 60 found</div>
        {/* progress */}
        <div style={{ height:6, borderRadius:4, background:P.cardSunk, marginTop:14, overflow:'hidden' }}>
          <div style={{ width:'40%', height:'100%', background:P.sage, borderRadius:4 }} />
        </div>

        <div style={{ display:'flex', flexDirection:'column', gap:10, marginTop:22 }}>
          {tiers.map((t,k)=>(
            <div key={k} style={{ position:'relative', borderRadius:15, overflow:'hidden',
              border:'1px solid '+t.c+'55', background:P.card, padding:'13px 15px',
              display:'flex', alignItems:'center', gap:13,
              boxShadow: t.tier==='Legendary' ? `0 0 16px ${t.c}22` : 'none' }}>
              <div style={{ position:'absolute', inset:0,
                background:`linear-gradient(110deg, ${t.c}14, transparent 55%)` }} />
              <div style={{ position:'relative', width:38, height:38, borderRadius:'50%',
                border:'1px solid '+t.c, display:'flex', alignItems:'center', justifyContent:'center' }}>
                <BeanCherry size={30} color={t.c} opacity={0.85} />
              </div>
              <div style={{ position:'relative', flex:1 }}>
                <div className="serif" style={{ fontSize:16, color:P.ink, lineHeight:1.1 }}>{t.name}</div>
                <div className="sans" style={{ fontSize:11, color:P.stone, marginTop:2 }}>{t.sub}</div>
              </div>
              <span className="sans" style={{ position:'relative', fontSize:8.5, fontWeight:700,
                letterSpacing:'0.12em', textTransform:'uppercase', color:t.c,
                border:'1px solid '+t.c+'66', borderRadius:20, padding:'4px 9px' }}>{t.tier}</span>
            </div>
          ))}
        </div>

        {/* locked row */}
        <div style={{ display:'flex', gap:10, marginTop:10 }}>
          {[0,1,2].map(k=>(
            <div key={k} style={{ flex:1, height:54, borderRadius:14,
              border:'1.5px dashed '+P.line, display:'flex', alignItems:'center', justifyContent:'center' }}>
              <span style={{ color:P.stoneLt, fontSize:18 }}>?</span>
            </div>
          ))}
        </div>
        <div style={{ flex:1 }} />
      </div>
    </div>
  );
}

Object.assign(window, { Phone, StatusBar, ScreenTimer, ScreenHome, ScreenCodex });