/* VALDEX — Process / The operating system */

function ProcessHero() {
  return (
    <section className="masthead" data-screen-label="01 Hero">
      <div className="wrap" style={{ position: "relative" }}>
        <OrbitStage />
        <h1>
          The boring part<br />
          we treat as <span className="it">infrastructure.</span>
        </h1>
        <div className="masthead-lede">
          <div className="where">
            Five stages. Tuesday note. Friday drop. A call every other Wednesday. That's the
            rhythm. Every engagement, every week, no exceptions.
          </div>
          <div>
            <p className="lede">
              No proprietary methodology with a trademark on it. No twelve-step funnel
              someone trademarked in 2019. Just five stages run on a fixed cadence, with
              eight named artifacts that land on a schedule you can set your calendar by.
              The system below is the system on day one of your engagement and the system
              twelve months in.
            </p>
            <div className="lede-cta">
              <a className="btn btn-primary" href="/contact">Start the audit →</a>
              <a className="btn btn-ghost" href="/pricing">See engagement pricing</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function FiveStages() {
  const stages = [
    {
      n: "01", t: "Audit", d: "2 weeks",
      lede: "We map your present, on paper. No pitches, no promises. By day 14 a 20-page document hits your inbox: where you stand today, what's reachable in 90 days, and what isn't (with the math behind it). It's yours to keep even if you walk.",
      tasks: [
        "Citation-share baseline across 250 prompts × 5 engines",
        "Technical foundations sweep · Core Web Vitals, crawl, render",
        "Entity inventory · what already exists, what's missing",
        "Competitive recon · who is being cited, why",
        "Day-14 audit document · diagnosis + 90-day forecast",
      ],
    },
    {
      n: "02", t: "Architecture", d: "1 week",
      lede: "We pick the target prompts with you, design the entity graph, and write the 90-day plan. You sign off on every spend line and every content slot before a single page goes live. No surprises in week seven.",
      tasks: [
        "Prompt-coverage target list · 50-page bottom-up build",
        "Entity-graph schema · entities, relationships, canonicals",
        "Content roadmap · 12-week publish calendar",
        "Measurement plan · what we track, how, where it lives",
        "Engagement charter · who does what, when, how",
      ],
    },
    {
      n: "03", t: "Pipeline", d: "Ongoing · weeks 4+",
      lede: "Content ships every Friday. Technical fixes ship Tuesday. Paid changes ship Wednesday after the call. The cadence is the product. Miss one and we tell you, because we'd rather lose a week than fake it.",
      tasks: [
        "4 retrieval-tuned long-form pages per month",
        "Technical fix ship · every Tuesday",
        "Ads creative iteration · 12–20 variants / month",
        "Reviewer outreach · 4–8 third-party citations / month",
        "Internal-tool agents deployed against your stack",
      ],
    },
    {
      n: "04", t: "Tracking", d: "Ongoing · from week 1",
      lede: "You see the same dashboard we see. Same logins, same numbers, same colors. Citation share, ranking, conversion, attributed revenue, all live and all explained in plain English on Friday. No screenshots dressed up as a deck.",
      tasks: [
        "Bi-weekly citation sampling · 250 prompts × 5 engines",
        "Weekly SEO rank tracking · against revenue, not vanity",
        "GA4 + server-side instrumentation, live from week 2",
        "Tuesday status email · 4 paragraphs, every Tuesday",
        "Friday metrics drop · numbers + commentary",
      ],
    },
    {
      n: "05", t: "Compound", d: "Q2 onward",
      lede: "Quarter two is when the entity graph starts feeding itself and the work gets cheaper for both of us. We double prompt coverage, open ad surfaces where retrieval can't reach, and write the next 90-day plan with you on the same page.",
      tasks: [
        "Quarterly strategy review · in person if you want",
        "Prompt-list expansion · double the coverage every quarter",
        "Decay sweep · refresh dropping pages monthly",
        "Channel openings · new ad surfaces, new engines",
        "Annual re-architecture · if the engagement renews",
      ],
    },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div className="s-head">
          <div className="num"><span>§ 01</span><b>THE FIVE STAGES</b></div>
          <div>
            <h2>Five stages. <span className="serif-it">Same</span> for every engagement.</h2>
          </div>
        </div>
        <div style={{ borderTop: "1.5px solid var(--ink)" }}>
          {stages.map((s) => (
            <div key={s.n} style={{
              display: "grid", gridTemplateColumns: "200px 1.4fr 1fr",
              gap: 48, padding: "44px 0",
              borderBottom: "1px solid var(--line)", alignItems: "start",
            }} className="proc-row">
              <div>
                <div className="mono" style={{ color: "var(--violet)", letterSpacing: "0.16em", fontSize: 12, marginBottom: 14 }}>STAGE {s.n}</div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 52, fontWeight: 500, letterSpacing: "-0.035em", lineHeight: 0.95 }}>{s.t}</div>
                <div className="mono" style={{ color: "var(--ink-mute)", letterSpacing: "0.12em", fontSize: 11, marginTop: 14, textTransform: "uppercase" }}>{s.d}</div>
              </div>
              <div>
                <p className="lede" style={{ fontSize: 17 }}>{s.lede}</p>
              </div>
              <div>
                <div className="mono" style={{ color: "var(--ink-mute)", letterSpacing: "0.14em", fontSize: 10.5, marginBottom: 12, textTransform: "uppercase" }}>Deliverables</div>
                <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
                  {s.tasks.map((t, i) => (
                    <li key={i} style={{ display: "flex", gap: 10, fontSize: 13.5, color: "var(--ink-2)", lineHeight: 1.5 }}>
                      <span className="mono" style={{ color: "var(--violet)", flexShrink: 0 }}>+</span>
                      <span>{t}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          ))}
        </div>
        <style>{`
          @media (max-width: 900px) {
            .proc-row { grid-template-columns: 1fr !important; gap: 20px !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

function WeeklyRhythm() {
  const week = [
    { d: "MON", t: "Internal", what: "Team standup. Prompt-tracking refresh. Competitive recon agent runs overnight. We read its diff with coffee, before anyone else is online." },
    { d: "TUE", t: "Status email", what: "A four-paragraph note in your inbox by noon MT. What shipped, what's next, what's stuck, what we need from you. No screenshots dressed up as analysis.", hi: true },
    { d: "WED", t: "Call (alt. weeks)", what: "Thirty minutes with your team every other Wednesday at 10am MT. Cameras optional. Recording always on if you want it. We'll skip it if there's nothing worth your time." },
    { d: "THU", t: "Production", what: "Heavy production day. Content edit, ads creative, technical fixes drafted and queued for Tuesday's deploy. Nobody on the team is in a meeting Thursdays." },
    { d: "FRI", t: "Metrics drop", what: "Numbers and commentary in your inbox by 4pm MT. Citation share, rank, revenue, ad performance. No spin. No 'great progress this week!' line. Just the line.", hi: true },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div className="s-head">
          <div className="num"><span>§ 02</span><b>THE WEEK</b></div>
          <div>
            <h2>The same <span className="serif-it">five-day</span> rhythm, every week.</h2>
          </div>
        </div>
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(5, 1fr)",
          border: "1.5px solid var(--ink)", background: "var(--paper)",
        }} className="week-grid">
          {week.map((w, i) => (
            <div key={i} style={{
              padding: "26px 22px 28px",
              borderRight: i < week.length - 1 ? "1px solid var(--line)" : "0",
              background: w.hi ? "var(--paper-2)" : "transparent",
              display: "flex", flexDirection: "column", gap: 12, minHeight: 240,
            }}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: "0.16em", color: w.hi ? "var(--violet)" : "var(--ink-mute)" }}>{w.d}</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 24, fontWeight: 500, letterSpacing: "-0.025em", lineHeight: 1.05 }}>{w.t}</div>
              <p style={{ fontSize: 13.5, color: "var(--ink-2)", lineHeight: 1.5 }}>{w.what}</p>
            </div>
          ))}
        </div>
        <style>{`
          @media (max-width: 900px) {
            .week-grid { grid-template-columns: 1fr !important; }
            .week-grid > div { border-right: 0 !important; border-bottom: 1px solid var(--line); min-height: auto !important; }
            .week-grid > div:last-child { border-bottom: 0; }
          }
        `}</style>
      </div>
    </section>
  );
}

function DocumentsSection() {
  const docs = [
    { id: "D-001", t: "Audit document", n: "20 pp.", w: "Day 14", k: "Diagnosis + 90-day forecast. Citation baseline, tech foundations, content gap, competitive recon, recommended target prompts." },
    { id: "D-002", t: "Engagement charter", n: "6 pp.", w: "Day 21", k: "Who does what. Scope, cadence, KPIs, escalation paths, kill-switch terms, the works. We countersign it." },
    { id: "D-003", t: "Entity-graph schema", n: "Living doc", w: "Week 3", k: "The entity inventory in JSON-LD plus a human-readable index. Updated every time a new page ships." },
    { id: "D-004", t: "Content roadmap", n: "Living doc", w: "Week 4", k: "12 weeks of publish slots, brief status, target prompts, internal-link plan. Color-coded by stage." },
    { id: "D-005", t: "Tuesday status note", n: "1 pp.", w: "Every Tue", k: "Four paragraphs. Shipped, next, stuck, asks. Plain English. No screenshots of dashboards." },
    { id: "D-006", t: "Friday metrics drop", n: "1 pp.", w: "Every Fri", k: "Citation share, rank, sessions, attributed revenue. With commentary explaining the line, not just plotting it." },
    { id: "D-007", t: "Quarterly review", n: "12 pp.", w: "Every 90d", k: "Plan vs. actual. What worked, what didn't, what changed in the engines, what we're betting on next quarter." },
    { id: "D-008", t: "Handover packet", n: "Variable", w: "On exit", k: "Every artifact, every credential, every agent codebase. MIT-licensed. You can fire us and not lose a thing." },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div className="s-head">
          <div className="num"><span>§ 03</span><b>DOCUMENTS YOU RECEIVE</b></div>
          <div>
            <h2>Eight documents. <span className="serif-it">All</span> yours, all in plain English.</h2>
            <p className="lede" style={{ marginTop: 20 }}>
              Templates available on request before you sign anything. Nothing about the
              engagement should be a surprise twelve months in. Every artifact you'll receive
              from day one to handover is listed on this page, with the page count and the
              week you'll see it.
            </p>
          </div>
        </div>
        <div style={{ borderTop: "1.5px solid var(--ink)" }}>
          {docs.map((d) => (
            <div key={d.id} style={{
              display: "grid", gridTemplateColumns: "100px 1.4fr 100px 140px 1.6fr",
              gap: 24, padding: "22px 0", borderBottom: "1px solid var(--line)",
              alignItems: "center"
            }} className="doc-row">
              <span className="mono" style={{ color: "var(--violet)", letterSpacing: "0.12em" }}>{d.id}</span>
              <span style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 500, letterSpacing: "-0.02em" }}>{d.t}</span>
              <span className="mono" style={{ fontSize: 11.5, color: "var(--ink-mute)", letterSpacing: "0.08em" }}>{d.n}</span>
              <span className="mono" style={{ fontSize: 11.5, color: "var(--ink-mute)", letterSpacing: "0.08em" }}>{d.w}</span>
              <span style={{ fontSize: 14, color: "var(--ink-2)", lineHeight: 1.5 }}>{d.k}</span>
            </div>
          ))}
        </div>
        <style>{`
          @media (max-width: 900px) {
            .doc-row { grid-template-columns: 80px 1fr !important; gap: 8px !important; }
            .doc-row > span:nth-child(n+3) { grid-column: 2; font-size: 12px !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

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

        <section className="section section-tight" style={{ paddingTop: 0 }}>
          <div className="wrap">
            <div
              className="photo-banner"
              data-photo
              data-photo-credit="Photo: Azra Melek / Pexels"
              style={{ minHeight: 340, backgroundImage: "url('images/process-desk.jpg')" }}
            >
              <div className="pb-inner">
                <div className="pb-title">Tuesday note. <span className="serif-it" style={{ color: "var(--signal)" }}>Friday</span> drop.</div>
              </div>
            </div>
          </div>
        </section>

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

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