// Secondary pages: About, Services, Asian, Western, Cases, Community, Contact
// Unified with the HOME page's navy + gold system — gold used the RESTRAINED
// way home does (eyebrows, fine hairlines, small serif numerals), warm
// photography, clean structure (no vertical edge label, no oversized glyphs,
// clean footer). Refined motion: hero parallax, count-up stats, gold hairline
// draw-ins, slow image zoom on hover, clip reveals.

// ───────── Curated imagery (semantic, warm grade to match home) ─────────
const IMG = {
  aboutHero:     "uploads/ewv-tea-studio-luxury.png",
  aboutPortrait: "uploads/ewv-case-forum-luxury.jpg",
  aboutMission:  "uploads/ewv-tea-studio-luxury.png",

  servicesHero:  "uploads/ewv-bridge-luxury.png",
  servicesAtmos: "uploads/ewv-bridge-luxury.png",

  asianHero:  "uploads/ewv-tea-studio-luxury.png",
  asianSide:  "uploads/ewv-case-culture-luxury.jpg",

  westernHero:  "uploads/ewv-bridge-luxury.png",
  westernSide:  "uploads/ewv-case-forum-luxury.jpg",
  westernAtmos: "uploads/ewv-bridge-luxury.png",

  casesHero: "uploads/ewv-case-restaurant-luxury.jpg",
  caseRow: [
    "uploads/ewv-case-restaurant-luxury.jpg",  // Restaurant
    "uploads/ewv-case-retail-luxury.jpg",      // Retail
    "uploads/ewv-case-culture-luxury.jpg",     // Cultural campaign
    "uploads/ewv-case-forum-luxury.jpg",       // Community forum
  ],

  communityHero: "uploads/ewv-case-culture-luxury.jpg",
  communityEvent: [
    "uploads/ewv-case-culture-luxury.jpg",
    "uploads/ewv-case-forum-luxury.jpg",
    "uploads/ewv-case-restaurant-luxury.jpg",
    "uploads/ewv-case-retail-luxury.jpg",
    "uploads/ewv-tea-studio-luxury.png",
  ],

  contactHero: "uploads/ewv-bridge-luxury.png",
  contactSide: "uploads/ewv-tea-studio-luxury.png",
};

// Warm, rich-but-tasteful grade — matches the home page's treatment.
const GRADE = "saturate(0.8) contrast(1.04)";

// Locale-aware quote marks: 「」 for Chinese, “” for English.
function quote(s, lang) { return lang === "zh" ? "「" + s + "」" : "“" + s + "”"; }

// ───────── Reusable framed figure (clean; clip-reveal + slow zoom) ─────────
function FigureImage({ src, pos = "center", label, sub, ratio = "4/5", className = "" }) {
  const [hover, setHover] = useState(false);
  return (
    <div
      className={"ewv-figure " + className}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{ position: "relative", width: "100%", aspectRatio: ratio, overflow: "hidden", background: "var(--graphite)" }}>
      <div className="ewv-img-reveal" style={{
        position: "absolute", inset: 0,
        backgroundImage: `url('${src}')`,
        backgroundSize: "cover", backgroundPosition: pos, backgroundRepeat: "no-repeat",
        filter: GRADE,
        transform: hover ? "scale(1.045)" : "scale(1)",
        transition: "transform 1200ms cubic-bezier(.2,.7,.2,1)",
      }} />
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(17,22,26,0) 40%, rgba(17,22,26,0.66) 100%)" }} />
      {/* fine gold corner rule — a single restrained accent */}
      <div aria-hidden style={{ position: "absolute", left: 22, top: 22, width: 26, height: 1, background: "var(--gold)" }} />
      {(label || sub) && (
        <div style={{ position: "absolute", left: 26, right: 26, bottom: 24, color: "var(--ivory)" }}>
          {label && (
            <div style={{ fontSize: 10, letterSpacing: "0.24em", textTransform: "uppercase", color: "var(--gold)", marginBottom: sub ? 8 : 0 }}>{label}</div>
          )}
          {sub && <div className="serif" style={{ fontSize: 18, lineHeight: 1.3, fontWeight: 500 }}>{sub}</div>}
        </div>
      )}
    </div>
  );
}

// ───────── Generic page header (navy/gold; clean overlay + parallax) ─────────
// overlay: 'soft' | 'minimal' | 'whisper'
function PageHeader({ eyebrow, title, lead, dark = false, bg, bgPos = "center", overlay = "soft" }) {
  const parRef = useParallax(26);
  const soft = overlay === "soft", whisper = overlay === "whisper";
  const fg = dark ? "var(--ivory)" : "var(--text-strong)";
  const imgOpacity = whisper ? (dark ? 0.6 : 0.32) : soft ? (dark ? 0.5 : 0.24) : (dark ? 0.42 : 0.2);

  const overlayBg = dark
    ? `linear-gradient(180deg, rgba(17,22,26,${soft ? 0.48 : 0.6}) 0%, rgba(17,22,26,${soft ? 0.22 : 0.32}) 46%, rgba(17,22,26,${soft ? 0.64 : 0.76}) 100%)`
    : `linear-gradient(180deg, rgba(248,246,241,${soft ? 0.62 : 0.76}) 0%, rgba(248,246,241,${soft ? 0.4 : 0.52}) 46%, rgba(248,246,241,${soft ? 0.7 : 0.8}) 100%)`;

  const titleShadow = dark ? "0 1px 18px rgba(0,0,0,0.42)" : "0 0 16px rgba(248,246,241,0.7)";

  return (
    <section className="ewv-section-pad" style={{
      paddingTop: 196, paddingBottom: 120,
      background: dark ? "var(--graphite)" : "var(--paper)",
      color: fg, position: "relative", overflow: "hidden",
    }}>
      {bg && (
        <div aria-hidden ref={parRef} className="ewv-img-reveal" style={{
          position: "absolute", left: 0, right: 0, top: "-9%", height: "118%",
          backgroundImage: `url('${bg}')`,
          backgroundSize: "cover", backgroundPosition: bgPos, backgroundRepeat: "no-repeat",
          opacity: imgOpacity, filter: GRADE, willChange: "transform",
        }} />
      )}
      {bg && <div aria-hidden style={{ position: "absolute", inset: 0, background: overlayBg }} />}
      {/* one restrained corner glow (gold east) */}
      <div aria-hidden style={{
        position: "absolute", right: -120, top: -120, width: 560, height: 560,
        background: dark
          ? "radial-gradient(circle at 70% 30%, rgba(183,163,109,0.16) 0%, rgba(183,163,109,0) 60%)"
          : "radial-gradient(circle at 70% 30%, rgba(183,163,109,0.12) 0%, rgba(183,163,109,0) 60%)",
        pointerEvents: "none",
      }} />
      <div aria-hidden className="serif" style={{
        position: "absolute", right: "6vw", bottom: "10%",
        fontSize: "clamp(120px, 18vw, 260px)", lineHeight: 0.78,
        color: dark ? "rgba(242,239,232,0.035)" : "rgba(17,22,26,0.04)",
        writingMode: "vertical-rl", letterSpacing: "0.02em",
        pointerEvents: "none",
      }}>東西</div>
      <div aria-hidden style={{
        position: "absolute", left: "7vw", bottom: 0, width: 1, height: 96,
        background: dark
          ? "linear-gradient(180deg, rgba(183,163,109,0), rgba(183,163,109,0.5))"
          : "linear-gradient(180deg, rgba(124,70,64,0), rgba(183,163,109,0.35))",
        pointerEvents: "none",
      }} />

      <div className="ewv-container" style={{ maxWidth: 1440, margin: "0 auto", padding: "0 80px", position: "relative" }}>
        <Reveal>
          <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 30 }}>
            <DrawLine width={28} color={dark ? "var(--gold)" : "var(--rust)"} />
            <SectionEyebrow color={dark ? "var(--gold)" : "var(--rust)"}>{eyebrow}</SectionEyebrow>
          </div>
        </Reveal>
        <Reveal delay={120}>
          <h1 className="serif ewv-page-title" style={{
            fontSize: "clamp(50px, 6.3vw, 96px)", lineHeight: 1.02, fontWeight: 400,
            margin: "0 0 34px", letterSpacing: 0, whiteSpace: "pre-line",
            textShadow: titleShadow, maxWidth: 1040,
          }}>{title}</h1>
        </Reveal>
        {lead && (
          <Reveal delay={220}>
            <p className="serif ewv-page-lead" style={{
              fontSize: 20, lineHeight: 1.58, maxWidth: 700, margin: 0,
              color: dark ? "rgba(245,239,227,0.86)" : "var(--text)", fontWeight: 400,
            }}>{lead}</p>
          </Reveal>
        )}
      </div>
    </section>
  );
}

// Quiet section heading with a gold hairline draw-in
function SectionHead({ eyebrow, title, lead, dark = false }) {
  return (
    <div className="ewv-section-head" style={{
      display: "grid", gridTemplateColumns: lead ? "1fr 1.3fr" : "1fr",
      gap: 72, paddingBottom: 56, alignItems: "end",
    }}>
      <div>
        <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 18 }}>
          <DrawLine width={24} color={dark ? "var(--gold)" : "var(--rust)"} />
          <SectionEyebrow color={dark ? "var(--gold)" : "var(--rust)"}>{eyebrow}</SectionEyebrow>
        </div>
        {title && (
          <h2 className="serif" style={{
            fontSize: "clamp(34px, 3.8vw, 56px)", lineHeight: 1.06,
            margin: 0, fontWeight: 400, letterSpacing: 0,
            color: dark ? "var(--ivory)" : "var(--text-strong)",
          }}>{title}</h2>
        )}
      </div>
      {lead && (
        <p className="ewv-section-lead" style={{
          fontSize: 17, lineHeight: 1.6,
          color: dark ? "rgba(245,239,227,0.72)" : "var(--text-mute)", margin: 0, maxWidth: 520,
        }}>{lead}</p>
      )}
    </div>
  );
}

// ───────────────────────── ABOUT ─────────────────────────
function AboutPage() {
  const { t, lang } = useLang();
  const a = t.about;
  const missionRef = useParallax(24);
  return (
    <div>
      <PageHeader eyebrow={a.eyebrow} title={a.title} lead={a.lead}
        bg={IMG.aboutHero} bgPos="center 52%" overlay="soft" />

      <section style={{ background: "var(--paper)", padding: "104px 0 120px", position: "relative" }}>
        <div className="ewv-container" style={{ maxWidth: 1440, margin: "0 auto", padding: "0 80px" }}>
          <div className="ewv-two-col-page" style={{ display: "grid", gridTemplateColumns: "0.9fr 1.45fr", gap: 96, alignItems: "start" }}>
            <Reveal>
              <FigureImage src={IMG.aboutPortrait} pos="center 40%" ratio="4/5"
                label={lang === "zh" ? "创始人 · Founder" : "Founder · 创始人"}
                sub={lang === "zh" ? "近二十年，站在东西方交汇处" : "Two decades at the East–West intersection"} />
            </Reveal>
            <Reveal delay={120}>
              <div>
                {a.body.map((p, i) => (
                  <p key={i} style={{ fontSize: 18, lineHeight: 1.74, color: "var(--text)", margin: i === 0 ? "0 0 24px" : "0 0 30px", maxWidth: 620 }}>{p}</p>
                ))}
                <div style={{ marginTop: 56 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 24 }}>
                    <DrawLine width={22} color="var(--rust)" />
                    <SectionEyebrow color="var(--rust)">{a.expHead}</SectionEyebrow>
                  </div>
                  <ul style={{
                    listStyle: "none", padding: 0, margin: 0,
                    display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1px",
                    background: "var(--line)", border: "1px solid var(--line)",
                  }}>
                    {a.experience.map((e, i) => <ExperienceCell key={i} text={e} idx={i} />)}
                  </ul>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* Mission — navy banner with parallax ink wash */}
      <section style={{ position: "relative", overflow: "hidden", background: "var(--navy)", color: "var(--ivory)" }}>
        <div aria-hidden ref={missionRef} style={{
          position: "absolute", left: 0, right: 0, top: "-10%", height: "120%",
          backgroundImage: `url('${IMG.aboutMission}')`,
          backgroundSize: "cover", backgroundPosition: "center", backgroundRepeat: "no-repeat",
          opacity: 0.18, filter: GRADE, willChange: "transform",
        }} />
        <div aria-hidden style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(17,22,26,0.72) 0%, rgba(17,22,26,0.82) 100%)" }} />
        <div aria-hidden style={{ position: "absolute", right: "-6%", top: "-30%", width: "46%", height: "130%", background: "radial-gradient(circle at 70% 40%, rgba(183,163,109,0.16) 0%, rgba(183,163,109,0) 60%)", pointerEvents: "none" }} />
        <div className="ewv-container" style={{ maxWidth: 1440, margin: "0 auto", padding: "120px 80px", position: "relative" }}>
          <Reveal>
            <div style={{ maxWidth: 960 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 24 }}>
                <DrawLine width={28} color="var(--gold)" />
                <SectionEyebrow color="var(--gold)">{a.missionLabel}</SectionEyebrow>
              </div>
              <p className="serif" style={{ fontSize: "clamp(28px, 4vw, 56px)", lineHeight: 1.2, margin: 0, fontWeight: 400, fontStyle: "italic", letterSpacing: 0 }}>
                {quote(a.mission, lang)}
              </p>
              <div style={{ marginTop: 40, display: "flex", alignItems: "center", gap: 16 }}>
                <Mark color="var(--ivory)" size={26} />
                <div style={{ fontSize: 11, letterSpacing: "0.24em", textTransform: "uppercase", color: "rgba(245,239,227,0.62)" }}>Eastwest Vanguard</div>
              </div>
            </div>
          </Reveal>
        </div>
      </section>
    </div>
  );
}

function ExperienceCell({ text, idx }) {
  const [hover, setHover] = useState(false);
  return (
    <li className="ewv-hoverable"
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ background: hover ? "var(--ivory)" : "var(--paper)", padding: "28px 28px", position: "relative", transition: "background 240ms" }}>
      <div className="serif mono-num" style={{ fontSize: 13, color: "var(--gold)", letterSpacing: "0.1em", marginBottom: 14 }}>0{idx + 1}</div>
      <div className="serif" style={{ fontSize: 19, lineHeight: 1.3, color: "var(--text-strong)", fontWeight: 500 }}>{text}</div>
      <span aria-hidden className="ewv-hair" style={{ position: "absolute", left: 0, top: 0, height: 2, width: 40, background: "var(--gold)" }} />
    </li>
  );
}

// ───────────────────────── SERVICES ─────────────────────────
function ServicesPage() {
  const { t } = useLang();
  const s = t.services;
  return (
    <div>
      <PageHeader eyebrow={s.eyebrow} title={s.title} lead={s.lead} dark
        bg={IMG.servicesHero} bgPos="center" overlay="minimal" />
      <section className="ewv-section-pad" style={{ background: "var(--paper)", padding: "104px 0 140px", position: "relative", overflow: "hidden" }}>
        <div aria-hidden style={{ position: "absolute", left: "-8%", bottom: "2%", width: "46%", height: "46%", background: "radial-gradient(circle at 30% 70%, rgba(110,131,125,0.12) 0%, rgba(110,131,125,0) 60%)", pointerEvents: "none" }} />
        <div className="ewv-container" style={{ maxWidth: 1440, margin: "0 auto", padding: "0 80px", position: "relative" }}>
          <div style={{ display: "grid", gap: 1, background: "var(--line)", border: "1px solid var(--line)" }}>
            {s.blocks.map((b, i) => (
              <Reveal key={i} delay={i * 70}><ServiceBlock b={b} /></Reveal>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

function ServiceBlock({ b }) {
  const { t } = useLang();
  const [hover, setHover] = useState(false);
  return (
    <div className="ewv-service-block ewv-hoverable"
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        background: hover ? "var(--ivory)" : "var(--paper)", padding: "56px 56px",
        display: "grid", gridTemplateColumns: "110px 1fr 1.35fr", gap: 44, alignItems: "start",
        position: "relative", transition: "background 240ms",
      }}>
      <span aria-hidden className="ewv-hair" style={{
        position: "absolute", left: 0, top: 0, bottom: 0, width: 2, height: "auto",
        background: "var(--gold)", transformOrigin: "top",
        transform: hover ? "scaleY(1)" : "scaleY(0)", transition: "transform 360ms cubic-bezier(.2,.7,.2,1)",
      }} />
      <div className="serif mono-num" style={{ fontSize: 34, color: "var(--gold)", lineHeight: 1, letterSpacing: "0.04em", fontStyle: "italic" }}>{b.k}</div>
      <div>
        <h3 className="serif" style={{ fontSize: "clamp(26px, 2.9vw, 40px)", lineHeight: 1.06, margin: "0 0 16px", fontWeight: 500, letterSpacing: 0, color: "var(--text-strong)" }}>{b.name}</h3>
        <p style={{ fontSize: 15.5, lineHeight: 1.66, color: "var(--text-mute)", margin: 0, maxWidth: 340 }}>{b.d}</p>
        <div style={{ marginTop: 22, fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--gold)", fontWeight: 600,
          opacity: hover ? 1 : 0, transform: hover ? "translateX(0)" : "translateX(-6px)", transition: "opacity 240ms, transform 240ms" }}>{t.cta.engage} →</div>
      </div>
      <ul className="ewv-service-items" style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gridTemplateColumns: "1fr 1fr", gap: "14px 32px" }}>
        {b.items.map((it, j) => (
          <li key={j} style={{ fontSize: 15, color: "var(--text)", paddingLeft: 22, position: "relative", lineHeight: 1.45 }}>
            <span style={{ position: "absolute", left: 0, top: "0.62em", width: 12, height: 1, background: "var(--gold)" }} />
            {it}
          </li>
        ))}
      </ul>
    </div>
  );
}

// ───────────────────────── ASIAN MARKET ─────────────────────────
function AsianPage() {
  const { t, lang } = useLang();
  const a = t.asian;
  return (
    <div>
      <PageHeader eyebrow={a.eyebrow} title={a.title} lead={a.lead}
        bg={IMG.asianHero} bgPos="center" overlay="soft" />
      <ChannelsBlock body={a.body} channels={a.channels} foot={a.foot}
        sideImg={IMG.asianSide} sidePos="center"
        sideLabel={lang === "zh" ? "文化在场 · Cultural fluency" : "Cultural fluency · 文化在场"}
        sideSub={lang === "zh" ? "春节 · 中秋 · 社区节庆" : "Lunar New Year · Mid-Autumn · festivals"} />
    </div>
  );
}

// ───────────────────────── WESTERN MARKET ─────────────────────────
function WesternPage() {
  const { t, lang } = useLang();
  const w = t.western;
  return (
    <div>
      <PageHeader eyebrow={w.eyebrow} title={w.title} lead={w.lead} dark
        bg={IMG.westernHero} bgPos="center 60%" overlay="minimal" />
      <ChannelsBlock body={w.body} channels={w.channels} foot={null} dark atmos={IMG.westernAtmos}
        sideImg={IMG.westernSide} sidePos="center 40%"
        sideLabel={lang === "zh" ? "可信存在 · Credible presence" : "Credible presence · 可信存在"}
        sideSub={lang === "zh" ? "网站 · SEO · 搜索广告 · 社交内容" : "Web · SEO · paid search · social"} />
    </div>
  );
}

function ChannelsBlock({ body, channels, foot, sideImg, sidePos, sideLabel, sideSub, dark = false, atmos }) {
  const { lang } = useLang();
  const atmosRef = useParallax(22);
  const cols = channels.length >= 5 ? 5 : 4;
  const fg = dark ? "var(--ivory)" : "var(--text-strong)";
  const mute = dark ? "rgba(245,239,227,0.74)" : "var(--text-mute)";
  const eyebrowC = dark ? "var(--gold)" : "var(--rust)";
  const gridBorder = dark ? "rgba(245,239,227,0.16)" : "var(--line)";
  return (
    <section className="ewv-section-pad" style={{
      background: dark ? "var(--navy)" : "var(--paper)", color: fg,
      padding: "104px 0 140px", position: "relative", overflow: "hidden",
    }}>
      {dark && atmos && (
        <React.Fragment>
          <div aria-hidden ref={atmosRef} style={{
            position: "absolute", left: 0, right: 0, bottom: "-10%", height: "52%",
            backgroundImage: `url('${atmos}')`, backgroundSize: "cover", backgroundPosition: "center 60%", backgroundRepeat: "no-repeat",
            opacity: 0.22, filter: GRADE, willChange: "transform",
            maskImage: "linear-gradient(180deg, transparent 0%, black 40%, black 100%)",
            WebkitMaskImage: "linear-gradient(180deg, transparent 0%, black 40%, black 100%)",
          }} />
          <div aria-hidden style={{ position: "absolute", right: "-8%", top: "-8%", width: "52%", height: "55%", background: "radial-gradient(circle at 70% 30%, rgba(183,163,109,0.14) 0%, rgba(183,163,109,0) 60%)", pointerEvents: "none" }} />
        </React.Fragment>
      )}
      <div className="ewv-container" style={{ maxWidth: 1440, margin: "0 auto", padding: "0 80px", position: "relative" }}>
        <div className="ewv-channel-intro" style={{ display: "grid", gridTemplateColumns: "1.3fr 0.9fr", gap: 80, alignItems: "center", paddingBottom: 76 }}>
          <Reveal>
            <div>
              <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 22 }}>
                <DrawLine width={24} color={eyebrowC} />
                <SectionEyebrow color={eyebrowC}>{lang === "zh" ? `共 ${channels.length} 条渠道` : `${channels.length} Channels`}</SectionEyebrow>
              </div>
              <p className="serif" style={{ fontSize: "clamp(24px, 2.7vw, 36px)", lineHeight: 1.34, margin: 0, maxWidth: 600, color: fg, fontWeight: 400 }}>{body}</p>
            </div>
          </Reveal>
          <Reveal delay={140}>
            <FigureImage src={sideImg} pos={sidePos} ratio="5/4" className="ewv-channel-side" label={sideLabel} sub={sideSub} />
          </Reveal>
        </div>

        <div className="ewv-channel-grid" style={{ display: "grid", gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: 1, background: gridBorder, border: `1px solid ${gridBorder}` }}>
          {channels.map((c, i) => (
            <Reveal key={i} delay={i * 60}><ChannelCard c={c} total={channels.length} dark={dark} /></Reveal>
          ))}
        </div>

        {foot && (
          <Reveal delay={200}>
            <div style={{ marginTop: 56, display: "flex", gap: 22, maxWidth: 760 }}>
              <div style={{ width: 2, background: "var(--gold)", flexShrink: 0 }} />
              <p className="serif" style={{ margin: 0, fontSize: 22, lineHeight: 1.5, fontStyle: "italic", color: fg }}>{quote(foot, lang)}</p>
            </div>
          </Reveal>
        )}
      </div>
    </section>
  );
}

function ChannelCard({ c, total, dark }) {
  const [hover, setHover] = useState(false);
  const cardBg = dark ? (hover ? "rgba(110,131,125,0.12)" : "rgba(26,32,36,0.92)") : (hover ? "var(--ivory)" : "var(--paper)");
  const fg = dark ? "var(--ivory)" : "var(--text-strong)";
  const mute = dark ? "rgba(245,239,227,0.72)" : "var(--text-mute)";
  return (
    <div className="ewv-channel-card ewv-hoverable"
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ background: cardBg, padding: "40px 32px 44px", minHeight: 296, display: "flex", flexDirection: "column", position: "relative", overflow: "hidden", transition: "background 240ms" }}>
      <span aria-hidden className="ewv-hair" style={{ position: "absolute", left: 0, right: 0, top: 0, height: 2, background: "var(--gold)" }} />
      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 26 }}>
        <div className="serif mono-num" style={{ fontSize: 26, color: "var(--gold)", lineHeight: 1, fontStyle: "italic" }}>{c.n}</div>
        <div className="mono-num" style={{ fontSize: 11, color: dark ? "rgba(245,239,227,0.5)" : "var(--text-light)", letterSpacing: "0.12em" }}>/ 0{total}</div>
      </div>
      <h3 className="serif" style={{ fontSize: "clamp(20px, 2vw, 26px)", lineHeight: 1.2, margin: "0 0 14px", fontWeight: 500, color: fg, letterSpacing: 0 }}>{c.t}</h3>
      <p style={{ fontSize: 14, lineHeight: 1.62, color: mute, margin: 0 }}>{c.d}</p>
      <div style={{ marginTop: "auto", paddingTop: 24, fontSize: 16, color: hover ? "var(--gold)" : (dark ? "rgba(245,239,227,0.5)" : "var(--text-light)"), transform: hover ? "translateX(4px)" : "translateX(0)", transition: "color 220ms, transform 220ms" }}>→</div>
    </div>
  );
}

// ───────────────────────── CASES ─────────────────────────
function CasesPage() {
  const { t } = useLang();
  const c = t.cases;
  return (
    <div>
      <PageHeader eyebrow={c.eyebrow} title={c.title} lead={c.lead}
        bg={IMG.casesHero} bgPos="center 46%" overlay="soft" />
      <section className="ewv-section-pad" style={{ background: "var(--paper)", padding: "92px 0 140px" }}>
        <div className="ewv-container" style={{ maxWidth: 1440, margin: "0 auto", padding: "0 80px" }}>
          <div style={{ display: "grid", gap: 1, background: "var(--line)", border: "1px solid var(--line)" }}>
            {c.list.map((item, i) => (
              <Reveal key={i} delay={i * 70}><CaseListRow c={item} idx={i} total={c.list.length} /></Reveal>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

function CaseListRow({ c, idx, total }) {
  const { t } = useLang();
  const [hover, setHover] = useState(false);
  const img = IMG.caseRow[idx % IMG.caseRow.length];
  return (
    <div className="ewv-case-row ewv-hoverable"
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ background: hover ? "var(--ivory)" : "var(--paper)", padding: 0, display: "grid", gridTemplateColumns: "320px 1fr", gap: 56, alignItems: "center", transition: "background 240ms", cursor: "pointer" }}>
      <div className="ewv-case-row-image" style={{ width: 320, height: 224, position: "relative", overflow: "hidden", background: "var(--navy)" }}>
        <div style={{ position: "absolute", inset: 0, backgroundImage: `url('${img}')`, backgroundSize: "cover", backgroundPosition: "center", backgroundRepeat: "no-repeat", filter: GRADE, transform: hover ? "scale(1.05)" : "scale(1)", transition: "transform 1100ms cubic-bezier(.2,.7,.2,1)" }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(135deg, rgba(17,22,26,0.12) 0%, rgba(17,22,26,0.42) 100%)" }} />
        <div className="serif mono-num" style={{ position: "absolute", right: 16, bottom: 6, fontSize: 60, lineHeight: 1, color: "rgba(255,255,255,0.92)", fontStyle: "italic", textShadow: "0 2px 12px rgba(0,0,0,0.4)" }}>0{idx + 1}</div>
        <div className="mono-num" style={{ position: "absolute", left: 16, top: 16, fontSize: 9, letterSpacing: "0.22em", textTransform: "uppercase", color: "rgba(255,255,255,0.95)", padding: "5px 9px", border: "1px solid rgba(255,255,255,0.5)", background: "rgba(17,22,26,0.2)", backdropFilter: "blur(4px)" }}>{c.sector}</div>
      </div>
      <div className="ewv-case-row-body" style={{ paddingRight: 48 }}>
        <h3 className="serif" style={{ fontSize: "clamp(24px, 2.6vw, 34px)", lineHeight: 1.12, margin: "0 0 14px", fontWeight: 500, color: "var(--text-strong)", letterSpacing: 0 }}>{c.t}</h3>
        <p style={{ fontSize: 15, lineHeight: 1.62, color: "var(--text-mute)", margin: "0 0 22px", maxWidth: 560 }}>{c.d}</p>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24, flexWrap: "wrap" }}>
          <div style={{ display: "flex", gap: 22, flexWrap: "wrap" }}>
            {c.k.map((k, j) => (
              <div key={j} style={{ fontSize: 12, letterSpacing: "0.04em", color: j === 0 ? "var(--gold)" : "var(--text-mute)", fontWeight: j === 0 ? 700 : 500, whiteSpace: "nowrap" }}>{k}</div>
            ))}
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 10, color: hover ? "var(--gold)" : "var(--text-light)", transition: "color 220ms" }}>
            <span style={{ fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", opacity: hover ? 1 : 0, transition: "opacity 220ms" }}>{t.cta.learn}</span>
            <span style={{ fontSize: 18, transform: hover ? "translateX(6px)" : "none", transition: "transform 220ms" }}>→</span>
          </div>
        </div>
      </div>
    </div>
  );
}

// ───────────────────────── COMMUNITY ─────────────────────────
function CommunityPage() {
  const { t } = useLang();
  const cm = t.community;
  return (
    <div>
      <PageHeader eyebrow={cm.eyebrow} title={cm.title} lead={cm.lead} dark
        bg={IMG.communityHero} bgPos="center 50%" overlay="minimal" />
      <section className="ewv-section-pad" style={{ background: "var(--paper)", color: "var(--text)", padding: "92px 0 140px" }}>
        <div className="ewv-container" style={{ maxWidth: 1440, margin: "0 auto", padding: "0 80px" }}>
          <Reveal>
            <p className="serif" style={{ fontSize: "clamp(23px, 2.5vw, 33px)", lineHeight: 1.42, maxWidth: 860, color: "var(--text-strong)", margin: "0 0 80px", fontWeight: 400 }}>{cm.body}</p>
          </Reveal>
          <div className="ewv-community-stats" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 48, paddingBottom: 76, borderBottom: "1px solid var(--line)" }}>
            {t.home.impactStats.map((s, i) => (
              <Reveal key={i} delay={i * 110}>
                <div>
                  <NumberDisplay value={s.n} />
                  <div style={{ marginTop: 16, fontSize: 13, lineHeight: 1.45, color: "var(--text-mute)", letterSpacing: "0.03em", maxWidth: 220 }}>{s.l}</div>
                </div>
              </Reveal>
            ))}
          </div>
          <div style={{ marginTop: 84 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 34 }}>
              <DrawLine width={24} color="var(--rust)" />
              <SectionEyebrow color="var(--rust)">{t.community.eyebrow === "社区资产" ? "旗舰活动 · Flagship events" : "Flagship events · 旗舰活动"}</SectionEyebrow>
            </div>
            <div style={{ display: "grid", gap: 1, background: "var(--line)", border: "1px solid var(--line)" }}>
              {cm.events.map((ev, i) => (
                <Reveal key={i} delay={i * 50}><EventRow label={ev} idx={i} img={IMG.communityEvent[i % IMG.communityEvent.length]} /></Reveal>
              ))}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function EventRow({ label, idx, img }) {
  const [hover, setHover] = useState(false);
  return (
    <div className="ewv-event-row ewv-hoverable"
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ display: "grid", gridTemplateColumns: "180px 1fr", gap: 36, alignItems: "stretch", background: hover ? "var(--ivory)" : "var(--paper)", transition: "background 220ms", cursor: "pointer" }}>
      <div className="ewv-event-thumb" style={{ width: 180, height: 122, position: "relative", overflow: "hidden", background: "var(--navy)" }}>
        <div style={{ position: "absolute", inset: 0, backgroundImage: `url('${img}')`, backgroundSize: "cover", backgroundPosition: "center", backgroundRepeat: "no-repeat", filter: GRADE, transform: hover ? "scale(1.06)" : "scale(1)", transition: "transform 900ms cubic-bezier(.2,.7,.2,1)" }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(135deg, rgba(17,22,26,0.08) 0%, rgba(17,22,26,0.36) 100%)" }} />
      </div>
      <div className="ewv-event-body" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 28, padding: "0 36px 0 0" }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: 24 }}>
          <div className="serif mono-num" style={{ fontSize: 16, color: "var(--gold)", letterSpacing: "0.06em" }}>0{idx + 1}</div>
          <h3 className="serif" style={{ fontSize: "clamp(21px, 2.3vw, 30px)", lineHeight: 1.14, margin: 0, fontWeight: 500, color: "var(--text-strong)", letterSpacing: 0 }}>{label}</h3>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 28 }}>
          <div className="ewv-event-cadence" style={{ fontSize: 12, letterSpacing: "0.08em", color: "var(--text-mute)", textTransform: "uppercase", whiteSpace: "nowrap" }}>Annual · 每年</div>
          <div style={{ fontSize: 17, color: hover ? "var(--gold)" : "var(--text-light)", transform: hover ? "translateX(4px)" : "none", transition: "all 220ms" }}>→</div>
        </div>
      </div>
    </div>
  );
}

// ───────────────────────── CONTACT ─────────────────────────
function ContactPage() {
  const { t, lang } = useLang();
  const c = t.contact;
  const [sent, setSent] = useState(false);
  const panelRef = useParallax(20);
  return (
    <div>
      <PageHeader eyebrow={c.eyebrow} title={c.title} lead={c.lead}
        bg={IMG.contactHero} bgPos="center 58%" overlay="soft" />
      <section style={{ background: "var(--paper)", padding: "92px 0 140px" }}>
        <div className="ewv-container" style={{ maxWidth: 1440, margin: "0 auto", padding: "0 80px" }}>
          <div className="ewv-contact-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 96, alignItems: "start" }}>
            <Reveal>
              <div>
                <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 32 }}>
                  <DrawLine width={22} color="var(--rust)" />
                  <SectionEyebrow color="var(--rust)">{lang === "zh" ? "直接联系 · Direct channels" : "Direct channels · 直接联系"}</SectionEyebrow>
                </div>
                <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 0 }}>
                  {c.channels.map((ch, i) => (
                    <li key={i} className="ewv-contact-channel-row" style={{ display: "grid", gridTemplateColumns: "120px 1fr", padding: "24px 0", alignItems: "baseline", borderBottom: i === c.channels.length - 1 ? "none" : "1px solid var(--line)" }}>
                      <div style={{ fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--text-mute)" }}>{ch.k}</div>
                      <div className="serif" style={{ fontSize: 22, color: "var(--text-strong)", fontWeight: 500, letterSpacing: 0 }}>{ch.v}</div>
                    </li>
                  ))}
                </ul>
                <div className="ewv-contact-panel" style={{ marginTop: 48, position: "relative", overflow: "hidden", background: "var(--navy)", color: "var(--ivory)", minHeight: 220, display: "flex", flexDirection: "column", justifyContent: "flex-end", padding: "36px 36px 32px" }}>
                  <div aria-hidden ref={panelRef} style={{ position: "absolute", left: 0, right: 0, top: "-12%", height: "124%", backgroundImage: `url('${IMG.contactSide}')`, backgroundSize: "cover", backgroundPosition: "center", backgroundRepeat: "no-repeat", opacity: 0.46, filter: GRADE, willChange: "transform" }} />
                  <div aria-hidden style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(17,22,26,0.44) 0%, rgba(17,22,26,0.84) 100%)" }} />
                  <div style={{ position: "relative" }}>
                    <SectionEyebrow color="var(--gold)">{lang === "zh" ? "工作时间 · Office hours" : "Office hours · 工作时间"}</SectionEyebrow>
                    <div className="serif" style={{ fontSize: 24, marginTop: 14, lineHeight: 1.35 }}>{lang === "zh" ? "周一至周五 · 9:00 — 18:00 (PT)" : "Mon–Fri · 9:00 — 18:00 (PT)"}</div>
                    <div style={{ fontSize: 14, color: "rgba(245,239,227,0.78)", marginTop: 8 }}>{lang === "zh" ? "一个工作日内回复" : "Replies within one business day · 一个工作日内回复"}</div>
                  </div>
                </div>
              </div>
            </Reveal>
            <Reveal delay={120}>
              <form className="ewv-contact-form" onSubmit={(e) => { e.preventDefault(); setSent(true); }}
                style={{ background: "var(--ivory)", padding: 48, border: "1px solid var(--line)", position: "relative" }}>
                <div style={{ marginBottom: 36 }}>
                  <SectionEyebrow color="var(--rust)">{lang === "zh" ? "开始对话 · Start a conversation" : "Start a conversation · 开始对话"}</SectionEyebrow>
                </div>
                <div className="ewv-form-pair" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 28, marginBottom: 28 }}>
                  <FormField label={c.formName} type="text" />
                  <FormField label={c.formCompany} type="text" />
                </div>
                <div style={{ marginBottom: 28 }}><FormField label={c.formEmail} type="email" /></div>
                <FormField label={c.formMessage} type="textarea" />
                <div className="ewv-form-submit-row" style={{ marginTop: 36, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <div style={{ fontSize: 12, color: "var(--text-mute)" }}>
                    {sent ? <span style={{ color: "var(--gold)", fontWeight: 600 }}>✓ {c.formSent}</span> : "—"}
                  </div>
                  <button className="ewv-form-submit-button" type="submit" style={{ padding: "16px 28px", fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase", background: "var(--navy)", color: "var(--ivory)", fontWeight: 600, border: "1px solid var(--navy)" }}>{c.formSubmit} →</button>
                </div>
              </form>
            </Reveal>
          </div>
        </div>
      </section>
    </div>
  );
}

function FormField({ label, type }) {
  const [focus, setFocus] = useState(false);
  const [val, setVal] = useState("");
  const sty = {
    width: "100%", padding: "12px 0", background: "transparent", border: "none",
    borderBottom: `1px solid ${focus ? "var(--navy)" : "var(--line)"}`,
    fontSize: 16, color: "var(--text-strong)", fontFamily: "inherit", outline: "none", transition: "border-color 200ms",
  };
  return (
    <label style={{ display: "block" }}>
      <div style={{ fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--text-mute)", marginBottom: 6 }}>{label}</div>
      {type === "textarea"
        ? <textarea rows={4} value={val} onChange={e => setVal(e.target.value)} onFocus={() => setFocus(true)} onBlur={() => setFocus(false)} style={{ ...sty, resize: "vertical" }} />
        : <input type={type} value={val} onChange={e => setVal(e.target.value)} onFocus={() => setFocus(true)} onBlur={() => setFocus(false)} style={sty} />}
    </label>
  );
}

Object.assign(window, {
  AboutPage, ServicesPage, AsianPage, WesternPage, CasesPage, CommunityPage, ContactPage,
});