// pages.jsx — five page components

const { useState: useStateP, useEffect: useEffectP, useMemo: useMemoP } = React;

/* ============================== HOME ============================== */
const HomePage = ({ t, lang, onEnquire, onWhatsApp, onNav, tweaks }) => {
  const h = t.home;
  return (
    <main className="page" id="page-home">
      {/* EDITORIAL HERO with Material Symbol decorations */}
      <div style={{ position: "relative" }}>
        <span className="botanical-msym drift" style={{ left: "5%", top: "14%", fontSize: 120 }}>eco</span>
        <span className="botanical-msym drift-2" style={{ right: "7%", bottom: "20%", fontSize: 90, color: "var(--accent)" }}>local_florist</span>
        <span className="botanical-msym drift" style={{ right: "13%", top: "22%", fontSize: 72, color: "var(--primary)" }}>nutrition</span>
        <HeroEditorial
          eyebrow={h.heroEditorial.eyebrow}
          rows={h.kineticHero}
          sub={h.heroEditorial.sub}
          ctaPrimary={h.hero.ctaPrimary}
          ctaSecondary={h.hero.ctaSecondary}
          onPrimary={onEnquire}
          onSecondary={onWhatsApp}
          meta={h.heroEditorial.meta}
        />
        <HeroFlowAnimation data={h.flowAnim} lang={lang} />
      </div>

      {/* MISSION / VISION — moved up so the founding "why" is the second focal point */}
      <MissionVision data={h.missionVision} />

      {/* INGREDIENTS STRIP */}
      <IngredientsStrip items={h.ingredients.items} />

      {/* WARM FEATURE CARDS with botanical illustrations */}
      <section className="section-edge" style={{ background: "var(--cream-2)", paddingTop: 120, paddingBottom: 120 }}>
        <div className="container">
          <Reveal>
            <div className="eyebrow-rule" style={{ justifyContent: "flex-start" }}>{lang === "zh" ? "我们的不同" : "What sets us apart"}</div>
            <h2 className="bigh" style={{ maxWidth: 900, marginBottom: 64 }}>
              {lang === "zh"
                ? <>不卖快速减重 — <span className="accent">陪你建立一辈子的饮食习惯。</span></>
                : <>We don't sell quick fixes — <span className="accent">we build habits that last.</span></>}
            </h2>
          </Reveal>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
            {h.features.map((f, i) => (
              <Reveal key={i} delay={i * 100}>
                <WarmCard icon={["spa", "restaurant", "favorite"][i] || "eco"} title={f.title} body={f.body} tag={lang === "zh" ? ["实证", "客制", "陪伴"][i] : ["Evidence", "Tailored", "Ongoing"][i]} />
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <SectionDivider />

      {/* APPROACH — Aesop-style numbered list */}
      <section className="section-edge" style={{ paddingTop: 80, paddingBottom: 120 }}>
        <div className="container" style={{ maxWidth: 1100 }}>
          <Reveal>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 60, marginBottom: 64 }}>
              <div>
                <div className="eyebrow-rule">{lang === "zh" ? "我们的立场" : "Our approach"}</div>
                <h2 className="bigh">{lang === "zh" ? <>四件我们 <span className="accent">不会</span> 做的事</> : <>Four things we <span className="accent">won't</span> do</>}</h2>
              </div>
              <p className="lead" style={{ alignSelf: "end" }}>{lang === "zh" ? "营养咨询行业里有太多坏习惯。在我们做的事之前，先讲清楚我们不做的事。" : "There's a lot of bad practice in this industry. Before what we do, here's what we won't."}</p>
            </div>
          </Reveal>
          <ApproachList items={h.approach} />
        </div>
      </section>

      {/* STICKY SCROLL STORY */}
      <StickyStory
        eyebrow={h.stickyStory.eyebrow}
        h2={h.stickyStory.h2}
        sub={h.stickyStory.sub}
        steps={h.stickyStory.steps}
      />

      {/* EDITORIAL PULL QUOTE */}
      <Editorial mark={h.editorial.mark} quote={h.editorial.quote} accents={h.editorial.accents} attr={h.editorial.attr} />

      {/* PILLARS — 3 core + 2 extras (Optional / Free) */}
      <section className="section">
        <div className="container">
          <Reveal>
            <div className="section-head">
              <div className="eyebrow">{h.pillars.eyebrow}</div>
              <h2 className="font-display-tight">{h.pillars.h2}</h2>
              <p className="lead">{h.pillars.sub}</p>
            </div>
          </Reveal>
          <div className="pillar-grid pillar-grid-core">
            {h.pillars.items.slice(0, 3).map((it, i) => (
              <Reveal key={i} delay={i * 60}><ServicePillar item={it} /></Reveal>
            ))}
          </div>
          <div className="pillar-grid pillar-grid-extras">
            {h.pillars.items.slice(3).map((it, i) => (
              <Reveal key={i + 3} delay={(i + 3) * 60}><ServicePillar item={it} /></Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* TEAM PREVIEW */}
      <section className="section section-tinted">
        <div className="container">
          <div className="section-head section-head-row">
            <div>
              <div className="eyebrow">{h.teamPreview.eyebrow}</div>
              <h2 className="font-display-tight">{h.teamPreview.h2}</h2>
              <p className="lead" style={{ maxWidth: 540 }}>{h.teamPreview.sub}</p>
            </div>
            <a href="#/team" className="btn btn-secondary">{h.teamPreview.cta} <Icon name="arrowSm" size={16} /></a>
          </div>
          <div className="nutri-grid">
            {t.team.members.map((m, i) => (
              <Reveal key={i} delay={i * 80}><NutritionistCard m={m} idx={i} lang={lang} /></Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* PRICING TEASER */}
      <section className="section">
        <div className="container">
          <div className="section-head section-head-row">
            <div>
              <div className="eyebrow">{h.pricingPreview.eyebrow}</div>
              <h2 className="font-display-tight">{h.pricingPreview.h2}</h2>
              <p className="lead" style={{ maxWidth: 540 }}>{h.pricingPreview.sub}</p>
            </div>
            <a href="#/packages" className="btn btn-secondary">{h.pricingPreview.cta} <Icon name="arrowSm" size={16} /></a>
          </div>
          <div className="pricing-grid">
            {t.packages.tiers.map((tier, i) => (
              <Reveal key={tier.key} delay={i * 80}>
                <PricingCard tier={tier} highlight={tier.key === "package"} onChoose={() => onEnquire({ goal: "", note: tier.name })} />
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ TEASER */}
      <section className="section section-tinted">
        <div className="container container-narrow">
          <div className="section-head">
            <div className="eyebrow">{h.faqPreview.eyebrow}</div>
            <h2 className="font-display-tight">{h.faqPreview.h2}</h2>
          </div>
          <div className="faq-list">
            {t.faq.items.slice(0, 4).map((it, i) => (
              <FAQItem key={i} q={it.q} a={it.a} defaultOpen={i === 0} />
            ))}
          </div>
          <div style={{ textAlign: "center", marginTop: 24 }}>
            <a href="#/faq" className="btn btn-secondary">{h.faqPreview.cta} <Icon name="arrowSm" size={16} /></a>
          </div>
        </div>
      </section>

      <CTABanner h={h.finalCta.h2} sub={h.finalCta.sub}
                 primary={h.finalCta.primary} secondary={h.finalCta.secondary}
                 onPrimary={onEnquire} onSecondary={onWhatsApp} />
    </main>
  );
};

/* ============================== PACKAGES ============================== */
const PackagesPage = ({ t, lang, onEnquire, onWhatsApp }) => {
  const p = t.packages;
  const renderCell = (v) => {
    if (v === true) return <span className="cell-yes"><Icon name="check" size={16} /></span>;
    if (v === false) return <span className="cell-no">—</span>;
    return <span className="cell-text">{v}</span>;
  };
  return (
    <main className="page" id="page-packages">
      <PageHero eyebrow={p.hero.eyebrow} h1={p.hero.h1} sub={p.hero.sub} />

      {/* Pricing cards (mobile) + desktop comparison */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="pricing-grid pricing-grid-lg">
            {p.tiers.map((tier, i) => (
              <Reveal key={tier.key} delay={i * 60}>
                <PricingCard tier={tier} highlight={tier.key === "package"} onChoose={() => onEnquire({ note: tier.name })} />
              </Reveal>
            ))}
          </div>

          <div className="comparison-wrap">
            <table className="comparison">
              <thead>
                <tr>
                  {p.tableHead.map((h, i) => (
                    <th key={i} className={i === 2 ? "th-highlight" : ""}>
                      {i === 2 && <span className="pricing-badge sm">{p.tiers[1].badge}</span>}
                      {h}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {p.features.map((row, ri) => (
                  <tr key={ri}>
                    <td className="comparison-feat">{row[0]}</td>
                    <td>{renderCell(row[1])}</td>
                    <td className="th-highlight">{renderCell(row[2])}</td>
                    <td>{renderCell(row[3])}</td>
                  </tr>
                ))}
                <tr className="comparison-cta-row">
                  <td></td>
                  {p.tiers.map(tier => (
                    <td key={tier.key} className={tier.key === "package" ? "th-highlight" : ""}>
                      <button className={"btn btn-sm " + (tier.key === "package" ? "btn-primary" : "btn-secondary")}
                              onClick={() => onEnquire({ note: tier.name })}>
                        {tier.cta}
                      </button>
                    </td>
                  ))}
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </section>

      {/* Timeline */}
      <section className="section section-tinted">
        <div className="container">
          <div className="section-head">
            <div className="eyebrow">{p.timeline.eyebrow}</div>
            <h2 className="font-display-tight">{p.timeline.h2}</h2>
          </div>
          <div className="timeline">
            {p.timeline.steps.map((s, i) => (
              <Reveal key={i} delay={i * 80}>
                <div className="timeline-step">
                  <div className="timeline-num font-display">{s.n}</div>
                  <h3 className="font-display">{s.title}</h3>
                  <p>{s.desc}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Add-ons */}
      <section className="section">
        <div className="container container-narrow">
          <div className="eyebrow">{p.addons.eyebrow}</div>
          <h2 className="font-display-tight" style={{ marginTop: 8 }}>{p.addons.h2}</h2>
          <div className="addons">
            {p.addons.items.map((a, i) => (
              <div key={i} className="addon">
                <span>{a.label}</span>
                <span className="addon-price font-display">{a.price}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTABanner h={t.home.finalCta.h2} sub={t.home.finalCta.sub}
                 primary={t.home.finalCta.primary} secondary={t.home.finalCta.secondary}
                 onPrimary={onEnquire} onSecondary={onWhatsApp} />
    </main>
  );
};

/* ============================== TEAM ============================== */
const TeamPage = ({ t, lang, onEnquire, onWhatsApp }) => {
  const tm = t.team;
  return (
    <main className="page" id="page-team">
      <PageHero eyebrow={tm.hero.eyebrow} h1={tm.hero.h1} sub={tm.hero.sub} narrow />

      {tm.members.map((m, i) => (
        <section key={i} className={"section nutri-row " + (i % 2 ? "reverse" : "")}>
          <div className="container nutri-row-inner">
            <Reveal>
              <div className="nutri-portrait">
                {m.image
                  ? <img src={m.image} alt={m.name} loading="lazy" />
                  : <Img kind="portrait" seed={i + 1} aspect="4/5" label={`${m.name} · portrait pending`} />}
              </div>
            </Reveal>
            <Reveal delay={120}>
              <div className="nutri-detail">
                <div className="eyebrow">{m.title}</div>
                <h2 className="font-display-tight">
                  {m.name} <span className="nutri-name-alt">{m.nameEn}</span>
                </h2>
                <p className="nutri-credential">{m.credential}</p>
                <div className="chips">
                  {m.specialties.map(s => <span key={s} className="chip chip-primary">{s}</span>)}
                </div>
                <p className="lead">{m.bio}</p>
                <div className="nutri-actions">
                  <button className="btn btn-primary" onClick={() => onEnquire({ note: m.name })}>
                    {tm.requestCta} <Icon name="arrowSm" size={16} />
                  </button>
                  {m.links?.map((ln, j) => (
                    <a key={j} href={ln.href} target="_blank" rel="noopener noreferrer" className="btn btn-ghost btn-sm">
                      {ln.label} ↗
                    </a>
                  ))}
                </div>
              </div>
            </Reveal>
          </div>
        </section>
      ))}

      <section className="section philosophy">
        <div className="container container-narrow">
          <div className="eyebrow">{tm.philosophy.eyebrow}</div>
          <blockquote className="font-display-tight philosophy-quote">
            "{tm.philosophy.quote}"
          </blockquote>
          <p className="philosophy-attr">{tm.philosophy.attribution}</p>
        </div>
      </section>

      <CTABanner h={t.home.finalCta.h2} sub={t.home.finalCta.sub}
                 primary={t.home.finalCta.primary} secondary={t.home.finalCta.secondary}
                 onPrimary={onEnquire} onSecondary={onWhatsApp} />
    </main>
  );
};

/* ============================== FAQ ============================== */
const FAQPage = ({ t, lang, onEnquire, onWhatsApp }) => {
  const f = t.faq;
  const [q, setQ] = useStateP("");
  const [cat, setCat] = useStateP("all");
  const filtered = useMemoP(() => {
    return f.items.filter(it => {
      if (cat !== "all" && it.cat !== cat) return false;
      if (q && !(it.q + it.a).toLowerCase().includes(q.toLowerCase())) return false;
      return true;
    });
  }, [q, cat, f.items]);

  return (
    <main className="page" id="page-faq">
      <PageHero eyebrow={f.hero.eyebrow} h1={f.hero.h1} sub={f.hero.sub} narrow />

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container container-narrow">
          <div className="faq-search">
            <Icon name="search" size={18} />
            <input value={q} onChange={e => setQ(e.target.value)} placeholder={f.hero.searchPlaceholder} />
            {q && <button onClick={() => setQ("")} aria-label="clear"><Icon name="x" size={16} /></button>}
          </div>

          <div className="faq-cats">
            {f.categories.map(c => (
              <button key={c.id} className={"chip " + (cat === c.id ? "chip-primary" : "")}
                      onClick={() => setCat(c.id)}>
                {c.label}
              </button>
            ))}
          </div>

          <div className="faq-list" style={{ marginTop: 24 }}>
            {filtered.length === 0 && (
              <div className="empty-state">
                <Icon name="search" size={28} />
                <p>{lang === "zh" ? "没有找到匹配的问题。" : "No questions match."}</p>
              </div>
            )}
            {filtered.map((it, i) => (
              <FAQItem key={it.q} q={it.q} a={it.a} />
            ))}
          </div>

          <div className="still-asking">
            <div>
              <h3 className="font-display">{f.stillAsking.h}</h3>
              <p>{f.stillAsking.sub}</p>
            </div>
            <button className="btn btn-whatsapp" onClick={onWhatsApp}>
              <Icon name="whatsapp" size={16} /> {f.stillAsking.cta}
            </button>
          </div>
        </div>
      </section>

      <CTABanner h={t.home.finalCta.h2} sub={t.home.finalCta.sub}
                 primary={t.home.finalCta.primary} secondary={t.home.finalCta.secondary}
                 onPrimary={onEnquire} onSecondary={onWhatsApp} />
    </main>
  );
};

/* ============================== CONTACT ============================== */
const ContactPage = ({ t, lang, onEnquire, onWhatsApp }) => {
  const c = t.contact;
  const [form, setForm] = useStateP({ name: "", whatsapp: "", email: "", goal: "", message: "" });
  const [phase, setPhase] = useStateP("idle");
  const [errors, setErrors] = useStateP({});
  const tf = c.form;
  const submit = (ev) => {
    ev.preventDefault();
    const e = {};
    if (!form.name.trim()) e.name = "*";
    if (!form.whatsapp.trim()) e.whatsapp = "*";
    if (!form.goal) e.goal = "*";
    setErrors(e);
    if (Object.keys(e).length) return;
    setPhase("submitting");
    setTimeout(() => setPhase("success"), 900);
  };

  const methodIcon = { "click-to-chat": "whatsapp", mailto: "mail", ig: "instagram", fb: "facebook" };
  return (
    <main className="page" id="page-contact">
      <PageHero eyebrow={c.hero.eyebrow} h1={c.hero.h1} sub={c.hero.sub} narrow />

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="contact-grid">
            <div className="contact-left">
              <div className="card contact-card">
                <h3 className="font-display">{c.methods.h}</h3>
                <ul className="contact-methods">
                  {c.methods.items.map((m, i) => (
                    <li key={i}>
                      <span className="method-icon"><Icon name={methodIcon[m.action]} size={18} /></span>
                      <div>
                        <div className="method-label">{m.label}</div>
                        <div className="method-value">{m.value}</div>
                      </div>
                      <a href="#" className="method-go" aria-label={`open ${m.label}`}><Icon name="arrowSm" size={14} /></a>
                    </li>
                  ))}
                </ul>
              </div>
              <div className="card contact-card">
                <h3 className="font-display">{c.payment.h}</h3>
                <p>{c.payment.sub}</p>
                <div className="bank-info">
                  <div><span className="bank-label">{lang === "zh" ? "银行" : "Bank"}</span><span>{c.payment.bank}</span></div>
                  <div><span className="bank-label">{lang === "zh" ? "户名" : "Account name"}</span><span>{c.payment.accountName}</span></div>
                  <div><span className="bank-label">{lang === "zh" ? "账号" : "Account no."}</span><span className="bank-acc font-display">{c.payment.accountNumber}</span></div>
                </div>
                <p className="bank-note">{c.payment.note}</p>
              </div>
              <div className="card contact-card">
                <h3 className="font-display">{c.area.h}</h3>
                <p style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
                  <Icon name="screen" size={16} /> <span>{c.area.line}</span>
                </p>
                <p style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
                  <Icon name="pin" size={16} /> <span>{c.area.line2}</span>
                </p>
              </div>
            </div>

            <div className="contact-right">
              <div className="card contact-form-card">
                <h3 className="font-display">{tf.h}</h3>
                {phase !== "success" ? (
                  <form onSubmit={submit} noValidate>
                    <div className="field">
                      <label>{tf.name} {errors.name && <span className="field-error">{errors.name}</span>}</label>
                      <input value={form.name} onChange={e => setForm({...form, name: e.target.value})} />
                    </div>
                    <div className="field-row">
                      <div className="field">
                        <label>{tf.whatsapp} {errors.whatsapp && <span className="field-error">{errors.whatsapp}</span>}</label>
                        <input value={form.whatsapp} onChange={e => setForm({...form, whatsapp: e.target.value})} placeholder="+60…" />
                      </div>
                      <div className="field">
                        <label>{tf.email}</label>
                        <input type="email" value={form.email} onChange={e => setForm({...form, email: e.target.value})} />
                      </div>
                    </div>
                    <div className="field">
                      <label>{tf.goal} {errors.goal && <span className="field-error">{errors.goal}</span>}</label>
                      <select value={form.goal} onChange={e => setForm({...form, goal: e.target.value})}>
                        <option value="">—</option>
                        {tf.goalOptions.map(o => <option key={o} value={o}>{o}</option>)}
                      </select>
                    </div>
                    <div className="field">
                      <label>{tf.message}</label>
                      <textarea rows="4" value={form.message} onChange={e => setForm({...form, message: e.target.value})} />
                    </div>
                    <button type="submit" className="btn btn-primary btn-lg" style={{ width: "100%" }} disabled={phase === "submitting"}>
                      {phase === "submitting" ? tf.submitting : tf.submit}
                    </button>
                  </form>
                ) : (
                  <div className="success-state">
                    <div className="success-mark"><Icon name="check" size={28} /></div>
                    <h3 className="font-display-tight" style={{ fontSize: 26 }}>{tf.success}</h3>
                    <p className="lead">{tf.successSub}</p>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </section>

      <CTABanner h={t.home.finalCta.h2} sub={t.home.finalCta.sub}
                 primary={t.home.finalCta.primary} secondary={t.home.finalCta.secondary}
                 onPrimary={onEnquire} onSecondary={onWhatsApp} />
    </main>
  );
};

Object.assign(window, { HomePage, PackagesPage, TeamPage, FAQPage, ContactPage });