---
import Layout from '@/layouts/Layout.astro';
import FilterableBookGrid from '@/components/FilterableBookGrid';
import { getCollection } from 'astro:content';
import { serializeBook } from '@/lib/types';

const allBooks = await getCollection('books');
const mimsBooks = allBooks
  .filter(book => book.data.collection === 'mims')
  .sort((a, b) => a.data.sortOrder - b.data.sortOrder);

// Get unique topics for filtering
const allTopics = [...new Set(mimsBooks.flatMap(book => book.data.topics))].sort();
const serializedBooks = mimsBooks.map(serializeBook);
---

<Layout
  title="Mims Mini-Notebooks"
  description="The complete collection of Forrest M. Mims III's Radio Shack Engineer's Mini-Notebooks"
>
  <div class="space-y-8">
    <!-- Header -->
    <div class="space-y-4">
      <div class="flex items-center gap-2 text-sm text-muted-foreground">
        <a href="/" class="hover:text-foreground transition-colors">Home</a>
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polyline points="9 18 15 12 9 6"/>
        </svg>
        <span>Mims Collection</span>
      </div>

      <div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
        <div>
          <h1 class="text-3xl md:text-4xl font-bold title-accent">
            Forrest Mims Mini-Notebooks
          </h1>
          <p class="text-muted-foreground mt-2 max-w-2xl">
            The complete Radio Shack Engineer's Mini-Notebook series. Hand-illustrated electronics
            education that taught a generation of engineers and hobbyists.
          </p>
        </div>

        <div class="flex items-center gap-2 text-sm text-muted-foreground">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
            <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
          </svg>
          <span>{mimsBooks.length} notebooks</span>
        </div>
      </div>
    </div>

    <!-- Filterable grid with topic tags -->
    <FilterableBookGrid books={serializedBooks} allTopics={allTopics} collectionSlug="mims" client:load />

    <!-- About the Author -->
    <section class="mt-12 p-6 md:p-8 rounded-lg bg-card border border-border space-y-8">
      <div class="grid md:grid-cols-[280px_1fr] gap-6 md:gap-8 items-start">
        <div class="space-y-3">
          <figure class="overflow-hidden rounded-lg border border-border">
            <img
              src="/images/author/mims-portrait-2016.jpg"
              alt="Forrest M. Mims III with his atmospheric measurement instruments at Geronimo Creek Observatory, Texas, 2016"
              class="w-full object-cover"
              loading="lazy"
            />
            <figcaption class="px-3 py-2 text-[11px] text-muted-foreground bg-muted/50">
              Mims at Geronimo Creek Observatory, 2016. Photo by Minnie C. Mims, public domain via
              <a href="https://commons.wikimedia.org/wiki/Category:Forrest_Mims" target="_blank" rel="noopener noreferrer" class="underline hover:text-foreground">Wikimedia Commons</a>.
            </figcaption>
          </figure>
        </div>
        <div class="space-y-4">
          <h3 class="text-xl font-semibold title-accent text-foreground">About Forrest M. Mims III</h3>
          <p class="text-sm text-muted-foreground leading-relaxed">
            Forrest M. Mims III is a Texas A&M University graduate, amateur scientist, inventor, and
            one of the most widely read electronics authors in American history. His Radio Shack
            Engineer's Mini-Notebook series — featuring hand-lettered text and meticulously drawn
            circuit diagrams — sold over 7.5 million copies and introduced an entire generation to
            practical electronics.
          </p>
          <p class="text-sm text-muted-foreground leading-relaxed">
            Beyond the notebooks, Mims designed atmospheric science instruments used by NASA and
            has published in <em>Nature</em>, <em>Science</em>, and numerous other journals. He has
            conducted daily atmospheric measurements at his Geronimo Creek Observatory in Texas
            since 1990 — a continuous record spanning over three decades. <em>Discover</em> magazine
            named him one of the "50 Best Brains in Science" in 2008.
          </p>
        </div>
      </div>

      <!-- Photo gallery -->
      <div class="grid grid-cols-2 gap-4">
        <figure class="overflow-hidden rounded-lg border border-border">
          <img
            src="/images/author/mims-vietnam-rocket-1967.jpg"
            alt="Forrest Mims preparing a model rocket for launch near Saigon, Vietnam, 1967"
            class="w-full aspect-square object-cover object-top"
            loading="lazy"
          />
          <figcaption class="px-3 py-2 text-[11px] text-muted-foreground bg-muted/50">
            Preparing a model rocket near Saigon, 1967. US Air Force photo, public domain via
            <a href="https://commons.wikimedia.org/wiki/File:Forrest_Mims_Rocket_Vietnam_1967_Cropped.jpg" target="_blank" rel="noopener noreferrer" class="underline hover:text-foreground">Wikimedia Commons</a>.
          </figcaption>
        </figure>
        <figure class="overflow-hidden rounded-lg border border-border">
          <img
            src="/images/author/mims-tx1-rocket-1970.jpg"
            alt="Forrest Mims with a 1970 model rocket equipped with the first MITS TX-1 telemetry transmitter"
            class="w-full aspect-square object-cover object-top"
            loading="lazy"
          />
          <figcaption class="px-3 py-2 text-[11px] text-muted-foreground bg-muted/50">
            With the first MITS TX-1 telemetry transmitter, 1970. Photo by Mark Langford,
            <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="noopener noreferrer" class="underline hover:text-foreground">CC BY-SA 4.0</a> via
            <a href="https://commons.wikimedia.org/wiki/File:Forrest_Mims_with_his_1970_rocket_equipped_with_a_TX-1,_MITS%27_first_telemetry_transmitter.JPG" target="_blank" rel="noopener noreferrer" class="underline hover:text-foreground">Wikimedia Commons</a>.
          </figcaption>
        </figure>
      </div>

      <!-- Run Forrest Run -->
      <div class="border-t border-border pt-6 space-y-4">
        <h3 class="text-lg font-semibold title-accent text-foreground">"Run, Forrest, Run!"</h3>
        <figure class="overflow-hidden rounded-lg border border-border bg-stone-950">
          <video
            class="w-full"
            controls
            preload="metadata"
            poster="/videos/run-forrest-run-poster.jpg"
          >
            <source src="/videos/run-forrest-run.webm" type="video/webm" />
            <source src="/videos/run-forrest-run.mp4" type="video/mp4" />
            Your browser does not support the video element.
          </video>
          <figcaption class="px-3 py-2 text-[11px] text-muted-foreground bg-muted/50">
            "Run, Forrest, Run!" — <em>Forrest Gump</em> (1994), Paramount Pictures. Clip via
            <a href="https://www.youtube.com/watch?v=bSMxl1V8FSg" target="_blank" rel="noopener noreferrer" class="underline hover:text-foreground">Movieclips/YouTube</a>.
          </figcaption>
        </figure>
        <div class="text-sm text-muted-foreground leading-relaxed space-y-3 max-w-prose">
          <p>
            There's a reason that scene hits so hard. As an infant, I wore old-school foot braces — a
            pair of rigid shoes bolted to a metal bar that kept my legs aligned. I still get phantom
            sensations of not being able to move my legs independently, decades later. Dreams where
            I'm trying to run but something invisible holds my feet together.
          </p>
          <p>
            Forrest Mims' notebooks were my version of Jenny yelling "Run!" His hand-drawn circuits
            didn't care about your background or your limitations. They just said: here's how a
            transistor works, here's how to build something real. That directness — no gatekeeping,
            no prerequisites, just knowledge laid bare on the page — made electronics feel like
            something I could actually <em>do</em>. Not just read about. Do.
          </p>
          <p>
            Learning from Mims felt like the moment the braces broke off. Suddenly the thing that
            seemed impossibly complicated was just... circuits. Components. Connections you could
            trace with your finger. And once you built your first blinking LED or heard your first
            555 timer squeal, there was no going back. You were running.
          </p>
        </div>
      </div>

      <div class="border-t border-border pt-6">
        <div class="flex items-start gap-4">
          <div class="w-10 h-10 rounded-lg bg-accent/20 flex items-center justify-center shrink-0">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-accent-foreground">
              <circle cx="12" cy="12" r="10"/>
              <line x1="12" x2="12" y1="16" y2="12"/>
              <line x1="12" x2="12.01" y1="8" y2="8"/>
            </svg>
          </div>
          <div>
            <h3 class="font-semibold text-foreground">About This Collection</h3>
            <p class="text-sm text-muted-foreground mt-1">
              These notebooks were originally published by Radio Shack between 1985 and 1993.
              All materials have been preserved and made available through Archive.org's
              Folkscanomy project. Click any notebook to view it with our embedded PDF reader,
              or download it in various formats.
            </p>
          </div>
        </div>
      </div>
    </section>
  </div>
</Layout>