/* mobile-page.jsx — root · Glosé Mobile Spec F2b */

const SCREENS = [
  { id:'01', label:'Header + Nav', component: ScreenHeader },
  { id:'02', label:'Hero · drop', component: ScreenHero },
  { id:'03', label:'Collection', component: ScreenCollection },
  { id:'04', label:'PDP', component: ScreenPDP },
  { id:'05', label:'Cart drawer', component: ScreenCart },
  { id:'06', label:'Lookbook', component: ScreenLookbook },
  { id:'07', label:'Footer', component: ScreenFooter },
  { id:'08', label:'Search', component: ScreenSearch },
];

const MobilePage = () => {
  const isMobile = typeof window !== 'undefined' && window.innerWidth <= 600;
  const [active, setActive] = React.useState(null); /* null = show all */

  /* desktop: grid of phone frames; mobile: one screen at a time via selector */

  if (isMobile) {
    const idx = active !== null ? active : 0;
    const Screen = SCREENS[idx].component;
    return (
      <div style={{ background: T.bone, minHeight:'100dvh', display:'flex', flexDirection:'column' }}>
        {/* Top selector */}
        <div style={{
          position:'sticky', top:0, zIndex:50,
          background: T.ink, display:'flex', gap:0,
          overflowX:'auto', scrollbarWidth:'none',
          WebkitOverflowScrolling:'touch',
          borderBottom:`1px solid ${T.n500}`,
        }}>
          {SCREENS.map((s, i) => (
            <button key={s.id} onClick={() => setActive(i)} style={{
              flexShrink:0,
              padding:`${S[2]}px ${S[3]}px`,
              background: idx===i ? T.neon : 'none',
              border:'none', borderRight:`1px solid ${T.n500}`,
              cursor:'pointer',
              color: idx===i ? T.ink : T.bone,
            }}>
              <div className="mono" style={{ fontSize:9, letterSpacing:'.16em', textTransform:'uppercase', fontWeight: idx===i?700:400, whiteSpace:'nowrap' }}>
                {s.id}
              </div>
            </button>
          ))}
        </div>
        {/* Active screen — rendered directly, no phone frame (we're on a real device) */}
        <div style={{ flex:1 }}>
          <Screen/>
        </div>
      </div>
    );
  }

  /* ── DESKTOP ─────────────────────────────────────── */
  const visibleScreens = active !== null ? [SCREENS[active]] : SCREENS;

  return (
    <div style={{ background:'#1a1a1a', minHeight:'100vh' }}>

      {/* Cover */}
      <div style={{
        padding:`${S[8]}px ${S[7]}px ${S[7]}px`,
        borderBottom:`1px solid ${T.n600}`,
        display:'flex', flexDirection:'column', gap:S[4],
      }}>
        <div className="mono" style={{ fontSize:10, letterSpacing:'.2em', textTransform:'uppercase', color:T.neon }}>
          GLOSÉ · MOBILE SPEC · F2b · 375px BASELINE
        </div>
        <h1 style={{ margin:0, fontWeight:900, fontSize:56, letterSpacing:'-0.04em', lineHeight:.9, color:T.bone }}>
          Mobile<br/>Screens
        </h1>
        <p style={{ margin:0, fontSize:14, lineHeight:1.6, color:T.n400, maxWidth:480 }}>
          8 interactive mockups · iPhone 14 frame (375 × auto) · real DS components · annotation strips included
        </p>
        <div style={{ display:'flex', gap:S[3], flexWrap:'wrap' }}>
          {SCREENS.map((s, i) => (
            <button key={s.id} onClick={() => setActive(active === i ? null : i)} style={{
              padding:`${S[1]}px ${S[3]}px`,
              background: active===i ? T.neon : 'none',
              border:`1px solid ${active===i ? T.neon : T.n500}`,
              color: active===i ? T.ink : T.bone,
              cursor:'pointer', fontSize:11,
            }}>
              <span className="mono" style={{ fontSize:9, letterSpacing:'.14em', textTransform:'uppercase' }}>
                {s.id} · {s.label}
              </span>
            </button>
          ))}
          {active !== null && (
            <button onClick={() => setActive(null)} style={{
              padding:`${S[1]}px ${S[3]}px`,
              background:'none', border:`1px solid ${T.n500}`,
              color: T.n400, cursor:'pointer',
            }}>
              <span className="mono" style={{ fontSize:9, letterSpacing:'.14em', textTransform:'uppercase' }}>← ALL</span>
            </button>
          )}
        </div>
      </div>

      {/* Screens */}
      <div style={{
        padding: S[7],
        display:'flex',
        flexWrap:'wrap',
        gap: S[7],
        alignItems:'flex-start',
        justifyContent: active !== null ? 'center' : 'flex-start',
      }}>
        {visibleScreens.map(s => {
          const Screen = s.component;
          return (
            <div key={s.id} style={{ display:'flex', flexDirection:'column', gap:S[2] }}>
              <Screen/>
            </div>
          );
        })}
      </div>

      {/* Footer */}
      <div style={{
        padding:`${S[6]}px ${S[7]}px`,
        borderTop:`1px solid ${T.n600}`,
        display:'flex', justifyContent:'space-between', alignItems:'center',
      }}>
        <div className="mono" style={{ fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', color:T.n400 }}>
          GLOSÉ STUDIO · MOBILE SPEC F2b
        </div>
        <div className="mono" style={{ fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', color:T.n500 }}>
          375PX · IPHONE 14 BASELINE
        </div>
      </div>

    </div>
  );
};

Object.assign(window, { MobilePage });