/* global React, Reveal, SectionHeader */
const { useState, useRef } = React;

function Field({ id, name, label, type = "text", placeholder, value, onChange, required, helper, textarea, autoComplete }) {
  return (
    <label className="pc-field" htmlFor={id}>
      <span className="pc-field__label">{label}{required ? <em aria-hidden="true">*</em> : null}</span>
      {textarea ? (
        <textarea id={id} name={name || id} value={value} onChange={onChange} placeholder={placeholder} rows={4} required={required} />
      ) : (
        <input id={id} name={name || id} type={type} value={value} onChange={onChange} placeholder={placeholder} required={required} autoComplete={autoComplete} />
      )}
      {helper ? <span className="pc-field__helper">{helper}</span> : null}
    </label>
  );
}

function Select({ id, name, label, value, onChange, options, required, placeholder }) {
  return (
    <label className="pc-field" htmlFor={id}>
      <span className="pc-field__label">{label}{required ? <em aria-hidden="true">*</em> : null}</span>
      <select id={id} name={name || id} value={value} onChange={onChange} required={required}>
        {placeholder ? <option value="">{placeholder}</option> : null}
        {options.map((o) => <option key={o} value={o}>{o}</option>)}
      </select>
    </label>
  );
}

const WORK_TYPES = [
  "Wet machine hire", "Site preparation", "Trenching", "Drainage & stormwater",
  "Civil earthworks", "Roadworks support", "Kerbing support", "Concrete preparation",
  "Subdivisions", "Plant hire", "Project support", "Project management", "Landscaping", "Other",
];
const TIMEFRAMES = [
  "ASAP / urgent", "This week", "Next week", "Within 2–4 weeks",
  "1–2 months out", "Flexible / planning ahead",
];
const SOURCES = [
  "Referral — builder or trade", "Referral — friend or word-of-mouth",
  "Web search", "Site sign / vehicle", "Social media", "Other",
];

function Contact() {
  const [form, setForm] = useState({
    name: "", company: "", phone: "", email: "",
    location: "", workType: "Wet machine hire",
    timeframe: "", message: "", source: "",
  });
  const [files, setFiles] = useState([]);
  const [sent, setSent] = useState(false);
  const fileInput = useRef(null);
  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
  const onFiles = (e) => setFiles([...e.target.files]);

  // PLACEHOLDER SUBMIT — front-end only.
  // The form will later be wired to Google Sheets + Make for:
  //   • structured lead summary to Josh
  //   • SMS notification on new/urgent enquiries
  //   • automatic confirmation email back to the customer
  //   • enquiry tracking
  // To connect, replace this handler with a fetch() to the Make webhook.
  const submit = (e) => {
    e.preventDefault();
    // const payload = { ...form, fileNames: files.map(f => f.name) };
    // fetch('<MAKE_WEBHOOK_URL>', { method: 'POST', body: JSON.stringify(payload) });
    setSent(true);
  };

  return (
    <section id="contact" className="pc-section pc-section--contact">
      <div className="pc-container">
        <SectionHeader
          num="05"
          label="Contact / Wet hire enquiry"
          title={<>Send the scope. <em>Get a direct reply.</em></>}
          lead="Phone or email — whichever suits. Wet hire enquiries answered direct by the operator."
        />

        <div className="pc-contact">
          <Reveal className="pc-contact__form-wrap">
            {sent ? (
              <div className="pc-contact__success" role="status">
                <span className="pc-eyebrow__label">Enquiry received</span>
                <h3 className="pc-h3">Got it. Direct reply on the way.</h3>
                <p className="pc-lead">If it's urgent, ring <a href="tel:+61459235860">0459 235 860</a>.</p>
              </div>
            ) : (
              <form className="pc-form" onSubmit={submit} method="post" noValidate>
                <div className="pc-form__service">
                  <span className="pc-field__label">Type of work<em aria-hidden="true">*</em></span>
                  <div className="pc-segmented" role="radiogroup" aria-label="Type of work">
                    {WORK_TYPES.slice(0, 6).map((s) => (
                      <button
                        key={s}
                        type="button"
                        role="radio"
                        aria-checked={form.workType === s}
                        className={`pc-segmented__opt ${form.workType === s ? "is-active" : ""}`}
                        onClick={() => setForm((f) => ({ ...f, workType: s }))}
                      >{s}</button>
                    ))}
                  </div>
                  <Select
                    id="workType-other" name="workTypeAlt" label="Or pick from full list"
                    value={WORK_TYPES.slice(0,6).includes(form.workType) ? "" : form.workType}
                    onChange={(e) => e.target.value && setForm((f) => ({ ...f, workType: e.target.value }))}
                    placeholder="Choose from full service list…"
                    options={WORK_TYPES.slice(6)}
                  />
                </div>

                <div className="pc-form__row">
                  <Field id="name" label="Name" required value={form.name} onChange={set("name")} placeholder="Your name" autoComplete="name" />
                  <Field id="company" label="Company" value={form.company} onChange={set("company")} placeholder="Company / trade name" autoComplete="organization" />
                </div>
                <div className="pc-form__row">
                  <Field id="phone" label="Phone" type="tel" required value={form.phone} onChange={set("phone")} placeholder="04…" helper="Direct mobile preferred." autoComplete="tel" />
                  <Field id="email" label="Email" type="email" required value={form.email} onChange={set("email")} placeholder="you@company.com.au" autoComplete="email" />
                </div>
                <div className="pc-form__row">
                  <Field id="location" label="Job location" required value={form.location} onChange={set("location")} placeholder="Suburb / address / lot reference" autoComplete="street-address" />
                  <Select
                    id="timeframe" label="Approximate timeframe" required
                    value={form.timeframe} onChange={set("timeframe")}
                    placeholder="Select a timeframe…"
                    options={TIMEFRAMES}
                  />
                </div>

                <div className="pc-field">
                  <span className="pc-field__label">Upload plans / photos</span>
                  <div className="pc-file" onClick={() => fileInput.current && fileInput.current.click()}>
                    <span className="pc-file__cta">
                      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 16V4"/><path d="M6 10l6-6 6 6"/><path d="M4 20h16"/></svg>
                      <span>{files.length ? `${files.length} file${files.length>1?"s":""} attached` : "Choose files"}</span>
                    </span>
                    <span className="pc-file__hint">PDF, DWG, JPG, PNG · max 25 MB total</span>
                    <input ref={fileInput} name="attachments" type="file" multiple onChange={onFiles} style={{display:"none"}} />
                  </div>
                  {files.length > 0 ? (
                    <ul className="pc-file__list">
                      {files.map((f, i) => (
                        <li key={i}><span className="pc-mono">—</span> {f.name}</li>
                      ))}
                    </ul>
                  ) : null}
                </div>

                <Field id="message" label="Message" textarea value={form.message} onChange={set("message")} placeholder="What's the work? Cut volumes, depths, services, programme — whatever you have." />

                <Select
                  id="source" label="How did you hear about us?"
                  value={form.source} onChange={set("source")}
                  placeholder="Choose one…"
                  options={SOURCES}
                />

                <div className="pc-form__foot">
                  <button type="submit" className="pc-btn pc-btn--primary">
                    <span>Submit enquiry</span>
                    <svg className="pc-btn__arrow" viewBox="0 0 24 24" aria-hidden="true">
                      <path d="M5 12h14" /><path d="M13 6l6 6-6 6" />
                    </svg>
                  </button>
                  <a href="tel:+61459235860" className="pc-btn pc-btn--ghost">
                    <svg className="pc-btn__arrow" viewBox="0 0 24 24" aria-hidden="true">
                      <path d="M5 4h4l2 5-3 2a12 12 0 0 0 5 5l2-3 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z" />
                    </svg>
                    <span>Call 0459 235 860</span>
                  </a>
                  <span className="pc-form__sla">Direct reply — usually same day</span>
                </div>
              </form>
            )}
          </Reveal>

          <Reveal className="pc-contact__direct" delay={120}>
            <div className="pc-contact__block">
              <span className="pc-eyebrow__label">Phone</span>
              <a className="pc-contact__big" href="tel:+61459235860">0459 235 860</a>
              <span className="pc-contact__sub">Direct line — Pathway Civil</span>
            </div>
            <div className="pc-contact__block">
              <span className="pc-eyebrow__label">Email</span>
              <a className="pc-contact__med" href="mailto:admin@pathwaycivil.com.au">admin@pathwaycivil.com.au</a>
            </div>
            <div className="pc-contact__block">
              <span className="pc-eyebrow__label">Coverage</span>
              <p className="pc-contact__med">Adelaide and South Australia.</p>
            </div>
            <div className="pc-contact__block pc-contact__block--meta">
              <div><span className="pc-eyebrow__label">ABN</span><span className="pc-mono">72 642 430 998</span></div>
              <div><span className="pc-eyebrow__label">Insurances</span><span className="pc-mono">Available on request</span></div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

window.Contact = Contact;