/* 慶宜僱傭代理 — UI kit shared primitives, chrome & visual meta (browser-babel)
   Copy lives in i18n.jsx (window.HY_I18N). This file holds components + the
   visual meta (icons / tones / dot colours) that pairs with that copy. */

/* ---------------- Icon (Lucide) ---------------- */
function Icon({ n, style }) { return <i data-lucide={n} style={style}></i>; }
function refreshIcons() { if (window.lucide) window.lucide.createIcons(); }

/* ---------------- Visual meta (parallel-indexed to i18n copy) ---------------- */
const SVC_META = [
  { i: "plane", tone: "neutral" }, { i: "home", tone: "success" }, { i: "file-text", tone: "neutral" },
  { i: "baby", tone: "gold" }, { i: "heart-handshake", tone: "gold" }, { i: "graduation-cap", tone: "gold" },
  { i: "refresh-cw", tone: "neutral" }, { i: "shield-check", tone: "neutral" }, { i: "stamp", tone: "solid-gold" },
];
const REGION_DOTS = ["var(--c-or)", "var(--c-or)", "var(--c-or)"];
const TRUST_ICONS = ["badge-check", "stamp", "receipt-text", "handshake"];
const tileMod = (i) => i % 3 === 1 ? " icotile--gold" : i % 3 === 2 ? " icotile--lime" : "";

/* ---------------- Wordmark ---------------- */
function Wordmark({ dark = false, mono = false }) {
  return (
    <a className={"wm" + (dark ? " wm--dark" : "")} onClick={(e) => e.preventDefault()} href="#">
      <span className="wm__mono" aria-hidden="true">慶</span>
      {!mono && (
        <span style={{ display: "flex", flexDirection: "column" }}>
          <span className="wm__cn">慶宜僱傭代理</span>
          <span className="wm__en">Hing Yee · Est. 1985</span>
        </span>
      )}
    </a>
  );
}

/* ---------------- Primitives ---------------- */
/* WhatsApp deep link (all WhatsApp CTAs point here) */
const WA_NUMBER = "85244127906";
const WA_LINK = "https://wa.me/" + WA_NUMBER;
function waLink(t) {
  const msg = (t && t.waMsg) || "";
  return msg ? `${WA_LINK}?text=${encodeURIComponent(msg)}` : WA_LINK;
}

function Btn({ children, variant = "primary", size = "", icon, iconRight, href, external, onClick, ...rest }) {
  const cls = ["btn", `btn--${variant}`, size ? `btn--${size}` : ""].filter(Boolean).join(" ");
  const handle = (e) => { if (!href) e.preventDefault(); if (onClick) onClick(e); };
  return (
    <a className={cls} href={href || "#"} onClick={handle}
       target={external ? "_blank" : undefined} rel={external ? "noopener noreferrer" : undefined} {...rest}>
      {icon && <Icon n={icon} />}
      {children && <span>{children}</span>}
      {iconRight && <Icon n={iconRight} />}
    </a>
  );
}
function Badge({ children, tone = "neutral", dot }) {
  return <span className={`badge badge--${tone}`}>{dot && <span className="dot" />}{children}</span>;
}

/* ---------------- Section header ---------------- */
function SectionHead({ eyebrow, title, lede, center }) {
  return (
    <div className={"section-head" + (center ? " center" : "")}>
      {eyebrow && <span className={"eyebrow" + (center ? " center" : "")}>{eyebrow}</span>}
      <h2 className="section-title" dangerouslySetInnerHTML={{ __html: title }} />
      {lede && <p className="section-lede">{lede}</p>}
    </div>
  );
}

/* ---------------- Photo ---------------- */
function Photo({ label, style, src, alt, children }) {
  if (src) {
    return (
      <div className="photo photo--filled" style={style}>
        <img src={src} alt={alt || ""} />
        {children}
      </div>
    );
  }
  return (
    <div className="photo" style={style}>
      <span className="photo__label"><Icon n="image" style={{ width: 15, height: 15 }} />{label}</span>
      {children}
    </div>
  );
}

/* ---------------- Nav ---------------- */
function SiteNav({ page, setPage, lang, setLang, t }) {
  const [open, setOpen] = React.useState(false);
  const items = [["home", t.nav.home], ["about", t.nav.about], ["database", t.nav.database], ["cases", t.nav.cases], ["process", t.nav.process], ["blog", t.nav.blog], ["contact", t.nav.contact]];
  const go = (id) => { setPage(id); setOpen(false); };
  return (
    <nav className="nav">
      <div className="container nav__inner">
        <div onClick={() => go("home")} style={{ cursor: "pointer" }}><Wordmark /></div>
        <div className="nav__links">
          {items.map(([id, label]) => (
            <a key={id} className={"nav__link" + (page === id ? " active" : "")} onClick={() => go(id)}>{label}</a>
          ))}
        </div>
        <div className="nav__right">
          <div className="langtog">
            <button className={lang === "zh" ? "on" : ""} onClick={() => setLang("zh")}>中</button>
            <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
          </div>
          <div className="nav__enq"><Btn variant="gold" size="sm" icon="message-circle" href={waLink(t)} external>{t.nav.enquire}</Btn></div>
          <button className="nav__burger" onClick={() => setOpen(!open)} aria-label="Menu" type="button"><Icon n={open ? "x" : "menu"} /></button>
        </div>
      </div>
      <div className={"nav__drawer" + (open ? " open" : "")}>
        {items.map(([id, label]) => (
          <a key={id} className={"nav__dlink" + (page === id ? " active" : "")} onClick={() => go(id)}>{label}</a>
        ))}
        <Btn variant="gold" size="lg" icon="message-circle" href={waLink(t)} external onClick={() => setOpen(false)}>{t.nav.enquire}</Btn>
      </div>
    </nav>
  );
}

/* ---------------- Helper card (shared: carousel + database) ---------------- */
function HelperCard({ p, t, onBook }) {
  const H = t.helperSection;
  return (
    <article className="hcard">
      <div className="hcard__media">
        <Photo src={p.img && window.HY_IMG ? window.HY_IMG[p.img] : undefined} label="姐姐照片 Photo" style={{ height: 230, borderRadius: 0, border: "none" }} />
        <span className="hbadge hbadge--yrs">{p.years} {H.yrsLabel}</span>
        <span className="hbadge hbadge--rating"><Icon n="star" style={{ width: 13, height: 13 }} /> {p.rating}</span>
        {p.nat && <span className="hbadge hbadge--nat">{p.nat}</span>}
      </div>
      <div className="hcard__body">
        <h4>{p.name} <small>{p.age}</small></h4>
        <div className="hcard__skills">{p.skills.map((s) => <span className="tag tag--cream" key={s}>{s}</span>)}</div>
        <p>{p.blurb}</p>
        <a className="btn btn--gold btn--sm" href={waLink(t)} target="_blank" rel="noopener noreferrer" style={{ alignSelf: "flex-start", marginTop: "auto" }}><Icon n="calendar-check" />{H.cta}</a>
      </div>
    </article>
  );
}

/* ---------------- Trust bar ---------------- */
function TrustBar({ t }) {
  return (
    <div className="trustbar">
      <div className="container trustbar__inner">
        {t.trust.map((it, i) => (
          <div className="trustbar__item" key={it.t}>
            <span className="ti"><Icon n={TRUST_ICONS[i]} /></span>
            <span>{it.t}<small>{it.s}</small></span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------------- CTA band ---------------- */
function CTABand({ setPage, t }) {
  return (
    <section className="section">
      <div className="container">
        <div className="cta-band">
          <h2>{t.cta.title}</h2>
          <p>{t.cta.p}</p>
          <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
            <Btn variant="gold" size="lg" icon="message-circle" href={WA_LINK} external>{t.cta.btn1}</Btn>
            <Btn variant="ghostlight" size="lg" icon="phone" href="tel:+85244127906">{t.cta.btn2}</Btn>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Footer ---------------- */
function SiteFooter({ setPage, t }) {
  const f = t.footer;
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__top">
          <div>
            <Wordmark dark />
            <p>{f.tagline}</p>
          </div>
          <div>
            <h5>{f.hServices}</h5>
            <ul>{f.servicesLinks.map((l) => <li key={l}><a onClick={() => setPage("process")}>{l}</a></li>)}</ul>
          </div>
          <div>
            <h5>{f.hCompany}</h5>
            <ul>{f.companyLinks.map((l, i) => <li key={l}><a onClick={() => setPage(["about", "about", "blog", "contact"][i] || "about")}>{l}</a></li>)}</ul>
          </div>
          <div>
            <h5>{f.hContact}</h5>
            <ul>
              <li><a>{f.addr}</a></li>
              <li><a href="tel:+85244127906">{f.phone}</a></li>
              <li><a href="mailto:info@hingyeemaid.com">{f.email}</a></li>
              <li><a>{f.hours}</a></li>
            </ul>
          </div>
        </div>
        <div className="footer__bottom">
          <span>{f.copyright}</span>
          <span>{f.licline}</span>
        </div>
      </div>
    </footer>
  );
}

/* ---------------- WhatsApp float ---------------- */
function WhatsApp({ t }) {
  return <a className="wa" href={t ? waLink(t) : WA_LINK} target="_blank" rel="noopener noreferrer" aria-label="WhatsApp"><Icon n="message-circle" /></a>;
}

/* ---------------- Helper showcase carousel ---------------- */
function HelperCarousel({ t, setPage }) {
  const H = t.helperSection;
  const onBook = () => setPage && setPage("contact");
  const railRef = React.useRef(null);
  const scroll = (dir) => {
    const el = railRef.current; if (!el) return;
    const card = el.querySelector(".hcard");
    const w = card ? card.offsetWidth + 18 : 320;
    const start = el.scrollLeft;
    const target = Math.max(0, Math.min(start + dir * w, el.scrollWidth - el.clientWidth));
    el.style.scrollSnapType = "none";
    const dur = 360, t0 = Date.now();
    const ease = (p) => 1 - Math.pow(1 - p, 3);
    const id = setInterval(() => {
      const p = Math.min(1, (Date.now() - t0) / dur);
      el.scrollLeft = start + (target - start) * ease(p);
      if (p >= 1) { clearInterval(id); el.scrollLeft = target; el.style.scrollSnapType = ""; }
    }, 16);
  };
  return (
    <section className="section" id="helpers">
      <div className="container">
        <div className="hsec-head">
          <div className="section-head" style={{ marginBottom: 0, maxWidth: "none" }}>
            <span className="eyebrow">{H.eyebrow}</span>
            <h2 className="section-title">{H.title}</h2>
          </div>
          <div className="hsec-nav">
            <button className="iconbtn iconbtn--ghost" onClick={() => scroll(-1)} aria-label={H.prev} type="button"><Icon n="arrow-left" /></button>
            <button className="iconbtn iconbtn--dark" onClick={() => scroll(1)} aria-label={H.next} type="button"><Icon n="arrow-right" /></button>
          </div>
        </div>
        <p className="section-lede" style={{ marginTop: 14, maxWidth: "56ch" }}>{H.lede}</p>
        <div className="hrail" ref={railRef}>
          {t.helpers.map((p, i) => (
            <div className="hrail__cell" key={i}><HelperCard p={p} t={t} onBook={onBook} /></div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Why-us (data + icons) ---------------- */
function WhyUs({ t }) {
  const W = t.ext.whyus;
  return (
    <section className="section">
      <div className="container">
        <SectionHead center eyebrow={W.eyebrow} title={W.title} lede={W.lede} />
        <div className="why-grid">
          {W.items.map((it, i) => (
            <div className="why-card" key={i}>
              <span className="why-card__icon"><Icon n={it.icon} /></span>
              <div className="why-card__n">{it.n}</div>
              <div className="why-card__l">{it.l}</div>
              <p className="why-card__d">{it.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Process timeline ---------------- */
function ProcessTimeline({ t, compact }) {
  const P = t.ext.process;
  const icons = ["phone-call", "user-search", "calendar-check", "file-text", "plane-landing", "life-buoy"];
  return (
    <section className={"section" + (compact ? "" : " sec-paper")}>
      <div className="container">
        <SectionHead center eyebrow={P.eyebrow} title={P.title} lede={P.lede} />
        <div className="timeline">
          {P.steps.map((s, i) => (
            <div className="tstep" key={i}>
              <div className="tstep__top"><span className="tstep__n">{String(i + 1).padStart(2, "0")}</span><span className="tstep__icon"><Icon n={icons[i]} /></span></div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Cases grid ---------------- */
function CasesGrid({ t, limit }) {
  const C = t.ext;
  const list = limit ? C.cases.slice(0, limit) : C.cases;
  return (
    <div className="cases-grid">
      {list.map((c, i) => (
        <article className="case-card" key={i}>
          <div className="case-card__media">
            <Photo src={c.img && window.HY_IMG ? window.HY_IMG[c.img] : undefined} label="家庭照片 Family" style={{ height: 200, borderRadius: 0, border: "none" }} />
            <span className="case-card__fam">{c.family}</span>
          </div>
          <div className="case-card__body">
            <div className="case-row"><span className="case-row__l">{C.caseFields.needL}</span><p>{c.need}</p></div>
            <div className="case-row"><span className="case-row__l case-row__l--or">{C.caseFields.resultL}</span><p>{c.result}</p></div>
            <blockquote className="case-quote">「{c.quote}」<cite>— {c.who}</cite></blockquote>
          </div>
        </article>
      ))}
    </div>
  );
}

/* ---------------- Google-style reviews ---------------- */
function GoogleReviews({ t }) {
  const R = t.ext.reviews, list = t.ext.reviewList;
  return (
    <section className="section">
      <div className="container">
        <div className="reviews-head">
          <SectionHead eyebrow={R.eyebrow} title={R.title} lede={R.lede} />
          <div className="gbadge"><span className="gbadge__g">G</span><div><div className="gbadge__score">4.8 <span>★★★★★</span></div><div className="gbadge__src">{R.source}</div></div></div>
        </div>
        <div className="reviews-grid">
          {list.map((r, i) => (
            <div className="review-card" key={i}>
              <div className="review-card__top">
                <span className="review-av">{r.init}</span>
                <div><div className="review-who">{r.who}</div><div className="review-d">{r.d}</div></div>
                <span className="review-g">G</span>
              </div>
              <div className="review-stars">{"★".repeat(r.stars)}<span className="off">{"★".repeat(5 - r.stars)}</span></div>
              <p className="review-text">{r.text}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  Icon, refreshIcons, Wordmark, Btn, Badge, SectionHead, Photo, waLink, WA_LINK,
  SiteNav, TrustBar, CTABand, SiteFooter, WhatsApp, HelperCarousel, HelperCard,
  WhyUs, ProcessTimeline, CasesGrid, GoogleReviews,
  SVC_META, REGION_DOTS, TRUST_ICONS, tileMod,
});