/* FEATURES — 4-card grid, staggered scale+fade entrances */
const { motion: _m, useInView: _uiv } = window.Motion || {};
const CARD_VIDEO = "https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260406_133058_0504132a-0cf3-4450-a370-8ea3b05c95d4.mp4";
/* Abstract placeholder icons rendered as small SVG glyphs for each card.
We avoid fetching third-party image CDN URLs directly for reliability.
Each icon has its own distinct silhouette so cards feel individual. */
function IconCitation({ className = "" }) {
return (
);
}
function IconSEO({ className = "" }) {
return (
);
}
function IconAutomation({ className = "" }) {
return (
);
}
function Checklist({ items }) {
return (
{items.map((it, i) => (
-
{it}
))}
);
}
function LearnMore({ label = "Learn more" }) {
return (
{label}
);
}
function FeatureCard({ index, children, className = "" }) {
const { motion, useInView } = window.Motion;
const ref = React.useRef(null);
const inView = useInView(ref, { once: true, margin: "-100px" });
return (
{children}
);
}
function VideoCard({ index }) {
const videoRef = React.useRef(null);
React.useEffect(() => {
const v = videoRef.current;
if (!v) return;
const tryPlay = () => { const p = v.play(); if (p && p.catch) p.catch(() => {}); };
tryPlay();
v.addEventListener("loadeddata", tryPlay);
v.addEventListener("canplay", tryPlay);
return () => {
v.removeEventListener("loadeddata", tryPlay);
v.removeEventListener("canplay", tryPlay);
};
}, []);
return (
);
}
function ContentCard({ index, numberLabel, title, items, Icon }) {
return (
{title}
);
}
function Features() {
const cards = [
{
kind: "content",
numberLabel: "01",
title: "AI Citation Visibility.",
items: [
"Cited by ChatGPT, Gemini & Perplexity",
"Structured data & schema markup",
"Conversational query capture",
"Competitive citation displacement",
],
Icon: IconCitation,
},
{
kind: "content",
numberLabel: "02",
title: "Google SEO System.",
items: [
"Technical SEO & Core Web Vitals",
"Topical authority & content architecture",
"Digital PR & link acquisition",
],
Icon: IconSEO,
},
{
kind: "content",
numberLabel: "03",
title: "Business Automation.",
items: [
"CRM flows & lead nurturing sequences",
"24/7 data pipelines & qualification",
"Visibility dashboard & monthly reporting",
],
Icon: IconAutomation,
},
];
return (
{cards.map((c, i) => (
))}
);
}
Object.assign(window, { Features });