/* VALDEX — About */

function AboutHero() {
  return (
    <section className="masthead" data-screen-label="01 Hero">
      <div className="wrap" style={{ position: "relative" }}>
        <OrbitStage />
        <h1>
          A small <span className="serif-it">agency</span><br />
          in <span className="strike">Sheridan, Wyoming.</span>
        </h1>
        <div className="masthead-lede">
          <div className="where">
            Three principals. Up to six specialists. That's the cap, and we mean it.
            No subcontractors. No offshore production line. No junior account managers
            stationed between you and the team actually doing the work.
          </div>
          <div>
            <p className="lede">
              We started Valdex because we couldn't find an agency that took the retrieval
              surface seriously and was willing to publish how they worked. So we built one.
              Small team. No subcontractors. No promise we won't put in writing. And an
              operating system documented page by page on this site before you ever pick
              up the phone.
            </p>
            <div className="lede-cta">
              <a className="btn btn-primary" href="/contact">Book intake →</a>
              <a className="btn btn-ghost" href="/work">See the work</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function TeamSection() {
  return (
    <section className="section">
      <div className="wrap">
        <div className="s-head">
          <div className="num"><span>§ 01</span><b>HOW THE TEAM WORKS</b></div>
          <div>
            <h2>A small team. <span className="serif-it">No</span> subcontractors.</h2>
            <p className="lede" style={{ marginTop: 20 }}>
              You work with the people whose names appear on your engagement charter. No
              one is hiding behind a junior account manager, because we're sized to never
              need one. Three principals plus up to six specialists. That's the cap and we
              like it that way.
            </p>
          </div>
        </div>
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0,
          borderTop: "1.5px solid var(--ink)", borderLeft: "1px solid var(--line)",
        }} className="team-grid">
          {[
            { i: "01", r: "Strategy lead", k: "What", bio: "Maps the prompt-coverage target. Owns the engagement charter, the quarterly review, and the relationship with your team. Twelve-plus years inside B2B growth before this seat.", stack: ["Strategy", "Prompt research", "Client lead"] },
            { i: "02", r: "Content engineering lead", k: "How", bio: "Runs the editorial pipeline: brief generation, drafting workflows, fact-check QA, schema deployment. Editorial background. Will not let unverified model output reach your published surface.", stack: ["Editorial systems", "Schema", "QA"] },
            { i: "03", r: "Analytics &amp; engineering lead", k: "Where", bio: "Builds the analytics stack, the agents, and the server-side plumbing. Owns the dashboards. Refuses to ship any metric they can't explain in one sentence over coffee.", stack: ["Analytics", "Agents", "Server-side"] },
          ].map((m) => (
            <div key={m.i} style={{
              padding: "32px 28px 36px",
              borderRight: "1px solid var(--line)", borderBottom: "1px solid var(--line)",
              display: "flex", flexDirection: "column", gap: 14,
            }}>
              <div className="mono" style={{ color: "var(--violet)", fontSize: 11, letterSpacing: "0.16em" }}>ROLE · {m.i}</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 30, fontWeight: 500, letterSpacing: "-0.025em", marginTop: 6, lineHeight: 1.05 }} dangerouslySetInnerHTML={{ __html: m.r }} />
              <p style={{ fontSize: 14, color: "var(--ink-2)", lineHeight: 1.6, marginTop: 6 }}>{m.bio}</p>
              <div style={{ marginTop: "auto", paddingTop: 16, display: "flex", gap: 6, flexWrap: "wrap" }}>
                {m.stack.map((s) => (
                  <span key={s} className="mono" style={{ fontSize: 10.5, padding: "3px 9px", border: "1px solid var(--line)", color: "var(--ink-2)", letterSpacing: "0.06em" }}>{s}</span>
                ))}
              </div>
            </div>
          ))}
        </div>
        <p style={{ marginTop: 24, fontSize: 13, color: "var(--ink-mute)", fontFamily: "var(--font-mono)", letterSpacing: "0.04em" }}>
          We don't publish individual names or photos on the public site. You'll meet the
          people you'll be working with on the intake call.
        </p>
        <style>{`
          @media (max-width: 900px) { .team-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </div>
    </section>
  );
}

function PrinciplesSection() {
  const ps = [
    { n: "01", t: "Publish the method.", p: "Anything that can be a public document, we publish. Prices, process, document templates, even the email cadence. Trust is what's available without a sales call. Mystery is what agencies sell when they have nothing else." },
    { n: "02", t: "Receipts, not vibes.", p: "Every claim we make about your performance is sourced from a system you can audit yourself. If we can't show you the data behind it, we don't make the claim. Simple as that." },
    { n: "03", t: "Models draft, humans verify.", p: "We use models heavily for drafting, analysis, and agent workflows. We do not let unverified model output touch your published surface. Every primary claim gets checked against a real source before it ships. No exceptions." },
    { n: "04", t: "Own what we build.", p: "When the engagement ends, you keep everything. Agent code, entity graph, templates, dashboards, credentials. MIT-licensed handover packet on the last day. No agency ransom, no platform lock-in." },
    { n: "05", t: "Small on purpose.", p: "We will not grow past nine people. Three principals plus six specialists is the cap. We turn down more work than we take. No sales team. No plan to build one." },
    { n: "06", t: "Say no in writing.", p: "If we don't think we're the right shop for the work, you'll hear that on the intake call. In writing. Usually with the names of two other agencies we'd send you to instead." },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div className="s-head">
          <div className="num"><span>§ 02</span><b>OPERATING PRINCIPLES</b></div>
          <div>
            <h2>Six <span className="serif-it">principles</span> the engagement runs on.</h2>
          </div>
        </div>
        <div className="principles">
          {ps.map((p) => (
            <div className="principle" key={p.n}>
              <div className="n">PRINCIPLE · {p.n}</div>
              <h3>{p.t}</h3>
              <p>{p.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FactsSection() {
  return (
    <section className="section section-tight">
      <div className="wrap">
        <div className="s-head">
          <div className="num"><span>§ 03</span><b>LEGAL FACTS</b></div>
          <div>
            <h2>The legal <span className="serif-it">facts,</span> in plain English.</h2>
          </div>
        </div>
        <div style={{ borderTop: "1.5px solid var(--ink)" }}>
          {[
            ["Legal name", "VALDEX LLC"],
            ["Entity type", "Wyoming limited liability company"],
            ["Principal place of business", "1309 Coffeen Ave, Ste 1200 · Sheridan, WY 82801"],
            ["EIN", "On file · provided to clients on engagement charter"],
            ["Insurance", "General liability + professional indemnity · Hiscox"],
            ["Banking", "ACH preferred · net-14 invoicing"],
          ].map((r, i) => (
            <div key={i} style={{
              display: "grid", gridTemplateColumns: "240px 1fr",
              gap: 24, padding: "18px 0", borderBottom: "1px solid var(--line)",
            }} className="facts-row">
              <span className="mono" style={{ fontSize: 11.5, color: "var(--ink-mute)", letterSpacing: "0.12em", textTransform: "uppercase" }}>{r[0]}</span>
              <span style={{ fontSize: 15, color: "var(--ink)" }}>{r[1]}</span>
            </div>
          ))}
        </div>
        <p style={{ marginTop: 24, fontSize: 13, color: "var(--ink-mute)", fontFamily: "var(--font-mono)", letterSpacing: "0.04em" }}>
          All facts above are accurate as of {new Date().toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" })}. Filing copies available on request.
        </p>
        <style>{`
          @media (max-width: 700px) {
            .facts-row { grid-template-columns: 1fr !important; gap: 6px !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

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

        <section className="section section-tight">
          <div className="wrap">
            <div
              className="photo-banner"
              data-photo
              data-photo-credit="Photo: Sam McCool / Pexels"
              style={{ minHeight: 460, backgroundImage: "url('images/about-wyoming.jpg')" }}
            >
              <div className="pb-inner">
                <div className="pb-cap">§ Why we picked here</div>
                <div className="pb-title">Sheridan, Wyoming. <span className="serif-it" style={{ color: "var(--signal)" }}>Population 18,737.</span></div>
                <p style={{ color: "rgba(255,255,255,0.7)", maxWidth: "52ch", marginTop: 16, fontSize: 15 }}>
                  Sheridan wasn't an accident. Wyoming's LLC framework keeps our admin
                  small. Mountain time keeps us inside a business day on both coasts. The
                  rent keeps us cash-flow positive without a sales team. Visitors welcome.
                  The coffee's already on.
                </p>
              </div>
            </div>
          </div>
        </section>

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

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