);
}
function FAQ({ items, heading = "Frequently Asked Questions", support = "Can\u2019t find the answer you\u2019re looking for?", cta = "Get in touch", background = "#f6f6f6" }) {
const [open, setOpen] = React.useState(0);
return (
{heading}
{support}
{items.map((it, i) => (
{it.a}
))}
);
}
function CTA({
heading = "Ready to start a conversation?",
support = "Whether you\u2019re a partner, supplier, community member or investor, we\u2019d like to hear from you.",
cta = "Contact our team",
href = "contact.html",
}) {
const sectionRef = React.useRef(null);
React.useEffect(() => {
const section = sectionRef.current;
if (!section) return;
const DEG = Math.PI / 180;
const SPREAD = 10 * DEG; // half-angle of the beam cone (~20° total)
const DEFAULT = -64 * DEG; // resting direction: steep up-left so the beam sits clear of the centred type; hover sweeps it across
const MINC = -74 * DEG, MAXC = -7 * DEG; // clamp so the cone never collapses
let cur = DEFAULT, target = DEFAULT, raf = 0;
// project a cone edge FAR past the box so the clipped white region fills
// every box corner the cone spans (lets the beam reach through top-right)
function far(a, W, H) {
const R = Math.hypot(W, H) * 2.4;
return [((R * Math.cos(a)) / W) * 100, ((H + R * Math.sin(a)) / H) * 100];
}
function paint(a) {
const r = section.getBoundingClientRect();
if (!r.width || !r.height) return;
const [ux, uy] = far(a - SPREAD, r.width, r.height);
const [lx, ly] = far(a + SPREAD, r.width, r.height);
section.style.setProperty(
"--beam-clip",
`polygon(0% 100%, ${ux.toFixed(2)}% ${uy.toFixed(2)}%, ${lx.toFixed(2)}% ${ly.toFixed(2)}%)`
);
}
paint(cur);
const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const desktop = window.matchMedia("(min-width: 1280px) and (pointer: fine)").matches;
if (!desktop || reduce) return; // mobile / reduced-motion: CSS keyframes (or static) take over
function loop() {
cur += (target - cur) * 0.12;
paint(cur);
if (Math.abs(target - cur) > 0.0004) raf = requestAnimationFrame(loop);
else raf = 0;
}
function kick() { if (!raf) raf = requestAnimationFrame(loop); }
function onMove(e) {
const r = section.getBoundingClientRect();
let a = Math.atan2((e.clientY - r.top) - r.height, e.clientX - r.left);
target = Math.max(MINC, Math.min(MAXC, a));
kick();
}
function onLeave() { target = DEFAULT; kick(); }
function onResize() { paint(cur); }
section.addEventListener("mousemove", onMove);
section.addEventListener("mouseleave", onLeave);
window.addEventListener("resize", onResize);
return () => {
section.removeEventListener("mousemove", onMove);
section.removeEventListener("mouseleave", onLeave);
window.removeEventListener("resize", onResize);
if (raf) cancelAnimationFrame(raf);
};
}, []);
// Single white-text layer sits above both the resting fill and the moving
// reveal — the beam now swaps one dark treatment for another, so the type
// never needs a second (clipped) colour pass and never feels cut.
const layer = () => (
{heading}
{support}
);
return (
{layer()}
);
}
// Project-specific contact CTA — a compact bubble linking to a per-project
// mailto address (falls back to info@illuma.com.au). Sits near the top of a
// project detail page, under the Project Overview.
function ProjectContactCTA({ name, email }) {
const mail = email || "info@illuma.com.au";
return (