function Page() {
  useReveal();
  const [sent, setSent] = React.useState(false);
  const [loading, setLoading] = React.useState(false);

  async function submit(e) {
    e.preventDefault();
    setLoading(true);
    const form = e.target;
    const data = new FormData(form);
    data.append("source", "Book_A_Demo");

    try {
      const response = await fetch("https://formspree.io/f/xpqkvrpq", {
        method: "POST",
        body: data,
        headers: { 'Accept': 'application/json' }
      });
      if (response.ok) {
        setSent(true);
      } else {
        alert("Oops! There was a problem submitting your request.");
      }
    } catch (err) {
      alert("Failed to send request. Please try again.");
    } finally {
      setLoading(false);
    }
  }

  const inputStyle = {
    width: "100%", padding: "14px 16px", border: "1px solid var(--line)", borderRadius: 10,
    fontFamily: "var(--font-sans)", fontSize: 15, color: "var(--ink)", background: "var(--paper-2)",
    outline: "none", boxSizing: "border-box", appearance: "none"
  };

  return (
    <>
      <Header basePath="/"/>

      <section style={{padding: "32px 0 64px", background: "radial-gradient(circle at top left, rgba(230,190,138,0.08) 0%, rgba(255,255,255,0) 60%)"}}>
        <div className="container">
          <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(48px, 8vw, 120px)", alignItems: "center"}}>
            
            <div className="reveal">
              <div className="eyebrow eyebrow-dot" style={{marginBottom: 24, color: "var(--ochre)"}}>Book a Demo</div>
              <h1 className="display-1" style={{marginBottom: 32}}>Let's build your<br/><span className="h-italic">growth engine.</span></h1>
              <p className="lead" style={{marginBottom: 48, color: "var(--ink-light)", maxWidth: "45ch"}}>
                Schedule a 30-minute strategic walkthrough of the Auctera D-REVX platform. See how top performance marketers are scaling their ROAS.
              </p>
              
              <div style={{display: "flex", flexDirection: "column", gap: 32}}>
                <div style={{display: "flex", gap: 20}}>
                  <div style={{width: 48, height: 48, borderRadius: 12, background: "rgba(230,190,138,0.15)", color: "var(--ochre)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0}}>
                    <svg width="24" height="24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                  </div>
                  <div>
                    <h4 style={{fontSize: 18, marginTop: 0, marginBottom: 8}}>Custom Strategy Breakdown</h4>
                    <p style={{color: "var(--ink-light)", lineHeight: 1.5, fontSize: 15, margin: 0}}>We'll analyze your current acquisition channels and show you where you're leaving money on the table.</p>
                  </div>
                </div>

                <div style={{display: "flex", gap: 20}}>
                  <div style={{width: 48, height: 48, borderRadius: 12, background: "rgba(230,190,138,0.15)", color: "var(--ochre)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0}}>
                    <svg width="24" height="24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
                  </div>
                  <div>
                    <h4 style={{fontSize: 18, marginTop: 0, marginBottom: 8}}>Live D-REVX Walkthrough</h4>
                    <p style={{color: "var(--ink-light)", lineHeight: 1.5, fontSize: 15, margin: 0}}>A deep-dive into the D-REVX targeting capabilities, predictive bidding algorithms, and real-time reporting dashboard.</p>
                  </div>
                </div>

                <div style={{display: "flex", gap: 20}}>
                  <div style={{width: 48, height: 48, borderRadius: 12, background: "rgba(230,190,138,0.15)", color: "var(--ochre)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0}}>
                    <svg width="24" height="24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
                  </div>
                  <div>
                    <h4 style={{fontSize: 18, marginTop: 0, marginBottom: 8}}>Transparent Pricing</h4>
                    <p style={{color: "var(--ink-light)", lineHeight: 1.5, fontSize: 15, margin: 0}}>We'll map out a clear pricing model based on your unique volume, margins, and integration requirements.</p>
                  </div>
                </div>
              </div>
            </div>

            <div className="reveal" style={{background: "var(--paper)", padding: 48, borderRadius: 24, boxShadow: "0 20px 60px rgba(0,0,0,0.08)", border: "1px solid var(--line)", position: "relative"}}>
              {sent ? (
                <div style={{textAlign: "center", padding: "40px 0"}}>
                  <div style={{width: 64, height: 64, borderRadius: 32, background: "rgba(230,190,138,0.15)", color: "var(--ochre)", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 24px"}}>
                    <svg width="32" height="32" fill="none" stroke="currentColor" strokeWidth="3"><polyline points="20 6 9 17 4 12"></polyline></svg>
                  </div>
                  <h3 style={{fontSize: 24, marginBottom: 16}}>Request Received</h3>
                  <p style={{color: "var(--ink-light)", marginBottom: 32}}>Our strategy team will be in touch shortly to coordinate a time.</p>
                  <a href="/" className="btn btn-ghost">Return to Home</a>
                </div>
              ) : (
                <form onSubmit={submit} style={{display: "flex", flexDirection: "column", gap: 20}}>
                  <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20}}>
                    <div>
                      <label style={{display: "block", fontSize: 13, fontWeight: 600, marginBottom: 8, color: "var(--ink)"}}>First & Last Name <span style={{color:"var(--ochre)"}}>*</span></label>
                      <input type="text" name="name" required style={inputStyle} placeholder="John Doe"/>
                    </div>
                    <div>
                      <label style={{display: "block", fontSize: 13, fontWeight: 600, marginBottom: 8, color: "var(--ink)"}}>Work Email <span style={{color:"var(--ochre)"}}>*</span></label>
                      <input type="email" name="email" required style={inputStyle} placeholder="john@company.com"/>
                    </div>
                  </div>

                  <div>
                    <label style={{display: "block", fontSize: 13, fontWeight: 600, marginBottom: 8, color: "var(--ink)"}}>Company Website <span style={{color:"var(--ochre)"}}>*</span></label>
                    <input type="url" name="website" required style={inputStyle} placeholder="https://company.com"/>
                  </div>

                  <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20}}>
                    <div style={{position: "relative"}}>
                      <label style={{display: "block", fontSize: 13, fontWeight: 600, marginBottom: 8, color: "var(--ink)"}}>Monthly Ad Spend <span style={{color:"var(--ochre)"}}>*</span></label>
                      <select name="spend" required style={inputStyle}>
                        <option value="" disabled selected>Select spend...</option>
                        <option value="< $10k">Under $10,000</option>
                        <option value="$10k - $50k">$10,000 - $50,000</option>
                        <option value="$50k - $250k">$50,000 - $250,000</option>
                        <option value="$250k+">$250,000+</option>
                      </select>
                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{position:"absolute", right:16, bottom:18, pointerEvents:"none"}}><path d="M6 9l6 6 6-6"/></svg>
                    </div>
                    <div style={{position: "relative"}}>
                      <label style={{display: "block", fontSize: 13, fontWeight: 600, marginBottom: 8, color: "var(--ink)"}}>Primary Objective <span style={{color:"var(--ochre)"}}>*</span></label>
                      <select name="objective" required style={inputStyle}>
                        <option value="" disabled selected>Select goal...</option>
                        <option value="Scale Volume">Scale UA Volume</option>
                        <option value="Improve ROAS">Improve Profitability / ROAS</option>
                        <option value="Publisher Monetization">Monetize Publisher Inventory</option>
                        <option value="Agency Whitelabel">Agency Whitelabeling</option>
                      </select>
                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{position:"absolute", right:16, bottom:18, pointerEvents:"none"}}><path d="M6 9l6 6 6-6"/></svg>
                    </div>
                  </div>

                  <div>
                    <label style={{display: "block", fontSize: 13, fontWeight: 600, marginBottom: 8, color: "var(--ink)"}}>Anything specific you'd like to see? (Optional)</label>
                    <textarea name="message" style={{...inputStyle, resize: "vertical", minHeight: 80}} placeholder="Tell us about your biggest growth bottleneck..."></textarea>
                  </div>

                  <button type="submit" className="btn btn-ochre" disabled={loading} style={{width: "100%", justifyContent: "center", marginTop: 8}}>
                    {loading ? "Submitting..." : "Schedule Demo"}
                  </button>
                  <p style={{fontSize: 12, color: "var(--ink-light)", textAlign: "center", marginTop: 8, margin: 0}}>
                    By submitting, you agree to our <a href="/company-privacy" style={{color: "var(--ink)"}}>Privacy Policy</a>.
                  </p>
                </form>
              )}
            </div>

          </div>
        </div>
      </section>

      <Footer basePath="/"/>
    </>
  );
}

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