/* VALDEX — Pricing / Engagements */

function PricingHero() {
  return (
    <section className="masthead" data-screen-label="01 Hero">
      <div className="wrap" style={{ position: "relative" }}>
        <OrbitStage />
        <h1>
          Prices that<br />
          aren't a <span className="strike">secret.</span>
        </h1>
        <div className="masthead-lede">
          <div className="where">
            Monthly retainer. 90-day initial commit. 30-day rolling after that. One invoice,
            net 14, ACH preferred. No setup fees. No markup on third-party tools. No 'call for
            pricing.'
          </div>
          <div>
            <p className="lede">
              Three tiers, three prices, all of them on this page. We don't quote, we don't
              haggle, and we don't run discount theatre the week before quarter-end. If you
              need a custom scope (a 50-prompt pilot, programmatic SEO on ten thousand pages,
              an agent build, a foreign-language run), the custom row sits at the bottom with
              fixed quotes, not hourly billing.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

function TiersSection() {
  const [annual, setAnnual] = React.useState(false);
  const fmt = (m) => annual
    ? `$${(m * 0.9).toLocaleString(undefined, { maximumFractionDigits: 0 })}`
    : `$${m.toLocaleString()}`;
  const annualNote = (m) => annual
    ? `Save $${Math.round(m * 0.1 * 12).toLocaleString()} / yr · paid quarterly`
    : `Switch to quarterly billing to save 10%`;
  return (
    <section className="section">
      <div className="wrap">
        <div className="s-head" data-reveal>
          <div className="num"><span>§ 01</span><b>THE THREE TIERS</b></div>
          <div>
            <h2>Three <span className="serif-it">retainers,</span> all published.</h2>
            <p className="lede" style={{ marginTop: 20 }}>
              Every tier includes the Day-14 audit document, the Tuesday status note, and the
              Friday metrics drop. What changes is the size of the pipeline and how many
              surfaces we're running for you at once.
            </p>
            <div className="billing-toggle" role="tablist" aria-label="Billing cadence">
              <button
                role="tab"
                aria-selected={!annual}
                className={!annual ? "on" : ""}
                onClick={() => setAnnual(false)}
              >MONTHLY</button>
              <button
                role="tab"
                aria-selected={annual}
                className={annual ? "on" : ""}
                onClick={() => setAnnual(true)}
              >QUARTERLY <span className="save">−10%</span></button>
            </div>
          </div>
        </div>
        <div className="tiers" data-reveal data-reveal-stagger>
          <div className="tier">
            <span className="t-best">Best for · early-stage</span>
            <div className="t-name">Pilot</div>
            <div className="t-amt-wrap">
              <div className="t-amt">{fmt(6400)}<small>/ month</small></div>
              <span className="annual">{annualNote(6400)}</span>
            </div>
            <p style={{ fontSize: 14.5, color: "var(--ink-2)", lineHeight: 1.55 }}>
              The starter engagement. One pipeline (GEO or SEO+Ads, not both), one channel,
              one team. Right for early-stage operators who want to see how we work before
              they hand us the keys to everything.
            </p>
            <ul>
              <li>Day-14 audit document</li>
              <li>1 pipeline · GEO <em>or</em> SEO+Ads</li>
              <li>4 retrieval-tuned pages / month</li>
              <li>100-prompt tracking · 3 engines</li>
              <li>Weekly Tuesday status note</li>
              <li>Friday metrics drop</li>
              <li>Bi-weekly Wednesday call</li>
              <li className="off">Agent workflows</li>
              <li className="off">Quarterly in-person review</li>
            </ul>
            <a className="btn btn-ghost" href="/contact">Book pilot intake →</a>
          </div>
          <div className="tier featured">
            <span className="t-best">Best for · scaling</span>
            <div className="t-name">Operator</div>
            <div className="t-amt-wrap">
              <div className="t-amt">{fmt(14800)}<small>/ month</small></div>
              <span className="annual">{annualNote(14800)}</span>
            </div>
            <p style={{ fontSize: 14.5, lineHeight: 1.55 }}>
              The headline engagement, where the math actually starts working in your favor.
              Both pipelines run by the same team. The entity graph feeds GEO and SEO at the
              same time. The content engine feeds your blog and your ad creative. This is
              where most of our clients end up sitting, and most of them stay.
            </p>
            <ul>
              <li>Day-14 audit document</li>
              <li>Both pipelines · GEO + SEO + Ads</li>
              <li>8 retrieval-tuned pages / month</li>
              <li>250-prompt tracking · 5 engines</li>
              <li>Up to 3 paid channels</li>
              <li>2 internal-tool agents deployed</li>
              <li>Weekly Tuesday status note</li>
              <li>Friday metrics drop</li>
              <li>Quarterly in-person strategy review</li>
            </ul>
            <a className="btn btn-primary" href="/contact">Book Operator intake →</a>
          </div>
          <div className="tier">
            <span className="t-best">Best for · category leaders</span>
            <div className="t-name">Flagship</div>
            <div className="t-amt-wrap">
              <div className="t-amt">{fmt(28500)}<small>/ month</small></div>
              <span className="annual">{annualNote(28500)}</span>
            </div>
            <p style={{ fontSize: 14.5, color: "var(--ink-2)", lineHeight: 1.55 }}>
              The full surface, principal-led from the first call to the quarterly review.
              Dedicated team, programmatic content at scale, every ad channel open, and
              custom agent infrastructure wired directly into your stack. Built for category
              leaders who want every light on at once.
            </p>
            <ul>
              <li>Day-14 audit document</li>
              <li>All practices · all six surfaces</li>
              <li>16+ retrieval-tuned pages / month</li>
              <li>Programmatic page systems on request</li>
              <li>500-prompt tracking · all 6 engines</li>
              <li>Unlimited paid channels</li>
              <li>Custom agent infrastructure (MCP)</li>
              <li>Weekly call · principal-led</li>
              <li>Annual on-site planning summit</li>
            </ul>
            <a className="btn btn-ghost" href="/contact">Book Flagship intake →</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function CustomRow() {
  return (
    <section className="section section-tight">
      <div className="wrap">
        <div style={{
          border: "1.5px solid var(--ink)", background: "var(--paper)",
          padding: "44px 40px", display: "grid",
          gridTemplateColumns: "1.2fr 1fr", gap: 48, alignItems: "center",
        }} className="custom-row">
          <div>
            <span className="eyebrow"><span className="dot"></span>§ 02 · CUSTOM SCOPE</span>
            <h2 style={{ marginTop: 18, fontSize: "clamp(30px, 3.6vw, 48px)" }}>Something not on the list?</h2>
            <p className="lede" style={{ marginTop: 14, fontSize: 16 }}>
              Programmatic on 10,000 pages. A 6-week GEO pilot before you commit to a year.
              A foreign-language build. An internal-tool engagement that's all agents and
              zero content. We scope these one at a time, with a fixed quote. No hourly
              billing, no scope creep clauses, no surprise change orders.
            </p>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <div className="mono" style={{ color: "var(--ink-mute)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase" }}>RECENT CUSTOM SCOPES</div>
            {[
              ["GEO Pilot · 6 weeks · 50 prompts", "$11,200 fixed"],
              ["Programmatic SEO · 8k pages · 12 wks", "$48,000 fixed"],
              ["Agent build · prompt-watch + recon", "$22,000 fixed"],
              ["Annual content audit · 200 pages", "$8,400 fixed"],
            ].map(([t, p], i) => (
              <div key={i} style={{ display: "flex", justifyContent: "space-between", padding: "12px 0", borderBottom: i < 3 ? "1px solid var(--line)" : "0", fontSize: 14, color: "var(--ink-2)" }}>
                <span>{t}</span>
                <span className="mono" style={{ color: "var(--violet)" }}>{p}</span>
              </div>
            ))}
            <a className="btn btn-primary" style={{ marginTop: 8, justifyContent: "center" }} href="/contact">Scope a custom engagement →</a>
          </div>
        </div>
        <style>{`
          @media (max-width: 900px) {
            .custom-row { grid-template-columns: 1fr !important; gap: 24px !important; padding: 28px 24px !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

const PRICING_FAQ_ITEMS = [
  { q: "What's the commitment length?", a: "Ninety-day initial commit, then 30-day rolling thereafter. After day 90 you can give 30 days' notice at any point — work continues through the notice period and you get a complete handover packet on the last day, including agent code, dashboards, and credentials." },
  { q: "Are there setup fees?", a: "No. The Day-14 audit document is included in your first month's retainer. We're cash-flow positive without setup fees, so we don't bolt them on to look busy." },
  { q: "How are payments handled?", a: "Monthly retainer billed on the first business day of the month. Net 14, payable by ACH. We can invoice through Stripe for credit cards but the 2.9% processing fee passes through. No paper checks, no wire-transfer fees on our side." },
  { q: "What's included in the audit document?", a: "A 20-page written diagnosis: citation-share baseline across 250 prompts on five engines, technical SEO sweep against Core Web Vitals, entity-graph inventory, competitive recon, content-gap map, and a 90-day forecast of reachable citation share. The audit is yours to keep even if the engagement doesn't proceed." },
  { q: "Do you take equity instead of fee?", a: "No. We've considered it. We've decided against it. The engagement works best as a clean commercial transaction. We don't want our incentives tied to your cap-table outcomes, and we don't want to be the agency that's still on your board deck two years after the work stopped." },
  { q: "Can we pause the engagement?", a: "Once per calendar year, up to 60 days, with 30 days' notice. We keep your prompt-tracking corpus warm during the pause but don't ship new work. Resuming requires a 15-minute realignment call." },
  { q: "Do you do project work or one-time builds?", a: "For existing retainer clients only. Standalone projects start at $11,200 fixed and require a scoping call before we quote. We don't take one-off project work from new accounts — every client engagement starts with the audit." },
  { q: "What if the engagement isn't working?", a: "Ninety-day kill switch on both sides. If citation share hasn't moved by day 90, you can terminate without further obligation and we refund 50% of the last month. We've invoked it twice. Once in each direction. Both times the relationship ended cleaner than it would have without the clause." },
];

function PricingFaq() {
  React.useEffect(() => { injectFaqSchema("valdex-faq-pricing-schema", PRICING_FAQ_ITEMS); }, []);
  return (
    <section className="section section-tight">
      <div className="wrap">
        <div className="s-head">
          <div className="num"><span>§ 03</span><b>BILLING FAQ</b></div>
          <div>
            <h2>How we <span className="serif-it">bill,</span> in writing.</h2>
          </div>
        </div>
        <FAQ items={PRICING_FAQ_ITEMS} />
      </div>
    </section>
  );
}

function PricingPage() {
  React.useEffect(() => {
    installPageTransitions();
    if (document.getElementById("valdex-pricing-schema")) return;
    const tiers = [
      { name: "Pilot", price: 6400, desc: "Starter engagement. One pipeline (GEO or SEO+Ads), one channel, one team." },
      { name: "Operator", price: 14800, desc: "Both pipelines run by one coordinated team. The headline engagement where the math starts working." },
      { name: "Flagship", price: 28500, desc: "Full surface, principal-led. Dedicated team, programmatic content at scale, every ad channel open." },
    ];
    const schema = {
      "@context": "https://schema.org",
      "@type": "Service",
      "name": "VALDEX engagements",
      "serviceType": "Digital advertising agency retainer",
      "provider": { "@id": "https://valdexai.com/#org" },
      "areaServed": { "@type": "Country", "name": "United States" },
      "url": "https://valdexai.com/pricing",
      "offers": tiers.map((t) => ({
        "@type": "Offer",
        "name": `${t.name} retainer`,
        "description": t.desc,
        "price": t.price,
        "priceCurrency": "USD",
        "priceSpecification": {
          "@type": "UnitPriceSpecification",
          "price": t.price,
          "priceCurrency": "USD",
          "unitText": "MONTH",
          "billingIncrement": 1
        },
        "url": "https://valdexai.com/contact",
        "availability": "https://schema.org/InStock"
      }))
    };
    const s = document.createElement("script");
    s.type = "application/ld+json";
    s.id = "valdex-pricing-schema";
    s.textContent = JSON.stringify(schema);
    document.head.appendChild(s);
  }, []);
  return (
    <React.Fragment>
      <Header />
      <Ticker />
      <main id="main">
        <PricingHero />
        <TiersSection />
        <CustomRow />
        <PricingFaq />
        <FinalCTA />
      </main>
      <Footer />
    </React.Fragment>
  );
}

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