// ContactForm — quote request. Posts to nowhere; shows success state.
function ContactForm() {
  const [state, setState] = React.useState({ company: "", contact: "", phone: "", service: "Jasa Plating Zinc", message: "" });
  const [sent, setSent] = React.useState(false);
  const set = (k) => (e) => setState((s) => ({ ...s, [k]: e.target.value }));
  const submit = (e) => { e.preventDefault(); setSent(true); };

  return (
    <section className="dep-contact" id="kontak">
      <div className="dep-contact__inner">
        <div className="dep-contact__copy">
          <span className="eyebrow">Contact Information</span>
          <h2>Diskusikan kebutuhan plating Anda.</h2>
          <p className="lead">
            Kirim spesifikasi material, volume, dan tipe plating yang dibutuhkan.
            Tim kami akan menghubungi Anda untuk konsultasi dan penawaran.
          </p>
          <ul className="dep-contact__channels">
            <li>
              <Icon name="phone" />
              <div>
                <small>Telepon</small>
                <a href="tel:+6287781044173">+62 877-8104-4173</a>
                <a href="tel:02220562755">(022) 20562755</a>
              </div>
            </li>
            <li>
              <Icon name="mail" />
              <div>
                <small>Email</small>
                <a href="mailto:dinamika_ep@yahoo.co.id">dinamika_ep@yahoo.co.id</a>
              </div>
            </li>
            <li>
              <Icon name="pin" />
              <div>
                <small>Alamat</small>
                <span>Jl. Caringin No. 236, Babakan Ciparay, Kota Bandung</span>
              </div>
            </li>
          </ul>
        </div>

        {sent ? (
          <div className="dep-contact__form is-sent">
            <div className="dep-contact__check">
              <svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                <path d="M20 6 9 17l-5-5"/>
              </svg>
            </div>
            <h3>Terima kasih, {state.contact || "Anda"}.</h3>
            <p>Permintaan penawaran telah kami terima. Tim kami akan menghubungi Anda dalam 1×24 jam kerja.</p>
            <button className="btn btn-secondary" onClick={() => { setSent(false); setState({ company: "", contact: "", phone: "", service: "Jasa Plating Zinc", message: "" }); }}>Kirim permintaan lain</button>
          </div>
        ) : (
          <form className="dep-contact__form" onSubmit={submit}>
            <h3>Form penawaran</h3>
            <label>Nama Perusahaan
              <input className="field" required value={state.company} onChange={set("company")} placeholder="PT Contoh Industri"/>
            </label>
            <div className="dep-contact__row">
              <label>Nama Kontak
                <input className="field" required value={state.contact} onChange={set("contact")} placeholder="Budi Santoso"/>
              </label>
              <label>No. Telepon
                <input className="field" required value={state.phone} onChange={set("phone")} placeholder="+62 …"/>
              </label>
            </div>
            <label>Layanan
              <select className="field" value={state.service} onChange={set("service")}>
                <option>Jasa Plating Zinc</option>
                <option>Jasa Plating Nickel Chrome</option>
                <option>Jasa Plating Nickel Brass</option>
                <option>Konsultasi / lainnya</option>
              </select>
            </label>
            <label>Detail Permintaan
              <textarea className="field" rows="4" value={state.message} onChange={set("message")} placeholder="Material, volume estimasi (kg), spesifikasi finish, tenggat waktu…"/>
            </label>
            <button type="submit" className="btn btn-primary btn-lg">Kirim permintaan</button>
            <small className="dep-contact__legal">Dengan mengirim form, Anda setuju dihubungi oleh tim PT Dinamika Electro Plating.</small>
          </form>
        )}
      </div>
    </section>
  );
}

function Icon({ name }) {
  const props = { width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
  if (name === "phone") return (<svg {...props}><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.33 1.85.57 2.81.7A2 2 0 0 1 22 16.92Z"/></svg>);
  if (name === "mail") return (<svg {...props}><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 7 10 6 10-6"/></svg>);
  if (name === "pin") return (<svg {...props}><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>);
  return null;
}
window.ContactForm = ContactForm;
window.Icon = Icon;