// Who This Is For — image card with a white checklist card overlaid.
function WhoFor({ layout = "grid", mediaImg = "assets/images/pitch.jpg" }) {
  const items = [
    { icon: "person",    l: "Professionals looking to grow their savings" },
    { icon: "briefcase", l: "Business owners managing excess cash" },
    { icon: "bank",      l: "Individuals tired of low bank returns" },
    { icon: "trend",     l: "Investors seeking structured wealth growth" },
  ];
  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(".who-card", {
        y: 90,
        opacity: 0,
        filter: "blur(6px)",
        duration: 0.8,
        ease: "sine.out",
        scrollTrigger: {
          trigger: ".who",
          start: "top 75%",
          toggleActions: "play none none reverse",
        },
      });
    });
    return () => ctx.revert();
  }, []);

  return (
    <section className="who">
      <div className="container">
        <div className="who-split">
          <div className="who-media" aria-hidden={!mediaImg}>
            {mediaImg && <img src={mediaImg} alt="" loading="lazy" decoding="async"/>}
          </div>
          <div className="who-card">
            <h2>Who This Is For.</h2>
            <ul className="who-list">
              {items.map(it => (
                <li className="who-list-item" key={it.l}>
                  <span className="who-list-ico" aria-hidden="true">
                    <Glyph kind={it.icon} size={22} color="var(--rank-espresso)" sw={1.7}/>
                  </span>
                  <span>{it.l}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}
window.WhoFor = WhoFor;