/* 慶宜僱傭代理 — About / Trust / Contact page */
function AboutPage({ t }) {
  const A = t.aboutPage;
  const [open, setOpen] = React.useState(0);
  const [sent, setSent] = React.useState(false);
  return (
    <main>
      {/* story */}
      <section className="section">
        <div className="container">
          <SectionHead eyebrow={A.eyebrow} title={A.title} />
          <div className="about-grid" style={{ marginTop: 8 }}>
            <div>
              {A.paras.map((p, i) => <p key={i}>{p}</p>)}
              <div className="license">
                <div className="ll">{A.licLabel}</div>
                <div className="ln">{A.licNum}</div>
              </div>
              <ul className="creds">
                {A.creds.map((c) => <li key={c}><Icon n="badge-check" />{c}</li>)}
              </ul>
            </div>
            <div>
              <Photo src={(window.HY_IMG && window.HY_IMG.about) || "../../assets/photos/about-team.png"} alt={A.teamImg} style={{ height: 300 }} />
              <div style={{ marginTop: 16, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                <div className="about-stat"><div className="asn">{A.stat1n}</div><div className="asl">{A.stat1l}</div></div>
                <div className="about-stat"><div className="asn">8,000<sup style={{ fontSize: ".5em" }}>+</sup></div><div className="asl">{A.stat2l}</div></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="section sec-paper">
        <div className="container">
          <SectionHead center eyebrow={A.faqEyebrow} title={A.faqTitle} />
          <div className="faq">
            {A.faqs.map((f, i) => (
              <div className={"faq__item" + (open === i ? " open" : "")} key={i}>
                <div className="faq__q" onClick={() => setOpen(open === i ? -1 : i)}>
                  <h4>{f[0]}</h4>
                  <span className="faq__tog"><Icon n="plus" style={{ width: 20, height: 20 }} /></span>
                </div>
                <div className="faq__a"><p>{f[1]}</p></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* contact */}
      <section className="section sec-warm">
        <div className="container">
          <div className="contact-grid">
            <div>
              <span className="eyebrow">{A.contactEyebrow}</span>
              <h2 className="section-title" style={{ marginBottom: 10 }}>{A.contactTitle}</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>
            <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.AboutPage = AboutPage;