// What We Do — accordion layout. One item expanded at a time, image card on right.
function WhatWeDo({ tone = "teal", mediaImg = "assets/images/whatwedo.jpg" }) {
  const items = [
    { title: "Portfolio Construction", body: "We build diversified portfolios across multiple asset classes to balance risk and return." },
    { title: "Active Management",      body: "Markets move. So do we. We continuously monitor and adjust your portfolio to keep it optimized." },
    { title: "Risk Management",        body: "We prioritize capital preservation while positioning for growth." },
    { title: "Performance Tracking",   body: "You always know how your money is performing with clear, consistent reporting." },
  ];
  const [openIdx, setOpenIdx] = React.useState(0);

  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(".wwd .section-title, .wwd-item, .wwd-media", {
        y: 90,
        opacity: 0,
        filter: "blur(6px)",
        duration: 0.8,
        stagger: 0.15,
        ease: "sine.out",
        scrollTrigger: {
          trigger: ".wwd",
          start: "top 75%",
          toggleActions: "play none none reverse",
        },
      });
    });
    return () => ctx.revert();
  }, []);

  return (
    <section className="wwd">
      <div className="container">
        <h2 className="section-title cream">What We Do.</h2>

        <div className="wwd-split">
          <div className="wwd-accordion">
            {items.map((it, idx) => {
              const open = idx === openIdx;
              return (
                <div className={"wwd-item" + (open ? " open" : "")} key={it.title}>
                  <button
                    type="button"
                    className="wwd-item-head"
                    aria-expanded={open}
                    onClick={() => setOpenIdx(open ? -1 : idx)}
                  >
                    <span className="wwd-item-title">{it.title}</span>
                    <span className="wwd-item-toggle" aria-hidden="true">{open ? "−" : "+"}</span>
                  </button>
                  {open && (
                    <div className="wwd-item-body">
                      <p>{it.body}</p>
                    </div>
                  )}
                </div>
              );
            })}
          </div>
          <div className="wwd-media" aria-hidden={!mediaImg}>
            {mediaImg && <img src={mediaImg} alt="" loading="lazy" decoding="async"/>}
          </div>
        </div>
      </div>
    </section>
  );
}
window.WhatWeDo = WhatWeDo;