// BookFeature — promotes Tony's book "For Flux Sake".
// Two display modes:
//   animate=true  → scroll-jacked sticky scrubber that turns the cover
//                   left → centre → right. Used on the home page.
//   animate=false → static centre cover, normal section padding.

function BookFeature({
  showCta = false,
  ctaHref = '/book-preview.html',
  ctaLabel = 'Read the book',
  animate = true,
  bullets = null,
  bulletsCta = null
} = {}) {
  const scrubRef = React.useRef(null);
  const [progress, setProgress] = React.useState(0); // 0..1 turn progress

  React.useEffect(() => {
    if (!animate) return;
    const el = scrubRef.current;
    if (!el) return;
    const update = () => {
      const rect = el.getBoundingClientRect();
      const vh = window.innerHeight;
      const scrollable = el.offsetHeight - vh;
      const passed = -rect.top;
      const t = passed / scrollable;
      setProgress(Math.max(0, Math.min(1, t)));
    };
    update();
    window.addEventListener('scroll', update, { passive: true });
    window.addEventListener('resize', update);
    return () => {
      window.removeEventListener('scroll', update);
      window.removeEventListener('resize', update);
    };
  }, [animate]);

  // Animated turn keyframes
  let activeIdx = 1;
  let tweenDeg = 0;
  if (animate) {
    if (progress < 0.5) {
      activeIdx = progress < 0.25 ? 0 : 1;
      const t = progress / 0.5;
      const e = t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
      tweenDeg = activeIdx === 0 ? e * 15 : (e - 1) * 15;
    } else {
      activeIdx = progress < 0.75 ? 1 : 2;
      const t = (progress - 0.5) / 0.5;
      const e = t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
      tweenDeg = activeIdx === 1 ? e * 15 : (e - 1) * 15;
    }
  }

  const frames = [
  './assets/book/ffs-left.png',
  './assets/book/ffs-0.png',
  './assets/book/ffs-right.png'];


  const styles = `
    .bookfeat-scrub { height: 300vh; position: relative; }
    .bookfeat-sticky {
      position: sticky; top: 0; height: 100vh;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
      padding: clamp(48px, 8vw, 96px) clamp(24px, 5vw, 64px);
      box-sizing: border-box;
    }
    .bookfeat-static {
      padding: clamp(64px, 9vw, 112px) clamp(24px, 5vw, 64px);
      display: flex; align-items: center; justify-content: center;
    }
    .bookfeat-static .bookfeat-grid { max-width: 1320px; }
    @media (min-width: 900px) {
      .bookfeat-static .bookfeat-grid { grid-template-columns: 1fr 1fr; }
    }
    .bookfeat-static .bookfeat-grid > div > p,
    .bookfeat-static .bookfeat-grid > div > ul { max-width: 560px !important; }
    .bookfeat-static .bookfeat-stage { max-width: 640px; }
    .bookfeat-grid {
      width: 100%;
      display: grid; grid-template-columns: 1fr;
      gap: clamp(48px, 7vw, 96px); align-items: center;
    }
    @media (min-width: 900px) {
      .bookfeat-grid { grid-template-columns: 1fr 1fr; }
    }
    .bookfeat-stage {
      position: relative; width: 100%;
      aspect-ratio: 1 / 1;
      max-width: 460px;
      margin-left: auto; margin-right: auto;
      perspective: 1600px;
    }
    .bookfeat-stage.is-animated { max-width: 540px; }
    .bookfeat-frame {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      transform-style: preserve-3d;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      will-change: transform, opacity;
    }
    .bookfeat-frame img {
      width: 100%; height: 100%;
      object-fit: contain;
      display: block;
      image-rendering: -webkit-optimize-contrast;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      transform: translateZ(0);
    }
    @media (max-height: 560px) {
      .bookfeat-scrub { height: auto; }
      .bookfeat-sticky { position: static; height: auto; }
    }
  `;

  const content =
  <div className="container bookfeat-grid">
      <div>
        <h2 className="t-h2" style={{ margin: 0, color: '#000' }}>
          For Flux Sake
        </h2>
        <p className="t-body" style={{ color: '#000', margin: 'clamp(20px, 3vw, 28px) 0 0', maxWidth: 520 }}>Tony Martin's forthcoming book details the new understanding of biology, based around blood glucose data, that makes Eivi possible. The programme follows the methodology laid out in the book.

      </p>
        {bullets && bullets.length > 0 &&
      <ul className="t-body" style={{
        color: '#000',
        margin: 'clamp(16px, 2vw, 20px) 0 0',
        maxWidth: 520,
        paddingLeft: '1.2em'
      }}>
            {bullets.map((b, i) =>
        <li key={i} style={{ marginTop: i === 0 ? 0 : 12 }}>{b}</li>
        )}
          </ul>
      }
        {bullets && bullets.length > 0 && !showCta &&
      <div style={{ marginTop: 'clamp(28px, 4vw, 40px)' }}>
            <a href="#excerpt" className="btn btn-primary btn-lg">Get a free summary</a>
          </div>
      }
        {showCta &&
      <div style={{ marginTop: 'clamp(28px, 4vw, 40px)' }}>
            <a href={ctaHref} className="btn btn-primary btn-lg">{ctaLabel}</a>
          </div>
      }
      </div>

      <div className={`bookfeat-stage${animate ? ' is-animated' : ''}`} aria-hidden="true">
        {animate ?
      frames.map((src, i) =>
      <div
        key={src}
        className="bookfeat-frame"
        style={{
          opacity: i === activeIdx ? 1 : 0,
          transform: i === activeIdx ?
          `rotateY(${tweenDeg.toFixed(2)}deg)` :
          'rotateY(0deg)'
        }}>
        
              <img src={src} alt="" />
            </div>
      ) :

      <div className="bookfeat-frame" style={{ opacity: 1 }}>
            <img src={frames[1]} alt="" />
          </div>
      }
      </div>
    </div>;


  return (
    <section id="book-feature" style={{ background: '#FEFDFD' }}>
      <style>{styles}</style>
      {animate ?
      <div ref={scrubRef} className="bookfeat-scrub">
          <div className="bookfeat-sticky">{content}</div>
        </div> :

      <div className="bookfeat-static">{content}</div>
      }
    </section>);

}
window.BookFeature = BookFeature;