// tutorials/skyward-shell.jsx
// Abstracted Skyward-like interface (no branding, no real copy).
// Rows/cells use bars and dots to imply content without committing to text.

const SkyTokens = {
  navy: '#20417a',
  navyDark: '#16304f',
  blueRow: '#dfe9f8',
  blueRowAlt: '#eef3fb',
  blueHeader: '#e3ebf6',
  tabBlue: '#4b6fa8',
  gridBorder: '#b6c4d9',
  text: '#1b2636',
  textMuted: '#4a5b73',
  link: '#245bb5',
  cellHi: '#d9e7ff',
  cellHiStrong: '#b8d3f7',
  highlight: '#2f6fd8',
  highlightText: '#ffffff',
  bandA: '#9fe3a6',
  bandB: '#bfe5f5',
};

// ── Abstract primitives ─────────────────────────────────────────────────────
function Bar({ width = 80, height = 8, color = SkyTokens.text, opacity = 1, radius = 2 }) {
  return <div style={{ width, height, background: color, opacity, borderRadius: radius, display: 'inline-block' }} />;
}
function Dot({ size = 6, color = SkyTokens.text, opacity = 1 }) {
  return <div style={{ width: size, height: size, background: color, opacity, borderRadius: '50%', display: 'inline-block' }} />;
}

// ── Grades page (main Skyward-look screen) ──────────────────────────────────
function SkyGrades({ highlightRow = 3, highlightCol = 'S2' }) {
  // 10 rows, each a "class". The highlight row gets a real name + real grade letters
  // so the viewer reads the gesture. Everyone else is bars.
  const rows = [
    { nameW: 220, periodW: 100, grades: { T1: 'A', T2: 'A', S1: 'A' } },
    { nameW: 110, periodW: 110, grades: { T4: 'N', S2: 'N' } },
    { nameW: 240, periodW: 100, grades: { T1: 'C', T2: 'C', S1: 'C' } },
    {
      name: 'CHEMISTRY',
      meta: 'Period 2 \u2014 Semester 2',
      grades: { T3: 'B', T4: 'B', S2: 'B' },
    }, // highlighted
    { nameW: 130, periodW: 110, grades: { T1: 'A', T2: 'B', S1: 'A' } },
    { nameW: 130, periodW: 110, grades: { T3: 'A', S2: 'A' } },
    { nameW: 220, periodW: 110, grades: { T1: 'B', T2: 'C', S1: 'B' } },
    { nameW: 220, periodW: 110, grades: { T3: 'C', S2: 'C' } },
    { nameW: 160, periodW: 110, grades: { T1: 'B', T2: 'C', S1: 'C' } },
    { nameW: 160, periodW: 110, grades: { T3: 'N', T4: 'N', S2: 'N' } },
  ];
  const cols = ['Missing', 'T1', 'T2', 'T3', 'T4', 'S1', 'S2'];
  const hotCols = ['T4', 'S2'];

  return (
    <div style={{
      position: 'absolute', inset: 0, background: '#fff',
      fontFamily: 'Inter, system-ui, sans-serif', color: SkyTokens.text, overflow: 'hidden',
    }}>
      {/* Top nav */}
      <div style={{ height: 56, background: SkyTokens.navy, display: 'flex', alignItems: 'center', gap: 20, padding: '0 24px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <svg width="36" height="22" viewBox="0 0 36 22"><path d="M2 18 Q 12 2, 34 5 L 34 20 L 2 20 Z" fill="#fff" opacity="0.9"/></svg>
        </div>
        {[1,2,3,4].map(i => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <div style={{ width: 20, height: 20, borderRadius: '50%', background: 'rgba(255,255,255,0.25)' }} />
            <Bar width={50} height={6} color="#fff" opacity={0.7} />
          </div>
        ))}
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 18 }}>
          {[40, 56, 50, 46].map((w, i) => <Bar key={i} width={w} height={6} color="#fff" opacity={0.7} />)}
        </div>
      </div>
      {/* Menu bar */}
      <div style={{ height: 36, background: SkyTokens.navyDark, display: 'flex', alignItems: 'center', gap: 16, padding: '0 24px' }}>
        <div style={{ display: 'flex', gap: 3, flexDirection: 'column' }}>
          {[0,1,2].map(i => <Bar key={i} width={14} height={2} color="#fff" opacity={0.75} />)}
        </div>
        <Bar width={180} height={7} color="#fff" opacity={0.85} />
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 14 }}>
          {[50, 60, 70].map((w, i) => <Bar key={i} width={w} height={6} color="#fff" opacity={0.6} />)}
        </div>
      </div>
      {/* Filter band */}
      <div style={{ padding: '16px 32px 8px', display: 'flex', gap: 12, alignItems: 'center' }}>
        <Bar width={90} height={7} color={SkyTokens.textMuted} />
        <div style={{ padding: '5px 12px', border: `1px solid ${SkyTokens.gridBorder}`, borderRadius: 3 }}><Bar width={80} height={6} color={SkyTokens.text} /></div>
        <div style={{ padding: '5px 12px', border: `1px solid ${SkyTokens.gridBorder}`, borderRadius: 3 }}><Bar width={50} height={6} color={SkyTokens.text} /></div>
        <div style={{ marginLeft: 'auto' }}><Bar width={260} height={6} color={SkyTokens.textMuted} /></div>
      </div>
      {/* Tabs */}
      <div style={{ padding: '10px 32px 0', display: 'flex', gap: 2, borderBottom: `1px solid ${SkyTokens.gridBorder}` }}>
        {[0, 1, 2].map(i => (
          <div key={i} style={{
            padding: '10px 22px',
            background: i === 0 ? '#fff' : SkyTokens.blueHeader,
            border: `1px solid ${SkyTokens.gridBorder}`, borderBottom: i === 0 ? '1px solid #fff' : 'none',
            borderRadius: '4px 4px 0 0', marginBottom: -1,
          }}>
            <Bar width={i === 0 ? 60 : 50} height={7} color={i === 0 ? SkyTokens.tabBlue : SkyTokens.textMuted} />
          </div>
        ))}
      </div>
      {/* Table */}
      <div style={{ padding: '0 32px' }}>
        <div style={{ marginTop: 16, display: 'flex', alignItems: 'center', gap: 10 }}>
          <Bar width={130} height={8} color={SkyTokens.text} />
        </div>
        <table style={{ width: '100%', marginTop: 10, borderCollapse: 'collapse' }}>
          <thead>
            <tr style={{ background: SkyTokens.blueHeader, height: 36 }}>
              <th style={thCell(260)}><Bar width={50} height={7} color={SkyTokens.text} /></th>
              {cols.map(c => (
                <th key={c} style={{ ...thCell(72), background: hotCols.includes(c) ? SkyTokens.gridBorder : SkyTokens.blueHeader, textAlign: 'center' }}>
                  <Bar width={c === 'Missing' ? 56 : 20} height={7} color={SkyTokens.text} />
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {rows.map((r, i) => {
              const isHot = i === highlightRow;
              return (
                <tr key={i} style={{ background: i % 2 === 0 ? '#fff' : SkyTokens.blueRowAlt, height: 46 }}>
                  <td style={tdCell()}>
                    {r.name ? (
                      <>
                        <div style={{
                          fontFamily: 'Inter', fontWeight: 700, fontSize: 13,
                          color: SkyTokens.link, textDecoration: 'underline', letterSpacing: '0.02em',
                        }}>{r.name}</div>
                        <div style={{ height: 3 }} />
                        <div style={{ fontFamily: 'Inter', fontSize: 11, color: SkyTokens.textMuted }}>{r.meta}</div>
                      </>
                    ) : (
                      <>
                        <Bar width={r.nameW} height={8} color={SkyTokens.link} />
                        <div style={{ height: 5 }} />
                        <Bar width={r.periodW} height={5} color={SkyTokens.textMuted} />
                      </>
                    )}
                  </td>
                  <td style={tdCell(true)}></td>
                  {['T1', 'T2', 'T3', 'T4', 'S1', 'S2'].map(col => {
                    const g = r.grades[col];
                    const isHiCell = isHot && col === highlightCol;
                    return (
                      <td key={col} {...(isHiCell ? { 'data-target': 'grade-cell' } : {})} style={{
                        ...tdCell(true),
                        background: isHiCell ? SkyTokens.cellHiStrong : 'transparent',
                        position: 'relative',
                      }}>
                        {g && (
                          isHot ? (
                            <span style={{
                              fontFamily: 'Inter', fontWeight: 700, fontSize: 13,
                              color: SkyTokens.link, textDecoration: 'underline',
                            }}>{g}</span>
                          ) : (
                            <div style={{ display: 'inline-block', padding: '3px 0' }}>
                              <Bar width={g === 'N' ? 12 : 16} height={7} color={SkyTokens.link} />
                              <div style={{ height: 2 }} />
                              <Bar width={g === 'N' ? 12 : 16} height={1.5} color={SkyTokens.link} />
                            </div>
                          )
                        )}
                      </td>
                    );
                  })}
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );

  function thCell(w) { return { padding: '10px', border: `1px solid ${SkyTokens.gridBorder}`, textAlign: 'left', width: w }; }
  function tdCell(center) { return { padding: '8px 10px', border: `1px solid ${SkyTokens.gridBorder}`, textAlign: center ? 'center' : 'left', verticalAlign: 'top' }; }
}

// ── Calculations flyout (weights) — abstracted ──────────────────────────────
function SkyCalculations({ selectedAll = false }) {
  // 3 categories with real names + weight percents; other cells stay as bars.
  const rows = [
    { cat: 'Practice',  weight: '20%', cells: [30, 38, 62, 28] },
    { cat: 'Formative', weight: '30%', cells: [30, 38, 62, 28] },
    { cat: 'Summative', weight: '50%', cells: [30, 38, 72, 28] },
  ];
  const headerBars = [60, 72, 60, 100, 100]; // for the non-text columns

  return (
    <div style={{
      background: '#fff', border: `1px solid ${SkyTokens.gridBorder}`,
      boxShadow: '0 24px 60px rgba(20,40,80,0.25)', fontFamily: 'Inter, sans-serif', color: SkyTokens.text,
      width: 640,
    }}>
      <div style={{ background: SkyTokens.navy, padding: '12px 18px' }}>
        <div style={{ fontFamily: 'Inter', fontWeight: 700, fontSize: 13, color: '#fff', letterSpacing: '0.02em' }}>Calculations</div>
      </div>
      <div style={{ padding: '18px 22px' }}>
        {/* subject row: class + grade */}
        <div style={{ display: 'flex', gap: 18, alignItems: 'center' }}>
          <div style={{ fontFamily: 'Inter', fontWeight: 700, fontSize: 14, color: SkyTokens.text, letterSpacing: '0.02em' }}>CHEMISTRY</div>
          <div style={{ fontFamily: 'Inter', fontWeight: 700, fontSize: 13, color: SkyTokens.textMuted }}>S2</div>
          <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'baseline', gap: 8 }}>
            <div style={{ fontFamily: 'Inter', fontWeight: 700, fontSize: 15, color: SkyTokens.text }}>B</div>
            <div style={{ fontFamily: 'Inter', fontSize: 13, color: SkyTokens.text }}>83.04%</div>
          </div>
        </div>
        {/* SECTION CATEGORIES label */}
        <div style={{
          marginTop: 18, fontFamily: 'Inter', fontWeight: 700, fontSize: 11,
          letterSpacing: '0.08em', color: SkyTokens.tabBlue,
        }}>SECTION CATEGORIES</div>
        {/* Table */}
        <div style={{ marginTop: 10, borderBottom: `1px solid ${SkyTokens.gridBorder}` }}>
          {/* header row */}
          <div style={{
            display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 1.4fr 1.3fr', gap: 10,
            padding: '10px 8px', alignItems: 'center',
            background: selectedAll ? SkyTokens.highlight : 'transparent',
          }}>
            <div style={{
              fontFamily: 'Inter', fontWeight: 700, fontSize: 10.5,
              letterSpacing: '0.06em', color: selectedAll ? '#fff' : SkyTokens.tabBlue,
              textTransform: 'uppercase',
            }}>Category</div>
            <div style={{
              fontFamily: 'Inter', fontWeight: 700, fontSize: 10.5,
              letterSpacing: '0.06em', color: selectedAll ? '#fff' : SkyTokens.tabBlue,
              textTransform: 'uppercase', justifySelf: 'end',
            }}>Weight</div>
            {headerBars.map((w, i) => (
              <div key={i} style={{ justifySelf: 'end' }}>
                <Bar width={w} height={6} color={selectedAll ? '#fff' : SkyTokens.tabBlue} />
              </div>
            ))}
          </div>
          {rows.map((r, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 1.4fr 1.3fr', gap: 10,
              padding: '13px 8px', alignItems: 'center',
              background: selectedAll ? SkyTokens.highlight : 'transparent',
            }}>
              <div style={{
                fontFamily: 'Inter', fontWeight: 600, fontSize: 13,
                color: selectedAll ? '#fff' : SkyTokens.text,
              }}>{r.cat}</div>
              <div style={{
                fontFamily: 'Inter', fontWeight: 700, fontSize: 13,
                color: selectedAll ? '#fff' : SkyTokens.text,
                justifySelf: 'end', fontVariantNumeric: 'tabular-nums',
              }}>{r.weight}</div>
              {r.cells.map((w, j) => (
                <div key={j} style={{ justifySelf: 'end' }}>
                  <Bar width={w} height={7} color={selectedAll ? '#fff' : SkyTokens.text} />
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ── Grade flyout (assignments table) — abstracted ───────────────────────────
function SkyFlyout({ selectedAll = false }) {
  const band = (color) => ({ header: true, band: color });
  // First assignment after the first band gets a real name + date + score.
  const rows = [
    { ...band(SkyTokens.bandA), catName: 'Practice', weight: '20%' },
    { name: 'Homework 7.3', date: '03/20', grade: 'A', score: '9/10' },
    { nameW: 230, date: true },
    { ...band(SkyTokens.bandA), catName: 'Formative', weight: '30%' },
    { nameW: 180, date: true },
    { nameW: 150, date: true, warn: true },
    { nameW: 160, date: true },
    { ...band(SkyTokens.bandB), catName: 'Summative', weight: '50%' },
    { nameW: 220, date: true, warn: true },
    { nameW: 230, date: true },
    { nameW: 220, date: true, warn: true },
    { nameW: 230, date: true, warn: true },
    { nameW: 140, date: true },
    { nameW: 220, date: true, warn: true },
  ];

  const hiBg = selectedAll ? SkyTokens.highlight : null;
  const cellColor = (row) => {
    if (selectedAll) return '#fff';
    if (row.header) return SkyTokens.text;
    return SkyTokens.link;
  };

  return (
    <div style={{
      background: '#fff', border: `2px solid ${SkyTokens.navy}`,
      fontFamily: 'Inter, sans-serif', width: 560,
      boxShadow: '0 24px 60px rgba(20,40,80,0.25)', overflow: 'hidden',
    }}>
      {/* Header */}
      <div style={{ padding: '12px 14px', display: 'flex', gap: 12, alignItems: 'center', borderBottom: `1px solid ${SkyTokens.gridBorder}`, background: hiBg || 'transparent' }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: 'Inter', fontWeight: 700, fontSize: 13, color: selectedAll ? '#fff' : SkyTokens.text, letterSpacing: '0.02em' }}>CHEMISTRY</div>
          <div style={{ height: 3 }} />
          <div style={{ fontFamily: 'Inter', fontSize: 11, color: selectedAll ? 'rgba(255,255,255,0.85)' : SkyTokens.textMuted }}>Period 2 — Semester 2</div>
        </div>
        <Bar width={90} height={6} color={selectedAll ? '#fff' : SkyTokens.textMuted} />
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, fontFamily: 'Inter' }}>
          <div style={{ fontWeight: 700, fontSize: 14, color: selectedAll ? '#fff' : SkyTokens.text }}>B</div>
          <div style={{ fontSize: 12, color: selectedAll ? '#fff' : SkyTokens.text }}>83.04%</div>
        </div>
        {['Calculations', 'Scale', 'Print'].map(lbl => (
          <div key={lbl} style={{ border: `1px solid ${selectedAll ? 'rgba(255,255,255,0.4)' : SkyTokens.gridBorder}`, padding: '5px 9px', borderRadius: 3, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3, background: selectedAll ? 'rgba(255,255,255,0.08)' : 'transparent' }}>
            <div style={{ width: 16, height: 14, background: selectedAll ? '#fff' : SkyTokens.tabBlue, borderRadius: 2, opacity: 0.6 }} />
            <div style={{ fontFamily: 'Inter', fontWeight: 700, fontSize: 8.5, color: selectedAll ? '#fff' : SkyTokens.tabBlue, letterSpacing: '0.04em' }}>{lbl}</div>
          </div>
        ))}
      </div>
      {/* Header row */}
      <div style={{
        display: 'grid', gridTemplateColumns: '20px 2fr 60px 40px 60px 80px 44px', gap: 8,
        padding: '9px 10px', background: hiBg || SkyTokens.blueHeader, alignItems: 'center',
      }}>
        <div />
        <div style={{ fontFamily: 'Inter', fontWeight: 700, fontSize: 10.5, letterSpacing: '0.05em', color: selectedAll ? '#fff' : SkyTokens.text, textTransform: 'uppercase' }}>Description</div>
        <div style={{ fontFamily: 'Inter', fontWeight: 700, fontSize: 10.5, letterSpacing: '0.05em', color: selectedAll ? '#fff' : SkyTokens.text, textTransform: 'uppercase' }}>Due</div>
        <div style={{ fontFamily: 'Inter', fontWeight: 700, fontSize: 10.5, letterSpacing: '0.05em', color: selectedAll ? '#fff' : SkyTokens.text, textTransform: 'uppercase' }}>Gr</div>
        <div style={{ fontFamily: 'Inter', fontWeight: 700, fontSize: 10.5, letterSpacing: '0.05em', color: selectedAll ? '#fff' : SkyTokens.text, textTransform: 'uppercase' }}>Score</div>
        <div style={{ fontFamily: 'Inter', fontWeight: 700, fontSize: 10.5, letterSpacing: '0.05em', color: selectedAll ? '#fff' : SkyTokens.text, textTransform: 'uppercase' }}>Points</div>
        <div />
      </div>
      {/* Rows */}
      {rows.map((r, i) => {
        const bg = r.header ? (hiBg || r.band) : (hiBg || (i % 2 === 0 ? '#fff' : SkyTokens.blueRowAlt));
        const col = cellColor(r);
        return (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '20px 2fr 60px 40px 60px 80px 44px', gap: 8,
            padding: '8px 10px', background: bg, alignItems: 'center', minHeight: 28,
          }}>
            <div style={{ textAlign: 'center', color: '#d93028', fontWeight: 800, fontFamily: 'Inter' }}>{r.warn ? '!' : ''}</div>
            {r.header ? (
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
                <div style={{ fontFamily: 'Inter', fontWeight: 700, fontSize: 12, color: col }}>{r.catName}</div>
                <div style={{ fontFamily: 'Inter', fontWeight: 700, fontSize: 11, color: col, opacity: 0.75 }}>{r.weight}</div>
              </div>
            ) : r.name ? (
              <div style={{ fontFamily: 'Inter', fontSize: 12, color: col, textDecoration: 'underline' }}>{r.name}</div>
            ) : (
              <div><Bar width={r.nameW} height={r.header ? 7 : 6} color={col} /></div>
            )}
            <div>{r.date && (r.name ? (
              <div style={{ fontFamily: 'Inter', fontSize: 11, color: selectedAll ? '#fff' : SkyTokens.text, fontVariantNumeric: 'tabular-nums' }}>{r.date}</div>
            ) : (
              <Bar width={50} height={5} color={selectedAll ? '#fff' : SkyTokens.text} />
            ))}</div>
            <div>{r.name ? (
              <div style={{ fontFamily: 'Inter', fontWeight: 700, fontSize: 11, color: col }}>{r.grade}</div>
            ) : (
              <Bar width={12} height={6} color={col} />
            )}</div>
            <div>{r.name ? (
              <div style={{ fontFamily: 'Inter', fontSize: 11, color: selectedAll ? '#fff' : SkyTokens.text, fontVariantNumeric: 'tabular-nums' }}>90%</div>
            ) : (
              <Bar width={44} height={5} color={selectedAll ? '#fff' : SkyTokens.text} />
            )}</div>
            <div>{r.name ? (
              <div style={{ fontFamily: 'Inter', fontSize: 11, color: selectedAll ? '#fff' : SkyTokens.text, fontVariantNumeric: 'tabular-nums' }}>{r.score}</div>
            ) : (
              <Bar width={64} height={5} color={selectedAll ? '#fff' : SkyTokens.text} />
            )}</div>
            <div>{!r.header && <Bar width={10} height={5} color={col} />}</div>
          </div>
        );
      })}
    </div>
  );
}

// ── Screenshot thumbnail (tiny Skyward UI shown inside the paste box) ──────
function ScreenshotThumb({ kind = 'calc' }) {
  // Render a very compact "screenshot" of either Calculations or Flyout.
  // Width: 410px. Use a faux window chrome + tiny rows.
  const isFlyout = kind === 'flyout';
  const rowCount = isFlyout ? 9 : 4;
  const headerLabel = isFlyout ? 'CHEMISTRY' : 'CHEMISTRY · CALCULATIONS';
  return (
    <div style={{
      width: '100%', borderRadius: 6, overflow: 'hidden',
      border: '1px solid rgba(142,213,255,0.3)',
      boxShadow: '0 4px 14px rgba(0,0,0,0.5)',
      background: '#fff', fontFamily: 'Inter, sans-serif',
    }}>
      {/* Faux browser/dialog chrome */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 5, padding: '5px 8px', background: '#e6ebf3', borderBottom: '1px solid rgba(0,0,0,0.08)' }}>
        <div style={{ width: 7, height: 7, borderRadius: '50%', background: '#ff5f57' }} />
        <div style={{ width: 7, height: 7, borderRadius: '50%', background: '#febc2e' }} />
        <div style={{ width: 7, height: 7, borderRadius: '50%', background: '#28c840' }} />
        <div style={{ marginLeft: 8, fontSize: 9, fontWeight: 700, color: '#39536f', letterSpacing: '0.05em' }}>{headerLabel}</div>
      </div>
      {/* Body */}
      <div style={{ background: isFlyout ? '#1f4eb6' : '#fff', padding: '6px 8px' }}>
        {/* Header strip — like the CHEMISTRY title block */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 5, padding: '4px 6px',
          background: isFlyout ? 'rgba(255,255,255,0.08)' : '#f3f6fa',
          borderRadius: 3, marginBottom: 5,
        }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 8, fontWeight: 700, color: isFlyout ? '#fff' : '#0f274d', letterSpacing: '0.04em' }}>CHEMISTRY</div>
            <div style={{ fontSize: 6, color: isFlyout ? 'rgba(255,255,255,0.8)' : '#5b6b7a' }}>Period 2 — Semester 2</div>
          </div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 3 }}>
            <span style={{ fontSize: 8, fontWeight: 700, color: isFlyout ? '#fff' : '#0f274d' }}>B</span>
            <span style={{ fontSize: 6, color: isFlyout ? '#fff' : '#0f274d' }}>83.04%</span>
          </div>
          {['Calc', 'Scale', 'Print'].map(lbl => (
            <div key={lbl} style={{
              fontSize: 5, fontWeight: 700, padding: '2px 4px', borderRadius: 2,
              border: `1px solid ${isFlyout ? 'rgba(255,255,255,0.4)' : 'rgba(0,0,0,0.15)'}`,
              color: isFlyout ? '#fff' : '#1f4eb6',
              background: isFlyout ? 'rgba(255,255,255,0.05)' : '#fff',
            }}>{lbl}</div>
          ))}
        </div>
        {/* Column headers */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: isFlyout ? '4fr 1fr 1fr 1.5fr 1.5fr 1fr' : '3fr 1fr 1fr 1fr 1fr 1fr',
          gap: 4, padding: '3px 4px',
          background: isFlyout ? 'rgba(0,0,0,0.15)' : '#dae2ee',
          borderRadius: 2, marginBottom: 3,
        }}>
          {(isFlyout ? ['DESC', 'DUE', 'GR', 'SCORE', 'POINTS', ''] : ['CATEGORY', 'WT%', 'PTS', 'EARN', 'PCT', 'GR']).map((h, i) => (
            <div key={i} style={{ fontSize: 5, fontWeight: 700, color: isFlyout ? '#fff' : '#1f4eb6', letterSpacing: '0.05em' }}>{h}</div>
          ))}
        </div>
        {/* Rows */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
          {Array.from({ length: rowCount }).map((_, i) => {
            const isCategory = !isFlyout && i === 0 || isFlyout && (i === 0 || i === 3 || i === 6);
            const labels = isFlyout
              ? ['Practice 20%', 'Homework 7.3', 'Unit 6 Lab', 'Formative 30%', 'Unit 6 Test Prep', 'U6 Reflection', 'Summative 50%', 'Unit 5 Lab', 'Unit 7 Test']
              : ['Practice', 'Formative', 'Summative', 'Final'];
            return (
              <div key={i} style={{
                display: 'grid',
                gridTemplateColumns: isFlyout ? '4fr 1fr 1fr 1.5fr 1.5fr 1fr' : '3fr 1fr 1fr 1fr 1fr 1fr',
                gap: 4, padding: '2px 4px', alignItems: 'center',
                background: isFlyout
                  ? (i % 2 === 0 ? 'rgba(255,255,255,0.06)' : 'transparent')
                  : (i % 2 === 0 ? '#fff' : '#f3f6fa'),
                borderRadius: 1,
              }}>
                <div style={{
                  fontSize: 6, fontWeight: isCategory ? 700 : 500,
                  color: isFlyout ? '#fff' : '#1f4eb6',
                  textDecoration: isCategory ? 'none' : 'underline',
                }}>{labels[i] || '—'}</div>
                {[0,1,2,3,4].map(c => (
                  <div key={c} style={{ height: 3, background: isFlyout ? 'rgba(255,255,255,0.55)' : 'rgba(31,78,182,0.45)', borderRadius: 1, width: c === 0 ? '50%' : '70%' }} />
                ))}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

// ── lock in. Import dialog — abstracted (no literal copy) ───────────────────
function LockInImportDialog({ filled = 0, highlightPaste = false, screenshotMode = false }) {
  // filled: 0 = empty, 1 = weights paste, 2 = weights + grades paste
  // screenshotMode: when true, paste box shows shrunken Skyward UI screenshots
  //                 instead of bar fillers, and the active tab changes.
  const tabs = screenshotMode
    ? ['Upload Files', 'Paste CSV', 'Paste Screenshot']
    : ['Upload Files', 'Paste CSV', 'Paste from Skyward'];
  return (
    <div style={{
      width: 460, background: '#171f33', borderRadius: 16, border: '1px solid rgba(142,213,255,0.15)',
      boxShadow: '0 30px 80px rgba(0,0,0,0.5)', fontFamily: 'Inter, sans-serif', color: '#dae2fd',
      padding: 22,
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ fontFamily: 'Space Grotesk', fontWeight: 700, fontSize: 20 }}>Import Grades</div>
        <div style={{ color: '#87929a', fontSize: 18 }}>×</div>
      </div>
      <div style={{ display: 'flex', gap: 22, marginTop: 18, borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
        {tabs.map((t, i) => {
          const active = i === 2;
          return (
            <div key={t} style={{
              padding: '10px 0', fontSize: 12, fontWeight: 700,
              color: active ? '#8ed5ff' : '#87929a',
              borderBottom: active ? '2px solid #8ed5ff' : '2px solid transparent',
            }}>{t}</div>
          );
        })}
      </div>
      {/* Instruction paragraph — bars */}
      <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 7 }}>
        {[400, 380, 360, 200].map((w, i) => (
          <Bar key={i} width={w} height={5} color="#bdc8d1" opacity={0.6} />
        ))}
      </div>
      {/* Paste box */}
      <div style={{
        marginTop: 16, background: '#060e20', borderRadius: 8, padding: 14,
        minHeight: 130,
        border: highlightPaste ? '1.5px solid #8ed5ff' : '1px solid transparent',
        boxShadow: highlightPaste ? '0 0 0 4px rgba(142,213,255,0.15)' : 'none',
        transition: 'all 0.2s', position: 'relative', overflow: 'hidden',
      }}>
        {filled === 0 && <Bar width={200} height={5} color="#87929a" opacity={0.5} />}
        {!screenshotMode && filled >= 1 && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {/* subject line */}
            <div style={{ display: 'flex', gap: 8 }}>
              <Bar width={140} height={6} color="#dae2fd" />
              <Bar width={24} height={6} color="#dae2fd" />
              <div style={{ marginLeft: 'auto' }}><Bar width={60} height={6} color="#dae2fd" /></div>
            </div>
            <Bar width={100} height={5} color="#8ed5ff" opacity={0.8} />
            {/* weights rows */}
            {[0,1,2].map(i => (
              <div key={i} style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                <Bar width={[100,120,170][i]} height={5} color="#dae2fd" />
                <div style={{ marginLeft: 'auto', display: 'flex', gap: 6 }}>
                  {[24,28,30,56,24].map((w, j) => <Bar key={j} width={w} height={5} color="#dae2fd" opacity={0.85} />)}
                </div>
              </div>
            ))}
          </div>
        )}
        {!screenshotMode && filled >= 2 && (
          <div style={{ marginTop: 10, display: 'flex', flexDirection: 'column', gap: 5 }}>
            <Bar width={120} height={5} color="#8ed5ff" opacity={0.8} />
            {[180, 220, 200, 210, 190, 230, 170, 210].map((w, i) => (
              <div key={i} style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                <Bar width={w} height={4} color="#dae2fd" opacity={0.85} />
                <div style={{ marginLeft: 'auto', display: 'flex', gap: 5 }}>
                  {[40, 28, 46].map((cw, j) => <Bar key={j} width={cw} height={4} color="#dae2fd" opacity={0.7} />)}
                </div>
              </div>
            ))}
          </div>
        )}
        {screenshotMode && filled >= 1 && (
          <ScreenshotThumb kind={filled >= 2 ? 'flyout' : 'calc'} />
        )}
      </div>
      {/* source row */}
      <div style={{ marginTop: 14, display: 'flex', alignItems: 'center', gap: 10 }}>
        <Bar width={46} height={6} color="#bdc8d1" />
        <div style={{ padding: '6px 12px', background: '#060e20', borderRadius: 6, border: '1px solid #8ed5ff', display: 'flex', alignItems: 'center', gap: 6 }}>
          <Bar width={54} height={6} color="#8ed5ff" />
          <span style={{ color: '#8ed5ff', fontSize: 10 }}>▾</span>
        </div>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 10, alignItems: 'center' }}>
          <Bar width={46} height={7} color="#bdc8d1" opacity={0.6} />
          <div style={{ padding: '8px 16px', background: '#8ed5ff', borderRadius: 9999 }}>
            <Bar width={46} height={7} color="#00354a" />
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Fake cursor ─────────────────────────────────────────────────────────────
function FakeCursor({ x = 0, y = 0, clicking = false }) {
  return (
    <div style={{ position: 'absolute', left: x, top: y, pointerEvents: 'none', zIndex: 100 }}>
      {clicking && (
        <div style={{
          position: 'absolute', left: -16, top: -16, width: 32, height: 32,
          borderRadius: '50%', background: 'rgba(142,213,255,0.35)',
          border: '2px solid #8ed5ff',
        }} />
      )}
      <svg width="24" height="28" viewBox="0 0 22 26" style={{ filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.5))' }}>
        <path d="M2 2 L2 20 L7 16 L10 22 L13 21 L10 15 L17 15 Z" fill="#ffffff" stroke="#0b1326" strokeWidth="1.5" strokeLinejoin="round"/>
      </svg>
    </div>
  );
}

// ── Keycap chord ────────────────────────────────────────────────────────────
function KeyChord({ keys = [], x, y }) {
  return (
    <div style={{ position: 'absolute', left: x, top: y, display: 'flex', gap: 8, zIndex: 90, alignItems: 'center' }}>
      {keys.map((k, i) => (
        <React.Fragment key={i}>
          <div style={{
            padding: '10px 16px', background: '#171f33', color: '#8ed5ff',
            border: '1px solid rgba(142,213,255,0.4)', borderRadius: 10,
            fontFamily: 'Space Grotesk, sans-serif', fontWeight: 700, fontSize: 18,
            boxShadow: '0 6px 20px rgba(0,0,0,0.4), 0 0 24px rgba(142,213,255,0.3)',
            minWidth: 44, textAlign: 'center',
          }}>{k}</div>
          {i < keys.length - 1 && <div style={{ color: '#87929a', fontSize: 20 }}>+</div>}
        </React.Fragment>
      ))}
    </div>
  );
}

// ── Step chip ───────────────────────────────────────────────────────────────
function StepChip({ step, total, label }) {
  return (
    <div style={{
      position: 'absolute', left: 48, top: 32, display: 'flex', gap: 14, alignItems: 'center',
      background: 'rgba(11,19,38,0.92)', backdropFilter: 'blur(12px)',
      padding: '12px 22px', borderRadius: 9999,
      border: '1px solid rgba(142,213,255,0.25)',
      boxShadow: '0 10px 30px rgba(0,0,0,0.4)',
      zIndex: 80,
    }}>
      <div style={{ fontFamily: 'Space Grotesk', fontWeight: 700, fontSize: 12, color: '#8ed5ff', letterSpacing: '0.1em' }}>STEP {step}/{total}</div>
      <div style={{ width: 1, height: 16, background: 'rgba(255,255,255,0.15)' }} />
      <div style={{ fontFamily: 'Space Grotesk', fontWeight: 700, fontSize: 16, color: '#dae2fd' }}>{label}</div>
    </div>
  );
}

Object.assign(window, { SkyGrades, SkyCalculations, SkyFlyout, LockInImportDialog, FakeCursor, KeyChord, StepChip, SkyTokens });