// BookFeature.jsx — placeholder default, real cover on hover (desktop) / tap (mobile), responsive
function ChBookFeature({ onCta }) {
  const [hovered, setHovered] = React.useState(false);
  const [revealed, setRevealed] = React.useState(false);
  const isMobile = window.useIsMobile();

  const showReal = isMobile ? revealed : hovered;

  const handleCoverClick = () => {
    if (isMobile) {
      setRevealed(!revealed);
    } else {
      onCta && onCta('books');
    }
  };

  return (
    <section style={{ background: '#fff', padding: isMobile ? '64px 24px' : '100px 40px', fontFamily: 'Montserrat, sans-serif' }}>
      <div style={{
        maxWidth: 1100, margin: '0 auto',
        display: isMobile ? 'flex' : 'grid',
        flexDirection: isMobile ? 'column' : undefined,
        gridTemplateColumns: isMobile ? undefined : '0.85fr 1.15fr',
        gap: isMobile ? 36 : 72,
        alignItems: 'center',
      }}>
        {/* Book cover */}
        <div
          onMouseEnter={() => !isMobile && setHovered(true)}
          onMouseLeave={() => !isMobile && setHovered(false)}
          onClick={handleCoverClick}
          style={{
            aspectRatio: '3/4', borderRadius: 16, overflow: 'hidden', position: 'relative',
            maxWidth: isMobile ? 260 : undefined,
            margin: isMobile ? '0 auto' : undefined,
            width: '100%',
            boxShadow: (hovered || revealed)
              ? '0 40px 80px rgba(27,84,79,0.28), 0 0 0 3px rgba(127,214,207,0.35)'
              : '0 24px 60px rgba(27,84,79,0.18)',
            transform: (hovered || revealed) ? 'translateY(-8px) scale(1.02)' : 'translateY(0) scale(1)',
            transition: 'transform 340ms cubic-bezier(0.22,0.61,0.36,1), box-shadow 340ms ease',
            cursor: 'pointer',
            background: 'linear-gradient(145deg, #B6E6E2 0%, #7FD6CF 100%)',
          }}
        >
          {/* Placeholder */}
          <div style={{
            position: 'absolute', inset: 0,
            padding: isMobile ? 22 : 36,
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            color: '#0E3B37',
            opacity: showReal ? 0 : 1, transition: 'opacity 320ms ease',
          }}>
            <div>
              <div style={{ fontWeight: 700, fontSize: isMobile ? 8 : 9, letterSpacing: '3px', textTransform: 'uppercase', opacity: 0.65 }}>
                By the DrF's
              </div>
              <div style={{ fontFamily: '"Caveat", cursive', fontSize: isMobile ? 34 : 48, lineHeight: 1.05, fontWeight: 700, marginTop: isMobile ? 14 : 24, whiteSpace: 'pre-line' }}>
                {'Splitting Up?\nHow To Tell\nThe Kids'}
              </div>
            </div>
            <div style={{ display: 'flex', justifyContent: 'center' }}>
              <img
                src="/assets/smile-mark.png" alt=""
                style={{
                  width: isMobile ? 52 : 74,
                  filter: 'brightness(0) saturate(100%) invert(31%) sepia(29%) saturate(639%) hue-rotate(125deg) brightness(89%) contrast(90%)',
                  opacity: 0.85,
                }}
              />
            </div>
          </div>

          {/* Real cover */}
          <div style={{ position: 'absolute', inset: 0, opacity: showReal ? 1 : 0, transition: 'opacity 320ms ease' }}>
            <img src="/assets/books/splitting-up.jpg" alt="Splitting Up: How to Tell Your Kids — book by Dr. Carla Fry and Dr. Lisa Ferrari"
                 style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          </div>

          {/* Mobile tap hint */}
          {isMobile && !revealed && (
            <div style={{
              position: 'absolute', bottom: 12, left: 0, right: 0,
              textAlign: 'center',
              fontSize: 9, fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase',
              color: 'rgba(14,59,55,0.55)',
              fontFamily: 'Montserrat, sans-serif',
            }}>Tap to reveal cover</div>
          )}
        </div>

        {/* Copy */}
        <div style={{ textAlign: isMobile ? 'center' : 'left' }}>
          <div style={{ fontWeight: 700, fontSize: 11, letterSpacing: '3.5px', textTransform: 'uppercase', color: '#1B544F', marginBottom: 14 }}>
            The DrF's Guide
          </div>
          <h2 style={{ fontWeight: 800, fontSize: isMobile ? 30 : 44, lineHeight: 1.1, letterSpacing: '-0.5px', color: '#1A1A1A', margin: 0 }}>
            Splitting Up? How To Tell The Kids
          </h2>
          <p style={{ fontWeight: 600, fontSize: 17, color: '#7FD6CF', margin: '10px 0 20px' }}>
            Navigate one of the toughest parenting moments with clarity and compassion.
          </p>
          <p style={{ fontWeight: 400, fontSize: isMobile ? 14 : 16, lineHeight: 1.8, color: '#555', margin: '0 0 32px', maxWidth: 540 }}>
            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.
          </p>
          <div style={{ display: 'flex', gap: 14, justifyContent: isMobile ? 'center' : 'flex-start', flexWrap: 'wrap' }}>
            <ChButton onClick={() => window.open('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', '_blank')}>Buy Now</ChButton>
            <ChButton variant="secondary" onClick={() => onCta && onCta('books')}>Learn More</ChButton>
          </div>
        </div>
      </div>
    </section>
  );
}

window.ChBookFeature = ChBookFeature;