/* Future Advisory — "Our services" bento section.
   Each mascot is the client-supplied animated GIF (in uploads/), autoplaying and
   looping in the same 300×300 slot (object-fit: contain keeps its aspect ratio).
   Card hover UI: black border + chevron emphasis (CSS :hover, unchanged). */
(function () {
  const NS = window.FutureAdvisoryDesignSystem_98dff1;
  const { Button } = NS;
  const BASE = "./";
  const IMG = BASE + "assets/img/services/";
  const U = BASE + "uploads/";   // new client-supplied mascot GIFs live here

  const SERVICES = [
    { id: "a", gif: "Illustrator-Business Accounting & Compliance-New.gif", title: "Business Accounting & Compliance",
      desc: "Your monthly accounting, reporting and tax compliance, handled properly and proactively. Ongoing packages from ~$800/mo — so you always know your numbers, and your bill.",
      link: "Learn more", bg: "#FCEB4E" },
    { id: "b", gif: "Illustrator-Virtual CFO-New.gif", title: "Virtual CFO",
      desc: "Your monthly accounting, reporting and tax compliance, handled properly and proactively. Ongoing packages from ~$800/mo — so you always know your numbers, and your bill.",
      link: "Explore Virtual CFO", bg: "#50DDA4" },
    { id: "c", gif: "Illustrator-Business Advisory-New.gif", title: "Business Advisory",
      desc: "Practical advice tied to real outcomes — profitability, structure and growth decisions.",
      link: "Learn more", bg: "#FFFFFF" },
    { id: "d", gif: "Illustrator-Business Tax Planning-New.gif", title: "Business Tax Planning",
      desc: "Proactive planning, smart structures and compliance confidence.",
      link: "Learn more", bg: "#FFFFFF" },
    { id: "e", gif: "Illustrator-Xero Payroll-New.gif", title: "Xero Payroll and Bookkeeping",
      desc: "The reliable infrastructure underneath it all.",
      link: "Learn more", bg: "#FFFFFF" },
  ];

  function ChevronRight() {
    return (
      <svg className="fa-svc-learn__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
        <path d="M2 8L13.1429 8" stroke="currentColor" strokeWidth="1.5" />
        <path d="M8 14L14 8L8 2" stroke="currentColor" strokeWidth="1.5" />
      </svg>
    );
  }

  function LearnMore({ label }) {
    return (
      <div className="fa-svc-learn">
        <span className="fa-svc-learn__label">{label}</span>
        <span className="fa-svc-learn__btn"><ChevronRight /></span>
      </div>
    );
  }

  function ServiceCard({ svc, delay, row2 }) {
    // Client-supplied mascot GIF (autoplays + loops). Same 300×300 slot; the CSS
    // uses object-fit: contain, so it keeps its aspect ratio (no stretch/squash).
    const gifUrl = U + encodeURIComponent(svc.gif);
    const src = gifUrl;
    React.useEffect(() => { const im = new Image(); im.src = gifUrl; }, [gifUrl]);   // preload the GIF
    return (
      <div
        className={"fa-svc-card" + (row2 ? " fa-svc-card--r2" : "") + " reveal"}
        data-reveal-delay={delay}
        style={{ background: svc.bg }}
      >
        <div className="fa-svc-card__illo">
          <img className="fa-svc-illo" src={src} alt="" aria-hidden="true" />
        </div>
        <h3 className="fa-svc-card__title">{svc.title}</h3>
        <p className="fa-svc-card__desc">{svc.desc}</p>
        <LearnMore label={svc.link} />
      </div>
    );
  }

  function ServicesSection() {
    const [a, b, c, d, e] = SERVICES;
    return (
      <section id="services" className="fa-services" data-header-theme="light" data-header-blend="true" aria-label="Our services">
        <div className="fa-container fa-services__wrap">
          <h2 className="fa-services__title reveal" data-reveal-delay="0">Our services</h2>

          <div className="fa-bento">
            <div className="fa-bento__row fa-bento__row--1">
              <ServiceCard svc={a} delay={100} />
              <ServiceCard svc={b} delay={200} />
            </div>
            <div className="fa-bento__row fa-bento__row--2">
              <ServiceCard svc={c} delay={100} row2 />
              <ServiceCard svc={d} delay={200} row2 />
              <ServiceCard svc={e} delay={300} row2 />
            </div>
          </div>

          <div className="fa-services__cta reveal" data-reveal-delay="200">
            <Button variant="primary" className="fa-btn-lift">View all services</Button>
          </div>
        </div>
      </section>
    );
  }

  Object.assign(window, { ServicesSection });
})();