/* =========================================================================
   Morning Mob — Founder story view (StoryView)
   Editorial split-screen story, merged into the storefront router.
   Uses the app's TopNav + Footer (rendered by App); this is content only.
   Image areas are <image-slot> upload zones; copy is click-to-edit.
   ========================================================================= */

function Editable({ tag = 'p', className, html, style }) {
  const Tag = tag;
  return (
    <Tag className={className} style={style} contentEditable suppressContentEditableWarning
      dangerouslySetInnerHTML={{ __html: html }} />
  );
}

function StoryView() {
  const rootRef = useRef(null);

  useEffect(() => {
    const root = rootRef.current;
    if (!root) return;
    const reveals = Array.from(root.querySelectorAll('.fs-reveal'));
    const hero = root.querySelector('.fs-split');

    // Hero: staggered fade-up on mount (SPA — no load event to wait for).
    const heroTimers = [];
    reveals.forEach((el) => {
      if (hero && hero.contains(el)) {
        const d = parseInt(el.dataset.delay || '0', 10);
        heroTimers.push(setTimeout(() => el.classList.add('in'), 120 + d));
      }
    });

    // Everything below the fold: reveal on scroll into view.
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (!e.isIntersecting) return;
        const d = parseInt(e.target.dataset.delay || '0', 10);
        setTimeout(() => e.target.classList.add('in'), d);
        io.unobserve(e.target);
      });
    }, { threshold: 0.18, rootMargin: '0px 0px -8% 0px' });

    reveals.forEach((el) => { if (!(hero && hero.contains(el))) io.observe(el); });

    return () => { io.disconnect(); heroTimers.forEach(clearTimeout); };
  }, []);

  const VALUES = [
    { n: '01', t: 'Considered, not constant', d: "We make less, and make it matter. A piece arrives when it's ready — not when the calendar says so." },
    { n: '02', t: 'Quiet over loud', d: 'No hype, no shouting. The work speaks at a normal volume and trusts you to lean in.' },
    { n: '03', t: 'Made to be kept', d: 'Built to outlast the season — and the trend that happened to name it.' },
    { n: '04', t: 'Better together', d: 'The mob is the point. What we make is just the reason to gather.' },
  ];

  return (
    <div className="fs-root" ref={rootRef}>
      {/* ---------- HERO ---------- */}
      <section className="fs-split">
        <div className="fs-panel">
          <Editable className="fs-eyebrow fs-reveal" html="Morning Mob — est. 2023" style={{ '--d': 0 }} />
          <Editable tag="h1" className="fs-display fs-reveal" style={{ marginTop: 26 }} html="The story<br>behind the <em>mob</em>." />
          <Editable className="fs-lead fs-reveal" style={{ marginTop: 34 }} html="Many have asked what Morning Mob is. Here, then, is the answer — a label for the people already awake, who move a little differently before the rest of the world catches up." />
          <div className="fs-reveal" data-delay="280" style={{ marginTop: 46, display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap' }}>
            <Editable tag="span" className="fs-sig" html="— Morning Mob" />
            <Editable tag="span" className="fs-kicker" html="Singapore · since 2023" />
          </div>
        </div>
        <div className="fs-photo fs-reveal" data-delay="160">
          <image-slot id="story-founder-hero" shape="rect" src={MM_PHOTOS.founder} placeholder="Upload photo — portrait"></image-slot>
        </div>
      </section>

      {/* ---------- THE BEGINNING ---------- */}
      <section className="fs-split fs-split--reverse">
        <div className="fs-panel">
          <Editable className="fs-eyebrow fs-reveal" html="The beginning" />
          <Editable tag="h2" className="fs-subhead fs-reveal" style={{ marginTop: 22 }} html="Before there was a name." />
          <div className="fs-reveal" style={{ marginTop: 30, display: 'flex', flexDirection: 'column', gap: 22 }}>
            <Editable className="fs-body" html="Morning Mob began in Singapore in 2023, before sunrise, with an idea that wouldn't let us sleep. We wanted clothes that felt like the early hours — calm, unhurried, honest. Nothing to prove." />
            <Editable className="fs-body" html="It started with one good tee and a cup of coffee. We weren't chasing a trend; we were making the thing we couldn't find — soft, easy, made to be lived in. Everything since has grown from that first small batch." />
          </div>
        </div>
        <div className="fs-photo fs-reveal">
          <image-slot id="story-beginning" shape="rect" src={MM_PHOTOS.about3} placeholder="Upload photo — the early days"></image-slot>
        </div>
      </section>

      {/* ---------- THE MOB ---------- */}
      <section className="fs-split">
        <div className="fs-panel">
          <Editable className="fs-eyebrow fs-reveal" html="The mob" />
          <Editable tag="h2" className="fs-subhead fs-reveal" style={{ marginTop: 22 }} html="A community,<br>not a customer base." />
          <div className="fs-reveal" style={{ marginTop: 30, display: 'flex', flexDirection: 'column', gap: 22 }}>
            <Editable className="fs-body" html="The mob isn't a mailing list. It's the people who showed up early — who wore the first tees before there was much of a name on the label, who told a friend, who came back. They set the tone for everything we do." />
            <Editable className="fs-body" html="To be part of Morning Mob is to move quietly and deliberately. It's choosing less and meaning it. We're not interested in being everywhere — we'd rather be the thing you reach for first, on the mornings that matter." />
          </div>
        </div>
        <div className="fs-photo fs-reveal">
          <image-slot id="story-mob" shape="rect" src={MM_PHOTOS.community} placeholder="Upload photo — the community"></image-slot>
        </div>
      </section>

      {/* ---------- CENTERED PULL-QUOTE ---------- */}
      <section className="fs-quote">
        <Editable tag="blockquote" className="fs-quote__text fs-reveal" html="We never set out to start a clothing brand. We set out to start a morning — and let everyone who understood it find their way in." />
        <Editable className="fs-quote__by fs-reveal" data-delay="160" html="Morning Mob — est. 2023" />
      </section>

      {/* ---------- WHAT WE STAND FOR ---------- */}
      <section className="fs-split fs-split--reverse">
        <div className="fs-panel">
          <Editable className="fs-eyebrow fs-reveal" html="What we stand for" />
          <Editable tag="h2" className="fs-subhead fs-reveal" style={{ marginTop: 22, marginBottom: 38 }} html="Four things we<br>won't trade away." />
          <div className="fs-values fs-reveal">
            {VALUES.map((v) => (
              <div className="fs-value" key={v.n}>
                <Editable tag="div" className="fs-value__num" html={v.n} />
                <Editable tag="h3" className="fs-value__title" html={v.t} />
                <Editable className="fs-value__desc" html={v.d} />
              </div>
            ))}
          </div>
        </div>
        <div className="fs-photo fs-reveal">
          <image-slot id="story-values-photo" shape="rect" src={MM_PHOTOS.theFounder} placeholder="Upload photo — detail / lifestyle"></image-slot>
        </div>
      </section>
    </div>
  );
}
window.StoryView = StoryView;