// landing2.jsx — v2 landing: editorial hero (two variants), feedback
// invitation, Margin teaser. The shelf lives in shelf2.jsx.
const { useState: useLState, useEffect: useLEffect, useRef: useLRef } = React;

// ── Scroll reveal (once, reduced-motion aware) ───────────────
function Reveal({ children, delay = 0, style = {} }) {
  const ref = useLRef(null);
  const [on, setOn] = useLState(false);
  useLEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { setOn(true); return; }
    // Already in view on mount — don't wait for a callback that may never come.
    const r = el.getBoundingClientRect();
    if (r.top < window.innerHeight && r.bottom > 0) { setOn(true); return; }
    let io = null;
    // Safety net: some embedding contexts never deliver IO callbacks. Content
    // must never be left invisible because of it.
    const fallback = setTimeout(() => { setOn(true); if (io) io.disconnect(); }, 800);
    io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setOn(true); clearTimeout(fallback); io.disconnect(); }
    }, { threshold: 0.1 });
    io.observe(el);
    return () => { clearTimeout(fallback); io.disconnect(); };
  }, []);
  return (
    <div ref={ref} style={{
      opacity: on ? 1 : 0, transform: on ? 'none' : 'translateY(16px)',
      transition: 'opacity .7s ease ' + delay + 'ms, transform .7s cubic-bezier(.2,.7,.2,1) ' + delay + 'ms',
      ...style,
    }}>{children}</div>
  );
}

function Eyebrow({ children, style = {} }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, fontFamily: T.font.head, fontWeight: 800, fontSize: 11.5, letterSpacing: 2.6, textTransform: 'uppercase', color: T.color.accentDeep, ...style }}>
      <span aria-hidden="true" style={{ fontSize: 10, color: T.color.accent }}>✦</span>{children}
    </div>
  );
}

// ── CSS book object (crisp at any size; echoes the leather cover art) ──
// Structure: one shell carries the rotation, hover lift and drop shadow. Inside
// it, three separable layers — the back-cover sliver, the gilded fore-edge, and
// the front face. Only the front face is meant to be replaced when real cover
// art exists; everything else survives that swap untouched.
function BookObject() {
  const [hover, setHover] = useLState(false);
  // Gilded fore-edge: two striation passes at different periods so the page
  // lines read as cut leaves rather than a regular ruling. All tones derive
  // from the golds already used by the cover frame and type.
  const pageStripes = 'repeating-linear-gradient(90deg, rgba(126,92,29,0.38) 0 0.5px, rgba(0,0,0,0) 0.5px 2px), '
    + 'repeating-linear-gradient(90deg, rgba(126,92,29,0.20) 0 0.5px, rgba(0,0,0,0) 0.5px 3px)';
  const pageBody = 'linear-gradient(180deg, rgba(255,252,244,0.34) 0 8%, rgba(0,0,0,0) 26%, rgba(126,92,29,0.34) 100%), '
    + 'linear-gradient(90deg, rgba(126,92,29,0.98) 0%, rgba(168,124,42,0.96) 30%, rgba(212,175,55,0.96) 62%, rgba(239,217,160,0.98) 86%, rgba(168,124,42,0.94) 100%)';
  return (
    <div className="p-bookwrap" style={{ position: 'relative', width: 'min(250px, 62vw)' }}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
      {/* The book's own light: a diffuse gold bloom and drifting motes. Light
         and dust only — scattered points, never a body, edge or form. */}
      <div className="p-bookaura" aria-hidden="true"></div>
      <div style={{
        position: 'relative', aspectRatio: '3 / 4',
        // volume-aware drop shadow: anchored tight under the block, softening away
        boxShadow: hover
          ? '3px 6px 10px -6px rgba(34,27,18,0.34), 6px 34px 62px -18px rgba(34,27,18,0.34)'
          : '3px 5px 8px -5px rgba(34,27,18,0.30), 5px 24px 46px -16px rgba(34,27,18,0.28)',
        borderRadius: '5px 12px 12px 5px',
        transform: hover ? 'rotate(0deg) translateY(-8px)' : 'rotate(-2.5deg)',
        transition: 'transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease',
      }}>
        {/* back cover — projects ~2px beyond the page block, the overhang that
            stops the pages reading as glued on */}
        <div style={{ position: 'absolute', right: 0, top: 3, bottom: 3, width: 5,
          background: 'linear-gradient(130deg, #2F5138, #172C1E)', borderRadius: '0 10px 10px 0' }}></div>
        {/* page block — fore-edge on the right, the side nearer the viewer.
            Depth matched to the head edge. Lit at the head, falling to shadow. */}
        <div style={{ position: 'absolute', right: 2, top: 4.5, bottom: 6, width: 4.5,
          background: pageStripes + ', ' + pageBody, borderRadius: '0 3px 3px 0',
          // soft bound junction against the cover, bright catch on the outer edge
          boxShadow: 'inset 3px 0 4px -1px rgba(23,44,30,0.55), inset -0.5px 0 0 rgba(239,217,160,0.55), inset 0 1px 0 rgba(255,252,244,0.5)' }}></div>
        {/* FRONT FACE — the only replaceable layer. When final cover art exists,
            set it as a background-image on THIS element (cover, center, and keep
            the radius); the gold frame and type below are its children and go
            with it. The shell, page block, hinge and shadow stay exactly as is. */}
        <div style={{
          position: 'absolute', left: 0, top: 0, bottom: 0, right: 6.5,
          background: 'linear-gradient(130deg, #2F5138 0%, #23402C 55%, #172C1E 100%)',
          borderRadius: '5px 3px 3px 5px',
          boxShadow: 'inset 0 1px 0 rgba(255,230,180,0.18), inset -2px 0 6px rgba(0,0,0,0.3)',
        }}>
          <div style={{ position: 'absolute', left: 11, top: 5, bottom: 5, width: 1.5, background: 'rgba(0,0,0,0.32)' }}></div>
          <div style={{ position: 'absolute', left: 13, top: 5, bottom: 5, width: 1, background: 'rgba(255,230,180,0.10)' }}></div>
          <div style={{ position: 'absolute', inset: 18, border: '1.5px solid rgba(212,175,55,0.55)', borderRadius: '3px 7px 7px 3px' }}></div>
          <div style={{ position: 'absolute', inset: 23, border: '1px solid rgba(212,175,55,0.28)', borderRadius: '2px 5px 5px 2px' }}></div>
          <div style={{ position: 'absolute', inset: 23, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 16, padding: '0 20px', textAlign: 'center' }}>
            <div aria-hidden="true" style={{ color: '#D4AF37', fontSize: 13, letterSpacing: 6 }}>✦</div>
            <div style={{ fontFamily: T.font.display, fontWeight: 600, fontSize: 'clamp(19px, 5.6vw, 24px)', lineHeight: 1.45, letterSpacing: 2.5, textTransform: 'uppercase', color: '#EFD9A0', textShadow: '0 1px 1px rgba(0,0,0,0.5)' }}>
              The First Mistake
            </div>
            <div style={{ width: 30, height: 1, background: 'rgba(212,175,55,0.6)' }}></div>
            <div style={{ fontFamily: T.font.head, fontWeight: 700, fontSize: 9.5, letterSpacing: 2.4, textTransform: 'uppercase', color: 'rgba(239,217,160,0.72)' }}>
              Book of Light · Book One
            </div>
          </div>
        </div>
      </div>
      <div style={{ position: 'absolute', left: '8%', right: '8%', bottom: -26, height: 22, background: 'radial-gradient(50% 100% at 50% 0%, rgba(34,27,18,0.18), transparent 75%)', filter: 'blur(2px)' }}></div>
      <div className="p-motes" aria-hidden="true">
        {[
          { l: '92%', b: '16%', s: 3, d: 0, u: 5.4, x: 10 },
          { l: '88%', b: '32%', s: 4, d: 1.1, u: 6.2, x: 15, k: 1 },
          { l: '96%', b: '50%', s: 2.5, d: 2.3, u: 5.8, x: 8 },
          { l: '90%', b: '66%', s: 3.5, d: 0.6, u: 6.6, x: 17 },
          { l: '85%', b: '10%', s: 3, d: 3.1, u: 5.2, x: 12, k: 1 },
          { l: '99%', b: '28%', s: 2, d: 4.4, u: 6.8, x: 13 },
          { l: '94%', b: '78%', s: 4.5, d: 2.9, u: 5.9, x: 9, k: 1 },
          { l: '87%', b: '46%', s: 2, d: 5.2, u: 6.4, x: 18 },
          { l: '97%', b: '62%', s: 3, d: 1.8, u: 7.1, x: 6 },
          { l: '91%', b: '4%', s: 2.5, d: 3.8, u: 5.6, x: 14 },
          { l: '82%', b: '58%', s: 3.5, d: 6.1, u: 6.7, x: 11, k: 1 },
          { l: '70%', b: '2%', s: 3, d: 1.7, u: 6.9, x: -9 },
          { l: '48%', b: '0%', s: 4, d: 2.8, u: 6.1, x: 13 },
          { l: '30%', b: '4%', s: 2.5, d: 4.2, u: 7.2, x: -12, k: 1 },
          { l: '60%', b: '6%', s: 3.5, d: 3.6, u: 5.6, x: 7 },
          { l: '18%', b: '1%', s: 3, d: 5.6, u: 6.5, x: -14 },
          { l: '40%', b: '3%', s: 2, d: 0.9, u: 7.4, x: 10 },
          { l: '8%', b: '8%', s: 3, d: 2.1, u: 6.3, x: -16, k: 1 },
          { l: '2%', b: '30%', s: 2.5, d: 4.8, u: 6.8, x: -12 },
          { l: '5%', b: '54%', s: 3.5, d: 3.3, u: 5.9, x: -9 },
          { l: '1%', b: '70%', s: 2, d: 6.4, u: 7.0, x: -15 },
          { l: '10%', b: '44%', s: 3, d: 5.9, u: 6.6, x: -7 },
        ].map((m, i) => (
          <span key={i} className={'p-mote' + (m.k ? ' p-mote-k' : '')} style={{
            left: m.l, bottom: m.b, width: m.s, height: m.s,
            animationDelay: m.d + 's', animationDuration: m.u + 's', '--mx': m.x + 'px',
          }}></span>
        ))}
      </div>
    </div>
  );
}

// ── Hero A: typographic + book object ────────────────────────
function HeroCover({ onNav, onBrowse }) {
  return (
    <section data-screen-label="Hero" style={{ padding: '54px 0 30px' }}>
      <div style={{
        display: 'grid', gridTemplateColumns: 'minmax(0, 1.15fr) minmax(0, 0.85fr)',
        gap: 'clamp(28px, 6vw, 72px)', alignItems: 'center',
      }} className="p-hero-grid">
        <Reveal>
          <Eyebrow>Book One · Test edition</Eyebrow>
          <h1 style={{ fontFamily: T.font.display, fontWeight: 600, fontSize: 'clamp(42px, 6.4vw, 68px)', lineHeight: 1.06, letterSpacing: '-0.01em', color: T.color.text, margin: '20px 0 0', textWrap: 'balance' }}>
            The First&nbsp;Mistake
          </h1>
          <p style={{ fontFamily: T.font.body, fontSize: 17, lineHeight: 1.65, color: T.color.textSoft, margin: '22px 0 0', maxWidth: 440 }}>
            An interfaith picture-book series, written to be read aloud — stories that celebrate what unites us.
          </p>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap', marginTop: 34 }}>
            <Btn onClick={() => onNav('feedback')}>Share reader feedback <span className="p-arr">→</span></Btn>
            <Btn variant="ghost" onClick={onBrowse}>Browse the library</Btn>
          </div>
        </Reveal>
        <Reveal delay={140} style={{ display: 'flex', justifyContent: 'center' }}>
          <BookObject />
        </Reveal>
      </div>
    </section>
  );
}

// ── Hero B: full-width illustrated spread ────────────────────
function HeroSpread({ onNav }) {
  return (
    <section data-screen-label="Hero" style={{ padding: '40px 0 30px' }}>
      <Reveal>
        <div style={{ position: 'relative', borderRadius: 18, overflow: 'hidden', boxShadow: T.shadow.lift }}>
          <img src={(window.__resources && window.__resources.spreadImg) || 'assets/spread.png'} alt="An illustrated spread from The Book of Light — families reading beneath sunlit trees"
            style={{ display: 'block', width: '100%', height: 'clamp(380px, 46vw, 540px)', objectFit: 'cover' }} />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(185deg, rgba(20,12,4,0.02) 40%, rgba(20,12,4,0.78) 100%)' }}></div>
          <div style={{ position: 'absolute', left: 'clamp(20px, 4vw, 44px)', right: 'clamp(20px, 4vw, 44px)', bottom: 'clamp(22px, 3.4vw, 40px)' }}>
            <Eyebrow style={{ color: '#F2DFAE' }}>Book One · Test edition</Eyebrow>
            <h1 style={{ fontFamily: T.font.display, fontWeight: 600, fontSize: 'clamp(34px, 4.6vw, 54px)', lineHeight: 1.08, color: '#FFFDF6', margin: '14px 0 0', maxWidth: 560, textWrap: 'balance', textShadow: '0 2px 14px rgba(20,12,4,0.4)' }}>
              The First Mistake
            </h1>
            <p style={{ fontFamily: T.font.body, fontSize: 16, lineHeight: 1.6, color: 'rgba(255,250,238,0.88)', margin: '12px 0 0', maxWidth: 470 }}>
              An interfaith picture-book series, written to be read aloud — stories that celebrate what unites us.
            </p>
            <div style={{ marginTop: 24 }}>
              <Btn onClick={() => onNav('feedback')} style={{ background: '#FFFDF6', color: '#2A1F12', boxShadow: '0 12px 28px rgba(20,12,4,0.35)' }}>
                Share reader feedback <span className="p-arr">→</span>
              </Btn>
            </div>
          </div>
        </div>
      </Reveal>
    </section>
  );
}

// ── Feedback invitation ──────────────────────────────────────
function FeedbackSection({ onNav }) {
  return (
    <section data-screen-label="Feedback invitation" style={{ padding: '64px 0 0' }}>
      <Reveal>
        <div style={{
          textAlign: 'center', maxWidth: 620, margin: '0 auto', padding: 'clamp(36px, 5vw, 54px) clamp(22px, 4vw, 48px)',
          background: T.color.card, border: '1px solid ' + T.color.border, borderRadius: 18, boxShadow: T.shadow.soft,
        }}>
          <div aria-hidden="true" style={{ color: T.color.accent, fontSize: 13, letterSpacing: 8 }}>✦</div>
          <h2 style={{ fontFamily: T.font.display, fontWeight: 600, fontSize: 'clamp(26px, 3.4vw, 34px)', color: T.color.text, margin: '14px 0 10px', letterSpacing: 0.2, textWrap: 'balance' }}>
            Have your test copy in hand?
          </h2>
          <p style={{ fontFamily: T.font.body, fontSize: 15.5, color: T.color.textSoft, margin: '0 auto 28px', maxWidth: 400, lineHeight: 1.65 }}>
            Your notes shape the final book. Tell us what landed, what didn't, and what made your child light up.
          </p>
          <Btn onClick={() => onNav('feedback')}>Share reader feedback <span className="p-arr">→</span></Btn>
        </div>
      </Reveal>
    </section>
  );
}

// ── Margin teaser ────────────────────────────────────────────
// Margin is not deployable. No links, no buttons, no feature claims —
// "In development." is the whole promise.
const MARGIN_DUST = [
  { l: '11%', d: 0, s: 13 }, { l: '26%', d: 3.4, s: 16 }, { l: '40%', d: 1.6, s: 11 },
  { l: '57%', d: 5.2, s: 15 }, { l: '72%', d: 2.4, s: 12 }, { l: '87%', d: 4.1, s: 17 },
];

function MarginSection() {
  return (
    <section id="margin" data-screen-label="Margin" style={{ padding: '56px 0 10px' }}>
      <Reveal>
        <div style={{
          position: 'relative', overflow: 'hidden', maxWidth: 620, margin: '0 auto',
          padding: 'clamp(34px, 5vw, 48px) clamp(24px, 4vw, 44px)', borderRadius: 18,
          background: 'linear-gradient(130deg, #2F5138 0%, #23402C 55%, #172C1E 100%)',
          boxShadow: '0 22px 44px rgba(34,27,18,0.22)',
        }}>
          <div aria-hidden="true" style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
            {MARGIN_DUST.map((p, i) => (
              <span key={i} className="p-dust" style={{ left: p.l, bottom: -8, animationDuration: p.s + 's', animationDelay: p.d + 's' }}></span>
            ))}
          </div>
          <div style={{ position: 'relative' }}>
            <div aria-hidden="true" style={{ color: 'rgba(232,200,110,0.92)', fontSize: 11, letterSpacing: 6 }}>◆</div>
            <h3 style={{ fontFamily: T.font.display, fontWeight: 600, fontSize: 'clamp(28px, 4vw, 34px)', color: '#F4E8CE', margin: '14px 0 0', letterSpacing: 0.4 }}>Margin</h3>
            <p style={{ fontFamily: T.font.body, fontSize: 15.5, lineHeight: 1.65, color: 'rgba(244,232,206,0.82)', margin: '12px 0 0', maxWidth: 430, textWrap: 'pretty' }}>
              A read-along and reflection companion — where the story is read aloud, and families keep their own notes beside it.
            </p>
            <div style={{ fontFamily: T.font.head, fontWeight: 700, fontSize: 11.5, letterSpacing: 1.8, textTransform: 'uppercase', color: 'rgba(244,232,206,0.46)', marginTop: 22 }}>In development.</div>
          </div>
        </div>
      </Reveal>
    </section>
  );
}

// ── Landing view ─────────────────────────────────────────────
function LandingView({ onNav, t }) {
  t = t || {};
  const browse = () => {
    const el = document.getElementById('library');
    if (!el) return;
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    const y = el.getBoundingClientRect().top + window.scrollY - 24;
    window.scrollTo({ top: y, behavior: reduce ? 'auto' : 'smooth' });
  };

  const hero = (t.hero === 'spread')
    ? <HeroSpread key="hero" onNav={onNav} />
    : <HeroCover key="hero" onNav={onNav} onBrowse={browse} />;
  const shelf = <ShelfSection key="shelf" onNav={onNav} />;
  const blocks = (t.order === 'shelf') ? [shelf, hero] : [hero, shelf];

  return (
    <div style={{ maxWidth: 960, margin: '0 auto', padding: '0 8px' }}>
      {blocks}
      <FeedbackSection onNav={onNav} />
      <MarginSection />
    </div>
  );
}

Object.assign(window, { LandingView, Reveal, Eyebrow });