// shell.jsx — presentation shell for the landing directions.
// Replaces the design-canvas grid with a two-level experience:
//   1. IndexPage — a branded "master page" listing the five directions as cards
//      with live, scaled-down previews.
//   2. SiteViewer — opens one direction as a full-bleed, real-scroll site, with
//      a floating toolbar to step between directions or return to the index.
// Routing rides the URL hash (#clean, #tactical, …) so refresh + browser
// back/forward work and the spot persists.

const DIRECTIONS = [
  { id: 'clean',    tag: 'A', name: 'Clean Authority',  desc: 'Minimal and generous — quiet confidence, sparing orange, lots of air.',     Comp: () => <LandingClean /> },
  { id: 'tactical', tag: 'B', name: 'Operational',       desc: 'High-contrast, condensed display type and mono telemetry. Field-ready.',     Comp: () => <LandingTactical /> },
  { id: 'editorial',tag: 'C', name: 'Editorial Warm',    desc: 'Magazine bands, big asymmetric type, photo-forward and warm.',               Comp: () => <LandingEditorial /> },
  { id: 'comicpro', tag: 'D', name: 'Refined Comic',     desc: '50s-comic DNA — halftone, bursts, a Bangers headline — professionalized.',   Comp: () => <LandingComicPro /> },
  { id: 'spine',    tag: 'E', name: 'The Through-Line',  desc: 'One orange line threads the page; every section sits as a node on it.',      Comp: () => <LandingSpine /> },
];

const ACCENT = '#EC5A14';
const INK = '#1A1A1A';
const CREAM = '#FFF8F0';
const MONO = '"Spline Sans Mono", monospace';
const SANS = '"Archivo", sans-serif';

// ── Live, scaled-down preview of a full page (top crop) ────────────────────
function Thumb({ Comp, h = 320 }) {
  const [ref, w] = useElementWidth();
  const DESIGN = 1280;
  const scale = w > 0 ? w / DESIGN : 0;
  return (
    <div ref={ref} style={{ position: 'relative', width: '100%', height: h, overflow: 'hidden', background: '#fff' }}>
      <div style={{ position: 'absolute', top: 0, left: 0, width: DESIGN, transform: `scale(${scale})`,
        transformOrigin: 'top left', pointerEvents: 'none', opacity: scale ? 1 : 0 }}>
        <Comp />
      </div>
    </div>
  );
}

function DirectionCard({ d, onOpen }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div onClick={onOpen} role="button" tabIndex={0}
      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') onOpen(); }}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ background: '#fff', border: `1px solid ${hover ? ACCENT : 'rgba(26,26,26,0.14)'}`,
        borderRadius: 14, overflow: 'hidden', cursor: 'pointer', transition: 'transform .18s, box-shadow .18s, border-color .18s',
        transform: hover ? 'translateY(-4px)' : 'none',
        boxShadow: hover ? '0 22px 50px -26px rgba(26,26,26,0.5)' : '0 1px 0 rgba(26,26,26,0.04)' }}>
      <div style={{ position: 'relative', borderBottom: '1px solid rgba(26,26,26,0.1)' }}>
        <Thumb Comp={d.Comp} />
        <div style={{ position: 'absolute', inset: 0, background: hover ? 'transparent' : 'rgba(255,248,240,0.02)' }} />
        <div style={{ position: 'absolute', top: 12, left: 12, fontFamily: MONO, fontSize: 11, fontWeight: 600,
          letterSpacing: '0.14em', color: '#fff', background: INK, borderRadius: 6, padding: '5px 9px' }}>{d.tag}</div>
        <div style={{ position: 'absolute', right: 12, bottom: 12, fontFamily: MONO, fontSize: 10.5, letterSpacing: '0.12em',
          textTransform: 'uppercase', color: '#fff', background: ACCENT, borderRadius: 20, padding: '7px 13px',
          opacity: hover ? 1 : 0, transform: hover ? 'none' : 'translateY(6px)', transition: 'all .18s' }}>Open site →</div>
      </div>
      <div style={{ padding: '20px 22px 24px' }}>
        <div style={{ fontFamily: SANS, fontWeight: 800, fontSize: 22, letterSpacing: '-0.01em', color: INK }}>{d.name}</div>
        <div style={{ fontFamily: SANS, fontSize: 14.5, lineHeight: 1.5, color: 'rgba(26,26,26,0.58)', marginTop: 8, textWrap: 'pretty' }}>{d.desc}</div>
      </div>
    </div>
  );
}

function IndexPage({ onOpen }) {
  const vw = useVW();
  const m = vw < 760;
  return (
    <div style={{ minHeight: '100vh', background: CREAM, color: INK, fontFamily: SANS }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: m ? '0 20px' : '0 40px' }}>
        {/* top bar */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: m ? '22px 0 18px' : '30px 0 24px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 13 }}>
            <LogoImg h={m ? 32 : 40} />
            <Wordmark size={m ? 17 : 20} color={INK} sub="rgba(26,26,26,0.5)" />
          </div>
          <div style={{ fontFamily: MONO, fontSize: m ? 9.5 : 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(26,26,26,0.5)' }}>
            {m ? 'Directions' : 'Landing Directions · June 2026'}
          </div>
        </div>
        <hr style={{ height: 1, background: 'rgba(26,26,26,0.12)', border: 0, margin: 0 }} />

        {/* heading */}
        <header style={{ padding: m ? '40px 0 32px' : '70px 0 48px', maxWidth: 760 }}>
          <div style={{ fontFamily: MONO, fontSize: 12, letterSpacing: '0.26em', textTransform: 'uppercase', color: '#C21A0A' }}>Choose a direction</div>
          <h1 style={{ fontFamily: SANS, fontWeight: 900, fontSize: 'clamp(38px, 7vw, 68px)', lineHeight: 1.0, letterSpacing: '-0.03em', margin: '18px 0 0' }}>
            Five ways to launch<br />the <span style={{ color: ACCENT }}>same site.</span>
          </h1>
          <p style={{ fontFamily: SANS, fontSize: m ? 16 : 18, lineHeight: 1.6, color: 'rgba(26,26,26,0.6)', marginTop: 20, textWrap: 'pretty' }}>
            Same copy, same finalized mark — five distinct moods. Open any one to walk the full responsive site; each has a light/dark toggle in its nav.
          </p>
        </header>

        {/* cards */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: m ? 18 : 26, paddingBottom: 56 }}>
          {DIRECTIONS.map((d) => <DirectionCard key={d.id} d={d} onOpen={() => onOpen(d.id)} />)}
        </div>

        {/* footer */}
        <hr style={{ height: 1, background: 'rgba(26,26,26,0.12)', border: 0, margin: 0 }} />
        <footer style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap',
          padding: m ? '24px 0 40px' : '30px 0 56px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <LogoImgFlat h={28} />
            <Wordmark size={16} color={INK} sub="rgba(26,26,26,0.5)" />
          </div>
          <div style={{ fontFamily: MONO, fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(26,26,26,0.45)' }}>© 2026 Thruline Solutions</div>
        </footer>
      </div>
    </div>
  );
}

// ── Floating viewer toolbar (prev · index · next) ──────────────────────────
function ViewerBar({ d, idx, onIndex, onPrev, onNext }) {
  const btn = { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, border: 'none', cursor: 'pointer',
    background: 'transparent', color: CREAM, fontFamily: MONO, fontSize: 12, letterSpacing: '0.08em', borderRadius: 999,
    padding: '10px 12px', transition: 'background .15s' };
  const arrow = { ...btn, width: 40, height: 40, padding: 0, fontSize: 17 };
  return (
    <div style={{ position: 'fixed', bottom: 18, left: '50%', transform: 'translateX(-50%)', zIndex: 99999,
      display: 'flex', alignItems: 'center', gap: 2, background: 'rgba(26,26,26,0.92)', backdropFilter: 'blur(8px)',
      border: '1px solid rgba(255,255,255,0.1)', borderRadius: 999, padding: 5,
      boxShadow: '0 10px 36px rgba(0,0,0,0.4)' }}>
      <button title="Previous direction" style={arrow} onClick={onPrev}
        onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(255,255,255,0.1)'}
        onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>‹</button>
      <button onClick={onIndex} style={{ ...btn, padding: '10px 16px', whiteSpace: 'nowrap' }}
        onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(255,255,255,0.1)'}
        onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
        <span style={{ display: 'inline-block', width: 13, height: 13, position: 'relative' }}>
          <span style={{ position: 'absolute', inset: 0, display: 'grid', gridTemplateColumns: '1fr 1fr', gridTemplateRows: '1fr 1fr', gap: 2 }}>
            {[0,1,2,3].map((i) => <span key={i} style={{ background: ACCENT, borderRadius: 1 }} />)}
          </span>
        </span>
        All directions
      </button>
      <span style={{ fontFamily: MONO, fontSize: 11, color: 'rgba(255,248,240,0.5)', padding: '0 6px', whiteSpace: 'nowrap' }}>{d.tag} · {idx + 1}/{DIRECTIONS.length}</span>
      <button title="Next direction" style={arrow} onClick={onNext}
        onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(255,255,255,0.1)'}
        onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>›</button>
    </div>
  );
}

function SiteViewer({ id, onIndex, onGoto }) {
  const idx = Math.max(0, DIRECTIONS.findIndex((x) => x.id === id));
  const d = DIRECTIONS[idx];
  React.useEffect(() => { window.scrollTo(0, 0); }, [id]);
  const go = (n) => onGoto(DIRECTIONS[(n + DIRECTIONS.length) % DIRECTIONS.length].id);
  return (
    <div style={{ minHeight: '100vh', background: CREAM }}>
      <d.Comp />
      <ViewerBar d={d} idx={idx} onIndex={onIndex} onPrev={() => go(idx - 1)} onNext={() => go(idx + 1)} />
    </div>
  );
}

// ── Root: hash routing ─────────────────────────────────────────────────────
function readHash() {
  const h = (location.hash || '').replace(/^#/, '');
  return DIRECTIONS.some((d) => d.id === h) ? h : null;
}

function Shell() {
  const [route, setRoute] = React.useState(readHash);
  React.useEffect(() => {
    const on = () => setRoute(readHash());
    window.addEventListener('hashchange', on);
    return () => window.removeEventListener('hashchange', on);
  }, []);
  const open = (id) => { location.hash = id; };
  const index = () => { location.hash = ''; };
  if (!route) return <IndexPage onOpen={open} />;
  return <SiteViewer id={route} onIndex={index} onGoto={open} />;
}

Object.assign(window, { Shell, DIRECTIONS });