/* global React */
const { useState: useStateQ } = React;

// ============================================================
// Quote / enquiry form
// ============================================================
function QuoteForm() {
  const [submitted, setSubmitted] = useStateQ(false);
  const [country, setCountry] = useStateQ("");
  const [cats, setCats] = useStateQ([]);

  const allCats = ["Injectables & fillers", "Plastic surgery implants", "Energy-based devices", "Cosmeceuticals", "Surgical instruments", "General medical", "General inquiry"];
  const countries = ["Saudi Arabia", "UAE", "Qatar", "Kuwait", "Oman", "Bahrain", "Mexico", "Colombia", "Panama"];

  const toggleCat = (c) => {
    setCats(cats.includes(c) ? cats.filter(x => x !== c) : [...cats, c]);
  };

  return (
    <section className="section section-tight section-plaster" id="quote">
      <div className="wrap quote-section">
        <div className="quote-info">
          <div className="num eyebrow" style={{ marginBottom: 20 }}>§ 06 · Enquire</div>
          <h2>Tell us what<br/><em>you are sourcing.</em></h2>
          <p>
            Send a parts list, a tender brief, or a description of your sourcing needs. A specialist on our Los Angeles desk will respond with availability and landed cost.
          </p>

          <div className="contact-list">
            <div className="contact-row">
              <span className="lbl">Office</span>
              <span className="val">Los Angeles, California</span>
            </div>
            <div className="contact-row">
              <span className="lbl">Established</span>
              <span className="val">2021</span>
            </div>
            <div className="contact-row">
              <span className="lbl">Hours</span>
              <span className="val">Mon–Fri · Pacific Time</span>
            </div>
          </div>
        </div>

        <div className="form-card">
          <div className="form-head">
            <span>— Enquiry</span>
            <span>Confidential</span>
          </div>

          {submitted ? (
            <div className="form-success">
              <div className="check">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <path d="M5 12l5 5L20 7"/>
                </svg>
              </div>
              <h3>Thank you</h3>
              <p>A specialist from our Los Angeles desk will respond shortly.</p>
            </div>
          ) : (
            <form onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }}>
              <div className="form-grid">
                <div className="field">
                  <label>Organisation</label>
                  <input type="text" placeholder="Clinic or institution" required />
                </div>
                <div className="field">
                  <label>Your name</label>
                  <input type="text" placeholder="Full name" required />
                </div>
                <div className="field">
                  <label>Email</label>
                  <input type="email" placeholder="name@organisation.com" required />
                </div>
                <div className="field">
                  <label>Phone</label>
                  <input type="text" placeholder="Including country code" />
                </div>

                <div className="field full">
                  <label>Destination</label>
                  <select value={country} onChange={(e) => setCountry(e.target.value)} required>
                    <option value="" disabled>Select a destination</option>
                    {countries.map((c) => (
                      <option key={c} value={c}>{c}</option>
                    ))}
                  </select>
                </div>

                <div className="field full">
                  <label>Categories</label>
                  <div className="chip-row">
                    {allCats.map((c) => (
                      <span key={c} className={`chip ${cats.includes(c) ? "on" : ""}`} onClick={() => toggleCat(c)}>{c}</span>
                    ))}
                  </div>
                </div>

                <div className="field full">
                  <label>Notes</label>
                  <textarea placeholder="Parts list, model numbers, quantities, timeline — or any context you'd like to share."></textarea>
                </div>
              </div>

              <div className="form-foot">
                <span className="reassure">All enquiries are held in confidence</span>
                <button type="submit" className="btn btn-primary">
                  Send enquiry
                  <svg className="btn-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
                    <path d="M5 12h14M13 5l7 7-7 7"/>
                  </svg>
                </button>
              </div>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Footer
// ============================================================
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div className="footer-brand">
            <a href="#top" className="brand">
              <BrandMark />
              <div className="brand-name"><em>Top</em> Medical<small>Los Angeles</small></div>
            </a>
            <p>A Los Angeles supplier of beauty and plastic surgery product to clinics, hospitals, and ministries across the Gulf.</p>
          </div>
          <div>
            <h6>Specialty</h6>
            <ul>
              <li><a href="#categories">Injectables & fillers</a></li>
              <li><a href="#categories">Plastic surgery implants</a></li>
              <li><a href="#categories">Energy-based devices</a></li>
              <li><a href="#categories">Cosmeceuticals</a></li>
              <li><a href="#categories">Surgical instruments</a></li>
              <li><a href="#categories">General medical</a></li>
            </ul>
          </div>
          <div>
            <h6>Coverage</h6>
            <ul>
              <li><a href="#coverage">Saudi Arabia</a></li>
              <li><a href="#coverage">United Arab Emirates</a></li>
              <li><a href="#coverage">Qatar</a></li>
              <li><a href="#coverage">Kuwait</a></li>
              <li><a href="#coverage">Oman</a></li>
              <li><a href="#coverage">Bahrain</a></li>
              <li><a href="#coverage">Mexico</a></li>
              <li><a href="#coverage">Colombia</a></li>
              <li><a href="#coverage">Panama</a></li>
            </ul>
          </div>
          <div>
            <h6>Company</h6>
            <ul>
              <li><a href="#why">Approach</a></li>
              <li><a href="#process">Process</a></li>
              <li><a href="#quote">Enquire</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Top Medical · Los Angeles, California · Established 2021</span>
          <span><a href="#">Privacy</a> · <a href="#">Terms</a></span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { QuoteForm, Footer });