// BooksPage.jsx — responsive, 62px smile mark, placeholder→real hover crossfade
function ChBooksPage({ onCta }) {
  const isMobile = window.useIsMobile();

  const eyebrow = {
    fontWeight: 700, fontSize: 11, letterSpacing: '3.5px', textTransform: 'uppercase',
    color: '#1B544F', marginBottom: 18,
  };

  const books = [
    {
      title: 'Splitting Up? How To Tell The Kids',
      tag: "The DrF's Guide",
      subtitle: 'Navigate one of the toughest parenting moments with clarity and compassion.',
      blurb: "One of the hardest conversations a parent can face, made clearer, calmer, and more compassionate. This practical guide helps you confidently tell your children about separation or divorce while protecting their emotional well-being.",
      bullets: ["Step-by-step guidance for difficult conversations", "Clear do's and don'ts for sharing the news", "Tools to support emotional security", "Strategies to strengthen your bond"],
      placeholder: { bg: 'linear-gradient(145deg, #B6E6E2 0%, #7FD6CF 100%)', ink: '#0E3B37', script: 'Splitting Up?\nHow To Tell\nThe Kids' },
      coverImage: '/assets/books/splitting-up.jpg',
      amazonUrl: 'https://www.amazon.ca/Splitting-Up-How-Tell-Kids-ebook/dp/B0964MPS5T/ref=sr_1_1?dib=eyJ2IjoiMSJ9.q7omDi816quYT4H6_9qd7Yr2tLvRRpJJgPMvXu6BIhs.5iy19ZeIdMNvpN9YavaYa0aOVqzvu_Wi-4bXBNU4AtI&dib_tag=se&keywords=Splitting+Up+How+to+Tell+the+Kids+Dr+Fs&qid=1778803477&sr=8-1',
    },
    // HIDDEN — kept for future use (do not delete)
    // {
    //   title: 'Gratitude & Kindness',
    //   tag: 'Latest Release',
    //   subtitle: 'Raise grounded, grateful kids in a world of "more."',
    //   blurb: "Are you raising a child who always wants more? Entitlement isn't innate. It's learned.",
    //   bullets: ["Understand where entitlement comes from", "Build gratitude into everyday life", "Apply the Family Change Model", "Create lasting, positive change at home"],
    //   placeholder: { bg: '#FDFBF6', ink: '#1B544F', script: 'Gratitude\n& Kindness' },
    //   coverImage: '/assets/books/gratitude-kindness.jpg',
    //   amazonUrl: 'https://www.amazon.ca/s?k=Gratitude+Kindness+Modern+Parents+Guide+Dr+Fs',
    // },
    {
      title: 'Happy Kids, Happier Divorce',
      tag: 'Coming Soon',
      comingSoon: true,
      subtitle: "Your relationship ended. Your parenting team didn't.",
      blurb: "The emotionally intelligent playbook for separation, co-parenting, and evolving family structures. Less 'winning the divorce.' More protecting the nervous systems of your children. Even when co-parenting feels like a lost cause, your kids don't have to be.",
      bullets: ["Create a positive, secure home environment", "Support mental health and emotional growth", "Handle tough conversations with confidence", "Keep your kids out of the crossfire"],
      placeholder: { bg: '#1B544F', ink: '#7FD6CF', script: 'Happy Kids,\nHappier\nDivorce' },
      coverImage: '/assets/books/happy-kids-divorce.png',
      amazonUrl: 'https://www.amazon.ca/s?k=Happy+Kids+Happier+Divorce+Dr+Fs',
    },
  ];

  return (
    <div style={{ background: '#F0EEE6', fontFamily: 'Montserrat, sans-serif' }}>
      <style>{`@keyframes chReveal { from { opacity:0 } to { opacity:1 } }`}</style>

      {/* Page header */}
      <section style={{ padding: isMobile ? '72px 24px 48px' : '110px 40px 72px', textAlign: 'center', background: '#fff' }}>
        <div style={{ maxWidth: 760, margin: '0 auto' }}>
          <div style={eyebrow}>The Library</div>
          <h1 style={{ fontWeight: 800, fontSize: isMobile ? 42 : 64, lineHeight: 1.02, letterSpacing: '-1px', color: '#1A1A1A', margin: 0 }}>
            Books by the DrF's
          </h1>
          <p style={{ fontSize: isMobile ? 15 : 17, lineHeight: 1.75, color: '#555', margin: '20px 0 0' }}>
            Practical, science-backed books for parents navigating the real stuff.
            Read in any order. Start where you need it most.
          </p>
        </div>
      </section>

      {/* Book entries */}
      <section style={{ padding: isMobile ? '48px 24px 72px' : '72px 40px 100px' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: isMobile ? 64 : 100 }}>
          {books.map((b, i) => (
            <BookEntry key={b.title} book={b} reverse={i % 2 === 1} onCta={onCta} />
          ))}
        </div>
      </section>

      {/* Newsletter CTA */}
      <section style={{ padding: isMobile ? '60px 24px' : '90px 40px', background: '#7FD6CF', textAlign: 'center' }}>
        <div style={{ maxWidth: 720, margin: '0 auto' }}>
          <h2 style={{ fontWeight: 800, fontSize: isMobile ? 30 : 42, letterSpacing: '-0.5px', margin: 0, color: '#0E3B37' }}>
            Get the next book first.
          </h2>
          <p style={{ fontSize: isMobile ? 14 : 16, lineHeight: 1.7, color: '#0E3B37', margin: '18px 0 28px', opacity: 0.85 }}>
            Subscribe to our newsletter and be the first to hear when a new title drops,
            plus weekly insights in your inbox.
          </p>
          <ChButton onClick={() => onCta && onCta('newsletter')}>Subscribe Free</ChButton>
        </div>
      </section>
    </div>
  );
}

function BookEntry({ book, reverse, onCta }) {
  const [hovered, setHovered] = React.useState(false);
  const [revealed, setRevealed] = React.useState(false);
  const [expanded, setExpanded] = React.useState(false);
  const isMobile = window.useIsMobile();
  const p = book.placeholder;

  const showReal = isMobile ? revealed : hovered;

  const handleCoverClick = () => {
    if (isMobile) {
      setRevealed(!revealed);
    } else if (!book.comingSoon) {
      window.open(book.amazonUrl, '_blank');
    }
  };

  return (
    <div style={{
      display: isMobile ? 'flex' : 'grid',
      flexDirection: isMobile ? 'column' : undefined,
      gridTemplateColumns: isMobile ? undefined : '1fr 1.2fr',
      gap: isMobile ? 24 : 72,
      alignItems: 'center',
      direction: (!isMobile && reverse) ? 'rtl' : 'ltr',
      position: 'relative',
    }}>

      {/* Cover — outer wrapper has position:relative but NO overflow:hidden so badge isn't clipped */}
      <div style={{
        direction: 'ltr',
        position: 'relative',
        aspectRatio: '3/4',
        maxWidth: isMobile ? 220 : undefined,
        margin: isMobile ? '0 auto' : undefined,
        width: '100%',
        transform: (hovered || revealed) ? 'translateY(-8px) scale(1.02)' : 'translateY(0) scale(1)',
        transition: 'transform 360ms cubic-bezier(0.22,0.61,0.36,1)',
      }}>

        {/* Coming Soon badge — lives here so it's never clipped by overflow:hidden */}
        {book.comingSoon && (
          <div style={{
            position: 'absolute', top: 12, right: 12, zIndex: 10,
            background: '#7FD6CF', color: '#0E3B37',
            fontSize: 8, fontWeight: 800, letterSpacing: '2px', textTransform: 'uppercase',
            padding: '5px 12px', borderRadius: 999,
            fontFamily: 'Montserrat, sans-serif',
            whiteSpace: 'nowrap',
            boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
          }}>Coming Soon</div>
        )}

        {/* Inner card — overflow:hidden only here for image crossfade */}
        <div
          onMouseEnter={() => !isMobile && setHovered(true)}
          onMouseLeave={() => !isMobile && setHovered(false)}
          onClick={handleCoverClick}
          style={{
            position: 'absolute', inset: 0,
            borderRadius: 16, overflow: 'hidden',
            boxShadow: (hovered || revealed)
              ? '0 40px 80px rgba(27,84,79,0.32), 0 0 0 3px rgba(127,214,207,0.40)'
              : '0 20px 56px rgba(27,84,79,0.18)',
            transition: 'box-shadow 360ms ease',
            cursor: 'pointer', background: p.bg,
          }}
        >
        {/* Placeholder layer */}
        <div style={{
          position: 'absolute', inset: 0, background: p.bg,
          padding: isMobile ? 18 : 36,
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          color: p.ink,
          opacity: showReal ? 0 : 1, transition: 'opacity 320ms ease',
        }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <span style={{ fontWeight: 700, fontSize: isMobile ? 8 : 9, letterSpacing: '3px', textTransform: 'uppercase', opacity: 0.65 }}>
                By the DrF's
              </span>
            </div>
            <div style={{
              fontFamily: '"Caveat", cursive', fontSize: isMobile ? 32 : 50, lineHeight: 1.05,
              fontWeight: 700, marginTop: isMobile ? 10 : 20, whiteSpace: 'pre-line',
            }}>{p.script}</div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <img
              src="/assets/smile-mark.png" alt=""
              style={{
                width: isMobile ? 44 : 74,
                filter: p.ink === '#7FD6CF' ? 'none' : 'brightness(0) saturate(100%) invert(31%) sepia(29%) saturate(639%) hue-rotate(125deg) brightness(89%) contrast(90%)',
                opacity: 0.85,
              }}
            />
          </div>
        </div>

        {/* Real cover layer */}
        <div style={{ position: 'absolute', inset: 0, opacity: showReal ? 1 : 0, transition: 'opacity 320ms ease' }}>
          <img src={book.coverImage} alt={book.title}
               style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
        </div>


        {/* Mobile tap hint */}
        {isMobile && !revealed && (
          <div style={{
            position: 'absolute', bottom: 10, left: 0, right: 0,
            textAlign: 'center',
            fontSize: 8, fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase',
            color: p.ink === '#7FD6CF' ? 'rgba(127,214,207,0.7)' : 'rgba(14,59,55,0.5)',
            fontFamily: 'Montserrat, sans-serif',
          }}>Tap to reveal</div>
        )}
        </div> {/* closes inner card */}
      </div> {/* closes outer cover wrapper */}

      {/* Copy */}
      <div style={{ direction: 'ltr', textAlign: isMobile ? 'center' : 'left' }}>
        <div style={{ fontWeight: 700, fontSize: 11, letterSpacing: '3.5px', textTransform: 'uppercase', color: '#7FD6CF', marginBottom: 12 }}>
          {book.tag}
        </div>
        <h2 style={{ fontWeight: 800, fontSize: isMobile ? 26 : 38, lineHeight: 1.1, letterSpacing: '-0.5px', color: '#1A1A1A', margin: '0 0 10px' }}>
          {book.title}
        </h2>
        <p style={{ fontWeight: 600, fontSize: isMobile ? 14 : 17, color: '#1B544F', margin: '0 0 16px' }}>{book.subtitle}</p>
        <p style={{ fontSize: 14, lineHeight: 1.8, color: '#555', margin: 0, maxWidth: 520 }}>
          {expanded ? book.blurb : book.blurb.slice(0, 200) + '…'}
        </p>
        {expanded && (
          <ul style={{ margin: '16px 0 0', padding: '0 0 0 20px', textAlign: 'left' }}>
            {book.bullets.map((b) => (
              <li key={b} style={{ fontSize: 14, lineHeight: 1.7, color: '#444', marginBottom: 6, fontWeight: 500 }}>{b}</li>
            ))}
          </ul>
        )}
        <button onClick={() => setExpanded(!expanded)} style={{
          background: 'none', border: 'none', cursor: 'pointer',
          color: '#7FD6CF', fontSize: 13, fontWeight: 700,
          padding: '8px 0 0', fontFamily: 'Montserrat, sans-serif',
          textDecoration: 'underline', textUnderlineOffset: 3,
        }}>{expanded ? 'Show less' : 'Read more'}</button>
        <div style={{ display: 'flex', gap: 14, marginTop: 24, justifyContent: isMobile ? 'center' : 'flex-start', flexWrap: 'wrap' }}>
          {!book.comingSoon && (
            <ChButton onClick={() => window.open(book.amazonUrl, '_blank')}>Buy Now</ChButton>
          )}
          <ChButton variant="secondary" onClick={() => setExpanded(!expanded)}>{expanded ? 'Show Less' : 'Learn More'}</ChButton>
        </div>
      </div>
    </div>
  );
}

window.ChBooksPage = ChBooksPage;