---
import { Icon } from 'astro-icon/components';
import NotebookLayout from '../layouts/NotebookLayout.astro';
import NotebookGallery from '../components/NotebookGallery';
import { fetchNotebookList } from '../lib/server-api';
import type { NotebookSummary } from '../lib/types';

let notebooks: NotebookSummary[] = [];
let fetchError: string | null = null;
try {
  notebooks = await fetchNotebookList();
} catch (err) {
  fetchError = err instanceof Error ? err.message : 'Backend unavailable';
}
---

<NotebookLayout
  title="SpiceBook"
  description="Write SPICE netlists, run ngspice simulations, and visualize waveforms in a single document."
  canonicalPath="/"
>
  <style>
    @import '../styles/homepage.css';
  </style>

  <!-- Hero -->
  <section class="hero-graticule border-b border-slate-800/60">
    <div class="relative max-w-6xl mx-auto px-6 pt-16 pb-20">
      <p class="text-sm font-semibold tracking-widest text-blue-400 uppercase mb-4">SpiceBook</p>
      <h1 class="text-4xl md:text-5xl font-bold text-slate-100 tracking-tight max-w-2xl">
        Circuit Simulation Notebooks
      </h1>
      <p class="mt-4 text-lg text-slate-400 max-w-xl leading-relaxed">
        Write SPICE netlists, run ngspice simulations, and visualize waveforms in a single document.
      </p>
      <div class="flex items-center gap-3 mt-8">
        <a
          href="/notebook/new"
          class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-blue-600 hover:bg-blue-500 text-white font-medium transition-colors text-sm"
        >
          <Icon name="lucide:plus" class="w-4 h-4" />
          New Notebook
        </a>
        <a
          href="#notebooks"
          class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg border border-slate-700 text-slate-300 hover:border-slate-500 hover:text-slate-100 font-medium transition-colors text-sm"
        >
          Browse Notebooks
          <Icon name="lucide:chevron-down" class="w-4 h-4" />
        </a>
      </div>
    </div>
  </section>

  <!-- Feature Highlights -->
  <section class="max-w-6xl mx-auto px-6 py-16">
    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
      <div class="p-5 rounded-lg border border-slate-800 bg-slate-900/50">
        <Icon name="lucide:zap" class="w-6 h-6 text-blue-400 mb-3" />
        <h3 class="font-semibold text-slate-100 mb-1">SPICE Simulation</h3>
        <p class="text-sm text-slate-400 leading-relaxed">
          Write netlists and run ngspice. Transient, AC, DC sweep, operating point.
        </p>
      </div>
      <div class="p-5 rounded-lg border border-slate-800 bg-slate-900/50">
        <Icon name="lucide:activity" class="w-6 h-6 text-blue-400 mb-3" />
        <h3 class="font-semibold text-slate-100 mb-1">Waveform Plots</h3>
        <p class="text-sm text-slate-400 leading-relaxed">
          Results render as interactive plots below each netlist.
        </p>
      </div>
      <div class="p-5 rounded-lg border border-slate-800 bg-slate-900/50">
        <Icon name="lucide:circuit-board" class="w-6 h-6 text-blue-400 mb-3" />
        <h3 class="font-semibold text-slate-100 mb-1">Schematic Generation</h3>
        <p class="text-sm text-slate-400 leading-relaxed">
          Netlists produce SVG circuit diagrams automatically.
        </p>
      </div>
      <div class="p-5 rounded-lg border border-slate-800 bg-slate-900/50">
        <Icon name="lucide:file-text" class="w-6 h-6 text-blue-400 mb-3" />
        <h3 class="font-semibold text-slate-100 mb-1">Notebook Format</h3>
        <p class="text-sm text-slate-400 leading-relaxed">
          Markdown, SPICE, and Python cells in a single document.
        </p>
      </div>
    </div>
  </section>

  <!-- Notebook Gallery -->
  <section id="notebooks" class="max-w-6xl mx-auto px-6 pb-20 scroll-mt-8">
    <h2 class="text-2xl font-bold text-slate-100 mb-8">Notebooks</h2>
    <NotebookGallery
      client:load
      initialNotebooks={notebooks}
      error={fetchError}
    />
  </section>

  <!-- Footer CTA -->
  <footer class="border-t border-slate-800/60">
    <div class="max-w-6xl mx-auto px-6 py-16 text-center">
      <h2 class="text-2xl font-bold text-slate-100 mb-3">Ready to simulate?</h2>
      <a
        href="/notebook/new"
        class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-blue-600 hover:bg-blue-500 text-white font-medium transition-colors text-sm mt-4"
      >
        <Icon name="lucide:plus" class="w-4 h-4" />
        New Notebook
      </a>
      <p class="text-sm text-slate-500 mt-6">
        Built on ngspice · Part of <a href="https://warehack.ing" class="text-slate-400 hover:text-slate-300 underline underline-offset-2">warehack.ing</a>
      </p>
    </div>
  </footer>
</NotebookLayout>