// deck-mocks.jsx — presentation helpers for the Vision Deck
// ScaleBox (fit any fixed-size node into its parent), WebFrame (browser chrome
// around a website page), Tabs, and FeatureCarousel (the tabbed screen showcase).
(function () {
  const R = React, h = R.createElement;
  const { useRef, useState, useLayoutEffect } = R;
  const { C } = window.PWKit;

  /* ---------- ScaleBox: scale a fixed w×h child to fit its parent box ---------- */
  function ScaleBox({ w, h: ht, children, max = 1 }) {
    const ref = useRef(null);
    const [s, setS] = useState(0.2);
    useLayoutEffect(() => {
      const el = ref.current; if (!el) return;
      const parent = el.parentElement; if (!parent) return;
      const measure = () => {
        const pw = parent.clientWidth, ph = parent.clientHeight;
        let sc = Math.min(pw / w, ph / ht);
        if (!isFinite(sc) || sc <= 0) sc = pw / w;
        setS(Math.min(sc, max));
      };
      measure();
      const ro = new ResizeObserver(measure);
      ro.observe(parent);
      return () => ro.disconnect();
    }, [w, ht, max]);
    return h('div', { ref, style: { width: w * s, height: ht * s, flexShrink: 0 } },
      h('div', { style: { width: w, height: ht, transform: `scale(${s})`, transformOrigin: 'top left' } }, children));
  }

  /* ---------- WebFrame: browser chrome wrapping a website page ---------- */
  function WebFrame({ url = 'primeways.co.uk', vw = 1280, vh = 824, children, scroll = false }) {
    const dot = (c) => h('span', { style: { width: 11, height: 11, borderRadius: 11, background: c } });
    return h('div', { style: { width: vw, borderRadius: 12, overflow: 'hidden', background: '#fff', boxShadow: '0 0 0 1px rgba(0,0,0,0.12), 0 30px 70px rgba(10,16,40,0.30)' } },
      h('div', { style: { height: 40, background: C.ink900, display: 'flex', alignItems: 'center', padding: '0 16px', gap: 8 } },
        dot('#ff5f57'), dot('#febc2e'), dot('#28c840'),
        h('div', { style: { flex: 1, margin: '0 16px', maxWidth: 460, height: 22, borderRadius: 6, background: 'rgba(255,255,255,0.1)', display: 'flex', alignItems: 'center', padding: '0 12px', fontFamily: C.fontB, fontSize: 12, color: 'rgba(255,255,255,0.55)' } },
          h('span', { style: { width: 11, height: 11, borderRadius: 11, border: '1.5px solid rgba(255,255,255,0.4)', marginRight: 8 } }), url)),
      h('div', { style: { height: vh, overflow: scroll ? 'auto' : 'hidden', background: '#fff' } }, children));
  }

  /* ---------- Tabs ---------- */
  function Tabs({ items, active, onPick, onDark }) {
    return h('div', { style: { display: 'flex', flexWrap: 'wrap', gap: 8 } },
      items.map((label, i) => {
        const on = i === active;
        return h('button', {
          key: i, onClick: () => onPick(i),
          style: {
            fontFamily: C.fontH, fontWeight: 700, fontSize: 12, letterSpacing: '0.04em', textTransform: 'uppercase',
            padding: '8px 13px', borderRadius: 7, cursor: 'pointer', transition: 'all .18s ease',
            border: on ? `2px solid ${C.accent}` : `2px solid ${onDark ? 'rgba(255,255,255,0.22)' : C.ink200}`,
            background: on ? C.accent : 'transparent',
            color: on ? C.ink900 : (onDark ? 'rgba(255,255,255,0.78)' : C.ink600),
          },
        }, label);
      }));
  }

  /* ---------- FeatureCarousel: text column + tabbed live-screen showcase ----------
     screens: [{ label, w, h, el }]  — el is a fully-built fixed-size node
     align: 'left' (media right) or 'right' (media left)                       */
  function FeatureCarousel({ eyebrow, title, lead, bullets, benefit, screens, onDark, flip, mediaBg }) {
    const [i, setI] = useState(0);
    const sc = screens[Math.min(i, screens.length - 1)];
    const ckColor = onDark ? C.accent : C.blue;
    const text = h('div', { key: 'text', className: 'col-text', style: { display: 'flex', flexDirection: 'column' } },
      h('span', { className: 'eyebrow' }, eyebrow),
      h('h2', { className: 'head', style: { margin: '16px 0 0' } }, title),
      lead && h('p', { className: 'lead', style: { marginTop: 16 } }, lead),
      bullets && h('ul', { className: 'flist' }, bullets.map((b, k) =>
        h('li', { key: k },
          h('span', { className: 'ck' }, h('svg', { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 3, strokeLinecap: 'round', strokeLinejoin: 'round' }, h('path', { d: 'M20 6 9 17l-5-5' }))),
          h('span', null, h('b', null, b[0] + ' '), b[1])))),
      benefit && h('div', { className: 'benefit-line' }, benefit),
      h('div', { style: { marginTop: 26 } },
        h('div', { style: { fontFamily: C.fontH, fontWeight: 700, fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: onDark ? 'rgba(255,255,255,0.5)' : C.ink400, marginBottom: 10 } }, `Explore the screens · ${screens.length}`),
        h(Tabs, { items: screens.map((s) => s.label), active: i, onPick: setI, onDark })));

    const media = h('div', { key: 'media', className: 'col-media', style: { position: 'relative', background: mediaBg } },
      h('div', { key: i, className: 'screen-fade', style: { position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' } },
        h(ScaleBox, { w: sc.w, h: sc.h, max: 1 }, sc.el)));

    return h('div', { className: 'feature carousel' + (flip ? ' flip' : '') }, [text, media]);
  }

  window.DECKMOCKS = { ScaleBox, WebFrame, Tabs, FeatureCarousel };
})();