/* VALDEX — Work / Field reports */

function WorkHero() {
  return (
    <section className="masthead" data-screen-label="01 Hero">
      <div className="wrap" style={{ position: "relative" }}>
        <OrbitStage />
        <h1>
          Field <span className="strike">reports</span><br />
          from the <span className="serif-it">retrieval surface.</span>
        </h1>
        <div className="masthead-lede">
          <div className="where">
            Every number reconciled against client GA4, ad-platform exports, and our own
            citation-tracking corpus. Logos withheld while the engagement is still live.
          </div>
          <div>
            <p className="lede">
              Fourteen engagements, active or closed, since we opened the doors. Three full
              field reports below. The other eleven sit in the ledger beneath them. Citation
              share, revenue lift, CAC delta. The receipts are real and available on request.
            </p>
            <div className="lede-cta">
              <a className="btn btn-primary" href="/contact">Book intake →</a>
              <a className="btn btn-ghost" href="/services">See the practice</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function FieldReport({ idx, client, sector, range, headline, summary, results, geo, art, flip, photo, credit }) {
  return (
    <div className="service-block" style={{ gridTemplateColumns: flip ? "1fr 1.05fr" : "1.05fr 1fr" }}>
      <div className="svc-copy" style={{ order: flip ? 2 : 1 }}>
        <span className="eyebrow"><span className="dot"></span>CASE {idx} · {sector}</span>
        <h2 style={{ marginTop: 18, fontSize: "clamp(34px, 4.4vw, 56px)" }}>{headline}</h2>
        <p className="lede" style={{ marginTop: 20 }}>{summary}</p>
        <ul className="svc-list" style={{ marginTop: 28 }}>
          {results.map((r, i) => (
            <li key={i}>
              <span className="n">{String(i + 1).padStart(2, "0")}</span>
              <span className="lab">{r.label}</span>
              <span className="v">{r.value}</span>
            </li>
          ))}
        </ul>
        <div style={{ marginTop: 24, display: "flex", gap: 18, flexWrap: "wrap", fontFamily: "var(--font-mono)", fontSize: 11.5, color: "var(--ink-mute)", letterSpacing: "0.1em", textTransform: "uppercase" }}>
          <span><b style={{ color: "var(--ink)" }}>CLIENT</b> {client}</span>
          <span><b style={{ color: "var(--ink)" }}>SECTOR</b> {sector}</span>
          <span><b style={{ color: "var(--ink)" }}>WINDOW</b> {range}</span>
          <span><b style={{ color: "var(--ink)" }}>GEO</b> {geo}</span>
        </div>
      </div>
      <div
        className="svc-mock field-art"
        data-photo
        data-photo-credit={credit}
        style={{
          order: flip ? 1 : 2,
          background: "var(--paper-deep)",
          backgroundImage: photo ? `url('${photo}')` : undefined,
          color: "var(--paper)",
          padding: 0, minHeight: 480, position: "relative", overflow: "hidden",
        }}
      >
        {art}
      </div>
    </div>
  );
}

/* Each art: a tight visual summary of the case */

function HexionArt() {
  return (
    <React.Fragment>
      <div style={{ position: "absolute", inset: 0, padding: "28px 32px", display: "flex", flexDirection: "column", justifyContent: "space-between", zIndex: 2 }}>
        <div style={{ display: "flex", justifyContent: "space-between", fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.16em", color: "rgba(255,255,255,0.55)", textTransform: "uppercase" }}>
          <span>HEXION ANALYTICS / GEO PIPELINE</span><span>OCT 2025 → MAY 2026</span>
        </div>
        <div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: "clamp(72px, 11vw, 144px)", fontWeight: 600, letterSpacing: "-0.05em", lineHeight: 0.85, color: "#fff" }}>
            +482<span style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", color: "var(--signal)", fontWeight: 400 }}>%</span>
          </div>
          <div style={{ marginTop: 14, fontSize: 13, color: "rgba(255,255,255,0.65)", maxWidth: "32ch", lineHeight: 1.5 }}>
            Citation share inside ChatGPT for the 24 buying-intent prompts that define
            their category, sampled twice weekly.
          </div>
          <div style={{ marginTop: 24, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.08em", color: "rgba(255,255,255,0.55)" }}>
            <div><b style={{ color: "#fff" }}>CITED IN 71%</b> of tracked answers by month 4</div>
            <div><b style={{ color: "#fff" }}>24 PAGES</b> deployed to retrieval-tuned entity graph</div>
          </div>
        </div>
      </div>
      <svg viewBox="0 0 500 500" style={{ position: "absolute", inset: 0, opacity: 0.5 }}>
        <g fill="none" stroke="rgba(255,255,255,0.4)" strokeWidth="0.6">
          {[60, 110, 160, 220].map((r) => <circle key={r} cx="370" cy="120" r={r} />)}
        </g>
        <circle cx="370" cy="120" r="9" fill="oklch(0.92 0.16 96)" />
        <circle cx="430" cy="120" r="3" fill="rgba(255,255,255,0.8)" />
        <circle cx="370" cy="60" r="3" fill="rgba(255,255,255,0.8)" />
        <circle cx="260" cy="200" r="3" fill="rgba(255,255,255,0.6)" />
      </svg>
    </React.Fragment>
  );
}

function NorthridgeArt() {
  return (
    <React.Fragment>
      <div style={{ position: "absolute", inset: 0, padding: "28px 32px", display: "flex", flexDirection: "column", justifyContent: "space-between", zIndex: 2 }}>
        <div style={{ display: "flex", justifyContent: "space-between", fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.16em", color: "rgba(255,255,255,0.55)", textTransform: "uppercase" }}>
          <span>NORTHRIDGE COFFEE / PAID + SEO</span><span>JUN 2025 → MAY 2026</span>
        </div>
        <div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: "clamp(72px, 11vw, 144px)", fontWeight: 600, letterSpacing: "-0.05em", lineHeight: 0.85, color: "#fff" }}>
            3.4<span style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", color: "var(--signal)", fontWeight: 400 }}>×</span>
          </div>
          <div style={{ marginTop: 14, fontSize: 13, color: "rgba(255,255,255,0.65)", maxWidth: "34ch", lineHeight: 1.5 }}>
            Subscription revenue lift across the full 11-month window. CAC down 41%; LTV:CAC
            from 2.1 to 5.8.
          </div>
        </div>
      </div>
      <svg viewBox="0 0 500 240" style={{ position: "absolute", bottom: 0, left: 0, right: 0, opacity: 0.35 }}>
        <g stroke="rgba(255,255,255,0.6)" strokeWidth="0.8" fill="rgba(255,255,255,0.06)">
          {Array.from({length: 11}, (_, i) => (
            <rect key={i} x={20 + i * 42} y={200 - (i * 16 + 20)} width="28" height={i * 16 + 20} />
          ))}
        </g>
      </svg>
    </React.Fragment>
  );
}

function OakleyArt() {
  return (
    <React.Fragment>
      <div style={{ position: "absolute", inset: 0, padding: "28px 32px", display: "flex", flexDirection: "column", justifyContent: "space-between", zIndex: 2 }}>
        <div style={{ display: "flex", justifyContent: "space-between", fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.16em", color: "rgba(255,255,255,0.55)", textTransform: "uppercase" }}>
          <span>OAKLEY &amp; HUNT LLP / GEO</span><span>DEC 2025 → MAY 2026</span>
        </div>
        <div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: "clamp(72px, 11vw, 144px)", fontWeight: 600, letterSpacing: "-0.05em", lineHeight: 0.85, color: "#fff" }}>
            71<span style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", color: "var(--signal)", fontWeight: 400 }}>%</span>
          </div>
          <div style={{ marginTop: 14, fontSize: 13, color: "rgba(255,255,255,0.65)", maxWidth: "32ch", lineHeight: 1.5 }}>
            Of Perplexity answers for their five core practice prompts now name the firm
            in the citation list.
          </div>
        </div>
      </div>
      <svg viewBox="0 0 500 500" style={{ position: "absolute", inset: 0, opacity: 0.3 }}>
        <g stroke="rgba(255,255,255,0.55)" strokeWidth="0.6">
          {Array.from({length: 9}).map((_, i) => <line key={`h${i}`} x1="0" y1={i * 56 + 30} x2="500" y2={i * 56 + 30} />)}
          {Array.from({length: 9}).map((_, i) => <line key={`v${i}`} x1={i * 56 + 30} y1="0" x2={i * 56 + 30} y2="500" />)}
        </g>
        <g fill="oklch(0.92 0.16 96)">
          <circle cx="142" cy="142" r="5" />
          <circle cx="310" cy="198" r="5" />
          <circle cx="254" cy="310" r="5" />
          <circle cx="422" cy="366" r="5" />
          <circle cx="86" cy="366" r="5" />
        </g>
      </svg>
    </React.Fragment>
  );
}

/* Ledger of remaining 11 cases */
function Ledger() {
  const rows = [
    ["014", "Hexion Analytics", "B2B SaaS · RevOps", "GEO · SEO · Content", "OCT 25 → MAY 26", "+482% citation"],
    ["013", "Selvedge Climate", "Climate · B2B", "GEO · Analytics", "JAN 26 → MAY 26", "+218% citation"],
    ["012", "Atlas Sound Health", "Healthcare · DTC", "SEO · Content", "MAR 26 → MAY 26", "Active"],
    ["011", "Northridge Coffee", "DTC · Subscription", "Paid · SEO", "JUN 25 → MAY 26", "3.4× revenue"],
    ["010", "Boring Compute", "Infra · B2B", "GEO · Agents", "FEB 26 → MAY 26", "Active"],
    ["009", "Oakley & Hunt LLP", "Legal · Boutique", "GEO", "DEC 25 → MAY 26", "71% citation"],
    ["008", "Ferrybank Capital", "Finance · Private", "SEO · Content", "AUG 25 → MAR 26", "−38% CAC"],
    ["007", "Mountain Loom Studio", "Crafts · DTC", "SEO · Paid", "JUL 25 → FEB 26", "2.1× revenue"],
    ["006", "Pinion Tools Co.", "Hardware · DTC", "SEO · Content", "MAY 25 → DEC 25", "Top-3 on 28 terms"],
    ["005", "Cordage Insurance", "Insurance · B2B", "GEO pilot", "APR 25 → AUG 25", "Pilot · 3 months"],
    ["004", "Mesa Civic Arts", "Nonprofit · Civic", "Pro bono · SEO", "MAR 25 → ONGOING", "+312% organic"],
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div className="s-head">
          <div className="num"><span>§ 04</span><b>FULL LEDGER</b></div>
          <div>
            <h2>Eleven more, <span className="serif-it">in brief.</span></h2>
            <p className="lede" style={{ marginTop: 20 }}>
              The complete engagement ledger since we opened the doors. We turn down more
              work than we take, which is why this list is short and not getting longer in
              a hurry. Full case decks available under NDA on the intake call.
            </p>
          </div>
        </div>
        <div style={{ borderTop: "1.5px solid var(--ink)" }}>
          {rows.map((r, i) => (
            <div key={i} style={{
              display: "grid", gridTemplateColumns: "60px 1.6fr 1.2fr 1.2fr 1.2fr 1fr",
              gap: 16, padding: "20px 0", borderBottom: "1px solid var(--line)",
              alignItems: "center", fontSize: 14
            }}>
              <span className="mono" style={{ color: "var(--violet)", letterSpacing: "0.12em" }}>{r[0]}</span>
              <span style={{ fontFamily: "var(--font-display)", fontSize: 20, fontWeight: 500, letterSpacing: "-0.02em" }}>{r[1]}</span>
              <span style={{ color: "var(--ink-2)" }}>{r[2]}</span>
              <span className="mono" style={{ fontSize: 11.5, color: "var(--ink-mute)", letterSpacing: "0.08em" }}>{r[3]}</span>
              <span className="mono" style={{ fontSize: 11.5, color: "var(--ink-mute)", letterSpacing: "0.08em" }}>{r[4]}</span>
              <span className="mono" style={{ fontSize: 12, color: "var(--ink)", textAlign: "right", letterSpacing: "0.04em" }}>{r[5]}</span>
            </div>
          ))}
        </div>
        <style>{`
          @media (max-width: 800px) {
            .wrap > div[style*="grid-template-columns: 60px"] {
              grid-template-columns: 50px 1fr !important;
            }
            .wrap > div[style*="grid-template-columns: 60px"] > span:nth-child(n+3) {
              grid-column: 2; font-size: 12px !important;
            }
          }
        `}</style>
      </div>
    </section>
  );
}

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

        <section className="section section-tight">
          <div className="wrap">
            <div className="s-head">
              <div className="num"><span>§ 01–03</span><b>HEADLINE REPORTS</b></div>
              <div>
                <h2>Three full <span className="serif-it">field reports</span> — the rest below.</h2>
              </div>
            </div>
            <FieldReport
              idx="014" client="Hexion Analytics" sector="B2B SaaS · RevOps" range="7 months"
              geo="U.S. · series B"
              photo="images/work-data.jpg" credit="Photo: Tiger Lily / Pexels"
              headline={<>From zero mentions to the first name ChatGPT reaches for.</>}
              summary="Hexion is a RevOps platform for Series B SaaS. When we started, ChatGPT didn't name them once across the 24 buying-intent prompts that define their category. Not once. Seven months later, after a rebuilt entity graph and 24 retrieval-tuned long-form pages, Hexion appears in 71% of answers and gets named first in 42% of them."
              results={[
                { label: "Citation share growth across 24 tracked prompts", value: "+482%" },
                { label: "Named first in ChatGPT answers (vs. 0% at start)", value: "42%" },
                { label: "Inbound AI-attributed pipeline created", value: "$1.4M" },
                { label: "Retrieval-tuned long-form pages deployed", value: "24" },
              ]}
              art={<HexionArt />}
            />
            <FieldReport
              idx="011" flip client="Northridge Coffee" sector="DTC · Subscription" range="11 months"
              geo="U.S. · DTC"
              photo="images/work-coffee.jpg" credit="Photo: Jess Ho / Pexels"
              headline={<>3.4× the subscription revenue. CAC down 41%. Same brand, no new investors.</>}
              summary="Northridge sells single-origin coffee on a subscription. Paid was the bottleneck. CAC was climbing faster than LTV, the spreadsheet had stopped being fun, and the founder knew it. We rebuilt the SEO foundation, rewrote 60% of the product pages, and restructured their Meta and Google accounts around retention cohorts instead of weekly ROAS panic."
              results={[
                { label: "Subscription revenue, 11-month window", value: "3.4×" },
                { label: "Blended CAC reduction", value: "−41%" },
                { label: "LTV:CAC ratio, before → after", value: "2.1 → 5.8" },
                { label: "Organic sessions, MoM by month 9", value: "+167%" },
              ]}
              art={<NorthridgeArt />}
            />
            <FieldReport
              idx="009" client="Oakley & Hunt LLP" sector="Legal · Boutique" range="5 months"
              geo="Mountain West"
              photo="images/work-law.jpg" credit="Photo: Pixabay / Pexels"
              headline={<>The first law firm Perplexity names in their market. Beat three megafirms doing it.</>}
              summary="A boutique commercial-litigation firm staring down three regional megafirms with 50× their content budget. Pure GEO play. No paid spend, no traditional SEO money. Five practice-area entity pages, eight reviewer citations, and weekly prompt tracking. That was the entire stack."
              results={[
                { label: "Perplexity citation share, 5 core prompts", value: "71%" },
                { label: "ChatGPT citation share, same prompts", value: "44%" },
                { label: "Qualified inbound consults, monthly avg", value: "+9 / mo" },
                { label: "Total content footprint deployed", value: "5 pages" },
              ]}
              art={<OakleyArt />}
            />
          </div>
        </section>

        <Ledger />

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

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