/* global React, GamacaPrimitives */
const { useState } = React;

function encode(data) {
  return Object.keys(data)
    .map((k) => encodeURIComponent(k) + "=" + encodeURIComponent(data[k]))
    .join("&");
}

function ContactSection() {
  const [status, setStatus] = useState("idle");
  const [form, setForm] = useState({ name: "", email: "", phone: "", message: "", "bot-field": "" });

  const handleChange = (e) => setForm({ ...form, [e.target.name]: e.target.value });

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus("submitting");
    try {
      const res = await fetch("/", {
        method: "POST",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        body: encode({ "form-name": "contact", ...form }),
      });
      if (!res.ok) throw new Error("Network");
      setStatus("success");
    } catch (err) {
      setStatus("error");
    }
  };

  const inputCls = "w-full px-4 py-3 bg-white border border-stone-200 rounded-md text-stone-900 placeholder-stone-400 focus:outline-none focus:border-stone-900 focus:ring-1 focus:ring-stone-900 transition";
  const labelCls = "block text-xs uppercase tracking-widest text-stone-500 mb-2 font-medium";

  return (
    <section id="contact" className="py-24 bg-white">
      <div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-12">
          <h2 className="text-4xl font-bold text-stone-900 mb-6">Ready to ship the future?</h2>
          <p className="text-lg text-stone-500">
            Let's discuss your "Where to Play" and test the "How to Win".
            <br />First conversation, no strings attached.
          </p>
        </div>

        {status === "success" ? (
          <div className="bg-stone-50 border border-stone-200 rounded-lg p-12 text-center">
            <div className="text-2xl font-bold text-stone-900 mb-3">Message received.</div>
            <p className="text-stone-500">We'll get back to you within 24 business hours.</p>
          </div>
        ) : (
          <form name="contact" method="POST" data-netlify="true" data-netlify-honeypot="bot-field" onSubmit={handleSubmit} className="space-y-6">
            <input type="hidden" name="form-name" value="contact" />
            <p className="hidden">
              <label>Don't fill this out: <input name="bot-field" value={form["bot-field"]} onChange={handleChange} /></label>
            </p>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
              <div>
                <label className={labelCls} htmlFor="name">Name</label>
                <input id="name" type="text" name="name" required value={form.name} onChange={handleChange} className={inputCls} placeholder="Your name" />
              </div>
              <div>
                <label className={labelCls} htmlFor="email">Email</label>
                <input id="email" type="email" name="email" required value={form.email} onChange={handleChange} className={inputCls} placeholder="you@company.com" />
              </div>
            </div>

            <div>
              <label className={labelCls} htmlFor="phone">Phone <span className="text-stone-300 normal-case tracking-normal">(optional)</span></label>
              <input id="phone" type="tel" name="phone" value={form.phone} onChange={handleChange} className={inputCls} placeholder="+33 6 12 34 56 78" />
            </div>

            <div>
              <label className={labelCls} htmlFor="message">Message</label>
              <textarea id="message" name="message" required rows={5} value={form.message} onChange={handleChange} className={inputCls} placeholder="Tell us about your project, your context, your AI challenges…" />
            </div>

            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 pt-2">
              <p className="text-xs text-stone-400">Your data stays confidential. <a href="/en/privacy.html" className="underline hover:text-stone-600">Privacy policy</a>.</p>
              <button type="submit" disabled={status === "submitting"} className="px-8 py-3 bg-stone-900 text-white font-medium rounded-md hover:bg-stone-700 transition disabled:opacity-50 disabled:cursor-not-allowed">
                {status === "submitting" ? "Sending…" : "Send"}
              </button>
            </div>

            {status === "error" && <p className="text-sm text-red-600 text-center">Something went wrong. Please try again in a moment.</p>}
          </form>
        )}

        <div className="mt-16 border-t border-stone-100 pt-8 text-center">
          <p className="text-xs text-stone-400 uppercase tracking-widest mb-2">GAMACA.AI © 2025</p>
          <p className="text-xs text-stone-300">Based in France • Worldwide engagements</p>
        </div>
      </div>
    </section>
  );
}

window.GamacaContact = ContactSection;