/* Illuma Energy — shared icons & primitives (global, no JSX export modules) */

// Brand "up-right" arrow (exact path from the UI kit)
function ArrowUR({ size = 16, color = "currentColor", className = "ill-arrow" }) {
  return (
    <svg className={className} width={size} height={size} viewBox="0 0 9.804 9.829" fill={color}
      style={{ display: "block", flex: "none" }} aria-hidden="true">
      <path d="M 8.194 9.635 L 8.194 2.963 L 1.327 9.829 L 0 8.502 L 6.893 1.61 L 0.193 1.61 L 1.804 0 L 9.804 0.013 L 9.804 8.026 L 8.194 9.635 Z" />
    </svg>
  );
}

function Chevron({ color = "currentColor", style }) {
  return (
    <svg className="ill-nav__chev" viewBox="0 0 11 6" fill="none" aria-hidden="true" style={style}>
      <path d="M1 1L5.5 5L10 1" stroke={color} strokeWidth="1.1" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

const ASSET = "../../assets";

function Label({ children, style }) {
  return <span className="ill-label" style={style}>{children}</span>;
}

function Button({ children, variant = "berry", arrow = true, as = "button", href, onClick, style, className }) {
  const cls = `ill-btn ill-btn--${variant}${className ? " " + className : ""}`;
  const inner = (<>{children}{arrow && <ArrowUR color="currentColor" />}</>);
  const buttonStyle = { ...style, width: "fit-content" };
  if (as === "a") return <a className={cls} href={href} onClick={onClick} style={buttonStyle}>{inner}</a>;
  return <button className={cls} onClick={onClick} style={buttonStyle}>{inner}</button>;
}

function TextLink({ children, href = "#", onClick }) {
  return <a className="ill-link" href={href} onClick={onClick}>{children}<ArrowUR /></a>;
}

function Stat({ value, label, light }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
      <span className="ill-stat" style={{ color: light ? "#fff" : "var(--color-black)" }}>{value}</span>
      <span className="ill-small" style={{ opacity: 0.6, color: light ? "#fff" : "var(--color-black)" }}>{label}</span>
    </div>
  );
}

/* ---- Hero parallax hook ------------------------------------------------- */
// Attaches a scroll listener that moves the hero background image at a slower
// speed than the page, creating a subtle depth/parallax effect.
// • strength: total vertical travel of the image in px (default 70)
// • scale(1.2) ensures no blank edges appear at the extremes of travel
// • Respects prefers-reduced-motion; disabled on mobile, halved on tablet
function useHeroParallax(strength) {
  var sectionRef = React.useRef(null);
  var imgRef    = React.useRef(null);

  React.useEffect(function () {
    var s = typeof strength === "number" ? strength : 70;

    // Accessibility: honour reduced-motion preference
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;

    // Mobile: skip — parallax can cause cropping / jank at small sizes
    if (window.matchMedia("(max-width: 767px)").matches) return;

    // Tablet: keep the effect but halve the travel
    if (window.matchMedia("(max-width: 1279px)").matches) s = Math.round(s * 0.5);

    var section = sectionRef.current;
    var img     = imgRef.current;
    if (!section || !img) return;

    img.style.willChange = "transform";

    var raf = 0;

    function update() {
      var rect     = section.getBoundingClientRect();
      var vh       = window.innerHeight;
      // progress: 0 when section enters from bottom → 1 when it exits from top
      var progress = (vh - rect.top) / (vh + rect.height);
      var clamped  = Math.max(0, Math.min(1, progress));
      // ty: positive when section is low (image pushed down), negative when high
      var ty = (0.5 - clamped) * s * 2;
      img.style.transform = "translateY(" + ty.toFixed(2) + "px) scale(1.2)";
      raf = 0;
    }

    function onScroll() {
      if (!raf) raf = requestAnimationFrame(update);
    }

    window.addEventListener("scroll", onScroll, { passive: true });
    update(); // set initial position before first scroll

    return function () {
      window.removeEventListener("scroll", onScroll);
      if (raf) cancelAnimationFrame(raf);
      if (img) img.style.willChange = "";
    };
  }, []);

  return { sectionRef: sectionRef, imgRef: imgRef };
}

Object.assign(window, { ArrowUR, Chevron, Label, Button, TextLink, Stat, ASSET, useHeroParallax });