function ContactPage() {
  const [form, setForm] = useState({ name: "", email: "", phone: "", message: "" });
  const [sent, setSent] = useState(false);
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  function submit(e) { e.preventDefault(); if (!form.name || !form.email || !form.message) return; setSent(true); setForm({ name:"", email:"", phone:"", message:"" }); }
  return <>
    <div className="page-header"><div className="container"><div className="breadcrumb"><a href="#/">Home</a> <span>/</span> <span>Contact</span></div><h1>Contact Garage Reset Hamilton.</h1><p>Questions about scope, service area, or a sensitive clean-out? Send a note or start with the photo quote.</p></div></div>
    <section className="section"><div className="container"><div className="contact-grid"><div className="contact-info-card"><Info icon={<Icon.Phone/>} label="Phone" value={<a href={`tel:${COMPANY.phoneRaw}`} className="mono">{COMPANY.phone}</a>} sub="Best for urgent scope questions."/><Info icon={<Icon.Mail/>} label="Email" value={<a href={`mailto:${COMPANY.email}`}>{COMPANY.email}</a>} sub="Use this for photo links and partner referrals."/><Info icon={<Icon.MapPin/>} label="Service area" value="Hamilton and nearby communities" sub={formatAreas()}/><Info icon={<Icon.Calendar/>} label="Hours" value={COMPANY.hours.map(h=><div key={h.d}>{h.d}: <span className="mono">{h.t}</span></div>)} sub="Availability confirmed after scope review."/></div><div className="book-card"><h2>Send a message</h2>{sent && <div className="success-box">Message noted. For a scoped quote, please use the photo quote request too.</div>}<form onSubmit={submit}><div className="field-row"><Field label="Name *" value={form.name} onChange={v=>set('name',v)} placeholder="Jane Smith"/><Field label="Phone" value={form.phone} onChange={v=>set('phone',v)} placeholder="289-555-0198"/></div><Field label="Email *" type="email" value={form.email} onChange={v=>set('email',v)} placeholder="name@email.com"/><TextArea label="Message *" value={form.message} onChange={v=>set('message',v)} placeholder="Tell us what you need help with."/><button className="btn btn-primary btn-lg btn-block" type="submit">Send Message <Icon.ArrowRight/></button></form><p className="small muted">For the fastest response, call or email directly after sending your message.</p><div className="button-row"><a className="btn btn-secondary" href="#/quote">Start a photo quote instead</a></div></div></div></div></section>
  </>;
}
function Info({ icon, label, value, sub }) { return <div className="contact-info-item"><div className="icon-bubble">{icon}</div><div><div className="label">{label}</div><div className="val">{value}</div><div className="sub">{sub}</div></div></div>; }
Object.assign(window, { ContactPage });
