// BOOKS. amber → parchment. Pillars + 3 book covers + word-by-word quote

function WordReveal({ text, className = '', stagger = 60, threshold = 0.4 }) {
  const ref = useRef(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { setInView(true); obs.disconnect(); } });
    }, { threshold });
    obs.observe(el);
    return () => obs.disconnect();
  }, [threshold]);

  const words = text.split(' ');
  return (
    <p ref={ref} className={`${className} ${inView ? 'is-in' : ''}`}>
      {words.map((w, i) => (
        <span key={i} className="word" style={{ transitionDelay: `${i * stagger}ms` }}>
          {w}{i < words.length - 1 ? '\u00A0' : ''}
        </span>
      ))}
    </p>
  );
}

const PILLARS = [
  { title: 'Children begin to trust themselves', body: 'Children who know the weight and worth of their own knowing before the world teaches them to apologise for it.' },
  { title: 'Feel deeply safe', body: 'A nervous system rooted in country, ceremony, and the steady arms of the people who love them.' },
  { title: 'They begin to use their own senses', body: 'Sensitivity reframed not as fragility but as the very instrument they were sent here to play.' },
];

// NOTE: `hidden: true` keeps a book in the data but out of the render.
// Flip it to false (or remove the flag) to bring a title back later.
const BOOKS = [
  { title: 'Little Dragon, Big Light', body: 'A picture book for the child who already knows. Bedtime story; ancient remembrance.', cover: 'a', image: 'assets/book-little-dragon.jpeg', hidden: true },
  { title: 'The Children That Remembered',  body: 'A tale of young souls who never forgot where they came from, and the courage it takes to live awake in a sleeping world.', cover: 'b', image: 'assets/book-children-remembered.jpeg', amazon: 'https://www.amazon.com/dp/B0H6GXWHY3' },
  { title: 'The Unicorn and the Chosen One', body: 'A mythic friendship between a child of light and a creature of legend, walking together toward the destiny only they can see.', cover: 'c', image: 'assets/book-unicorn-chosen.jpeg', hidden: true },
];

function BookCoverArt({ variant }) {
  if (variant === 'a') return (
    <svg className="book__cover-art" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
      <g fill="none" stroke="#FFF8EE" strokeWidth="0.6" opacity="0.75">
        <circle cx="50" cy="65" r="14"/>
        <circle cx="50" cy="65" r="20" opacity="0.6"/>
        <circle cx="50" cy="65" r="26" opacity="0.4"/>
      </g>
      <g fill="#FFE9B0" opacity="0.9">
        {[[50,65,2.5],[34,52,1.5],[66,52,1.5],[40,30,1],[60,30,1],[28,72,1.2],[72,72,1.2],[50,18,1.5]].map((p,i)=><circle key={i} cx={p[0]} cy={p[1]} r={p[2]}/>)}
      </g>
    </svg>
  );
  if (variant === 'b') return (
    <svg className="book__cover-art" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
      <g fill="#FFE9B0">
        {Array.from({length:18}).map((_,i)=>{const x=10+i*4.5; const y=20+(i*23%55); const r=(i%3===0?1.6:0.9); return <circle key={i} cx={x} cy={y} r={r} opacity="0.85"/>})}
      </g>
      <path d="M0 78 Q 25 70, 50 78 T 100 78 L 100 100 L 0 100 Z" fill="#7A3B1E" opacity="0.55"/>
    </svg>
  );
  return (
    <svg className="book__cover-art" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
      <g fill="none" stroke="#FFF8EE" strokeWidth="0.5" opacity="0.7">
        <path d="M50 18 Q 25 50, 50 82 Q 75 50, 50 18 Z"/>
        <path d="M50 30 Q 35 50, 50 70 Q 65 50, 50 30 Z"/>
      </g>
      <g fill="#FFE9B0" opacity="0.85">
        <circle cx="50" cy="50" r="2"/>
        <circle cx="34" cy="38" r="0.9"/><circle cx="66" cy="38" r="0.9"/>
        <circle cx="34" cy="62" r="0.9"/><circle cx="66" cy="62" r="0.9"/>
        <circle cx="50" cy="26" r="1.1"/><circle cx="50" cy="74" r="1.1"/>
      </g>
    </svg>
  );
}

function Books() {
  const visibleBooks = BOOKS.filter((b) => !b.hidden);
  return (
    <section className="section books" id="books">
      <div className="container">
        <Reveal as="div" className="books__head">
          <Eyebrow tone="crimson">My Children's Books</Eyebrow>
          <h2>Raising Children Who Remember Who They Are</h2>
          <p className="sub-italic" style={{ color: '#7A3B1E' }}>
            For the ones who arrived knowing and the parents brave enough to listen.
          </p>
          <p className="books__declaration">
            I write children's books on conscious parenting because I believe
            healing does not begin in adulthood after the damage is done, it
            begins in the way a child is seen, spoken to, held, and taught to
            trust their own spirit before the world teaches them to abandon it.
          </p>
        </Reveal>

        <Reveal as="div" className="books__pillars" stagger>
          {PILLARS.map((p) => (
            <div key={p.title} className="pillar">
              <span className="pillar__dot"/>
              <p>
                <strong>{p.title}.</strong>
                {p.body}
              </p>
            </div>
          ))}
        </Reveal>

        <Reveal as="div" className={`book-row ${visibleBooks.length === 1 ? 'book-row--single' : ''}`} stagger>
          {visibleBooks.map((b) => {
            const buyable = Boolean(b.amazon);
            return (
              <a
                key={b.title}
                className="book"
                href={buyable ? b.amazon : '#'}
                target={buyable ? '_blank' : undefined}
                rel={buyable ? 'noopener noreferrer' : undefined}
                onClick={buyable ? undefined : (e)=>e.preventDefault()}
              >
                <div className="book__cover book__cover--image">
                  <img className="book__cover-img" src={b.image} alt={`${b.title} book cover`}/>
                </div>
                <div className="book__meta">
                  <h3>{b.title}</h3>
                  <p>{b.body}</p>
                </div>
                <span className="book__more">{buyable ? 'Buy Now' : 'Learn More'}</span>
              </a>
            );
          })}
        </Reveal>

        <Reveal as="div" className="books__quote" threshold={0.4}>
          <WordReveal
            text="This work is about remembrance not fear. Connection not control. Wholeness not perfection."
            stagger={80}
            threshold={0.4}
          />
        </Reveal>
      </div>
    </section>
  );
}

window.Books = Books;