/* MANIFESTO — editorial: quiet panel with a long pull-quote that fills the page,
   small caption rail, no portrait. */

function Manifesto({ t }) {
  const ref = React.useRef(null);
  const [progress, setProgress] = React.useState(0);

  React.useEffect(() => {
    const onScroll = () => {
      if (!ref.current) return;
      const r = ref.current.getBoundingClientRect();
      const v = Math.max(0, Math.min(1, (window.innerHeight - r.top) / (window.innerHeight + r.height)));
      setProgress(v);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const words = t.manifestoText.split(" ");

  return (
    <section ref={ref} className="section bg-linen manifesto" data-screen-label="02 Manifesto" id="philosophy">
      <div className="section-inner">
        <header className="manifesto-head">
          <div className="sec-badge">
            <span className="num">02</span>
            <span className="bar" />
            <span>{t.manifestoEyebrow}</span>
          </div>
          <div className="manifesto-loc mono">{t.manifestoLoc}</div>
        </header>

        <div className="manifesto-body">
          <p className="manifesto-text display">
            {words.map((w, i) => {
              const wordPos = i / words.length;
              const localProgress = Math.max(0, Math.min(1, (progress * 1.5 - 0.10 - wordPos) * 4));
              return (
                <span
                  key={i}
                  className="m-word"
                  style={{
                    opacity: 0.18 + localProgress * 0.82,
                  }}
                >
                  {w}{" "}
                </span>
              );
            })}
          </p>
        </div>

        <footer className="manifesto-foot">
          <div className="sig-block">
            <span className="sig-name italic-serif">— Natalia</span>
            <span className="sig-role mono">{t.manifestoFootNote}</span>
          </div>
          <div className="manifesto-tags">
            <span className="tag-pill">{t.tag1}</span>
            <span className="tag-pill">{t.tag2}</span>
            <span className="tag-pill">{t.tag3}</span>
            <span className="tag-pill">{t.tag4}</span>
          </div>
        </footer>
      </div>

      <style>{`
        .manifesto-head {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-bottom: 32px;
          border-bottom: 1px solid var(--line-soft);
        }
        .manifesto-loc { color: var(--muted); }

        .manifesto-body {
          padding: clamp(80px, 14vh, 180px) 0;
          max-width: 1200px;
          margin: 0 auto;
        }

        .manifesto-text {
          font-family: var(--display);
          font-size: clamp(28px, 3.6vw, 56px);
          font-weight: 300;
          line-height: 1.22;
          letter-spacing: -0.015em;
          color: var(--slate-ink);
          text-align: left;
        }
        .m-word {
          display: inline;
          transition: opacity 0.6s var(--ease-out);
        }
        /* Pick a single emphasis mid-sentence rather than every 7th word */
        .m-word:nth-child(7n+3) {
          font-style: italic;
          font-weight: 300;
        }

        .manifesto-foot {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          padding-top: 32px;
          border-top: 1px solid var(--line-soft);
          flex-wrap: wrap;
          gap: 24px;
        }
        .sig-block { display: flex; flex-direction: column; gap: 6px; }
        .sig-name { font-size: 22px; color: var(--slate-ink); font-weight: 300; }
        .sig-role { font-size: 10px; color: var(--muted); }

        .manifesto-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 0;
        }
        .tag-pill {
          font-family: var(--sans);
          font-style: normal;
          font-size: 10px;
          letter-spacing: 0.28em;
          text-transform: uppercase;
          padding: 8px 16px;
          border: 1px solid var(--line);
          border-right: none;
          border-radius: 0;
          color: var(--slate);
          background: transparent;
        }
        .tag-pill:last-child { border-right: 1px solid var(--line); }
      `}</style>
    </section>
  );
}

window.Manifesto = Manifesto;