/* global React, Button, Pill, Eyebrow, Icon */
const { useState: useSecState, useEffect: useSecEffect, useRef: useSecRef } = React;

/* Mobile breakpoint used for responsive calendar crop values */
const BM_MOBILE_BREAKPOINT = 760;

/* Keyframes + a11y-safe reduced-motion gate. Injected once. */
(function injectHeroAnims() {
  if (document.getElementById("bm-hero-anim-style")) return;
  const s = document.createElement("style");
  s.id = "bm-hero-anim-style";
  s.textContent = `
    @keyframes bm-ring {
      0%   { transform: scale(0.92); opacity: 0.55; }
      70%  { opacity: 0; }
      100% { transform: scale(1.8); opacity: 0; }
    }
    @keyframes bm-bar {
      0%, 100% { transform: scaleY(0.35); }
      50%      { transform: scaleY(1); }
    }
    @keyframes bm-line-in {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes bm-dot {
      0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
      30%           { opacity: 1;    transform: translateY(-2px); }
    }
    @media (prefers-reduced-motion: reduce) {
      .bm-ring, .bm-bar, .bm-dot, .bm-orbit, .bm-shimmer, .bm-halo { animation: none !important; }
    }

    /* Futuristic avatar animations */
    @keyframes bm-orbit {
      from { transform: translate(-50%, -50%) rotate(0deg); }
      to   { transform: translate(-50%, -50%) rotate(360deg); }
    }
    @keyframes bm-shimmer {
      0%, 100% { transform: translate(-30%, -30%) scale(1);   opacity: 0.65; }
      50%      { transform: translate(-28%, -28%) scale(1.08); opacity: 0.9; }
    }
    @keyframes bm-halo {
      0%, 100% { opacity: 0.55; transform: scale(1); }
      50%      { opacity: 0.9;  transform: scale(1.04); }
    }

    /* Neon metric glow — two variants so Ruben can compare */
    .bm-neon-blue {
      color: #B3C6FF !important;
      text-shadow:
        0 0 6px rgba(109,145,242,0.85),
        0 0 14px rgba(109,145,242,0.65),
        0 0 28px rgba(109,145,242,0.45),
        0 0 56px rgba(109,145,242,0.28);
    }
    .bm-neon-white {
      color: #FFFFFF !important;
      text-shadow:
        0 0 6px rgba(255,255,255,0.9),
        0 0 14px rgba(255,255,255,0.6),
        0 0 28px rgba(255,255,255,0.35),
        0 0 56px rgba(179,198,255,0.25);
    }

    /* Modal */
    @keyframes bm-fade-in { from { opacity: 0; } to { opacity: 1; } }
    @keyframes bm-pop-in  { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
  `;
  document.head.appendChild(s);
})();

/* ------------------------------------------------------------------
   Shared config + helpers
------------------------------------------------------------------ */
const CANVAS_MAX = 1200;

/* GHL calendar: "Discovery Call With Ruben (Founder & CEO)" */
const GHL_CAL_ID = "u1ZRJUGOmDQknNvuHoKv";
const GHL_CAL_EMBED_URL = `https://api.leadconnectorhq.com/widget/booking/${GHL_CAL_ID}`;
/* Stable id in the GHL pattern "<calendarId>_<timestamp>" — computed once so
   the iframe isn't remounted on re-render. form_embed.js uses this id to
   postMessage height updates back into the iframe. */
const GHL_IFRAME_ID = `${GHL_CAL_ID}_${Date.now()}`;

/* Scroll directly to the calendar embed. Prefer the calendar iframe
   container itself over the enclosing "Let's Talk" section so users land on
   the booking widget, not the intro copy. Falls back sensibly for pages
   that host only one of them. */
function scrollToTalk() {
  const target =
    document.getElementById("calendar") ||      // homepage
    document.getElementById("cs-calendar") ||   // case-study subpages
    document.getElementById("talk");            // fallback
  if (target) target.scrollIntoView({ behavior: "smooth", block: "start" });
  else if (window.location.pathname !== "/") window.location.href = "/#calendar";
}

/* Open the "agent coming soon" modal — pub/sub via CustomEvent */
function openAgentModal() {
  window.dispatchEvent(new CustomEvent("bm:open-agent-modal"));
}

const eyebrowStyle = {
  fontSize: 11,
  fontWeight: 600,
  letterSpacing: "0.16em",
  textTransform: "uppercase",
  color: "var(--bm-accent)",
  lineHeight: 1,
};

const displayXL = {
  fontFamily: "var(--bm-font-display)",
  fontSize: "clamp(48px, 6.6vw, 88px)",
  fontWeight: 700,
  letterSpacing: "-0.03em",
  lineHeight: 1.02,
  color: "var(--bm-text)",
  margin: 0,
};

const displayL = {
  fontFamily: "var(--bm-font-display)",
  fontSize: "clamp(36px, 4.4vw, 56px)",
  fontWeight: 700,
  letterSpacing: "-0.025em",
  lineHeight: 1.06,
  color: "var(--bm-text)",
  margin: 0,
};

const displayM = {
  fontFamily: "var(--bm-font-display)",
  fontSize: "clamp(26px, 2.8vw, 36px)",
  fontWeight: 700,
  letterSpacing: "-0.02em",
  lineHeight: 1.12,
  color: "var(--bm-text)",
  margin: 0,
};

const bodyL = {
  fontSize: 19,
  lineHeight: 1.55,
  color: "var(--bm-text-muted)",
  fontWeight: 400,
  margin: 0,
};

const bodyM = {
  fontSize: 16,
  lineHeight: 1.6,
  color: "var(--bm-text-muted)",
  fontWeight: 400,
  margin: 0,
};

/* Signature radial glow, bottom-left */
function BottomLeftGlow() {
  return (
    <div
      aria-hidden
      style={{
        position: "absolute",
        inset: 0,
        pointerEvents: "none",
        background:
          "radial-gradient(ellipse 55% 50% at 0% 100%, rgba(0,24,125,0.72), rgba(0,11,69,0.28) 38%, rgba(0,3,34,0) 70%)",
      }}
    />
  );
}

/* ------------------------------------------------------------------
   1. Navigation
------------------------------------------------------------------ */
function SiteNav() {
  const [scrolled, setScrolled] = useSecState(false);
  const [menuOpen, setMenuOpen] = useSecState(false);
  useSecEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  /* Lock body scroll while mobile menu open */
  useSecEffect(() => {
    if (!menuOpen) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => { document.body.style.overflow = prev; };
  }, [menuOpen]);

  const linkStyle = {
    color: "var(--bm-text-muted)",
    fontSize: 14,
    fontWeight: 500,
    textDecoration: "none",
    transition: "color 120ms var(--bm-ease-standard)",
  };

  const goTalk = () => {
    setMenuOpen(false);
    const target =
      document.getElementById("calendar") ||
      document.getElementById("cs-calendar");
    if (target) {
      target.scrollIntoView({ behavior: "smooth", block: "start" });
    } else {
      window.location.href = "/#calendar";
    }
  };

  return (
    <header
      data-screen-label="Nav"
      data-bm-nav="root"
      style={{
        position: "sticky",
        top: 0,
        zIndex: 50,
        padding: "16px 32px",
        background: scrolled || menuOpen ? "rgba(0,3,34,0.72)" : "transparent",
        backdropFilter: scrolled || menuOpen ? "blur(10px)" : "none",
        WebkitBackdropFilter: scrolled || menuOpen ? "blur(10px)" : "none",
        borderBottom: scrolled ? "1px solid var(--bm-hairline)" : "1px solid transparent",
        transition: "all 220ms var(--bm-ease-standard)",
      }}
    >
      <div
        style={{
          maxWidth: CANVAS_MAX,
          margin: "0 auto",
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          gap: 24,
        }}
      >
        <a href="/" style={{ display: "flex", alignItems: "center" }} onClick={() => setMenuOpen(false)}>
          <img
            src="/assets/beavermind-logo-white.svg"
            alt="BeaverMind.ai"
            style={{ height: 26, width: "auto", display: "block" }}
          />
        </a>

        {/* Desktop nav — hidden on tablet/mobile via mobile.css */}
        <nav data-bm-nav="desktop-links" style={{ display: "flex", gap: 28, alignItems: "center" }}>
          <a href="/#what"        style={linkStyle}>What we build</a>
          <a href="/case-studies" style={linkStyle}>Case studies</a>
          <a href="/#process"     style={linkStyle}>How we work</a>
          <a href="/#about"       style={linkStyle}>About</a>
          <Button variant="primary" icon="arrow-right" onClick={goTalk}>Let's talk</Button>
        </nav>

        {/* Hamburger — shown on tablet/mobile via mobile.css */}
        <button
          data-bm-nav="hamburger"
          aria-label={menuOpen ? "Close menu" : "Open menu"}
          aria-expanded={menuOpen}
          onClick={() => setMenuOpen((o) => !o)}
          style={{
            display: "none",   /* shown via media query */
            alignItems: "center",
            justifyContent: "center",
            width: 44,
            height: 44,
            borderRadius: 12,
            border: "1px solid var(--bm-hairline-strong)",
            background: "transparent",
            color: "var(--bm-text)",
            cursor: "pointer",
            padding: 0,
          }}
        >
          <Icon name={menuOpen ? "x" : "menu"} size={20} color="currentColor" />
        </button>
      </div>

      {/* Mobile menu overlay — full-screen, fully opaque navy.
          Scroll is on the OUTER overlay (not an inner flex child) because
          iOS Safari is flaky with nested overflow inside a fixed element
          while body scroll is locked. Uses 100dvh so the Safari URL bar
          doesn't clip the CTA. */}
      {menuOpen && (
        <div
          style={{
            position: "fixed",
            inset: 0,
            height: "100dvh",
            background: "var(--bm-canvas)",
            zIndex: 60,
            overflowY: "auto",
            WebkitOverflowScrolling: "touch",
            overscrollBehavior: "contain",
            animation: "bm-fade-in 160ms var(--bm-ease-standard) both",
          }}
        >
          {/* Local top bar inside overlay — sticky so the close X stays
              reachable while the user scrolls the link list. */}
          <div
            style={{
              position: "sticky",
              top: 0,
              background: "var(--bm-canvas)",
              padding: "16px 20px",
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
              borderBottom: "1px solid var(--bm-hairline)",
              zIndex: 1,
            }}
          >
            <a href="/" onClick={() => setMenuOpen(false)} style={{ display: "flex", alignItems: "center" }}>
              <img
                src="/assets/beavermind-logo-white.svg"
                alt="BeaverMind.ai"
                style={{ height: 24, width: "auto", display: "block" }}
              />
            </a>
            <button
              aria-label="Close menu"
              onClick={() => setMenuOpen(false)}
              style={{
                display: "inline-flex",
                alignItems: "center",
                justifyContent: "center",
                width: 44, height: 44,
                borderRadius: 12,
                border: "1px solid var(--bm-hairline-strong)",
                background: "transparent",
                color: "var(--bm-text)",
                cursor: "pointer",
                padding: 0,
              }}
            >
              <Icon name="x" size={20} color="currentColor" />
            </button>
          </div>

          {/* Link list + CTA — plain block flow, no flex:1 + overflow nesting */}
          <nav style={{ padding: "24px 24px 48px" }}>
            {[
              { label: "What we build", href: "/#what" },
              { label: "Case studies",  href: "/case-studies" },
              { label: "How we work",   href: "/#process" },
              { label: "About",         href: "/#about" },
            ].map((l) => (
              <a
                key={l.label}
                href={l.href}
                onClick={() => setMenuOpen(false)}
                style={{
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "space-between",
                  padding: "20px 4px",
                  fontFamily: "var(--bm-font-display)",
                  fontSize: 22,
                  fontWeight: 600,
                  letterSpacing: "-0.01em",
                  color: "var(--bm-text)",
                  textDecoration: "none",
                  borderBottom: "1px solid var(--bm-hairline)",
                }}
              >
                <span>{l.label}</span>
                <Icon name="arrow-up-right" size={18} color="var(--bm-text-muted)" />
              </a>
            ))}

            <div data-bm-cta-row style={{ marginTop: 28, display: "flex" }}>
              <Button variant="primary" icon="arrow-right" onClick={goTalk}>
                Let's talk
              </Button>
            </div>
          </nav>
        </div>
      )}
    </header>
  );
}

/* ------------------------------------------------------------------
   2. Hero
------------------------------------------------------------------ */
function Hero2() {
  return (
    <section
      id="top"
      data-screen-label="01 Hero"
      data-bm-section="hero"
      style={{
        position: "relative",
        padding: "64px 32px 96px",
        overflow: "hidden",
      }}
    >
      <BottomLeftGlow />
      <div style={{ position: "relative", maxWidth: CANVAS_MAX, margin: "0 auto" }}>
        <div style={eyebrowStyle}>AI Voice Agents &amp; Automation</div>

        <h1 data-bm-hero-title style={{ ...displayXL, marginTop: 24, maxWidth: 1000 }}>
          24/7 Voice Agents that handle<br />
          your leads in seconds.
        </h1>

        <p style={{ ...bodyL, marginTop: 28, maxWidth: 640 }}>
          We build and deploy AI voice agents and automation systems
          for High Ticket businesses losing revenue to slow follow-up and
          inconsistent sales execution.
        </p>

        <div data-bm-hero-ctas style={{ marginTop: 40, display: "flex", flexDirection: "column", gap: 14 }}>
          <div style={eyebrowStyle}>Every build is custom. See yours first.</div>
          <div data-bm-cta-row style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <Button variant="primary" icon="arrow-right" onClick={scrollToTalk}>Let's talk</Button>
            <Button variant="secondary" icon="phone-call" onClick={openAgentModal}>Try the agent first</Button>
          </div>
        </div>

        <HeroLiveCall />
      </div>
    </section>
  );
}

/* Hero secondary visual: live call + extraction panel.
   Picked up from the UI kit, tightened. Earns its space by
   showing what a voice agent actually does. */
function HeroLiveCall() {
  /* Line durations are tuned to real ElevenLabs audio lengths (+~250ms
     breathing so each line finishes cleanly before the next starts).
     Transcript text is kept clean; inline tags like [cough] and [chuckles]
     are baked into the audio only, not displayed. */
  /* Real Tradacc setter script (Aaron Korbs' Volume Profile Formula).
     Emma voice + settings pulled from the live agent "Emma - Arise Setter
     v1.7" in ElevenLabs. Phrasing calibrated to two production call
     transcripts.
     `?v=8` on each audio URL is a cache-buster — browsers aggressively
     cache mp3s by filename, so without this they'd keep serving the
     previous Emma voice even after the file has been overwritten.
     Turn-taking gaps tuned per role: agent replies to the prospect in
     ~100-200ms (fast AI), prospect takes ~250-320ms to respond (human). */
  const script = [
    { who: "agent", text: "…John?",                                                                                                                                    dur: 1550,  audio: "/assets/audio/01-emma.mp3?v=8" },
    { who: "lead",  text: "Yeah… who is this?",                                                                                                                         dur: 1950,  audio: "/assets/audio/02-john.mp3?v=8" },
    { who: "agent", text: "Hey John, I'm Emma with Tradacc's team. You got access to the Volume Profile Formula a while back. Does that still ring a bell?",           dur: 7100,  audio: "/assets/audio/03-emma.mp3?v=8" },
    { who: "lead",  text: "Uh, yeah… I remember signing up but honestly, I haven't really dug into it.",                                                                dur: 5800,  audio: "/assets/audio/04-john.mp3?v=8" },
    { who: "agent", text: "No worries John… life happens, I get it. Listen, I have a really good opportunity though — and I was wondering, are you still actively looking to improve your trading and get more consistent with your results?",                            dur: 12600, audio: "/assets/audio/05-emma.mp3?v=8" },
    { who: "lead",  text: "I mean, yeah… I'd like to. I've been stuck around breakeven for a while.",                                                                   dur: 5450,  audio: "/assets/audio/06-john.mp3?v=8" },
    { who: "agent", text: "Yeah, that makes sense — so basically I can set you up on a private call with one of our head coaches to break down what's holding you back and show you the same blueprint we use to get results. Normally this call costs $500, but if you can answer a couple of questions with me, I'll make it free for you. Does that sound like something you'd want to jump on?", dur: 18500, audio: "/assets/audio/07-emma.mp3?v=8" },
  ];

  const [visible, setVisible]   = useSecState(1);
  const [speaker, setSpeaker]   = useSecState("agent");
  const [elapsed, setElapsed]   = useSecState(0);
  const [audioOn, setAudioOn]   = useSecState(false); // muted by default (autoplay rules)
  const [inView,  setInView]    = useSecState(true);
  const listRef   = useSecRef(null);
  const panelRef  = useSecRef(null);
  /* Single audio element. iOS Safari only "unlocks" an <audio> instance
     that received .play() inside a user gesture — with the previous
     multi-element design the 2nd line onward couldn't play on mobile.
     One element with src-swapping = one unlock = all lines play. */
  const audioRef  = useSecRef(null);

  /* Create the single Audio element once + warm the browser cache for every
     line file so src swaps don't wait on network. */
  useSecEffect(() => {
    if (typeof Audio === "undefined") return;
    const a = new Audio();
    a.preload = "auto";
    audioRef.current = a;

    // Prefetch every line so swapping src is instant
    script.forEach((line) => { if (line.audio) { fetch(line.audio).catch(() => {}); } });

    return () => { try { a.pause(); } catch(_) {} };
    // eslint-disable-next-line
  }, []);

  /* Pause when scrolled offscreen */
  useSecEffect(() => {
    if (!panelRef.current || typeof IntersectionObserver === "undefined") return;
    const obs = new IntersectionObserver(
      ([e]) => setInView(e.isIntersecting),
      { threshold: 0.2 }
    );
    obs.observe(panelRef.current);
    return () => obs.disconnect();
  }, []);

  /* Pause when muted or scrolled out */
  useSecEffect(() => {
    if (!audioOn || !inView) {
      try { audioRef.current && audioRef.current.pause(); } catch(_) {}
    }
  }, [audioOn, inView]);

  useSecEffect(() => {
    let mounted = true;
    let t;
    const loop = (i) => {
      if (!mounted) return;
      const line = script[i];
      setSpeaker(line.who);
      setVisible(i + 1);
      setElapsed((e) => e + Math.round(line.dur / 1000));

      if (line.audio && audioOn && inView) {
        const a = audioRef.current;
        if (a) {
          try {
            /* Only swap src if it actually changed (avoids a redundant
               network reset). Compare against the fully-qualified URL. */
            const full = new URL(line.audio, window.location.href).href;
            if (a.src !== full) a.src = line.audio;
            a.currentTime = 0;
            const p = a.play();
            if (p && p.catch) p.catch(() => {});
          } catch(_) {}
        }
      }

      t = setTimeout(() => {
        if (!mounted) return;
        if (i + 1 >= script.length) {
          t = setTimeout(() => {
            if (!mounted) return;
            setVisible(0); setElapsed(0);
            t = setTimeout(() => loop(0), 600);
          }, 2800);
        } else {
          loop(i + 1);
        }
      }, line.dur);
    };
    loop(0);
    return () => { mounted = false; clearTimeout(t); };
    // eslint-disable-next-line
  }, [audioOn, inView]);

  // Autoscroll the transcript as lines appear
  useSecEffect(() => {
    if (listRef.current) listRef.current.scrollTop = listRef.current.scrollHeight;
  }, [visible]);

  const mmss = `${String(Math.floor(elapsed / 60)).padStart(2, "0")}:${String(elapsed % 60).padStart(2, "0")}`;

  return (
    <div
      data-bm-hero-livecall
      ref={panelRef}
      style={{
        position: "relative",
        marginTop: 72,
        padding: 1,
        borderRadius: 22,
        background:
          "linear-gradient(160deg, rgba(109,145,242,0.45), rgba(109,145,242,0.04) 45%, transparent 75%)",
        boxShadow: "0 40px 100px -40px rgba(109,145,242,0.35)",
      }}
    >
      {/* Mute / unmute toggle — floats in the top-right of the live-call panel.
          Default is muted so the page loads quiet; tapping once starts audio
          and switches to a "Listen" state. */}
      <button
        onClick={(e) => {
          e.preventDefault();
          setAudioOn((v) => !v);
        }}
        aria-label={audioOn ? "Mute call audio" : "Unmute and hear the call"}
        title={audioOn ? "Mute" : "Hear the call"}
        style={{
          position: "absolute",
          top: 14,
          right: 14,
          zIndex: 3,
          display: "inline-flex",
          alignItems: "center",
          gap: 8,
          padding: audioOn ? "8px 10px" : "8px 14px 8px 12px",
          borderRadius: 999,
          border: `1px solid ${audioOn ? "rgba(109,145,242,0.5)" : "rgba(109,145,242,0.35)"}`,
          background: audioOn ? "rgba(109,145,242,0.18)" : "rgba(0,11,69,0.65)",
          color: "var(--bm-text)",
          cursor: "pointer",
          fontFamily: "var(--bm-font-body)",
          fontSize: 12,
          fontWeight: 600,
          letterSpacing: "0.08em",
          textTransform: "uppercase",
          backdropFilter: "blur(6px)",
          WebkitBackdropFilter: "blur(6px)",
          transition: "background 180ms var(--bm-ease-standard), border-color 180ms var(--bm-ease-standard)",
        }}
      >
        <Icon name={audioOn ? "volume-2" : "volume-x"} size={14} color="currentColor" />
        {!audioOn && <span>Hear it</span>}
      </button>
      <div
        data-bm-stack="hero-call"
        data-bm-hero-panel
        style={{
          background: "var(--bm-surface)",
          borderRadius: 22,
          padding: 32,
          display: "grid",
          gridTemplateColumns: "0.95fr 1.05fr",
          gap: 36,
          alignItems: "stretch",
        }}
      >
        {/* Animated voice agent */}
        <div
          data-bm-hero-avatar-col
          style={{
            display: "flex", flexDirection: "column", alignItems: "center",
            justifyContent: "center", gap: 24,
            padding: "16px 8px",
            borderRight: "1px solid var(--bm-hairline)",
          }}
        >
          <VoiceAvatar speaking={speaker === "agent"} />

          <div style={{ textAlign: "center" }}>
            <div style={{
              fontFamily: "var(--bm-font-display)",
              fontSize: 20, fontWeight: 700, letterSpacing: "-0.02em",
              color: "var(--bm-text)",
            }}>
              Emma
            </div>
            <div style={{
              fontSize: 11, fontWeight: 600,
              letterSpacing: "0.16em", textTransform: "uppercase",
              color: "var(--bm-accent)", marginTop: 6,
            }}>
              AI Voice Agent
            </div>
          </div>

          <SoundWave active={speaker === "agent"} />

          <div style={{
            display: "flex", alignItems: "center", gap: 10,
            fontSize: 11, color: "var(--bm-text-muted)",
            letterSpacing: "0.16em", textTransform: "uppercase", fontWeight: 600,
          }}>
            <span style={{
              width: 6, height: 6, borderRadius: 999, background: "#5FE2B0",
              boxShadow: "0 0 0 3px rgba(95,226,176,0.18)",
            }} />
            Live · {mmss}
          </div>
        </div>

        {/* Progressive transcript — fixed height so the loop animation
            plays inside without resizing the section and reflowing the rest
            of the page while the user scrolls. */}
        <div
          ref={listRef}
          data-bm-hero-transcript
          style={{
            display: "flex", flexDirection: "column", gap: 10,
            minWidth: 0,
            height: 380, overflow: "hidden",
            paddingRight: 4,
          }}
        >
          <div style={{
            fontSize: 11, color: "var(--bm-text-muted)",
            letterSpacing: "0.16em", textTransform: "uppercase", fontWeight: 600,
            marginBottom: 4,
          }}>
            Transcript
          </div>
          {script.slice(0, visible).map((l, i) => (
            <div
              key={`${visible}-${i}`}
              style={{
                fontSize: 13.5, lineHeight: 1.55,
                color: l.who === "agent" ? "var(--bm-text)" : "var(--bm-text-muted)",
                padding: "11px 14px",
                background: l.who === "agent" ? "rgba(109,145,242,0.08)" : "transparent",
                border: l.who === "agent" ? "1px solid rgba(109,145,242,0.22)" : "1px solid var(--bm-hairline)",
                borderRadius: 14,
                animation: "bm-line-in 320ms var(--bm-ease-standard) both",
              }}
            >
              <div style={{
                fontSize: 10, fontWeight: 600, letterSpacing: "0.14em",
                textTransform: "uppercase", marginBottom: 6,
                color: l.who === "agent" ? "var(--bm-accent)" : "var(--bm-text-muted)",
              }}>
                {l.who === "agent" ? "Agent" : "Lead"}
              </div>
              {l.text}
            </div>
          ))}
          {speaker === "lead" && visible < script.length && <TypingDots />}
        </div>
      </div>
    </div>
  );
}

function VoiceAvatar({ speaking }) {
  /* Emma's canonical avatar — holographic-professional portrait with animated
     pulse rings, ambient halo, and rim glow while speaking. */
  return (
    <div style={{ position: "relative", width: 132, height: 132 }}>
      {/* Ambient halo — always-on soft glow, pulses while speaking */}
      <span
        className="bm-halo"
        aria-hidden
        style={{
          position: "absolute",
          inset: -10,
          borderRadius: "50%",
          background:
            "radial-gradient(circle, rgba(109,145,242,0.35) 0%, rgba(109,145,242,0) 60%)",
          animation: speaking ? "bm-halo 1800ms ease-in-out infinite" : "none",
          opacity: speaking ? 1 : 0.45,
          transition: "opacity 300ms var(--bm-ease-standard)",
          filter: "blur(6px)",
        }}
      />

      {/* Pulsing expansion rings — only while speaking */}
      {[0, 1, 2].map((i) => (
        <span
          key={i}
          className="bm-ring"
          aria-hidden
          style={{
            position: "absolute",
            inset: 0,
            borderRadius: "50%",
            border: "1px solid rgba(179,198,255,0.5)",
            animation: speaking
              ? `bm-ring 2400ms ${i * 800}ms cubic-bezier(0.2,0.7,0.2,1) infinite`
              : "none",
            opacity: speaking ? 1 : 0,
            transition: "opacity 300ms var(--bm-ease-standard)",
          }}
        />
      ))}

      {/* Portrait disc — real rendered Emma, clipped to circle */}
      <div
        style={{
          position: "absolute",
          inset: 8,
          borderRadius: "50%",
          overflow: "hidden",
          border: "1px solid rgba(109,145,242,0.4)",
          boxShadow: speaking
            ? "0 0 0 1px rgba(179,198,255,0.5), 0 0 44px -4px rgba(109,145,242,0.65)"
            : "0 0 0 1px rgba(109,145,242,0.25), 0 0 18px -4px rgba(109,145,242,0.3)",
          transition: "box-shadow 300ms var(--bm-ease-standard)",
          background: "#050c2b",
        }}
      >
        <img
          src="/assets/emma-avatar.png"
          alt="Emma — AI voice agent"
          loading="lazy"
          style={{
            width: "100%",
            height: "100%",
            objectFit: "cover",
            objectPosition: "center 18%",
            display: "block",
          }}
        />

        {/* Subtle top-left specular wash for a holographic shine feel */}
        <span
          aria-hidden
          style={{
            position: "absolute",
            inset: 0,
            borderRadius: "50%",
            background:
              "radial-gradient(ellipse at 28% 22%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 45%)",
            pointerEvents: "none",
            mixBlendMode: "screen",
          }}
        />
      </div>
    </div>
  );
}

function SoundWave({ active }) {
  const bars = 14;
  return (
    <div
      aria-hidden
      style={{
        display: "flex", alignItems: "center", gap: 4,
        height: 28,
      }}
    >
      {Array.from({ length: bars }).map((_, i) => {
        const mid = (bars - 1) / 2;
        const falloff = 1 - Math.abs(i - mid) / (mid + 1);
        const h = 6 + Math.round(falloff * 20);
        const delay = (i * 70) % 700;
        return (
          <span
            key={i}
            className="bm-bar"
            style={{
              width: 3, height: h,
              borderRadius: 2,
              background: active
                ? "linear-gradient(180deg, #B3C6FF, #6D91F2)"
                : "rgba(109,145,242,0.22)",
              transformOrigin: "center",
              animation: active
                ? `bm-bar ${700 + (i % 4) * 120}ms ${delay}ms cubic-bezier(0.4,0,0.2,1) infinite`
                : "none",
              transition: "background 200ms var(--bm-ease-standard)",
            }}
          />
        );
      })}
    </div>
  );
}

function TypingDots() {
  return (
    <div style={{
      display: "flex", alignItems: "center", gap: 6,
      padding: "10px 14px",
      fontSize: 10, fontWeight: 600, letterSpacing: "0.14em",
      textTransform: "uppercase",
      color: "var(--bm-text-muted)",
    }}>
      <span>Lead</span>
      <span style={{ display: "inline-flex", gap: 3, marginLeft: 6 }}>
        {[0, 1, 2].map((i) => (
          <span
            key={i}
            className="bm-dot"
            style={{
              width: 4, height: 4, borderRadius: 999,
              background: "var(--bm-text-muted)",
              animation: `bm-dot 1200ms ${i * 180}ms ease-in-out infinite`,
            }}
          />
        ))}
      </span>
    </div>
  );
}

/* ------------------------------------------------------------------
   3. Proof Bar
------------------------------------------------------------------ */
function ProofBar() {
  const stats = [
    { v: "$457 → $6,800", l: "spent in · booked out, 15 days",          neon: "blue" },
    { v: "14.9x ROI",     l: "from a single voice agent campaign",      neon: "blue" },
    { v: "19% → 42%",     l: "close rate improvement",                  neon: "blue" },
    { v: "$85,532",       l: "from one email sequence",                 neon: "blue" },
  ];
  return (
    <section
      data-screen-label="02 Proof"
      data-bm-section="mid"
      style={{
        padding: "64px 32px",
        borderTop: "1px solid var(--bm-hairline)",
        borderBottom: "1px solid var(--bm-hairline)",
      }}
    >
      <div
        data-bm-stack="proof"
        style={{
          maxWidth: CANVAS_MAX,
          margin: "0 auto",
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 32,
        }}
      >
        {stats.map((s) => (
          <div key={s.v} style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            <div
              className={s.neon === "blue" ? "bm-neon-blue" : "bm-neon-white"}
              style={{
                fontFamily: "var(--bm-font-display)",
                fontSize: "clamp(28px, 2.6vw, 40px)",
                fontWeight: 700,
                letterSpacing: "-0.025em",
                lineHeight: 1,
              }}
            >
              {s.v}
            </div>
            <div
              style={{
                fontSize: 13,
                color: "var(--bm-text-muted)",
                lineHeight: 1.4,
              }}
            >
              {s.l}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ------------------------------------------------------------------
   4. What We Build
------------------------------------------------------------------ */
function WhatWeBuild() {
  return (
    <section
      id="what"
      data-screen-label="03 What We Build"
      data-bm-section="mid"
      style={{ padding: "128px 32px 96px" }}
    >
      <div style={{ maxWidth: CANVAS_MAX, margin: "0 auto" }}>
        <div style={eyebrowStyle}>What We Build</div>
        <h2 style={{ ...displayM, marginTop: 16, maxWidth: 720 }}>
          Three systems. 100% done for you.
        </h2>

        {/* Featured — AI Voice Agents, full width, hero of the section */}
        <div style={{ marginTop: 56 }}>
          <FeaturedBuildCard
            icon="phone-call"
            eyebrow="Flagship"
            title="AI Voice Agents"
            body="Your leads, contacted and qualified — automatically, 24/7."
            tail="Built on your script. Live in 14 days."
            useCases={[
              "Speed to Lead",
              "Dead Lead Reactivation",
              "No-Show Recovery",
              "Post-Webinar Follow-up",
              "Inbound Handling",
            ]}
          />
        </div>

        {/* Two supporting systems */}
        <div
          data-bm-stack="cols-2"
          style={{
            marginTop: 16,
            display: "grid",
            gridTemplateColumns: "repeat(2, 1fr)",
            gap: 16,
          }}
        >
          <BuildCard
            icon="gauge"
            title="AI Sales Systems"
            body="AI Sales Manager (call review and coaching), lead qualification scoring, text and email dynamic follow-up."
            tail="Close the gap between your best rep and your average one."
          />
          <BuildCard
            icon="workflow"
            title="AI Automation"
            body="If a process is proven and repeatable, we can automate it — content, onboarding, delivery, reporting."
            tail="The only filter is ROI — revenue gained or time saved."
          />
        </div>
      </div>
    </section>
  );
}

function BuildCard({ icon, title, body, tail }) {
  const [hover, setHover] = useSecState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: hover ? "var(--bm-surface-2)" : "var(--bm-surface)",
        border: `1px solid ${hover ? "var(--bm-hairline-strong)" : "var(--bm-hairline)"}`,
        borderRadius: 18,
        padding: 32,
        transition: "background 220ms var(--bm-ease-standard), border-color 220ms var(--bm-ease-standard)",
        display: "flex",
        flexDirection: "column",
        gap: 16,
        /* Grid stretch keeps both cards the same height; no forced minHeight
           padding the body to a large extra gap above the divider. */
      }}
    >
      <div
        style={{
          width: 48, height: 48, borderRadius: 12,
          background: "rgba(109,145,242,0.12)",
          border: "1px solid rgba(109,145,242,0.28)",
          display: "flex", alignItems: "center", justifyContent: "center",
        }}
      >
        <Icon name={icon} size={22} color="var(--bm-accent)" />
      </div>
      <div
        style={{
          fontFamily: "var(--bm-font-display)",
          fontSize: 26, fontWeight: 700, letterSpacing: "-0.02em",
          lineHeight: 1.15,
          color: "var(--bm-text)",
        }}
      >
        {title}
      </div>
      <div style={{ fontSize: 15, lineHeight: 1.6, color: "var(--bm-text-muted)", flex: 1 }}>
        {body}
      </div>
      <div
        style={{
          fontSize: 14,
          lineHeight: 1.5,
          color: "var(--bm-text)",
          paddingTop: 10,
          marginTop: 2,
          borderTop: "1px solid var(--bm-hairline)",
        }}
      >
        {tail}
      </div>
    </div>
  );
}

/* Featured variant — larger, full-width, with a "Use cases" pill row. */
function FeaturedBuildCard({ icon, eyebrow, title, body, tail, useCases }) {
  const [hover, setHover] = useSecState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      data-bm-featured-card
      style={{
        background: hover ? "var(--bm-surface-2)" : "var(--bm-surface)",
        border: `1px solid ${hover ? "var(--bm-hairline-strong)" : "var(--bm-hairline)"}`,
        borderRadius: 22,
        padding: "40px 44px",
        transition: "background 220ms var(--bm-ease-standard), border-color 220ms var(--bm-ease-standard)",
        display: "grid",
        gridTemplateColumns: "1.1fr 1fr",
        gap: 48,
        alignItems: "center",
        position: "relative",
        overflow: "hidden",
        boxShadow: "0 40px 100px -50px rgba(109,145,242,0.35)",
      }}
    >
      {/* soft accent glow, top-right */}
      <div aria-hidden style={{
        position: "absolute",
        inset: 0,
        pointerEvents: "none",
        background:
          "radial-gradient(ellipse 60% 70% at 100% 0%, rgba(109,145,242,0.10), rgba(0,3,34,0) 70%)",
      }} />

      <div style={{ position: "relative", display: "flex", flexDirection: "column", gap: 18 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <div
            style={{
              width: 56, height: 56, borderRadius: 14,
              background: "rgba(109,145,242,0.14)",
              border: "1px solid rgba(109,145,242,0.32)",
              display: "flex", alignItems: "center", justifyContent: "center",
              flexShrink: 0,
            }}
          >
            <Icon name={icon} size={26} color="var(--bm-accent)" />
          </div>
          {eyebrow && (
            <span style={{
              fontSize: 11,
              fontWeight: 600,
              letterSpacing: "0.16em",
              textTransform: "uppercase",
              color: "var(--bm-accent)",
              padding: "6px 12px",
              borderRadius: 999,
              background: "rgba(109,145,242,0.12)",
              border: "1px solid rgba(109,145,242,0.28)",
              lineHeight: 1,
            }}>
              {eyebrow}
            </span>
          )}
        </div>
        <div
          style={{
            fontFamily: "var(--bm-font-display)",
            fontSize: "clamp(30px, 3.2vw, 40px)",
            fontWeight: 700,
            letterSpacing: "-0.02em",
            lineHeight: 1.1,
            color: "var(--bm-text)",
          }}
        >
          {title}
        </div>
        <div style={{ fontSize: 17, lineHeight: 1.55, color: "var(--bm-text-muted)" }}>
          {body}
        </div>
        <div
          style={{
            fontSize: 14,
            lineHeight: 1.5,
            color: "var(--bm-text)",
            paddingTop: 18,
            borderTop: "1px solid var(--bm-hairline)",
            fontWeight: 500,
          }}
        >
          {tail}
        </div>
      </div>

      {/* Use cases list — right column on desktop */}
      <div
        data-bm-featured-usecases
        style={{
          position: "relative",
          background: "rgba(0,11,69,0.45)",
          border: "1px solid var(--bm-hairline)",
          borderRadius: 16,
          padding: "24px 24px",
          display: "flex",
          flexDirection: "column",
          gap: 14,
        }}
      >
        <div style={{
          fontSize: 11,
          fontWeight: 600,
          letterSpacing: "0.16em",
          textTransform: "uppercase",
          color: "var(--bm-text-muted)",
        }}>
          Use Cases
        </div>
        <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 10 }}>
          {useCases.map((uc) => (
            <li key={uc} style={{
              display: "flex",
              alignItems: "center",
              gap: 12,
              fontSize: 15,
              lineHeight: 1.4,
              color: "var(--bm-text)",
            }}>
              <Icon name="check" size={16} color="var(--bm-accent)" />
              <span>{uc}</span>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

/* ------------------------------------------------------------------
   5. Case Studies
------------------------------------------------------------------ */
function CaseStudies() {
  const items = [
    {
      slug: "ai-voice-agent",
      tag: "Sales · Voice",
      title: "AI Voice Agent",
      metric: "$457 → $6,800",
      neon: "blue",
      body:
        "2,825 dead leads contacted. 22 qualified appointments booked in 15 days. Cost per booked call: $200 → $20.",
    },
    {
      slug: "ai-email-engine",
      tag: "Sales · Email",
      title: "AI Email Engine",
      metric: "$85,532 / 30 days",
      neon: "blue",
      body:
        "One webinar follow-up sequence built in 4 hours. 6,000-person list. $1,200 offer.",
    },
    {
      slug: "ai-sales-manager",
      tag: "Sales · Coaching",
      title: "AI Sales Manager",
      metric: "19% → 42%",
      neon: "blue",
      body:
        "Every sales call reviewed automatically. 10% of calls reviewed became 100% — without adding headcount.",
    },
    {
      slug: "content-repurposing",
      tag: "Lead Gen · Content",
      title: "Content Repurposing Engine",
      metric: "$3,000 → $60 / mo",
      neon: "blue",
      body:
        "One YouTube video became 20+ platform posts per week. Team time: 40 hours/month → 6 hours.",
    },
    {
      slug: "ai-qa-clone",
      tag: "Delivery · Coaching",
      title: "AI Q&A Clone",
      metric: "9/10 quality",
      neon: "blue",
      body:
        "AI coach deployed inside the course portal, answering student questions 24/7. 88% rated answers Excellent or Good.",
      wide: true,
    },
  ];
  return (
    <section
      id="results"
      data-screen-label="04 Results"
      data-bm-section="mid"
      style={{ padding: "96px 32px" }}
    >
      <div style={{ maxWidth: CANVAS_MAX, margin: "0 auto" }}>
        <div style={eyebrowStyle}>Case Studies</div>
        <h2 style={{ ...displayM, marginTop: 16, maxWidth: 720 }}>
          Proof, not pitch.
        </h2>
        <p style={{ ...bodyM, marginTop: 18, maxWidth: 720 }}>
          Each system below was deployed inside a real operating business.
          Every number is sourced from the client's own CRM, revenue, or
          tooling — not projections.
        </p>

        <div
          data-bm-stack="cols-2"
          style={{
            marginTop: 56,
            display: "grid",
            gridTemplateColumns: "repeat(2, 1fr)",
            gap: 16,
          }}
        >
          {items.map((it) => (
            <CaseCard key={it.title} {...it} />
          ))}
        </div>
      </div>
    </section>
  );
}

function CaseCard({ slug, tag, title, metric, body, wide, neon }) {
  const [hover, setHover] = useSecState(false);
  const neonClass = neon === "blue" ? "bm-neon-blue" : neon === "white" ? "bm-neon-white" : "";
  const Wrapper = slug ? "a" : "article";
  const wrapperProps = slug ? { href: `/case-studies/${slug}` } : {};
  return (
    <Wrapper
      {...wrapperProps}
      data-bm-case-card
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: hover ? "var(--bm-surface-2)" : "#000B45",
        border: `1px solid ${hover ? "var(--bm-hairline-strong)" : "var(--bm-hairline)"}`,
        borderRadius: 18,
        padding: 36,
        gridColumn: wide ? "1 / -1" : "auto",
        display: "flex",
        flexDirection: "column",
        gap: 20,
        transition: "background 220ms var(--bm-ease-standard), border-color 220ms var(--bm-ease-standard)",
        position: "relative",
        minHeight: 260,
        textDecoration: "none",
      }}
    >
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16 }}>
        <span
          style={{
            fontSize: 11,
            fontWeight: 600,
            letterSpacing: "0.16em",
            textTransform: "uppercase",
            color: "var(--bm-accent)",
          }}
        >
          {tag}
        </span>
        <span
          style={{
            fontSize: 13,
            color: "var(--bm-text-muted)",
            fontWeight: 500,
          }}
        >
          {title}
        </span>
      </div>

      <div
        className={neonClass}
        style={{
          fontFamily: "var(--bm-font-display)",
          fontSize: wide ? "clamp(44px, 5.2vw, 72px)" : "clamp(36px, 4vw, 56px)",
          fontWeight: 700,
          letterSpacing: "-0.03em",
          lineHeight: 1.02,
        }}
      >
        {metric}
      </div>

      <div
        style={{
          fontSize: 15,
          lineHeight: 1.6,
          color: "var(--bm-text-muted)",
          maxWidth: wide ? 780 : "none",
          flex: 1,
        }}
      >
        {body}
      </div>

      <span
        style={{
          display: "inline-flex",
          alignItems: "center",
          gap: 8,
          fontSize: 13,
          fontWeight: 500,
          color: hover ? "var(--bm-accent-hover)" : "var(--bm-accent)",
          marginTop: 4,
          letterSpacing: 0,
          alignSelf: "flex-start",
          transition: "color 120ms var(--bm-ease-standard)",
        }}
      >
        Read the case study
        <Icon name="arrow-up-right" size={14} color="currentColor" />
      </span>
    </Wrapper>
  );
}

/* ------------------------------------------------------------------
   6. How We Work
------------------------------------------------------------------ */
function HowItWorks() {
  const steps = [
    {
      n: "01",
      title: "Audit",
      body:
        "We map your sales and operations process. Identify where leads are leaking, where time is wasted, and where AI creates the highest ROI.",
    },
    {
      n: "02",
      title: "Build",
      body:
        "We build the system on your existing scripts, your CRM, your stack. You review a live demo before anything goes live.",
    },
    {
      n: "03",
      title: "Launch",
      body:
        "The system goes live. We monitor and optimize for 90 days. If it doesn't make its cost back, you don't pay.",
    },
    {
      n: "04",
      title: "Partner",
      body:
        "Optional monthly retainer to act as your AI growth partner — maintaining and improving the stack we shipped, building the next system, and keeping you ahead of a landscape that shifts every week.",
    },
  ];
  return (
    <section
      id="process"
      data-screen-label="05 Process"
      data-bm-section="mid"
      style={{ padding: "96px 32px" }}
    >
      <div style={{ maxWidth: CANVAS_MAX, margin: "0 auto" }}>
        <div style={eyebrowStyle}>How We Work</div>
        <h2 style={{ ...displayM, marginTop: 16, maxWidth: 820 }}>
          Audit. Build. Launch. Partner. Average time to live: 14 days.
        </h2>

        <div
          style={{
            marginTop: 64,
            display: "grid",
            /* Auto-fit so 4 cols → 2 cols → 1 col cleanly as the viewport shrinks. */
            gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))",
            gap: 32,
            position: "relative",
          }}
        >
          {steps.map((s, i) => (
            <div key={s.n} style={{ display: "flex", flexDirection: "column", gap: 20 }}>
              <div
                style={{
                  fontFamily: "var(--bm-font-display)",
                  fontSize: "clamp(56px, 6vw, 80px)",
                  fontWeight: 700,
                  letterSpacing: "-0.04em",
                  lineHeight: 1,
                  color: "var(--bm-accent)",
                }}
              >
                {s.n}
              </div>
              <div
                style={{
                  height: 1,
                  background: "var(--bm-hairline)",
                  width: "100%",
                }}
              />
              <div
                style={{
                  fontFamily: "var(--bm-font-display)",
                  fontSize: "clamp(26px, 2.4vw, 32px)",
                  fontWeight: 700,
                  letterSpacing: "-0.02em",
                  lineHeight: 1.1,
                  color: "var(--bm-text)",
                }}
              >
                {s.title}
              </div>
              <div style={bodyM}>{s.body}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ------------------------------------------------------------------
   7. Who It's For
------------------------------------------------------------------ */
function WhoItsFor() {
  const good = [
    "High-ticket sales business with active lead flow and proven offer",
    "Losing revenue to slow follow-up or inconsistent sales execution",
    "Want to remove manual calling without hiring more setters",
    "ROI-first — you measure what you pay for",
    "Open to building systems, not collecting tools",
  ];
  const bad = [
    "No validated offer or sales process yet",
    "Lead generation is the primary problem",
    "Looking for a quick fix — AI won't save a broken funnel",
    "Prefer to own and manage tools internally from day one",
    "Not open to structured onboarding or feedback loops",
  ];
  return (
    <section
      data-screen-label="06 Fit"
      data-bm-section="mid"
      style={{ padding: "96px 32px" }}
    >
      <div style={{ maxWidth: CANVAS_MAX, margin: "0 auto" }}>
        <div style={eyebrowStyle}>Good Fit · Not a Fit</div>
        <h2 style={{ ...displayM, marginTop: 16, maxWidth: 720 }}>
          This works for some businesses. Not all.
        </h2>

        <div
          data-bm-stack="fit"
          style={{
            marginTop: 56,
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: 16,
          }}
        >
          <FitCard kind="good" items={good} />
          <FitCard kind="bad" items={bad} />
        </div>
      </div>
    </section>
  );
}

function FitCard({ kind, items }) {
  const good = kind === "good";
  return (
    <div
      style={{
        background: "var(--bm-surface)",
        border: "1px solid var(--bm-hairline)",
        borderRadius: 18,
        padding: 36,
      }}
    >
      <div
        style={{
          display: "flex",
          alignItems: "center",
          gap: 12,
          marginBottom: 24,
        }}
      >
        <div
          style={{
            width: 32,
            height: 32,
            borderRadius: 999,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            background: good ? "rgba(95,226,176,0.12)" : "rgba(138,148,180,0.1)",
            border: good ? "1px solid rgba(95,226,176,0.32)" : "1px solid var(--bm-hairline-strong)",
          }}
        >
          <Icon
            name={good ? "check" : "x"}
            size={16}
            color={good ? "#5FE2B0" : "var(--bm-text-muted)"}
          />
        </div>
        <div
          style={{
            fontFamily: "var(--bm-font-display)",
            fontSize: 22,
            fontWeight: 700,
            letterSpacing: "-0.02em",
            color: "var(--bm-text)",
          }}
        >
          {good ? "Good fit" : "Not a fit"}
        </div>
      </div>

      <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 14 }}>
        {items.map((text, i) => (
          <li
            key={i}
            style={{
              display: "flex",
              alignItems: "flex-start",
              gap: 12,
              fontSize: 15,
              lineHeight: 1.55,
              color: good ? "var(--bm-text)" : "var(--bm-text-muted)",
              paddingBottom: 14,
              borderBottom: i < items.length - 1 ? "1px solid var(--bm-hairline)" : "none",
            }}
          >
            <Icon
              name={good ? "check" : "x"}
              size={16}
              color={good ? "#5FE2B0" : "var(--bm-text-muted)"}
              style={{ marginTop: 3, flexShrink: 0 }}
            />
            <span>{text}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

/* ------------------------------------------------------------------
   8. The Guarantee
------------------------------------------------------------------ */
function Guarantee() {
  return (
    <section
      data-screen-label="07 Guarantee"
      data-bm-section="mid"
      style={{ padding: "96px 32px", position: "relative", overflow: "hidden" }}
    >
      <BottomLeftGlow />
      <div style={{ position: "relative", maxWidth: CANVAS_MAX, margin: "0 auto" }}>
        <div style={eyebrowStyle}>The Guarantee</div>
        <h2 style={{ ...displayL, marginTop: 20, maxWidth: 1040 }}>
          If the system doesn't pay for itself in 90 days, you don't pay.
        </h2>

        <div
          data-bm-stack="guarantee"
          style={{
            marginTop: 40,
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: 48,
            maxWidth: 1040,
          }}
        >
          <p style={bodyL}>
            Every build comes with a 90-day performance window. We agree on
            KPIs upfront — appointments booked, revenue generated, cost per
            call. If we don't hit them, you get a full refund.
          </p>
          <p style={bodyL}>
            We only work with businesses where the fundamentals already work.
            AI accelerates what's proven — it doesn't rescue what's broken.
          </p>
        </div>
      </div>
    </section>
  );
}

/* ------------------------------------------------------------------
   9. Voice Agent Demo
------------------------------------------------------------------ */
function VoiceDemo() {
  return (
    <section
      id="demo"
      data-screen-label="08 Demo"
      data-bm-section="mid"
      style={{ padding: "96px 32px 128px" }}
    >
      <div
        data-bm-demo-panel
        data-bm-stack="demo"
        style={{
          maxWidth: 1100,
          margin: "0 auto",
          background: "var(--bm-surface)",
          border: "1px solid var(--bm-hairline-strong)",
          borderRadius: 22,
          padding: "72px 64px",
          position: "relative",
          overflow: "hidden",
          boxShadow: "0 40px 100px -40px rgba(109,145,242,0.4)",
          display: "grid",
          gridTemplateColumns: "1.1fr 1fr",
          gap: 56,
          alignItems: "center",
        }}
      >
        <div
          aria-hidden
          style={{
            position: "absolute", inset: 0, pointerEvents: "none",
            background:
              "radial-gradient(ellipse 55% 70% at 100% 100%, rgba(0,24,125,0.65), rgba(0,3,34,0) 68%)",
          }}
        />
        <div style={{ position: "relative" }}>
          <div style={eyebrowStyle}>Experience It Yourself</div>
          <h2 style={{ ...displayL, marginTop: 18 }}>
            Talk to the agent. See it book the call.
          </h2>
          <p style={{ ...bodyM, marginTop: 20, maxWidth: 520, color: "var(--bm-text-muted)" }}>
            Click the button and you'll be in a live conversation with our
            AI agent. It'll ask about your business, understand what you're
            trying to solve, and — if there's a fit — book a call with our team.
          </p>
          <p style={{ ...bodyM, marginTop: 14, maxWidth: 520, color: "var(--bm-text-muted)" }}>
            You'll see exactly how it qualifies, handles questions, and closes
            into the calendar. That's the same flow we'd build for your
            leads.
          </p>
          <div style={{ marginTop: 32, display: "flex", flexDirection: "column", gap: 14 }}>
            <div style={eyebrowStyle}>Every build is custom. See yours first.</div>
            <div data-bm-cta-row style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <Button variant="primary" icon="arrow-right" onClick={scrollToTalk}>Let's talk</Button>
              <Button variant="secondary" icon="phone-call" onClick={openAgentModal}>Try the agent first</Button>
            </div>
          </div>
        </div>

        <AgentIconCard />
      </div>
    </section>
  );
}

/* Agent icon card — a replica of the hero's animated avatar.
   Always "speaking" since this section is showing what a conversation feels like. */
function AgentIconCard() {
  return (
    <div
      style={{
        position: "relative",
        background: "rgba(0,3,34,0.6)",
        border: "1px solid var(--bm-hairline-strong)",
        borderRadius: 18,
        padding: "40px 28px",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        gap: 20,
        minHeight: 360,
      }}
    >
      <div style={{
        display: "flex", alignItems: "center", gap: 10,
        fontSize: 11, color: "var(--bm-text-muted)",
        letterSpacing: "0.16em", textTransform: "uppercase", fontWeight: 600,
        alignSelf: "flex-start",
      }}>
        <span style={{
          width: 6, height: 6, borderRadius: 999, background: "#5FE2B0",
          boxShadow: "0 0 0 3px rgba(95,226,176,0.18)",
        }} />
        Agent online · 24/7
      </div>

      <div style={{ marginTop: 8 }}>
        <VoiceAvatar speaking={true} />
      </div>

      <div style={{ textAlign: "center" }}>
        <div style={{
          fontFamily: "var(--bm-font-display)",
          fontSize: 22, fontWeight: 700, letterSpacing: "-0.02em",
          color: "var(--bm-text)",
        }}>
          Emma
        </div>
        <div style={{
          fontSize: 11, fontWeight: 600,
          letterSpacing: "0.16em", textTransform: "uppercase",
          color: "var(--bm-accent)", marginTop: 6,
        }}>
          AI Voice Agent
        </div>
      </div>

      <SoundWave active={true} />

      <div style={{
        fontSize: 13, color: "var(--bm-text-muted)",
        textAlign: "center", maxWidth: 280, lineHeight: 1.55,
        marginTop: 4,
      }}>
        One click. Real conversation. Books into our calendar if you qualify.
      </div>
    </div>
  );
}

/* ------------------------------------------------------------------
   10. Footer
------------------------------------------------------------------ */
function SiteFooter() {
  const navLinks = [
    { label: "What we build", href: "/#what" },
    { label: "Case studies",  href: "/case-studies" },
    { label: "How we work",   href: "/#process" },
    { label: "About",         href: "/#about" },
    { label: "Let's talk",    href: "/#calendar" },
  ];
  return (
    <footer
      data-screen-label="09 Footer"
      data-bm-section="mid"
      style={{
        padding: "72px 32px 48px",
        borderTop: "1px solid var(--bm-hairline)",
      }}
    >
      <div
        data-bm-stack="footer"
        style={{
          maxWidth: CANVAS_MAX,
          margin: "0 auto",
          display: "grid",
          gridTemplateColumns: "1.4fr 1fr 1fr",
          gap: 48,
        }}
      >
        <div>
          <img
            src="/assets/beavermind-logo-white.svg"
            alt="BeaverMind.ai"
            style={{ height: 26, width: "auto", display: "block", opacity: 0.95 }}
          />
          <p style={{ fontSize: 14, color: "var(--bm-text-muted)", marginTop: 18, maxWidth: 320, lineHeight: 1.55 }}>
            AI Voice Agents &amp; Automation for High-Ticket Sales Businesses.
          </p>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--bm-text-muted)", fontWeight: 600 }}>
            Navigate
          </div>
          {navLinks.map((l) => (
            <a
              key={l.label}
              href={l.href}
              style={{ fontSize: 14, color: "var(--bm-text)", textDecoration: "none" }}
            >
              {l.label}
            </a>
          ))}
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--bm-text-muted)", fontWeight: 600 }}>
            Contact
          </div>
          <div style={{ display: "flex", gap: 10 }}>
            <SocialIcon name="brand:linkedin" href="https://www.linkedin.com/in/ruben-davoli/" label="LinkedIn — Ruben Davoli" />
            <SocialIcon name="brand:youtube"  href="https://www.youtube.com/@ruben_davoli"     label="YouTube — @ruben_davoli" />
            <SocialIcon name="mail"           href="mailto:support@beavermind.ai"              label="Email support@beavermind.ai" />
          </div>
        </div>
      </div>

      <div
        data-bm-footer-bottom
        style={{
          maxWidth: CANVAS_MAX,
          margin: "56px auto 0",
          paddingTop: 24,
          borderTop: "1px solid var(--bm-hairline)",
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          gap: 24,
          flexWrap: "wrap",
          fontSize: 12,
          color: "var(--bm-text-muted)",
          lineHeight: 1.6,
        }}
      >
        <div>
          © 2026 BeaverMind by RD Consulting Ltd · HK Co. No. 3129374 · All rights reserved.
        </div>
        <div style={{ display: "flex", gap: 20, flexWrap: "wrap" }}>
          <a href="/tos"                  style={{ color: "inherit", textDecoration: "none" }}>Terms</a>
          <a href="/privacy-policy"       style={{ color: "inherit", textDecoration: "none" }}>Privacy</a>
          <a href="/refund-policy"        style={{ color: "inherit", textDecoration: "none" }}>Refund Policy</a>
          <a href="/earnings-disclaimer"  style={{ color: "inherit", textDecoration: "none" }}>Earnings Disclaimer</a>
        </div>
      </div>
    </footer>
  );
}

function SocialIcon({ name, href = "#", label }) {
  const [hover, setHover] = useSecState(false);
  const external = href.startsWith("http");
  return (
    <a
      href={href}
      target={external ? "_blank" : undefined}
      rel={external ? "noopener noreferrer" : undefined}
      aria-label={label || name}
      title={label || name}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        width: 36, height: 36,
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        borderRadius: 10,
        background: hover ? "var(--bm-surface-2)" : "var(--bm-surface)",
        border: `1px solid ${hover ? "var(--bm-hairline-strong)" : "var(--bm-hairline)"}`,
        transition: "background 120ms var(--bm-ease-standard), border-color 120ms var(--bm-ease-standard)",
      }}
    >
      <Icon name={name} size={16} color={hover ? "var(--bm-accent)" : "var(--bm-text-muted)"} />
    </a>
  );
}

/* ------------------------------------------------------------------
   About — Two-person card layout (Ruben + Luca)
------------------------------------------------------------------ */
const TEAM = [
  {
    photo: "/assets/ruben-profile.png",
    name: "Ruben Davoli",
    role: "Founder & CEO",
    bio: [
      "Ruben Davoli scaled a coaching business from $0 to $3M with 15,000+ clients — by building systems that worked without him.",
      "After years working with agencies and being let down by most, one pattern kept repeating: the priority was protecting the retainer, not the client's results. BeaverMind exists to break that model. The golden rule here is simple — if a build doesn't produce a clear ROI in revenue gained or cost and time saved, we don't build it.",
    ],
    credentials: "2 Comma Club ClickFunnels Award · International Speaker",
  },
  {
    photo: "/assets/luke-profile.png",
    name: "Luke Cala",
    role: "Head of AI Solutions",
    bio: [
      "Luke is the technical architect behind every system BeaverMind ships — AI voice agents, automation workflows, custom applications, and the full AI infrastructure stack.",
      "He placed 2nd at the Liam Ottley AI hackathon, one of the most competitive AI builder programs running today. His background in paid media means he comes to every build with a distribution and acquisition lens — technical precision in service of revenue outcomes, not engineering for its own sake.",
    ],
    credentials: "Liam Ottley's Hackathon Finalist · AI Systems Architect",
  },
];

function TeamCard({ photo, name, role, bio, credentials }) {
  const [hover, setHover] = useSecState(false);
  return (
    <article
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: hover ? "var(--bm-surface-2)" : "var(--bm-surface)",
        border: `1px solid ${hover ? "var(--bm-hairline-strong)" : "var(--bm-hairline)"}`,
        borderRadius: 18,
        overflow: "hidden",
        display: "flex",
        flexDirection: "column",
        transition: "background 220ms var(--bm-ease-standard), border-color 220ms var(--bm-ease-standard)",
      }}
    >
      <div
        data-bm-team-image
        style={{
          position: "relative",
          width: "100%",
          aspectRatio: "1 / 1",
          background: "var(--bm-surface-2)",
          borderBottom: "1px solid var(--bm-hairline)",
        }}
      >
        <img
          src={photo}
          alt={name}
          loading="lazy"
          style={{
            position: "absolute",
            inset: 0,
            width: "100%",
            height: "100%",
            objectFit: "cover",
            objectPosition: "center 20%",
            display: "block",
          }}
        />
      </div>

      <div style={{ padding: "32px 32px 28px", display: "flex", flexDirection: "column", gap: 12, flex: 1 }}>
        <div>
          <h3 style={{
            fontFamily: "var(--bm-font-display)",
            fontSize: "clamp(22px, 2vw, 28px)",
            fontWeight: 700,
            letterSpacing: "-0.02em",
            lineHeight: 1.1,
            color: "var(--bm-text)",
            margin: 0,
          }}>{name}</h3>
          <div style={{
            marginTop: 6,
            fontSize: 11,
            fontWeight: 600,
            letterSpacing: "0.16em",
            textTransform: "uppercase",
            color: "var(--bm-accent)",
          }}>{role}</div>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 12, flex: 1 }}>
          {bio.map((p, i) => (
            <p key={i} style={{ ...bodyM, fontSize: 15 }}>{p}</p>
          ))}
        </div>

        <div style={{
          marginTop: 14,
          paddingTop: 18,
          borderTop: "1px solid var(--bm-hairline)",
          fontSize: 11,
          fontWeight: 600,
          letterSpacing: "0.14em",
          textTransform: "uppercase",
          color: "var(--bm-accent)",
          lineHeight: 1.6,
        }}>
          {credentials}
        </div>
      </div>
    </article>
  );
}

function Founder() {
  return (
    <section
      id="about"
      data-screen-label="About Us"
      data-bm-section="mid"
      style={{ padding: "96px 32px" }}
    >
      <div style={{ maxWidth: CANVAS_MAX, margin: "0 auto" }}>
        <div style={eyebrowStyle}>About Us</div>
        <h2 style={{ ...displayM, marginTop: 16, maxWidth: 900 }}>
          Anyone can build an AI agent.<br />
          Few understand the business it's supposed to fix.
        </h2>
        <p style={{ ...bodyM, marginTop: 18, maxWidth: 680 }}>
          BeaverMind starts with the revenue problem. AI is how we solve it.
        </p>

        <div
          data-bm-stack="cols-2"
          style={{
            marginTop: 56,
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: 20,
          }}
        >
          {TEAM.map((m) => <TeamCard key={m.name} {...m} />)}
        </div>
      </div>
    </section>
  );
}

/* ------------------------------------------------------------------
   Let's Talk — GHL calendar embed
------------------------------------------------------------------ */
function LetsTalk() {
  /* The GHL widget iframe posts multiple size-update messages to the parent:
       • `[iFrameSizer]<id>:<h>:<w>:init`          (iframe-resizer protocol)
       • `["highlevel.setHeight", {height, id}]`   (GHL custom format)
     form_embed.js handles these via the iframe-resizer protocol, but it only
     binds iframes that exist at DOMContentLoaded — and since we render via
     Babel-Standalone, our iframe mounts after that. Rather than fighting the
     library's stateful init, we install our own listener that handles BOTH
     formats and resizes the iframe directly. */
  /* The GHL widget changes height across states (date picker → timeslots →
     confirm → form). Every state posts a new height. We match the iframe
     and its container to the reported height exactly — no cropping — so
     nothing ever gets clipped and the Confirm button / form are always
     fully visible on both mobile and desktop. */
  useSecEffect(() => {
    const onMsg = (e) => {
      if (!e || !e.data) return;
      const ifr = document.getElementById(GHL_IFRAME_ID);
      if (!ifr) return;

      let targetHeight = null;

      // Format 1: iframe-resizer "[iFrameSizer]<id>:<h>:<w>:<type>"
      if (typeof e.data === "string" && e.data.indexOf("[iFrameSizer]") === 0) {
        const parts = e.data.substring("[iFrameSizer]".length).split(":");
        if (parts.length >= 2) {
          const h = parseInt(parts[1], 10);
          if (!isNaN(h) && h > 0) targetHeight = h;
        }
      }

      // Format 2: GHL custom ["highlevel.setHeight", {height, id}]
      let parsed = e.data;
      if (typeof parsed === "string") {
        try { parsed = JSON.parse(parsed); } catch (_) { /* not JSON */ }
      }
      if (Array.isArray(parsed) && parsed[0] === "highlevel.setHeight" && parsed[1]) {
        const h = parseInt(parsed[1].height, 10);
        if (!isNaN(h) && h > 0) targetHeight = h;
      }

      if (targetHeight) {
        ifr.style.height = targetHeight + "px";
        const container = document.getElementById("calendar");
        if (container) container.style.height = targetHeight + "px";
      }
    };
    window.addEventListener("message", onMsg);
    return () => window.removeEventListener("message", onMsg);
  }, []);

  return (
    <section
      id="talk"
      data-screen-label="Let's Talk"
      data-bm-section="cta"
      style={{ padding: "96px 32px 128px", position: "relative", overflow: "hidden" }}
    >
      <BottomLeftGlow />
      <div style={{ position: "relative", maxWidth: CANVAS_MAX, margin: "0 auto" }}>
        <div style={eyebrowStyle}>Let's Talk</div>
        <h2 style={{ ...displayL, marginTop: 18, maxWidth: 960 }}>
          Let's find out if AI is the right move for your business.
        </h2>
        <p style={{ ...bodyM, marginTop: 22, maxWidth: 680 }}>
          The first step is a free audit of your sales system. We'll tell you
          exactly what to build, in what order, and what ROI to expect.
          No pitch, no pressure.
        </p>

        <div style={{ marginTop: 32, display: "flex", flexDirection: "column", gap: 14 }}>
          <div style={eyebrowStyle}>Every build is custom. See yours first.</div>
          <div data-bm-cta-row style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <Button variant="primary" icon="arrow-down" onClick={scrollToCalendar}>Book below</Button>
            <Button variant="secondary" icon="phone-call" onClick={openAgentModal}>Try the agent first</Button>
          </div>
        </div>

        {/* Live GHL calendar embed — Discovery Call With Ruben (Founder & CEO).
            Uses the standard GHL iframe id pattern so form_embed.js can postMessage
            height updates — without it, scroll/hover is broken.
            Width ≥ ~1060px is required for GHL's revamped 2-column layout
            (profile + description on the LEFT, date/time on the RIGHT). Below that
            breakpoint the widget collapses to a stacked/mobile view. */}
        <div
          id="calendar"
          data-bm-calendar
          style={{
            marginTop: 40,
            maxWidth: 1140,
            marginLeft: "auto",
            marginRight: "auto",
            background: "#ffffff",
            border: "none",
            borderRadius: 18,
            overflow: "hidden",
            position: "relative",
            boxShadow: "0 30px 80px -30px rgba(109,145,242,0.28)",
          }}
        >
          <iframe
            src={`${GHL_CAL_EMBED_URL}?notrack=true`}
            title="Discovery Call With Ruben (Founder & CEO)"
            style={{
              width: "100%",
              border: "none",
              display: "block",
              background: "#ffffff",
              WebkitOverflowScrolling: "touch",
            }}
            id={GHL_IFRAME_ID}
          />
        </div>
        <p
          style={{
            marginTop: 14,
            fontSize: 12,
            color: "var(--bm-text-muted)",
            textAlign: "center",
            letterSpacing: "0.08em",
            textTransform: "uppercase",
            fontWeight: 600,
          }}
        >
          Discovery call · 30 minutes · no pitch
        </p>
      </div>
    </section>
  );
}

/* Scroll to the embedded calendar iframe (used by the in-section button) */
function scrollToCalendar() {
  const el = document.getElementById("calendar");
  if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
}

/* ------------------------------------------------------------------
   Agent Modal — "Try the agent first" friendly coming-soon popup
------------------------------------------------------------------ */
function AgentModal() {
  const [open, setOpen] = useSecState(false);

  useSecEffect(() => {
    const onOpen = () => setOpen(true);
    window.addEventListener("bm:open-agent-modal", onOpen);
    return () => window.removeEventListener("bm:open-agent-modal", onOpen);
  }, []);

  useSecEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
    document.addEventListener("keydown", onKey);
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = prevOverflow;
    };
  }, [open]);

  if (!open) return null;

  const close = () => setOpen(false);
  const bookCall = () => { close(); scrollToTalk(); };

  return (
    <div
      role="dialog"
      aria-modal="true"
      aria-labelledby="bm-agent-modal-title"
      onClick={close}
      style={{
        position: "fixed",
        inset: 0,
        zIndex: 100,
        background: "rgba(0,3,34,0.72)",
        backdropFilter: "blur(8px)",
        WebkitBackdropFilter: "blur(8px)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        padding: 24,
        animation: "bm-fade-in 180ms var(--bm-ease-standard) both",
      }}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          position: "relative",
          maxWidth: 520,
          width: "100%",
          background: "var(--bm-surface)",
          border: "1px solid var(--bm-hairline-strong)",
          borderRadius: 22,
          padding: "40px 36px 32px",
          boxShadow: "0 40px 100px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(109,145,242,0.18)",
          animation: "bm-pop-in 240ms var(--bm-ease-standard) both",
        }}
      >
        {/* close button */}
        <button
          onClick={close}
          aria-label="Close"
          style={{
            position: "absolute",
            top: 14, right: 14,
            width: 34, height: 34,
            borderRadius: 10,
            border: "1px solid var(--bm-hairline)",
            background: "transparent",
            color: "var(--bm-text-muted)",
            cursor: "pointer",
            display: "inline-flex",
            alignItems: "center",
            justifyContent: "center",
            transition: "background 120ms var(--bm-ease-standard), color 120ms var(--bm-ease-standard)",
          }}
          onMouseEnter={(e) => { e.currentTarget.style.background = "var(--bm-surface-2)"; e.currentTarget.style.color = "var(--bm-text)"; }}
          onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "var(--bm-text-muted)"; }}
        >
          <Icon name="x" size={16} color="currentColor" />
        </button>

        {/* avatar */}
        <div style={{ display: "flex", justifyContent: "center", marginBottom: 20 }}>
          <VoiceAvatar speaking={true} />
        </div>

        <div style={{ textAlign: "center" }}>
          <div style={eyebrowStyle}>Coming Soon</div>
          <h3
            id="bm-agent-modal-title"
            style={{
              ...displayM,
              marginTop: 12,
              fontSize: "clamp(24px, 3vw, 30px)",
            }}
          >
            Meet Emma — live on this site soon.
          </h3>
          <p style={{ ...bodyM, marginTop: 16, maxWidth: 420, marginLeft: "auto", marginRight: "auto" }}>
            The agent will be embedded directly on this website soon.
            In the meantime, you can try it live with us by booking a call.
          </p>
        </div>

        <div
          style={{
            marginTop: 28,
            display: "flex",
            gap: 10,
            flexWrap: "wrap",
            justifyContent: "center",
          }}
        >
          <Button variant="primary" icon="calendar" onClick={bookCall}>
            Book a call instead
          </Button>
          <Button variant="secondary" onClick={close}>
            Maybe later
          </Button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  SiteNav, Hero2, ProofBar, WhatWeBuild,
  CaseStudies, HowItWorks, WhoItsFor,
  Guarantee, Founder, VoiceDemo, LetsTalk, SiteFooter,
  AgentModal,
  /* helpers used by case-study pages in a separate script file */
  scrollToTalk, openAgentModal,
  GHL_CAL_ID, GHL_CAL_EMBED_URL,
});