// app.jsx — static scrollable SafePass wireframe board
// No pan/zoom — screens in document flow, wrap at 3 per row on desktop,
// horizontal scroll on mobile.

const {
  OnbWelcome, OnbProfile, OnbLens, OnbDest, OnbReady,
  HomeFeed, HomeMapFirst, SearchFilter,
  MapFull, MapSplit, RegionDetail, AlertsFeed,
  DestDetail, Infrastructure,
  FamilyMode, AccessibilityMode,
  ReportsRead, ReportsSubmit,
  SavedCompare, ShareReport, ProfileSettings,
} = window;

const BROCK_CREAM = '#FCFCFB';
const BROCK_DARK  = '#1E2326';

// ── CSS ──────────────────────────────────────────────────────────────────────
(function () {
  const s = document.createElement('style');
  s.id = 'sp-board-styles';
  s.textContent = `
    html, body {
      margin: 0;
      padding: 0;
      background: ${BROCK_CREAM};
    }
    * { box-sizing: border-box; }

    .sp-board {
      padding: 56px 0 100px;
      font-family: 'Archivo', system-ui, sans-serif;
    }

    .sp-legend {
      padding: 0 56px;
      margin: 0 auto 56px;
      max-width: 1280px;
    }

    .sp-section {
      padding: 0 56px;
      margin: 0 auto 72px;
      max-width: 1280px;
    }
    .sp-section-head {
      display: flex;
      align-items: center;
      gap: 20px;
      padding-bottom: 18px;
      margin-bottom: 28px;
      border-bottom: 2px solid rgba(0,0,0,0.09);
    }
    .sp-section-num {
      font-family: 'Archivo', system-ui, sans-serif;
      font-weight: 800;
      font-size: 20px;
      color: #ffffff;
      background: ${BROCK_DARK};
      width: 44px;
      height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      border-radius: 4px;
    }
    .sp-section-title {
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.3px;
      color: ${BROCK_DARK};
      margin: 0;
    }
    .sp-section-sub {
      font-size: 14px;
      color: rgba(0,0,0,0.40);
      margin: 0 0 0 auto;
      max-width: 400px;
      text-align: right;
      line-height: 1.45;
    }
    @media (max-width: 768px) {
      .sp-section-head { flex-wrap: wrap; gap: 12px; }
      .sp-section-sub { margin-left: 0; text-align: left; max-width: none; }
    }

    /* desktop: wrap at max 3 per row — constrained by .sp-section max-width */
    .sp-screens {
      display: flex;
      flex-wrap: wrap;
      gap: 36px;
      justify-content: center;
    }

    /* mobile: edge-to-edge padding, single horizontal-scroll row, no wrap */
    @media (max-width: 768px) {
      .sp-legend  { padding: 0 20px; max-width: none; margin-left: 0; margin-right: 0; }
      .sp-section { padding: 0 20px; max-width: none; margin-left: 0; margin-right: 0; }
      .sp-screens {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        gap: 20px;
        padding-bottom: 16px;
      }
    }
  `;
  document.head.appendChild(s);
})();

// ── Section data ─────────────────────────────────────────────────────────────
const SECTIONS = [
  {
    num:   '01',
    title: 'Onboarding & Setup',
    sub:   'Priya, first-timer — build confidence, set the lens',
    screens: [
      { label: '01 · Welcome',      Comp: OnbWelcome },
      { label: '02 · Who are you',  Comp: OnbProfile },
      { label: '03 · Safety lens',  Comp: OnbLens    },
      { label: '04 · Destinations', Comp: OnbDest    },
      { label: "05 · You're set",   Comp: OnbReady   },
    ],
  },
  {
    num:   '02',
    title: 'Home & Discovery',
    sub:   'Marcus, power user — two dashboard directions + search',
    screens: [
      { label: 'Home · A — Feed',      Comp: HomeFeed     },
      { label: 'Home · B — Map-first', Comp: HomeMapFirst },
      { label: 'Explore & filter',     Comp: SearchFilter },
    ],
  },
  {
    num:   '03',
    title: 'Heat Map & Alerts',
    sub:   'Marcus — socio-political intelligence at a glance',
    screens: [
      { label: 'Map · A — Full-bleed',     Comp: MapFull      },
      { label: 'Map · B — Split + ranked', Comp: MapSplit     },
      { label: 'Region drill-in',          Comp: RegionDetail },
      { label: 'Civil-unrest alerts',      Comp: AlertsFeed   },
    ],
  },
  {
    num:   '04',
    title: 'Destination Deep-Dive',
    sub:   'The trust contract — score + provenance + infrastructure',
    screens: [
      { label: 'Destination detail', Comp: DestDetail    },
      { label: 'Infrastructure',     Comp: Infrastructure },
    ],
  },
  {
    num:   '05',
    title: 'Inclusive Filter Modes',
    sub:   'Inclusive by default — the Okafors & Taryn',
    screens: [
      { label: 'Family mode',        Comp: FamilyMode        },
      { label: 'Accessibility mode', Comp: AccessibilityMode },
    ],
  },
  {
    num:   '06',
    title: 'Community Ground Truth',
    sub:   'Ground-truth-first — vetted nomad reports',
    screens: [
      { label: 'Reports · read',   Comp: ReportsRead   },
      { label: 'Reports · submit', Comp: ReportsSubmit },
    ],
  },
  {
    num:   '07',
    title: 'Save, Compare & Share',
    sub:   'Decide, then take it off-platform',
    screens: [
      { label: 'Saved · compare',  Comp: SavedCompare },
      { label: 'Shareable report', Comp: ShareReport  },
    ],
  },
  {
    num:   '08',
    title: 'Profile & Settings',
    sub:   'The lens lives here, forever editable',
    screens: [
      { label: 'Profile & settings', Comp: ProfileSettings },
    ],
  },
];

// ── Board ─────────────────────────────────────────────────────────────────────
function Board() {
  // Report rendered document height to parent frame so WireframeEmbed
  // can resize the iframe to full content height.
  React.useEffect(() => {
    const report = () => {
      const h = document.documentElement.scrollHeight || document.body.scrollHeight;
      if (h > 0) window.parent.postMessage({ type: '__board_height', height: h }, '*');
    };
    report();
    const t1 = setTimeout(report, 600);   // fonts loading
    const t2 = setTimeout(report, 2200);  // slow connections
    return () => { clearTimeout(t1); clearTimeout(t2); };
  }, []);

  return (
    <div className="sp-board">

      {/* Legend header */}
      <div className="sp-legend">
        <div style={{ fontFamily: "'Spline Sans Mono', monospace", fontSize: 10,
          letterSpacing: 1.5, color: 'rgba(0,0,0,0.32)', textTransform: 'uppercase',
          marginBottom: 8 }}>
          SafePass · UX Case Study
        </div>
        <div style={{ fontSize: 30, fontWeight: 800, letterSpacing: -0.7,
          color: BROCK_DARK, marginBottom: 10 }}>
          Lo-fi wireframes
        </div>
        <div style={{ fontSize: 13, color: 'rgba(0,0,0,0.48)', lineHeight: 1.55,
          maxWidth: 560, marginBottom: 18 }}>
          8 flows · 20 screens. Structure-only, grayscale — risk encoded by hatch
          density, every data point carries a visible source tag.
        </div>
        <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', alignItems: 'center' }}>
          {['news', 'nomad', 'both'].map((k) => (
            <window.WSource key={k} kind={k} />
          ))}
        </div>
      </div>

      {/* Sections */}
      {SECTIONS.map((sec) => (
        <div key={sec.title} className="sp-section">
          <div className="sp-section-head">
            <div className="sp-section-num">{sec.num}</div>
            <p className="sp-section-title">{sec.title}</p>
            <p className="sp-section-sub">{sec.sub}</p>
          </div>
          <div className="sp-screens">
            {sec.screens.map(({ label, Comp }) => (
              <Comp key={label} />
            ))}
          </div>
        </div>
      ))}

    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<Board />);