function Page() {
  const [aov, setAov] = React.useState(150);
  const [margin, setMargin] = React.useState(40); // 40% margin
  const [spend, setSpend] = React.useState(10000);
  const [cpc, setCpc] = React.useState(1.50);

  const [email, setEmail] = React.useState("");
  const [submitted, setSubmitted] = React.useState(false);

  // Calculations
  const grossProfitPerOrder = aov * (margin / 100);
  const breakEvenCPA = grossProfitPerOrder;
  const targetROAS = (aov / breakEvenCPA) * 100;
  
  const estimatedClicks = spend / cpc;
  // If we assume a 2% conversion rate
  const convRate = 0.02;
  const estimatedConversions = estimatedClicks * convRate;
  const estimatedCPA = spend / estimatedConversions;

  const [isSubmitting, setIsSubmitting] = React.useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if(email) {
      setIsSubmitting(true);
      const data = new FormData();
      data.append("email", email);
      data.append("form_source", "ROAS Calculator");
      data.append("aov", aov);
      data.append("margin", margin);
      data.append("monthly_spend", spend);
      data.append("cpc", cpc);
      
      try {
        const response = await fetch("https://formspree.io/f/xpqkvrpq", {
          method: "POST",
          body: data,
          headers: { 'Accept': 'application/json' }
        });
        if (response.ok) {
          setSubmitted(true);
        } else {
          alert("Oops! There was a problem submitting your form.");
        }
      } catch (err) {
        alert("Failed to send message. Please try again.");
      }
      setIsSubmitting(false);
    }
  };

  useReveal();

  return (
    <>
      <Header basePath="./"/>
      
      <section className="page-hero">
        <div className="container">
          <div className="crumb reveal" style={{marginBottom: 24}}>
            <a href="../index">Auctera</a>
            <span>›</span>
            <span>Resources</span>
            <span>›</span>
            <span>ROAS Calculator</span>
          </div>
          <div className="hero-two reveal">
            <div>
              <div className="eyebrow eyebrow-dot" style={{marginBottom: 24}}>Interactive Tool</div>
              <h1 className="display-2" style={{marginBottom: 24}}>
                Break-Even <span className="h-italic">ROAS Calculator.</span>
              </h1>
              <p className="lead" style={{marginBottom: 32}}>Stop guessing your targets. Calculate your exact break-even CPA and target ROAS based on your true profit margins.</p>
            </div>
            <div>
              <div style={{background: "var(--paper-2)", border: "1px solid var(--line)", padding: 32, borderRadius: 16}}>
                <p style={{fontFamily: "var(--font-mono)", fontSize: 12, textTransform: "uppercase", letterSpacing: "0.1em", color: "var(--muted)", marginBottom: 24}}>Input Your Metrics</p>
                
                <div style={{display: "grid", gap: 20}}>
                  <div>
                    <label style={{display: "block", fontSize: 14, marginBottom: 8, color: "var(--ink-2)"}}>Average Order Value (AOV) - $</label>
                    <input type="number" className="input" value={aov} onChange={e => setAov(Number(e.target.value))} />
                  </div>
                  <div>
                    <label style={{display: "block", fontSize: 14, marginBottom: 8, color: "var(--ink-2)"}}>Gross Profit Margin (%)</label>
                    <input type="number" className="input" value={margin} onChange={e => setMargin(Number(e.target.value))} />
                  </div>
                  <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16}}>
                    <div>
                      <label style={{display: "block", fontSize: 14, marginBottom: 8, color: "var(--ink-2)"}}>Monthly Spend ($)</label>
                      <input type="number" className="input" value={spend} onChange={e => setSpend(Number(e.target.value))} />
                    </div>
                    <div>
                      <label style={{display: "block", fontSize: 14, marginBottom: 8, color: "var(--ink-2)"}}>Est. CPC ($)</label>
                      <input type="number" className="input" step="0.1" value={cpc} onChange={e => setCpc(Number(e.target.value))} />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{background: "var(--ink)", color: "var(--paper)", marginTop: 64}}>
        <div className="container">
          <div className="reveal" style={{textAlign: "center", marginBottom: 64}}>
            <h2 className="display-3">Your Profitability Targets</h2>
            <p style={{color: "rgba(246,242,236,0.7)"}}>Based on an AOV of ${aov} and a margin of {margin}%, here are your absolute limits.</p>
          </div>
          
          <div className="grid grid-3 reveal-stagger" style={{gap: 32, marginBottom: 64}}>
            <div style={{background: "rgba(246,242,236,0.03)", padding: 40, borderRadius: 16, border: "1px solid rgba(246,242,236,0.1)", textAlign: "center"}}>
              <div style={{fontFamily: "var(--font-mono)", fontSize: 12, textTransform: "uppercase", letterSpacing: "0.1em", color: "var(--ochre)", marginBottom: 16}}>Break-Even CPA</div>
              <div style={{fontFamily: "var(--font-display)", fontSize: 56, lineHeight: 1}}>${breakEvenCPA.toFixed(2)}</div>
              <p style={{fontSize: 14, color: "rgba(246,242,236,0.5)", marginTop: 16}}>If you pay more than this to acquire a customer, you lose money.</p>
            </div>
            
            <div style={{background: "rgba(246,242,236,0.03)", padding: 40, borderRadius: 16, border: "1px solid rgba(246,242,236,0.1)", textAlign: "center"}}>
              <div style={{fontFamily: "var(--font-mono)", fontSize: 12, textTransform: "uppercase", letterSpacing: "0.1em", color: "var(--ochre)", marginBottom: 16}}>Target ROAS</div>
              <div style={{fontFamily: "var(--font-display)", fontSize: 56, lineHeight: 1}}>{targetROAS.toFixed(0)}%</div>
              <p style={{fontSize: 14, color: "rgba(246,242,236,0.5)", marginTop: 16}}>The minimum return on ad spend required to break even.</p>
            </div>
            
            <div style={{background: "rgba(246,242,236,0.03)", padding: 40, borderRadius: 16, border: "1px solid rgba(246,242,236,0.1)", textAlign: "center", position: "relative", overflow: "hidden"}}>
              <div style={{fontFamily: "var(--font-mono)", fontSize: 12, textTransform: "uppercase", letterSpacing: "0.1em", color: "var(--ochre)", marginBottom: 16}}>Projected CPA</div>
              <div style={{fontFamily: "var(--font-display)", fontSize: 56, lineHeight: 1}} className={estimatedCPA > breakEvenCPA ? "text-danger" : ""}>${estimatedCPA.toFixed(2)}</div>
              <p style={{fontSize: 14, color: "rgba(246,242,236,0.5)", marginTop: 16}}>Based on standard 2% conversion rate.</p>
              
              {estimatedCPA > breakEvenCPA && (
                <div style={{position: "absolute", top: 0, left: 0, right: 0, background: "#d93025", color: "white", fontSize: 11, padding: "4px 0", textTransform: "uppercase", letterSpacing: "0.1em", fontWeight: "bold"}}>Unprofitable Projection</div>
              )}
            </div>
          </div>

          <div className="reveal" style={{maxWidth: 600, margin: "0 auto", background: "var(--ochre)", color: "var(--ink)", padding: 40, borderRadius: 16, textAlign: "center"}}>
            {submitted ? (
              <div>
                <h3 className="display-4" style={{margin: "0 0 16px"}}>Request sent!</h3>
                <p style={{margin: 0}}>Our performance team will review your metrics and email you a customized growth strategy shortly.</p>
              </div>
            ) : (
              <div>
                <h3 className="display-4" style={{margin: "0 0 16px"}}>Get your growth plan</h3>
                <p style={{margin: "0 0 24px"}}>Enter your email to have our performance experts build a custom acquisition strategy based on your targets.</p>
                <form onSubmit={handleSubmit} style={{display: "flex", gap: 12}}>
                  <input 
                    type="email" 
                    required
                    placeholder="Work email address" 
                    value={email}
                    onChange={e => setEmail(e.target.value)}
                    style={{flex: 1, padding: "14px 20px", borderRadius: 8, border: "none", outline: "none", fontSize: 16}} 
                    disabled={isSubmitting}
                  />
                  <button type="submit" className="btn" style={{background: "var(--ink)", color: "var(--paper)", borderColor: "var(--ink)", opacity: isSubmitting ? 0.7 : 1}} disabled={isSubmitting}>
                    {isSubmitting ? "Sending..." : "Get Strategy"}
                  </button>
                </form>
              </div>
            )}
          </div>

        </div>
      </section>

      <Footer basePath="./"/>
    </>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<Page/>);