---
import BaseLayout from '../layouts/BaseLayout.astro';
import { site } from '../site.config';
---

<BaseLayout title="Book" description="Ana's book: argument, sample, and purchase information.">
  <section class="shell book-page">
    <div class="cover" aria-hidden="true">
      {site.book.cover ? <img src={site.book.cover} alt="" /> : <span>THE<br />BOOK</span>}
    </div>
    <div>
      <p class="eyebrow">The book</p>
      <h1 class="display">{site.book.enabled ? site.book.title : 'The book belongs at the centre of the work.'}</h1>
      <p class="lede">{site.book.enabled ? site.book.description : 'This surface is ready for the actual cover, title, argument, sample chapter, endorsements, and purchase route. Those details are intentionally not fabricated in the scaffold.'}</p>
      {site.book.enabled && (
        <div class="actions">
          {site.book.sampleUrl && <a class="button" href={site.book.sampleUrl}>Read a sample</a>}
          {site.book.buyUrl && <a class="button primary" href={site.book.buyUrl}>Buy the book</a>}
        </div>
      )}
      <div class="book-anatomy">
        <div><span>01</span><p>Why I wrote it</p></div>
        <div><span>02</span><p>Read a real chapter</p></div>
        <div><span>03</span><p>Choose a purchase route</p></div>
      </div>
    </div>
  </section>
</BaseLayout>

<style>
  .book-page { display: grid; grid-template-columns: minmax(250px, .65fr) 1.35fr; gap: clamp(3rem, 9vw, 9rem); align-items: center; padding: clamp(4rem, 9vw, 8rem) 0; }
  .cover { display: grid; aspect-ratio: 3 / 4; place-items: center; border: 1px solid #7690ad; background: var(--blue); box-shadow: 22px 22px 0 #d8d1c4; color: var(--paper); font-family: 'Newsreader Variable', Georgia, serif; font-size: clamp(2.5rem, 6vw, 5rem); line-height: .85; text-align: center; }
  .cover img { width: 100%; height: 100%; object-fit: cover; }
  h1 { max-width: 13ch; }
  .lede { max-width: 58ch; color: var(--muted); font-size: 1.1rem; }
  .actions { display: flex; gap: .7rem; margin: 2rem 0; }
  .book-anatomy { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 3rem; border-top: 1px solid var(--rule); }
  .book-anatomy div { padding: 1rem; border-right: 1px solid var(--rule); }
  .book-anatomy div:last-child { border-right: 0; }
  .book-anatomy span { color: var(--amend); font-family: 'IBM Plex Mono', monospace; font-size: .68rem; }
  .book-anatomy p { font-family: 'Newsreader Variable', Georgia, serif; font-size: 1.15rem; }
  @media (max-width: 750px) { .book-page { grid-template-columns: 1fr; } .cover { max-width: 320px; } .book-anatomy { grid-template-columns: 1fr; } .book-anatomy div { border-right: 0; border-bottom: 1px solid var(--rule); } }
</style>