// components/familiar-section.jsx
//
// <FamiliarSection> — Section 2. Replaces Setup + Permission Interstitial.
// Editorial scroll module: headline + three staircase sentences (L/C/R),
// each with a rotating highlighted phrase, then a closing bridge line
// that visually drops into the cream IshCards section below.
//
// Props:
//   variant — "crescendo" | "sandwich" | "collage" | "rebel"
//
// Behavior:
//   - All three highlighter rotations are paused until the section
//     intersects the viewport (threshold 0.1).
//   - prefers-reduced-motion freezes on the first variant of each line.

function FamiliarSection({ variant = "sandwich" }) {
  const C = window.COPY;
  const data = C.familiar;
  const sectionRef = React.useRef(null);
  const [armed, setArmed] = React.useState(false);
  const [reduced, setReduced] = React.useState(false);

  React.useEffect(() => {
    const m = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)");
    if (m && m.matches) {
      setReduced(true);
      setArmed(true);
      return;
    }
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            setArmed(true);
            io.disconnect();
          }
        });
      },
      { threshold: 0.1 }
    );
    if (sectionRef.current) io.observe(sectionRef.current);
    return () => io.disconnect();
  }, []);

  return (
    <section
      id="familiar"
      ref={sectionRef}
      aria-labelledby="familiar-heading"
      className={"section-dark familiar familiar-variant-" + variant}
    >
      <div className="familiar-inner">
        <h2 id="familiar-heading" className="familiar-heading">
          {data.heading}
        </h2>

        <div className="familiar-stack">
          {data.sentences.map((s) => (
            <div key={s.id} className={"familiar-row familiar-row-" + s.id}>
              <p
                className={"familiar-sentence familiar-sentence-" + s.align + " familiar-sentence-" + s.id}
              >
                <span className="familiar-frame">{s.before}</span>
                {s.breakBefore ? <br /> : " "}
                <HighlightMarker
                  variants={data.variants[s.id]}
                  color={s.color}
                  intervalMs={data.intervalMs[s.id]}
                  armed={armed}
                  reduced={reduced}
                  stack={!!s.stack}
                  endPunct={s.endPunct || ""}
                />
              </p>
              {s.coda && (
                <p className={"familiar-coda familiar-coda-" + s.codaAlign + " familiar-coda-" + s.id}>
                  {s.coda}
                </p>
              )}
            </div>
          ))}
        </div>

        {/* Closing brand bridge — sentence case "Fanish is for that."
            in cream Gelasio italic. The crayon play-arrow that follows
            is rendered OUTSIDE the bridge container (as a sibling) so
            it can span the full viewport width and reach far below the
            device frame, matching the reference play-sheet sweep. */}
        {/* Closing brand bridge — sentence case "Fanish is for that."
            in cream Gelasio italic. Standalone — the crayon play-arrow
            experiment from earlier iterations was removed; the dark
            seam between Familiar and the device frame stands on its
            own. */}
        <div className="familiar-bridge">
          <p className="familiar-bridge-text">Fanish is for that.</p>
          {/* Organic double underline — option 2 (editor's tick).
              Top stroke: hand-drawn wobble across the full bridge text.
              Bottom: short emphatic dash beneath the center, reads as
              a margin-side annotation / sign-off mark. Both in brand
              peach to match the "ish." accent above. */}
          <svg
            className="familiar-bridge-underline"
            viewBox="0 0 280 24"
            preserveAspectRatio="none"
            aria-hidden="true"
          >
            <path
              d="M 8 7 C 60 4, 130 9, 200 5 C 240 4, 270 7, 274 6"
              stroke="#FFA070"
              strokeWidth="2.5"
              fill="none"
              strokeLinecap="round"
            />
            <path
              d="M 88 18 C 110 16, 140 19, 168 17 C 184 16, 192 18, 194 17"
              stroke="#FFA070"
              strokeWidth="2"
              fill="none"
              strokeLinecap="round"
            />
          </svg>
        </div>
      </div>
    </section>
  );
}

window.FamiliarSection = FamiliarSection;