// Trove — homepage showcase strip
// A continuously scrolling row of real product screenshots. Add to SHOWCASE_ITEMS
// to feature something new (library packs can slot in here when they launch).

// Names, slugs and categories mirror tools.trove.education. Thumbnails are
// served from that site, so a new tool only needs a line here.
const SHOWCASE_ITEMS = [
  { slug: 'number-line', name: 'Interactive Number Line', tag: 'Number' },
  { slug: 'rounding', name: 'Rounding Number Line', tag: 'Number' },
  { slug: 'million', name: 'How Big Is a Million?', tag: 'Number' },
  { slug: 'negative-numbers-lift', name: 'Negative Numbers Lift', tag: 'Number' },
  { slug: 'estimation', name: 'Estimation Station', tag: 'Number' },
  { slug: 'place-value', name: 'Place Value Counters', tag: 'Number' },
  { slug: '100-square', name: 'Interactive 100 Square', tag: 'Number' },
  { slug: 'number-shapes', name: 'Number Shapes', tag: 'Number' },
  { slug: 'dienes', name: 'Dienes Base 10 Blocks', tag: 'Number' },
  { slug: 'counters', name: 'Counters', tag: 'Number' },
  { slug: 'part-whole-model', name: 'Part-Whole Model', tag: 'Number' },
  { slug: 'number-cards', name: 'Number Cards', tag: 'Number' },
  { slug: 'rekenrek', name: 'Rekenrek', tag: 'Number' },
  { slug: 'ten-frame', name: 'Interactive Ten Frame', tag: 'Number' },
  { slug: 'bar-model', name: 'Bar Model', tag: 'Calculation' },
  { slug: 'short-multiplication', name: 'Short Multiplication', tag: 'Calculation' },
  { slug: 'short-division', name: 'Short Division', tag: 'Calculation' },
  { slug: 'column-method', name: 'Column Addition and Subtraction', tag: 'Calculation' },
  { slug: 'times-table-patterns', name: 'Times Table Patterns', tag: 'Calculation' },
  { slug: 'counting-stick', name: 'Counting Stick', tag: 'Calculation' },
  { slug: 'multiplication-square', name: 'Multiplication Square', tag: 'Calculation' },
  { slug: 'circuits', name: 'Circuits', tag: 'Science' },
  { slug: 'solar-system', name: 'Solar System', tag: 'Science' },
  { slug: 'water-cycle', name: 'The Water Cycle', tag: 'Science' },
  { slug: 'plant-parts', name: 'Parts of a Plant', tag: 'Science' },
  { slug: 'food-chains', name: 'Food Chain Builder', tag: 'Science' },
  { slug: 'shadows', name: 'Shadow Investigation', tag: 'Science' },
  { slug: 'human-body', name: 'Human Body Diagram', tag: 'Science' },
  { slug: 'states-of-matter', name: 'Solids, Liquids and Gases', tag: 'Science' },
  { slug: 'punctuation', name: 'Punctuation Practice', tag: 'English' },
  { slug: 'sound-buttons', name: 'Sound Buttons', tag: 'English', hidden: true },
  { slug: 'fraction-circles', name: 'Fraction Circles', tag: 'Fractions' },
  { slug: 'fraction-beats', name: 'Fraction Beats', tag: 'Fractions' },
  { slug: 'fraction-wall', name: 'Interactive Fraction Wall', tag: 'Fractions' },
  { slug: 'reading-scales', name: 'Reading Scales', tag: 'Measure' },
  { slug: 'ruler', name: 'Interactive Ruler', tag: 'Measure' },
  { slug: 'protractor', name: 'Protractor', tag: 'Measure' },
  { slug: 'money', name: 'UK Coins', tag: 'Measure' },
  { slug: 'telling-the-time', name: 'Teaching Clock', tag: 'Measure' },
  { slug: 'tally-chart', name: 'Tally Chart', tag: 'Data' },
  { slug: 'pictogram', name: 'Pictogram', tag: 'Data' },
  { slug: 'bar-chart', name: 'Bar Chart and Block Diagram', tag: 'Data' },
  { slug: 'symmetry', name: 'Lines of Symmetry', tag: 'Shape & Space' },
  { slug: 'coordinates', name: 'Coordinates Grid', tag: 'Shape & Space' },
  { slug: 'pattern-blocks', name: 'Pattern Blocks', tag: 'Shape & Space' },
  { slug: 'geoboard', name: 'Geoboard', tag: 'Shape & Space' },
  { slug: 'dice', name: 'Interactive Dice', tag: 'Classroom' },
  { slug: 'spinner', name: 'Interactive Spinner', tag: 'Classroom' },
  { slug: 'random-number', name: 'Random Number Generator', tag: 'Classroom', hidden: true },
  { slug: 'timer', name: 'Classroom Timer', tag: 'Classroom' },
  { slug: 'stopwatch', name: 'Stopwatch', tag: 'Classroom' },
  { slug: 'name-picker', name: 'Random Name Picker', tag: 'Classroom', hidden: true },
];

function ShowcaseCard({ item }) {
  return (
    <a href={`${window.TOOLS_URL}/tools/${item.slug}`} className="showcase-card"
      style={{ flex: '0 0 auto', width: 300, textDecoration: 'none', color: 'inherit', display: 'flex', flexDirection: 'column', gap: 10 }}>
      <div style={{ width: '100%', aspectRatio: '16 / 10', borderRadius: 'var(--radius)', overflow: 'hidden', background: 'var(--bg-sunken)', border: '1px solid var(--border-strong)', boxShadow: 'var(--shadow-sm)' }}>
        <img src={`${window.TOOLS_URL}/thumbs/${item.slug}.png`} alt="" loading="lazy"
          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
      </div>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 10 }}>
        <span style={{ fontSize: 14.5, fontWeight: 700, color: 'var(--fg)' }}>{item.name}</span>
        <span className="t-small" style={{ color: 'var(--fg-subtle)', flexShrink: 0 }}>{item.tag}</span>
      </div>
    </a>
  );
}

function ShowcaseStrip() {
  const { isMobile } = window.useViewport();
  // Duplicated once so the marquee can loop seamlessly at -50%.
  const loop = SHOWCASE_ITEMS.filter(function (i) { return !i.hidden; }).concat(SHOWCASE_ITEMS.filter(function (i) { return !i.hidden; }));

  return (
    <section style={{ padding: isMobile ? '24px 0 32px' : '32px 0 40px', width: '100%', overflow: 'hidden', borderBottom: '1px solid var(--border)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: isMobile ? '0 20px 18px' : '0 48px 22px' }}>
        <div className="t-micro" style={{ color: 'var(--gold-deep)', marginBottom: 6 }}>New from Trove</div>
        <h2 className="t-h1" style={{ margin: 0 }}>50+ interactive tools, free on the whiteboard</h2>
        <p className="t-body" style={{ color: 'var(--fg-muted)', margin: '10px 0 0' }}>
          Number lines, place value, circuits and more. Open one and teach, no login and no subscription.
        </p>
      </div>

      <div className="showcase-viewport">
        <div className="showcase-track">
          {loop.map((item, i) => <ShowcaseCard key={`${item.slug}-${i}`} item={item} />)}
        </div>
      </div>
    </section>
  );
}

window.ShowcaseStrip = ShowcaseStrip;
// `hidden` items stay out of the carousel and the weekly pick (their screenshots
// contain sample words that read oddly out of context).
window.SHOWCASE_ITEMS = SHOWCASE_ITEMS.filter(function (i) { return !i.hidden; });