// QYAS — Contact / Download page
const { Nav: NavC, Footer: FooterC, useLang: useLangC } = window.QyasShell;
const { useState: useStateC } = React;

function ContactPage() {
  const { lang, setLang } = useLangC();
  const [submitted, setSubmitted] = useStateC(false);
  const [form, setForm] = useStateC({ name: "", company: "", email: "", phone: "", sites: "", meters: "", message: "" });

  const onChange = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const onSubmit = (e) => { e.preventDefault(); setSubmitted(true); };

  return (
    <>
      <NavC active="contact" lang={lang} setLang={setLang} />

      <section style={{ padding: "80px 0 0", background: "#fff", borderBottom: "1px solid var(--ink-200)" }}>
        <div className="container">
          <span className="eyebrow">DOWNLOAD · TALK TO US</span>
          <h1 style={{ fontSize: "clamp(36px, 4.5vw, 60px)", marginTop: 16, maxWidth: 920 }}>Get QYAS on your phone — or get a deployment plan for your operation.</h1>
        </div>
      </section>

      {/* Download section */}
      <section style={{ padding: "64px 0", background: "#fff" }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "center" }}>
          <div>
            <h2 style={{ marginBottom: 14 }}>Download the operator app.</h2>
            <p className="lead" style={{ marginBottom: 28 }}>iOS and Android. Sign in with your factory's QYAS account, and you're logging readings in under a minute.</p>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a href="#" className="btn btn-dark" style={{ padding: "14px 22px" }}>
                <span style={{ fontSize: 22, lineHeight: 1 }}></span>
                <span style={{ display: "grid", textAlign: "left", lineHeight: 1.1 }}>
                  <span style={{ fontSize: 10.5, fontWeight: 500, color: "#94a3b8" }}>Download on the</span>
                  <span style={{ fontFamily: "var(--font-display)", fontSize: 16, fontWeight: 600 }}>App Store</span>
                </span>
              </a>
              <a href="#" className="btn btn-dark" style={{ padding: "14px 22px" }}>
                <span style={{ fontSize: 22, lineHeight: 1 }}>▶</span>
                <span style={{ display: "grid", textAlign: "left", lineHeight: 1.1 }}>
                  <span style={{ fontSize: 10.5, fontWeight: 500, color: "#94a3b8" }}>Get it on</span>
                  <span style={{ fontFamily: "var(--font-display)", fontSize: 16, fontWeight: 600 }}>Google Play</span>
                </span>
              </a>
            </div>
            <div style={{ marginTop: 28, display: "grid", gridTemplateColumns: "repeat(3, auto)", gap: 24 }}>
              {[["v1.595", "current"], ["iOS 14+", "min"], ["Android 8+", "min"]].map(([v, l]) => (
                <div key={v}>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 14, fontWeight: 600, color: "var(--ink-900)" }}>{v}</div>
                  <div className="mono" style={{ fontSize: 10.5, color: "var(--ink-500)", letterSpacing: "0.06em", textTransform: "uppercase", marginTop: 2 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
          <div style={{ display: "flex", justifyContent: "center" }}>
            {/* QR code style block */}
            <div style={{ background: "#fff", border: "1px solid var(--ink-200)", borderRadius: 16, padding: 24, textAlign: "center" }}>
              <div style={{ width: 200, height: 200, background: "#0F172A", borderRadius: 8, position: "relative", overflow: "hidden", margin: "0 auto" }}>
                <div style={{ position: "absolute", inset: 0, display: "grid", gridTemplateColumns: "repeat(20, 1fr)", gridAutoRows: "10px", gap: 0 }}>
                  {Array.from({ length: 400 }, (_, i) => (
                    <div key={i} style={{ background: ((i * 7919 + 31) % 7) > 3 ? "#fff" : "transparent" }}></div>
                  ))}
                </div>
                {/* corner squares */}
                {[[8,8],[152,8],[8,152]].map(([x,y]) => (
                  <div key={x+y} style={{ position: "absolute", left: x, top: y, width: 40, height: 40, background: "#fff", borderRadius: 4, display: "grid", placeItems: "center" }}>
                    <div style={{ width: 24, height: 24, background: "#0F172A", borderRadius: 2, display: "grid", placeItems: "center" }}>
                      <div style={{ width: 10, height: 10, background: "#fff", borderRadius: 1 }}></div>
                    </div>
                  </div>
                ))}
                {/* center logo */}
                <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center" }}>
                  <div style={{ width: 44, height: 44, background: "var(--accent)", borderRadius: 8, display: "grid", placeItems: "center", color: "#fff", fontFamily: "var(--font-display)", fontSize: 20, fontWeight: 700 }}>Q</div>
                </div>
              </div>
              <div className="mono" style={{ fontSize: 11, color: "var(--ink-500)", letterSpacing: "0.08em", marginTop: 16, textTransform: "uppercase" }}>Scan to download</div>
            </div>
          </div>
        </div>
      </section>

      {/* Contact form */}
      <section style={{ padding: "80px 0", background: "var(--bg)", borderTop: "1px solid var(--ink-200)" }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 64 }}>
          <div>
            <span className="eyebrow">REQUEST A DEMO</span>
            <h2 style={{ marginTop: 14, marginBottom: 18 }}>Tell us about your operation.</h2>
            <p style={{ color: "var(--ink-600)", fontSize: 15.5, lineHeight: 1.6, marginBottom: 32 }}>We'll come back within one business day with a tailored deployment proposal — including pilot timeline, integration scope, and pricing for your meter count.</p>

            <div style={{ display: "grid", gap: 18 }}>
              {[
                { label: "EMAIL", value: "sales@qyas.io", mono: true },
                { label: "PHONE · KSA", value: "+966 11 480 4000", mono: true },
                { label: "OFFICE", value: "King Fahd Rd, Al Olaya, Riyadh 12313" },
                { label: "RESPONSE SLA", value: "1 business day" },
              ].map(c => (
                <div key={c.label} style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 16, padding: "12px 0", borderTop: "1px solid var(--ink-200)" }}>
                  <div className="mono" style={{ fontSize: 10.5, color: "var(--ink-500)", letterSpacing: "0.08em" }}>{c.label}</div>
                  <div style={{ fontSize: 14, color: "var(--ink-900)", fontWeight: 500, fontFamily: c.mono ? "var(--font-mono)" : "var(--font-body)" }}>{c.value}</div>
                </div>
              ))}
            </div>
          </div>

          <div style={{ background: "#fff", border: "1px solid var(--ink-200)", borderRadius: 18, padding: 36 }}>
            {submitted ? (
              <div style={{ padding: "40px 0", textAlign: "center" }}>
                <div style={{ width: 56, height: 56, borderRadius: "50%", background: "rgba(5,150,105,0.12)", color: "var(--success)", display: "grid", placeItems: "center", margin: "0 auto 20px", fontSize: 24, fontWeight: 700 }}>✓</div>
                <h3 style={{ marginBottom: 10 }}>Thanks — we'll be in touch.</h3>
                <p style={{ color: "var(--ink-600)", fontSize: 14.5 }}>One of our team will reach out within 1 business day.</p>
                <button onClick={() => { setSubmitted(false); setForm({ name: "", company: "", email: "", phone: "", sites: "", meters: "", message: "" }); }} className="btn btn-ghost" style={{ marginTop: 24 }}>Send another</button>
              </div>
            ) : (
              <form onSubmit={onSubmit}>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                  <FormField label="Full name" value={form.name} onChange={onChange("name")} required />
                  <FormField label="Company" value={form.company} onChange={onChange("company")} required />
                  <FormField label="Work email" type="email" value={form.email} onChange={onChange("email")} required />
                  <FormField label="Phone" type="tel" value={form.phone} onChange={onChange("phone")} />
                  <FormField label="Number of sites" type="number" value={form.sites} onChange={onChange("sites")} placeholder="e.g. 4" />
                  <FormField label="Number of meters" type="number" value={form.meters} onChange={onChange("meters")} placeholder="e.g. 1,200" />
                </div>
                <FormField label="What are you trying to solve?" value={form.message} onChange={onChange("message")} textarea />
                <button type="submit" className="btn btn-primary" style={{ marginTop: 20, width: "100%", justifyContent: "center", padding: "14px 20px" }}>Request demo →</button>
                <p className="mono" style={{ fontSize: 10.5, color: "var(--ink-400)", textAlign: "center", marginTop: 14, letterSpacing: "0.04em" }}>BY SUBMITTING, YOU AGREE TO OUR PRIVACY POLICY.</p>
              </form>
            )}
          </div>
        </div>
      </section>

      <FooterC lang={lang} />
    </>
  );
}

function FormField({ label, value, onChange, type = "text", required, placeholder, textarea }) {
  const wrap = textarea ? { gridColumn: "1 / -1", marginTop: 16 } : {};
  return (
    <label style={{ display: "grid", gap: 6, ...wrap }}>
      <span className="mono" style={{ fontSize: 10.5, color: "var(--ink-500)", letterSpacing: "0.08em", fontWeight: 600 }}>
        {label.toUpperCase()}{required && <span style={{ color: "var(--accent)" }}> *</span>}
      </span>
      {textarea ? (
        <textarea value={value} onChange={onChange} placeholder={placeholder} rows={4} style={inputStyle} />
      ) : (
        <input type={type} value={value} onChange={onChange} required={required} placeholder={placeholder} style={inputStyle} />
      )}
    </label>
  );
}

const inputStyle = {
  padding: "12px 14px",
  border: "1px solid var(--ink-200)",
  borderRadius: 10,
  fontFamily: "var(--font-body)",
  fontSize: 14.5,
  color: "var(--ink-900)",
  background: "var(--surface-muted)",
  outline: "none",
  resize: "vertical",
  width: "100%",
};

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