/* global React, Reveal */

const INQUIRY_TYPES = ["Request pricing", "Book a consultation", "Configure a build", "Discuss a custom vessel"];
const CONTACT_EMAIL = "alexbrom12@gmail.com";

function Contact() {
  const [type, setType] = useState("Request pricing");
  const [form, setForm] = useState({ name: "", email: "", phone: "", msg: "" });
  const [sent, setSent] = useState(false);
  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
  const valid = form.name.trim() && /\S+@\S+\.\S+/.test(form.email);
  const submit = (e) => {
    e.preventDefault();
    if (!valid) return;
    const subject = `${type} — ${form.name} (Nemesis 2200)`;
    const body =
      `Enquiry type: ${type}\n` +
      `Name: ${form.name}\n` +
      `Email: ${form.email}\n` +
      `Phone: ${form.phone || "—"}\n\n` +
      `Message:\n${form.msg || "—"}\n`;
    window.location.href =
      `mailto:${CONTACT_EMAIL}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    setSent(true);
  };

  return (
    <section className="section contact" id="contact">
      <div className="contact__bg"></div>
      <div className="wrap contact__wrap">
        <div className="contact__left">
          <Reveal><div className="eyebrow">08 — Contact</div></Reveal>
          <Reveal delay={1}><h2 className="display contact__title">Ready to build<br />your Nemesis?</h2></Reveal>
          <Reveal delay={2}><p className="lead">Tell us how you fish and what you want from the water. We'll come
            back with pricing, a build slot, or a conversation about something completely custom.</p></Reveal>
          <Reveal delay={3} className="contact__info">
            <div className="cinfo">
              <span className="tag">Design Studio</span>
              <strong>Bromley Marine Designs</strong>
              <span className="muted">Cape Town · South Africa</span>
            </div>
            <div className="cinfo">
              <span className="tag">Sales &amp; Builds</span>
              <strong>Marine Hub</strong>
              <a href="tel:+27680577812" className="clink">068 057 7812</a>
              <span className="muted">32 Milner Street, Paarden Eiland</span>
            </div>
          </Reveal>
        </div>

        <Reveal delay={1} className="contact__formwrap">
          {sent ? (
            <div className="thanks">
              <div className="thanks__mark">✓</div>
              <h3 className="h-md">Almost there.</h3>
              <p className="muted">Thanks {form.name.split(" ")[0] || "there"} — your email app should have opened
                with your <strong>{type.toLowerCase()}</strong> ready to send to Bromley. Just hit send and we'll
                be in touch. Tight lines.</p>
              <button className="btn btn-ghost" onClick={() => { setSent(false); setForm({ name: "", email: "", phone: "", msg: "" }); }}>Send another<span className="arr">→</span></button>
            </div>
          ) : (
            <form className="cform" onSubmit={submit}>
              <div className="cform__types">
                {INQUIRY_TYPES.map((t) => (
                  <button type="button" key={t} className={`chip ${type === t ? "on" : ""}`} onClick={() => setType(t)}>{t}</button>
                ))}
              </div>
              <div className="cform__field">
                <label>Name</label>
                <input value={form.name} onChange={set("name")} placeholder="Your name" />
              </div>
              <div className="cform__row">
                <div className="cform__field">
                  <label>Email</label>
                  <input value={form.email} onChange={set("email")} placeholder="you@email.com" type="email" />
                </div>
                <div className="cform__field">
                  <label>Phone</label>
                  <input value={form.phone} onChange={set("phone")} placeholder="Optional" />
                </div>
              </div>
              <div className="cform__field">
                <label>Tell us about your build</label>
                <textarea value={form.msg} onChange={set("msg")} rows={4} placeholder="Where you fish, engine preference, timeline…"></textarea>
              </div>
              <button className="btn btn-primary btn-block" type="submit" disabled={!valid} style={{ opacity: valid ? 1 : 0.5 }}>
                Send Enquiry<span className="arr">→</span>
              </button>
            </form>
          )}
        </Reveal>
      </div>

      <footer className="footer">
        <div className="wrap footer__inner">
          <div className="footer__brand">
            <img className="brand__mark" src="assets/bmd-logo.png" alt="Bromley Marine Designs" />
            <div>
              <strong>BROMLEY MARINE DESIGNS</strong>
              <span className="muted">Nemesis 2200 · Offshore Catamaran</span>
            </div>
          </div>
          <div className="footer__social">
            <a href="https://www.instagram.com/bromley_marinedesign/" target="_blank" rel="noopener" aria-label="Instagram">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.8">
                <rect x="3" y="3" width="18" height="18" rx="5"></rect>
                <circle cx="12" cy="12" r="4"></circle>
                <circle cx="17.5" cy="6.5" r="1.1" fill="currentColor" stroke="none"></circle>
              </svg>
              <span>Instagram</span>
            </a>
            <a href="https://www.youtube.com/@alexbromley" target="_blank" rel="noopener" aria-label="YouTube">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.8">
                <rect x="2.5" y="5" width="19" height="14" rx="4"></rect>
                <path d="M10 9.2l5 2.8-5 2.8z" fill="currentColor" stroke="none"></path>
              </svg>
              <span>YouTube</span>
            </a>
          </div>
          <div className="footer__meta mono">
            <span>Designed in Cape Town</span>
            <span>© {new Date().getFullYear()} Bromley Marine Designs</span>
          </div>
        </div>
      </footer>
    </section>
  );
}

Object.assign(window, { Contact });