<!--
====================================================================
DECISION LOG
====================================================================

[2026-06-24] Fallback URL paths — DEFERRED, DO NOT REOPEN for SMB launch
  Decision: Do NOT add fallback URL path following (e.g. trying
  /about/, /company/, /company/our-story/ if /about-us/ returns empty).
  Reason: Target market is SMBs using standard website builders
  (Wix, Squarespace, WordPress) which default to /about-us/, /contact/,
  /faq/ — non-standard URL structures are an enterprise edge case
  (e.g. Salesforce). The added runtime cost and complexity is not
  justified for the SMB audience. If it becomes a recurring complaint
  from paying customers, revisit then.

====================================================================
CHANGELOG
====================================================================

v2.4 (2026-07-12)
  - FIX: Missing pages (404) no longer generate ✗ warnings or score
    penalties. Only pages that exist but return unreadable content
    trigger a warning. Pages that simply don't exist are silently
    omitted from the pages analyzed bar and warnings panel.

v2.3 (2026-07-12)
  - DESIGN: Applied Beyond Scale SMB Design System throughout.
    Replaced IBM Plex Mono + neutral palette with DM Serif Display
    headings, Inter body, deep navy (#0F2340), warm white (#F7F5F0),
    slate green (#7AAF8E). All components updated to match design
    system spec (nav bar, hero, cards, buttons, score ring, panels,
    footer). Purple "missing" panel replaced with navy treatment.
    Score colors updated: green #7AAF8E (was #1A9E6E), amber/red
    unchanged. Print stylesheet updated to match.

v2.2 (2026-06-24)
  - FIX: Added URL STRUCTURE RULE to scoring prompt — AI scorer no
    longer penalizes a business for missing standard URL paths if
    equivalent content was found on other successfully fetched pages.
    What matters is content accessibility, not URL structure.
    (Fallback URL path following deferred to longer horizon — edge
    case not worth the runtime cost for SMB target market.)
  - NEW: Added sample-report.html — anonymized audit of a local
    handyman business (fictional "Hometown Handyman Co." in
    Springfield, IL) showing a real AI Invisible result (36/100).
    Deploy alongside index.html on Cloudflare Pages.
  - NEW: Added "See a sample report →" link in the hero section
    of the landing page, linking to /sample-report.html.

v2.1 (2026-06-23)
  - FIX: Changed Facebook Quick Wins URL from /pages/create
    (required login, showing locked content error) to
    /business/pages (public-facing, no login required).
  - UX: Added "(application required)" parenthetical to BBB
    Quick Wins link to set correct expectations (BBB requires
    an application, unlike free instant-claim directories).
  - FEATURE: Suppress Quick Wins panel when AI Findability
    score is above 80 — directory listings are not the gap
    for businesses already dominant in AI search results
    (e.g. HubSpot at 82, Amazon at 95).

v2.0 (2026-06-13)
  - PERFORMANCE: Parallelized AI search scan + 6 page-fetch calls
    (Promise.all) — total runtime ~5min -> ~1min.
  - PERFORMANCE: Reduced per-page max_tokens (1000->800) and
    instructed model to keep page-fetch responses under ~700 words,
    prioritizing pricing/services/contact/trust content.
  - ACCURACY: Switched page fetching from web_search_20250305
    (search-engine snippets) to web_fetch_20250910 (real page
    retrieval). Fixed /pricing/, /services/, /about-us/, /faq/,
    /contact/ all returning empty despite being live, content-rich
    pages. Requires Cloudflare Worker anthropic-beta header to
    include "web-fetch-2025-09-10".
  - RELIABILITY: Added retry-with-backoff (1 retry, 1.5s delay) and
    console error logging for failed page fetches (callProxy now
    surfaces real error bodies / API error types).
  - SCORING: Added temperature: 0 to the scoring call (was unset/
    default) and temperature: 0.2 to search/page-fetch calls to
    reduce run-to-run score variance.
  - SCORING: Added CRITICAL ACCURACY RULE — every cited specific
    (prices, payment methods, certifications, etc.) must be
    traceable to provided content; do not pad with plausible but
    unverified details (e.g. fabricated "Zelle, Venmo" payment
    methods).
  - SCORING: overallScore is no longer an AI-judged number — it is
    now calculated in JS as a simple average of the 7 dimension
    scores. Report shows a note explaining this.
  - TRANSPARENCY: Added SOURCE ATTRIBUTION RULE — every dimension
    note ends with "[Source: ...]" naming which page(s) or AI
    search results the finding came from. Rendered as a styled
    sub-line under each note.
  - DEDUP: AI "gaps" section is now told what's already covered in
    the content-visibility-warnings panel, to avoid restating the
    same crawl issues in two places.
  - FEATURE: "Quick wins" panel — AI identifies absent directory
    listings (Yelp, Angi, Google Business Profile, etc.) from a
    known set and renders one-click claim/signup links.
  - FEATURE: "Download PDF Report" button (window.print() + print
    stylesheet) with a print-only report header (business name,
    type, location, URL, generation date).
  - UI: Removed "~60s to complete" hero stat (no longer accurate /
    not worth promising). Removed placeholder
    "Questions? hello@beyond-scale.com" from footer (no email yet).

v1.1 (2026-06-12) — "Setting up Cloudflare Workers and Pages"
  - DEPLOYMENT: Deployed Cloudflare Worker (API proxy, holds
    ANTHROPIC_API_KEY) + Cloudflare Pages (hosts the tool).
  - Renamed production file to index.html (required for Cloudflare
    Pages to auto-serve at root).
  - Set PROXY_URL to live Worker URL (was placeholder).
  - FIX: Updated model from claude-sonnet-4-20250514 (returning
    not_found_error) to claude-sonnet-4-6.
  - FIX: Increased scoring call max_tokens 1000 -> 4000 — fixed a
    JSON parse error caused by truncated responses.
  - End-to-end deployment confirmed working; flagged as the
    baseline for the performance-optimization work that became v2.0.

v1.0 (2026-06-11) — "AI Website Readiness Audit product concept"
  - Initial concept-to-production build of the AI Visibility Audit
    (Tool 1) under the Beyond Scale brand.
  - Defined product: name "AI Visibility Audit", tagline "Is your
    business invisible to AI?", pricing $47/report, $79 audit+rerun
    bundle, free 30-min AI Readiness consultation as funnel to
    fractional CPTO work.
  - Built the core 7-dimension scoring architecture: Crawlability,
    AI Findability, Service Clarity, Pricing Transparency, Booking &
    Contact, Trust Signals, Service Area (Audience Clarity for
    internet-only businesses).
  - Established multi-page fetch as non-negotiable (homepage-only
    fetch produced materially wrong scores — caught via HandyPros
    pricing subpage test).
  - Built content-visibility-warnings system (JS rendering issues,
    "0+" animated counters, Wix platform warnings, widget
    fingerprinting).
  - Iterated through 3 major widget versions; tested against
    HandyPros Home Services, Flip Side Ninja Park, Beyond Scale
    itself, and one additional business.
  - Architecture decisions: single self-contained HTML file,
    Cloudflare Worker as API proxy, Cloudflare Pages for hosting,
    Gumroad for payment. PROXY_URL left as placeholder pending
    deployment.
  - Packaged the full framework as the beyond-scale-ai-tool-builder
    skill for building future tools (e.g. Tool 2: llms.txt
    Generator).
====================================================================
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>AI Visibility Audit — Is Your Business Invisible to AI?</title>
  <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+Serif+Display&family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      /* Beyond Scale SMB Design System */
      --navy: #0F2340;
      --navy-dark: #1E3A5F;
      --navy-muted: #4A6080;
      --warm-white: #F7F5F0;
      --slate-green: #7AAF8E;
      --pure-white: #FFFFFF;
      --warm-gray: #D6D0C8;
      --light-warm: #E2DDD5;
      --body-text: #374151;
      --muted-text: #6B7280;
      --steel-blue: #B8C4D4;
      --amber: #C07B1A;
      --amber-bg: #FDF3E3;
      --red: #C4373A;
      --red-bg: #FCEAEA;

      /* Aliases for compatibility */
      --ink: #0F2340;
      --ink-2: #374151;
      --ink-3: #6B7280;
      --ink-4: #B8C4D4;
      --surface: #FFFFFF;
      --surface-2: #F7F5F0;
      --surface-3: #E2DDD5;
      --border: #D6D0C8;
      --green: #7AAF8E;
      --green-bg: #EEF5F1;

      --radius: 12px;
      --radius-sm: 8px;
      --font: 'Inter', system-ui, sans-serif;
      --serif: 'DM Serif Display', Georgia, serif;
    }

    body {
      font-family: var(--font);
      color: var(--body-text);
      background: var(--warm-white);
      min-height: 100vh;
    }

    .page-wrap {
      max-width: 700px;
      margin: 0 auto;
    }

    /* ── Top nav ── */
    .top-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--navy);
      padding: 16px 28px;
    }
    .nav-brand {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .nav-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--slate-green);
      flex-shrink: 0;
    }
    .nav-name {
      font-family: var(--font);
      font-size: 13px;
      font-weight: 500;
      color: var(--warm-white);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .nav-tag {
      font-family: var(--font);
      font-size: 11px;
      font-weight: 500;
      color: var(--slate-green);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    /* ── Hero ── */
    .hero {
      background: var(--navy);
      border-bottom: 3px solid var(--slate-green);
      text-align: center;
      padding: 40px 28px 48px;
    }
    .hero-eyebrow {
      font-family: var(--font);
      font-size: 11px;
      font-weight: 500;
      color: var(--slate-green);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 0.6rem;
    }
    .hero h1 {
      font-family: var(--serif);
      font-size: 30px;
      font-weight: 400;
      line-height: 1.25;
      margin-bottom: 0.75rem;
      color: var(--warm-white);
      max-width: 480px;
      margin-left: auto;
      margin-right: auto;
    }
    .hero p {
      font-size: 15px;
      color: var(--steel-blue);
      line-height: 1.65;
      max-width: 520px;
      margin: 0 auto 1.5rem;
    }
    .hero-stats {
      display: flex;
      justify-content: center;
      gap: 0;
      flex-wrap: wrap;
      border-top: 1px solid var(--navy-dark);
      margin-top: 1.5rem;
      padding-top: 1.5rem;
    }
    .hero-stat {
      text-align: center;
      padding: 0 2rem;
      border-right: 1px solid var(--navy-dark);
    }
    .hero-stat:last-child { border-right: none; }
    .hero-stat strong {
      display: block;
      font-family: var(--serif);
      font-size: 22px;
      font-weight: 400;
      color: var(--warm-white);
    }
    .hero-stat span {
      font-size: 11px;
      font-weight: 500;
      color: var(--slate-green);
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    /* ── Form area wrapper ── */
    .form-body {
      padding: 32px 28px;
    }

    /* ── Form card ── */
    .card {
      background: var(--pure-white);
      border: 0.5px solid var(--warm-gray);
      border-radius: var(--radius);
      padding: 24px;
      margin-bottom: 16px;
    }
    .card-title {
      font-size: 11px;
      font-weight: 500;
      color: var(--slate-green);
      letter-spacing: 0.10em;
      text-transform: uppercase;
      margin-bottom: 1.25rem;
      padding-bottom: 0.75rem;
      border-bottom: 1px solid var(--light-warm);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-bottom: 14px;
    }
    .fg { display: flex; flex-direction: column; gap: 5px; }
    .fg.full { grid-column: 1 / -1; }
    .fg label {
      font-size: 12px;
      font-weight: 500;
      color: var(--body-text);
    }
    .fg input {
      font-family: var(--font);
      font-size: 13px;
      padding: 10px 12px;
      border: 0.5px solid var(--warm-gray);
      border-radius: var(--radius-sm);
      background: var(--warm-white);
      color: var(--navy);
      outline: none;
      transition: border-color 0.15s, background 0.15s;
      width: 100%;
    }
    .fg input:focus {
      border-color: var(--navy);
      background: var(--pure-white);
    }
    .fg input::placeholder { color: var(--muted-text); }

    .radio-group { display: flex; gap: 8px; flex-wrap: wrap; }
    .radio-opt {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 9px 14px;
      border: 0.5px solid var(--warm-gray);
      border-radius: var(--radius-sm);
      cursor: pointer;
      font-size: 13px;
      font-weight: 400;
      color: var(--body-text);
      transition: all 0.15s;
      background: var(--warm-white);
      user-select: none;
    }
    .radio-opt:hover { border-color: var(--navy); color: var(--navy); }
    .radio-opt.sel { border: 1.5px solid var(--navy); color: var(--navy); background: #EEF3F7; font-weight: 500; }
    .radio-opt input[type="radio"] { display: none; }

    .run-btn {
      width: 100%;
      margin-top: 1.5rem;
      padding: 13px 24px;
      background: var(--slate-green);
      color: var(--navy);
      border: none;
      border-radius: var(--radius-sm);
      font-family: var(--font);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.15s;
      letter-spacing: 0.01em;
    }
    .run-btn:hover { background: #6A9E7E; }
    .run-btn:disabled {
      background: var(--light-warm);
      color: var(--muted-text);
      cursor: not-allowed;
    }

    .err-box {
      background: var(--red-bg);
      border: 1px solid #F2BEBE;
      border-radius: var(--radius-sm);
      padding: 10px 14px;
      font-size: 13px;
      color: var(--red);
      margin-top: 12px;
      display: none;
    }

    /* ── Status ── */
    .status-wrap { margin: 1rem 0; padding: 0 28px; }
    .status-step {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      background: var(--pure-white);
      border-radius: var(--radius-sm);
      border: 0.5px solid var(--warm-gray);
      font-size: 13px;
      color: var(--muted-text);
      margin-bottom: 6px;
    }
    .spin {
      width: 15px; height: 15px;
      border: 2px solid var(--light-warm);
      border-top-color: var(--slate-green);
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
      flex-shrink: 0;
    }
    .step-done {
      width: 15px; height: 15px;
      background: var(--green);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      font-size: 9px; color: white; font-weight: 700;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── Report ── */
    .report { display: none; padding: 0 28px 32px; }

    .pages-bar {
      background: var(--pure-white);
      border: 0.5px solid var(--warm-gray);
      border-radius: var(--radius-sm);
      padding: 8px 12px;
      margin-bottom: 1rem;
      font-size: 11px;
      color: var(--muted-text);
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
    }
    .pages-bar strong { color: var(--body-text); margin-right: 2px; }
    .page-tag {
      background: var(--pure-white);
      border: 0.5px solid var(--warm-gray);
      border-radius: 4px;
      padding: 2px 7px;
      font-family: var(--font);
      font-size: 10px;
      color: var(--muted-text);
    }
    .page-tag.ok { border-color: var(--slate-green); color: var(--slate-green); background: var(--green-bg); }
    .page-tag.fail { border-color: var(--red); color: var(--red); background: var(--red-bg); }

    /* Visibility warnings */
    .vis-panel {
      background: var(--surface);
      border: 1.5px solid var(--amber);
      border-radius: var(--radius);
      padding: 1.25rem;
      margin-bottom: 1.25rem;
    }
    .vis-title { font-size: 13px; font-weight: 600; color: var(--amber); margin-bottom: 0.3rem; }
    .vis-subtitle { font-size: 12px; color: var(--ink-3); margin-bottom: 1rem; line-height: 1.5; }
    .vis-item { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
    .vis-item:last-child { border-bottom: none; padding-bottom: 0; }
    .vis-icon { flex-shrink: 0; font-size: 14px; margin-top: 1px; }
    .vis-text { font-size: 12px; color: var(--ink-2); line-height: 1.6; }
    .vis-text strong { color: var(--ink); font-weight: 600; }
    .vis-hint { display: block; margin-top: 4px; font-size: 11px; color: var(--ink-3); font-style: italic; }

    /* Score hero */
    .score-hero {
      background: var(--pure-white);
      border: 0.5px solid var(--warm-gray);
      border-radius: var(--radius);
      padding: 1.5rem;
      margin-bottom: 1.25rem;
      display: flex;
      align-items: center;
      gap: 1.75rem;
    }
    .ring-wrap { position: relative; width: 110px; height: 110px; flex-shrink: 0; }
    .ring-wrap svg { transform: rotate(-90deg); }
    .ring-center {
      position: absolute; inset: 0;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 1px;
    }
    .ring-num { font-family: var(--serif); font-size: 30px; font-weight: 400; line-height: 1; }
    .ring-denom { font-family: var(--font); font-size: 11px; color: var(--muted-text); }
    .verdict-pill {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 4px 10px; border-radius: 20px;
      font-size: 11px; font-weight: 500;
      margin-bottom: 0.5rem;
    }
    .hero-biz { font-family: var(--serif); font-size: 20px; font-weight: 400; color: var(--navy); margin-bottom: 0.35rem; }
    .hero-verdict { font-size: 13px; color: var(--body-text); line-height: 1.65; }
    .score-note { font-size: 11px; color: var(--muted-text); margin-top: 8px; font-style: italic; }

    .sees-card {
      background: var(--warm-white);
      border-radius: var(--radius-sm);
      padding: 14px 16px;
      margin-bottom: 1.25rem;
      border-left: 3px solid var(--navy);
    }
    .sees-label {
      font-size: 11px; font-weight: 500; color: var(--slate-green);
      letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px;
    }
    .sees-text { font-size: 13px; color: var(--body-text); line-height: 1.65; }

    /* Dimensions */
    .dim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 1.25rem; }
    .dim {
      background: var(--pure-white);
      border: 0.5px solid var(--warm-gray);
      border-radius: var(--radius);
      padding: 1rem 1.1rem;
    }
    .dim.blocker { border-color: var(--red); background: var(--red-bg); }
    .dim-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
    .dim-label { font-size: 11px; font-weight: 500; color: var(--body-text); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.4; }
    .dim-score { font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--navy); flex-shrink: 0; margin-left: 8px; }
    .bar-bg { height: 6px; background: var(--light-warm); border-radius: 3px; margin-bottom: 8px; }
    .bar-fill { height: 6px; border-radius: 3px; }
    .dim-note { font-size: 11px; color: var(--muted-text); line-height: 1.55; }
    .dim.blocker .dim-note { color: #8B2A2C; }
    .dim-note .src-tag { display: block; margin-top: 4px; font-size: 10px; font-weight: 500; letter-spacing: .02em; color: var(--muted-text); text-transform: uppercase; }

    /* Panels */
    .panel {
      background: var(--pure-white);
      border: 0.5px solid var(--warm-gray);
      border-radius: var(--radius);
      padding: 1.25rem;
      margin-bottom: 1.25rem;
    }
    .panel-title {
      font-size: 11px; font-weight: 500;
      letter-spacing: 0.08em; text-transform: uppercase;
      display: flex; align-items: center; gap: 8px;
      margin-bottom: 1rem; padding-bottom: 0.75rem;
      border-bottom: 1px solid var(--light-warm);
    }
    .gap-item { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--light-warm); }
    .gap-item:last-child { border-bottom: none; padding-bottom: 0; }
    .gap-text { font-size: 13px; color: var(--body-text); line-height: 1.6; }
    .gap-text strong { color: var(--navy); font-weight: 500; }
    .strength-item {
      display: flex; align-items: flex-start; gap: 9px;
      padding: 8px 0; border-bottom: 1px solid var(--light-warm);
      font-size: 13px; color: var(--body-text); line-height: 1.55;
    }
    .strength-item:last-child { border-bottom: none; }
    .chk {
      width: 16px; height: 16px;
      background: var(--green-bg); border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; margin-top: 1px;
      font-size: 9px; color: var(--slate-green); font-weight: 700;
    }
    .fix-item {
      display: flex; align-items: flex-start; gap: 9px;
      padding: 9px 0; border-bottom: 1px solid var(--light-warm);
      font-size: 13px; color: var(--body-text); line-height: 1.6;
    }
    .fix-item:last-child { border-bottom: none; }
    .pri {
      flex-shrink: 0; padding: 2px 8px; border-radius: 4px;
      font-size: 10px; font-weight: 500; margin-top: 1px; letter-spacing: 0.04em;
    }
    .pri-c { background: var(--red-bg); color: var(--red); }
    .pri-h { background: var(--amber-bg); color: var(--amber); }
    .pri-m { background: var(--light-warm); color: var(--navy); }

    /* Quick wins */
    .quickwin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .quickwin-item {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 14px; background: var(--green-bg);
      border: 0.5px solid var(--slate-green); border-radius: var(--radius-sm);
      font-size: 12px; font-weight: 500; color: var(--navy);
      text-decoration: none; transition: all 0.15s;
    }
    .quickwin-item:hover { background: #D8EBE0; }
    .quickwin-arrow { font-weight: 600; color: var(--slate-green); }

    /* Missing checklist */
    .missing-panel {
      background: var(--navy);
      border-radius: var(--radius);
      padding: 1.25rem;
      margin-bottom: 1.25rem;
    }
    .missing-title { font-size: 11px; font-weight: 500; color: var(--slate-green); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.3rem; }
    .missing-subtitle { font-size: 12px; color: var(--steel-blue); margin-bottom: 1rem; line-height: 1.5; }
    .missing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .missing-item {
      display: flex; align-items: flex-start; gap: 8px;
      padding: 8px 10px; background: var(--navy-dark);
      border: 0.5px solid var(--navy-muted); border-radius: var(--radius-sm);
      font-size: 11px; color: var(--steel-blue); line-height: 1.5;
    }
    .missing-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--slate-green); flex-shrink: 0; margin-top: 3px; }

    /* Action row */
    .action-row { display: flex; gap: 10px; margin-bottom: 2rem; }
    .act-btn {
      flex: 1; padding: 11px 20px;
      border: 0.5px solid var(--warm-gray);
      border-radius: var(--radius-sm);
      background: var(--pure-white);
      font-family: var(--font);
      font-size: 13px; font-weight: 500;
      cursor: pointer; color: var(--muted-text);
      transition: all 0.15s;
    }
    .act-btn:hover { background: var(--warm-white); }
    .act-btn.primary { background: var(--slate-green); color: var(--navy); border-color: var(--slate-green); }
    .act-btn.primary:hover { background: #6A9E7E; }

    /* CTA banner (post-report) */
    .cta-banner {
      background: var(--navy);
      border-radius: var(--radius);
      padding: 20px 24px;
      margin-bottom: 2rem;
      display: none;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }
    .cta-banner h3 { font-family: var(--serif); font-size: 16px; font-weight: 400; color: var(--warm-white); margin-bottom: 0.4rem; }
    .cta-banner p { font-size: 13px; color: var(--steel-blue); line-height: 1.6; max-width: 360px; }
    .cta-banner a {
      display: inline-block;
      padding: 11px 20px;
      background: var(--slate-green);
      color: var(--navy);
      border-radius: var(--radius-sm);
      font-size: 13px; font-weight: 500;
      text-decoration: none;
      white-space: nowrap;
      transition: background 0.15s;
      flex-shrink: 0;
    }
    .cta-banner a:hover { background: #6A9E7E; }

    /* Footer */
    .footer {
      background: var(--navy);
      text-align: center;
      font-size: 11px;
      color: var(--navy-muted);
      padding: 16px 28px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .footer a { color: var(--navy-muted); text-decoration: none; }

    /* Responsive */
    @media (max-width: 560px) {
      .form-grid { grid-template-columns: 1fr; }
      .fg.full { grid-column: 1; }
      .dim-grid { grid-template-columns: 1fr; }
      .missing-grid { grid-template-columns: 1fr; }
      .quickwin-grid { grid-template-columns: 1fr; }
      .score-hero { flex-direction: column; text-align: center; }
      .hero h1 { font-size: 24px; }
      .action-row { flex-direction: column; }
      .cta-banner { flex-direction: column; text-align: center; }
    }

    /* ── Print / PDF export ── */
    .print-header { display: none; }
    @media print {
      * { -webkit-print-color-adjust: exact; print-color-adjust: exact; color-adjust: exact; }
      body { background: #fff; padding: 0; }
      .top-nav, .hero, #formArea, #statusArea, .action-row, .cta-banner, .footer { display: none !important; }
      .print-header { display: block; margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--navy); }
      .print-header .ph-title { font-family: var(--serif); font-size: 18px; font-weight: 400; color: var(--navy); }
      .print-header .ph-meta { font-size: 11px; color: var(--muted-text); margin-top: 4px; }
      .panel, .dim, .missing-panel, .vis-panel, .sees-card, .quickwin-item { page-break-inside: avoid; }
      a { color: inherit; text-decoration: none; }
      .report { padding: 0; }
    }
  </style>
</head>
<body>
<div class="page-wrap">

  <!-- Nav -->
  <nav class="top-nav">
    <div class="nav-brand">
      <div class="nav-dot"></div>
      <span class="nav-name">Beyond Scale</span>
    </div>
    <span class="nav-tag">AI Visibility Audit</span>
  </nav>

  <!-- Hero -->
  <div class="hero">
    <div class="hero-eyebrow">AI Visibility Audit</div>
    <h1>Is your business invisible to AI?</h1>
    <p>When someone asks Claude or ChatGPT to find a business like yours, what do they actually see? We analyze your full website across 7 dimensions of AI readability — not just your homepage.</p>
    <p style="margin-top:0.75rem;font-size:12px;color:var(--steel-blue)">Not sure what to expect? <a href="/sample-report.html" target="_blank" style="color:var(--slate-green);font-weight:500;text-decoration:none">See a sample report →</a></p>
    <div class="hero-stats">
      <div class="hero-stat"><strong>7</strong><span>Dimensions scored</span></div>
      <div class="hero-stat"><strong>6</strong><span>Pages analyzed</span></div>
    </div>
  </div>

  <!-- Form -->
  <div class="form-body">
  <div id="formArea">
    <div class="card">
      <div class="card-title">Tell us about your business</div>
      <div class="form-grid">
        <div class="fg"><label>Business name</label><input id="fName" type="text" placeholder="e.g. Apex Plumbing Co." /></div>
        <div class="fg"><label>Business type</label><input id="fType" type="text" placeholder="e.g. plumber, dentist, bakery" /></div>
        <div class="fg"><label>City</label><input id="fCity" type="text" placeholder="e.g. Bentonville" /></div>
        <div class="fg"><label>State</label><input id="fState" type="text" placeholder="e.g. AR" /></div>
        <div class="fg full"><label>Website URL</label><input id="fUrl" type="text" placeholder="https://yourbusiness.com" /></div>
        <div class="fg full">
          <label>How do you serve customers?</label>
          <div class="radio-group" id="rService">
            <label class="radio-opt" onclick="pick('rService','inperson',this)"><input type="radio"/>🏠 Customers come to me</label>
            <label class="radio-opt" onclick="pick('rService','mobile',this)"><input type="radio"/>🚗 I travel to them</label>
            <label class="radio-opt" onclick="pick('rService','both',this)"><input type="radio"/>↔ Both</label>
            <label class="radio-opt" onclick="pick('rService','online',this)"><input type="radio"/>💻 Internet only</label>
          </div>
        </div>
        <div class="fg full">
          <label>How do customers buy from or engage with you?</label>
          <div class="radio-group" id="rBooking">
            <label class="radio-opt" onclick="pick('rBooking','direct',this)"><input type="radio"/>🛒 Buy / book directly online</label>
            <label class="radio-opt" onclick="pick('rBooking','contact',this)"><input type="radio"/>📞 Contact or inquiry first</label>
            <label class="radio-opt" onclick="pick('rBooking','both',this)"><input type="radio"/>🔀 Both</label>
            <label class="radio-opt" onclick="pick('rBooking','inperson',this)"><input type="radio"/>🤝 In person only</label>
          </div>
        </div>
      </div>
      <button class="run-btn" id="runBtn" onclick="runAudit()">Run My AI Visibility Audit →</button>
      <div class="err-box" id="errBox"></div>
    </div>
  </div>

  </div><!-- /form-body -->

  <!-- Status -->
  <div id="statusArea" class="status-wrap" style="display:none"></div>

  <!-- Report -->
  <div class="report" id="reportArea"></div>

  <!-- Post-report CTA (shown after report renders) -->
  <div class="cta-banner" id="ctaBanner">
    <h3>Want help fixing what we found?</h3>
    <p>Book a free 30-minute AI Readiness consultation with the Beyond Scale team. No pitch — just answers about what to fix first and how to fix it.</p>
    <!-- REPLACE the href below with your actual Calendly or booking link -->
    <a href="https://beyond-scale.com/consultation" target="_blank">Book My Free Consultation →</a>
  </div>

  <!-- Footer -->
  <div class="footer">
    <p>© 2026 <a href="https://beyond-scale.com">Beyond Scale</a> · AI Visibility Audit</p>
  </div>

</div>

<script>
  // ─────────────────────────────────────────────
  // CONFIGURATION — update this after Cloudflare setup
  // Replace with your Cloudflare Worker URL
  // ─────────────────────────────────────────────
  const PROXY_URL = 'https://ai-visibility-audit.beyond-scale.workers.dev';

  // ─────────────────────────────────────────────
  // State
  // ─────────────────────────────────────────────
  const radio = { rService: null, rBooking: null };

  function pick(group, val, el) {
    radio[group] = val;
    document.querySelectorAll(`#${group} .radio-opt`).forEach(o => o.classList.remove('sel'));
    el.classList.add('sel');
  }

  function setStatus(steps) {
    const area = document.getElementById('statusArea');
    if (!steps || !steps.length) { area.style.display = 'none'; area.innerHTML = ''; return; }
    area.style.display = 'block';
    area.innerHTML = steps.map(s => `
      <div class="status-step">
        ${s.done ? '<div class="step-done">✓</div>' : '<div class="spin"></div>'}
        <span>${s.label}</span>
      </div>`).join('');
  }

  function showErr(msg) {
    const el = document.getElementById('errBox');
    el.textContent = msg;
    el.style.display = 'block';
  }

  function scoreColor(n) {
    return n >= 70 ? 'var(--green)' : n >= 40 ? 'var(--amber)' : 'var(--red)';
  }

  function verdictInfo(n) {
    if (n >= 70) return { label: 'AI-Ready', bg: 'var(--green-bg)', color: 'var(--green)' };
    if (n >= 40) return { label: 'Partially Visible', bg: 'var(--amber-bg)', color: 'var(--amber)' };
    return { label: 'AI Invisible', bg: 'var(--red-bg)', color: 'var(--red)' };
  }

  // Claim/listing URLs for common directory platforms — used to turn
  // "AI Findability" gaps into one-click next steps.
  const PLATFORM_LINKS = {
    'Google Business Profile': 'https://www.google.com/business/',
    'Yelp': 'https://biz.yelp.com/',
    'Angi': 'https://www.angi.com/join/',
    'Thumbtack': 'https://www.thumbtack.com/pro/',
    'Nextdoor': 'https://business.nextdoor.com/',
    'Houzz': 'https://www.houzz.com/professionals',
    'BBB': 'https://www.bbb.org/get-accredited',
    'Facebook': 'https://www.facebook.com/business/pages',
    'Apple Maps': 'https://businessconnect.apple.com/',
    'Bing Places': 'https://www.bingplaces.com/'
  };

  function serviceModelText(val) {
    return {
      inperson: 'customers come to the business location',
      mobile: 'business travels to customers',
      both: 'both in-person and mobile service',
      online: 'internet-only — no physical location, customers served entirely online'
    }[val] || val;
  }

  function bookingText(val) {
    return {
      direct: 'customers can buy or book directly online',
      contact: 'customers contact or inquire first before purchasing',
      both: 'both direct online purchase and contact/inquiry depending on product or service',
      inperson: 'transactions happen in person only'
    }[val] || val;
  }

  // ─────────────────────────────────────────────
  // Content visibility analysis (client-side)
  // ─────────────────────────────────────────────
  function analyzeContentVisibility(pageResults, pageStatuses = {}) {
    const warnings = [];
    const jsWidgetPatterns = [
      { pattern: /nicejob|birdeye|podium|grade\.us|reviewwave/i, label: 'review widget', section: 'customer reviews' },
      { pattern: /elfsight|trustpilot/i, label: 'review widget', section: 'customer reviews' },
      { pattern: /calendly|acuityscheduling|housecallpro|jobber/i, label: 'booking widget', section: 'online booking' },
      { pattern: /elementor.*counter|counter-number|odometer/i, label: 'animated counter', section: 'stat counters' },
      { pattern: /wix-widget|wixcode|wix-bookings/i, label: 'Wix widget', section: 'dynamic content' },
    ];

    for (const [pageKey, content] of Object.entries(pageResults)) {
      if (!content) continue;
      const wordCount = content.split(/\s+/).filter(Boolean).length;
      const pageName = pageKey === 'homepage' ? 'homepage' : `/${pageKey}`;

      if (wordCount < 120 && wordCount > 10) {
        warnings.push({
          icon: '⚠', color: 'var(--amber)',
          title: `Thin content detected on ${pageName}`,
          detail: `Only ${wordCount} words were readable on this page. More content may exist but be built with a JavaScript page builder that AI cannot read.`,
          hint: 'Ask your developer to check if this page uses dynamic or animated content blocks.'
        });
      }

      for (const fp of jsWidgetPatterns) {
        if (fp.pattern.test(content)) {
          warnings.push({
            icon: '👁', color: 'var(--amber)',
            title: `Possible ${fp.label} detected on ${pageName} — content may be hidden from AI`,
            detail: `A ${fp.label} signature was found. These widgets load content via JavaScript after the page renders — AI cannot read the actual ${fp.section} displayed to human visitors.`,
            hint: 'Ask your developer to add the same content as static HTML text alongside the widget.'
          });
          break;
        }
      }
    }

    // Only warn on pages that exist but are unreadable — not pages that simply don't exist.
    // A business that hasn't created a /faq page shouldn't be penalized for a missing page.
    const expectedPages = ['pricing', 'services', 'about', 'faq', 'contact'];
    for (const expected of expectedPages) {
      if (pageStatuses[expected] === 'unreadable') {
        warnings.push({
          icon: '✗', color: 'var(--red)',
          title: `/${expected} page could not be read`,
          detail: `This page returned no readable content. It may be JavaScript-rendered, blocking automated requests, or returning an error. AI cannot read any content on this page.`,
          hint: 'Ask your developer to verify this page loads and contains plain readable HTML text.'
        });
      }
      // status === 'not_found' → page doesn't exist → no warning, no penalty
    }

    return warnings;
  }

  // ─────────────────────────────────────────────
  // API call through Cloudflare proxy
  // ─────────────────────────────────────────────
  async function callProxy(body) {
    const r = await fetch(PROXY_URL, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(body)
    });
    if (!r.ok) {
      let detail = '';
      try { detail = await r.text(); } catch {}
      throw new Error(`Proxy error: ${r.status}${detail ? ' — ' + detail.slice(0, 300) : ''}`);
    }
    const data = await r.json();
    if (data.type === 'error') throw new Error(`API error: ${data.error?.type || ''} ${data.error?.message || ''}`);
    return data;
  }

  async function sleep(ms) { return new Promise(res => setTimeout(res, ms)); }

  async function fetchPageContent(url, attempt = 1) {
    try {
      let domain = null;
      try { domain = new URL(url).hostname; } catch {}

      const d = await callProxy({
        model: 'claude-sonnet-4-6',
        max_tokens: 800,
        temperature: 0.2,
        tools: [{
          type: 'web_fetch_20250910',
          name: 'web_fetch',
          max_uses: 1,
          max_content_tokens: 6000,
          ...(domain ? { allowed_domains: [domain] } : {})
        }],
        messages: [{ role: 'user', content: `Fetch the URL: ${url}\n\nReturn the readable text content — headings, paragraphs, lists, prices, phone numbers, addresses. Include any widget class names noticed (nicejob, elementor-counter, wix-widget, etc). Keep your response under roughly 700 words — if the page is long, prioritize pricing, services, contact info, and trust signals over generic marketing copy. Do not summarize or comment, just return trimmed page text. If the fetch fails or the page is empty/unreadable return: "EMPTY".` }]
      });

      const fetchError = (d.content || []).find(b => b.type === 'web_fetch_tool_result' && b.content?.type === 'web_fetch_tool_error');
      if (fetchError) {
        const code = fetchError.content.error_code || '';
        // 404 / not_found = page doesn't exist — don't penalize
        // Other errors = page exists but AI can't read it — flag it
        const isNotFound = /not_found|404/i.test(code);
        console.warn(`[fetchPageContent] web_fetch error for ${url}:`, code);
        return { status: isNotFound ? 'not_found' : 'unreadable', text: null };
      }

      const text = (d.content || []).filter(b => b.type === 'text').map(b => b.text).join('');
      if (!text || text.trim().length === 0) {
        console.warn(`[fetchPageContent] Empty text response for ${url}`, d);
      }
      if (text.includes('EMPTY') && text.length < 50) return { status: 'not_found', text: null };
      return { status: 'ok', text };
    } catch (err) {
      console.warn(`[fetchPageContent] Attempt ${attempt} failed for ${url}:`, err.message || err);
      if (attempt < 2) {
        await sleep(1500);
        return fetchPageContent(url, attempt + 1);
      }
      console.error(`[fetchPageContent] Giving up on ${url} after ${attempt} attempts:`, err.message || err);
      return { status: 'unreadable', text: null };
    }
  }

  // ─────────────────────────────────────────────
  // Main audit runner
  // ─────────────────────────────────────────────
  async function runAudit() {
    const name = document.getElementById('fName').value.trim();
    const type = document.getElementById('fType').value.trim();
    const city = document.getElementById('fCity').value.trim();
    const state = document.getElementById('fState').value.trim();
    const url = document.getElementById('fUrl').value.trim();
    const svcModel = radio.rService;
    const booking = radio.rBooking;

    document.getElementById('errBox').style.display = 'none';
    if (!name || !type || !city || !state || !url) { showErr('Please fill in all fields.'); return; }
    if (!svcModel) { showErr('Please select how you serve customers.'); return; }
    if (!booking) { showErr('Please select how customers buy from or engage with you.'); return; }

    const btn = document.getElementById('runBtn');
    btn.disabled = true;
    btn.textContent = 'Running audit…';
    document.getElementById('reportArea').style.display = 'none';
    document.getElementById('ctaBanner').style.display = 'none';
    document.getElementById('formArea').style.display = 'none';

    // Step 1 & 2: AI search scan + page fetches — run concurrently (major speed win)
    setStatus([{ label: 'Running AI search scan and fetching website pages…', done: false }]);

    const isOnline = svcModel === 'online';
    const searchQuery = isOnline
      ? `"${name}" online — what search results, directories, reviews appear? Also search "${type}" online service.`
      : `1. "${type} in ${city} ${state}" — does "${name}" appear?\n2. "${name} ${city} ${state}" — what listings, ratings, reviews appear?`;

    const searchPromise = callProxy({
      model: 'claude-sonnet-4-6',
      max_tokens: 1000,
      temperature: 0.2,
      tools: [{ type: 'web_search_20250305', name: 'web_search' }],
      messages: [{ role: 'user', content: `Search for:\n${searchQuery}\nReturn ALL findings: every platform, star rating, review snippet, URL. Be exhaustive.` }]
    }).then(sd => sd.content.filter(b => b.type === 'text').map(b => b.text).join('')).catch(() => '');

    const base = url.replace(/\/$/, '');
    const pageDefs = [
      { key: 'homepage', path: '/' },
      { key: 'pricing', path: '/pricing/' },
      { key: 'services', path: '/services/' },
      { key: 'about', path: '/about-us/' },
      { key: 'faq', path: '/faq/' },
      { key: 'contact', path: '/contact/' }
    ];

    const pagePromises = pageDefs.map(p =>
      fetchPageContent(base + p.path).then(result => ({ key: p.key, result }))
    );

    const [searchContent, pageOutcomes] = await Promise.all([
      searchPromise,
      Promise.all(pagePromises)
    ]);

    const pageResults = {};      // key → text (only readable pages)
    const pageStatuses = {};     // key → 'ok' | 'unreadable' | 'not_found'
    for (const { key, result } of pageOutcomes) {
      const status = result?.status || 'not_found';
      const text = result?.text || null;
      pageStatuses[key] = status;
      if (status === 'ok' && text && text.length > 80) {
        pageResults[key] = text.slice(0, 1400);
      }
    }

    const fetchedPages = Object.keys(pageResults);
    const allContent = fetchedPages.map(k => `=== ${k.toUpperCase()} ===\n${pageResults[k]}`).join('\n\n');

    // Step 3: Visibility analysis
    setStatus([
      { label: `AI search scan + pages fetched: ${fetchedPages.join(', ')}`, done: true },
      { label: 'Running content visibility analysis…', done: false }
    ]);
    const visWarnings = analyzeContentVisibility(pageResults, pageStatuses);

    // Step 4: Score
    setStatus([
      { label: `AI search scan + pages fetched: ${fetchedPages.join(', ')}`, done: true },
      { label: 'Content visibility analysis complete', done: true },
      { label: 'Scoring 7 dimensions…', done: false }
    ]);

    const svcText = serviceModelText(svcModel);
    const bkgText = bookingText(booking);

    const visWarningsSummary = visWarnings.length > 0
      ? visWarnings.map(w => `- ${w.title}`).join('\n')
      : 'None detected.';

    const prompt = `You are an AI Website Readiness Auditor scoring a business's AI visibility.

BUSINESS: ${name} | ${type} | ${city}, ${state} | ${url}
Service model: ${svcText}
How customers engage: ${bkgText}
${isOnline ? 'NOTE: Internet-only business. Do NOT penalize for missing physical location or local directories. Score service area dimension on whether it is clear what markets, industries, or customer types they serve online.' : ''}

AI SEARCH RESULTS:
${searchContent || 'No data.'}

WEBSITE CONTENT (${fetchedPages.join(', ')}):
${allContent || 'No content fetched.'}

CONTENT VISIBILITY ISSUES ALREADY SURFACED TO THE USER (a separate panel in the report already shows these — do not repeat them in "gaps"):
${visWarningsSummary}

Score these 7 dimensions 0–100.

CRITICAL ACCURACY RULE: Every specific detail you cite (prices, payment methods, certifications, review counts, platform names, phone numbers, service area names, etc.) MUST be something you can point to directly in the AI SEARCH RESULTS or WEBSITE CONTENT above. Do NOT add plausible-sounding details that are not literally present in that content — for example, if specific payment methods are mentioned, list ONLY the ones actually named; do not pad the list with other common payment methods (Zelle, Venmo, PayPal, etc.) that were not mentioned. If you are not certain a detail appears in the source content, leave it out entirely. Fabricated specifics are a critical failure — a vague but accurate note is always better than a specific but invented one.

URL STRUCTURE RULE: Do NOT penalize a business for not having content at a standard URL path (e.g. /about, /faq, /contact) if the equivalent content was successfully found on other pages that were fetched. Many businesses use non-standard URL structures (e.g. /company/our-story instead of /about). What matters is whether the content is AI-accessible somewhere on the site, not whether it lives at the expected URL. Only flag a content gap if the content itself is genuinely absent from all fetched pages.

SOURCE ATTRIBUTION RULE: The WEBSITE CONTENT above is broken into sections labeled "=== PAGENAME ===" (e.g. === HOMEPAGE ===, === PRICING ===, === SERVICES ===). For every *Note field below, end the note with a bracketed source tag naming exactly which section(s) the cited specifics came from, e.g. "[Source: homepage]" or "[Source: pricing page]" or "[Source: homepage, services page]". If the information came from AI SEARCH RESULTS rather than the website content, use "[Source: AI search results]". This lets the business owner trace every claim back to where it appears.

0. crawlScore: Pages returned content = 80+. Nothing readable = 0 (Critical Blocker).
1. findScore: Appears in searches and directories? ${isOnline ? 'For online: score based on search visibility not local directories.' : ''}
2. serviceScore: Specific services or products clearly described?
3. pricingScore: Real prices or ranges present? Cite ONLY the actual numbers and payment methods found verbatim in the content — do not infer or add others. 70–85 if real prices exist. 20–30 if only contact for quote.
4. bookingScore: Is path to purchase or engage clear? Model: ${bkgText}
5. trustScore: Credentials, reviews, certifications, testimonials? Flag literal "0+" counters explicitly. Cite ONLY credentials/certifications actually named in the content.
6. areaScore: ${isOnline ? 'Clear who they serve — industries, customer types, geographic reach?' : 'Service area clearly stated?'}

Respond ONLY in valid JSON, no markdown, no backticks:
{"verdict":"<1 sentence>","whatAISees":"<2-3 sentences>","isCriticalBlocker":<bool>,
"crawlScore":<int>,"crawlNote":"<cite which pages readable, end with [Source: ...]>",
"findScore":<int>,"findNote":"<cite platforms found, end with [Source: ...]>",
"serviceScore":<int>,"serviceNote":"<specific finding, end with [Source: ...]>",
"pricingScore":<int>,"pricingNote":"<cite actual prices if found, end with [Source: ...]>",
"bookingScore":<int>,"bookingNote":"<specific finding, end with [Source: ...]>",
"trustScore":<int>,"trustNote":"<cite trust signals — flag 0+ counters, end with [Source: ...]>",
"areaScore":<int>,"areaNote":"<specific finding, end with [Source: ...]>",
"strengths":["<s1>","<s2>","<s3>"],
"gaps":[{"title":"<t>","detail":"<why this matters to AI>"}],
"fixes":[{"priority":"Critical|High|Medium","fix":"<specific actionable fix>"}],
"missingPlatforms":["<only from this exact list: Google Business Profile, Yelp, Angi, Thumbtack, Nextdoor, Houzz, BBB, Facebook, Apple Maps, Bing Places — include ONLY platforms confirmed absent from AI SEARCH RESULTS that are typically relevant for this type of business>"]}

NOTE on "missingPlatforms": ${isOnline ? 'This is an internet-only business — local directory listings (Yelp, Angi, Nextdoor, Houzz, Apple Maps) are usually not relevant. Only include Google Business Profile, Facebook, or BBB if genuinely relevant and absent, otherwise return an empty array.' : 'List directories from the allowed set that are absent from AI SEARCH RESULTS and would be realistic, valuable next steps for this business type to claim. Do not include a platform if it already appeared in AI SEARCH RESULTS. Return an empty array if none apply.'}

NOTE on "gaps": Focus these on strategic/business-content gaps (e.g. weak trust signals, unclear pricing structure, missing booking path) rather than the technical content-visibility issues already listed above. If a content visibility issue is the ONLY significant problem and there are no other meaningful gaps, it's fine to have fewer than 3 gaps.`;

    try {
      const ad = await callProxy({
        model: 'claude-sonnet-4-6',
        max_tokens: 4000,
        temperature: 0,
        messages: [{ role: 'user', content: prompt }]
      });
      const raw = ad.content.filter(b => b.type === 'text').map(b => b.text).join('');
      const clean = raw.replace(/```json|```/g, '').trim();
      const s = clean.indexOf('{'), e = clean.lastIndexOf('}');
      if (s === -1) throw new Error('Could not parse results. Please try again.');
      const result = JSON.parse(clean.slice(s, e + 1));
      setStatus([]);
      renderReport(result, visWarnings, name, type, city, state, url, fetchedPages, pageStatuses, svcModel, booking);
    } catch(err) {
      setStatus([]);
      showErr('Audit failed: ' + (err.message || 'Please try again.'));
      document.getElementById('formArea').style.display = 'block';
      btn.disabled = false;
      btn.textContent = 'Run My AI Visibility Audit →';
    }
  }

  // ─────────────────────────────────────────────
  // Render report
  // ─────────────────────────────────────────────
  function renderReport(r, visWarnings, name, type, city, state, url, fetchedPages, pageStatuses, svcModel, booking) {
    const btn = document.getElementById('runBtn');
    btn.disabled = false;
    btn.textContent = 'Run My AI Visibility Audit →';

    const isOnline = svcModel === 'online';
    const areaLabel = isOnline ? 'Audience Clarity' : 'Service Area';

    const dims = [
      { label: 'Crawlability', score: r.crawlScore, note: r.crawlNote, blocker: r.isCriticalBlocker },
      { label: 'AI Findability', score: r.findScore, note: r.findNote },
      { label: 'Service Clarity', score: r.serviceScore, note: r.serviceNote },
      { label: 'Pricing Transparency', score: r.pricingScore, note: r.pricingNote },
      { label: 'Booking & Contact', score: r.bookingScore, note: r.bookingNote },
      { label: 'Trust Signals', score: r.trustScore, note: r.trustNote },
      { label: areaLabel, score: r.areaScore, note: r.areaNote },
    ];

    const overallScore = dims.reduce((sum, d) => sum + (Number(d.score) || 0), 0) / dims.length;
    const v = verdictInfo(overallScore);
    const circ = 2 * Math.PI * 47;
    const dash = (overallScore / 100) * circ;

    const allExpected = ['homepage','pricing','services','about','faq','contact'];
    const pageTagsHTML = allExpected.map(p => {
      const status = pageStatuses[p] || 'not_found';
      if (status === 'ok') return `<span class="page-tag ok">✓ ${p === 'homepage' ? '/' : '/' + p}</span>`;
      if (status === 'unreadable') return `<span class="page-tag fail">✗ /${p}</span>`;
      return ''; // not_found — omit entirely, no penalty
    }).join('');

    const visHTML = visWarnings.length > 0 ? `
      <div class="vis-panel">
        <div class="vis-title">⚠ Content AI may be missing from your site</div>
        <div class="vis-subtitle">These issues were detected during page analysis. Content may exist on your site that AI cannot read — meaning your actual strengths may be underrepresented in this report.</div>
        ${visWarnings.map(w => `
          <div class="vis-item">
            <div class="vis-icon" style="color:${w.color}">${w.icon}</div>
            <div class="vis-text"><strong>${w.title}</strong><br>${w.detail}
              <span class="vis-hint">→ ${w.hint}</span>
            </div>
          </div>`).join('')}
      </div>` : '';

    function formatNote(note) {
      if (!note) return '';
      const m = note.match(/^(.*?)\s*\[Source:\s*(.*?)\]\s*$/s);
      if (!m) return note;
      return `${m[1]}<span class="src-tag">Source: ${m[2]}</span>`;
    }

    const dimsHTML = dims.map(d => `
      <div class="dim ${d.blocker ? 'blocker' : ''}">
        <div class="dim-top">
          <div class="dim-label">${d.label}${d.blocker ? ' <span style="font-size:10px;font-weight:700;background:var(--red);color:white;padding:1px 5px;border-radius:3px;margin-left:4px">BLOCKER</span>' : ''}</div>
          <div class="dim-score" style="color:${scoreColor(d.score)}">${Math.round(d.score)}</div>
        </div>
        <div class="bar-bg"><div class="bar-fill" style="width:${d.score}%;background:${scoreColor(d.score)}"></div></div>
        <div class="dim-note">${formatNote(d.note)}</div>
      </div>`).join('');

    const gapsHTML = (r.gaps || []).map((g, i) => `
      <div class="gap-item">
        <div style="font-size:14px;margin-top:1px;color:${i === 0 ? 'var(--red)' : 'var(--amber)'}">⚠</div>
        <div class="gap-text"><strong>${g.title}:</strong> ${g.detail}</div>
      </div>`).join('');

    const strengthsHTML = (r.strengths || []).map(s => `
      <div class="strength-item"><div class="chk">✓</div><span>${s}</span></div>`).join('');

    const fixesHTML = (r.fixes || []).map(f => `
      <div class="fix-item">
        <span class="pri ${f.priority === 'Critical' ? 'pri-c' : f.priority === 'High' ? 'pri-h' : 'pri-m'}">${f.priority}</span>
        <span>${f.fix}</span>
      </div>`).join('');

    const missingPlatforms = (r.missingPlatforms || []).filter(p => PLATFORM_LINKS[p]);
    const aiFindabilityScore = r.findScore ?? 0;
    const quickWinsHTML = missingPlatforms.length > 0 && aiFindabilityScore <= 80 ? `
      <div class="panel">
        <div class="panel-title" style="color:var(--green)">⚡ Quick wins: claim these listings</div>
        <div style="font-size:12px;color:var(--ink-3);margin-bottom:0.85rem;line-height:1.55">
          AI assistants pull recommendations heavily from these directories. None of these currently surface ${name} — claiming a free profile is one of the fastest ways to improve your AI Findability score.
        </div>
        <div class="quickwin-grid">
          ${missingPlatforms.map(p => `
            <a class="quickwin-item" href="${PLATFORM_LINKS[p]}" target="_blank" rel="noopener">
              <span>${p === 'BBB' ? 'BBB (application required)' : p}</span><span class="quickwin-arrow">→</span>
            </a>`).join('')}
        </div>
      </div>` : '';

    const missingItems = isOnline ? [
      { label: 'Customer reviews or testimonials', sub: 'Often in JS review widgets' },
      { label: 'Pricing tables or plan cards', sub: 'May render as dynamic blocks' },
      { label: 'Checkout or signup widgets', sub: 'JS-rendered, invisible to AI' },
      { label: 'FAQ accordion answers', sub: 'Questions visible, answers hidden' },
      { label: 'Chat or support widgets', sub: 'Intercom, Drift, Crisp, etc.' },
      { label: 'Demo request or inquiry forms', sub: 'Form fields not readable by AI' },
      { label: 'Content in sliders or carousels', sub: 'Only first slide readable' },
      { label: 'Image-based text or banners', sub: 'AI reads alt text only' },
    ] : [
      { label: 'Customer reviews or testimonials', sub: 'Often in JS review widgets' },
      { label: 'Animated number counters', sub: 'Read as "0" by AI until JS runs' },
      { label: 'FAQ accordion answers', sub: 'Questions visible, answers hidden' },
      { label: 'Booking or scheduling widgets', sub: 'Calendly, HouseCall Pro, etc.' },
      { label: 'Pricing tables in page builders', sub: 'May render as images or dynamic blocks' },
      { label: 'Image-based text or logos', sub: 'AI reads alt text only' },
      { label: 'Content in sliders or carousels', sub: 'Only first slide typically readable' },
      { label: 'Maps or location embeds', sub: 'Address text not always extracted' },
    ];

    const svcLabel = { inperson: 'Customers come to me', mobile: 'I travel to them', both: 'Both', online: 'Internet only' }[svcModel] || '';
    const bkgLabel = { direct: 'Buy / book directly online', contact: 'Contact or inquiry first', both: 'Both direct + inquiry', inperson: 'In person only' }[booking] || '';

    document.getElementById('reportArea').innerHTML = `
      <div class="print-header">
        <div class="ph-title">AI Visibility Audit Report — ${name}</div>
        <div class="ph-meta">${type} · ${city}, ${state} · ${url} · Generated ${new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })} · beyond-scale.com</div>
      </div>
      <div style="font-size:12px;color:var(--ink-4);margin-bottom:1rem">
        <strong>${name}</strong> · ${type} · ${city}, ${state} · ${svcLabel} · ${bkgLabel}
      </div>
      <div class="pages-bar"><strong>Pages analyzed:</strong>${pageTagsHTML}</div>
      ${visHTML}
      <div class="score-hero">
        <div class="ring-wrap">
          <svg width="110" height="110" viewBox="0 0 110 110">
            <circle cx="55" cy="55" r="47" fill="none" stroke="var(--surface-3)" stroke-width="8"/>
            <circle cx="55" cy="55" r="47" fill="none" stroke="${scoreColor(overallScore)}" stroke-width="8"
              stroke-dasharray="${dash} ${circ}" stroke-linecap="round"/>
          </svg>
          <div class="ring-center">
            <div class="ring-num" style="color:${scoreColor(overallScore)}">${Math.round(overallScore)}</div>
            <div class="ring-denom">/100</div>
          </div>
        </div>
        <div>
          <div class="verdict-pill" style="background:${v.bg};color:${v.color}">${v.label}</div>
          <div class="hero-biz">${name}</div>
          <div class="hero-verdict">${r.verdict}</div>
          <div class="score-note">Overall score is the simple average of the 7 dimension scores below.</div>
        </div>
      </div>
      <div class="sees-card">
        <div class="sees-label">What AI sees when it searches for you</div>
        <div class="sees-text">${r.whatAISees}</div>
      </div>
      <div class="dim-grid">${dimsHTML}</div>
      ${quickWinsHTML}
      ${gapsHTML ? `<div class="panel"><div class="panel-title" style="color:var(--amber)">⚠ Gaps blocking AI recommendations</div>${gapsHTML}</div>` : ''}
      ${strengthsHTML ? `<div class="panel"><div class="panel-title" style="color:var(--green)">✓ What's working well</div>${strengthsHTML}</div>` : ''}
      <div class="panel"><div class="panel-title" style="color:var(--blue)">⟨/⟩ Developer fix list</div>${fixesHTML}</div>
      <div class="missing-panel">
        <div class="missing-title">🔍 What AI commonly can't read — check your site</div>
        <div class="missing-subtitle">This audit reads what AI reads. If something on your site isn't mentioned in this report, it may be in one of these JavaScript-rendered elements that are invisible to AI. Show this list to your developer.</div>
        <div class="missing-grid">
          ${missingItems.map(m => `
            <div class="missing-item">
              <div class="missing-dot"></div>
              <div><div style="font-weight:500">${m.label}</div>
              <div style="font-size:10px;color:var(--ink-3);margin-top:2px">${m.sub}</div></div>
            </div>`).join('')}
        </div>
      </div>
      <div class="action-row">
        <button class="act-btn" onclick="resetAudit()">← Run another audit</button>
        <button class="act-btn" onclick="window.print()">⬇ Download PDF Report</button>
        <button class="act-btn primary" onclick="resetAudit()">Rerun after fixes →</button>
      </div>
    `;

    document.getElementById('reportArea').style.display = 'block';
    document.getElementById('ctaBanner').style.display = 'flex';
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }

  function resetAudit() {
    document.getElementById('reportArea').style.display = 'none';
    document.getElementById('reportArea').innerHTML = '';
    document.getElementById('ctaBanner').style.display = 'none';
    document.getElementById('formArea').style.display = 'block';
    document.getElementById('errBox').style.display = 'none';
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }
</script>
</body>
</html>