/* global React */
const { useState } = window.ReactHooks;

function ContactPage() {
  const [sent, setSent] = useState(false);
  const [form, setForm] = useState({ name: "", email: "", company: "", seats: "5–20", topic: "Sales", message: "" });

  const upd = (k, v) => setForm((f) => ({ ...f, [k]: v }));

  return (
    <main>
      <section className="page-head">
        <div className="container">
          <div className="crumb">
            <a href="#/home">Home</a><span>/</span><span>Support</span>
          </div>
          <h1>Support & sales</h1>
          <p className="sub">One inbox for everything: licensing, technical support, custom visual requests and partnership enquiries. We reply to everyone within four business hours.</p>
        </div>
      </section>

      <section style={{ paddingBottom: 96 }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 72, paddingTop: 72 }}>
            <div>
              {!sent ? (
                <form onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
                  <div className="form-row">
                    <div className="field">
                      <label>Full name</label>
                      <input required value={form.name} onChange={(e) => upd("name", e.target.value)} />
                    </div>
                    <div className="field">
                      <label>Work email</label>
                      <input required type="email" value={form.email} onChange={(e) => upd("email", e.target.value)} />
                    </div>
                  </div>
                  <div className="spacer-4" />
                  <div className="form-row">
                    <div className="field">
                      <label>Company</label>
                      <input value={form.company} onChange={(e) => upd("company", e.target.value)} />
                    </div>
                    <div className="field">
                      <label>Expected seats</label>
                      <select value={form.seats} onChange={(e) => upd("seats", e.target.value)}>
                        <option>1–4</option><option>5–20</option><option>20–100</option><option>100+</option>
                      </select>
                    </div>
                  </div>
                  <div className="spacer-4" />
                  <div className="field">
                    <label>Reason for getting in touch</label>
                    <select value={form.topic} onChange={(e) => upd("topic", e.target.value)}>
                      <option>Sales</option><option>Technical support</option><option>Custom visual request</option><option>Partnership</option><option>Billing</option>
                    </select>
                  </div>
                  <div className="spacer-4" />
                  <div className="field">
                    <label>Message</label>
                    <textarea required value={form.message} onChange={(e) => upd("message", e.target.value)} placeholder="Tell us about your use case, dataset size, and timeline…" />
                  </div>
                  <div className="spacer-6" />
                  <div style={{ display: "flex", alignItems: "center", gap: 24 }}>
                    <button type="submit" className="btn">Send message →</button>
                    <span className="mono" style={{ fontSize: 11, letterSpacing: "0.08em", color: "var(--muted)", textTransform: "uppercase" }}>
                      Or email support@tcviz.com directly
                    </span>
                  </div>
                </form>
              ) : (
                <div style={{ border: "1px solid var(--line)", padding: 40 }}>
                  <div className="eyebrow">Received</div>
                  <h2 className="display" style={{ fontSize: 40, letterSpacing: "-0.02em", margin: "12px 0 16px" }}>Thanks, {form.name.split(" ")[0] || "there"}.</h2>
                  <p style={{ color: "var(--muted)", maxWidth: 460 }}>Your message has landed at TC. Expect a reply from our team within four business hours, usually much less.</p>
                  <div className="spacer-6" />
                  <button className="btn btn-ghost btn-sm" onClick={() => setSent(false)}>Send another →</button>
                </div>
              )}
            </div>

            <aside>
              <div style={{ borderTop: "1px solid var(--line)", paddingTop: 24 }}>
                <div className="eyebrow">Direct</div>
                <h3 style={{ fontFamily: "var(--f-display)", fontWeight: 500, fontSize: 22, margin: "8px 0 8px", letterSpacing: "-0.01em" }}>
                  support@tcviz.com
                </h3>
                <p className="muted" style={{ fontSize: 14 }}>For licensed customers, technical questions and custom work. Monitored 09:00–19:00 CET, on-call after hours.</p>
              </div>

              <div className="spacer-6" />
              <div style={{ borderTop: "1px solid var(--line-soft)", paddingTop: 24 }}>
                <div className="eyebrow">Office</div>
                <p style={{ fontSize: 14, marginTop: 8 }}>TC · Power BI custom visuals<br/>Madrid, Spain</p>
              </div>

              <div className="spacer-6" />
              <div style={{ borderTop: "1px solid var(--line-soft)", paddingTop: 24 }}>
                <div className="eyebrow">SLA</div>
                <dl className="product-meta" style={{ borderTop: 0, paddingTop: 0, marginTop: 8 }}>
                  <dt>First reply</dt><dd>&lt; 4 business hours</dd>
                  <dt>Sev-1 fix</dt><dd>&lt; 48 hours</dd>
                  <dt>Certification</dt><dd>Microsoft-certified</dd>
                </dl>
              </div>
            </aside>
          </div>
        </div>
      </section>
    </main>
  );
}

window.ContactPage = ContactPage;