// ============================================================
// SECTION — LIVRE
// ============================================================

const BOOK_PILLARS = [
  { n: "01", t: "Prospecter", d: "Avec réactivité et process établis plutôt qu'au feeling." },
  { n: "02", t: "Vendre", d: "Avec une relation humaine de qualité plutôt qu'avec de la pression." },
  { n: "03", t: "Manager", d: "Avec constance et confiance plutôt qu'avec du contrôle." },
  { n: "04", t: "Piloter", d: "Avec des données claires plutôt qu'à l'instinct." },
];

function BookSection() {
  const ref = useReveal();
  const [hovered, setHovered] = useState(null);

  return (
    <section ref={ref} id="guide-business" className="section section-book">
      <div className="shell book-grid">
        <div className="book-left">
          <SectionHeader
            number="03"
            eyebrow="Guide business · 2026"
            title={[
              { text: "Prospecter," },
              { text: "vendre," },
              { text: "manager," },
              { text: "piloter." },
            ]}
          />

          <div className="reveal-up book-intro" style={{ transitionDelay: "300ms" }}>
            <p>
              <strong style={{ fontWeight: 700, color: "var(--ink)" }}>« Les 4 piliers d'un business de fitness premium »</strong> condense 12 ans d'expérience terrain issus principalement du premium. Pour tous ceux qui souhaitent premiumiser leur approche commerciale et managériale.
            </p>
          </div>

          <div className="book-pillars">
            {BOOK_PILLARS.map((p, i) => (
              <div
                key={p.n}
                className="reveal-up book-pillar"
                style={{ "--reveal-delay": `${400 + i * 80}ms` }}
                onMouseEnter={() => setHovered(i)}
                onMouseLeave={() => setHovered(null)}
                data-hover
              >
                <span className="mono book-pillar-n">{p.n}</span>
                <div className="book-pillar-body">
                  <h4>{p.t}</h4>
                  <p>{p.d}</p>
                </div>
                <div className="book-pillar-bar">
                  <div className="book-pillar-bar-fill" style={{ width: hovered === i ? "100%" : "0%" }}></div>
                </div>
              </div>
            ))}
          </div>

          <div className="reveal-up book-buy" style={{ transitionDelay: "800ms" }}>
            <div className="book-price">
              <span className="display book-price-num" style={{ fontSize: "88px" }}>29<span className="book-price-cents">€</span><span className="mono" style={{ fontSize: "16px", marginLeft: "8px", color: "var(--ink-muted)", letterSpacing: "0.06em" }}>TTC</span></span>
              <span className="mono book-price-meta">150 pages · Livraison en 7 jours maximum</span>
            </div>

            <div className="book-actions">
              <Magnetic>
                <a href="#" className="btn btn-blue btn-large">
                  Commander le livre <ArrowUpRight size={16} />
                </a>
              </Magnetic>
              <Magnetic strength={0.2}>
                <a href="#" className="btn btn-ghost btn-large">
                  Lire un extrait <ArrowUpRight size={16} />
                </a>
              </Magnetic>
            </div>
          </div>
        </div>

        <div className="book-right">
          <BookCover />
        </div>
      </div>
    </section>
  );
}

function BookCover() {
  const wrapRef = useRef(null);
  const bookRef = useRef(null);

  useEffect(() => {
    const wrap = wrapRef.current;
    const book = bookRef.current;
    if (!wrap || !book) return;

    let raf;
    const onMove = (e) => {
      const rect = wrap.getBoundingClientRect();
      const x = ((e.clientX - rect.left) / rect.width - 0.5) * 2;
      const y = ((e.clientY - rect.top) / rect.height - 0.5) * 2;
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        book.style.transform = `perspective(1400px) rotateY(${-15 + x * 8}deg) rotateX(${-y * 4}deg)`;
      });
    };
    const onLeave = () => {
      cancelAnimationFrame(raf);
      book.style.transform = `perspective(1400px) rotateY(-15deg) rotateX(0)`;
    };

    wrap.addEventListener("mousemove", onMove);
    wrap.addEventListener("mouseleave", onLeave);
    return () => {
      wrap.removeEventListener("mousemove", onMove);
      wrap.removeEventListener("mouseleave", onLeave);
    };
  }, []);

  return (
    <div ref={wrapRef} className="book-cover-wrap reveal-fade" style={{ transitionDelay: "400ms" }}>
      <div ref={bookRef} className="book-3d">
        <div className="book-cover book-cover--image">
          <img
            src="assets/book-cover.jpeg"
            alt="Les 4 piliers d'un business de fitness premium et rentable — Nicolas Nechitch"
            className="book-cover-img"
          />

          {/* Edge */}
          <div className="book-spine"></div>
          <div className="book-pages"></div>
        </div>
      </div>

      <div className="book-shadow"></div>

      <div className="book-tag book-tag-1 mono">
        <span style={{ color: "var(--blue)" }}>●</span> Best-seller
      </div>
      <div className="book-tag book-tag-2 mono">
        150 pages.
      </div>
    </div>
  );
}

Object.assign(window, { BookSection, BookCover, BOOK_PILLARS });