// Shared atomic components: header, theme toggle, icons.
const { useState, useEffect, useRef, useCallback } = React;

// --- Icons (Lucide-flavoured, 1.5px stroke, currentColor) ----------------
const Icon = ({ name, size = 14 }) => {
  const common = {
    width: size, height: size,
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    strokeWidth: 1.5,
    strokeLinecap: "round",
    strokeLinejoin: "round"
  };
  switch (name) {
    case 'sun':
      return <svg {...common}><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>;
    case 'moon':
      return <svg {...common}><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>;
    case 'arrow-left':
      return <svg {...common}><path d="M19 12H5M12 19l-7-7 7-7"/></svg>;
    case 'arrow-right':
      return <svg {...common}><path d="M5 12h14M12 5l7 7-7 7"/></svg>;
    case 'x':
      return <svg {...common}><path d="M18 6 6 18M6 6l12 12"/></svg>;
    case 'play':
      return <svg {...common} fill="currentColor" stroke="none"><path d="M8 5v14l11-7L8 5z"/></svg>;
    case 'instagram':
      return <svg {...common}><rect x="3" y="3" width="18" height="18" rx="4"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.6" fill="currentColor"/></svg>;
    default: return null;
  }
};

// --- Theme toggle hook ----------------------------------------------------
function useTheme() {
  const [theme, setTheme] = useState(() => {
    const stored = localStorage.getItem('studios-theme');
    return stored || 'light';
  });
  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('studios-theme', theme);
  }, [theme]);
  const toggle = useCallback(() => setTheme(t => t === 'light' ? 'dark' : 'light'), []);
  return [theme, toggle];
}

// --- Wordmark / logo (sid tickle studios) --------------------------------
const Wordmark = () => (
  <a href="#/" className="wordmark" aria-label="sid tickle studios — home">
    <span>sid tickle</span>
    <span className="slash">/</span>
    <span className="studios">studios</span>
    <span className="caret"></span>
  </a>
);

// --- Site header ----------------------------------------------------------
const SiteHeader = ({ theme, toggleTheme, route }) => (
  <header className="site-header">
    <Wordmark />
    <nav className="header-nav">
      <a href="#/" className={!route || route.name === 'home' ? 'on' : ''}>work</a>
      <a href="#/gear" className={route && route.name === 'gear' ? 'on' : ''}>gear</a>
      <a href="https://sidtickle.com" target="_blank" rel="noopener">sidtickle.com</a>
      <a href="https://instagram.com/tick.ley" target="_blank" rel="noopener" aria-label="instagram @tick.ley">
        @tick.ley
      </a>
      <button
        className="theme-toggle"
        onClick={toggleTheme}
        aria-label={`switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
        title={theme === 'light' ? 'dark mode' : 'light mode'}
      >
        <Icon name={theme === 'light' ? 'moon' : 'sun'} size={14} />
      </button>
    </nav>
  </header>
);

const SiteFooter = () => (
  <footer className="site-footer">
    <span>© sid tickle, 2026</span>
    <span>
      <a href="mailto:sidtickle.studio@gmail.com">sidtickle.studio@gmail.com</a>
      &nbsp;·&nbsp;
      <a href="https://instagram.com/tick.ley" target="_blank" rel="noopener">@tick.ley</a>
    </span>
  </footer>
);

// --- Lightbox ------------------------------------------------------------
function Lightbox({ items, index, onClose, onPrev, onNext }) {
  const open = index != null;
  useEffect(() => {
    if (!open) return;
    const onKey = (e) => {
      if (e.key === 'Escape') onClose();
      if (e.key === 'ArrowLeft') onPrev();
      if (e.key === 'ArrowRight') onNext();
    };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [open, onClose, onPrev, onNext]);

  if (!open) return null;
  const item = items[index];
  return (
    <div className={`lightbox ${open ? 'open' : ''}`} role="dialog" aria-modal="true">
      <div className="lb-bar">
        <span>{String(index + 1).padStart(2, '0')} / {String(items.length).padStart(2, '0')}</span>
        <button onClick={onClose} aria-label="close"><Icon name="x" size={16} /></button>
      </div>
      <div className="lb-stage">
        <button className="lb-arrow prev" onClick={onPrev} aria-label="previous"><Icon name="arrow-left" size={16} /></button>
        {item.type === 'video' ? (
          <video src={item.src} poster={item.poster} controls autoPlay muted loop playsInline />
        ) : (
          <img src={item.src} alt={item.caption || ''} />
        )}
        <button className="lb-arrow next" onClick={onNext} aria-label="next"><Icon name="arrow-right" size={16} /></button>
      </div>
      <div className="lb-caption">{item.caption || ''}</div>
    </div>
  );
}

// Expose
Object.assign(window, { Icon, useTheme, Wordmark, SiteHeader, SiteFooter, Lightbox });