// scene_overview.jsx — Dashboard overview that reads like a real product
// screenshot, with a callout person + speech bubble.

function SceneOverview() {
  const t = useTime();

  // Banner timing
  const bannerT = Easing.easeOutCubic(clamp((t - 0.6) / 0.8, 0, 1));

  const kpis = [
    { value: 35, suffix: '', label: 'Total Sessions', color: LC_PURPLE, icon: 'camera', sub: '3 RA' },
    { value: 43, suffix: '%', label: 'Completion Rate', color: LC_GREEN, icon: 'check', sub: '15 of 35 completed' },
    { value: 16, suffix: 'm', label: 'Avg Duration', color: LC_BLUE, icon: 'clock', sub: 'Across completed sessions' },
    { value: 4.6, suffix: '', label: 'Avg AI Score', color: LC_ORANGE, icon: 'star', sub: '0 scored sessions' },
  ];

  const sessions = [
    { name: 'Jonathan Garrood', status: 'In Progress', ts: '17 Apr' },
    { name: 'Jenny Savory',     status: 'In Progress', ts: '15 Apr' },
    { name: 'Charlotte Sankey', status: 'In Progress', ts: '14 Apr' },
    { name: 'Jenny Bicknell',   status: 'Pending Review', ts: '13 Apr' },
    { name: 'Christos Othodixou', status: 'Pending Review', ts: '13 Apr' },
  ];

  return (
    <>
      <PSShell
        breadcrumb={['Select', 'TalentScreen', 'Screen', 'Video Interview']}
        title="Video Interview Platform"
        eyebrow="STREAMLINE EARLY STAGE CANDIDATE ASSESSMENT WITH STRUCTURED VIDEO INTERVIEWS"
        icon="template"
      >

        {/* Submenu */}
        <div style={{ position: 'absolute', left: 104, top: 172, zIndex: 1 }}>
          <PSSubmenu active="Overview"/>
        </div>

        {/* Welcome hero banner */}
        <div style={{
          position: 'absolute',
          left: 340, top: 172,
          width: 1140, height: 170,
          borderRadius: 16,
          background: `linear-gradient(120deg, ${LC_PURPLE} 0%, #6D28D9 55%, #5B21B6 100%)`,
          padding: '28px 36px',
          overflow: 'hidden',
          opacity: bannerT,
          transform: `translateY(${(1 - bannerT) * 16}px)`,
          boxShadow: '0 12px 40px rgba(124,58,237,0.3)',
        }}>
          <div style={{
            position: 'absolute',
            inset: 0,
            background: 'linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%)',
            transform: `translateX(${-100 + ((t * 25) % 300)}%)`,
          }}/>
          <div style={{
            fontFamily: 'Gilroy, sans-serif',
            fontSize: 26, fontWeight: 700,
            color: '#fff',
            letterSpacing: '-0.02em',
          }}>Welcome to Video Interview Screen</div>
          <div style={{
            marginTop: 8,
            fontFamily: 'Gilroy, sans-serif',
            fontSize: 13, fontWeight: 400,
            color: 'rgba(255,255,255,0.85)',
            lineHeight: 1.5,
            maxWidth: 680,
          }}>Design structured video interviews, assign them to opportunity pipelines, and apply AI-assisted scoring with human calibration. Support RA accommodations and improve hiring quality with data-driven insights.</div>
          <div style={{ marginTop: 14, display: 'flex', gap: 10 }}>
            <div style={{
              padding: '9px 16px',
              background: '#fff',
              borderRadius: 8,
              fontFamily: 'Gilroy, sans-serif',
              fontSize: 12, fontWeight: 600,
              color: LC_PURPLE_DARK,
              display: 'flex', alignItems: 'center', gap: 6,
            }}>+ Create New Template</div>
            <div style={{
              padding: '9px 16px',
              background: 'rgba(255,255,255,0.15)',
              border: '1px solid rgba(255,255,255,0.3)',
              borderRadius: 8,
              fontFamily: 'Gilroy, sans-serif',
              fontSize: 12, fontWeight: 600,
              color: '#fff',
              display: 'flex', alignItems: 'center', gap: 6,
            }}>▶ Review Sessions</div>
          </div>
        </div>

        {/* KPI cards */}
        <div style={{
          position: 'absolute',
          left: 340, top: 362,
          display: 'flex', gap: 16,
        }}>
          {kpis.map((kpi, i) => {
            const kpiT = Easing.easeOutBack(clamp((t - 1.4 - i * 0.14) / 0.7, 0, 1));
            const countT = Easing.easeOutCubic(clamp((t - 1.6 - i * 0.14) / 1.1, 0, 1));
            const displayVal = kpi.value < 10 ? (kpi.value * countT).toFixed(1) : Math.round(kpi.value * countT);
            return (
              <div key={i} style={{
                width: 276, height: 120,
                background: '#fff',
                borderRadius: 12,
                border: `1px solid ${LC_LINE}`,
                padding: '18px 22px',
                opacity: clamp(kpiT, 0, 1),
                transform: `scale(${0.92 + clamp(kpiT, 0, 1) * 0.08})`,
                boxShadow: '0 1px 3px rgba(22,22,31,0.04)',
              }}>
                <div style={{
                  display: 'flex', alignItems: 'center', gap: 10,
                  marginBottom: 12,
                }}>
                  <KpiIcon kind={kpi.icon} color={kpi.color}/>
                </div>
                <div style={{
                  fontFamily: 'Gilroy, sans-serif',
                  fontSize: 30, fontWeight: 700,
                  color: LC_INK,
                  letterSpacing: '-0.03em',
                  fontVariantNumeric: 'tabular-nums',
                  lineHeight: 1,
                }}>{displayVal}{kpi.suffix}</div>
                <div style={{
                  marginTop: 6,
                  fontFamily: 'Gilroy, sans-serif',
                  fontSize: 12, fontWeight: 500,
                  color: LC_INK_SOFT,
                }}>{kpi.label}</div>
                <div style={{
                  marginTop: 4,
                  fontFamily: 'Gilroy, sans-serif',
                  fontSize: 10, fontWeight: 500,
                  color: LC_INK_MUTED,
                }}>{kpi.sub}</div>
              </div>
            );
          })}
        </div>

        {/* Recent Sessions */}
        <div style={{
          position: 'absolute',
          left: 340, top: 500,
          width: 740, height: 340,
          background: '#fff',
          borderRadius: 12,
          border: `1px solid ${LC_LINE}`,
          padding: '20px 24px',
          boxShadow: '0 1px 3px rgba(22,22,31,0.04)',
        }}>
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            marginBottom: 14,
          }}>
            <div style={{ fontFamily: 'Gilroy, sans-serif', fontSize: 15, fontWeight: 700, color: LC_INK }}>Recent Sessions</div>
            <div style={{ fontFamily: 'Gilroy, sans-serif', fontSize: 12, fontWeight: 500, color: LC_PURPLE }}>View All →</div>
          </div>
          {sessions.map((s, i) => {
            const rowT = Easing.easeOutCubic(clamp((t - 2.6 - i * 0.1) / 0.5, 0, 1));
            const pending = s.status === 'Pending Review';
            return (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 12,
                padding: '11px 0',
                borderBottom: i < sessions.length - 1 ? `1px solid ${LC_LINE}` : 'none',
                opacity: rowT,
                transform: `translateX(${(1 - rowT) * -14}px)`,
              }}>
                <div style={{
                  width: 30, height: 30, borderRadius: 15,
                  background: LC_PURPLE_SOFT, color: LC_PURPLE_DARK,
                  fontFamily: 'Gilroy, sans-serif', fontSize: 11, fontWeight: 700,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>T</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontFamily: 'Gilroy, sans-serif', fontSize: 13, fontWeight: 600, color: LC_INK }}>
                    TEST — {s.name}
                  </div>
                  <div style={{ fontFamily: 'Gilroy, sans-serif', fontSize: 11, fontWeight: 400, color: LC_INK_MUTED, marginTop: 2 }}>
                    Wildest Job Interview Ever: Can You Survive These Ridiculous Questions?
                  </div>
                </div>
                <div style={{
                  padding: '4px 10px', borderRadius: 10,
                  background: pending ? '#FEF3C7' : '#DBEAFE',
                  color: pending ? '#92400E' : '#1E40AF',
                  fontFamily: 'Gilroy, sans-serif', fontSize: 10, fontWeight: 700,
                }}>{s.status}</div>
                <div style={{ fontFamily: 'Gilroy, sans-serif', fontSize: 11, color: LC_INK_MUTED, width: 40, textAlign: 'right' }}>{s.ts}</div>
              </div>
            );
          })}
        </div>

        {/* Active Templates */}
        <div style={{
          position: 'absolute',
          left: 1100, top: 500,
          width: 380, height: 340,
          background: '#fff',
          borderRadius: 12,
          border: `1px solid ${LC_LINE}`,
          padding: '20px 24px',
          boxShadow: '0 1px 3px rgba(22,22,31,0.04)',
        }}>
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            marginBottom: 14,
          }}>
            <div style={{ fontFamily: 'Gilroy, sans-serif', fontSize: 15, fontWeight: 700, color: LC_INK }}>Active Templates</div>
            <div style={{ fontFamily: 'Gilroy, sans-serif', fontSize: 12, fontWeight: 500, color: LC_PURPLE }}>Manage →</div>
          </div>
          {[
            { name: 'Wildest Job Interview Ever: Can You Survive These Ridiculous Questions?', qs: 4, sessions: 29 },
            { name: 'Mishcon VI', qs: 4, sessions: 0 },
          ].map((tpl, i) => {
            const rowT = Easing.easeOutCubic(clamp((t - 3.2 - i * 0.15) / 0.5, 0, 1));
            return (
              <div key={i} style={{
                padding: '14px 12px', marginBottom: 8,
                borderRadius: 10,
                background: i === 0 ? LC_PURPLE_SOFT : '#F6F5FA',
                opacity: rowT,
                transform: `translateY(${(1 - rowT) * 10}px)`,
                display: 'flex', alignItems: 'center', gap: 10,
              }}>
                <div style={{
                  width: 32, height: 32, borderRadius: 8,
                  background: i === 0 ? LC_PURPLE : '#fff',
                  color: i === 0 ? '#fff' : LC_PURPLE,
                  border: i === 0 ? 'none' : `1px solid ${LC_LINE}`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <PSIcon kind="template" size={16}/>
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{
                    fontFamily: 'Gilroy, sans-serif', fontSize: 12, fontWeight: 600,
                    color: LC_INK,
                    whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                  }}>{tpl.name}</div>
                  <div style={{ fontFamily: 'Gilroy, sans-serif', fontSize: 10, fontWeight: 500, color: LC_INK_SOFT, marginTop: 2 }}>
                    {tpl.qs} questions
                  </div>
                </div>
                <div style={{
                  fontFamily: 'Gilroy, sans-serif', fontSize: 18, fontWeight: 700,
                  color: LC_INK, fontVariantNumeric: 'tabular-nums',
                }}>{tpl.sessions}<div style={{ fontSize: 9, fontWeight: 500, color: LC_INK_SOFT, marginTop: -2 }}>sessions</div></div>
              </div>
            );
          })}
        </div>

      </PSShell>

      {/* Callout person with speech bubble */}
      <PSCallout
        src="assets/callouts/callout2.png"
        side="right"
        heightPx={760}
        bubbleTop={220}
        appear={4.2}
        bubbleDelay={0.7}
        bubble={{
          label: 'TALENT LEAD · CHLOE',
          text: '"Every Monday I can see exactly where the pipeline stands — no spreadsheets, no chasing."',
          meta: 'Graduate Recruitment · Mishcon',
        }}
      />

      {/* Cursor gesture toward Create New Template */}
      <LCCursor path={[
        { t: 6.0, x: 1400, y: 940 },
        { t: 7.0, x: 500, y: 305 },
        { t: 7.7, x: 500, y: 305, click: true },
      ]}/>
    </>
  );
}

function KpiIcon({ kind, color }) {
  const s = { fill: 'none', stroke: color, strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round' };
  if (kind === 'camera') return <svg width="22" height="22" viewBox="0 0 22 22"><rect x="2" y="5" width="13" height="12" rx="2" {...s}/><path d="M15 9l5-2.5v9l-5-2.5z" {...s}/></svg>;
  if (kind === 'check') return <svg width="22" height="22" viewBox="0 0 22 22"><circle cx="11" cy="11" r="9" {...s}/><path d="M7 11l3 3 5-6" {...s}/></svg>;
  if (kind === 'clock') return <svg width="22" height="22" viewBox="0 0 22 22"><circle cx="11" cy="11" r="9" {...s}/><path d="M11 6v5l3.5 2.5" {...s}/></svg>;
  if (kind === 'star') return <svg width="22" height="22" viewBox="0 0 22 22"><path d="M11 3l2.5 5.2 5.5.8-4 3.9 1 5.5L11 15.8 6 18.4l1-5.5-4-3.9 5.5-.8z" {...s}/></svg>;
  return null;
}

Object.assign(window, { SceneOverview });