/* Illuma — homepage sections */

function Carousel({ children, step = 704, label, head, controls = true, visibleCount = 4, native = false }) {
  const trackRef = React.useRef(null);
  const containerRef = React.useRef(null);
  const [x, setX] = React.useState(0);
  const [canScrollLeft, setCanScrollLeft] = React.useState(false);
  const [canScrollRight, setCanScrollRight] = React.useState(true);

  // Native CSS-scroll mode: overflow-x on track, buttons use scrollBy
  if (native) {
    const scroll = (dir) => {
      const track = trackRef.current;
      if (!track) return;
      const card = track.firstElementChild;
      const cardW = card ? card.offsetWidth + 16 : step;
      track.scrollBy({ left: dir * cardW, behavior: "smooth" });
    };
    return (
      <div>
        <div ref={trackRef} className="rp-carousel-track" style={{ display: "flex", gap: 16, overflowX: "auto", scrollbarWidth: "none", WebkitOverflowScrolling: "touch", scrollSnapType: "x mandatory" }}>
          {children}
        </div>
        {controls && (
          <div style={{ display: "flex", gap: 8, marginTop: 32 }}>
            <button onClick={() => scroll(-1)} aria-label="Previous" style={ctrlStyle}><ArrowUR color="#211F21" size={14} className="" /></button>
            <button onClick={() => scroll(1)} aria-label="Next" style={ctrlStyle}><ArrowUR color="#211F21" size={14} className="" /></button>
          </div>
        )}
      </div>
    );
  }

  const updateScrollState = React.useCallback(() => {
    if (trackRef.current && containerRef.current) {
      const max = Math.max(0, trackRef.current.scrollWidth - containerRef.current.clientWidth);
      setCanScrollLeft(x > 0);
      setCanScrollRight(x < max);
    }
  }, [x]);
  
  React.useEffect(() => {
    updateScrollState();
    window.addEventListener('resize', updateScrollState);
    return () => window.removeEventListener('resize', updateScrollState);
  }, [updateScrollState]);
  
  const move = (dir) => {
    const track = trackRef.current;
    const max = Math.max(0, track.scrollWidth - track.parentElement.clientWidth);
    setX((p) => Math.min(max, Math.max(0, p + dir * step)));
  };
  
  return (
    <div>
      <div ref={containerRef} style={{ overflow: "hidden" }}>
        <div ref={trackRef} style={{ display: "flex", gap: 16, transform: `translateX(${-x}px)`, transition: "transform .6s var(--ease-premium)" }}>
          {children}
        </div>
      </div>
      {controls && (
        <div style={{ display: "flex", gap: 8, marginTop: 32 }}>
          <button onClick={() => move(-1)} aria-label="Previous" disabled={!canScrollLeft} style={{ ...ctrlStyle, opacity: canScrollLeft ? 1 : 0.5, cursor: canScrollLeft ? "pointer" : "default" }}><Chevron color="#211F21" style={{ width: 16, height: 16, transform: "rotate(90deg)" }} /></button>
          <button onClick={() => move(1)} aria-label="Next" disabled={!canScrollRight} style={{ ...ctrlStyle, opacity: canScrollRight ? 1 : 0.5, cursor: canScrollRight ? "pointer" : "default" }}><Chevron color="#211F21" style={{ width: 16, height: 16, transform: "rotate(-90deg)" }} /></button>
        </div>
      )}
    </div>
  );
}
const ctrlStyle = { width: 40, height: 40, background: "var(--color-surface-muted)", display: "inline-flex", alignItems: "center", justifyContent: "center", borderRadius: 2 };

function Hero() {
  const { sectionRef, imgRef } = useHeroParallax(70);
  return (
    <section ref={sectionRef} className="ill-hero" style={{ position: "relative", minHeight: "85vh", overflow: "hidden" }}>
      <img
        ref={imgRef}
        src={`${ASSET}/images/hero-windfarm.png`}
        alt=""
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block", transform: "scale(1.2)", transformOrigin: "center center" }}
      />
      <div style={{ position: "absolute", inset: 0, opacity: 0.3, background: "linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 30%, rgba(0,0,0,0.6) 65%, rgba(0,0,0,0) 100%)" }} />
      <div style={{ position: "relative", zIndex: 1, minHeight: "85vh", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", gap: 32, padding: "120px 24px" }}>
        <RevealH1 lines={["Illuma.", "Powering what\u2019s next, now."]} style={{ color: "#fff", maxWidth: 1100 }} />
        <p className="ill-body-lg" style={{ color: "#F5F5F5", maxWidth: 720, margin: 0 }}>Empowering businesses and communities to thrive in a low-carbon world through tailored clean energy solutions.</p>
        <Button variant="pink" as="a" href="projects.html" style={{ marginTop: 16 }}>Explore our projects</Button>

      </div>
    </section>
  );
}

/* About graphic — full wind image with the Illuma brand triangle device laid
   back on top as two independent layers (purple upper-left, burgundy lower-
   right), each filled with the brand gradient and clipped to a triangle. The
   reveal is SCROLL-LINKED: progress runs 0→1 as the section travels from the
   bottom of the viewport to vertically centred, easing the two triangles apart
   along the diagonal until they sit fully outside the frame. Smoothed per-frame
   with a lerp so the motion stays calm and fluid, and it reverses on scroll-up.
   Reduced-motion follows scroll without the smoothing loop. */
function AboutBeam() {
  const ref = React.useRef(null);
  const reduce = typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  // Re-arming reveal: panels open only once the full image frame is visible,
  // stay open while the frame remains on screen, then reset after it leaves.
  const [open, setOpen] = React.useState(reduce);

  React.useEffect(() => {
    if (reduce) return;                 // reduced motion: start open, no animation
    const el = ref.current;
    if (!el) return;
    let raf = 0;
    const check = () => {
      raf = 0;
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight || document.documentElement.clientHeight;
      const fullyInView = r.top >= 0 && r.bottom <= vh;
      const fillsViewport = r.height > vh && r.top <= 0 && r.bottom >= vh;
      const visible = r.bottom > 0 && r.top < vh;
      setOpen((wasOpen) => {
        if (!visible) return false;
        if (wasOpen) return true;
        return fullyInView || fillsViewport;
      });
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(check); };
    const cleanup = () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    check();                            // honour current scroll position on mount
    return cleanup;
  }, [reduce]);

  const MX = 532, MY = 424;             // distance that carries each panel clear of the frame
  const ease = "cubic-bezier(0.22, 1, 0.36, 1)";
  const triBase = {
    position: "absolute", inset: 0, width: "100%", height: "100%",
    backgroundImage: `url(${ASSET}/gradient-bg/gradient-03.png)`,
    backgroundSize: "cover", backgroundPosition: "center", willChange: "transform",
    transition: reduce ? "none" : `transform 2.2s ${ease}`,
  };

  return (
    <div
      ref={ref}
      className="ill-about-img"
      style={{ position: "relative", overflow: "hidden", width: 807, height: 532, flex: "none", background: "var(--color-primary)" }}>
      <img src={`${ASSET}/images/about-wind-full.png`} alt="Wind turbines at dusk" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center", display: "block" }} />
      {/* purple panel — upper-left, slides off the top-left when revealed */}
      <div style={{ ...triBase, clipPath: "polygon(0% 0%, 57% 0%, 4.5% 100%, 0% 100%)", transform: open ? `translate3d(${-MX}px, ${-MY}px, 0)` : "translate3d(0,0,0)" }} />
      {/* burgundy panel — lower-right, slides off the bottom-right when revealed */}
      <div style={{ ...triBase, clipPath: "polygon(100% 37%, 100% 100%, 34% 100%)", transform: open ? `translate3d(${MX}px, ${MY}px, 0)` : "translate3d(0,0,0)" }} />
    </div>
  );
}

function About() {
  return (
    <section className="reveal" style={{ padding: "100px 0", background: "#fff" }}>
      <div className="ill-main" style={{ display: "flex", flexDirection: "column", gap: 60 }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <Label style={{ alignSelf: "flex-start" }}>About Illuma</Label>
          <h2 className="ill-h2" style={{ maxWidth: 1000 }}>We develop, build and operate energy infrastructure across Australia.</h2>
        </div>
        <div className="ill-about-row" style={{ display: "flex", gap: 108 }}>
          <AboutBeam />
          <div className="ill-about-text" style={{ width: 485, display: "flex", flexDirection: "column", gap: 40, justifyContent: "center" }}>
            <p className="ill-body" style={{ margin: 0 }}>Illuma is designed to turn investment into operating assets, project engagement into momentum, and proven delivery models into repeatable infrastructure outcomes.</p>
            <div className="ill-stats-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40 }}>
              <Stat value="650MW+" label="Operational asset base" />
              <Stat value="3GW+" label="Development pipeline" />
              <Stat value="4+" label="Australian states" />
              <Stat value="10+" label="Projects across the platform" />
            </div>
            <Button variant="berry" as="a" href="about.html#our-story">Find out more</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

function WhatWeDo() {
  const cards = [
    { title: "Investment", copy: "We structure capital and partnerships to support long-term portfolio growth, turning investment into real-world energy infrastructure with clear commercial discipline and delivery focus." },
    { title: "Development", copy: "We guide projects through planning, approvals, stakeholder engagement and construction, helping move critical energy infrastructure from early opportunity to ready-to-build momentum." },
    { title: "Operations", copy: "We manage assets for long-term performance, reliability and optimisation across their full lifecycle." },
  ];
  return (
    <section className="reveal" style={{ background: "var(--color-surface-pink)", padding: "100px 0" }}>
      <div className="ill-main" style={{ display: "flex", flexDirection: "column", gap: 60 }}>
        <SectionHead center label="What we do" title="From capital to operating assets" intro="Illuma is designed to turn investment into operating assets, project engagement into momentum, and proven delivery models into repeatable infrastructure outcomes." width={920} />
        <div className="ill-cards-row ill-services-row" style={{ display: "flex", alignItems: "stretch", gap: 8 }}>
          {cards.map((c, i) => (
            <React.Fragment key={i}>
              {i > 0 && (
                <span className="ill-wwd-arrow" aria-hidden="true">
                  <svg width="30" height="32" viewBox="0 0 34 36" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M-1.67455e-06 11.5196L-3.10599e-06 27.8933L14.625 27.8933L14.625 36L34 20L14.625 4L14.625 11.5196L-1.67455e-06 11.5196Z" fill="var(--color-secondary-red)" /></svg>
                </span>
              )}
              <ServiceCard {...c} />
            </React.Fragment>
          ))}
        </div>
        <Button variant="berry" as="a" href="about.html#what-we-do" style={{ alignSelf: "center", marginTop: -8 }}>Learn more</Button>
      </div>
    </section>
  );
}

// Branded triangle overlay that "closes" over the image on hover.
// Geometry ported from Figma project-card-hover (500×500 image-frame space).
function RpTriangles() {
  return (
    <div className="rp-tris" aria-hidden="true">
      <svg className="rp-tri rp-tri--wedge" viewBox="0 0 500 500" preserveAspectRatio="none">
        <path d="M0,0 L0,500 L408,0 Z" fill="#732654" />
      </svg>
      <svg className="rp-tri rp-tri--slash" viewBox="0 0 500 500" preserveAspectRatio="none">
        <path d="M758.199,560 L807,177 L-133,550.701 Z" fill="#732654" />
      </svg>
    </div>
  );
}

function RpCard({ img, meta, title, detail, href = "projects/molong-battery.html" }) {
  const ref = React.useRef(null);
  // Mobile (no-hover) devices have no hover to reveal the image, so the purple
  // overlay shapes are driven by scroll instead: they stay closed until the
  // card actually enters the viewport, open ~0.5s after entering, and close
  // again immediately once the card leaves. Re-armed every time (no unobserve)
  // so each card toggles on its own. Desktop hover is untouched.
  React.useEffect(() => {
    const el = ref.current;
    if (!el || window.matchMedia("(hover: hover)").matches) return;
    let timer = null;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          timer = setTimeout(() => el.classList.add("is-revealed"), 500);
        } else {
          clearTimeout(timer);
          el.classList.remove("is-revealed");
        }
      });
    }, { threshold: 0.35 });
    io.observe(el);
    return () => { clearTimeout(timer); io.disconnect(); };
  }, []);
  return (
    <a className="rp-card" href={href} ref={ref}>
      <div className="rp-card__imgframe">
        <img className="rp-card__img" src={img} alt={title} />
        <RpTriangles />
      </div>
      <div className="rp-card__info">
        <span className="rp-card__pill">{meta}</span>
        <div className="rp-card__text">
          <h3 className="rp-card__title">{title}</h3>
          <p className="rp-card__detail">{detail}</p>
        </div>
      </div>
    </a>
  );
}

function RecentProjects() {
  const projects = [
    { img: `${ASSET}/projects/VBB_Image 1_202208.jpg`, meta: "Operational \u00A0\u00A0\u2022\u00A0\u00A0 Geelong, VIC", title: "Victorian Big Battery", detail: "300 MW / 450 MWh", href: "projects/victorian-big-battery.html" },
    { img: `${ASSET}/projects/energy-transition.jpg`, meta: "In development \u00A0\u00A0\u2022\u00A0\u00A0 Central West NSW", title: "Molong Battery", detail: "150 MW / 4 hour storage", href: "projects/molong-battery.html" },
    { img: `${ASSET}/projects/SHH_NEOEN_SHEEP.059.JPG`, meta: "Operational \u00A0\u00A0\u2022\u00A0\u00A0 Numurkah, VIC", title: "Numurkah Solar Farm", detail: "128 MW solar", href: "projects/numurkah-solar-farm.html" },
  ];
  return (
    <section className="reveal rp-section" style={{ padding: "100px 0 100px", background: "#fff" }}>
      <style>{`
        /* ---- Recent Projects: full-bleed editorial row ---- */
        .rp-row {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 0;
          width: 100%;
          border-top: 1px solid rgba(33,31,33,0.10);
          border-bottom: 1px solid rgba(33,31,33,0.10);
        }
        .rp-card {
          display: flex;
          flex-direction: column;
          gap: 32px;
          padding: 60px;
          text-decoration: none;
          color: var(--color-black);
          background: #fff;
          border-right: 1px solid rgba(33,31,33,0.10);
        }
        .rp-row > .rp-card:last-child { border-right: none; }

        .rp-card__imgframe {
          position: relative;
          width: 100%;
          aspect-ratio: 1 / 1;
          overflow: hidden;
          background: #e8e8e8;
        }
        .rp-card__img {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }
        /* triangle overlay */
        .rp-tris { position: absolute; inset: 0; pointer-events: none; }
        .rp-tri {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          display: block;
          transition: transform 720ms cubic-bezier(0.65, 0, 0.35, 1);
        }
        /* Default: shapes cover the image. Revealed (hover / focus / scrolled
           into centre on mobile): shapes slide away to show the full image. */
        .rp-tri--wedge { transform: translate(0, 0); }
        .rp-tri--slash { transform: translate(0, 0); }
        .rp-card:hover .rp-tri--wedge,
        .rp-card:focus-visible .rp-tri--wedge,
        .rp-card.is-revealed .rp-tri--wedge { transform: translate(-102%, -102%); }
        .rp-card:hover .rp-tri--slash,
        .rp-card:focus-visible .rp-tri--slash,
        .rp-card.is-revealed .rp-tri--slash { transform: translate(0, 102%); }

        /* info */
        .rp-card__info { display: flex; flex-direction: column; gap: 20px; }
        .rp-card__pill {
          align-self: flex-start;
          display: inline-flex;
          align-items: center;
          height: 32px;
          padding: 0 9px;
          background: rgba(135,163,178,0.10);
          border: 1px solid var(--color-secondary-steel);
          font-family: var(--font-primary);
          font-weight: 500;
          font-size: 16px;
          line-height: 22.4px;
          color: var(--color-black);
          white-space: nowrap;
        }
        .rp-card__text { display: flex; flex-direction: column; gap: 8px; }
        .rp-card__title {
          margin: 0;
          font-family: var(--font-primary);
          font-weight: 400;
          font-size: 24px;
          line-height: 1.2;
          letter-spacing: -0.01em;
          color: var(--color-black);
        }
        .rp-card__detail {
          margin: 0;
          font-family: var(--font-primary);
          font-size: 16px;
          line-height: 1.4;
          color: var(--color-black-70);
        }

        /* ---- tablet: keep 3 across, equal width/height, tighter padding ---- */
        @media (max-width: 1279px) {
          /* min-width:0 lets every 1fr track collapse equally so all three
             cards stay the same width (the nowrap pill no longer inflates a
             track to its min-content width). */
          .rp-card { padding: 36px; gap: 24px; min-width: 0; }
          .rp-card__title { font-size: 22px; }
          .rp-card__pill {
            font-size: 14px; padding: 5px 8px; height: auto; min-height: 30px;
            line-height: 1.3; white-space: normal;
          }
        }
        /* ---- mobile: single column ---- */
        @media (max-width: 767px) {
          .rp-row { grid-template-columns: 1fr; }
          .rp-card { padding: 24px; border-right: none; border-bottom: 1px solid rgba(33,31,33,0.10); }
          .rp-row > .rp-card:last-child { border-bottom: none; }
          .rp-card__title { font-size: 22px; }
        }
      `}</style>
      <div className="ill-main">
        <SectionHead title="Our Projects" width={600} />
      </div>
      <div className="rp-row" style={{ marginTop: 60 }}>
        {projects.map((p, i) => <RpCard key={i} {...p} />)}
      </div>
      <div className="ill-main" style={{ display: "flex", justifyContent: "center", marginTop: 48 }}>
        <Button variant="berry" as="a" href="projects.html">View all</Button>
      </div>
    </section>
  );
}

function Community() {
  const PARA = "We structure capital and partnerships to support long-term portfolio growth, turning investment into real-world energy infrastructure with clear commercial discipline and delivery focus.";
  const IMG = `${ASSET}/images`;
  return (
    <section className="reveal ill-community-section">
      <div className="ill-comm-inner">
        <div className="ill-comm-head">
          <h2 className="ill-comm-h2">Working with communities to create shared outcomes.</h2>
        </div>
        <div className="ill-comm-collage">
          <div className="ill-comm-card ill-comm-c1"><img src={`${IMG}/community-section-01.jpg`} alt="Community members in conversation" /></div>
          <div className="ill-comm-card ill-comm-c2"><img src={`${IMG}/community-section-02b.jpg`} alt="Landholders walking together" /></div>
          <div className="ill-comm-card ill-comm-frame ill-comm-c3">
            <img className="ill-comm-frame-inner" src={`${IMG}/community-section-03.jpg`} alt="Wind turbines on a ridgeline" />
          </div>
          <div className="ill-comm-card ill-comm-c4"><img src={`${IMG}/community-section-04.jpg`} alt="Sheep grazing beneath solar panels" /></div>
          <div className="ill-comm-card ill-comm-c5"><img src={`${IMG}/community-section-05.png`} alt="A parent and child outdoors" /></div>
          <div className="ill-comm-card ill-comm-c6"><img src={`${IMG}/community-section-06.png`} alt="Illuma — solar array and family" /></div>
          <p className="ill-comm-collage-para ill-body">{PARA}</p>
        </div>
        <p className="ill-comm-para-below ill-body">{PARA}</p>
        <Button variant="berry" as="a" href="community.html">Learn more</Button>
      </div>
    </section>
  );
}

function Insights() {
  const items = [
    { img: `${ASSET}/projects/energy-transition.jpg`, title: "Introducing Illuma", copy: "A new platform created to help deliver the infrastructure Australia needs for what comes next.", href: "article-introducing-illuma.html" },
    { img: `${ASSET}/projects/update-photo.jpg`, title: "Building a platform for momentum", copy: "Leadership perspectives on energy infrastructure, delivery and long-term reliability.", href: "article-introducing-illuma.html" },
    { img: `${ASSET}/projects/VBB_Image 1_202208.jpg`, title: "Inside the future of battery storage", copy: "How large-scale storage can support grid stability, reliability and future energy demand.", href: "article-introducing-illuma.html" },
  ];
  return (
    <section className="reveal" style={{ padding: "100px 0", background: "var(--color-surface-pink)" }}>
      <div className="ill-main" style={{ display: "flex", flexDirection: "column", gap: 48 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
          <SectionHead label="Insights" title="Featured news at Illuma" width={700} />
          <a className="ill-link" href="news.html">View all <ArrowUR /></a>
        </div>
        <div className="ill-cards-row ill-insights-row" style={{ display: "flex", gap: 8, justifyContent: "space-between" }}>
          {items.map((it, i) => <InsightCard key={i} {...it} />)}
        </div>
      </div>
    </section>
  );
}

function Team() {
  const people = [
    { img: `${ASSET}/team/julia-gillard.png`, name: "Julia Gillard", role: "Chair" },
    { img: `${ASSET}/team/david-di-pilla.jpg`, name: "David Di Pilla", role: "Managing Director & CEO" },
    { img: `${ASSET}/team/gerard-dover.jpg`, name: "Gerard Dover", role: "Chief Executive Officer" },
    { img: `${ASSET}/team/chris-macalpine.jpg`, name: "Chris Macalpine", role: "Head of Development" },
    { img: `${ASSET}/team/jamie-sun.jpg`, name: "Jamie Sun", role: "Investment Director" },
    { img: `${ASSET}/team/zoe-hillson.jpg`, name: "Zoe Hillson", role: "Head of Community" },
  ];
  return (
    <section className="reveal" style={{ padding: "120px 0", background: "#fff" }}>
      <div className="ill-main" style={{ display: "flex", flexDirection: "column", gap: 48 }}>
        <SectionHead label="Our team" title="The people delivering energy infrastructure across Australia." width={900} />
        <div style={{ display: "flex", flexDirection: "column", gap: 32 }}>
          <Carousel step={938} controls={true}>
            {people.map((p, i) => <TeamCard key={i} {...p} />)}
          </Carousel>
        </div>
      </div>
    </section>
  );
}

function IllumaMark({ className }) {
  return (
    <svg className={className} viewBox="0 0 598.3 598.3" fill="#fff" aria-hidden="true" style={{ display: "block", flex: "none" }}>
      <path d="M598.3 598.3V0L0 598.3H598.3Z" />
      <path d="M0 0V598.3L299.16 0H0Z" />
    </svg>
  );
}

function CareersCTA({
  heading = "Join us to help build what\u2019s next.",
  cta = "Join us",
  href = "careers.html",
  logoHref = "index.html",
  padding = "0",
}) {
  return (
    <section className="reveal ill-careers-section" style={{ padding }}>
      <div className="ill-main">
        <div className="ill-careers-cta">
          <a className="ill-careers-cta__logo" href={logoHref} aria-label="Illuma home">
            <img className="ill-careers-cta__logo-img" src={`${ASSET}/logos/illuma-white.svg`} alt="Illuma" />
          </a>
          <h2 className="ill-careers-cta__h">{heading}</h2>
          <div className="ill-careers-cta__divider" />
          <a className="ill-careers-cta__link" href={href}>
            <svg className="ill-careers-cta__arrow" viewBox="0 0 16 16" fill="none" aria-hidden="true">
              <path d="M3.5 2.5V8.5C3.5 9.6 4.4 10.5 5.5 10.5H12.5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
              <path d="M9.5 7.5L12.5 10.5L9.5 13.5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
            <span>{cta}</span>
          </a>
        </div>
      </div>
    </section>
  );
}

const HOME_FAQ = [
  { q: "What does Illuma do?", a: "Illuma develops, funds, builds, owns and operates energy infrastructure across Australia, with a focus on utility-scale battery storage and renewable generation assets." },
  { q: "What types of projects does Illuma work on?", a: "Illuma works across operating assets and projects in development, including large-scale battery storage and renewable generation infrastructure." },
  { q: "Who backs Illuma?", a: "Illuma is backed by the long-term investment capability of HMC Capital." },
  { q: "How does Illuma work with communities?", a: "Illuma works directly with local communities to create long-term regional benefits and shared outcomes." },
  { q: "How can I contact Illuma?", a: "Use the contact page to send enquiries from communities, partners, investors, media or anyone with questions about Illuma and its projects." },
];

Object.assign(window, { Carousel, Hero, AboutBeam, About, WhatWeDo, RecentProjects, Community, Insights, Team, CareersCTA, IllumaMark, HOME_FAQ });