// books.jsx — Featured Books grid

const BOOKS = [
  {
    label: "Ebook · 7 Nights",
    title: "The Reset",
    desc: "One practice. One night. Seven evenings to return safety to a tired nervous system.",
    cover: "assets/books/7nights_cover.png",
    price: "$9",
    was: "$19",
    cta: "Begin Tonight",
    href: "https://whop.com/checkout/plan_pHKZeFWsKwj8K",
  },
  {
    label: "Ebook · 30 Days",
    title: "Back to Yourself",
    desc: "One day. One practice. One quiet act of returning. Drawn from four living traditions.",
    cover: "assets/books/30days_cover.png",
    price: "$15",
    was: "$29",
    cta: "Begin the 30 Days",
    featured: true,
    href: "https://whop.com/checkout/plan_Y3TdgVXuemgsz",
  },
  {
    label: "Bundle · Both Books",
    title: "The Complete Reset",
    desc: "7 Nights and 30 Days, together. The full library of practices, gathered into one quiet shelf.",
    cover: "assets/books/bundle_cover.png",
    price: "$19",
    was: "$48",
    cta: "Take Both Home",
    flag: "Best Value",
    href: "https://whop.com/checkout/plan_FMJVKEWjOKTgD",
  },
];

const BookCard = ({ b, onBuy }) => (
  <article className={`book ${b.featured ? "book--featured" : ""}`}>
    {b.featured && <div className="book__edge"></div>}
    {b.flag && <div className="book__bundle-flag">{b.flag}</div>}

    <div className="book__cover">
      <img src={b.cover} alt={b.title}/>
      <div className="book__cover-gloss"></div>
    </div>

    <span className="label book__label">{b.label}</span>
    <h3 className="book__title">{b.title}</h3>
    <p className="book__desc">{b.desc}</p>

    <div className="book__meta">
      <div>
        <span className="book__price">{b.price}</span>
        {b.was && <span className="book__price-was">{b.was}</span>}
      </div>
      <a
        href={b.href || "#"}
        className="book__cta"
        target={b.href ? "_blank" : undefined}
        rel={b.href ? "noopener noreferrer" : undefined}
        onClick={(e) => { if (!b.href) { e.preventDefault(); onBuy && onBuy(b); } }}
      >
        {b.cta} <span className="book__cta-arrow">→</span>
      </a>
    </div>
  </article>
);

const Books = ({ onBuy }) => (
  <section className="section" id="books">
    <div className="section__head">
      <span className="label" style={{ color: "var(--gold-deep)" }}>The Library</span>
      <Divider width={100} />
      <h2 className="section__title">Featured Books</h2>
      <p className="section__lead">
        Three quiet doors into the same room.
        Begin with one night, or commit to thirty.
      </p>
    </div>

    <Reveal stagger>
      <div className="books__grid">
        {BOOKS.map((b, i) => <BookCard key={i} b={b} onBuy={onBuy}/>)}
      </div>
    </Reveal>
  </section>
);

Object.assign(window, { Books, BookCard, BOOKS });