/* Contact section
 * Editorial split: copy + studio meta on the left, slim form on the right.
 * Form posts to mailto: as a graceful no-backend default. Replace the
 * onSubmit handler with a Formspree/Netlify endpoint when ready.
 */

const CONTACT = {
  email: "support@pastryconsultantchefm.com",
  whatsapp: "+44 7438 707834",
  whatsappHref: "https://wa.me/447438707834",
  instagram: "@chef_mhaidar",
  instagramHref: "https://www.instagram.com/chef_mhaidar/",
};

function Contact(){
  const [reduced, setReduced] = React.useState(false);
  const [state, setState] = React.useState({ name:"", email:"", country:"United Arab Emirates", project:"Concept & Pre-Opening", message:"" });
  const [sent, setSent] = React.useState(false);

  React.useEffect(()=>{
    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
    const set = ()=> setReduced(mq.matches);
    set(); mq.addEventListener?.("change", set);
    return ()=> mq.removeEventListener?.("change", set);
  },[]);

  const onChange = (k)=> (e)=> setState(s => ({...s, [k]: e.target.value}));

  const onSubmit = (e)=>{
    e.preventDefault();
    // Default: open the visitor's mail client. Swap this for fetch() against
    // a Formspree/Netlify endpoint once you have one.
    const subject = encodeURIComponent(`Free consultation request — ${state.project}`);
    const body = encodeURIComponent(
      `Name: ${state.name}\n` +
      `Email: ${state.email}\n` +
      `Country: ${state.country}\n` +
      `Project type: ${state.project}\n\n` +
      `${state.message}\n`
    );
    window.location.href = `mailto:${CONTACT.email}?subject=${subject}&body=${body}`;
    setSent(true);
  };

  return (
    <section className="ml-contact" id="contact" data-reduced={reduced?"true":"false"}>
      <div className="ml-contact-inner">
        <header className="ml-contact-head">
          <p className="ml-next-eyebrow" style={{color:"var(--steel)"}}>Request a Free Consultation</p>
          <h2 className="ml-contact-h">A short brief, an honest answer — usually <em>within forty-eight hours</em>.</h2>
          <p className="ml-contact-sub">Tell us what you're building and where you are in the process. The studio takes on a small number of engagements each year; we'll respond either way.</p>
        </header>

        <div className="ml-contact-grid">
          <aside className="ml-contact-meta">
            <div className="ml-contact-row">
              <p className="ml-contact-key">Email</p>
              <a className="ml-contact-val" href={`mailto:${CONTACT.email}`}>{CONTACT.email}</a>
            </div>
            <div className="ml-contact-row">
              <p className="ml-contact-key">WhatsApp</p>
              <a className="ml-contact-val" href={CONTACT.whatsappHref} target="_blank" rel="noopener">{CONTACT.whatsapp}</a>
            </div>
            <div className="ml-contact-row">
              <p className="ml-contact-key">Instagram</p>
              <a className="ml-contact-val" href={CONTACT.instagramHref} target="_blank" rel="noopener">{CONTACT.instagram}</a>
            </div>
            <div className="ml-contact-row">
              <p className="ml-contact-key">Coverage</p>
              <p className="ml-contact-val ml-contact-val--static">UAE · KSA · Qatar · Oman · Lebanon · UK · France · Italy</p>
            </div>
            <div className="ml-contact-row">
              <p className="ml-contact-key">Hours</p>
              <p className="ml-contact-val ml-contact-val--static">Mon–Fri · 09:00–18:00 GST</p>
            </div>
          </aside>

          <form className="ml-contact-form" onSubmit={onSubmit} noValidate>
            <div className="ml-field">
              <label htmlFor="cf-name">Name</label>
              <input id="cf-name" name="name" type="text" value={state.name} onChange={onChange("name")} required autoComplete="name"/>
            </div>
            <div className="ml-field">
              <label htmlFor="cf-email">Email</label>
              <input id="cf-email" name="email" type="email" value={state.email} onChange={onChange("email")} required autoComplete="email"/>
            </div>
            <div className="ml-field">
              <label htmlFor="cf-country">Country</label>
              <div className="ml-select">
                <select id="cf-country" name="country" value={state.country} onChange={onChange("country")} aria-label="Country">
                  <option>United Arab Emirates</option>
                  <option>Saudi Arabia</option>
                  <option>Oman</option>
                  <option>Other</option>
                </select>
                <span className="ml-select-caret" aria-hidden="true">
                  <svg width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" stroke="currentColor" strokeWidth="1.2" fill="none" strokeLinecap="square"/></svg>
                </span>
              </div>
            </div>
            <div className="ml-field">
              <label htmlFor="cf-project">Project type</label>
              <div className="ml-select">
                <select id="cf-project" name="project" value={state.project} onChange={onChange("project")} aria-label="Project type">
                  <option>Concept & Pre-Opening</option>
                  <option>Branding & Packaging</option>
                  <option>Staff Recruitment & Training</option>
                  <option>R&D / Product Innovation</option>
                  <option>Franchise Development</option>
                  <option>Something else</option>
                </select>
                <span className="ml-select-caret" aria-hidden="true">
                  <svg width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" stroke="currentColor" strokeWidth="1.2" fill="none" strokeLinecap="square"/></svg>
                </span>
              </div>
            </div>
            <div className="ml-field ml-field--full">
              <label htmlFor="cf-msg">Tell us about the project</label>
              <textarea id="cf-msg" name="message" rows="5" value={state.message} onChange={onChange("message")} required></textarea>
            </div>
            <div className="ml-field ml-field--full ml-field--submit">
              <button className="ml-cta ml-cta--gold" type="submit" aria-label="Request a free consultation">
                <span className="ml-cta-label">{sent ? "Mail Client Opened" : "Request a Free Consultation"}</span>
                <span className="ml-cta-arrow" aria-hidden="true">
                  <svg width="14" height="10" viewBox="0 0 14 10" fill="none"><path d="M1 5h12M9 1l4 4-4 4" stroke="currentColor" strokeWidth="1.3" strokeLinecap="square"/></svg>
                </span>
              </button>
              <p className="ml-contact-note">By sending, you agree to a single follow-up email. No newsletter.</p>
            </div>
          </form>
        </div>

        <footer className="ml-contact-foot">
          <span className="ml-contact-foot-rule"></span>
          <p className="ml-contact-foot-label">The Baker Atelier · Executive Pastry Chef &amp; Bakery Consultant · UAE · KSA · Oman</p>
          <p className="ml-contact-foot-meta">© 2025 The Baker Atelier. All rights reserved</p>
        </footer>
      </div>
    </section>
  );
}

window.Contact = Contact;