/* mobile-shared.jsx — primitives pro mobile spec
   375px = iPhone 14/15 · 390px = Pro · používáme 375 jako baseline
*/

const MOBILE_W = 375;

/* ── Breakpoints ──────────────────────────────── */
const BP = {
  mobile: 375,
  tablet: 768,
  desktop: 1024,
  wide: 1440,
};

/* ── Mobile spacing (tighter than desktop) ─────── */
/* Stejná škála S[], ale výchozí page gutter je S[4]=16px místo S[7]=48px */
const MG = 16; /* mobile gutter */

/* ── Phone frame — na desktopu obalí screen do 375px rámu */
const PhoneFrame = ({ label, screen, note, children }) => {
  const isMobile = typeof window !== 'undefined' && window.innerWidth <= 600;
  if (isMobile) {
    /* na reálném mobilu — žádný frame, jen screen */
    return (
      <div style={{ background: T.bone, minHeight: '100dvh' }}>
        {children}
      </div>
    );
  }
  return (
    <div style={{ display:'flex', flexDirection:'column', alignItems:'center' }}>
      {label && (
        <div className="mono" style={{
          fontSize:10, letterSpacing:'.18em', textTransform:'uppercase',
          color: T.n400, marginBottom: S[3], alignSelf:'flex-start',
        }}>{screen} · {label}</div>
      )}
      <div style={{
        width: MOBILE_W, flexShrink: 0,
        background: T.bone,
        border: `1px solid ${T.n300}`,
        boxShadow: '0 8px 40px rgba(0,0,0,.3)',
        position:'relative', overflow:'hidden',
      }}>
        {children}
      </div>
      {note && (
        <div className="mono" style={{
          width: MOBILE_W, marginTop: S[2],
          fontSize:10, letterSpacing:'.12em', color: T.neon,
          paddingLeft: S[2], borderLeft: `2px solid ${T.neon}`,
        }}>{note}</div>
      )}
    </div>
  );
};

/* ── Status bar (iOS spoof) ─────────────────────── */
const StatusBar = ({ light }) => (
  <div style={{
    height: 44, background: 'transparent',
    display:'flex', alignItems:'center', justifyContent:'space-between',
    padding:'0 20px', flexShrink:0,
  }}>
    <span className="mono" style={{ fontSize:12, fontWeight:700, color: light ? T.bone : T.ink }}>9:41</span>
    <div style={{ display:'flex', gap:6, alignItems:'center' }}>
      {/* signal bars */}
      {[6,8,10,12].map((h,i) => (
        <div key={i} style={{ width:3, height:h, background: light ? T.bone : T.ink, borderRadius:1, opacity: i<3?1:.4 }}/>
      ))}
      <div className="mono" style={{ fontSize:10, color: light ? T.bone : T.ink, marginLeft:2 }}>●●</div>
      {/* battery */}
      <div style={{ width:22, height:11, border:`1.5px solid ${light ? T.bone : T.ink}`, borderRadius:2, position:'relative', marginLeft:2 }}>
        <div style={{ position:'absolute', left:2, top:2, bottom:2, width:'70%', background: light ? T.bone : T.ink, borderRadius:1 }}/>
      </div>
    </div>
  </div>
);

/* ── Mobile Annotation strip ─────────────────────── */
const MAnn = ({ items }) => (
  <div style={{
    background: T.ink, padding:`${S[2]}px ${S[4]}px`,
    display:'flex', flexWrap:'wrap', gap:`${S[1]}px ${S[4]}px`,
  }}>
    {items.map(([prop, val], i) => (
      <div key={i} style={{ display:'flex', gap:S[2], alignItems:'baseline' }}>
        <span className="mono" style={{ fontSize:9, letterSpacing:'.14em', color: T.n400, textTransform:'uppercase' }}>{prop}</span>
        <span className="mono" style={{ fontSize:10, letterSpacing:'.06em', color: T.neon }}>{val}</span>
      </div>
    ))}
  </div>
);

/* ── Mobile hamburger nav ───────────────────────── */
const MobileNav = ({ open, onToggle, dark }) => (
  <div style={{
    height: 56, background: dark ? T.ink : T.bone,
    display:'flex', alignItems:'center', justifyContent:'space-between',
    padding:`0 ${MG}px`, borderBottom:`1px solid ${dark ? T.n500 : T.ink}`,
    flexShrink:0,
  }}>
    <Wordmark size={22} color={dark ? T.bone : T.ink}/>
    <div style={{ display:'flex', gap:S[5], alignItems:'center' }}>
      <span className="mono" style={{ fontSize:10, letterSpacing:'.18em', color: dark ? T.bone : T.ink }}>BAG · 2</span>
      <button onClick={onToggle} style={{
        background:'none', border:'none', cursor:'pointer', padding:4,
        display:'flex', flexDirection:'column', gap:5,
      }}>
        {[0,1,2].map(i => (
          <div key={i} style={{ width:22, height:2, background: dark ? T.bone : T.ink }}/>
        ))}
      </button>
    </div>
  </div>
);

/* ── Mobile drawer menu ─────────────────────────── */
const MobileDrawerMenu = ({ open, onClose }) => (
  <div style={{
    position:'absolute', inset:0, zIndex:20,
    transform: open ? 'translateX(0)' : 'translateX(-100%)',
    transition: `transform ${M.spring.d}ms ${M.spring.e}`,
    background: T.bone, display:'flex', flexDirection:'column',
  }}>
    <div style={{ height:100, background: T.ink, display:'flex', alignItems:'flex-end', justifyContent:'space-between', padding:`0 ${MG}px ${S[4]}px` }}>
      <Wordmark size={28} color={T.bone}/>
      <button onClick={onClose} style={{ background:'none', border:'none', cursor:'pointer', padding:4, lineHeight:1, color:T.bone, fontSize:20 }}>✕</button>
    </div>
    <nav style={{ flex:1, padding:`${S[5]}px ${MG}px` }}>
      {['SHOP', 'DROPS', 'LOOKBOOK', 'STUDIO'].map((item, i) => (
        <div key={item} style={{
          padding:`${S[4]}px 0`,
          borderBottom:`1px solid ${T.n200}`,
          fontWeight:900, fontSize:32, letterSpacing:'-0.03em', lineHeight:1,
        }}>{item}</div>
      ))}
    </nav>
    <div className="mono" style={{
      padding:`${S[4]}px ${MG}px`, borderTop:`1px solid ${T.n200}`,
      display:'flex', gap:S[5], fontSize:11, letterSpacing:'.18em', textTransform:'uppercase',
    }}>
      <span>SEARCH</span><span>ACCOUNT</span>
    </div>
  </div>
);

/* ── Sticky bottom CTA bar ──────────────────────── */
const StickyATC = ({ label = 'Add to bag · €620,00' }) => (
  <div style={{
    position:'sticky', bottom:0, left:0, right:0,
    background: T.bone, borderTop:`1px solid ${T.ink}`,
    padding:`${S[3]}px ${MG}px`,
    display:'flex', gap:S[3], alignItems:'center',
    paddingBottom:`calc(${S[3]}px + env(safe-area-inset-bottom, 0px))`,
  }}>
    <div style={{ flex:1, minWidth:0 }}>
      <div style={{ fontWeight:700, fontSize:14, letterSpacing:'-0.01em', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>The Loop Bag</div>
      <div className="mono" style={{ fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', color:T.n500 }}>CHROME · M</div>
    </div>
    <button style={{
      height:48, padding:`0 ${S[5]}px`,
      background:T.ink, color:T.bone, border:`1px solid ${T.ink}`,
      fontWeight:700, fontSize:14, letterSpacing:'.02em', flexShrink:0, cursor:'pointer',
    }}>{label}</button>
  </div>
);

Object.assign(window, {
  BP, MG, MOBILE_W, PhoneFrame, StatusBar, MAnn, MobileNav, MobileDrawerMenu, StickyATC,
});