brand-site/src/pages/books.astro

---
import BaseLayout from '../layouts/BaseLayout.astro';
import SharedForm from '../components/Form/SharedForm.astro';
---

<BaseLayout 
  title="Books — Scott Scoble"
  description="Published works on cultivation, mentoring, and the human side of AI."
  pageType="books"
>

  <section class="hero">
    <div class="hero-content">
      <h1>Books</h1>
      <p>Published works on cultivation, mentoring, and the human side of AI.</p>
    </div>
  </section>

  <section class="books-section">
    <div class="section-container">
      
      <div class="books-grid">
        
        <article class="book-card">
          <div class="book-cover">
            <img src="/images/book-cover-soil.webp" alt="The Soil Beneath the Code book cover" width="150" height="225" loading="lazy" />
          </div>
          <h2>The Soil Beneath the Code</h2>
          <p class="book-meta">Published 2023</p>
          <p class="book-description">What engineering teams can learn from farmers about sustainable systems.</p>
          <p class="book-quote">"A cultivation playbook for technical leaders who are tired of strip-mining their teams."</p>
          
          <div class="book-links">
            <a href="#" class="book-link">Amazon</a>
            <a href="#" class="book-link">Publisher</a>
          </div>
        </article>

        <article class="book-card">
          <div class="book-cover">
            <img src="/images/book-cover-walk.webp" alt="A Walk in Mentoring book cover" width="150" height="225" loading="lazy" />
          </div>
          <h2>A Walk in Mentoring</h2>
          <p class="book-meta">Published 2024</p>
          <p class="book-description">Three questions that change how people learn.</p>
          <p class="book-quote">"The simplest mentoring framework you'll actually use."</p>
          
          <div class="book-links">
            <a href="#" class="book-link">Amazon</a>
            <a href="#" class="book-link">Publisher</a>
          </div>
        </article>

        <article class="book-card coming-soon">
          <div class="book-cover">
            <img src="/images/book-cover-dark-provenance.svg" alt="Dark Provenance book cover" width="150" height="225" loading="lazy" />
          </div>
          <h2>Dark Provenance</h2>
          <p class="book-meta">Coming 2026</p>
          <p class="book-description">Formal verification for the AI age. How to audit what your AI actually did.</p>
          <p class="book-quote">"Speckl and the dark provenance system. A new approach to AI accountability."</p>
          
          <SharedForm type="waitlist" />
        </article>

      </div>
    </div>
  </section>

</BaseLayout>

<style>
  .hero {
    background: var(--color-cream);
    padding: 4rem 2rem;
    text-align: center;
  }
  
  .hero h1 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--color-brown-dark);
    margin: 0 0 1rem;
  }
  
  .hero p {
    font-size: 1.125rem;
    color: var(--color-text-muted);
    margin: 0;
  }
  
  .books-section {
    background: white;
  }
  
  .section-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 4rem 2rem;
  }
  
  .books-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
  }
  
  .book-card {
    background: var(--color-cream);
    padding: 2.5rem;
    border-radius: 8px;
    text-align: center;
  }
  
  .book-card.coming-soon {
    background: var(--color-cream-warm);
    border: 2px dashed var(--color-border);
  }
  
  .book-cover {
    margin-bottom: 1.5rem;
  }
  
  .book-cover img {
    width: 150px;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  
  .book-card h2 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    margin: 0 0 0.5rem;
    color: var(--color-brown-dark);
  }
  
  .book-meta {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-green);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 1rem;
  }
  
  .book-description {
    color: var(--color-brown);
    margin: 0 0 1rem;
    line-height: 1.6;
  }
  
  .book-quote {
    font-style: italic;
    color: var(--color-text-muted);
    margin: 0 0 1.5rem;
  }
  
  .book-links {
    display: flex;
    gap: 1rem;
    justify-content: center;
  }
  
  .book-link {
    color: var(--color-green);
    text-decoration: none;
    font-weight: 500;
  }
  
  .book-link:hover {
    text-decoration: underline;
  }
  
  .waitlist-btn {
    display: inline-block;
    background: var(--color-brown);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
  }
  
  .waitlist-btn:hover {
    background: var(--color-brown-dark);
  }
</style>