/* 慶宜僱傭代理 — Contact page (form + details) */
function ContactPage({ setPage, t }) {
  const A = t.aboutPage, P = t.ext.contactPage;
  const [sent, setSent] = React.useState(false);
  return (
    <main>
      <section className="section sec-paper">
        <div className="container">
          <div className="contact-grid">
            <div>
              <span className="eyebrow">{P.eyebrow}</span>
              <h2 className="section-title" style={{ marginBottom: 10 }}>{P.title}</h2>
              <p style={{ color: "var(--c-body)", fontSize: 15.5, lineHeight: 1.8, margin: "0 0 24px", maxWidth: "42ch" }}>{A.contactP}</p>
              <ul className="cdetails">
                <li><span className="ci"><Icon n="map-pin" /></span><div><span className="cl">{A.dOffice}</span><span className="cv">{A.addr1}<br />{A.addr2}</span></div></li>
                <li><span className="ci"><Icon n="phone" /></span><div><span className="cl">{A.dPhone}</span><span className="cv"><a href="tel:+85244127906">{A.phone}</a></span></div></li>
                <li><span className="ci"><Icon n="mail" /></span><div><span className="cl">{A.dEmail}</span><span className="cv"><a href="mailto:info@hingyeemaid.com">{A.email}</a></span></div></li>
                <li><span className="ci"><Icon n="clock" /></span><div><span className="cl">{A.dHours}</span><span className="cv">{A.hours}</span></div></li>
              </ul>
              <div style={{ display: "flex", gap: 12, marginTop: 26, flexWrap: "wrap" }}>
                <Btn variant="gold" icon="message-circle" href={waLink(t)} external>WhatsApp</Btn>
                <Btn variant="outline" icon="phone" href="tel:+85244127906">{A.phone}</Btn>
              </div>
            </div>
            <div className="form-card">
              {sent ? (
                <div style={{ textAlign: "center", padding: "40px 10px" }}>
                  <span className="icotile" style={{ width: 56, height: 56, margin: "0 auto 16px" }}><Icon n="check" style={{ width: 28, height: 28 }} /></span>
                  <h3 style={{ fontFamily: "var(--font-cn)", fontWeight: 900, fontSize: 22, color: "var(--c-ink)", margin: "0 0 8px" }}>{A.sentTitle}</h3>
                  <p style={{ color: "var(--c-muted)", fontSize: 15, margin: 0 }}>{A.sentMsg}</p>
                  <div style={{ marginTop: 20 }}><Btn variant="outline" onClick={() => setSent(false)}>{A.sentAgain}</Btn></div>
                </div>
              ) : (
                <form onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
                  <h3 style={{ fontFamily: "var(--font-cn)", fontWeight: 900, fontSize: 20, color: "var(--c-ink)", margin: "0 0 18px" }}>{A.formTitle}</h3>
                  <div className="field-row">
                    <div className="field"><label>{A.fName}</label><input required placeholder={A.fNamePh} /></div>
                    <div className="field"><label>{A.fPhone}</label><input required placeholder={A.fPhonePh} /></div>
                  </div>
                  <div className="field-row">
                    <div className="field"><label>{A.fDistrict}</label>
                      <select>{A.districtOpts.map((o) => <option key={o}>{o}</option>)}</select>
                    </div>
                    <div className="field"><label>{A.fService}</label>
                      <select>{A.serviceOpts.map((o) => <option key={o}>{o}</option>)}</select>
                    </div>
                  </div>
                  <div className="field"><label>{A.fMessage}</label><textarea placeholder={A.fMsgPh}></textarea></div>
                  <Btn variant="gold" size="lg" iconRight="arrow-right" onClick={(e) => { e.preventDefault(); setSent(true); }}>{A.fSubmit}</Btn>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}
window.ContactPage = ContactPage;