// landing-mockups.jsx — product mockup primitives used across the page
// Pure presentation, no state.

const { useEffect, useRef, useState } = React;
const useMockT = () => {
  const i18n = typeof window !== "undefined" && window.Wisbid && window.Wisbid.i18n || null;
  const [, force] = useState(0);
  useEffect(() => {
    if (!i18n) return;
    return i18n.subscribe(() => force((v) => v + 1));
  }, [i18n]);
  return (k, fb) => i18n ? i18n.t(k, fb) : fb;
};

/* ---------------------------------------------------------------------
   Icon — small inline SVG set (lucide-inspired, original strokes)
   --------------------------------------------------------------------- */
const Icon = ({ name, size = 18, strokeWidth = 1.7, ...rest }) => {
  const s = size;
  const sw = strokeWidth;
  const common = {
    width: s, height: s, viewBox: "0 0 24 24",
    fill: "none", stroke: "currentColor",
    strokeWidth: sw, strokeLinecap: "round", strokeLinejoin: "round",
    ...rest,
  };
  switch (name) {
    case "arrow-right":
      return <svg {...common}><path d="M5 12h14" /><path d="M13 6l6 6-6 6" /></svg>;
    case "arrow-up-right":
      return <svg {...common}><path d="M7 17 17 7" /><path d="M8 7h9v9" /></svg>;
    case "chevron-down":
      return <svg {...common}><path d="M6 9l6 6 6-6" /></svg>;
    case "check":
      return <svg {...common}><path d="M5 12l4 4 10-10" /></svg>;
    case "inbox":
      return <svg {...common}><path d="M3 12V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v7" /><path d="M3 12l3-3h12l3 3" /><path d="M3 12v6a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-6" /><path d="M8 12h2a2 2 0 0 0 4 0h2" /></svg>;
    case "sparkles":
      return <svg {...common}><path d="M12 4l1.6 4.4L18 10l-4.4 1.6L12 16l-1.6-4.4L6 10l4.4-1.6z" /><path d="M19 16l.7 1.7L21 18l-1.3.3L19 20l-.7-1.7L17 18l1.3-.3z" /></svg>;
    case "shield":
      return <svg {...common}><path d="M12 3l8 3v6c0 5-3.5 8.5-8 9-4.5-.5-8-4-8-9V6z" /><path d="m9 12 2 2 4-4" /></svg>;
    case "users":
      return <svg {...common}><circle cx="9" cy="8" r="4" /><path d="M3 20a6 6 0 0 1 12 0" /><path d="M16 4a4 4 0 0 1 0 8" /><path d="M21 20a6 6 0 0 0-4.5-5.8" /></svg>;
    case "camera":
      return <svg {...common}><path d="M4 8a2 2 0 0 1 2-2h2l2-2h4l2 2h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z" /><circle cx="12" cy="13" r="3.5" /></svg>;
    case "trend":
      return <svg {...common}><path d="M3 17l6-6 4 4 8-8" /><path d="M14 7h7v7" /></svg>;
    case "clock":
      return <svg {...common}><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></svg>;
    case "globe":
      return <svg {...common}><circle cx="12" cy="12" r="9" /><path d="M3 12h18" /><path d="M12 3a14 14 0 0 1 0 18" /><path d="M12 3a14 14 0 0 0 0 18" /></svg>;
    case "lock":
      return <svg {...common}><rect x="4" y="11" width="16" height="10" rx="2" /><path d="M8 11V8a4 4 0 1 1 8 0v3" /></svg>;
    case "branch":
      return <svg {...common}><circle cx="6" cy="5" r="2" /><circle cx="6" cy="19" r="2" /><circle cx="18" cy="7" r="2" /><path d="M6 7v10" /><path d="M6 12a6 6 0 0 0 6 6h0a6 6 0 0 0 6-6V9" /></svg>;
    case "play":
      return <svg {...common}><polygon points="6 4 20 12 6 20 6 4" /></svg>;
    case "wrench":
      return <svg {...common}><path d="M14 7a4 4 0 0 1 4 4l3 3-3 3-3-3a4 4 0 0 1-4-4" /><path d="m3 21 8-8" /></svg>;
    case "box":
      return <svg {...common}><path d="M3 8l9-4 9 4-9 4z" /><path d="M3 8v8l9 4 9-4V8" /><path d="M12 12v8" /></svg>;
    case "building":
      return <svg {...common}><rect x="4" y="3" width="16" height="18" rx="1" /><path d="M9 7h2M9 11h2M9 15h2M13 7h2M13 11h2M13 15h2" /></svg>;
    case "menu":
      return <svg {...common}><path d="M4 7h16M4 12h16M4 17h16" /></svg>;
    case "x":
      return <svg {...common}><path d="M6 6l12 12M6 18 18 6" /></svg>;
    case "file":
      return <svg {...common}><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" /><path d="M14 3v5h5" /></svg>;
    case "send":
      return <svg {...common}><path d="m4 12 16-8-6 18-3-8z" /></svg>;
    case "alert":
      return <svg {...common}><path d="M12 4 2 20h20z" /><path d="M12 10v4" /><circle cx="12" cy="17" r="0.5" /></svg>;
    case "thumb":
      return <svg {...common}><path d="M7 21V11l5-8 1 1a3 3 0 0 1 1 2v4h5a2 2 0 0 1 2 2l-2 7a3 3 0 0 1-3 2z" /></svg>;
    case "compass":
      return <svg {...common}><circle cx="12" cy="12" r="9" /><polygon points="16 8 13 14 8 16 11 10" /></svg>;
    case "layers":
      return <svg {...common}><path d="M12 3 3 8l9 5 9-5z" /><path d="M3 12l9 5 9-5" /><path d="M3 16l9 5 9-5" /></svg>;
    default:
      return <svg {...common}><circle cx="12" cy="12" r="9" /></svg>;
  }
};

/* ---------------------------------------------------------------------
   HeroMockup — full-width app mockup under the headline
   --------------------------------------------------------------------- */
const HeroMockup = () => {
  const rows = [
    { id: 'REQ-08821', t: 'Water seepage · Unit 12-04', site: 'Block A · Tower One', meta: 'WisAI matched 3 prior · DLP active', chip: 'active', label: 'Active', risk: false, hot: true },
    { id: 'REQ-08819', t: 'Lift lobby light replacement', site: 'Block C · Lobby', meta: 'Closure blocked · evidence missing', chip: 'missing', label: 'Evidence Missing', risk: true },
    { id: 'REQ-08812', t: 'Pump room PB-A02 quarterly check', site: 'Sub-basement', meta: 'Pending vendor quote · ETA 24h', chip: 'dispatched', label: 'Dispatched' },
    { id: 'REQ-08807', t: 'Carpark gantry barrier intermittent', site: 'Basement B1 · East ramp', meta: 'Assigned · J. Lim · ETA 14:30', chip: 'triage', label: 'Triage' },
    { id: 'REQ-08801', t: 'Aircon dripping · management office', site: 'Management office L1', meta: 'New · waiting on triage', chip: 'open', label: 'Open' },
  ];
  return (
    <div className="lp-hero-mockup">
      <div className="lp-mock-chrome">
        <span className="dot" />
        <span className="dot" />
        <span className="dot" />
        <span className="url">app.wisbid.com / operations</span>
        <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--wb-ink-400)', display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--wb-success-500)' }} />
          Live · 7 sites
        </span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '220px 1.4fr 1fr', minHeight: 520, background: '#fff' }}>
        {/* Sidebar */}
        <aside style={{ borderRight: '1px solid var(--wb-border)', padding: 18, background: 'var(--wb-navy-25)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 24 }}>
            <img src="assets/wisbid-icon.png" alt="" style={{ width: 22, height: 22 }} />
            <span style={{ fontWeight: 700, fontSize: 14, color: 'var(--wb-navy-900)' }}>Wisbid</span>
          </div>
          {[
            ['inbox', 'Operations', true, '24'],
            ['branch', 'Triage', false, '7'],
            ['users', 'Dispatch', false, '4'],
            ['camera', 'Evidence', false, '12'],
            ['shield', 'Audit', false, ''],
            ['box', 'Assets', false, ''],
            ['building', 'Vendors', false, ''],
          ].map(([ico, lbl, active, count]) => (
            <div key={lbl} style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '8px 10px', marginInline: -8, borderRadius: 8,
              background: active ? '#fff' : 'transparent',
              boxShadow: active ? 'var(--wb-shadow-xs)' : 'none',
              fontSize: 13, fontWeight: active ? 600 : 500,
              color: active ? 'var(--wb-navy-900)' : 'var(--wb-ink-600)',
              marginBottom: 2,
            }}>
              <Icon name={ico} size={15} />
              <span style={{ flex: 1 }}>{lbl}</span>
              {count && <span className="lp-mono" style={{ fontSize: 11, color: 'var(--wb-ink-400)' }}>{count}</span>}
            </div>
          ))}
        </aside>

        {/* Queue */}
        <div style={{ borderRight: '1px solid var(--wb-border)', display: 'flex', flexDirection: 'column' }}>
          <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--wb-border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div>
              <div style={{ fontWeight: 600, fontSize: 15, color: 'var(--wb-navy-900)' }}>Today · Tue 13 May</div>
              <div style={{ fontSize: 12, color: 'var(--wb-ink-500)', marginTop: 2 }}>24 open · 3 SLA at risk · 2 closure blocked</div>
            </div>
            <button style={{ padding: '6px 12px', border: '1px solid var(--wb-border)', background: '#fff', borderRadius: 6, fontSize: 12, fontWeight: 500, color: 'var(--wb-navy-900)' }}>Filter</button>
          </div>
          {rows.map((r, i) => (
            <div key={r.id} style={{
              padding: '14px 20px',
              borderBottom: i < rows.length - 1 ? '1px solid var(--wb-border)' : 'none',
              background: r.hot ? 'var(--wb-navy-25)' : '#fff',
              display: 'grid', gridTemplateColumns: '1fr auto', gap: 10, alignItems: 'center',
            }}>
              <div style={{ minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                  <span className="lp-mono" style={{ fontSize: 11, color: 'var(--wb-navy-700)', fontWeight: 600 }}>{r.id}</span>
                  {r.risk && <Icon name="alert" size={12} style={{ color: 'var(--wb-error-500)' }} />}
                </div>
                <div style={{ fontWeight: 600, fontSize: 14, color: 'var(--wb-navy-900)', marginBottom: 2 }}>{r.t}</div>
                <div style={{ fontSize: 12, color: 'var(--wb-ink-500)' }}>{r.site} · {r.meta}</div>
              </div>
              <span className={`lp-pill ${r.chip}`}>{r.label}</span>
            </div>
          ))}
        </div>

        {/* WisAI panel */}
        <div style={{ background: 'var(--wb-navy-25)', display: 'flex', flexDirection: 'column' }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 8,
            padding: '12px 16px',
            background: 'var(--wb-navy-900)', color: '#fff',
            borderBottom: '1px solid var(--wb-navy-800)',
          }}>
            <Icon name="sparkles" size={14} />
            <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.10em', textTransform: 'uppercase' }}>WisAI · Suggestion</span>
            <span className="lp-mono" style={{ marginLeft: 'auto', fontSize: 11, opacity: 0.7 }}>REQ-08821</span>
          </div>
          <div style={{ padding: '16px 18px', display: 'flex', flexDirection: 'column', gap: 16, flex: 1 }}>
            <div>
              <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--wb-ink-400)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 8 }}>What I checked</div>
              <div style={{ fontSize: 13, color: 'var(--wb-ink-700)', display: 'flex', flexDirection: 'column', gap: 6 }}>
                <div style={{ display: 'flex', gap: 8 }}><Icon name="file" size={14} style={{ color: 'var(--wb-navy-700)', flexShrink: 0, marginTop: 2 }} /> 3 prior seepage reports in 90d</div>
                <div style={{ display: 'flex', gap: 8 }}><Icon name="shield" size={14} style={{ color: 'var(--wb-navy-700)', flexShrink: 0, marginTop: 2 }} /> Vendor under warranty</div>
                <div style={{ display: 'flex', gap: 8 }}><Icon name="box" size={14} style={{ color: 'var(--wb-navy-700)', flexShrink: 0, marginTop: 2 }} /> Asset PB-A02 due check</div>
              </div>
            </div>
            <div>
              <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--wb-ink-400)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 8 }}>Draft next step</div>
              <div style={{
                background: '#fff', border: '1px solid var(--wb-border)', borderRadius: 10,
                padding: '12px 14px', fontSize: 13, lineHeight: 1.5, color: 'var(--wb-ink-700)',
              }}>
                Dispatch plumber under DLP. Capture moisture-meter reading + 3 photos before closure.
              </div>
            </div>
            <div>
              <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--wb-ink-400)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 8 }}>Sources</div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                {['SOP-W-104', 'VND-318', 'ASSET-PB-A02'].map(s => (
                  <span key={s} className="lp-mono" style={{
                    fontSize: 11, padding: '3px 8px', borderRadius: 999,
                    background: '#fff', border: '1px solid var(--wb-border)',
                    color: 'var(--wb-navy-800)', fontWeight: 600,
                  }}>{s}</span>
                ))}
              </div>
            </div>
            <div style={{
              marginTop: 'auto',
              display: 'flex', alignItems: 'center', gap: 8,
              padding: '10px 12px',
              background: '#FFFBEB', border: '1px solid #FCD34D', borderRadius: 8,
              fontSize: 12, fontWeight: 600, color: '#92400E',
            }}>
              <Icon name="users" size={14} />
              Requires human review before sending
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

/* ---------------------------------------------------------------------
   Small visual placeholders for cards
   --------------------------------------------------------------------- */
const StrategyVisual = ({ kind }) => {
  const t = useMockT();
  if (kind === "intake") {
    return (
      <div className="visual" style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 8, background: '#fff' }}>
        {[
          [t("mock.strategy.new", "New"), 'open', 'REQ-08821'],
          [t("mock.strategy.triageMatched", "Triage · 2 matched"), 'triage', 'REQ-08822'],
          [t("mock.strategy.dispatched", "Dispatched"), 'dispatched', 'REQ-08823'],
        ].map(([label, c, id]) => (
          <div key={id} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 12px', border: '1px solid var(--wb-border)', borderRadius: 10, background: '#fff' }}>
            <div>
              <div className="lp-mono" style={{ fontSize: 10, color: 'var(--wb-navy-700)', fontWeight: 600 }}>{id}</div>
              <div style={{ fontSize: 13, color: 'var(--wb-navy-900)', fontWeight: 500, marginTop: 2 }}>{label}</div>
            </div>
            <span className={`lp-pill ${c}`}>{c === 'open' ? t("mock.strategy.open", "Open") : c === 'triage' ? t("mock.strategy.triage", "Triage") : t("mock.strategy.dispatched", "Dispatched")}</span>
          </div>
        ))}
      </div>
    );
  }
  if (kind === "dispatch") {
    return (
      <div className="visual" style={{ padding: 18, background: '#fff', display: 'flex', flexDirection: 'column', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ width: 36, height: 36, borderRadius: '50%', background: 'linear-gradient(135deg,var(--wb-navy-200),var(--wb-navy-500))', color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontWeight: 600, fontSize: 13 }}>JL</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--wb-navy-900)' }}>Jason Lim</div>
            <div style={{ fontSize: 11, color: 'var(--wb-ink-500)' }}>{t("mock.strategy.techAvailable", "Technician · Available · 0.4 km")}</div>
          </div>
          <span className="lp-pill closed">{t("mock.strategy.assign", "Assign")}</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, opacity: 0.85 }}>
          <div style={{ width: 36, height: 36, borderRadius: '50%', background: 'linear-gradient(135deg,var(--wb-navy-100),var(--wb-navy-300))', color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontWeight: 600, fontSize: 13 }}>AT</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--wb-navy-900)' }}>Ashvin T.</div>
            <div style={{ fontSize: 11, color: 'var(--wb-ink-500)' }}>{t("mock.strategy.vendorDlp", "Vendor · Cool-Air SG · DLP active")}</div>
          </div>
          <span className="lp-pill triage">{t("mock.strategy.backup", "Backup")}</span>
        </div>
        <div style={{ height: 1, background: 'var(--wb-border)', margin: '4px 0' }} />
        <div style={{ fontSize: 12, color: 'var(--wb-ink-500)', display: 'flex', justifyContent: 'space-between' }}>
          <span>{t("mock.strategy.suggestedRoute", "WisAI suggested route")}</span>
          <span className="lp-mono">{t("mock.strategy.saved", "+12 min saved")}</span>
        </div>
      </div>
    );
  }
  if (kind === "evidence") {
    return (
      <div className="visual" style={{ padding: 16, display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8, background: '#fff' }}>
        {[1,2,3,4,5,6].map(n => (
          <div key={n} style={{
            aspectRatio: '1/1', borderRadius: 8,
            background: `linear-gradient(135deg, var(--wb-navy-${100 + (n%3)*50}), var(--wb-navy-${300 + (n%3)*100}))`,
            position: 'relative',
            border: '1px solid var(--wb-border)',
          }}>
            {n === 6 && (
              <div style={{
                position: 'absolute', inset: 0,
                background: 'rgba(11,31,59,0.78)', borderRadius: 8,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: '#fff', fontSize: 11, fontWeight: 600,
                flexDirection: 'column', gap: 4,
              }}>
                <Icon name="camera" size={16} />
                <span>{t("mock.strategy.morePhotos", "+9 photos")}</span>
              </div>
            )}
            {n === 1 && (
              <div style={{ position: 'absolute', top: 6, left: 6, padding: '2px 6px', background: 'rgba(255,255,255,0.92)', borderRadius: 4, fontSize: 9, fontFamily: 'var(--wb-font-mono)', color: 'var(--wb-navy-800)', fontWeight: 600 }}>
                {t("mock.strategy.before", "BEFORE")}
              </div>
            )}
            {n === 4 && (
              <div style={{ position: 'absolute', top: 6, left: 6, padding: '2px 6px', background: 'rgba(255,255,255,0.92)', borderRadius: 4, fontSize: 9, fontFamily: 'var(--wb-font-mono)', color: 'var(--wb-success-700)', fontWeight: 600 }}>
                {t("mock.strategy.after", "AFTER")}
              </div>
            )}
          </div>
        ))}
      </div>
    );
  }
  if (kind === "audit") {
    return (
      <div className="visual" style={{ padding: 16, background: '#fff', display: 'flex', flexDirection: 'column' }}>
        {[
          [t("mock.strategy.closureApproved", "Closure approved"), 'check', 'closed'],
          [t("mock.strategy.evidenceVerified", "Evidence verified"), 'shield', 'closed'],
          [t("mock.strategy.invoiceMatched", "Vendor invoice matched"), 'file', 'closed'],
          [t("mock.strategy.auditExported", "Audit pack exported"), 'box', 'triage'],
        ].map(([t, ico, c], i) => (
          <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 0', borderBottom: i < 3 ? '1px solid var(--wb-border)' : 'none' }}>
            <div style={{
              width: 28, height: 28, borderRadius: 8,
              background: 'var(--wb-success-50)', color: 'var(--wb-success-700)',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon name={ico} size={14} />
            </div>
            <div style={{ flex: 1, fontSize: 13, fontWeight: 500, color: 'var(--wb-navy-900)' }}>{t}</div>
            <span className="lp-mono" style={{ fontSize: 10, color: 'var(--wb-ink-400)' }}>{['08:14','09:32','10:05','11:22'][i]}</span>
          </div>
        ))}
      </div>
    );
  }
  return <div className="visual" />;
};

/* ---------------------------------------------------------------------
   DiveShot — large product screenshot mockup used per dive module
   --------------------------------------------------------------------- */
const DiveShot = ({ kind }) => {
  const t = useMockT();
  if (kind === "supplier") {
    return (
      <div className="lp-dive-shot">
        <div className="lp-mock-chrome">
          <span className="dot" /><span className="dot" /><span className="dot" />
          <span className="url">{t("mock.dive.supplier.url", "vendors · Cool-Air SG · 2 active")}</span>
        </div>
        <div style={{ padding: 24, background: '#fff' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 24 }}>
            <div style={{ width: 56, height: 56, borderRadius: 12, background: 'var(--wb-navy-50)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name="building" size={28} style={{ color: 'var(--wb-navy-700)' }} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 600, fontSize: 18, color: 'var(--wb-navy-900)' }}>Cool-Air SG Pte Ltd</div>
              <div style={{ fontSize: 13, color: 'var(--wb-ink-500)', marginTop: 2 }}>{t("mock.dive.supplier.meta", "HVAC · 4 sites · DLP active until 14 Mar 2027")}</div>
            </div>
            <span className="lp-pill closed">{t("mock.dive.approved", "Approved")}</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 12, marginBottom: 20 }}>
            {[
              [t("mock.dive.responseSla", "Response SLA"), '34 min', t("mock.dive.avg30d", "avg last 30d")],
              [t("mock.dive.closureRate", "Closure rate"), '98%', t("mock.dive.firstAttempt", "first-attempt")],
              [t("mock.dive.evidence", "Evidence"), '100%', t("mock.dive.completeness", "completeness")]
            ].map(([k, v, s]) => (
              <div key={k} style={{ padding: 14, border: '1px solid var(--wb-border)', borderRadius: 10 }}>
                <div style={{ fontSize: 11, color: 'var(--wb-ink-400)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, marginBottom: 6 }}>{k}</div>
                <div className="lp-mono" style={{ fontSize: 22, fontWeight: 600, color: 'var(--wb-navy-900)' }}>{v}</div>
                <div style={{ fontSize: 11, color: 'var(--wb-ink-500)', marginTop: 2 }}>{s}</div>
              </div>
            ))}
          </div>
          <div style={{ fontSize: 11, color: 'var(--wb-ink-400)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, marginBottom: 10 }}>{t("mock.dive.liveContracts", "Live contracts")}</div>
          {[
            ['CON-VND-318', t("mock.dive.contract1", "AHU quarterly · Block A,B,C"), t("mock.dive.12sites", "12 sites")],
            ['CON-VND-204', t("mock.dive.contract2", "Chiller plant DLP"), t("mock.dive.3sites", "3 sites")],
          ].map(([id, t, m]) => (
            <div key={id} style={{ display: 'flex', alignItems: 'center', padding: '12px 0', borderTop: '1px solid var(--wb-border)' }}>
              <div className="lp-mono" style={{ fontSize: 12, color: 'var(--wb-navy-700)', fontWeight: 600, width: 110 }}>{id}</div>
              <div style={{ flex: 1, fontSize: 13, color: 'var(--wb-navy-900)' }}>{t}</div>
              <div style={{ fontSize: 12, color: 'var(--wb-ink-500)' }}>{m}</div>
            </div>
          ))}
        </div>
      </div>
    );
  }
  if (kind === "spend") {
    return (
      <div className="lp-dive-shot">
        <div className="lp-mock-chrome">
          <span className="dot" /><span className="dot" /><span className="dot" />
          <span className="url">{t("mock.dive.spend.url", "budget · Q2 facilities spend")}</span>
        </div>
        <div style={{ padding: 24, background: '#fff' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 24 }}>
            <div>
              <div style={{ fontSize: 12, color: 'var(--wb-ink-500)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600 }}>{t("mock.dive.reactiveSpend", "Reactive spend · Q2")}</div>
              <div className="lp-mono" style={{ fontSize: 36, fontWeight: 600, color: 'var(--wb-navy-900)', marginTop: 6 }}>$284,210</div>
              <div style={{ fontSize: 13, color: 'var(--wb-success-700)', marginTop: 2 }}>{t("mock.dive.underBudget", "↓ 18% vs Q1 · under budget")}</div>
            </div>
            <div style={{ display: 'flex', gap: 4 }}>
              {['M','J','J','A','S','O'].map((m, i) => (
                <div key={i} style={{ width: 26, fontSize: 10, color: 'var(--wb-ink-400)', textAlign: 'center' }}>{m}</div>
              ))}
            </div>
          </div>
          {/* simple stacked bars */}
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, height: 140, marginBottom: 20, padding: '0 4px' }}>
            {[68, 82, 91, 64, 72, 48].map((h, i) => (
              <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', gap: 2 }}>
                <div style={{ height: `${h * 0.55}%`, background: 'var(--wb-navy-700)', borderRadius: '3px 3px 0 0' }} />
                <div style={{ height: `${h * 0.32}%`, background: 'var(--wb-navy-300)' }} />
                <div style={{ height: `${h * 0.13}%`, background: 'var(--wb-navy-100)' }} />
              </div>
            ))}
          </div>
          <div style={{ display: 'flex', gap: 16, fontSize: 12, color: 'var(--wb-ink-500)', flexWrap: 'wrap' }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><span style={{ width: 8, height: 8, background: 'var(--wb-navy-700)', borderRadius: 2 }} /> {t("mock.dive.vendorInvoices", "Vendor invoices")}</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><span style={{ width: 8, height: 8, background: 'var(--wb-navy-300)', borderRadius: 2 }} /> {t("mock.dive.partsConsumables", "Parts and consumables")}</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><span style={{ width: 8, height: 8, background: 'var(--wb-navy-100)', borderRadius: 2 }} /> {t("mock.dive.overtime", "Overtime")}</span>
          </div>
        </div>
      </div>
    );
  }
  if (kind === "sourcing") {
    return (
      <div className="lp-dive-shot">
        <div className="lp-mock-chrome">
          <span className="dot" /><span className="dot" /><span className="dot" />
          <span className="url">{t("mock.dive.sourcing.url", "sourcing · RFQ-2026-014 · pump replacement")}</span>
        </div>
        <div style={{ padding: 24, background: '#fff' }}>
          <div style={{ marginBottom: 20 }}>
            <div style={{ fontSize: 11, color: 'var(--wb-ink-400)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, marginBottom: 6 }}>RFQ-2026-014</div>
            <div style={{ fontWeight: 600, fontSize: 18, color: 'var(--wb-navy-900)' }}>{t("mock.dive.pumpReplacement", "Booster pump replacement · Block C")}</div>
            <div style={{ fontSize: 13, color: 'var(--wb-ink-500)', marginTop: 2 }}>{t("mock.dive.sourcingMeta", "3 vendors · closing in 2 days · DLP-preferred bidding")}</div>
          </div>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
            <thead>
              <tr>
                {[t("mock.dive.vendor", "Vendor"), t("mock.dive.bid", "Bid"), t("mock.dive.leadTime", "Lead time"), t("mock.dive.score", "Score")].map(h => (
                  <th key={h} style={{ textAlign: 'left', padding: '8px 0', borderBottom: '1px solid var(--wb-border)', fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--wb-ink-400)', fontWeight: 600 }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {[
                ['Cool-Air SG', '$8,420', '5 d', '94', true],
                ['Pacific Mech', '$8,910', '4 d', '88', false],
                ['Acme HVAC', '$7,840', '9 d', '76', false],
              ].map(([n, b, l, s, win]) => (
                <tr key={n} style={{ background: win ? 'var(--wb-navy-25)' : 'transparent' }}>
                  <td style={{ padding: '12px 0', color: 'var(--wb-navy-900)', fontWeight: win ? 600 : 500 }}>
                    {win && <span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: '50%', background: 'var(--wb-success-500)', marginRight: 8 }} />}
                    {n}
                  </td>
                  <td className="lp-mono" style={{ padding: '12px 0', color: 'var(--wb-navy-900)', fontWeight: win ? 600 : 400 }}>{b}</td>
                  <td className="lp-mono" style={{ padding: '12px 0', color: 'var(--wb-ink-600)' }}>{l}</td>
                  <td className="lp-mono" style={{ padding: '12px 0', color: win ? 'var(--wb-success-700)' : 'var(--wb-ink-600)', fontWeight: win ? 600 : 400 }}>{s}/100</td>
                </tr>
              ))}
            </tbody>
          </table>
          <div style={{ marginTop: 16, padding: 12, background: 'var(--wb-navy-25)', border: '1px solid var(--wb-border)', borderRadius: 10, fontSize: 13, color: 'var(--wb-ink-700)', display: 'flex', alignItems: 'flex-start', gap: 10 }}>
            <Icon name="sparkles" size={16} style={{ color: 'var(--wb-navy-700)', flexShrink: 0, marginTop: 1 }} />
            <span><strong style={{ color: 'var(--wb-navy-900)' }}>WisAI:</strong> {t("mock.dive.wisaiRecommendation", "Cool-Air SG scores highest on prior closure rate (98%) and is under existing DLP — likely to close on first attempt.")}</span>
          </div>
        </div>
      </div>
    );
  }
  if (kind === "compliance") {
    return (
      <div className="lp-dive-shot">
        <div className="lp-mock-chrome">
          <span className="dot" /><span className="dot" /><span className="dot" />
          <span className="url">{t("mock.dive.compliance.url", "audit · BCA inspection pack · WO-04412")}</span>
        </div>
        <div style={{ padding: 24, background: '#fff' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
            <div style={{ width: 44, height: 44, borderRadius: 10, background: 'var(--wb-success-50)', color: 'var(--wb-success-700)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name="shield" size={22} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 600, fontSize: 16, color: 'var(--wb-navy-900)' }}>{t("mock.dive.auditComplete", "Audit pack complete")}</div>
              <div style={{ fontSize: 12, color: 'var(--wb-ink-500)' }}>{t("mock.dive.auditMeta", "WO-04412 · Fire alarm quarterly · MCST 4881")}</div>
            </div>
            <span className="lp-pill closed">{t("mock.dive.auditReady", "Audit ready")}</span>
          </div>
          {[
            [t("mock.dive.sopAttached", "SOP attached"), 'SOP-FA-204', true],
            [t("mock.dive.inspectionChecklist", "Inspection checklist"), t("mock.dive.steps", "14 / 14 steps"), true],
            [t("mock.dive.evidencePhotos", "Evidence photos"), t("mock.dive.geotagged", "12 attached · geotagged"), true],
            [t("mock.dive.vendorSignature", "Vendor signature"), 'C. Tan · 11:42', true],
            [t("mock.dive.approverReview", "Approver review"), t("mock.dive.awaitingChair", "Awaiting MCST chair"), false],
          ].map(([t, m, ok], i) => (
            <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 0', borderTop: i === 0 ? 'none' : '1px solid var(--wb-border)' }}>
              <div style={{ width: 24, height: 24, borderRadius: '50%', background: ok ? 'var(--wb-success-50)' : 'var(--wb-warning-50)', color: ok ? 'var(--wb-success-700)' : 'var(--wb-warning-700)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name={ok ? 'check' : 'clock'} size={12} />
              </div>
              <div style={{ flex: 1, fontSize: 13, fontWeight: 500, color: 'var(--wb-navy-900)' }}>{t}</div>
              <div style={{ fontSize: 12, color: 'var(--wb-ink-500)' }}>{m}</div>
            </div>
          ))}
          <button style={{
            marginTop: 16, width: '100%', height: 40, borderRadius: 8,
            background: 'var(--wb-navy-900)', color: '#fff', border: 'none',
            fontWeight: 500, fontSize: 14, cursor: 'pointer',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          }}>
            <Icon name="file" size={14} /> {t("mock.dive.exportPack", "Export inspection pack (PDF · 32 pages)")}
          </button>
        </div>
      </div>
    );
  }
  return null;
};

/* ---------------------------------------------------------------------
   HeroGallery — masonry of product-moment cards under the headline
   Each card is a slice of the system; gallery fades into page at bottom.
   --------------------------------------------------------------------- */
const HeroGallery = () => {
  const queueRows = [
    { id: 'REQ-08821', t: 'Water seepage · Unit 12-04', site: 'Block A · Tower One', chip: 'active', label: 'Active', hot: true },
    { id: 'REQ-08819', t: 'Lift lobby light replacement', site: 'Block C · Lobby', chip: 'missing', label: 'Evidence' },
    { id: 'REQ-08812', t: 'Pump room PB-A02 quarterly', site: 'Sub-basement', chip: 'dispatched', label: 'Dispatched' },
    { id: 'REQ-08807', t: 'Carpark gantry intermittent', site: 'B1 · East ramp', chip: 'triage', label: 'Triage' },
    { id: 'REQ-08801', t: 'Aircon dripping · mgmt office', site: 'L1', chip: 'open', label: 'Open' },
  ];

  return (
    <div className="lp-hg">
      <div className="lp-hg-grid">

        {/* Card 1 — main operations queue (large, centerpiece) */}
        <article className="lp-hg-card lp-hg-card--main" style={{ '--col': 'span 7', '--row': 'span 2' }}>
          <div className="lp-mock-chrome">
            <span className="dot" /><span className="dot" /><span className="dot" />
            <span className="url">app.wisbid.com / operations</span>
            <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--wb-ink-400)', display: 'flex', alignItems: 'center', gap: 6 }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--wb-success-500)' }} />
              Live · 7 sites
            </span>
          </div>
          <div className="lp-hg-card-body" style={{ padding: 0 }}>
            <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--wb-border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div>
                <div style={{ fontWeight: 600, fontSize: 14, color: 'var(--wb-navy-900)' }}>Today · Tue 13 May</div>
                <div style={{ fontSize: 11, color: 'var(--wb-ink-500)', marginTop: 2 }}>24 open · 3 SLA at risk · 2 closure blocked</div>
              </div>
              <span className="lp-mono" style={{ fontSize: 11, color: 'var(--wb-ink-400)' }}>filter · all sites</span>
            </div>
            {queueRows.map((r, i) => (
              <div key={r.id} className="lp-hg-row" style={{ background: r.hot ? 'var(--wb-navy-25)' : '#fff' }}>
                <div style={{ minWidth: 0, flex: 1 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 3 }}>
                    <span className="lp-mono" style={{ fontSize: 10, color: 'var(--wb-navy-700)', fontWeight: 600 }}>{r.id}</span>
                    {r.chip === 'missing' && <Icon name="alert" size={11} style={{ color: 'var(--wb-error-500)' }} />}
                  </div>
                  <div style={{ fontWeight: 600, fontSize: 13, color: 'var(--wb-navy-900)' }}>{r.t}</div>
                  <div style={{ fontSize: 11, color: 'var(--wb-ink-500)', marginTop: 1 }}>{r.site}</div>
                </div>
                <span className={`lp-pill ${r.chip}`}>{r.label}</span>
              </div>
            ))}
          </div>
        </article>

        {/* Card 2 — WisAI Assistant panel (matches real product) */}
        <article className="lp-hg-card lp-hg-card--wisai" style={{ '--col': 'span 5', '--row': 'span 2' }}>
          <div className="lp-wisai-head">
            <div className="lp-wisai-mark">
              <img src="assets/wisbid-icon.png" alt="" />
            </div>
            <span className="lp-wisai-title">WisAI Assistant</span>
            <div className="lp-wisai-actions">
              <button className="lp-wisai-iconbtn" aria-label="Expand">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 4h6M4 4v6M20 20h-6M20 20v-6M20 4l-7 7M4 20l7-7"/></svg>
              </button>
              <button className="lp-wisai-iconbtn" aria-label="Close">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 6l12 12M6 18 18 6"/></svg>
              </button>
            </div>
          </div>
          <div className="lp-wisai-sub">
            <button className="lp-wisai-conv">
              New conversation
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6"/></svg>
            </button>
            <div className="lp-wisai-tools">
              <button className="lp-wisai-iconbtn" aria-label="Settings">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
              </button>
              <button className="lp-wisai-iconbtn" aria-label="Edit">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="m18.5 2.5 3 3L12 15l-4 1 1-4z"/></svg>
              </button>
            </div>
          </div>
          <div className="lp-wisai-notice">
            Failed to load WisAI connector identities.
          </div>
          <div className="lp-wisai-body">
            <div className="lp-wisai-greet">
              <div className="lp-wisai-mark lp-wisai-mark--lg">
                <img src="assets/wisbid-icon.png" alt="" />
              </div>
              <h4>Good morning</h4>
              <p>How can I help with your operations today?</p>
            </div>
            <div className="lp-wisai-prompts">
              <button className="lp-wisai-prompt">Summarise this request</button>
              <button className="lp-wisai-prompt">Check what is blocking this work order</button>
              <button className="lp-wisai-prompt">Draft an update to the requestor</button>
              <button className="lp-wisai-prompt">Find missing evidence</button>
            </div>
          </div>
          <div className="lp-wisai-input">
            <button className="lp-wisai-iconbtn" aria-label="Attach">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5v14M5 12h14"/></svg>
            </button>
            <span className="lp-wisai-placeholder">Ask, search, or explain…</span>
            <button className="lp-wisai-send" aria-label="Send">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m4 12 16-8-6 18-3-8z"/></svg>
            </button>
          </div>
        </article>

      </div>
    </div>
  );
};

/* Export to globals */
Object.assign(window, { Icon, HeroMockup, HeroGallery, StrategyVisual, DiveShot });