/* Illuma Energy — 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: "100vh", overflow: "hidden" }}>
      <img
        ref={imgRef}
        src={`${ASSET}/images/hero-image.jpg`}
        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, background: "linear-gradient(180deg, rgba(33,31,33,0.4) 0%, rgba(33,31,33,0.2) 50%, rgba(33,31,33,0.45) 100%)" }} />
      <div style={{ position: "relative", zIndex: 1, height: "100vh", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", gap: 32, padding: "120px 24px" }}>
        <h1 className="ill-h1" style={{ color: "#fff", maxWidth: 1100 }}>Illuma Energy.<br />Powering what&rsquo;s next, now.</h1>
        <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-in-dev.html" style={{ marginTop: 16 }}>Explore our projects</Button>

      </div>
    </section>
  );
}

function About() {
  return (
    <section className="reveal" style={{ padding: "120px 0", background: "#fff" }}>
      <div className="ill-main" style={{ display: "flex", flexDirection: "column", gap: 72 }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <Label style={{ alignSelf: "flex-start" }}>About Illuma Energy</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 }}>
          <div className="ill-imgblock ill-about-img" style={{ width: 807, height: 532, flex: "none", background: "var(--color-primary)" }}>
            <img src={`${ASSET}/images/about-section.jpg`} alt="Victorian Big Battery" />
          </div>
          <div className="ill-about-text" style={{ width: 485, display: "flex", flexDirection: "column", gap: 40, justifyContent: "center" }}>
            <p className="ill-body" style={{ margin: 0 }}>Illuma Energy 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="652MW" label="Operational asset base" />
              <Stat value="XX GW" label="Development pipeline" />
              <Stat value="150MW" label="Proposed Molong Battery capacity" />
              <Stat value="4 hours" label="Proposed Molong Battery storage duration" />
            </div>
            <Button variant="berry" as="a" href="about.html">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: "120px 0" }}>
      <div className="ill-main" style={{ display: "flex", flexDirection: "column", gap: 72 }}>
        <SectionHead center label="What we do" title="From capital to operating assets" intro="Illuma Energy 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: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8 }}>
          {cards.map((c, i) => <ServiceCard key={i} {...c} />)}
        </div>
      </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="#70A8F7" />
      </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="#70A8F7" />
      </svg>
    </div>
  );
}

function RpCard({ img, meta, title, detail, href = "projects/molong-battery.html" }) {
  return (
    <a className="rp-card" href={href}>
      <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" style={{ padding: "160px 0 120px", 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 420ms var(--ease-premium);
        }
        .rp-tri--wedge { transform: translate(-102%, -102%); }
        .rp-tri--slash { transform: translate(0, 102%); }
        .rp-card:hover .rp-tri--wedge,
        .rp-card:focus-visible .rp-tri--wedge { transform: translate(0, 0); }
        .rp-card:hover .rp-tri--slash,
        .rp-card:focus-visible .rp-tri--slash { transform: translate(0, 0); }

        /* 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, tighter padding ---- */
        @media (max-width: 1279px) {
          .rp-card { padding: 40px; gap: 24px; }
          .rp-card__title { font-size: 22px; }
          .rp-card__pill { font-size: 14px; padding: 0 8px; height: 30px; }
        }
        /* ---- 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 label="Projects" title="Recent 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: "flex-end", marginTop: 48 }}>
        <Button variant="berry" as="a" href="projects-in-dev.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">
          <Label>Community</Label>
          <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-02.png`} alt="Landholders walking together" /></div>
          <div className="ill-comm-card ill-comm-frame ill-comm-c3">
            <img className="ill-comm-frame-bg" src={`${IMG}/community-section-03-frame.png`} alt="" aria-hidden="true" />
            <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 Energy", 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: "120px 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 Energy" 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 Energy home">
            <img className="ill-careers-cta__logo-img" src={`${ASSET}/logos/illuma-white.svg`} alt="Illuma Energy" />
          </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 Energy do?", a: "Illuma Energy 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 Energy work on?", a: "Illuma Energy works across operating assets and projects in development, including large-scale battery storage and renewable generation infrastructure." },
  { q: "Who backs Illuma Energy?", a: "Illuma Energy is backed by the long-term investment capability of HMC Capital." },
  { q: "How does Illuma Energy work with communities?", a: "Illuma Energy works directly with local communities to create long-term regional benefits and shared outcomes." },
  { q: "How can I contact Illuma Energy?", a: "Use the contact page to send enquiries from communities, partners, investors, media or anyone with questions about Illuma Energy and its projects." },
];

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