<!--
  ===========================================================================
  BEON PIXEL - Corporate Site: Single-Page Landing
  ===========================================================================
  File: index.html
  sudo nano /opt/beon/frontend/corporate-site/public/index.html

  Purpose: Single-page public-facing corporate landing for beonpixel.com
  Version: 7.0.0
  Last Updated: May 19, 2026
  Author: MLKNWZ@BEONPIXEL.COM

  Description:
    Single-page corporate landing. Compliant with BEON UI Design Guidelines
    (Feb 2026): DM Sans, #10b981 accent, #1a1a1a page bg, #2a2a2a cards,
    16px radius, outlined button system, no icons in main sections.
    Pricing: BEON Free $0 + 10% / BEON Pro $29 + 10% / BEON Plus $299 + 10%.

    v6.0.0 introduces an interactive product demo section between the hero
    and pricing. The demo simulates the BEON product UI: a docked chat
    input bar where prompts type themselves, an animated send action, an
    AI text response, and a rotating "rich result" message (Google SERP
    ad preview, portfolio stat strip, or spend & revenue trend chart).
    15 industry mock ads cycle with random result-type pairings.

  Dependencies:
    - Google Fonts: DM Sans, JetBrains Mono
    - /beon-favicon.svg
    - No JS libraries (pure vanilla)
    - No build step

  Change Log:
    v7.0.0 (May 19, 2026) - Three-tier pricing overhaul:
      - REPLACED: 2-plan layout (Self-Serve / Done-For-You) with 3-plan
        layout (BEON Free / BEON Pro / BEON Plus)
      - Free ($0): PAYG, 5 campaigns, 25K signup tokens, basic AI chat,
        analytics dashboard, in-system ticket support
      - Pro ($29): Unlimited campaigns, 75 AI tokens/mo, ad extensions,
        advanced targeting, priority email support
      - Enterprise ($299): Everything in Pro + dedicated AM, daily
        optimisation, competitor analysis, first-party pixel, 200 AI
        tokens/mo, 24-hour SLA
      - CSS: pricing grid changed from 2-col to 3-col, mobile stacks 1-col
      - Added "Request Access" CTA button below pricing cards
      - Added section group headers (Campaigns, AI & tokens, etc.) within
        each plan card for scannable feature comparison
      - Pro card featured with accent border highlight + "Popular" badge
    v6.4.1 (May 13, 2026) - Full sitelink enrichment across all 15 industries:
      - All 15 industry sitelinks upgraded from bare strings to rich objects
        with text + desc (description line per sitelink)
      - Descriptions are contextually accurate per brand/industry
      - Renderer already supports desc field — no CSS/JS changes needed
    v6.4.0 (May 13, 2026) - Sprint M: Rich ad renderer — prompt/ad parity:
      - REPLACED: Flat renderAdPreview() with rich vanilla JS version matching
        platform SearchAdPreview.tsx (Image 2) layout exactly
      - ADDED: Business name | domain/path URL row (brand identity visible)
      - ADDED: 4-column sitelink grid with description support
      - ADDED: Call extension with phone SVG icon in Google blue
      - ADDED: Structured snippet with bold header (Rivera's Auto etc.)
      - ADDED: Promo row with tag badge, text, code
      - ADDED: Proper callouts line with · separator
      - FIXED: CSS class naming conflict (old .sponsored/.titles/.url etc.
        replaced with namespaced .ad-* classes)
      - RESULT: Prompt content now directly maps to what renders in ad card
    v6.3.3 (May 13, 2026) - HOTFIX: Ad content clipping:
      - ROOT CAUSE: demo-body overflow:hidden clipped taller ad cards
      - FIX: demo-body changed to overflow-y:auto / overflow-x:hidden
      - FIX: demo-adpreview bottom padding increased for breathing room
    v6.3.2 (May 13, 2026) - Stats + trend card border radius 12px -> 16px (BEON standard, missed in v6.3.1)
    v6.3.1 (May 13, 2026) - Ad preview border radius 12px -> 16px (BEON standard)
    v6.3.0 (May 13, 2026) - Sprint M: UI + copy iterations:
      - Logo size increased another 30% (19.5px -> 25.35px)
      - Ad response pool: replaced "drafted/appear on Google" copy with
        confident campaign-ready language (5 variants)
      - Input bar: pill shape (border-radius 24px), send button moved
        inside pill on right, height 52px, matches product UI screenshot
    v6.2.1 (May 13, 2026) - HOTFIX: Scene timing race condition:
      - ROOT CAUSE: sceneDuration (2500ms fixed timer) fired before prompt
        typing completed (180-260 chars x 32ms = 6-8s), cutting scenes mid-render
      - FIX: Replaced fixed sceneDuration timer with event-driven advanceScene()
        called only AFTER rich result renders + dwell (ad: 2500ms, stats/trend: 3500ms)
      - Scenes now always complete full choreography before advancing
    v6.2.0 (May 13, 2026) - Sprint M: Copy + UI iterations:
      - Logo/mark font-size increased 30% (15px -> 19.5px)
      - Hero h1 updated: "BEON runs your Google Ads." -> "BEON runs your Google Search Ads."
      - Page title meta updated to match
      - Done-For-You tagline updated: "A dedicated BEON account manager..." -> "BEON, plus a dedicated account manager..."
      - Removed 'live' text label from demo chat header (dot indicator retained)
      - Ad scene weighting increased to 70% (stats 15%, trend 15%)
    v6.1.0 (May 13, 2026) - Sprint M: Demo section UI polish:
      - Ad dwell time reduced from 22.5s to 2.5s (sceneDuration: 2500)
      - User bubble: green accent -> light gray (rgba(255,255,255,0.08) bg, rgba(255,255,255,0.15) border, rgba(255,255,255,0.85) text)
      - Chat frame height reduced 15% (660px -> 561px, mobile 600px -> 510px)
      - Demo frame outer border: rgba(255,255,255,0.06) per Card Hierarchy Standard
      - Demo frame inner (header/input) dividers: rgba(255,255,255,0.06) (was same, confirmed)
    v6.0.0 (May 12, 2026) - Sprint M: Interactive product demo section
      - Added "See it work / A live look inside BEON" full-width section
        between hero and pricing
      - 15 industry mock ads inlined (sourced from platform mockAds/index.ts):
        ShoeVault, CloudSync Pro, Bella Cucina, HomeNest Realty, FitZone
        Studios, Sterling Law Group, Azure Coast Resort, Rivera's Auto
        Repair, SkillBridge Academy, BrightSmile Dental, SafeHarbor
        Insurance, ComfortZone HVAC, BiteDash, Luxe & Thread, PawPerfect Vet
      - 3 result types: ad preview (Google SERP recreation), portfolio
        stat strip (8 metrics), spend & revenue trend chart (SVG)
      - Scene loop: type into docked input bar -> send button activates
        green -> press flash -> user bubble -> AI text response -> rich
        result message
      - Weighted shuffle ensures all 3 result types appear evenly across
        the 15-scene cycle
      - Per-industry medium-length prompts (180-260 chars for ad scenes,
        55-70 chars for stat/trend scenes)
      - Variable typing speed (32ms/char ad, 38ms/char stat/trend) and
        scene duration (22s ad, 16s stat/trend)
      - loadMockAds() abstraction prepared for future migration to
        GET /api/public/mock-ads endpoint (see parked backlog)
      - Mobile responsive: stat grid collapses to 2 cols at 900px
    v5.1.0 (May 12, 2026) - Sprint M: Copy refresh
      - Eliminated 6x "platform" references throughout the page
      - Hero h1: "The platform that runs your Google Ads." -> "BEON runs your Google Ads."
      - Hero subtitle: "...refined by the platform." -> "...refined by BEON."
      - Self-Serve tagline: "The platform builds..." -> "BEON builds..."
      - Done-For-You tagline: "...on top of the platform." -> "...end to end for you."
      - Coda h2: "The platform does the work." -> "BEON does the work."
      - Coda button: "Enter the platform" -> "Open BEON"
    v5.0.0 (May 12, 2026) - Sprint M: Single-page redesign + brand alignment:
      - Collapsed 4-page site (home, services, about, contact) to 1 page
      - Removed: contact form, contact details, 4-page nav
      - Added: BEON-compliant editorial layout (DM Sans + JetBrains Mono)
      - Added: pricing section (Self-Serve $29 + 10%, Done-For-You $299 + 10%)
      - Added: text-only animated status indicator in hero
      - Compliant with: BEON UI Design Guidelines (Feb 2026)
    v4.0.0 (Apr 13, 2026) - Sprint D: Static HTML 4-page version
    v3.0.0 (Nov 04, 2025) - Multi-page HTML structure
    v2.1.0 (Nov 04, 2025) - React SPA (build failures)

  Architecture:
    /opt/beon/frontend/corporate-site/
      |-- Dockerfile
      |-- nginx.conf
      `-- public/
            |-- index.html (this file)
            |-- 404.html
            |-- privacy.html
            |-- terms.html
            `-- beon-favicon.svg
  ===========================================================================
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BEON PIXEL &mdash; BEON runs your Google Search Ads</title>
<meta name="description" content="BEON is a managed Google Ads system for businesses that want results, not a console. Write a brief. Campaigns are built, launched, and refined for you.">
<meta name="theme-color" content="#1a1a1a">
<link rel="icon" type="image/svg+xml" href="/beon-favicon.svg">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<meta property="og:title" content="BEON PIXEL &mdash; BEON runs your Google Ads">
<meta property="og:description" content="A managed Google Ads system for businesses that want results, not a console.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://beonpixel.com">
<style>
/* ===========================================================================
   BEON PIXEL Design System Tokens (per BEON UI Design Guidelines Feb 2026)
   =========================================================================== */
:root {
  --bg-page: #1a1a1a;
  --bg-card: #2a2a2a;
  --bg-hover: rgba(255,255,255,0.04);
  --accent: #10b981;
  --accent-hover: #059669;
  --accent-muted: rgba(16,185,129,0.1);
  --accent-border: rgba(16,185,129,0.3);
  --text-primary: #FFFFFF;
  --text-secondary: rgba(255,255,255,0.7);
  --text-muted: rgba(255,255,255,0.5);
  --border: rgba(255,255,255,0.1);
  --border-hover: rgba(255,255,255,0.2);
  --radius-card: 16px;
  --radius-button: 8px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg-page); color: var(--text-primary); font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
.mono { font-family: 'JetBrains Mono','SF Mono','Menlo',monospace; }

/* NAV */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(26,26,26,0.88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); }
.nav-inner { max-width: 1200px; margin: 0 auto; padding: 22px 48px; display: flex; align-items: center; justify-content: space-between; }
.mark { font-size: 25.35px; font-weight: 600; letter-spacing: 0.5px; color: var(--text-primary); }
.mark .accent { color: var(--accent); }
.signin { font-size: 13px; font-weight: 500; color: var(--text-secondary); letter-spacing: 0.02em; transition: all 0.2s; padding: 9px 20px; border: 1px solid var(--border); border-radius: var(--radius-button); background: transparent; }
.signin:hover { color: var(--accent); border-color: var(--accent); }

/* HERO */
.hero { padding: 140px 48px 140px; max-width: 1200px; margin: 0 auto; position: relative; }
.hero h1 { font-size: 64px; font-weight: 700; line-height: 1.08; letter-spacing: -0.025em; color: var(--text-primary); max-width: 920px; }
.hero h1 .em { font-style: normal; color: var(--accent); }
.hero .sub { margin-top: 32px; max-width: 540px; font-size: 17px; line-height: 1.65; color: var(--text-secondary); }
.live { margin-top: 56px; display: inline-flex; align-items: center; gap: 14px; padding: 12px 18px; border: 1px solid var(--border); border-radius: var(--radius-button); font-family: 'JetBrains Mono','SF Mono','Menlo',monospace; font-size: 12px; color: var(--text-muted); letter-spacing: 0.06em; background: rgba(255,255,255,0.02); }
.live .label { text-transform: uppercase; }
.live .typed { color: var(--accent); min-width: 200px; display: inline-block; }
.live .typed::after { content: '_'; opacity: 0.6; animation: blink 1s steps(1) infinite; color: var(--accent); }
@keyframes blink { 50% { opacity: 0; } }

.rule { max-width: 1104px; margin: 0 auto; height: 1px; background: rgba(255,255,255,0.06); }

/* PRICING */
.pricing-section { padding: 120px 48px; max-width: 1200px; margin: 0 auto; text-align: center; }
.pricing-eyebrow { font-family: 'JetBrains Mono','SF Mono','Menlo',monospace; font-size: 12px; color: var(--accent); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 22px; font-weight: 500; }
.pricing-section h2 { font-size: 42px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--text-primary); max-width: 760px; margin: 0 auto 18px; }
.pricing-section h2 .em { color: var(--accent); font-style: normal; }
.pricing-section .lede { font-size: 18px; line-height: 1.7; color: var(--text-secondary); max-width: 520px; margin: 0 auto 56px; }
.pricing-rows { max-width: 1104px; margin: 0 auto; text-align: left; }
.pcard { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 32px 36px; display: grid; grid-template-columns: 240px 1fr; align-items: center; gap: 36px; margin-bottom: 20px; transition: border-color 0.2s; }
.pcard:last-child { margin-bottom: 0; }
.pcard:hover { border-color: var(--border-hover); }
.pcard.feat { border-color: var(--accent-border); }
.pcard.feat:hover { border-color: var(--accent); }
.p-identity { text-align: center; border-right: 1px solid rgba(255,255,255,0.06); padding-right: 36px; }
.p-name { font-size: 24px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.p-badge { display: inline-block; font-family: 'JetBrains Mono','SF Mono','Menlo',monospace; font-size: 10px; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 10px; font-weight: 500; }
.p-tag { font-size: 14px; color: var(--text-muted); line-height: 1.5; margin-bottom: 20px; }
.p-amt { font-size: 44px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.03em; line-height: 1; }
.p-per { font-size: 13px; color: var(--text-muted); font-family: 'JetBrains Mono','SF Mono','Menlo',monospace; margin-top: 4px; }
.p-spend { font-size: 14px; color: var(--text-muted); font-family: 'JetBrains Mono','SF Mono','Menlo',monospace; margin-top: 6px; opacity: 0.7; }
.p-cta { display: flex; align-items: center; justify-content: center; width: 100%; padding: 12px 24px; border: 1px solid rgba(255,255,255,0.3); border-radius: 8px; color: #FFFFFF; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; background: transparent; cursor: pointer; transition: all 0.2s; text-decoration: none; margin-top: 24px; }
.p-cta:hover { color: var(--accent); border-color: var(--accent); }
.p-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.p-group { }
.p-group-label { font-family: 'JetBrains Mono','SF Mono','Menlo',monospace; font-size: 13px; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.06); font-weight: 500; opacity: 0.6; }
.p-group-items { display: flex; flex-direction: column; gap: 10px; }
.p-item { font-size: 15px; color: rgba(255,255,255,0.8); line-height: 1.45; }
.p-item::after { content: none; }
.p-item.grn { color: #FFFFFF; font-weight: 600; }
.p-token { font-size: 12px; color: var(--text-muted); font-style: italic; margin-top: -6px; }
.pricing-note { font-family: 'JetBrains Mono','SF Mono','Menlo',monospace; font-size: 12px; color: var(--text-muted); letter-spacing: 0.04em; margin-top: 40px; max-width: 580px; margin-left: auto; margin-right: auto; line-height: 1.6; text-align: center; }
.pricing-cta-btn { display: inline-flex; align-items: center; gap: 10px; font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 500; color: var(--text-secondary); letter-spacing: 0.02em; padding: 16px 36px; border: 1px solid var(--border); border-radius: var(--radius-button); transition: all 0.2s; background: transparent; text-decoration: none; }
.pricing-cta-btn:hover { color: var(--accent); border-color: var(--accent); background: transparent; }

/* CODA */
.coda { padding: 140px 48px 140px; max-width: 1200px; margin: 0 auto; text-align: center; }
.coda h2 { font-size: 50px; font-weight: 700; line-height: 1.12; letter-spacing: -0.025em; color: var(--text-primary); max-width: 880px; margin: 0 auto 40px; }
.coda h2 .em { color: var(--accent); font-style: normal; }
.coda-btn { display: inline-flex; align-items: center; gap: 12px; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; color: var(--accent); letter-spacing: 0.02em; padding: 14px 28px; border: 1px solid var(--accent); border-radius: var(--radius-button); transition: all 0.2s; background: transparent; }
.coda-btn:hover { background: var(--accent-muted); }

/* FOOTER */
.footer { border-top: 1px solid rgba(255,255,255,0.06); padding: 32px 48px; max-width: 1200px; margin: 0 auto; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--text-muted); }
.footer-inner .markf { color: var(--text-secondary); font-weight: 500; letter-spacing: 0.3px; }
.footer-inner .markf .accent { color: var(--accent); }
.footer-inner a { transition: color 0.15s; }
.footer-inner a:hover { color: var(--text-primary); }
.footer-links { display: flex; gap: 28px; }

/* ===========================================================================
   DEMO SECTION (new in v6.0.0) - "A live look inside BEON"
   =========================================================================== */
.demo-section { padding: 100px 48px 100px; max-width: 1100px; margin: 0 auto; }
.demo-eyebrow { font-family: 'JetBrains Mono','SF Mono','Menlo',monospace; font-size: 12px; color: var(--accent); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 22px; font-weight: 500; }
.demo-section h2 { font-size: 42px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--text-primary); max-width: 760px; margin-bottom: 18px; }
.demo-section h2 .em { color: var(--accent); font-style: normal; }
.demo-section .lede { font-size: 16px; line-height: 1.7; color: var(--text-secondary); max-width: 580px; margin-bottom: 44px; }

/* Chat frame container */
.demo-frame { background: var(--bg-page); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-card); overflow: hidden; height: 561px; display: flex; flex-direction: column; }

/* Chat header */
.demo-head { padding: 14px 22px; border-bottom: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.demo-head .label { font-family: 'JetBrains Mono','SF Mono','Menlo',monospace; font-size: 10px; color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; }
.demo-head .dot { display: flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono','SF Mono','Menlo',monospace; font-size: 10px; color: var(--text-secondary); letter-spacing: 0.06em; }
.demo-head .dot::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; animation: demo-pulse 1.6s ease-in-out infinite; }
@keyframes demo-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Chat body — bottom-anchored, locked height */
.demo-body { flex: 1 1 0; min-height: 0; padding: 24px 28px 16px; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; }

/* Message bubbles */
.demo-msg-user { align-self: flex-end; max-width: 78%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.85); padding: 10px 16px; border-radius: 14px 14px 4px 14px; font-size: 14px; line-height: 1.5; opacity: 0; animation: demo-fade-up 0.4s forwards; }
.demo-msg-ai { align-self: flex-start; max-width: 100%; font-size: 15px; line-height: 1.65; color: rgba(255,255,255,0.92); padding: 4px 0; opacity: 0; animation: demo-fade-up 0.4s forwards; }
.demo-msg-ai .em { font-weight: 600; color: var(--text-primary); }
.demo-typing-cursor { display: inline-block; width: 2px; height: 1em; background: var(--accent); vertical-align: text-bottom; animation: blink 1s steps(1) infinite; margin-left: 2px; }
@keyframes demo-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.demo-msg-result { align-self: flex-start; max-width: 92%; width: 92%; opacity: 0; animation: demo-fade-up 0.5s forwards; }
.demo-msg-result .demo-adpreview { transform: scale(0.82); transform-origin: top left; margin-bottom: -18%; }

/* RESULT TYPE 1: Ad Preview — Rich Google SERP recreation matching platform SearchAdPreview */
.demo-adpreview { background: #FFFFFF; border-radius: 16px; padding: 18px 22px 22px; font-family: arial,sans-serif; }
.demo-adpreview .ad-sponsored { display: inline-block; font-size: 11px; font-weight: 600; color: #202124; background: #f1f3f4; padding: 2px 7px; border-radius: 4px; margin-bottom: 6px; }
.demo-adpreview .ad-urlrow { font-size: 13px; color: #202124; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.demo-adpreview .ad-bizname { font-weight: 600; color: #202124; }
.demo-adpreview .ad-sep { color: #70757a; font-weight: 300; }
.demo-adpreview .ad-url { color: #006621; }
.demo-adpreview .ad-titles { font-size: 18px; font-weight: 400; color: #1a0dab; line-height: 1.3; margin-bottom: 6px; cursor: pointer; }
.demo-adpreview .ad-desc { font-size: 13px; color: #4d5156; line-height: 1.55; margin-bottom: 0; }
.demo-adpreview .ad-divider { border: none; border-top: 1px solid #dadce0; margin: 10px 0; }
.demo-adpreview .ad-callouts { font-size: 12px; color: #4d5156; line-height: 1.6; }
.demo-adpreview .ad-snippet { font-size: 12px; color: #4d5156; margin-top: 5px; line-height: 1.6; }
.demo-adpreview .ad-snippet-hdr { font-weight: 600; color: #202124; }
.demo-adpreview .ad-call { display: flex; align-items: center; gap: 5px; font-size: 13px; color: #1a0dab; font-weight: 500; margin-top: 6px; }
.demo-adpreview .ad-sitelinks { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #dadce0; }
.demo-adpreview .ad-sitelink-item { display: flex; flex-direction: column; gap: 2px; }
.demo-adpreview .ad-sitelink-text { font-size: 13px; color: #1a0dab; font-weight: 400; cursor: pointer; line-height: 1.3; }
.demo-adpreview .ad-sitelink-desc { font-size: 11px; color: #4d5156; line-height: 1.4; }
.demo-adpreview .ad-promo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; padding-top: 8px; border-top: 1px solid #dadce0; }
.demo-adpreview .ad-promo-tag { font-size: 11px; font-weight: 600; color: #202124; padding: 2px 7px; background: #fef7e0; border: 1px solid #f9e6a0; border-radius: 3px; white-space: nowrap; }
.demo-adpreview .ad-promo-text { font-size: 12px; color: #4d5156; }
.demo-adpreview .ad-promo-code { font-size: 11px; color: #1a73e8; font-weight: 600; }

/* RESULT TYPE 2: Portfolio Stat Strip */
.demo-statstrip { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; }
.demo-statstrip-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.demo-statstrip-head .title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.demo-statstrip-head .desc { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.demo-card-tag { font-family: 'JetBrains Mono','SF Mono','Menlo',monospace; font-size: 9px; color: var(--accent); letter-spacing: 0.08em; padding: 2px 7px; background: var(--accent-muted); border: 1px solid var(--accent-border); border-radius: 4px; }
.demo-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.demo-stat-grid.row2 { margin-top: 8px; }
.demo-stat { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); border-radius: 8px; padding: 11px 12px; }
.demo-stat .lbl { font-family: 'JetBrains Mono','SF Mono','Menlo',monospace; font-size: 9px; color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 5px; font-weight: 500; }
.demo-stat .val { font-size: 19px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; line-height: 1; }

/* RESULT TYPE 3: Trend Chart */
.demo-trend { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; }
.demo-trend-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
.demo-trend-head .title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.demo-trend-head .desc { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.demo-trend-legend { display: flex; gap: 14px; font-family: 'JetBrains Mono','SF Mono','Menlo',monospace; font-size: 10px; color: var(--text-muted); margin-bottom: 6px; }
.demo-trend-legend .item { display: flex; align-items: center; gap: 6px; }
.demo-trend-legend .swatch { width: 10px; height: 2px; border-radius: 1px; }
.demo-trend-legend .swatch.revenue { background: var(--accent); }
.demo-trend-legend .swatch.spend { background: #f59e0b; }
.demo-trend-chart { height: 130px; }
.demo-trend-chart svg { width: 100%; height: 100%; }

/* Docked input bar (never moves) */
.demo-input { padding: 14px 20px; border-top: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; background: var(--bg-page); flex-shrink: 0; }
.demo-input-inner { flex: 1; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 24px; padding: 14px 20px; font-size: 14px; font-family: 'DM Sans', sans-serif; min-height: 52px; display: flex; align-items: center; justify-content: space-between; transition: border-color 0.25s ease; gap: 10px; }
.demo-input-inner.active { border-color: var(--accent-border); }
.demo-input-text { color: var(--text-muted); transition: color 0.2s; line-height: 1.4; flex: 1; }
.demo-input-text.typed { color: var(--text-primary); }
.demo-input-cursor { display: inline-block; width: 2px; height: 16px; background: var(--accent); vertical-align: middle; animation: blink 1s steps(1) infinite; margin-left: 2px; }
.demo-input-cursor.hidden { display: none; }
.demo-input-btn { width: 36px; height: 36px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 16px; transition: all 0.25s ease; flex-shrink: 0; }
.demo-input-btn.active { border-color: var(--accent); color: var(--accent); }
.demo-input-btn.pressed { background: var(--accent); color: var(--bg-page); border-color: var(--accent); }

/* RESPONSIVE */
@media (max-width: 900px) {
  .pricing-rows { padding: 0; }
  .pcard { grid-template-columns: 1fr; gap: 20px; padding: 24px 20px; }
  .p-identity { border-right: none; padding-right: 0; border-bottom: 1px solid rgba(255,255,255,0.06); padding-bottom: 20px; }
  .p-features { grid-template-columns: 1fr; gap: 16px; }
  .p-item { white-space: normal; }
  .p-cta { margin-top: 20px; }
  .hero { padding: 80px 28px; }
  .hero h1 { font-size: 38px; }
  .coda { padding: 80px 28px; }
  .coda h2 { font-size: 30px; }
  .pricing-section { padding: 72px 28px; }
  .pricing-section h2 { font-size: 28px; }
  .nav-inner { padding: 18px 28px; }
  .footer { padding: 24px 28px; }
  .live .typed { min-width: 140px; font-size: 11px; }
  .footer-inner { flex-direction: column; gap: 14px; }
  .demo-section { padding: 60px 28px 60px; }
  .demo-section h2 { font-size: 28px; }
  .demo-section .lede { font-size: 15px; margin-bottom: 32px; }
  .demo-frame { height: 510px; }
  .demo-body { padding: 18px 20px; }
  .demo-input { padding: 12px 16px; }
  .demo-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .demo-msg-result { max-width: 100%; width: 100%; }
  .demo-msg-result .demo-adpreview { transform: scale(0.65); transform-origin: top left; margin-bottom: -35%; }
  .demo-adpreview .titles { font-size: 15px; }
}
</style>
</head>
<body>

<nav class="nav">
  <div class="nav-inner">
    <div class="mark">BEON <span class="accent">PIXEL</span></div>
    <a href="https://app.beonpixel.com" class="signin">Sign In</a>
  </div>
</nav>

<header class="hero">
  <h1>BEON <span class="em">runs your Google Search Ads.</span></h1>
  <p class="sub">Write a brief. Campaigns are built, launched, and refined by BEON. The work is automated. The outcomes are yours.</p>
  <div class="live">
    <span class="label">Status</span>
    <span class="typed" id="typed">campaign live</span>
  </div>
</header>

<div class="rule"></div>

<section class="demo-section">
  <div class="demo-eyebrow">See it work</div>
  <h2>A live look <span class="em">inside BEON.</span></h2>
  <p class="lede">Write a brief in plain language. BEON drafts the ad, shows the numbers, charts the trend.</p>

  <div class="demo-frame">
    <div class="demo-head">
      <span class="label">BEON Chat</span>
      <span class="dot"></span>
    </div>
    <div class="demo-body" id="demo-body"></div>
    <div class="demo-input">
      <div class="demo-input-inner" id="demo-input-wrap">
        <span class="demo-input-text" id="demo-input-text">Message BEON...</span><span class="demo-input-cursor hidden" id="demo-input-cursor"></span>
        <div class="demo-input-btn" id="demo-send-btn">&uarr;</div>
      </div>
    </div>
  </div>
</section>

<div class="rule"></div>

<section class="pricing-section">
  <div class="pricing-eyebrow">Pricing</div>
  <h2>Choose how hands-on <span class="em">you want to be.</span></h2>
  <p class="lede">No setup fee. No contract. No retainer.</p>

  <div class="pricing-rows">
    <!-- FREE -->
    <div class="pcard">
      <div class="p-identity">
        <div class="p-name">BEON Free</div>
        <div class="p-tag">No subscription. Pay as you go.</div>
        <div class="p-amt">$0</div>
        <div class="p-per">/ month</div>
        <div class="p-spend">+ 10% ad spend</div>
        <a href="/request.html?plan=free" class="p-cta">Request Access</a>
      </div>
      <div class="p-features">
        <div class="p-group">
          <div class="p-group-label">AI included</div>
          <div class="p-group-items">
            <div class="p-item grn">25K AI tokens free</div>
            <div class="p-token">~5 campaign drafts</div>
            <div class="p-token">Additional tokens available on demand</div>
            <div class="p-item">Basic AI chat</div>
          </div>
        </div>
        <div class="p-group">
          <div class="p-group-label">Campaigns</div>
          <div class="p-group-items">
            <div class="p-item">5 active campaigns</div>
            <div class="p-item">AI-generated drafts</div>
            <div class="p-item">Google Search Ads</div>
            <div class="p-item">Standard targeting</div>
          </div>
        </div>
        <div class="p-group">
          <div class="p-group-label">Insights + support</div>
          <div class="p-group-items">
            <div class="p-item">Analytics dashboard</div>
            <div class="p-item">Campaign overview</div>
            <div class="p-item">In-system ticket support</div>
          </div>
        </div>
      </div>
    </div>

    <!-- PRO -->
    <div class="pcard feat">
      <div class="p-identity">
        <div class="p-name">BEON Pro</div>
        <div class="p-badge">Popular</div>
        <div class="p-tag">You approve, you launch, you optimise.</div>
        <div class="p-amt">$29</div>
        <div class="p-per">/ month</div>
        <div class="p-spend">+ 10% ad spend</div>
        <a href="/request.html?plan=pro" class="p-cta">Request Access</a>
      </div>
      <div class="p-features">
        <div class="p-group">
          <div class="p-group-label">AI included</div>
          <div class="p-group-items">
            <div class="p-item grn">75K tokens / month</div>
            <div class="p-token">~15 campaigns + daily chat</div>
            <div class="p-token">Additional tokens available on demand</div>
            <div class="p-item">Unlimited chat history</div>
            <div class="p-item">AI bid + budget suggestions</div>
          </div>
        </div>
        <div class="p-group">
          <div class="p-group-label">Campaigns</div>
          <div class="p-group-items">
            <div class="p-item">Unlimited campaigns</div>
            <div class="p-item">Advanced targeting</div>
            <div class="p-item">Ad extensions</div>
            <div class="p-item">You approve before launch</div>
          </div>
        </div>
        <div class="p-group">
          <div class="p-group-label">Insights + support</div>
          <div class="p-group-items">
            <div class="p-item">Full analytics dashboard</div>
            <div class="p-item">Performance trend charts</div>
            <div class="p-item">Priority email support</div>
          </div>
        </div>
      </div>
    </div>

    <!-- PLUS -->
    <div class="pcard">
      <div class="p-identity">
        <div class="p-name">BEON Plus</div>
        <div class="p-badge">Recommended</div>
        <div class="p-tag">Fully managed. We run it end to end.</div>
        <div class="p-amt">$299</div>
        <div class="p-per">/ month</div>
        <div class="p-spend">+ 10% ad spend</div>
        <a href="/request.html?plan=plus" class="p-cta">Request Access</a>
      </div>
      <div class="p-features">
        <div class="p-group">
          <div class="p-group-label">AI included</div>
          <div class="p-group-items">
            <div class="p-item grn">200K tokens / month</div>
            <div class="p-token">Full managed operation</div>
            <div class="p-token">Additional tokens available on demand</div>
            <div class="p-item">Performance alerts</div>
            <div class="p-item">Automated A/B testing</div>
          </div>
        </div>
        <div class="p-group">
          <div class="p-group-label">Managed for you</div>
          <div class="p-group-items">
            <div class="p-item">Dedicated account manager</div>
            <div class="p-item">End-to-end campaign operations</div>
            <div class="p-item">Daily optimisation</div>
            <div class="p-item">Strategy + brief writing</div>
            <div class="p-item">Competitor analysis</div>
          </div>
        </div>
        <div class="p-group">
          <div class="p-group-label">Insights + support</div>
          <div class="p-group-items">
            <div class="p-item">First-party pixel + attribution</div>
            <div class="p-item">Custom dashboards</div>
            <div class="p-item">Weekly summaries</div>
            <div class="p-item">Monthly strategy reviews</div>
            <div class="p-item">24-hour SLA</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <p class="pricing-note">Plus 10% of ad spend. No setup, no retainer, no contract.</p>
</section>

<div class="rule"></div>

<section class="coda">
  <h2>BEON does the work. <span class="em">You read the results.</span></h2>
  <a href="https://app.beonpixel.com" class="pricing-cta-btn">Sign In</a>
</section>

<footer class="footer">
  <div class="footer-inner">
    <div class="markf">&copy; 2026 BEON <span class="accent">PIXEL</span></div>
    <div class="footer-links">
      <a href="/privacy.html">Privacy</a>
      <a href="/terms.html">Terms</a>
      <a href="https://app.beonpixel.com">Platform</a>
    </div>
  </div>
</footer>

<script>
/* ===========================================================================
   HERO status indicator (typing + delete cycle)
   =========================================================================== */
(function(){
  var el = document.getElementById('typed');
  if (!el) return;
  var phrases = ['reading brief','drafting copy','bids rebalancing','campaign live','spend protected','optimisation +12%'];
  var i = 0, j = 0, deleting = false;
  function tick() {
    var word = phrases[i];
    if (!deleting) {
      el.textContent = word.slice(0, j+1);
      j++;
      if (j === word.length) { deleting = true; setTimeout(tick, 1800); return; }
    } else {
      el.textContent = word.slice(0, j-1);
      j--;
      if (j === 0) { deleting = false; i = (i + 1) % phrases.length; }
    }
    setTimeout(tick, deleting ? 30 : 60);
  }
  setTimeout(tick, 400);
})();

/* ===========================================================================
   DEMO SCENE LOOP (new in v6.0.0)

   Architecture:
     1. INDUSTRIES — 15 mock-ad data objects, each with:
          { brand, industry, prompts: {ad,stats,trend}, ad, stats, trend }
        (Sourced from platform mockAds/index.ts; kept inline for v1.
         When 2nd channel type added or 90 days from now, migrate to
         GET /api/public/mock-ads via loadMockAds() wrapper below.)

     2. buildSceneQueue() — shuffles industries and assigns one of 3
        result types (ad/stats/trend) per scene, cycling so each type
        appears evenly across the 15-scene loop.

     3. runScene() — orchestrates the 5-phase choreography:
          Phase 1: type prompt into docked input bar
          Phase 2: activate send button (turn green)
          Phase 3: press send (flash green)
          Phase 4: clear input + append user bubble + type AI response
          Phase 5: render rich result message (ad/stats/trend)

     4. Variable timing per result type:
          - ad: 32ms/char typing, 22s scene duration
          - stats/trend: 38ms/char typing, 16s scene duration

   Tear-down between scenes: clearTimers() flushes pending callbacks.
   =========================================================================== */
(function(){

  /* ----- DATA: 15 industries, full mock-ad payloads ----- */
  var INDUSTRIES = [
    {
      brand: 'ShoeVault', industry: 'e-commerce',
      prompts: {
        ad: 'Draft an ad for ShoeVault summer sale. 50% off select running shoes, free shipping nationwide, free returns within 30 days. Target adults 18-54, US-wide. Promo code SUMMER50.',
        stats: 'How is ShoeVault performing this month across all campaigns?',
        trend: 'Show me ShoeVault spend and revenue trend for the last 30 days.'
      },
      ad: {
        titles: 'Summer Sale - 50% Off Running Shoes | Free Shipping on All Orders | Shop Top Brands Today',
        url: 'www.shoevault.com/sale',
        desc: 'Shop our biggest sale of the year. Premium running shoes from top brands with free returns within 30 days. Over 500 styles available.',
        sitelinks: [
          { text: "Men's Shoes", desc: 'Running, training & lifestyle styles' },
          { text: "Women's Shoes", desc: 'Top brands, all sizes in stock' },
          { text: 'Sale Items', desc: 'Up to 50% off selected styles' },
          { text: 'New Arrivals', desc: 'Latest drops from top brands' }
        ],
        call: '(555) 123-4567',
        callouts: 'Free Shipping \u00b7 Easy Returns \u00b7 Price Match',
        promo: { tag: 'Summer Sale', text: '50% off select running shoes', code: 'SUMMER50' }
      },
      stats: { spend: '$18.7K', revenue: '$263.4K', roas: '14.05x', conversions: '186', impressions: '318.9K', clicks: '13.1K', ctr: '4.1%', cpc: '$1.43' },
      trend: { rev: [70,90,85,95,88,92,105,100,115,108,125,130], spend: [12,14,13,18,16,17,19,18,20,19,22,21] }
    },
    {
      brand: 'CloudSync Pro', industry: 'SaaS',
      prompts: {
        ad: 'Build an ad for CloudSync Pro free trial. SaaS collaboration platform, 14-day free trial, no credit card required. Target ops and engineering managers at companies with 50+ employees.',
        stats: 'Quick performance snapshot for CloudSync Pro this month.',
        trend: 'CloudSync Pro spend and revenue trend over the last 30 days.'
      },
      ad: {
        titles: 'CloudSync Pro - Team Collaboration | Start Your Free 14-Day Trial | No Credit Card Required',
        url: 'www.cloudsyncpro.com/trial',
        desc: 'Real-time collaboration for remote teams. Trusted by 10,000+ companies worldwide. SOC 2 certified.',
        sitelinks: [
          { text: 'Pricing Plans', desc: 'Flexible plans for teams of all sizes' },
          { text: 'Enterprise', desc: 'Custom solutions for large organisations' },
          { text: 'Integrations', desc: 'Connects with Slack, Jira, GitHub & more' },
          { text: 'Case Studies', desc: 'See how teams scaled with CloudSync' }
        ],
        call: '(888) 555-0199',
        callouts: 'Free Trial \u00b7 No Credit Card \u00b7 24/7 Support'
      },
      stats: { spend: '$8.2K', revenue: '$94.3K', roas: '11.5x', conversions: '412', impressions: '156K', clicks: '8.4K', ctr: '5.4%', cpc: '$0.98' },
      trend: { rev: [42,55,58,61,68,72,76,80,82,88,90,94], spend: [5,6,5,7,7,7,8,7,8,8,8,8] }
    },
    {
      brand: 'Bella Cucina', industry: 'restaurant',
      prompts: {
        ad: 'Create an ad for Bella Cucina, an Italian restaurant in downtown Chicago. Handmade pasta, wood-fired pizza, award-winning wine list. Open 7 days. Target diners within 8 miles.',
        stats: 'How are reservations performing this month for Bella Cucina?',
        trend: 'Bella Cucina spend and bookings trend over the last 30 days.'
      },
      ad: {
        titles: 'Bella Cucina - Authentic Italian Dining | Reserve Your Table Tonight | Award-Winning Wine List',
        url: 'www.bellacucina.com/menu',
        desc: 'Handmade pasta, wood-fired pizza, and seasonal Italian dishes made with locally sourced ingredients.',
        sitelinks: [
          { text: 'View Menu', desc: 'Pasta, pizza, mains & seasonal specials' },
          { text: 'Reservations', desc: 'Book a table online in seconds' },
          { text: 'Private Events', desc: 'Birthdays, dinners & corporate events' },
          { text: 'Gift Cards', desc: 'The perfect gift for food lovers' }
        ],
        call: '(555) 867-5309',
        callouts: 'Outdoor Seating \u00b7 Private Events \u00b7 Happy Hour 4-6PM'
      },
      stats: { spend: '$1.4K', revenue: '$22.8K', roas: '16.3x', conversions: '94', impressions: '48.2K', clicks: '2.1K', ctr: '4.4%', cpc: '$0.67' },
      trend: { rev: [12,15,18,16,20,22,21,24,23,26,25,28], spend: [1.2,1.3,1.4,1.4,1.5,1.4,1.5,1.5,1.6,1.5,1.6,1.6] }
    },
    {
      brand: 'HomeNest Realty', industry: 'real estate',
      prompts: {
        ad: 'Draft an ad for HomeNest Realty. 2000+ active listings in the metro area, virtual tours available, first-time buyer programs. Target adults 28-55 with home-buying intent.',
        stats: 'Portfolio overview for HomeNest Realty this month.',
        trend: 'Show me HomeNest spend and lead-volume trend over 30 days.'
      },
      ad: {
        titles: 'HomeNest Realty - Find Your Dream Home | New Listings Updated Daily | Virtual Tours Available',
        url: 'www.homeNestrealty.com/listings',
        desc: 'Browse 2,000+ homes for sale in your area. Virtual tours available. Expert agents ready to help you move.',
        sitelinks: [
          { text: 'Browse Listings', desc: '2,000+ homes updated daily' },
          { text: 'Virtual Tours', desc: 'Tour any home from your phone' },
          { text: 'Mortgage Calculator', desc: 'Estimate your monthly payments' },
          { text: 'Sell Your Home', desc: 'Get a free valuation today' }
        ],
        call: '(555) 234-8900',
        callouts: 'Free Home Valuation \u00b7 Virtual Tours \u00b7 Licensed Agents'
      },
      stats: { spend: '$5.6K', revenue: '$84.2K', roas: '15.0x', conversions: '52', impressions: '92K', clicks: '4.1K', ctr: '4.5%', cpc: '$1.37' },
      trend: { rev: [32,38,42,45,52,58,62,68,70,76,80,84], spend: [3.4,3.8,4.0,4.2,4.4,4.6,4.8,5.0,5.2,5.4,5.5,5.6] }
    },
    {
      brand: 'FitZone Studios', industry: 'fitness',
      prompts: {
        ad: 'Build an ad for FitZone Studios. Boutique gym with 50+ weekly classes, no contracts, free 7-day pass. Promo code FITSTART for first 3 months at $19.99/mo. Target adults 22-45 within 10 miles.',
        stats: 'How is FitZone performing this month? Show key metrics.',
        trend: 'FitZone Studios revenue and ad spend trend, last 30 days.'
      },
      ad: {
        titles: 'FitZone Studios - Join Today | Get Your Free 7-Day Pass | 50+ Classes Per Week',
        url: 'www.fitzonestudios.com/join',
        desc: 'State-of-the-art equipment, 50+ weekly classes, and certified personal trainers. No long-term contracts.',
        sitelinks: [
          { text: 'Class Schedule', desc: '50+ weekly classes, all levels welcome' },
          { text: 'Membership', desc: 'No contract, cancel anytime' },
          { text: 'Personal Training', desc: 'Certified trainers, tailored plans' },
          { text: 'Find a Location', desc: 'Multiple locations near you' }
        ],
        call: '(555) 456-7890',
        callouts: 'Free 7-Day Pass \u00b7 No Contract \u00b7 Open Early & Late',
        promo: { tag: 'New Year', text: 'First 3 months at $19.99/mo', code: 'FITSTART' }
      },
      stats: { spend: '$2.1K', revenue: '$28.4K', roas: '13.5x', conversions: '142', impressions: '64K', clicks: '3.2K', ctr: '5.0%', cpc: '$0.66' },
      trend: { rev: [14,17,19,22,21,24,25,26,27,26,28,28], spend: [1.6,1.7,1.7,1.8,1.9,1.9,2.0,2.0,2.0,2.1,2.1,2.1] }
    },
    {
      brand: 'Sterling Law Group', industry: 'legal',
      prompts: {
        ad: 'Draft an ad for Sterling Law Group. Personal injury, family law, and business litigation. 25+ years experience, free consultation, no fee unless we win. Target adults 30-65 with injury claim intent.',
        stats: 'Quick overview of Sterling Law Group performance this month.',
        trend: 'Show me Sterling Law Group spend and lead trend over 30 days.'
      },
      ad: {
        titles: 'Sterling Law Group - Free Consultation | Experienced Attorneys Near You | No Fee Unless We Win',
        url: 'www.sterlinglawgroup.com/consult',
        desc: 'Personal injury, family law, and business litigation. Over 25 years of experience. No fee unless we win.',
        sitelinks: [
          { text: 'Practice Areas', desc: 'Personal injury, family & business law' },
          { text: 'Free Consultation', desc: 'Speak to an attorney today' },
          { text: 'Client Reviews', desc: '500+ five-star reviews' },
          { text: 'Our Attorneys', desc: 'Meet our experienced legal team' }
        ],
        call: '(555) 789-0123',
        callouts: 'Free Consultation \u00b7 No Win No Fee \u00b7 25+ Years'
      },
      stats: { spend: '$4.8K', revenue: '$72.6K', roas: '15.1x', conversions: '38', impressions: '52K', clicks: '2.4K', ctr: '4.6%', cpc: '$2.00' },
      trend: { rev: [28,34,38,42,48,52,56,60,64,68,70,72], spend: [3.2,3.4,3.6,3.8,4.0,4.2,4.4,4.5,4.6,4.7,4.8,4.8] }
    },
    {
      brand: 'Azure Coast Resort', industry: 'travel',
      prompts: {
        ad: 'Create an ad for Azure Coast Resort, an oceanfront luxury resort. Rooms from $199/night, all-inclusive packages available, kids stay free. Promo code SPRING25 for 25% off 3+ night stays.',
        stats: 'Azure Coast Resort portfolio snapshot for this month.',
        trend: 'Resort spend and revenue trend over the last 30 days.'
      },
      ad: {
        titles: 'Azure Coast Resort - Book Direct & Save | Oceanfront Luxury from $199/Night | All-Inclusive Packages',
        url: 'www.azurecoastresort.com/book',
        desc: 'Wake up to ocean views. Private beach, infinity pool, spa, and farm-to-table dining. Book direct for best rates.',
        sitelinks: [
          { text: 'Room Types', desc: 'Ocean view, suite & villa options' },
          { text: 'All-Inclusive Packages', desc: 'Meals, spa & activities included' },
          { text: 'Spa & Wellness', desc: 'Full-service spa & infinity pool' },
          { text: 'Photo Gallery', desc: 'See the resort before you book' }
        ],
        call: '(555) 321-6543',
        callouts: 'Book Direct & Save \u00b7 Free Cancellation \u00b7 Kids Stay Free',
        promo: { tag: 'Spring', text: '25% off 3+ night stays', code: 'SPRING25' }
      },
      stats: { spend: '$12.4K', revenue: '$186.2K', roas: '15.0x', conversions: '224', impressions: '218K', clicks: '9.6K', ctr: '4.4%', cpc: '$1.29' },
      trend: { rev: [82,96,108,112,124,132,142,150,162,168,178,186], spend: [6.4,7.2,8.0,8.6,9.4,10.0,10.6,11.2,11.6,12.0,12.2,12.4] }
    },
    {
      brand: "Rivera's Auto Repair", industry: 'automotive',
      prompts: {
        ad: "Draft an ad for Rivera's Auto Repair, a family-owned shop in San Antonio and Austin. Brake repair, oil changes, engine diagnostics, and detailing. Target male vehicle owners 25-64. $20 off first service, code FIRST20.",
        stats: "How are Rivera's Auto Repair campaigns performing this month?",
        trend: "Rivera's Auto Repair spend and revenue trend over 30 days."
      },
      ad: {
        titles: "Rivera's Auto Repair - Family Owned | Brake, Oil, Diagnostics & Detailing | San Antonio & Austin",
        url: 'www.riverasauto.com/services',
        desc: 'Brake repair, oil changes, engine diagnostics, and premium car detailing. Family-owned and trusted across San Antonio and Austin since 2008.',
        sitelinks: [
          { text: 'Brake Repair', desc: 'Pads, rotors & full brake service' },
          { text: 'Oil Change', desc: 'Conventional & synthetic, same day' },
          { text: 'Diagnostics', desc: 'Engine light & full system scan' },
          { text: 'Detailing', desc: 'Premium interior & exterior detail' }
        ],
        call: '(210) 555-7766',
        callouts: 'Family Owned \u00b7 Two Locations \u00b7 Same-Day Service',
        snippet: { header: 'Services', values: ['Brake Repair', 'Oil Change', 'Engine Diagnostics', 'Car Detailing', 'Tire Rotation'] },
        promo: { tag: 'New Customers', text: '$20 off first service', code: 'FIRST20' }
      },
      stats: { spend: '$3.4K', revenue: '$48.6K', roas: '14.3x', conversions: '92', impressions: '64K', clicks: '3.1K', ctr: '4.8%', cpc: '$1.10' },
      trend: { rev: [22,26,30,32,36,38,40,42,44,46,47,48], spend: [1.8,2.0,2.2,2.4,2.6,2.8,3.0,3.1,3.2,3.3,3.4,3.4] }
    },
    {
      brand: 'SkillBridge Academy', industry: 'education',
      prompts: {
        ad: 'Build an ad for SkillBridge Academy online courses. 200+ topics in data science, design, and marketing. Courses from $29, self-paced, recognized certificates. Target adults 22-45 with career upskilling intent.',
        stats: 'SkillBridge Academy performance overview this month.',
        trend: 'Show SkillBridge spend and enrollment trend, last 30 days.'
      },
      ad: {
        titles: 'SkillBridge Academy - Learn New Skills | Enroll Today - Courses from $29 | Earn Recognized Certificates',
        url: 'www.skillbridgeacademy.com/courses',
        desc: 'Master in-demand skills with expert-led courses. Data science, design, marketing, and 200+ topics.',
        sitelinks: [
          { text: 'Browse Courses', desc: '200+ topics across all skill levels' },
          { text: 'Certificates', desc: 'Recognised by top employers' },
          { text: 'Business Plans', desc: 'Team licensing from $99/mo' },
          { text: 'Free Courses', desc: 'Start learning at no cost today' }
        ],
        call: '(888) 555-0234',
        callouts: 'Certificates Included \u00b7 Self-Paced \u00b7 Money-Back Guarantee'
      },
      stats: { spend: '$6.4K', revenue: '$92.8K', roas: '14.5x', conversions: '648', impressions: '142K', clicks: '8.2K', ctr: '5.8%', cpc: '$0.78' },
      trend: { rev: [38,44,52,58,64,70,76,82,86,90,91,93], spend: [3.4,3.8,4.2,4.6,5.0,5.4,5.6,5.8,6.0,6.2,6.3,6.4] }
    },
    {
      brand: 'BrightSmile Dental', industry: 'healthcare',
      prompts: {
        ad: 'Draft an ad for BrightSmile Dental, a family practice accepting new patients. Cleanings, whitening, implants, and cosmetic dentistry. Same-day emergency available. Target families within 10 miles of the clinic.',
        stats: 'BrightSmile Dental campaign overview this month.',
        trend: 'BrightSmile Dental spend and new-patient trend, last 30 days.'
      },
      ad: {
        titles: 'BrightSmile Dental - New Patient Special | Book Your Appointment Online | Most Insurance Accepted',
        url: 'www.brightsmiledental.com/book',
        desc: 'Comprehensive dental care for the whole family. Cleanings, whitening, implants, and cosmetic dentistry.',
        sitelinks: [
          { text: 'Our Services', desc: 'Cleanings, whitening, implants & more' },
          { text: 'Book Online', desc: 'Same-day & next-day appointments' },
          { text: 'Insurance', desc: 'Most major plans accepted' },
          { text: 'Patient Reviews', desc: '4.9 stars across 600+ reviews' }
        ],
        call: '(555) 987-6543',
        callouts: 'New Patient Special \u00b7 Same-Day Emergency \u00b7 Most Insurance Accepted'
      },
      stats: { spend: '$2.4K', revenue: '$31.8K', roas: '13.2x', conversions: '47', impressions: '84.2K', clicks: '3.7K', ctr: '4.4%', cpc: '$0.64' },
      trend: { rev: [16,19,22,24,26,28,29,30,30,31,31,32], spend: [1.4,1.6,1.7,1.8,1.9,2.0,2.1,2.2,2.3,2.3,2.4,2.4] }
    },
    {
      brand: 'SafeHarbor Insurance', industry: 'insurance',
      prompts: {
        ad: 'Build an ad for SafeHarbor Insurance, an independent broker comparing rates from top carriers. Auto, home, life, and business coverage. Bundle discounts up to 35%. Target adults 25-65 nationwide.',
        stats: 'How is SafeHarbor performing across all campaigns this month?',
        trend: 'SafeHarbor Insurance spend and quote-volume trend, last 30 days.'
      },
      ad: {
        titles: 'SafeHarbor Insurance - Get a Free Quote | Save Up to 35% on Coverage | Trusted by 2M+ Customers',
        url: 'www.safeharborinsurance.com/quote',
        desc: 'Compare rates from top carriers in minutes. Auto, home, life, and business insurance \u2014 all in one place.',
        sitelinks: [
          { text: 'Auto Insurance', desc: 'Compare rates from top carriers' },
          { text: 'Home Insurance', desc: 'Protect your home & belongings' },
          { text: 'Life Insurance', desc: 'Term & whole life coverage options' },
          { text: 'Business Coverage', desc: 'Liability, property & more' }
        ],
        call: '(800) 555-0147',
        callouts: 'Free Quotes \u00b7 Bundle & Save \u00b7 24/7 Claims Support'
      },
      stats: { spend: '$11.2K', revenue: '$168K', roas: '15.0x', conversions: '342', impressions: '212K', clicks: '9.8K', ctr: '4.6%', cpc: '$1.14' },
      trend: { rev: [88,102,112,120,128,138,144,150,156,162,166,168], spend: [6.0,6.8,7.4,8.0,8.6,9.2,9.6,10.0,10.4,10.8,11.0,11.2] }
    },
    {
      brand: 'ComfortZone HVAC', industry: 'home services',
      prompts: {
        ad: 'Create an ad for ComfortZone HVAC, a family-owned heating and cooling company. Same-day service, licensed and insured, free in-home estimates, financing available. Target homeowners within 15 miles.',
        stats: 'ComfortZone HVAC monthly performance snapshot.',
        trend: 'ComfortZone HVAC spend and service-call trend, last 30 days.'
      },
      ad: {
        titles: 'ComfortZone HVAC - Licensed & Insured | Same-Day Service Available | Free In-Home Estimates',
        url: 'www.comfortzonehvac.com/services',
        desc: 'Heating, cooling, and air quality experts. Emergency repairs, new installations, and maintenance plans.',
        sitelinks: [
          { text: 'AC Repair', desc: 'Same-day cooling repairs available' },
          { text: 'Heating Services', desc: 'Furnace, heat pump & boiler repair' },
          { text: 'Maintenance Plans', desc: 'Annual tune-ups from $99/year' },
          { text: 'Financing', desc: '0% interest, 12-month plans available' }
        ],
        call: '(555) 444-2222',
        callouts: 'Same-Day Service \u00b7 Licensed & Insured \u00b7 100% Guarantee'
      },
      stats: { spend: '$3.8K', revenue: '$54.6K', roas: '14.4x', conversions: '78', impressions: '68K', clicks: '3.4K', ctr: '5.0%', cpc: '$1.12' },
      trend: { rev: [24,28,32,36,38,42,46,48,50,52,53,55], spend: [2.0,2.4,2.6,2.8,3.0,3.2,3.4,3.5,3.6,3.7,3.8,3.8] }
    },
    {
      brand: 'BiteDash', industry: 'food delivery',
      prompts: {
        ad: 'Draft an ad for BiteDash food delivery app. 5,000+ restaurants, average 28-minute delivery, real-time tracking, $0 delivery fee on first order. Target adults 22-45 in major US metros.',
        stats: 'How is BiteDash performing across all app campaigns this month?',
        trend: 'BiteDash app spend and order-volume trend, last 30 days.'
      },
      ad: {
        titles: 'BiteDash - Food Delivered Fast | Order Now - $0 Delivery Fee | Download the App Today',
        url: 'www.bitedash.com/order',
        desc: 'Craving something delicious? Order from 5,000+ local restaurants. Average delivery time: 28 minutes.',
        sitelinks: [
          { text: 'Order Now', desc: 'Food delivered in 28 minutes avg.' },
          { text: 'Restaurants Near Me', desc: '5,000+ local options to choose from' },
          { text: 'Top Rated', desc: 'Curated picks with 4.5+ ratings' },
          { text: 'Daily Deals', desc: 'Exclusive discounts updated daily' }
        ],
        callouts: '$0 Delivery Fee \u00b7 Real-Time Tracking \u00b7 5,000+ Restaurants',
        promo: { tag: 'First Order', text: '$10 off your first order of $25+', code: 'WELCOME10' }
      },
      stats: { spend: '$3.6K', revenue: '$48.2K', roas: '13.4x', conversions: '1247', impressions: '124K', clicks: '5.8K', ctr: '4.7%', cpc: '$0.62' },
      trend: { rev: [22,28,32,34,38,42,44,46,47,48,48,48], spend: [2.0,2.4,2.6,2.8,3.0,3.2,3.3,3.4,3.5,3.6,3.6,3.6] }
    },
    {
      brand: 'Luxe & Thread', industry: 'fashion',
      prompts: {
        ad: 'Build an ad for Luxe & Thread designer fashion. New collection for women and men, sustainable fabrics, sizes XS-3XL. Free express shipping over $75, 60-day returns. Promo EXTRA30 for 30% off sale.',
        stats: 'Luxe & Thread campaign overview this month.',
        trend: 'Show Luxe & Thread spend and revenue trend, last 30 days.'
      },
      ad: {
        titles: 'Luxe & Thread - Designer Fashion | New Collection Just Dropped | Free Express Shipping Over $75',
        url: 'www.luxeandthread.com/new',
        desc: 'Curated designer fashion for women and men. Sustainable fabrics, timeless designs, and sizes XS-3XL.',
        sitelinks: [
          { text: "Women's Collection", desc: 'New season styles, sizes XS-3XL' },
          { text: "Men's Collection", desc: 'Tailored & casual, premium fabrics' },
          { text: 'Sale', desc: 'Up to 60% off past season styles' },
          { text: 'Gift Cards', desc: 'Give the gift of great style' }
        ],
        callouts: 'Free Express Shipping \u00b7 60-Day Returns \u00b7 Sustainable Fabrics',
        promo: { tag: 'End of Season', text: 'Extra 30% off sale items', code: 'EXTRA30' }
      },
      stats: { spend: '$7.2K', revenue: '$108K', roas: '15.0x', conversions: '286', impressions: '162K', clicks: '7.6K', ctr: '4.7%', cpc: '$0.95' },
      trend: { rev: [52,62,72,80,86,94,98,102,104,106,107,108], spend: [3.6,4.2,4.8,5.2,5.6,6.0,6.4,6.6,6.8,7.0,7.1,7.2] }
    },
    {
      brand: 'PawPerfect Vet', industry: 'pet services',
      prompts: {
        ad: "Draft an ad for PawPerfect Vet, a full-service veterinary clinic for dogs, cats, and exotic pets. Wellness exams, surgery, dental, boarding. Fear-free certified, Saturday hours. Target pet owners within 5 miles.",
        stats: 'PawPerfect Vet performance summary this month.',
        trend: 'PawPerfect Vet spend and appointment trend, last 30 days.'
      },
      ad: {
        titles: "PawPerfect Vet - Compassionate Care | Book Your Pet's Appointment | Emergency Visits Welcome",
        url: 'www.pawperfectvet.com/book',
        desc: 'Full-service veterinary clinic for dogs, cats, and exotic pets. Wellness exams, surgery, dental, and boarding.',
        sitelinks: [
          { text: 'Book Appointment', desc: 'Online booking, same-day available' },
          { text: 'Our Services', desc: 'Exams, surgery, dental & boarding' },
          { text: 'Online Pharmacy', desc: 'Prescriptions delivered to your door' },
          { text: 'Emergency Care', desc: 'Urgent visits welcome, call first' }
        ],
        call: '(555) 738-2255',
        callouts: 'Fear-Free Certified \u00b7 Online Pharmacy \u00b7 Saturday Hours'
      },
      stats: { spend: '$1.8K', revenue: '$24.3K', roas: '13.5x', conversions: '38', impressions: '52.1K', clicks: '2.4K', ctr: '4.6%', cpc: '$0.75' },
      trend: { rev: [13,15,17,18,20,21,22,23,23,24,24,24], spend: [1.0,1.2,1.3,1.4,1.5,1.6,1.6,1.7,1.7,1.8,1.8,1.8] }
    }
  ];

  /* ----- loadMockAds() abstraction for future API migration -----
     v6.0.0: returns inline INDUSTRIES array synchronously, wrapped
     in Promise.resolve so call-site stays unchanged when migrated to
     GET /api/public/mock-ads in future.
  */
  function loadMockAds() {
    return Promise.resolve(INDUSTRIES);
    // FUTURE: replace above line with:
    // return fetch('https://app.beonpixel.com/api/public/mock-ads')
    //   .then(function(r){ return r.json(); })
    //   .catch(function(){ return INDUSTRIES; });
  }

  /* ----- AI response copy pools ----- */
  var RESPONSE_POOLS = {
    ad: [
      '<span class="em">__BRAND__</span> campaign is ready. Review and launch in one click:',
      'Done. <span class="em">__BRAND__</span> is set to go live. One click to launch:',
      '<span class="em">__BRAND__</span> is ready to run. Review your campaign below:',
      'Campaign built for <span class="em">__BRAND__</span>. Approve and it goes live instantly:',
      'Your <span class="em">__BRAND__</span> campaign is configured and ready to launch:'
    ],
    stats: [
      '<span class="em">__BRAND__</span> portfolio snapshot:',
      'Here\u2019s where __BRAND__ stands this month:',
      'Quick overview for <span class="em">__BRAND__</span>:'
    ],
    trend: [
      '<span class="em">__BRAND__</span> revenue and spend trend:',
      'Last 30 days for <span class="em">__BRAND__</span>:',
      '__BRAND__ trending up. Here\u2019s the chart:'
    ]
  };

  function pick(arr) { return arr[Math.floor(Math.random() * arr.length)]; }

  /* ----- Scene queue: shuffle industries, 100% ad only ----- */
  function buildSceneQueue(ads) {
    var pool = ads.slice().sort(function(){ return Math.random() - 0.5; });
    var queue = pool.map(function(ind){
      return { industry: ind, type: 'ad' };
    });
    return queue.sort(function(){ return Math.random() - 0.5; });
  }

  /* ----- DOM refs ----- */
  var bodyEl = document.getElementById('demo-body');
  var inputWrap = document.getElementById('demo-input-wrap');
  var inputText = document.getElementById('demo-input-text');
  var inputCursor = document.getElementById('demo-input-cursor');
  var sendBtn = document.getElementById('demo-send-btn');
  if (!bodyEl || !inputWrap || !inputText || !inputCursor || !sendBtn) return;

  /* ----- Timer mgmt ----- */
  var typingTimers = [], scheduleTimers = [];
  function clearTimers() {
    typingTimers.forEach(function(t){ clearTimeout(t); });
    scheduleTimers.forEach(function(t){ clearTimeout(t); });
    typingTimers = []; scheduleTimers = [];
  }

  /* ----- buildPartialHTML: type HTML w/ inline tags character-by-character ----- */
  function buildPartialHTML(html, plainCharsTarget) {
    var result = '', plainCount = 0, inTag = false;
    for (var k = 0; k < html.length; k++) {
      var c = html[k];
      if (c === '<') { inTag = true; result += c; continue; }
      if (c === '>') { inTag = false; result += c; continue; }
      if (inTag) { result += c; continue; }
      if (plainCount < plainCharsTarget) { result += c; plainCount++; }
      else { break; }
    }
    return result;
  }

  function typeHTML(el, html, speed, done) {
    var temp = document.createElement('div');
    temp.innerHTML = html;
    var plainText = temp.textContent || temp.innerText || '';
    var i = 0;
    function tick() {
      if (i < plainText.length) {
        i++;
        el.innerHTML = buildPartialHTML(html, i) + '<span class="demo-typing-cursor"></span>';
        var t = setTimeout(tick, speed + Math.random() * 8);
        typingTimers.push(t);
      } else {
        el.innerHTML = html;
        if (done) done();
      }
    }
    tick();
  }

  function typeIntoInput(text, speed, done) {
    inputText.classList.add('typed');
    inputText.textContent = '';
    inputCursor.classList.remove('hidden');
    var i = 0;
    function tick() {
      if (i < text.length) {
        inputText.textContent = text.slice(0, i + 1);
        i++;
        var t = setTimeout(tick, speed + Math.random() * 20);
        typingTimers.push(t);
      } else if (done) done();
    }
    tick();
  }

  function resetInput() {
    inputText.classList.remove('typed');
    inputText.textContent = 'Message BEON...';
    inputCursor.classList.add('hidden');
    inputWrap.classList.remove('active');
    sendBtn.classList.remove('active', 'pressed');
  }
  function activateSend() { inputWrap.classList.add('active'); sendBtn.classList.add('active'); }
  function pressSend(done) {
    sendBtn.classList.remove('active');
    sendBtn.classList.add('pressed');
    var t = setTimeout(function(){ sendBtn.classList.remove('pressed'); if (done) done(); }, 220);
    scheduleTimers.push(t);
  }

  function appendUserBubble(text) {
    var m = document.createElement('div');
    m.className = 'demo-msg-user';
    m.textContent = text;
    bodyEl.appendChild(m);
  }
  function appendAIBubble(html, done) {
    var m = document.createElement('div');
    m.className = 'demo-msg-ai';
    bodyEl.appendChild(m);
    typeHTML(m, html, 14, done);
  }

  /* ----- escapeHtml helper ----- */
  function escapeHtml(s) {
    return String(s).replace(/[&<>"']/g, function(c){
      return { '&':'&amp;', '<':'&lt;', '>':'&gt;', '"':'&quot;', "'":'&#39;' }[c];
    });
  }

  /* ----- RESULT RENDERERS ----- */
  function renderAdPreview(industry) {
    var a = industry.ad;
    var wrap = document.createElement('div');
    wrap.className = 'demo-msg-result';

    // Parse domain from URL
    var domain = a.url.replace(/^https?:\/\//,'').split('/')[0];
    var urlPath = a.url.indexOf('/') > -1 ? a.url.substring(a.url.indexOf('/')) : '';

    // URL row: brand name | domain/path
    var urlRowHTML =
      '<div class="ad-urlrow">' +
        '<span class="ad-bizname">' + escapeHtml(industry.brand) + '</span>' +
        '<span class="ad-sep">|</span>' +
        '<span class="ad-url">' + escapeHtml(domain + urlPath) + '</span>' +
      '</div>';

    // Titles: split on ' | ' for line breaks on long headlines
    var titlesHTML = '<div class="ad-titles">' + escapeHtml(a.titles) + '</div>';

    // Desc
    var descHTML = '<div class="ad-desc">' + escapeHtml(a.desc) + '</div>';

    // Divider + extensions block
    var extHTML = '<hr class="ad-divider">';

    // Callouts
    if (a.callouts) {
      extHTML += '<div class="ad-callouts">' + escapeHtml(a.callouts) + '</div>';
    }

    // Structured snippet
    if (a.snippet) {
      extHTML += '<div class="ad-snippet"><span class="ad-snippet-hdr">' +
        escapeHtml(a.snippet.header) + ':</span> ' +
        a.snippet.values.map(escapeHtml).join(', ') + '</div>';
    }

    // Call extension with phone SVG icon
    if (a.call) {
      extHTML += '<div class="ad-call">' +
        '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#1a0dab" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">' +
          '<path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 015.19 12.82 19.79 19.79 0 012.12 4.15 2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/>' +
        '</svg>' +
        escapeHtml(a.call) +
      '</div>';
    }

    // Sitelinks grid — 4 columns with descriptions where available
    if (a.sitelinks && a.sitelinks.length > 0) {
      // Each sitelink entry can be a string or { text, desc } object
      var slHTML = '<div class="ad-sitelinks">';
      a.sitelinks.forEach(function(sl) {
        var text = typeof sl === 'string' ? sl : (sl.text || sl.linkText || sl);
        var desc = typeof sl === 'object' ? (sl.desc || sl.description1 || '') : '';
        slHTML += '<div class="ad-sitelink-item">' +
          '<div class="ad-sitelink-text">' + escapeHtml(text) + '</div>' +
          (desc ? '<div class="ad-sitelink-desc">' + escapeHtml(desc) + '</div>' : '') +
        '</div>';
      });
      slHTML += '</div>';
      extHTML += slHTML;
    }

    // Promo extension
    if (a.promo) {
      extHTML += '<div class="ad-promo">' +
        '<span class="ad-promo-tag">' + escapeHtml(a.promo.tag) + '</span>' +
        '<span class="ad-promo-text">' + escapeHtml(a.promo.text) + '</span>' +
        (a.promo.code ? '<span class="ad-promo-code">Code: ' + escapeHtml(a.promo.code) + '</span>' : '') +
      '</div>';
    }

    wrap.innerHTML =
      '<div class="demo-adpreview">' +
        '<div class="ad-sponsored">Sponsored</div>' +
        urlRowHTML +
        titlesHTML +
        descHTML +
        extHTML +
      '</div>';

    bodyEl.appendChild(wrap);
  }

  function statCell(lbl, val) {
    return '<div class="demo-stat"><div class="lbl">' + escapeHtml(lbl) + '</div>' +
      '<div class="val">' + escapeHtml(val) + '</div></div>';
  }
  function renderStatStrip(industry) {
    var p = industry.stats;
    var wrap = document.createElement('div');
    wrap.className = 'demo-msg-result';
    wrap.innerHTML =
      '<div class="demo-statstrip">' +
        '<div class="demo-statstrip-head">' +
          '<div><div class="title">Portfolio overview</div>' +
          '<div class="desc">Aggregate spend, revenue, and key metrics for ' + escapeHtml(industry.brand) + '</div></div>' +
          '<span class="demo-card-tag">live</span>' +
        '</div>' +
        '<div class="demo-stat-grid">' +
          statCell('Total spend', p.spend) + statCell('Revenue', p.revenue) +
          statCell('ROAS', p.roas) + statCell('Conversions', p.conversions) +
        '</div>' +
        '<div class="demo-stat-grid row2">' +
          statCell('Impressions', p.impressions) + statCell('Clicks', p.clicks) +
          statCell('CTR', p.ctr) + statCell('Avg CPC', p.cpc) +
        '</div>' +
      '</div>';
    bodyEl.appendChild(wrap);
  }

  function pointsToPath(arr, max, w, h) {
    return arr.map(function(v, i){
      var x = (i / (arr.length - 1)) * w;
      var y = h - (v / max) * h * 0.85;
      return (i === 0 ? 'M ' : 'L ') + x.toFixed(1) + ',' + y.toFixed(1);
    }).join(' ');
  }
  function renderTrendChart(industry) {
    var t = industry.trend;
    var max = Math.max.apply(null, t.rev.concat(t.spend));
    var rPath = pointsToPath(t.rev, max, 100, 100);
    var sPath = pointsToPath(t.spend, max, 100, 100);
    var wrap = document.createElement('div');
    wrap.className = 'demo-msg-result';
    wrap.innerHTML =
      '<div class="demo-trend">' +
        '<div class="demo-trend-head">' +
          '<div><div class="title">Spend &amp; revenue trend</div>' +
          '<div class="desc">Last 30 days, ' + escapeHtml(industry.brand) + '</div></div>' +
          '<span class="demo-card-tag">live</span>' +
        '</div>' +
        '<div class="demo-trend-legend">' +
          '<span class="item"><span class="swatch revenue"></span>Revenue</span>' +
          '<span class="item"><span class="swatch spend"></span>Spend</span>' +
        '</div>' +
        '<div class="demo-trend-chart">' +
          '<svg viewBox="0 0 100 100" preserveAspectRatio="none">' +
            '<path d="' + rPath + ' L 100,100 L 0,100 Z" fill="rgba(16,185,129,0.15)" />' +
            '<path d="' + rPath + '" stroke="#10b981" stroke-width="0.8" fill="none" stroke-linejoin="round" />' +
            '<path d="' + sPath + '" stroke="#f59e0b" stroke-width="0.8" fill="none" stroke-linejoin="round" />' +
          '</svg>' +
        '</div>' +
      '</div>';
    bodyEl.appendChild(wrap);
  }

  /* ----- SCENE LOOP ----- */
  var sceneQueue, queueIdx = 0;

  function advanceScene() {
    queueIdx++;
    if (queueIdx >= sceneQueue.length) {
      sceneQueue = buildSceneQueue(INDUSTRIES);
      queueIdx = 0;
    }
    clearTimers();
    runScene();
  }

  function runScene() {
    bodyEl.innerHTML = '';
    resetInput();
    var scene = sceneQueue[queueIdx];
    var ind = scene.industry;
    var type = scene.type;
    var prompt = ind.prompts[type];
    var aiResponse = pick(RESPONSE_POOLS[type]).replace(/__BRAND__/g, ind.brand);
    var typingSpeed = type === 'ad' ? 32 : 38;
    // Dwell after rich result appears before advancing to next scene
    var dwellAfterResult = type === 'ad' ? 2500 : 3500;

    var t1 = setTimeout(function(){
      typeIntoInput(prompt, typingSpeed, function(){
        var t2 = setTimeout(activateSend, 250);
        scheduleTimers.push(t2);
        var t3 = setTimeout(function(){
          pressSend(function(){
            resetInput();
            appendUserBubble(prompt);
            var t4 = setTimeout(function(){
              appendAIBubble(aiResponse, function(){
                var t5 = setTimeout(function(){
                  if (type === 'ad') renderAdPreview(ind);
                  // Advance to next scene after dwell
                  var tDwell = setTimeout(advanceScene, dwellAfterResult);
                  scheduleTimers.push(tDwell);
                }, 350);
                scheduleTimers.push(t5);
              });
            }, 500);
            scheduleTimers.push(t4);
          });
        }, 850);
        scheduleTimers.push(t3);
      });
    }, 500);
    scheduleTimers.push(t1);
  }

  /* ----- INIT ----- */
  loadMockAds().then(function(ads){
    sceneQueue = buildSceneQueue(ads);
    setTimeout(runScene, 600);
  });
})();
</script>

</body>
</html>