// Asset Classes We Invest In — maroon section, top-left heading, horizontal
// scroll row of pastel cards with a filled icon top-right + name bottom-left.
const AcIcon = ({ kind }) => {
  const p = { fill: "#2a1207" };
  switch (kind) {
    case "bars":
      return (
        <svg width="40" height="40" viewBox="0 0 24 24">
          <rect x="3" y="13" width="4.5" height="8" rx="1.4" {...p}/>
          <rect x="9.75" y="8" width="4.5" height="13" rx="1.4" {...p}/>
          <rect x="16.5" y="3" width="4.5" height="18" rx="1.4" {...p}/>
        </svg>
      );
    case "petals":
      return (
        <svg width="40" height="40" viewBox="0 0 24 24">
          <circle cx="12" cy="6" r="4" {...p}/>
          <circle cx="12" cy="18" r="4" {...p}/>
          <circle cx="6" cy="12" r="4" {...p}/>
          <circle cx="18" cy="12" r="4" {...p}/>
        </svg>
      );
    case "grid":
      return (
        <svg width="40" height="40" viewBox="0 0 24 24">
          <rect x="3" y="3" width="8" height="8" rx="2.2" {...p}/>
          <rect x="13" y="3" width="8" height="8" rx="2.2" {...p}/>
          <rect x="3" y="13" width="8" height="8" rx="2.2" {...p}/>
          <rect x="13" y="13" width="8" height="8" rx="2.2" {...p}/>
        </svg>
      );
    case "spark":
      return (
        <svg width="40" height="40" viewBox="0 0 24 24">
          <path d="M12 2c.6 5.2 4.2 8.8 9.4 9.4C16.2 12 12.6 15.6 12 20.8 11.4 15.6 7.8 12 2.6 11.4 7.8 10.8 11.4 7.2 12 2z" {...p}/>
        </svg>
      );
    default:
      return null;
  }
};

function AssetClasses({ tone = "orange", layout = "switcher" }) {
  const items = [
    { name: "Fixed Income",            blurb: "Stable, predictable returns through government and corporate instruments.", glyph: "bars",   color: "peach" },
    { name: "Equities",                blurb: "Growth-focused investments in high-potential companies.",                   glyph: "petals", color: "yellow" },
    { name: "Balanced Portfolios",     blurb: "A strategic mix of stability and growth.",                                 glyph: "grid",   color: "pink" },
    { name: "Alternative Investments", blurb: "Opportunities beyond traditional markets to enhance returns.",             glyph: "spark",  color: "lilac" },
  ];

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

  return (
    <section id="classes" className="classes">
      <div className="container">
        <h2 className="section-title">Asset Classes We Invest In.</h2>
      </div>

      <div className="ac-scroll">
        <div className="ac-row">
          {items.map(it => (
            <div className={"ac-card ac-card--" + it.color} key={it.name}>
              <div className="ac-card-icon"><AcIcon kind={it.glyph}/></div>
              <div className="ac-card-foot">
                <h3 className="ac-card-title">{it.name}</h3>
                <p className="ac-card-body">{it.blurb}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.AssetClasses = AssetClasses;