// Contact / Book a demo page
function ContactPage() {
  const [submitted, setSubmitted] = React.useState(false);
  return (
    <Site>
      <section className="page-hero">
        <div className="container">
          <Breadcrumb items={[{ label: "Contact" }]}/>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, marginTop: 32 }}>
            <div>
              <span className="eyebrow">Book a demo</span>
              <h1 style={{ marginTop: 18 }}>Let's see if we're a <span className="gradient-text">fit.</span></h1>
              <p className="page-hero-sub" style={{ marginTop: 18 }}>30 minutes with a solutions engineer. We'll dig into your stack, your workflows, and whether Antelope replaces enough to be worth the move.</p>
              <div style={{ marginTop: 32, display: "flex", flexDirection: "column", gap: 16 }}>
                {[
                  { l: "Email", v: "hello@antelope.systems", icon: "✉" },
                  { l: "Telegram", v: "@antelope_systems", icon: "✈" },
                  { l: "Headquarters", v: "Limassol, Cyprus", icon: "◉" },
                ].map((c) => (
                  <div key={c.l} style={{ display: "flex", alignItems: "center", gap: 14 }}>
                    <div style={{ width: 38, height: 38, borderRadius: 10, background: "var(--surface-2)", border: "1px solid var(--line)", display: "grid", placeItems: "center", color: "var(--purple-2)" }}>{c.icon}</div>
                    <div>
                      <div style={{ fontSize: 11, color: "var(--text-mute)", letterSpacing: "0.06em", textTransform: "uppercase" }}>{c.l}</div>
                      <div style={{ fontSize: 15, fontWeight: 500, color: "var(--text)", marginTop: 2 }}>{c.v}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div className="card" style={{ padding: 32, position: "relative" }}>
              {submitted ? (
                <div style={{ textAlign: "center", padding: "60px 0" }}>
                  <div style={{ fontSize: 48, marginBottom: 12 }}>✓</div>
                  <h3>Thanks — we'll be in touch within 24 hours.</h3>
                </div>
              ) : (
                <form onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }} style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                  {[
                    { id: "name", l: "Full name", type: "text" },
                    { id: "company", l: "Company", type: "text" },
                    { id: "role", l: "Role", type: "text" },
                    { id: "email", l: "Work email", type: "email" },
                    { id: "phone", l: "Phone (optional)", type: "tel" },
                  ].map((f) => (
                    <div key={f.id}>
                      <label style={{ fontSize: 11.5, color: "var(--text-dim)", display: "block", marginBottom: 6, fontWeight: 500 }}>{f.l}</label>
                      <input type={f.type} required={f.id !== "phone"} className="contact-input"/>
                    </div>
                  ))}
                  <div>
                    <label style={{ fontSize: 11.5, color: "var(--text-dim)", display: "block", marginBottom: 6, fontWeight: 500 }}>What are you looking to solve?</label>
                    <textarea rows="4" className="contact-input"/>
                  </div>
                  <button type="submit" className="btn btn-primary" style={{ marginTop: 8, justifyContent: "center" }}>Book my demo</button>
                  <style>{`
                    .contact-input {
                      width: 100%; padding: 11px 14px; background: var(--surface-2);
                      border: 1px solid var(--line); border-radius: 10px;
                      color: var(--text); font-family: inherit; font-size: 14px;
                      transition: border-color .15s ease, background .15s ease;
                    }
                    .contact-input:focus { outline: none; border-color: var(--purple-2); background: var(--surface-hover); }
                  `}</style>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>
    </Site>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<ContactPage/>);