// Our Investment Approach — heading + image card on top, 4 icon-stat columns below.
function Approach({ layout = "stepper", mediaImg = "assets/images/approach.png" }) {
  const steps = [
    { glyph: "compass",   title: "Understand Your Goals",  body: "We start with your financial goals, income, and risk tolerance." },
    { glyph: "portfolio", title: "Build Your Strategy",    body: "We design a portfolio tailored specifically to you." },
    { glyph: "bank",      title: "Deploy Capital",         body: "Your funds are allocated across carefully selected investment vehicles." },
    { glyph: "trend",     title: "Optimize Continuously",  body: "We monitor market trends and rebalance your portfolio when needed." },
  ];
  React.useEffect(() => {
    if (matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    if (!window.gsap || !window.ScrollTrigger) return;
    const { gsap } = window;
    const ctx = gsap.context(() => {
      gsap.from(".approach .section-title, .approach-media, .approach-step", {
        y: 90,
        opacity: 0,
        filter: "blur(6px)",
        duration: 0.8,
        stagger: 0.15,
        ease: "sine.out",
        scrollTrigger: {
          trigger: ".approach",
          start: "top 75%",
          toggleActions: "play none none reverse",
        },
      });
    });
    return () => ctx.revert();
  }, []);

  return (
    <section id="approach" className="approach">
      <div className="container">
        <div className="approach-top">
          <h2 className="section-title cream">Our Investment Approach.</h2>
          <div className="approach-media" aria-hidden={!mediaImg}>
            {mediaImg && <img src={mediaImg} alt="" loading="lazy" decoding="async"/>}
          </div>
        </div>

        <div className="approach-grid">
          {steps.map(s => (
            <div className="approach-step" key={s.title}>
              <div className="approach-step-icon">
                <Glyph kind={s.glyph} size={28} color="var(--rank-espresso)" sw={1.6}/>
              </div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Approach = Approach;