/* 慶宜僱傭代理 — Home page */
function HomePage({ setPage, t }) {
  const h = t.hero, H = t.home;
  return (
    <main>
      {/* HERO — full-bleed editorial banner */}
      <section className="hero">
        <div className="hero__bg" aria-hidden="true" style={{ backgroundImage: `url('${(window.HY_IMG && window.HY_IMG.banner) || "../../assets/photos/banner-helper.png"}')` }}></div>
        <div className="hero__scrim" aria-hidden="true"></div>
        <div className="container hero__content">
          <div className="hero__main">
            <span className="eyebrow hero__eyebrow">{h.eyebrow}</span>
            <h1>{h.t1}<br /><em>{h.em}</em></h1>
            <p className="hero__lede">{h.lede}</p>
            <div className="hero__cta">
              <Btn variant="gold" size="lg" iconRight="arrow-right" onClick={() => { const el = document.getElementById("helpers"); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 60, behavior: "smooth" }); }}>{h.findBtn}</Btn>
              <Btn variant="ghostlight" size="lg" onClick={() => setPage("services")}>{h.cta2}</Btn>
            </div>
          </div>
        </div>
      </section>

      {/* ENQUIRY BAR (booking-bar adaptation) */}
      <div className="container ebar-wrap">
        <form className="ebar" onSubmit={(e) => { e.preventDefault(); setPage("about"); }}>
          <label className="ebar__field">
            <span className="ebar__label">{h.ebar.f1l}</span>
            <select className="ebar__val" defaultValue="">
              <option value="" disabled>{h.ebar.f1v}</option>
              {t.services.map((s, i) => <option key={i}>{s.title}</option>)}
            </select>
          </label>
          <label className="ebar__field">
            <span className="ebar__label">{h.ebar.f2l}</span>
            <select className="ebar__val" defaultValue="">
              <option value="" disabled>{h.ebar.f2v}</option>
              {t.regions.map((r, i) => <option key={i}>{r.name}</option>)}
            </select>
          </label>
          <label className="ebar__field">
            <span className="ebar__label">{h.ebar.f3l}</span>
            <input className="ebar__val" placeholder={h.ebar.f3ph} />
          </label>
          <a className="ebar__btn" href={waLink(t)} target="_blank" rel="noopener noreferrer"><span>{h.ebar.btn}</span><Icon n="arrow-right" /></a>
        </form>
      </div>

      <section className="section tight">
        <div className="container"><TrustBar t={t} /></div>
      </section>

      <HelperCarousel t={t} setPage={setPage} />

      {/* AGE CHOICE — young vs experienced */}
      <section className="section sec-paper">
        <div className="container">
          <SectionHead center eyebrow={t.ageChoice.eyebrow} title={t.ageChoice.title} lede={t.ageChoice.lede} />
          <div className="agechoice">
            <article className="agecard agecard--young">
              <span className="agecard__flag">{t.ageChoice.recommend}</span>
              <div className="agecard__head">
                <span className="agecard__icon"><Icon n="sparkles" /></span>
                <div>
                  <h3>{t.ageChoice.young.label}</h3>
                  <span className="agecard__tag agecard__tag--young">{t.ageChoice.young.tag}</span>
                </div>
              </div>
              <ul className="agecard__list">
                {t.ageChoice.young.points.map((p, i) => (
                  <li key={i}><span className="ck ck--young"><Icon n="check" /></span>{p}</li>
                ))}
              </ul>
              <Btn variant="gold" size="lg" iconRight="arrow-right" onClick={() => setPage("database")}>{t.ageChoice.young.cta}</Btn>
            </article>

            <article className="agecard">
              <div className="agecard__head">
                <span className="agecard__icon agecard__icon--muted"><Icon n="award" /></span>
                <div>
                  <h3>{t.ageChoice.senior.label}</h3>
                  <span className="agecard__tag">{t.ageChoice.senior.tag}</span>
                </div>
              </div>
              <ul className="agecard__list">
                {t.ageChoice.senior.points.map((p, i) => (
                  <li key={i}><span className="ck"><Icon n="check" /></span>{p}</li>
                ))}
              </ul>
              <div className="agecard__note"><Icon n="clock" style={{ width: 16, height: 16 }} />{t.ageChoice.senior.note}</div>
              <Btn variant="outline" size="lg" iconRight="arrow-right" onClick={() => setPage("database")}>{t.ageChoice.senior.cta}</Btn>
            </article>
          </div>
        </div>
      </section>

      {/* SERVICES PREVIEW */}
      <section className="section">
        <div className="container">
          <div className="num-rail" style={{ marginBottom: 22 }}><b>01</b><span className="ln"></span><span>09</span></div>
          <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 24, flexWrap: "wrap" }}>
            <SectionHead eyebrow={H.svcEyebrow} title={H.svcTitle} lede={H.svcLede} />
            <Btn variant="outline" iconRight="arrow-right" onClick={() => setPage("services")} style={{ marginBottom: 6 }}>{H.svcAll}</Btn>
          </div>
          <div className="svc-grid">
            {t.services.slice(0, 6).map((s, i) => (
              <article className="svc-card svc-card--dark" key={i} onClick={() => setPage("services")} style={{ cursor: "pointer" }}>
                <span className={"icotile" + tileMod(i)}><Icon n={SVC_META[i].i} /></span>
                <h3>{s.title}</h3>
                <p>{s.desc}</p>
                <div className="foot"><Badge tone={SVC_META[i].tone}>{s.tag}</Badge><Icon n="arrow-right" style={{ width: 18, height: 18, color: "var(--c-or)" }} /></div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* FEATURE — why choose us (image + text) */}
      <section className="section sec-paper">
        <div className="container">
          <div className="feature">
            <div className="feature__media">
              <Photo src={(window.HY_IMG && window.HY_IMG.feature) || "../../assets/photos/feature-cooking.png"} alt={H.featImg} style={{ height: 420 }}>
                <span className="imgmark" style={{ left: 22, top: 22 }}><Icon n="plus" /></span>
              </Photo>
            </div>
            <div>
              <span className="eyebrow">{H.featEyebrow}</span>
              <h2 className="section-title">{H.featTitle}</h2>
              <ul className="feature__list">
                {H.featList.map((it, i) => (
                  <li key={i}><span className="fi"><Icon n={["badge-check", "receipt-text", "users", "heart-handshake"][i]} /></span><span><b>{it.b}</b> — {it.t}</span></li>
                ))}
              </ul>
              <div style={{ marginTop: 26 }}><Btn variant="primary" iconRight="arrow-right" onClick={() => setPage("about")}>{H.featBtn}</Btn></div>
            </div>
          </div>
        </div>
      </section>

      {/* WHY US — data + icons */}
      <WhyUs t={t} />

      {/* DISTRICTS */}
      <section className="section sec-warm">
        <div className="container">
          <SectionHead center eyebrow={H.distEyebrow} title={H.distTitle} lede={H.distLede} />
          <div className="regions" style={{ marginTop: 8 }}>
            {t.regions.map((r, i) => (
              <div className="region" key={i}>
                <div className="region__head">
                  <span className="region__dot" style={{ background: REGION_DOTS[i] }} />
                  <span className="region__name">{r.name}</span>
                  <span className="region__en">{r.en}</span>
                </div>
                <div className="region__tags">
                  {r.areas.map((a) => <span className="tag tag--cream" key={a}>{a}</span>)}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* SUCCESS CASES (preview) */}
      <section className="section sec-paper">
        <div className="container">
          <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 24, flexWrap: "wrap", marginBottom: 12 }}>
            <SectionHead eyebrow={t.ext.casesPreview.eyebrow} title={t.ext.casesPreview.title} lede={t.ext.casesPreview.lede} />
            <Btn variant="outline" iconRight="arrow-right" onClick={() => setPage("cases")} style={{ marginBottom: 6 }}>{t.ext.casesPreview.all}</Btn>
          </div>
          <CasesGrid t={t} limit={3} />
        </div>
      </section>

      {/* GOOGLE-STYLE REVIEWS */}
      <GoogleReviews t={t} />

      {/* PROCESS TIMELINE */}
      <ProcessTimeline t={t} />

      <CTABand setPage={setPage} t={t} />
    </main>
  );
}
window.HomePage = HomePage;