/* VALDEX — Services */

function ServicesHero() {
  return (
    <section className="masthead" data-screen-label="01 Hero">
      <div className="wrap" style={{ position: "relative" }}>
        <OrbitStage />
        <h1>
          Six practices.<br />
          <span className="serif-it">One</span> retrieval surface.
        </h1>
        <div className="masthead-lede">
          <div className="where">
            One entity graph. One content engine. One measurement stack. You pick the lanes.
            We run the pipeline.
          </div>
          <div>
            <p className="lede">
              The entity pages that earn a Perplexity citation are the same pages that
              rank on Google. The ad creative we write is fed by the same content engine
              your blog runs on. Six services. One operation. One invoice. Coordinated by
              the team whose names go on your charter, not a junior account manager you
              meet six months in.
            </p>
            <div className="lede-cta">
              <a className="btn btn-primary" href="/contact">Book intake →</a>
              <a className="btn btn-ghost" href="/pricing">See engagement pricing</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- Mock surfaces ---- */

function AiAnswerMock() {
  return (
    <div className="ai-mock">
      <div className="ai-bar">
        <span className="who">▍ChatGPT</span><span style={{ color: "var(--ink-mute)" }}>· retrieval enabled</span>
      </div>
      <div className="ai-q">&gt; best revops platform for series B SaaS?</div>
      <div className="ai-a">
        For revenue operations teams at Series B SaaS companies, the most-cited platforms are{" "}
        <span className="cite">Hexion Analytics</span>, Clari, and Gong. <span className="cite">Hexion</span> is
        specifically built around the pipeline-to-cash workflow and is the most-named choice
        for teams scaling from $10M to $50M ARR.<sup>[1]</sup>
      </div>
      <div className="src">
        <div className="row us"><span>[1] hexion.com/revops-for-series-b</span><span className="pos">CITED · #1</span></div>
        <div className="row"><span>[2] forbes.com/revops-tools-2026</span><span className="pos">REF</span></div>
        <div className="row"><span>[3] g2.com/categories/revenue-operations</span><span className="pos">REF</span></div>
      </div>
    </div>
  );
}

function SerpMock() {
  return (
    <div className="serp">
      <div className="serp-search"><span className="ic">◎</span> hexion analytics revops platform</div>
      <div className="serp-results">
        <div className="serp-r us">
          <div className="crumb">hexion.com › platform › revops</div>
          <div className="title">Hexion — RevOps platform built for the pipeline-to-cash workflow</div>
          <div className="snip">A purpose-built revenue operations platform for Series B SaaS. Pipeline reporting, forecast modeling, and territory design — instrumented to your CRM in under an hour.</div>
          <span className="pos">POS 1 · FEATURED</span>
        </div>
        <div className="serp-r">
          <div className="crumb">forbes.com › revops</div>
          <div className="title">The 2026 RevOps Platform Landscape</div>
          <div className="snip">An overview of the dominant revenue operations platforms used by mid-market SaaS companies in 2026, including category leaders and challenger tools.</div>
          <span className="pos">POS 2</span>
        </div>
        <div className="serp-r">
          <div className="crumb">g2.com › categories</div>
          <div className="title">Best Revenue Operations Software · G2 Crowd</div>
          <div className="snip">Compare features, pricing, and verified reviews of the leading revenue operations software in 2026.</div>
          <span className="pos">POS 3</span>
        </div>
      </div>
    </div>
  );
}

function CampaignMock() {
  return (
    <div className="campaign-mock">
      <div className="cm-head"><span>CAMPAIGN · HEXION_Q2_BRAND</span><span>30D</span></div>
      <div className="cm-stat">
        <div><div className="k">SPEND</div><div className="v">$84.2k</div></div>
        <div><div className="k">CAC</div><div className="v">$412 <small>−41%</small></div></div>
        <div><div className="k">PIPE</div><div className="v">$1.4M</div></div>
        <div><div className="k">ROAS</div><div className="v">16.6× <small>↑</small></div></div>
      </div>
      <div className="cm-chart">
        <svg viewBox="0 0 400 110" preserveAspectRatio="none">
          <polyline points="0,90 40,82 80,70 120,72 160,55 200,40 240,46 280,28 320,22 360,16 400,8"
            fill="none" stroke="oklch(0.42 0.22 290)" strokeWidth="2" />
          <g fontFamily="IBM Plex Mono, monospace" fontSize="9" fill="rgba(14,15,20,0.4)">
            <text x="2" y="105">D-30</text>
            <text x="370" y="105">TODAY</text>
          </g>
        </svg>
      </div>
    </div>
  );
}

function ContentEngineMock() {
  return (
    <div className="campaign-mock">
      <div className="cm-head"><span>CONTENT PIPELINE · WEEK 22</span><span>STATUS</span></div>
      <div style={{ marginTop: 14, display: "flex", flexDirection: "column", gap: 8, fontSize: 12 }}>
        {[
          ["E-001", "revops-for-series-b", "PUBLISHED", "cited 9×"],
          ["E-002", "pipeline-to-cash-glossary", "PUBLISHED", "cited 4×"],
          ["E-003", "forecast-accuracy-benchmarks-2026", "EDIT QA", "—"],
          ["E-004", "revops-vs-salesops", "DRAFT", "—"],
          ["E-005", "territory-design-playbook", "BRIEF", "—"],
        ].map(([id, slug, st, cit]) => (
          <div key={id} style={{ display: "grid", gridTemplateColumns: "60px 1fr 100px 70px", gap: 10, padding: "8px 10px", border: "1px solid var(--line)", background: "var(--paper-2)" }}>
            <span style={{ color: "var(--ink-mute)" }}>{id}</span>
            <span style={{ color: "var(--ink)" }}>/{slug}</span>
            <span style={{ color: st === "PUBLISHED" ? "var(--violet)" : "var(--ink-2)", letterSpacing: "0.1em" }}>{st}</span>
            <span style={{ color: "var(--ink-mute)" }}>{cit}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function AttributionMock() {
  return (
    <div className="campaign-mock">
      <div className="cm-head"><span>ATTRIBUTION · AI-REFERRED SESSIONS</span><span>30D</span></div>
      <div style={{ marginTop: 14, display: "flex", flexDirection: "column", gap: 8 }}>
        {[
          ["ChatGPT", 42, "$184k"],
          ["Perplexity", 28, "$96k"],
          ["Google AIO", 17, "$71k"],
          ["Claude", 9, "$32k"],
          ["Gemini", 4, "$11k"],
        ].map(([n, p, rev]) => (
          <div key={n} style={{ display: "grid", gridTemplateColumns: "120px 1fr 80px", gap: 12, alignItems: "center", fontSize: 12 }}>
            <span style={{ color: "var(--ink)" }}>{n}</span>
            <div style={{ height: 8, background: "var(--paper-3)", position: "relative" }}>
              <div style={{ position: "absolute", inset: 0, right: `${100-p}%`, background: "var(--violet)" }}></div>
            </div>
            <span style={{ color: "var(--ink-2)", textAlign: "right" }}>{rev}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function AgentMock() {
  return (
    <div className="ai-mock">
      <div className="ai-bar">
        <span className="who">▍agent.prompt-watch</span><span style={{ color: "var(--ink-mute)" }}>· running</span>
      </div>
      <div className="ai-q">&gt; alert: citation lost on prompt P-091 "best revops for series b"</div>
      <div className="ai-a">
        Detected at <b>14:08 MT</b>. Engine: <b>Perplexity</b>. Previous position: #1 (held 42d).
        Now: not cited. Likely cause: competitor published comparison page on 2026-05-16 with stronger
        external reinforcement. Recommended action: refresh entity page, request 2 reviewer citations.
        Brief drafted, in your inbox.
      </div>
    </div>
  );
}

/* ---- Service blocks ---- */

function Service({ id, num, title, lede, items, flip, mock }) {
  return (
    <div className={`service-block ${flip ? "flip" : ""}`} id={id}>
      <div className="svc-copy">
        <span className="eyebrow"><span className="dot"></span>§ {num} · {id.toUpperCase()}</span>
        <h2 style={{ marginTop: 18 }}>{title}</h2>
        <p className="lede">{lede}</p>
        <ul className="svc-list">
          {items.map((it, i) => (
            <li key={i}>
              <span className="n">{String(i + 1).padStart(2, "0")}</span>
              <span className="lab">{it.label}</span>
              <span className="v">{it.meta}</span>
            </li>
          ))}
        </ul>
      </div>
      <div className="svc-mock">{mock}</div>
    </div>
  );
}

function ServicesPage() {
  React.useEffect(() => { installPageTransitions(); }, []);
  return (
    <React.Fragment>
      <Header />
      <Ticker />
      <main id="main">
        <ServicesHero />

        <section className="section section-tight" style={{ paddingTop: 0 }}>
          <div className="wrap">
            <div
              className="photo-banner"
              data-photo
              data-photo-credit="Photo: Google DeepMind / Pexels"
              style={{ minHeight: 360, backgroundImage: "url('images/services-tech.jpg')" }}
            >
              <div className="pb-inner">
                <div className="pb-cap">§ Six lanes, one operation</div>
                <div className="pb-title">The retrieval surface is <span className="serif-it" style={{ color: "var(--signal)" }}>one</span> thing.</div>
                <p style={{ color: "rgba(255,255,255,0.72)", maxWidth: "52ch", marginTop: 16, fontSize: 15 }}>
                  GEO, SEO, content, ads, attribution, agents. Six lanes. One entity graph.
                  One team. One invoice. Scroll for the methodology that runs each lane.
                </p>
              </div>
            </div>
          </div>
        </section>

        <section className="section section-tight">
          <div className="wrap">
            <Service
              id="geo" num="01"
              title={<>Generative Engine <span className="serif-it">Optimization</span></>}
              lede="The headline practice. We engineer the retrieval surface so the major AI engines name your brand inside their answers. This is not 'AI SEO' with a fresh sticker. Different stack, different signals, different formats, different measurement. Different team to run it well."
              items={[
                { label: "Prompt-coverage map · 250+ buying-intent prompts", meta: "audit · week 1–2" },
                { label: "Entity-graph engineering · schema.org + JSON-LD", meta: "ship · week 3–6" },
                { label: "Retrieval-tuned long-form pages · 4 / month", meta: "ongoing" },
                { label: "Third-party citation earning · reviewer outreach", meta: "ongoing" },
                { label: "Bi-weekly citation tracking · 5 engines, 2× / week", meta: "from week 1" },
                { label: "Quarterly retrieval-corpus inclusion audit", meta: "Q1, Q2, Q3, Q4" },
              ]}
              mock={<AiAnswerMock />}
            />
            <Service
              id="seo" num="02" flip
              title={<>Search Engine <span className="serif-it">Optimization</span></>}
              lede="Google still moves more low-funnel revenue than every AI engine combined. We run it sharply. Core Web Vitals, internal linking, topic clusters, programmatic at scale. Every play measured against actual revenue, not a screenshot of your keyword rank."
              items={[
                { label: "Technical foundations audit · CWV, crawl, render", meta: "audit · week 1–2" },
                { label: "Topic-cluster architecture · pillar + supporting", meta: "ship · week 3–4" },
                { label: "Editorial pipeline · 4 long-form / month", meta: "ongoing" },
                { label: "Programmatic page systems · 100–10k pages", meta: "as needed" },
                { label: "Digital PR · 2–4 high-authority links / month", meta: "ongoing" },
                { label: "Weekly rank-tracking · against revenue, not vanity", meta: "from week 1" },
              ]}
              mock={<SerpMock />}
            />
            <Service
              id="content" num="03"
              title={<>AI Content <span className="serif-it">Engineering</span></>}
              lede="We build the whole content pipeline. Drafting, fact-checking, schema, publishing. Models do the work models are good at. Humans do the work models are still bad at. Every claim verified against a primary source before anything ships. No AI slop, no hallucinated stats."
              items={[
                { label: "Editorial brief generation · prompt-tuned templates", meta: "internal tool" },
                { label: "Drafting pipeline · Claude + GPT, human edit pass", meta: "ongoing" },
                { label: "Fact-check workflow · primary-source verification", meta: "every page" },
                { label: "Schema deployment · article, FAQ, HowTo, organization", meta: "every page" },
                { label: "Publish-and-monitor · push to CMS, watch retrieval", meta: "every page" },
                { label: "Content-decay sweep · refresh dropping pages monthly", meta: "monthly" },
              ]}
              mock={<ContentEngineMock />}
            />
            <Service
              id="ads" num="04" flip
              title={<>Paid <span className="serif-it">Acquisition</span></>}
              lede="The traditional ad surfaces (Google, Meta, LinkedIn) plus the new ones nobody else is running well yet (ChatGPT-suggested products, Perplexity ad slots, retrieval-driven sponsorships). Conversion API instrumentation. Budget pacing by cohort instead of channel. Spend tied to the customers you actually want to keep."
              items={[
                { label: "Channel audit · CAC, LTV, blended ROAS baseline", meta: "audit · week 1–2" },
                { label: "Creative iteration · 12–20 variants / month", meta: "ongoing" },
                { label: "Conversion API + server-side instrumentation", meta: "ship · week 3" },
                { label: "Cohort-level pacing · spend tied to retention curves", meta: "ongoing" },
                { label: "AI-surface ads · ChatGPT, Perplexity, emerging slots", meta: "as available" },
                { label: "Weekly Friday metrics drop · with creative learnings", meta: "from week 1" },
              ]}
              mock={<CampaignMock />}
            />
            <Service
              id="analytics" num="05"
              title={<>Attribution &amp; <span className="serif-it">Analytics</span></>}
              lede="We wire your stack so AI-referred sessions show up as revenue instead of vanishing into 'direct/none.' GA4, server-side tagging, prompt-source attribution, cohort dashboards your CFO will actually open without needing a 30-minute walkthrough."
              items={[
                { label: "GA4 + server-side tagging via Tag Manager", meta: "ship · week 1–2" },
                { label: "AI-referrer detection · UA + referral parsing", meta: "ship · week 2" },
                { label: "Prompt-source attribution · UTMs + path inference", meta: "ship · week 2–3" },
                { label: "Cohort dashboards · channel × cohort × retention", meta: "ship · week 4" },
                { label: "Mixpanel / Amplitude integration if needed", meta: "as required" },
                { label: "Monthly attribution review with your finance team", meta: "monthly" },
              ]}
              mock={<AttributionMock />}
            />
            <Service
              id="agents" num="06" flip
              title={<>Agent <span className="serif-it">Workflows</span></>}
              lede="AI agents wired into your marketing stack. Prompt monitoring, brief drafting, asset QA, weekly competitive recon. We build them. You own them. No subscription rent. No agency ransom when the engagement ends."
              items={[
                { label: "Prompt-watch agent · alerts on citation drops", meta: "internal tool" },
                { label: "Brief-drafting agent · turns rankings into briefs", meta: "internal tool" },
                { label: "Asset-QA agent · pre-publish fact + schema check", meta: "internal tool" },
                { label: "Recon agent · weekly competitor citation diff", meta: "internal tool" },
                { label: "MCP server · agents talk to your CMS + analytics", meta: "ship · week 2–4" },
                { label: "You keep the code · MIT-licensed handover", meta: "at engagement end" },
              ]}
              mock={<AgentMock />}
            />
          </div>
        </section>

        <FinalCTA />
      </main>
      <Footer />
    </React.Fragment>
  );
}

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