// Caliber demo embed sections — wraps the live demo at caliber-demo.vercel.app
// in a polished presentation shell for use across marketing variants.
const DEMO_URL = 'https://caliber-demo.vercel.app/';
/* =========================================================
BrowserChrome — styled window frame wrapping any iframe
========================================================= */
function BrowserChrome({ url = 'caliber-demo.vercel.app', dark = false, children, height = 760, style = {} }) {
return (
{/* chrome bar */}
{/* traffic lights */}
{/* url pill */}
{Icon.lock({ size: 11 })} {url}
{children}
);
}
/* =========================================================
LiveDemo — standard "Try Caliber" section used by Variants A–F.
Shows a headline + perks on the left, the iframe on the right.
========================================================= */
function LiveDemo({
eyebrow = 'Live product',
title,
sub = 'No demo call, no login. This is the real product with a sample agency pre-loaded. Poke around — nothing will break.',
variant = 'split', // 'split' | 'stacked' | 'hero'
theme = 'light',
showBadges = true,
}) {
const dark = theme === 'dark';
const [iframeReady, setIframeReady] = React.useState(false);
const ref = React.useRef(null);
const inView = useInView(ref, 0.15);
// Lazy-load the iframe so it doesn't slow the page
const shouldLoad = inView;
const Frame = (
{!iframeReady && (
{shouldLoad ? 'Booting Caliber…' : 'Ready when you are — scroll into view'}