/* VALDEX — Home */

/* ---- Live citation log: a scrolling list of "events" from the citation harness ---- */
function LiveCitationLog() {
  const seed = [
    ["14:08:02", "P-091", "ChatGPT",   "best revops platform for series b saas",        "CITED #1",  "cited"],
    ["14:07:54", "P-042", "Perplexity","ai agency wyoming",                              "CITED #1",  "cited"],
    ["14:07:38", "P-018", "Claude",    "generative engine optimization explained",       "CITED #3",  "cited"],
    ["14:07:21", "P-203", "ChatGPT",   "ai content engineering best practices",          "CITED #2",  "cited"],
    ["14:06:55", "P-117", "Gemini",    "geo vs seo difference",                          "DROPPED",   "drop"],
    ["14:06:32", "P-064", "Perplexity","schema.org for ai retrieval",                    "CITED #1",  "cited"],
    ["14:06:11", "P-007", "Google AIO","programmatic seo agency",                        "CITED #5",  "cited"],
    ["14:05:48", "P-156", "ChatGPT",   "wyoming llc marketing agency",                   "CITED #1",  "cited"],
    ["14:05:22", "P-089", "Claude",    "ai-referred attribution analytics",              "CITED #2",  "cited"],
    ["14:04:58", "P-031", "Perplexity","b2b saas content engine",                        "LOST",      "lost"],
    ["14:04:31", "P-128", "ChatGPT",   "entity graph for retrieval",                     "CITED #1",  "cited"],
  ];
  const ENGINES = ["ChatGPT", "Perplexity", "Claude", "Gemini", "Google AIO"];
  const QUERIES = [
    "best b2b revops platform",
    "ai content engineering agency",
    "generative engine optimization wyoming",
    "schema.org for ai retrieval",
    "geo vs seo difference 2026",
    "valdex agency review",
    "ai-referred attribution analytics",
    "prompt coverage map",
    "entity graph engineering",
    "ai citation tracking platform",
  ];
  const [events, setEvents] = React.useState(seed);
  React.useEffect(() => {
    const id = setInterval(() => {
      const d = new Date();
      const t = `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}:${String(d.getSeconds()).padStart(2, "0")}`;
      const p = `P-${String(Math.floor(Math.random() * 250)).padStart(3, "0")}`;
      const e = ENGINES[Math.floor(Math.random() * ENGINES.length)];
      const q = QUERIES[Math.floor(Math.random() * QUERIES.length)];
      const roll = Math.random();
      const out = roll > 0.92 ? ["LOST", "lost"] : roll > 0.82 ? ["DROPPED", "drop"] : [`CITED #${Math.ceil(Math.random() * 5)}`, "cited"];
      setEvents((prev) => [[t, p, e, q, out[0], out[1]], ...prev].slice(0, 11));
    }, 2600);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="live-log" data-reveal>
      <div className="live-log-head">
        <span className="live">Harness running · 2,400 prompts · 6 engines</span>
        <span>Two-week sample · last refresh now</span>
      </div>
      <div className="live-log-body">
        {events.map((r, i) => (
          <div className="live-row" key={`${r[0]}-${r[1]}-${i}`}>
            <span className="t">{r[0]}</span>
            <span className="p">{r[1]}</span>
            <span className="e">{r[2]}</span>
            <span className="q">{r[3]}</span>
            <span className={`s ${r[5]}`}>{r[4]}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function HomeHero() {
  return (
    <section className="masthead" data-screen-label="01 Hero">
      <div className="wrap" style={{ position: "relative" }}>
        <OrbitStage />
        <h1 className="hero-headline">
          Be the <span className="strike">link.</span><br />
          Be the <span className="it">answer.</span>
        </h1>
        <div className="masthead-lede" data-reveal>
          <div className="where">
            Built for operators who already run paid and content, and who now
            watch their buyers open ChatGPT before they open Google.
          </div>
          <div>
            <p className="lede">
              We engineer your presence inside ChatGPT, Perplexity, Claude, and Gemini.
              Then we keep Google ranking the low-funnel pages that still pay your bills.
              GEO, SEO, paid acquisition, and the AI content engine feeding all of it.
              One team. One invoice. One dashboard you'll actually open on a Friday.
            </p>
            <div className="lede-cta">
              <a className="btn btn-primary" href="/contact">Book a 30-min intake →</a>
              <a className="btn btn-ghost" href="/services">See the practice</a>
            </div>
          </div>
        </div>
        <div className="masthead-meta" data-reveal>
          <div>
            <div className="k">Citation share growth · trailing 90d</div>
            <div className="v">+<span data-count="312" data-count-suffix="%" data-count-dur="1600">0</span> <span className="serif-it" style={{ fontSize: "0.7em", color: "var(--violet)" }}>median</span></div>
          </div>
          <div>
            <div className="k">Engines tracked</div>
            <div className="v"><span data-count="6" data-count-dur="900">0</span> <small>incl. ChatGPT, Perplexity, Claude</small></div>
          </div>
          <div>
            <div className="k">Active engagements</div>
            <div className="v"><span data-count="14" data-count-dur="900">0</span> <small>U.S. operators, B2B-skew</small></div>
          </div>
        </div>
        <LiveCitationLog />
      </div>
    </section>
  );
}

function EnginesSection() {
  const engines = [
    { name: "ChatGPT",     share: 64, latency: "180 ms", fmt: "Markdown + citations", fill: 92 },
    { name: "Perplexity",  share: 14, latency: "240 ms", fmt: "Inline + source list",  fill: 71 },
    { name: "Google AIO",  share:  9, latency: "320 ms", fmt: "Snippet card",          fill: 88 },
    { name: "Claude",      share:  6, latency: "210 ms", fmt: "Long-form, web search", fill: 64 },
    { name: "Gemini",      share:  4, latency: "260 ms", fmt: "Card + citations",      fill: 58 },
    { name: "Copilot",     share:  3, latency: "380 ms", fmt: "Tab summary",           fill: 47 },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div className="s-head" data-reveal>
          <div className="num"><span>§ 01</span><b>SURFACE INDEX</b></div>
          <div>
            <h2>Six engines now <span className="serif-it">decide</span> whether you exist.</h2>
            <p className="lede" style={{ marginTop: 20 }}>
              When the answer is generated, the citation list is the new front page.
              Miss it, and the click never happens. We track your share on every surface
              that matters and engineer the signals each one actually rewards. Numbers below
              are May 2026 U.S. market share. The fill bar is what our average client owns.
              Hover any cell for sampling detail.
            </p>
          </div>
        </div>
        <div className="engines" data-reveal data-reveal-stagger>
          {engines.map((e, i) => (
            <div className="engine" key={i}>
              <div className="e-share"><span>{String(i+1).padStart(2, "0")}</span><span>{e.share}% share</span></div>
              <div className="e-name">{e.name}</div>
              <div className="bar"><div className="fill" style={{ width: `${e.fill}%` }} /></div>
              <div className="e-status"><span className="ok">live retrieval</span></div>
              <div className="e-detail">
                <div className="row"><span>p50 latency</span><span>{e.latency}</span></div>
                <div className="row"><span>answer format</span><span>{e.fmt}</span></div>
                <div className="row"><span>sample cadence</span><span>2× / week</span></div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CapabilitiesSection() {
  const caps = [
    { n: "01", t: "Generative Engine Optimization", p: "We engineer the retrieval surface so AI engines name you, not your competitor. Prompt-coverage maps, entity pages, fact-graphs, third-party reinforcement.", tags: ["Prompt coverage", "Entity pages", "Fact-graph", "Citation tracking"] },
    { n: "02", t: "Search Engine Optimization", p: "The old playbook, run sharply. Technical foundations, content velocity, topic clusters, link earning. Measured against actual revenue, not vanity rank.", tags: ["Core Web Vitals", "Topic clusters", "Programmatic", "Digital PR"] },
    { n: "03", t: "AI Content Engineering", p: "Programmatic pages with hand-edited spines. Models draft. Retrieval-tuned templates structure. Humans verify every primary claim before anything ships.", tags: ["Pipelines", "Schema.org", "Editorial QA", "Fact-check"] },
    { n: "04", t: "Paid Acquisition", p: "Google, Meta, LinkedIn, and the new AI-ad surfaces. Conversion-API instrumentation, creative iteration, budget pacing by cohort instead of channel.", tags: ["Google Ads", "Meta", "LinkedIn", "CAPI"] },
    { n: "05", t: "Attribution & Analytics", p: "We wire your stack so AI-referred sessions show up as revenue, not 'direct/none.' GA4, server-side tagging, prompt-source attribution, cohort dashboards your CFO will read.", tags: ["GA4", "Server-side", "Mixpanel", "Prompt-source"] },
    { n: "06", t: "Agent Workflows", p: "AI agents wired into your stack. Prompt monitoring, brief drafting, asset QA, weekly competitive recon. We build it. You own it. No subscription rent.", tags: ["MCP", "Internal tools", "Prompt ops", "Recon"] },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div className="s-head" data-reveal>
          <div className="num"><span>§ 02</span><b>PRACTICE</b></div>
          <div>
            <h2>One agency. <span className="serif-it">Six</span> coordinated surfaces.</h2>
            <p className="lede" style={{ marginTop: 20 }}>
              Most agencies sell GEO and SEO as separate retainers. Different teams. Different
              decks. Different invoices. That math has never worked, and now it doesn't even
              pretend to. The same entity graph powers both pipelines. The same content engine
              feeds both surfaces. One team. One dashboard. One number to call.
            </p>
          </div>
        </div>
        <div className="caps" data-reveal data-reveal-stagger>
          {caps.map((c, i) => (
            <a key={i} className="cap" href="/services">
              <div className="n"><span>§ {c.n}</span><span className="arr">↗</span></div>
              <h3>{c.t}</h3>
              <p dangerouslySetInnerHTML={{ __html: c.p }} />
              <div className="cap-tags">{c.tags.map((t) => <span key={t}>{t}</span>)}</div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function StatsSection() {
  return (
    <section className="stats-strip">
      <div className="wrap">
        <span className="eyebrow"><span className="dot"></span>NUMBERS · TRAILING 12 MONTHS</span>
        <div className="stats-grid" data-reveal data-reveal-stagger>
          <div className="stat">
            <div className="num"><span data-count="4.1" data-count-dp="1" data-count-dur="1400">0</span><span className="it">×</span></div>
            <div className="lbl">Average lift in AI-referred organic revenue vs. the trailing quarter.</div>
          </div>
          <div className="stat">
            <div className="num"><span data-count="2400" data-count-sep="1" data-count-dur="1800">0</span></div>
            <div className="lbl">Buying-intent prompts we sample across 6 engines, twice a week.</div>
          </div>
          <div className="stat">
            <div className="num"><span data-count="38" data-count-dur="1200">0</span><span className="it">%</span></div>
            <div className="lbl">Of U.S. commercial queries already resolve inside an AI answer.</div>
          </div>
          <div className="stat">
            <div className="num"><span data-count="71" data-count-dur="1400">0</span><span className="it">%</span></div>
            <div className="lbl">Our best client's citation share inside ChatGPT on every prompt that matters to them.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function TwoOfferingsSection() {
  return (
    <section className="section">
      <div className="wrap">
        <div className="s-head" data-reveal>
          <div className="num"><span>§ 03</span><b>TWO TRACKS</b></div>
          <div>
            <h2>Both pipelines, <span className="serif-it">priced clearly.</span></h2>
          </div>
        </div>
        <div className="two-up" data-reveal>
          <section>
            <span className="eyebrow"><span className="dot"></span>GEO PIPELINE</span>
            <h3 style={{ marginTop: 14 }}>Generative Engine <span className="serif-it">Optimization</span></h3>
            <p style={{ marginTop: 8 }}>
              Living inside the answers your buyers see on ChatGPT, Perplexity, Claude,
              Gemini, and Copilot. We map the prompts that actually drive deals, build
              entity pages designed for retrieval, and tune the external signals until
              the citation lands. Then we make sure it sticks.
            </p>
            <ul>
              <li>Up to 500-prompt coverage map across 6 engines</li>
              <li>Entity-graph build &amp; schema deployment</li>
              <li>4 retrieval-tuned long-form pages / month</li>
              <li>Bi-weekly citation tracking dashboard</li>
              <li>Quarterly retrieval-corpus inclusion check</li>
            </ul>
          </section>
          <section>
            <span className="eyebrow"><span className="dot"></span>SEO + ADS PIPELINE</span>
            <h3 style={{ marginTop: 14 }}>Search &amp; Paid <span className="serif-it">Acquisition</span></h3>
            <p style={{ marginTop: 8 }}>
              The revenue line still paying your bills. Google organic, Google Ads, Meta,
              LinkedIn, kept healthy and instrumented so your AI-referred sessions show up
              as revenue instead of vanishing into 'direct/none.'
            </p>
            <ul>
              <li>Technical SEO sweep + Core Web Vitals baseline</li>
              <li>12-month content roadmap, 4 articles / month</li>
              <li>Paid acquisition on up to 3 channels</li>
              <li>GA4 + server-side instrumentation</li>
              <li>Friday metrics drop, every Friday</li>
            </ul>
          </section>
        </div>
      </div>
    </section>
  );
}

function ProcessPreview() {
  const steps = [
    { n: "01", t: "Audit", p: "Two weeks. We map your citation share, your indexable surface, and your technical foundations. You get a 20-page written diagnosis on day 14. No sales call required.", d: "2 weeks" },
    { n: "02", t: "Architecture", p: "Entity graph design, prompt-coverage map, content spine, schema deployment plan. You sign off on the 90-day target before anything ships.", d: "1 week" },
    { n: "03", t: "Pipeline", p: "Content engine goes live. Four retrieval-tuned pages publish every month, minimum. Technical fixes ship every Tuesday. The cadence is the product.", d: "Ongoing" },
    { n: "04", t: "Tracking", p: "250 prompts sampled twice weekly across 5 engines. Tuesday status note by noon. Friday metrics drop by four. Quarterly strategy review on the calendar.", d: "Ongoing" },
    { n: "05", t: "Compound", p: "Quarter two is where the entity graph starts feeding itself. We double prompt coverage and open paid channels where retrieval can't reach.", d: "Q2+" },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div className="s-head" data-reveal>
          <div className="num"><span>§ 04</span><b>OPERATING SYSTEM</b></div>
          <div>
            <h2>A five-stage <span className="serif-it">operating system,</span> in writing.</h2>
            <p className="lede" style={{ marginTop: 20 }}>
              No vibes. No mystery methodology with a trademark on it. Every engagement
              runs the same five stages on the same five-day rhythm. Every artifact is
              documented up front. Tuesday note by noon. Friday drop by four. Every week.
              Every engagement.
            </p>
          </div>
        </div>
        <div className="steps" data-reveal data-reveal-stagger>
          {steps.map((s) => (
            <div className="step" key={s.n}>
              <div className="n">STAGE {s.n}</div>
              <h3>{s.t}</h3>
              <p>{s.p}</p>
              <div className="dur">{s.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function WorkPreview() {
  return (
    <section className="section">
      <div className="wrap">
        <div className="s-head" data-reveal>
          <div className="num"><span>§ 05</span><b>FIELD REPORTS</b></div>
          <div>
            <h2>Recent <span className="serif-it">work</span> — three of fourteen.</h2>
          </div>
        </div>
        <div className="work-grid" data-reveal>
          <a className="work-card tall" href="/work">
            <div className="work-art tall" data-photo data-photo-credit="Photo: Tiger Lily / Pexels" style={{ backgroundImage: "url('images/home-data.jpg')" }}>
              <span className="stat-lbl">CASE 014 · B2B SaaS</span>
              <span className="stat-tag">↗ GEO</span>
              <svg className="orbit-mini" viewBox="0 0 400 400" fill="none">
                <g stroke="rgba(255,255,255,0.45)" strokeWidth="0.8">
                  <ellipse cx="200" cy="200" rx="160" ry="60" />
                  <ellipse cx="200" cy="200" rx="160" ry="60" transform="rotate(45 200 200)" />
                  <ellipse cx="200" cy="200" rx="160" ry="60" transform="rotate(90 200 200)" />
                  <ellipse cx="200" cy="200" rx="160" ry="60" transform="rotate(135 200 200)" />
                </g>
                <circle cx="200" cy="200" r="10" fill="oklch(0.92 0.16 96)" />
              </svg>
              <div className="big-stat">+482<span className="pct">%</span></div>
            </div>
            <div className="work-body">
              <div className="work-meta"><span>HEXION ANALYTICS</span><span>2026 · 7 MONTHS</span></div>
              <h3>From invisible to default-cited inside ChatGPT for "best B2B revops platform."</h3>
              <p>We built the entity graph, deployed 24 retrieval-tuned pages, and earned 9 third-party reinforcements. By month four, Hexion was the first name in 71% of tracked answers across five engines.</p>
              <div className="work-foot">
                <span className="work-meta"><span>GEO · SEO · CONTENT</span></span>
                <span className="read">READ FIELD REPORT →</span>
              </div>
            </div>
          </a>
          <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
            <a className="work-card" href="/work">
              <div className="work-art" data-photo data-photo-credit="Photo: Ata Y. / Pexels" style={{ backgroundImage: "url('images/home-coffee.jpg')" }}>
                <span className="stat-lbl">CASE 011 · DTC</span>
                <span className="stat-tag">↗ SEO + ADS</span>
                <svg className="bar-mini" viewBox="0 0 400 240" fill="none">
                  <g stroke="rgba(255,255,255,0.45)" strokeWidth="0.8" fill="rgba(255,255,255,0.06)">
                    <rect x="40" y="160" width="30" height="40" />
                    <rect x="90" y="140" width="30" height="60" />
                    <rect x="140" y="110" width="30" height="90" />
                    <rect x="190" y="80" width="30" height="120" />
                    <rect x="240" y="50" width="30" height="150" />
                    <rect x="290" y="20" width="30" height="180" />
                  </g>
                </svg>
                <div className="big-stat">3.4<span className="pct">×</span></div>
              </div>
              <div className="work-body">
                <div className="work-meta"><span>NORTHRIDGE COFFEE</span><span>2025 · 11 MONTHS</span></div>
                <h3>3.4× the subscription revenue. 41% less spent winning each new customer.</h3>
              </div>
            </a>
            <a className="work-card" href="/work">
              <div className="work-art" data-photo data-photo-credit="Photo: Christian Wasserfallen / Pexels" style={{ backgroundImage: "url('images/home-law.jpg')" }}>
                <span className="stat-lbl">CASE 009 · LEGAL</span>
                <span className="stat-tag">↗ GEO</span>
                <svg className="grid-mini" viewBox="0 0 400 240" fill="none">
                  <g stroke="rgba(255,255,255,0.4)" strokeWidth="0.6">
                    {[40,80,120,160,200].map((y) => <line key={y} x1="20" y1={y} x2="380" y2={y} />)}
                    {[40,90,140,190,240,290,340].map((x) => <line key={x} x1={x} y1="20" y2="220" x2={x} />)}
                  </g>
                </svg>
                <div className="big-stat">71<span className="pct">%</span></div>
              </div>
              <div className="work-body">
                <div className="work-meta"><span>OAKLEY &amp; HUNT LLP</span><span>2026 · 5 MONTHS</span></div>
                <h3>The first law firm Perplexity names. On every prompt that matters in their market.</h3>
              </div>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function QuotesSection() {
  return (
    <section className="section">
      <div className="wrap">
        <div className="s-head" data-reveal>
          <div className="num"><span>§ 06</span><b>TESTIMONY</b></div>
          <div>
            <h2>What <span className="serif-it">operators</span> say afterward.</h2>
          </div>
        </div>
        <div className="quote-row" data-reveal>
          <div className="quote-big">
            <div className="qmark">"</div>
            <p>
              Six months in, ChatGPT names us first when buyers ask the three questions our
              category is built around. That one thing has reshaped our pipeline more than
              everything we shipped in the five years before it.
            </p>
            <div className="quote-foot">
              <div className="q-avatar" aria-hidden="true">◑</div>
              <div>
                <div className="q-name">VP Marketing · B2B SaaS, RevOps category</div>
                <div className="q-meta">CASE 014 · MAR 2026 · NAME WITHHELD ON REQUEST</div>
              </div>
            </div>
          </div>
          <div className="quote-small">
            <div className="quote-mini">
              <p>"They sent the engagement-killer email in week three — 'this won't work for you, here's why.' We hired them on the spot."</p>
              <div className="q-foot"><b>Managing Partner</b> · Boutique commercial-litigation firm · CASE 009</div>
            </div>
            <div className="quote-mini">
              <p>"The only agency I've worked with that sends a Tuesday status note. Every Tuesday. No exceptions. It's a small thing that says everything."</p>
              <div className="q-foot"><b>Owner</b> · DTC subscription brand · CASE 011</div>
            </div>
            <div className="quote-mini">
              <p>"They build the dashboard, they hand you the dashboard, you read the dashboard. No mystery."</p>
              <div className="q-foot"><b>Head of Growth</b> · Climate B2B · CASE 013</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Home() {
  React.useEffect(() => { installPageTransitions(); }, []);
  return (
    <React.Fragment>
      <Header />
      <Ticker />
      <main id="main">
        <HomeHero />
        <Marquee />
        <EnginesSection />
        <CapabilitiesSection />
        <StatsSection />
        <TwoOfferingsSection />
        <ProcessPreview />
        <WorkPreview />
        <QuotesSection />
        <FaqHome />
        <FinalCTA />
      </main>
      <Footer />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<Home />);