/* cctv.ae — part 1: brand mark, header, hero, solutions, trust, stats, footer.
Composes the Al-Futtaim Technologies design system. Copy from window.cctv. */
(function () {
const data = window.cctv;
const wrap = { maxWidth: "75rem", marginInline: "auto", paddingInline: "1.5rem" };
const Icon = ({ name, size = 24, color, stroke }) => (
);
/* Al-Futtaim Technologies lock-up + cctv.ae platform identity. */
function CCTVLogo({ height = 34, showUrl = true }) {
return (
{showUrl && (
<>
cctv.ae
)}
);
}
/* ── Site search (one-page: scrolls to + highlights the match) ── */
function SearchBox() {
const [open, setOpen] = React.useState(false);
const [q, setQ] = React.useState("");
const [msg, setMsg] = React.useState("");
const inputRef = React.useRef(null);
React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); }, [open]);
React.useEffect(() => { if (open && inputRef.current) inputRef.current.focus(); }, [open]);
const run = (e) => {
if (e) e.preventDefault();
const query = q.trim().toLowerCase();
if (!query) return;
const root = document.getElementById("root");
const els = Array.prototype.slice.call(root.querySelectorAll("h1,h2,h3,h4,h5,p,li,a,button,figcaption"))
.filter((el) => el.childElementCount === 0 && el.textContent && el.textContent.trim().length);
const hit = els.find((el) => el.textContent.toLowerCase().indexOf(query) !== -1);
if (hit) {
const section = hit.closest("section, header, footer") || hit;
section.scrollIntoView({ behavior: "smooth", block: "start" });
hit.classList.add("search-hit");
setTimeout(() => hit.classList.remove("search-hit"), 2000);
setMsg(""); setOpen(false); setQ("");
} else {
setMsg("No matches for “" + q.trim() + "”.");
}
};
return (
{open && (
)}
);
}
/* ── Header ─────────────────────────────────────────────── */
function Header() {
const { Button } = window.AlFuttaimTechnologiesDesignSystem_4ea487;
return (
);
}
/* ── Hero ───────────────────────────────────────────────── */
function Hero() {
const { Button } = window.AlFuttaimTechnologiesDesignSystem_4ea487;
return (
{window.CCTVRadarHUD && React.createElement(window.CCTVRadarHUD)}
{data.hero.eyebrow}
{data.hero.titleLead}{data.hero.titleHighlight}{data.hero.titleTail}
);
}
/* ── Solutions (3 cards overlapping hero) ───────────────── */
function Solutions() {
const { Card } = window.AlFuttaimTechnologiesDesignSystem_4ea487;
return (
{data.solutions.items.map((s) => (
{React.createElement(window.CCTVIconChip, { name: s.icon, chip: 56, size: 26 })}
{s.title}
{s.body}
{s.link}
))}
);
}
/* ── Why enterprises trust (benefits + camera) ──────────── */
function Trust() {
const t = data.trust;
const IconChip = window.CCTVIconChip;
const mid = Math.ceil(t.benefits.length / 2);
const cols = [t.benefits.slice(0, mid), t.benefits.slice(mid)];
return (
{t.titleLead}
{t.titleTail}
{t.side}
{cols.map((col, ci) => (
{col.map((b) => (
-
{b.text}
))}
))}
);
}
/* ── Stats band (dark office photo + portrait) ──────────── */
function Stats() {
const s = data.stats;
return (
{s.eyebrow}
{s.titleParts.map((p, i) => {p.t})}
{s.figures.map((f) => (
))}
);
}
/* ── Footer ─────────────────────────────────────────────── */
function NocTiles({ noc }) {
const [t, setT] = React.useState(0);
React.useEffect(() => {
const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
if (reduce) return;
const id = setInterval(() => setT((x) => x + 1), 2000);
return () => clearInterval(id);
}, []);
const fmt = (tile) => {
if (tile.fmt === "int") { const jitter = (t * 7 + tile.base) % 53; return (tile.base + jitter).toLocaleString(); }
if (tile.fmt === "pct") return (tile.base - ((t % 3) * 0.01)).toFixed(2) + "%";
if (tile.fmt === "sec") return (tile.base + ((t % 2) * 0.1)).toFixed(1) + "s";
return tile.base;
};
return (
{noc.tiles.map((tile) => (
))}
