/* global React */
const { useEffect: useEffMM, useState: useStateMM } = React;

function useIsMobile(bp = 760) {
  const [m, setM] = useStateMM(typeof window !== 'undefined' ? window.innerWidth <= bp : false);
  useEffMM(() => {
    const onR = () => setM(window.innerWidth <= bp);
    window.addEventListener('resize', onR);
    return () => window.removeEventListener('resize', onR);
  }, [bp]);
  return m;
}

function MobileMenu({ open, onClose }) {
  const t = (window.useT && window.useT()) || ((k) => k);
  useEffMM(() => {
    if (!open) return;
    document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  const HREFS = ['/site/homepage.html', '/site/studios.html', '/site/about.html', '/site/journal.html', '#contact'];
  const items = (t('menu.items') || []).map((it, i) => ({ ...it, href: HREFS[i] }));

  return (
    <React.Fragment>
      <div className={"mob-menu-backdrop" + (open ? " open" : "")} onClick={onClose} />
      <div className={"mob-menu-panel" + (open ? " open" : "")}>
        {/* Card 1 — top bar */}
        <div className="mob-menu-card" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 18px' }}>
          <window.ASpaceLogo on="dark" />
          <button onClick={onClose} aria-label={t('header.menuClose')} style={{
            all: 'unset', cursor: 'pointer',
            width: 40, height: 40, borderRadius: '50%',
            background: '#0A0A0B', color: '#fff',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
              <path d="M6 6l12 12M18 6L6 18"/>
            </svg>
          </button>
        </div>

        {/* Card 2 — nav */}
        <div className="mob-menu-card">
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
            <div className="aspace-eyebrow">{t('menu.navEyebrow')}</div>
            {window.LangSwitcher && <window.LangSwitcher variant="menu" />}
          </div>
          <ul className="mob-menu-nav-list">
            {items.map(item => (
              <li key={item.label}>
                <a href={item.href} onClick={onClose}>
                  <span style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
                    <span className="num">{item.n}</span>
                    <span>{item.label}</span>
                  </span>
                  <span className="arrow">
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M7 17L17 7M9 7h8v8"/></svg>
                  </span>
                </a>
              </li>
            ))}
          </ul>
        </div>

        {/* Card 3 — newsletter (dark) */}
        <div className="mob-menu-card dark">
          <div className="aspace-eyebrow" style={{ color: 'rgba(255,255,255,0.55)', marginBottom: 8 }}>{t('menu.newsletter.eyebrow')}</div>
          <h3 style={{ margin: 0, fontSize: 22, fontWeight: 500, lineHeight: 1.15, letterSpacing: '-0.01em', marginBottom: 14 }}>
            {t('menu.newsletter.headline')}
          </h3>
          <form onSubmit={(e) => e.preventDefault()} style={{ display: 'flex', gap: 8 }}>
            <input type="email" placeholder={t('menu.newsletter.placeholder')}
              style={{
                flex: 1, padding: '12px 14px', borderRadius: 99,
                background: 'rgba(255,255,255,0.06)',
                border: '1px solid rgba(255,255,255,0.16)',
                color: '#fff', fontSize: 14, outline: 'none', fontFamily: 'inherit',
                minWidth: 0,
              }}
            />
            <button type="submit" className="aspace-pill on-dark solid" style={{ padding: '0 18px', flexShrink: 0 }}>
              {t('menu.newsletter.submit')}
            </button>
          </form>
        </div>

        {/* Card 4 — visit + CTA */}
        <div className="mob-menu-card">
          <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16 }}>
            <div>
              <div className="aspace-eyebrow" style={{ marginBottom: 6 }}>{t('menu.visit.eyebrow')}</div>
              <p style={{ margin: 0, fontSize: 14, color: '#0A0A0B', lineHeight: 1.45 }}>
                {t('menu.visit.addressLine1')}<br/>{t('menu.visit.addressCity')}
              </p>
            </div>
            <span style={{
              width: 8, height: 8, borderRadius: '50%',
              background: 'var(--aspace-blue)',
              boxShadow: '0 0 10px var(--aspace-blue)',
              flexShrink: 0, marginTop: 6,
            }} />
          </div>
          <a href="#contact" onClick={onClose} className="aspace-pill solid" style={{ width: '100%', justifyContent: 'center', marginTop: 18 }}>
            {t('menu.visit.cta')}
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </a>
          <div style={{
            display: 'flex', gap: 14, justifyContent: 'center',
            marginTop: 16, fontSize: 12, color: 'rgba(0,0,0,0.55)', letterSpacing: '0.06em',
          }}>
            <a href="#" style={{ color: 'inherit' }}>{t('menu.visit.instagram')}</a>
            <span style={{ opacity: 0.4 }}>·</span>
            <a href="mailto:hello@aspace.amsterdam" style={{ color: 'inherit' }}>{t('menu.visit.email')}</a>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}

window.MobileMenu = MobileMenu;
window.useIsMobile = useIsMobile;