// site/Playbook.jsx — accepts optional `data` prop from Sanity
function PlaybookSection({ data }) {
  const eyebrow     = (data && data.eyebrow)     || 'THE ENGAGE PLAYBOOK';
  const heading     = (data && data.heading)     || 'Download the ENGAGE Playbook.';
  const subheading  = (data && data.subheading)  || 'The ROI of being in the same room.';
  const description = (data && data.description) || 'Real talk for event and incentive travel planners. The data, frameworks, and language to get your leadership team on board — free, 24 pages.';
  const ctaLabel    = (data && data.ctaLabel)    || 'Read the Playbook';
  const ctaUrl      = (data && data.ctaUrl)      || 'https://mailchi.mp/weareengage/engage_playbook_the_roi_of_being_in_the_same_room';

  return (
    <section id="playbook" className="playbook-section">
      <div className="container">
        <div className="playbook-card">
          <div className="text">
            <span className="pill"><span className="dot" /> {eyebrow}</span>
            <h2>{heading}<span className="period">.</span></h2>
            <div className="sub-h">{subheading}<span className="period">.</span></div>
            <p>{description}</p>
            <a className="btn btn-primary" href={ctaUrl} data-playbook-url>{ctaLabel} <span className="btn-arrow">›</span></a>
          </div>
          <div className="book-side">
            <img src="assets/playbook-cover.jpg" alt="ENGAGE Playbook cover" />
          </div>
        </div>
      </div>
    </section>
  );
}
window.PlaybookSection = PlaybookSection;