// Intro — single flowing paragraph. Heading is dark/inline; body words fade
// from grey to espresso as the user scrolls through the section.
function Intro({ align = "center" }) {
  const head = "We Manage Wealth With Intention.";
  const body = "Asset management is more than picking investments. It’s about aligning your money with your goals, your timeline, and your risk appetite. We take a structured approach to building and managing portfolios, ensuring your capital is deployed across the right opportunities at the right time.";
  const words = body.split(/\s+/);

  React.useEffect(() => {
    if (!window.ScrollTrigger) return;
    const ST = window.ScrollTrigger;
    const els = Array.from(document.querySelectorAll(".intro-word"));
    if (!els.length) return;
    const N = els.length;
    const st = ST.create({
      trigger: ".intro",
      start: "top 80%",
      end: "bottom bottom",
      scrub: 0.4,
      onUpdate: (self) => {
        const p = self.progress;
        // Each word owns a slice of the overall scroll range; within its slice
        // it transitions from dim (0.28α) to lit (1α), giving a one-by-one
        // reading reveal.
        for (let i = 0; i < N; i++) {
          const local = Math.max(0, Math.min(1, p * N - i));
          const alpha = 0.28 + 0.72 * local;
          els[i].style.color = `rgba(26, 14, 7, ${alpha})`;
        }
      },
    });
    return () => st.kill();
  }, []);

  return (
    <section className="intro">
      <div className="container">
        <p className="intro-flow">
          <span className="intro-head">{head} </span>
          {words.map((w, i) => (
            <span className="intro-word" key={i}>{w} </span>
          ))}
        </p>
      </div>
    </section>
  );
}
window.Intro = Intro;