/* Position pull-quote scene — line-by-line reveal with underline draw on
   "Total clarity". Sectors hover-magnify with a coral arrow shift. */

function Position() {
  const ref = React.useRef(null);

  React.useEffect(() => {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    const el = ref.current;
    if (!el) return;
    const ctx = gsap.context(() => {
      // Line-by-line quote reveal
      gsap.from(el.querySelectorAll('.position__quote .line'), {
        y: 60, opacity: 0, duration: 1.0, stagger: 0.18, ease: 'expo.out',
        scrollTrigger: { trigger: el, start: 'top 70%', toggleActions: 'play none none reverse' },
      });
      // Underline draws on "Total clarity"
      gsap.from(el.querySelector('.position__underline'), {
        scaleX: 0, transformOrigin: 'left center', duration: 1.2, ease: 'expo.inOut', delay: 0.7,
        scrollTrigger: { trigger: el, start: 'top 70%', toggleActions: 'play none none reverse' },
      });
      // Sector rows
      gsap.from(el.querySelectorAll('.sector'), {
        x: -40, opacity: 0, duration: 0.7, stagger: 0.08, ease: 'expo.out',
        scrollTrigger: { trigger: el.querySelector('.sectors'), start: 'top 75%', toggleActions: 'play none none reverse' },
      });
    }, el);
    return () => ctx.revert();
  }, []);

  return (
    <section ref={ref} id="position" className="section position position--cinematic" data-screen-label="04 Position">
      <div className="container">
        <div className="reveal">
          <div className="eyebrow"><span className="num">04</span> <span className="bar"></span> Our Position</div>
        </div>
        <h2 className="position__quote" style={{ marginTop: 32 }}>
          <span className="line">One layer.</span>
          <span className="line">Every system.</span>
          <span className="line line--final">
            <span className="accent">
              Total clarity<span className="bode-stop"></span>
              <span className="position__underline" aria-hidden="true"></span>
            </span>
          </span>
        </h2>
        <p className="position__body reveal">
          BODE is not another point solution. It is the missing middleware layer: the platform that makes the data your organisation already holds finally work for you. We are building it for an industry where insight is rationed by the system that happens to hold it.
        </p>

        <div className="sectors">
          <div className="reveal" style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--color-coral)' }}>
            Target<br/>Sectors
          </div>
          <div className="sectors__list">
            {[
              { code: "PBSA", name: "Purpose-Built Student Accommodation" },
              { code: "BTR",  name: "Build-to-Rent & Residential" },
              { code: "HOSP", name: "Hospitality, Hotels & Short Stay" },
              { code: "FS",   name: "Financial Services & Asset Managers" },
              { code: "R&U",  name: "Retail & Utilities Operators" },
            ].map((s) => (
              <div className="sector" key={s.code} data-magnetic>
                <div className="sector__code">· {s.code}</div>
                <div className="sector__name">{s.name}</div>
                <div className="sector__arrow"><span className="ms" style={{ fontSize: 22 }}>arrow_outward</span></div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.Position = Position;