// shell.jsx — shared chrome for the multi-page site.
const { useState: useSS, useEffect: useSE, useRef: useSR } = React;
const { Halftone, TweaksPanel, TweakSection, TweakRadio, TweakSelect, TweakToggle } = window;

const TWEAK_STORE = 'sajjad_tweaks_v2';
const SITE_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "cosmos",
  "workLayout": "grid",
  "typeVoice": "mix",
  "accentMode": "multi",
  "cursor": true,
  "waveMotion": true,
  "grain": true
} /*EDITMODE-END*/;

function loadTweaks(base) {
  try {const s = JSON.parse(localStorage.getItem(TWEAK_STORE));return s ? { ...base, ...s } : base;}
  catch (e) {return base;}
}

function useSiteSetup(t) {
  window.__accentMode = t.accentMode;
  useSE(() => {
    const r = document.documentElement;
    r.setAttribute('data-voice', t.typeVoice);
    r.setAttribute('data-grain', t.grain ? 'on' : 'off');
    r.style.setProperty('--accent', t.accentMode !== 'multi' ? window.ACCENTS[t.accentMode] : window.ACCENTS.red);
    try {localStorage.setItem(TWEAK_STORE, JSON.stringify(t));} catch (e) {}
  }, [t.typeVoice, t.grain, t.accentMode, t.heroLayout, t.workLayout, t.cursor, t.waveMotion]);
}

function useReveal() {
  useSE(() => {
    const els = document.querySelectorAll('[data-reveal], .sec, .work-card, .work-row, .gallery-item, .review, .hero-thumb, .hf-grid > *');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {if (e.isIntersecting) {e.target.classList.add('in');io.unobserve(e.target);}});
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    els.forEach((el, i) => {el.style.setProperty('--ri', i % 6);io.observe(el);});
    return () => io.disconnect();
  });
}

function useClock() {
  useSE(() => {
    const tick = () => {
      document.querySelectorAll('.js-clock').forEach((el) => {
        el.textContent = new Date().toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
      });
    };
    tick();
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  });
}

const PAGES = [['Work', 'work.html', 'work'], ['About', 'about.html', 'about'], ['Contact', 'contact.html', 'contact']];
const MENU = [['WORKS', 'work.html', 'work', '01'], ['ABOUT', 'about.html', 'about', '02'], ['CONTACT', 'contact.html', 'contact', '03']];

function Nav({ current }) {
  const [scrolled, setScrolled] = useSS(false);
  const [menuOpen, setMenuOpen] = useSS(false);
  useSE(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  useSE(() => {
    const onKey = (e) => {if (e.key === 'Escape') setMenuOpen(false);};
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    window.addEventListener('keydown', onKey);
    return () => {window.removeEventListener('keydown', onKey);document.body.style.overflow = '';};
  }, [menuOpen]);
  return (
    <React.Fragment>
    <nav className={`nav ${scrolled ? 'nav-solid' : ''}`}>
      <a href="index.html" className="nav-mark" data-cursor="link">SAJJAD<span className="nav-mark-dot">®</span></a>
      <div className="nav-right">
        <a href="contact.html" className="nav-cta" data-magnetic data-cursor="link"><span className="avail-dot" style={{ backgroundColor: "rgb(99, 247, 115)" }} />Available 2026</a>
        <button type="button" className={`nav-burger ${menuOpen ? 'is-open' : ''}`} data-magnetic data-cursor="link"
          aria-label="Menu" aria-expanded={menuOpen} onClick={() => setMenuOpen((v) => !v)}>
          <span /><span /><span />
        </button>
      </div>
    </nav>

    <div className={`menu-overlay ${menuOpen ? 'is-open' : ''}`} role="dialog" aria-modal="true" aria-hidden={!menuOpen}>
      <div className="menu-top">
        <span className="mono dim">Menu</span>
        <button type="button" className="menu-close" data-cursor="link" aria-label="Close menu" onClick={() => setMenuOpen(false)} style={{ color: "rgb(255, 255, 255)" }}>Close ✕</button>
      </div>
      <nav className="menu-links">
        {MENU.map(([label, href, id, num]) =>
          <a key={href} href={href} className={`menu-link ${current === id ? 'active' : ''}`} data-cursor="view">
            <span className="mono menu-num">{num}</span>
            <span className="menu-label impact" style={{ fontWeight: "500" }}>{label}</span>
            <i className="menu-arr" style={{ color: "rgb(255, 255, 255)" }}>↗</i>
          </a>
          )}
      </nav>
      <div className="menu-foot">
        <span className="mono dim">Local <span className="js-clock">—</span></span>
      </div>
    </div>
    </React.Fragment>);

}

function SiteTweaks({ page, t, setTweak }) {
  return (
    <TweaksPanel>
      {page === 'home' && <TweakSection label="Hero layout" />}
      {page === 'home' && <TweakSelect label="Hero" value={t.heroLayout} options={['cosmos', 'grid', 'giant', 'featured']} onChange={(v) => setTweak('heroLayout', v)} />}
      {page === 'work' && <TweakSection label="Work layout" />}
      {page === 'work' && <TweakRadio label="Work" value={t.workLayout} options={['grid', 'list', 'gallery']} onChange={(v) => setTweak('workLayout', v)} />}
      <TweakSection label="Type" />
      <TweakRadio label="Type voice" value={t.typeVoice} options={['mix', 'sans', 'serif']} onChange={(v) => setTweak('typeVoice', v)} />
      <TweakSection label="Motion" />
      <TweakToggle label="Magnetic cursor" value={t.cursor} onChange={(v) => setTweak('cursor', v)} />
      <TweakToggle label="Halftone wave" value={t.waveMotion} onChange={(v) => setTweak('waveMotion', v)} />
      <TweakToggle label="Film grain" value={t.grain} onChange={(v) => setTweak('grain', v)} />
    </TweaksPanel>);

}

function Loader({ onDone }) {
  const [pct, setPct] = useSS(0);
  const [out, setOut] = useSS(false);
  useSE(() => {
    let v = 0;
    const id = setInterval(() => {
      v += Math.random() * 11 + 5;
      if (v >= 100) {v = 100;clearInterval(id);setTimeout(() => {setOut(true);setTimeout(onDone, 950);}, 380);}
      setPct(Math.floor(v));
    }, 130);
    return () => clearInterval(id);
  }, []);
  return (
    <div className={`loader ${out ? 'loader-out' : ''}`}>
      <div className="loader-wave"><Halftone motion={true} color="#8f8f8f" gap={16} intensity={0.75} /></div>
      <div className="loader-top"><span className="mono">Muhammed Sajjad®</span><span className="mono dim">Sr. Creative Designer</span></div>
      <div className="loader-center"><span className="loader-word impact">SAJJAD</span></div>
      <div className="loader-bottom">
        <div className="loader-bar"><span style={{ width: pct + '%' }} /></div>
        <span className="loader-pct impact">{String(pct).padStart(3, '0')}</span>
      </div>
    </div>);

}

// Halftone wave band (shared) — CMYK process-colour separation, print-production motif.
function WaveBand({ motion }) {
  const cmyk = React.useMemo(() => [
  { color: '#11c2e6', dx: -3.5, dy: -2 }, // cyan
  { color: '#ff2d8b', dx: 3.5, dy: 2 }, // magenta
  { color: '#ffd200', dx: 0, dy: 3.5 } // yellow
  ], []);
  return (
    <section className="wave-band gd-band">
      <div className="gd-grid" aria-hidden="true" />
      <div className="wave-band-canvas"><Halftone motion={motion} gap={16} intensity={1} channels={cmyk} /></div>
      <div className="gd-marks" aria-hidden="true">
        <span className="crop tl" /><span className="crop tr" /><span className="crop bl" /><span className="crop br" />
        <span className="reg reg-1" /><span className="reg reg-2" />
      </div>
      <div className="gd-cmyk-bar" aria-hidden="true">
        <span style={{ background: '#11c2e6' }} /><span style={{ background: '#ff2d8b' }} />
        <span style={{ background: '#ffd200' }} /><span style={{ background: '#0a0a0b' }} />
      </div>
      <div className="wave-band-overlay">
        <span className="mono dim">Process — Four-Colour Separation</span>
        <h2 className="wave-band-head"><span className="impact">From noise,</span> <span className="serif-ital">order.</span></h2>
        <p className="lede">Every brief arrives as static. The work is the act of resolving it into something legible, deliberate and durable.</p>
      </div>
    </section>);

}

function SlimFooter({ current }) {
  const stars = window.__footStars || (window.__footStars = Array.from({ length: 54 }, () => ({
    x: Math.random() * 100, y: Math.random() * 88,
    s: Math.random() * 1.5 + 0.5, o: Math.random() * 0.5 + 0.2,
    d: Math.random() * 4 + 2, delay: Math.random() * 4
  })));
  const C = window.CONTACT;
  return (
    <footer className="cosmic-footer" id="contact">
      <div className="cf-stars" aria-hidden="true">
        {stars.map((st, i) =>
        <span key={i} className="cosmos-star" style={{
          left: st.x + '%', top: st.y + '%', width: st.s + 'px', height: st.s + 'px',
          opacity: st.o, animationDuration: st.d + 's', animationDelay: st.delay + 's'
        }} />
        )}
      </div>
      <div className="cf-horizon" aria-hidden="true">
        <div className="cf-horizon-glow" />
        <div className="cf-horizon-arc" />
      </div>

      <div className="cf-content">
        <h2 className="cf-head"><span className="impact">Let's</span> <span className="serif-ital">collaborate?</span></h2>
        <div className="cf-actions">
          <a href={C.resume} target="_blank" rel="noopener" className="btn-cosmos ghost" data-magnetic data-cursor="link" data-no-transition>
            <span>Resume</span><i className="arr-circle">↗</i>
          </a>
          <a href="contact.html" className="btn-cosmos solid" data-magnetic data-cursor="link">
            <span>Get In Touch</span>
          </a>
        </div>
      </div>

      <div className="cf-base">
        <span className="cf-craft mono">Crafted by a designer, with love &amp; patience <i className="cf-spark">✦</i></span>
        <div className="cf-socials">
          <a href={C.linkedin} target="_blank" rel="noopener" data-no-transition data-cursor="link" aria-label="LinkedIn" className="cf-soc">
            <svg viewBox="0 0 24 24" width="17" height="17" fill="currentColor"><path d="M4.98 3.5A2.5 2.5 0 1 0 5 8.5a2.5 2.5 0 0 0-.02-5zM3 9h4v12H3V9zm6 0h3.8v1.7h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V21H17.6v-5.4c0-1.3 0-2.95-1.8-2.95-1.8 0-2.08 1.4-2.08 2.85V21H9V9z" /></svg>
          </a>
          <a href={C.site} target="_blank" rel="noopener" data-no-transition data-cursor="link" aria-label="Behance" className="cf-soc">
            <svg viewBox="0 0 24 24" width="17" height="17" fill="currentColor"><path d="M8.4 8.6c.66 0 1.2.1 1.68.28.46.18.84.42 1.14.74.3.3.5.66.64 1.08.13.42.2.88.2 1.38 0 .58-.13 1.08-.4 1.48-.26.4-.66.74-1.18 1 .72.2 1.26.56 1.62 1.06.36.5.54 1.12.54 1.84 0 .58-.12 1.08-.34 1.5-.22.42-.54.78-.92 1.04-.4.28-.84.48-1.34.6-.5.14-1 .2-1.52.2H2V8.6h6.4zm-.36 4.84c.42 0 .78-.1 1.06-.3.28-.2.4-.54.4-1 0-.26-.04-.48-.14-.64a1 1 0 0 0-.38-.4 1.6 1.6 0 0 0-.54-.2 3.4 3.4 0 0 0-.64-.06H4.74v2.6h3.3zm.18 5.08c.24 0 .46-.02.66-.08.2-.04.38-.14.52-.26.16-.12.28-.28.36-.48.1-.2.14-.44.14-.74 0-.58-.16-1-.48-1.24-.32-.26-.76-.38-1.3-.38H4.74v3.18h3.66zM15.64 18.3c.36.36.9.54 1.6.54.5 0 .94-.12 1.3-.38.36-.24.58-.5.66-.78h2.24c-.36 1.12-.92 1.92-1.66 2.4-.74.48-1.64.72-2.7.72-.74 0-1.4-.12-2-.36a4.2 4.2 0 0 1-1.5-1 4.4 4.4 0 0 1-.94-1.56 5.8 5.8 0 0 1-.34-2c0-.72.12-1.38.36-2 .24-.62.56-1.14 1-1.58.42-.44.92-.78 1.5-1.04.58-.24 1.22-.36 1.92-.36.78 0 1.46.16 2.04.46.58.3 1.04.7 1.42 1.22.36.5.62 1.08.78 1.74.16.64.22 1.32.18 2.04h-6.42c0 .74.26 1.36.62 1.72zM18.4 13.4c-.3-.32-.8-.5-1.42-.5-.4 0-.74.08-1 .22-.26.14-.48.3-.64.5-.16.2-.26.42-.32.64-.06.22-.1.42-.1.6h3.96c-.06-.62-.24-1.06-.48-1.46zM15.1 9.34h4.94v1.2H15.1v-1.2z" /></svg>
          </a>
          <a href={`mailto:${C.email}`} data-cursor="link" aria-label="Email" className="cf-soc">
            <svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" strokeWidth="1.8"><rect x="3" y="5" width="18" height="14" rx="2" /><path d="m3.5 7 8.5 6 8.5-6" /></svg>
          </a>
        </div>
      </div>
    </footer>);

}

// Page transitions disabled — instant navigation, no loader/curtain (butter-smooth).
function initCurtain() {}

Object.assign(window, {
  loadTweaks, SITE_TWEAK_DEFAULTS, useSiteSetup, useReveal, useClock,
  Nav, SiteTweaks, Loader, WaveBand, SlimFooter, initCurtain
});