/* global React, Ph */
const { useState: useStateContact } = React;

/* ============================================================
   CONTACT PAGE
============================================================ */
function ContactPage({ setPage }) {
  const [form, setForm] = useStateContact({
    name: "", email: "", message: "", interest: "Drone services",
  });
  const [sent, setSent] = useStateContact(false);

  function update(k, v) { setForm(f => ({ ...f, [k]: v })); }
  function submit(e) {
    e.preventDefault();
    setSent(true);
  }

  return (
    <>
      <header className="page-header">
        <div className="container">
          <div className="crumb">
            <span onClick={() => setPage("home")} style={{ cursor: "pointer" }}>HOME</span>
            <span className="sep">/</span>
            <span style={{ color: "var(--ink)" }}>CONTACT</span>
          </div>
          <h1>Start a project — or enquire about a Parrot product.</h1>
          <p className="lede">
            All Parrot ANAFI UKR sales enquiries and drone service requests are handled through this form.
            We respond within one working day.
          </p>
        </div>
      </header>

      <section>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 64 }} className="contact-grid">
            {/* Contact details */}
            <div>
              <div className="eyebrow" style={{ marginBottom: 16 }}>Contact details</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
                <ContactRow k="Name" v="Dr. Linas Gelazanskas" />
                <ContactRow k="Email" v={<a href="mailto:linas@droneteam.lt" style={{ color: "var(--brand)" }}>linas@droneteam.lt</a>} />
                <ContactRow k="Phone" v={<a href="tel:+37068210215" style={{ color: "var(--brand)" }}>+370 682 10215</a>} />
                <ContactRow k="Hours" v="Mon — Fri · 8:00 — 22:00" />
                <ContactRow k="Location" v="Vilnius, Lithuania" />
              </div>

              <div style={{ marginTop: 48, paddingTop: 32, borderTop: "1px solid var(--line)" }}>
                <div className="eyebrow" style={{ marginBottom: 16 }}>About us</div>
                <p style={{ fontSize: 15, color: "var(--ink-2)", lineHeight: 1.7, maxWidth: 480 }}>
                  Droneteam is a professional drone services company and the official Parrot drone reseller in
                  Lithuania. Part of UAB IT Logika, operating since 2011 — based in Vilnius.
                </p>
                <div style={{ display: "flex", gap: 32, marginTop: 28 }}>
                  <div>
                    <div style={{ fontFamily: "var(--serif)", fontSize: 30 }}>2011</div>
                    <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", color: "var(--ink-3)", marginTop: 6, textTransform: "uppercase" }}>Operating since</div>
                  </div>
                  <div>
                    <div style={{ fontFamily: "var(--serif)", fontSize: 30 }}>25+</div>
                    <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", color: "var(--ink-3)", marginTop: 6, textTransform: "uppercase" }}>Major clients</div>
                  </div>
                </div>
              </div>
            </div>

            {/* Form */}
            <div style={{ background: "var(--bg-soft)", padding: 40, border: "1px solid var(--line)" }}>
              {sent ? (
                <div style={{ textAlign: "center", padding: "60px 0" }}>
                  <div style={{ width: 56, height: 56, margin: "0 auto", borderRadius: "50%", background: "var(--brand)", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontSize: 26 }}>✓</div>
                  <h3 style={{ marginTop: 24, fontFamily: "var(--serif)" }}>Enquiry received</h3>
                  <p style={{ marginTop: 12, color: "var(--ink-2)", fontSize: 15 }}>
                    Thank you, {form.name || "—"}. We'll respond to {form.email || "your email"} within one working day.
                  </p>
                  <button className="btn btn-ghost" style={{ marginTop: 24 }} onClick={() => { setSent(false); setForm({ name: "", email: "", message: "", interest: "Drone services" }); }}>
                    Send another enquiry
                  </button>
                </div>
              ) : (
                <form onSubmit={submit}>
                  <div className="eyebrow" style={{ marginBottom: 24 }}>Product enquiry form</div>
                  <Field label="Name">
                    <input required value={form.name} onChange={e => update("name", e.target.value)} placeholder="Your full name" />
                  </Field>
                  <Field label="Email">
                    <input required type="email" value={form.email} onChange={e => update("email", e.target.value)} placeholder="name@company.lt" />
                  </Field>
                  <Field label="What are you interested in?">
                    <select value={form.interest} onChange={e => update("interest", e.target.value)}>
                      <option>ANAFI UKR</option>
                      <option>ANAFI UKR GOV</option>
                      <option>XLR battery</option>
                      <option>Drone services</option>
                      <option>Pilot training</option>
                      <option>Other</option>
                    </select>
                  </Field>
                  <Field label="Message">
                    <textarea required value={form.message} onChange={e => update("message", e.target.value)} rows="5" placeholder="Tell us about your project, timeline and required deliverables." />
                  </Field>
                  <button type="submit" className="btn" style={{ width: "100%", justifyContent: "center", marginTop: 8 }}>
                    Submit enquiry <span className="arrow">→</span>
                  </button>
                  <p style={{ marginTop: 16, fontSize: 12, color: "var(--ink-3)", lineHeight: 1.5 }}>
                    By submitting you agree to our privacy policy. We respond within one working day.
                  </p>
                </form>
              )}
              <style>{`
                form input, form select, form textarea {
                  width: 100%; padding: 12px 14px; font-family: var(--sans); font-size: 14.5px;
                  border: 1px solid var(--line); background: #fff; color: var(--ink);
                  border-radius: 0; outline: none; transition: border-color .15s;
                }
                form input:focus, form select:focus, form textarea:focus { border-color: var(--ink); }
                form textarea { resize: vertical; }
              `}</style>
            </div>
          </div>
          <style>{`@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr !important; } }`}</style>
        </div>
      </section>
    </>
  );
}

function ContactRow({ k, v }) {
  return (
    <div>
      <div className="mono" style={{ fontSize: 11, letterSpacing: "0.16em", color: "var(--ink-3)", textTransform: "uppercase", marginBottom: 4 }}>{k}</div>
      <div style={{ fontSize: 17, fontFamily: "var(--serif)", color: "var(--ink)" }}>{v}</div>
    </div>
  );
}

function Field({ label, children }) {
  return (
    <label style={{ display: "block", marginBottom: 18 }}>
      <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", color: "var(--ink-2)", marginBottom: 8, textTransform: "uppercase" }}>{label}</div>
      {children}
    </label>
  );
}

window.ContactPage = ContactPage;