/* eslint-disable */

function ContactForm() {
  const [submitted, setSubmitted] = React.useState(false);
  const [form, setForm] = React.useState({
    name: "", practice: "", email: "", phone: "",
    specialty: "Family Medicine", providers: "1–3", message: ""
  });
  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const submit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };

  if (submitted) {
    return (
      <div className="contact-form">
        <div className="success">
          <div className="check"><Ico.check style={{color:'var(--paper)'}} /></div>
          <h4>Thanks, {form.name.split(' ')[0] || "we'll be in touch"}.</h4>
          <p>Your free revenue audit request is in. Expect a reply within one business day.</p>
        </div>
      </div>
    );
  }

  return (
    <form className="contact-form" onSubmit={submit}>
      <div className="field-row">
        <div className="field">
          <label htmlFor="f-name">Your name</label>
          <input id="f-name" type="text" required value={form.name} onChange={update('name')} placeholder="Dr. Jane Doe" />
        </div>
        <div className="field">
          <label htmlFor="f-practice">Practice</label>
          <input id="f-practice" type="text" required value={form.practice} onChange={update('practice')} placeholder="Practice or group name" />
        </div>
      </div>
      <div className="field-row">
        <div className="field">
          <label htmlFor="f-email">Email</label>
          <input id="f-email" type="email" required value={form.email} onChange={update('email')} placeholder="you@practice.com" />
        </div>
        <div className="field">
          <label htmlFor="f-phone">Phone</label>
          <input id="f-phone" type="tel" value={form.phone} onChange={update('phone')} placeholder="(555) 123-4567" />
        </div>
      </div>
      <div className="field-row">
        <div className="field">
          <label htmlFor="f-spec">Specialty</label>
          <select id="f-spec" value={form.specialty} onChange={update('specialty')}>
            {["Family Medicine","Internal Medicine","Cardiology","Pediatrics","OB-GYN","Orthopedics","Behavioral Health","Dermatology","Physical Therapy","Other"].map(s => <option key={s}>{s}</option>)}
          </select>
        </div>
        <div className="field">
          <label htmlFor="f-prov">Providers</label>
          <select id="f-prov" value={form.providers} onChange={update('providers')}>
            {["1–3","4–10","11–25","26–50","50+"].map(s => <option key={s}>{s}</option>)}
          </select>
        </div>
      </div>
      <div className="field">
        <label htmlFor="f-msg">What's on your mind? (optional)</label>
        <textarea id="f-msg" rows="3" value={form.message} onChange={update('message')} placeholder="Current billing setup, biggest pain point, anything else…" />
      </div>
      <div className="form-submit">
        <div className="form-meta">We'll never share your information. A signed BAA precedes any data exchange.</div>
        <button type="submit" className="btn btn-accent">
          Request audit <span className="arrow"><Ico.arrow /></span>
        </button>
      </div>
    </form>
  );
}

function Contact() {
  return (
    <section className="contact" id="contact">
      <div className="container">
        <div className="eyebrow"><span className="dot"></span> Start with a free audit</div>
        <h2 className="h-display" style={{marginTop:18, fontSize:'clamp(40px, 5.5vw, 80px)'}}>
          Find out what your<br/>
          billing is <em>missing</em>—<br/>
          <span className="accent">in 14 days.</span>
        </h2>

        <div className="contact-grid">
          <div className="contact-info">
            <p className="lede" style={{color:'rgba(251,248,241,.75)', maxWidth:'48ch'}}>
              Send a 90-day claims export and we'll return a written audit: denial patterns, payer leakage, A/R risk and an estimate of recoverable revenue. No commitment.
            </p>

            <div className="contact-block">
              <div className="label">Talk to us</div>
              <div className="value"><a href="tel:+18889255378">+1 (888) 925-5378</a></div>
              <div className="meta">Mon–Fri · 8a–7p ET</div>
            </div>
            <div className="contact-block">
              <div className="label">Email</div>
              <div className="value"><a href="mailto:hello@albertmed.com">hello@albertmed.com</a></div>
              <div className="meta">Replies within one business day.</div>
            </div>
            <div className="contact-block">
              <div className="label">Office</div>
              <div className="value">112 W. Main, Suite 400<br/>Columbus, OH 43215</div>
              <div className="meta">Serving 32 states. Fully remote engagement.</div>
            </div>
          </div>

          <ContactForm />
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container footer-row">
        <div className="brand">
          <span className="brand-mark" aria-hidden="true"></span>
          <span className="brand-name">Albert<em>Med</em> Billing</span>
        </div>
        <div className="footer-links">
          <a href="#services">Services</a>
          <a href="#process">Process</a>
          <a href="#faq">FAQ</a>
          <a href="#contact">Contact</a>
        </div>
        <div className="footer-meta">© {new Date().getFullYear()} AlbertMed Billing LLC · HIPAA · SOC 2 Type II</div>
      </div>
    </footer>
  );
}

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