/* global React */ const DemoPlayer = () => { const [playing, setPlaying] = React.useState(false); const [progress, setProgress] = React.useState(0); const [muted, setMuted] = React.useState(true); const [currentTime, setCurrentTime] = React.useState(0); const [duration, setDuration] = React.useState(0); const [hovering, setHovering] = React.useState(false); const videoRef = React.useRef(null); const fmtTime = (s) => { const m = Math.floor(s / 60); return `${m}:${Math.floor(s % 60).toString().padStart(2, "0")}`; }; const toggle = () => { const v = videoRef.current; if (!v) return; if (playing) { v.pause(); setPlaying(false); } else { v.play(); setPlaying(true); } }; const onTimeUpdate = () => { const v = videoRef.current; if (!v) return; setCurrentTime(v.currentTime); setProgress(v.duration ? (v.currentTime / v.duration) * 100 : 0); }; const seek = (e) => { const v = videoRef.current; if (!v || !v.duration) return; const rect = e.currentTarget.getBoundingClientRect(); v.currentTime = ((e.clientX - rect.left) / rect.width) * v.duration; }; const toggleMute = (e) => { e.stopPropagation(); const v = videoRef.current; if (!v) return; v.muted = !v.muted; setMuted(v.muted); }; const goFullscreen = (e) => { e.stopPropagation(); const v = videoRef.current; if (!v) return; (v.requestFullscreen || v.webkitRequestFullscreen || (() => {})).call(v); }; return (
{/* Section header */}
{/* Mode badge row */}
PPC AGENT · ADS CSV ANALYSIS L1 · ADVISOR MODE

You see the data.
You make the call.

This is Advisor — the entry altitude. HEXA-V reads your ads CSV, runs PPC analysis, and surfaces exactly what needs attention: overbid keywords, wasted spend, harvest opportunities. No automation. Every decision stays with you. The agent tells you what to do — you decide whether to do it.

{/* Advisor vs Co-Pilot callout */}
{[ { tier: "L1 · ADVISOR", subtitle: "This demo", desc: "Reads your CSV. Tells you what's wrong. You act on it.", active: true }, { tier: "L2 · CO-PILOT", subtitle: "Next tier", desc: "Same analysis, but actions queue for your one-click approval.", active: false } ].map((t, i) => (
{t.active &&
}
{t.tier}
{t.subtitle}
{t.desc}
))}
{/* Synthetic data disclaimer */}
⚠ NOTE Synthetic data only — not real account figures. Numbers are illustrative.
{/* ── Player shell ── */}
{/* Accent corner brackets */} {["tl","tr","bl","br"].map(c => (
))} {/* ── Window bar ── */}
HEXA-V · PPC.AGENT · ADS.CSV.ANALYSIS
● REC 2026.05.15
{/* ── Video + overlays ── */}
setHovering(true)} onMouseLeave={() => setHovering(false)} >