/* VALDEX — Contact */

function ContactHero() {
  return (
    <section className="masthead" data-screen-label="01 Hero">
      <div className="wrap" style={{ position: "relative" }}>
        <OrbitStage />
        <h1>
          Tell us<br />
          where you <span className="it">are.</span>
        </h1>
        <div className="masthead-lede">
          <div className="where">
            One form. One reply inside 24 business hours. One 30-minute intake call if the
            engagement looks like a fit for both of us.
          </div>
          <div>
            <p className="lede">
              Use the form below to start an engagement. Want a free GEO audit instead? We
              run twenty a quarter, no obligation, no follow-up drip sequence. Jump to the
              audit section underneath this one. For press, partnerships, or anything else,
              the right email is in the office card to the right.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

function ContactForm() {
  const [status, setStatus] = React.useState("idle"); // idle | sending | sent
  const submit = (e) => {
    e.preventDefault();
    if (status !== "idle") return;
    setStatus("sending");
    setTimeout(() => setStatus("sent"), 850 + Math.floor(Math.random() * 500));
  };
  const sending = status === "sending";
  const sent = status === "sent";
  return (
    <section className="section">
      <div className="wrap">
        <div className="s-head">
          <div className="num"><span>§ 01</span><b>INTAKE FORM</b></div>
          <div>
            <h2>Tell us about <span className="serif-it">the work.</span></h2>
          </div>
        </div>
        <div className="contact-grid">
          <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 22 }}>
            {sent ? (
              <div style={{ padding: 32, border: "1.5px solid var(--ink)", background: "var(--paper-2)" }}>
                <div className="mono" style={{ color: "var(--violet)", fontSize: 11, letterSpacing: "0.16em" }}>STATUS · RECEIVED · INTAKE-{String(Math.floor(10000 + Math.random() * 90000))}</div>
                <h3 style={{ fontFamily: "var(--font-display)", fontSize: 32, fontWeight: 500, letterSpacing: "-0.025em", margin: "12px 0 14px" }}>Got it. Reply inside 24 business hours.</h3>
                <p style={{ fontSize: 14.5, color: "var(--ink-2)", lineHeight: 1.6 }}>
                  A note hits your inbox from <b style={{ color: "var(--ink)" }}>intake@valdexai.com</b> with a calendar link and a short pre-call worksheet. If your category isn't a fit for us, you'll hear that too. Usually with two other agencies we'd send you to instead.
                </p>
              </div>
            ) : (
              <React.Fragment>
                <div className="field-row">
                  <div className="field">
                    <label htmlFor="name">Your name</label>
                    <input id="name" name="name" required placeholder="Your full name" />
                  </div>
                  <div className="field">
                    <label htmlFor="role">Title / role</label>
                    <input id="role" name="role" placeholder="Head of Growth" />
                  </div>
                </div>
                <div className="field-row">
                  <div className="field">
                    <label htmlFor="company">Company</label>
                    <input id="company" name="company" required placeholder="Hexion Analytics" />
                  </div>
                  <div className="field">
                    <label htmlFor="email">Work email</label>
                    <input id="email" name="email" type="email" required placeholder="you@hexion.com" />
                  </div>
                </div>
                <div className="field">
                  <label htmlFor="url">Website</label>
                  <input id="url" name="url" placeholder="https://hexion.com" />
                </div>
                <div className="field-row">
                  <div className="field">
                    <label htmlFor="tier">Engagement</label>
                    <select id="tier" name="tier" defaultValue="">
                      <option value="" disabled>Choose a tier…</option>
                      <option>Pilot · $6,400 / mo</option>
                      <option>Operator · $14,800 / mo</option>
                      <option>Flagship · $28,500 / mo</option>
                      <option>Custom scope · talk it through</option>
                      <option>Not sure yet · advise me</option>
                    </select>
                  </div>
                  <div className="field">
                    <label htmlFor="when">Target start</label>
                    <select id="when" name="when" defaultValue="">
                      <option value="" disabled>Choose…</option>
                      <option>This month</option>
                      <option>Next month</option>
                      <option>Next quarter</option>
                      <option>Just researching</option>
                    </select>
                  </div>
                </div>
                <div className="field">
                  <label htmlFor="notes">What are you trying to do?</label>
                  <textarea id="notes" name="notes" placeholder="A paragraph or two. Your category, what you've tried, and what would count as a win for you in 90 days." />
                </div>
                <div className="field">
                  <label htmlFor="how">How'd you find us?</label>
                  <input id="how" name="how" placeholder="ChatGPT cited you · referral · etc." />
                </div>
                <div style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
                  <button type="submit" className="btn btn-primary" disabled={sending} style={sending ? { opacity: 0.7, cursor: "wait" } : null}>
                    {sending ? (
                      <React.Fragment>
                        <span className="dot-spin" aria-hidden="true"></span>
                        Sending intake…
                      </React.Fragment>
                    ) : (
                      <React.Fragment>Send intake →</React.Fragment>
                    )}
                  </button>
                  <span className="mono" style={{ fontSize: 11.5, color: "var(--ink-mute)", letterSpacing: "0.1em" }}>
                    {sending ? "Encrypting submission to intake@valdexai.com…" : "We reply within 24 business hours · Mon–Fri · Mountain time."}
                  </span>
                </div>
              </React.Fragment>
            )}
          </form>
          <aside className="contact-aside">
            <div className="row">
              <span className="k">Office</span>
              <span className="v">
                <b>VALDEX LLC</b><br />
                1309 Coffeen Ave, Ste 1200<br />
                Sheridan, WY 82801
              </span>
            </div>
            <div className="row">
              <span className="k">Intake</span>
              <span className="v"><a href="mailto:intake@valdexai.com">intake@valdexai.com</a></span>
            </div>
            <div className="row">
              <span className="k">Press</span>
              <span className="v"><a href="mailto:press@valdexai.com">press@valdexai.com</a></span>
            </div>
            <div className="row">
              <span className="k">General</span>
              <span className="v"><a href="mailto:hello@valdexai.com">hello@valdexai.com</a></span>
            </div>
            <div className="row">
              <span className="k">Phone</span>
              <span className="v mono">(762) 760-1179</span>
            </div>
            <div className="row">
              <span className="k">Hours</span>
              <span className="v">Mon–Fri · 09:00–17:00 MT</span>
            </div>
            <div className="row">
              <span className="k">Time zone</span>
              <span className="v mono">UTC −06:00 · America/Denver</span>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}

function AuditSection() {
  const [status, setStatus] = React.useState("idle"); // idle | sending | sent
  const submit = (e) => {
    e.preventDefault();
    if (status !== "idle") return;
    setStatus("sending");
    setTimeout(() => setStatus("sent"), 900 + Math.floor(Math.random() * 600));
  };
  const sending = status === "sending";
  const sent = status === "sent";
  const reset = () => setStatus("idle");
  return (
    <section className="section" id="audit">
      <div className="wrap">
        <div style={{
          border: "1.5px solid var(--ink)", background: "var(--paper-deep)", color: "var(--paper)",
          padding: "56px 48px", display: "grid",
          gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center", position: "relative", overflow: "hidden",
        }} className="audit-card">
          <div>
            <span className="eyebrow" style={{ color: "rgba(255,255,255,0.7)" }}><span className="dot"></span>§ 02 · FREE GEO AUDIT</span>
            <h2 style={{ marginTop: 18, color: "#fff", fontSize: "clamp(36px, 4.6vw, 64px)" }}>Twenty <span className="serif-it" style={{ color: "var(--signal)" }}>free</span> GEO audits a quarter.</h2>
            <p style={{ marginTop: 18, color: "rgba(255,255,255,0.72)", fontSize: 16, lineHeight: 1.6, maxWidth: "48ch" }}>
              Send us your category and five buying-intent prompts. Seven business days later,
              a five-page diagnostic lands in your inbox: citation share across the major
              engines, retrieval-corpus inclusion per engine, and the three fixes most likely
              to move your number this quarter. No call required. No follow-up sequence.
              Yours to keep.
            </p>
            <ul style={{ listStyle: "none", padding: 0, marginTop: 22, display: "flex", flexDirection: "column", gap: 10, fontSize: 14, color: "rgba(255,255,255,0.78)" }}>
              {[
                "Citation share across 5 engines · for prompts you provide",
                "Retrieval-corpus inclusion check · per engine",
                "Top 3 highest-leverage fixes · in priority order",
                "Delivered as a PDF · 5 pages · 7 business days",
              ].map((t, i) => (
                <li key={i} style={{ display: "flex", gap: 10 }}><span className="mono" style={{ color: "var(--signal)" }}>+</span><span>{t}</span></li>
              ))}
            </ul>
            <div className="mono" style={{ marginTop: 24, color: "rgba(255,255,255,0.4)", fontSize: 11, letterSpacing: "0.16em" }}>
              SLOTS REMAINING THIS QUARTER · {sent ? "03" : "04"} / 20
            </div>
          </div>
          {sent ? (
            <div style={{
              padding: "32px 30px",
              border: "1px solid rgba(255,255,255,0.22)",
              background: "rgba(255,255,255,0.04)",
              backdropFilter: "blur(10px)",
            }}>
              <div className="mono" style={{ color: "var(--signal)", fontSize: 11, letterSpacing: "0.18em" }}>STATUS · QUEUED · #{Math.floor(1000 + Math.random() * 9000)}</div>
              <h3 style={{
                fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 500,
                letterSpacing: "-0.025em", margin: "12px 0 14px", color: "#fff",
              }}>Slot locked. Audit running.</h3>
              <p style={{ fontSize: 14.5, color: "rgba(255,255,255,0.74)", lineHeight: 1.65 }}>
                We sample your prompts across ChatGPT, Perplexity, Claude, Gemini, and Google
                AI Overviews this week, then ship the five-page diagnostic inside seven
                business days. A confirmation from{" "}
                <b style={{ color: "#fff" }}>methodology@valdexai.com</b> hits your inbox in
                the next hour with the prompt list we received and a sample of what the
                final report will look like.
              </p>
              <button
                onClick={reset}
                className="btn btn-ghost"
                style={{ marginTop: 20, color: "#fff", borderColor: "rgba(255,255,255,0.3)" }}
              >Submit another audit request</button>
            </div>
          ) : (
            <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              <div className="field">
                <label style={{ color: "rgba(255,255,255,0.55)" }}>Work email</label>
                <input
                  type="email" required
                  style={{ background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.18)", color: "#fff" }}
                  placeholder="you@company.com" />
              </div>
              <div className="field">
                <label style={{ color: "rgba(255,255,255,0.55)" }}>Company URL</label>
                <input
                  type="url"
                  style={{ background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.18)", color: "#fff" }}
                  placeholder="https://company.com" />
              </div>
              <div className="field">
                <label style={{ color: "rgba(255,255,255,0.55)" }}>Five buying-intent prompts (one per line)</label>
                <textarea
                  required
                  style={{ background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.18)", color: "#fff", minHeight: 120 }}
                  placeholder={"best revops platform for series B SaaS\nrevenue operations tools 2026\n…"} />
              </div>
              <button
                type="submit"
                disabled={sending}
                className="btn btn-primary"
                style={{ background: "var(--signal)", color: "var(--paper-deep)", justifyContent: "center", marginTop: 6, opacity: sending ? 0.7 : 1, cursor: sending ? "wait" : "pointer" }}
              >{sending ? (<><span className="dot-spin dark" aria-hidden="true"></span>Queuing your prompts…</>) : "Request the audit →"}</button>
            </form>
          )}
        </div>
        <style>{`
          @media (max-width: 900px) {
            .audit-card { grid-template-columns: 1fr !important; gap: 32px !important; padding: 32px 28px !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

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

        <section className="section section-tight">
          <div className="wrap">
            <div
              className="photo-banner"
              data-photo
              data-photo-credit="Photo: Kaboompics / Pexels"
              style={{ minHeight: 320, backgroundImage: "url('images/contact-office.jpg')" }}
            >
              <div className="pb-inner">
                <div className="pb-cap">§ Mon–Fri · 09:00–17:00 MT</div>
                <div className="pb-title">Walk-ins welcome. <span className="serif-it" style={{ color: "var(--signal)" }}>Tea's on.</span></div>
              </div>
            </div>
          </div>
        </section>

        <ContactForm />
        <AuditSection />
      </main>
      <Footer />
    </React.Fragment>
  );
}

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