// Direction A — Editorial (polished, primary)
// Adds: filter chips, "Now" section, refined hover preview,
// optional Tweaks panel (accent color + hero variant + show Now)
// Exports window.EditorialDirection

(function() {
  const { useState, useEffect, useRef, useMemo } = React;
  const { ProjectMock, BrandMark, LangSwitch, ThemeSwitch, useHoverPreview, usePortfolioState } = window.PFC;
  const D = window.PF_DATA;

  const EDITORIAL_DEFAULTS = /*EDITMODE-BEGIN*/{
    "accentColor": "#0052FF",
    "heroVariant": "statement",
    "showNow": true
  }/*EDITMODE-END*/;

  function EditorialDirection({ compareUrl = null, standaloneUrl = null }) {
    const { lang, setLang, theme, setTheme } = usePortfolioState();
    const t = (obj) => obj?.[lang] ?? obj;
    const { bind, Preview } = useHoverPreview({ rich: true, t });
    const [emailCopied, setEmailCopied] = useState(false);
    const [activeFilter, setActiveFilter] = useState("all");
    const [openJob, setOpenJob] = useState(null);

    // Tweaks (optional — only mounts when host activates)
    const [tweakValues, setTweak] = (window.useTweaks ? window.useTweaks(EDITORIAL_DEFAULTS) : [EDITORIAL_DEFAULTS, () => {}]);

    // Apply accent override
    useEffect(() => {
      const root = document.documentElement;
      if (tweakValues.accentColor && tweakValues.accentColor !== "#0052FF") {
        root.style.setProperty("--pf-accent", tweakValues.accentColor);
        root.style.setProperty("--pf-accent-soft", hexToRgba(tweakValues.accentColor, 0.10));
      } else {
        root.style.removeProperty("--pf-accent");
        root.style.removeProperty("--pf-accent-soft");
      }
    }, [tweakValues.accentColor]);

    const copyEmail = () => {
      navigator.clipboard?.writeText(D.identity.email);
      setEmailCopied(true);
      setTimeout(() => setEmailCopied(false), 1500);
    };

    // Filter categories derived from project tags
    const categories = [
      { id: "all", label: { vi: "Tất cả", en: "All" } },
      { id: "Fintech", label: { vi: "Fintech", en: "Fintech" } },
      { id: "EdTech", label: { vi: "EdTech", en: "EdTech" } },
      { id: "AI", label: { vi: "AI", en: "AI" } },
      { id: "Design System", label: { vi: "Design System", en: "Design System" } },
    ];
    const counts = useMemo(() => {
      const map = { all: D.projects.length };
      categories.forEach(c => { if (c.id !== "all") map[c.id] = D.projects.filter(p => p.tags.includes(c.id)).length; });
      return map;
    }, []);
    const filteredProjects = activeFilter === "all"
      ? D.projects
      : D.projects.filter(p => p.tags.includes(activeFilter));

    return (
      <div className="pf-root pf-editorial" data-theme={theme} style={{ "--pf-pad": "64px" }}>
        {/* ── Top bar ─────────────────────────── */}
        <header className="pf-topbar" style={{ padding: "24px 64px" }}>
          <div className="pf-topbar-brand">
            <BrandMark />
            <span>Han Viet Anh</span>
            <span style={{ marginLeft: 8, color: "var(--pf-text-2)", fontWeight: 400 }}>— {t(D.identity.role)}</span>
          </div>
          <nav className="pf-nav">
            <a href="#work">{t(D.ui.nav.work)}</a>
            <a href="#about">{t(D.ui.nav.about)}</a>
            <a href="#process">{t(D.ui.nav.process)}</a>
            <a href="#contact">{t(D.ui.nav.contact)}</a>
          </nav>
          <div className="pf-toolbar">
            <a href="https://drive.google.com/file/d/1Pinq8K7oT7JSfnkFWBOcqlgZhZIVHJAZ/view?usp=sharing" target="_blank" rel="noopener" className="pf-chip pf-chip--cv" style={{ textDecoration: "none" }}>
              <i className="ph ph-file-text" style={{ fontSize: 14 }}></i>
              <span className="pf-chip-label">{lang === "vi" ? "Xem CV" : "View CV"}</span>
            </a>
            <LangSwitch lang={lang} setLang={setLang} />
            <ThemeSwitch theme={theme} setTheme={setTheme} />
            {compareUrl && (
              <a href={compareUrl} target="_top" className="pf-iconbtn" title={lang === "vi" ? "So sánh 3 hướng" : "Compare directions"}>
                <i className="ph ph-grid-four"></i>
              </a>
            )}
            {standaloneUrl && (
              <a href={standaloneUrl} target="_top" className="pf-iconbtn" title={lang === "vi" ? "Mở trang đầy đủ" : "Open standalone"} style={{ background: "var(--pf-accent)", borderColor: "var(--pf-accent)", color: "white" }}>
                <i className="ph ph-arrow-up-right"></i>
              </a>
            )}
          </div>
        </header>

        {/* ── HERO ────────────────────────────── */}
        <section style={{ padding: "112px 64px 72px", borderBottom: "1px solid var(--pf-line)", position: "relative", overflow: "hidden" }}>
          <div className="pf-hero-three-lane">
            <div id="pf-hero-3d-mount" className="pf-hero-three" aria-hidden="true"></div>
          </div>
          <div className="pf-scanlines" aria-hidden="true"></div>
          <div className="pf-glitch pf-hero-copy" style={{ position: "relative", zIndex: 2, animation: "pf-rise 700ms cubic-bezier(0.25,0.1,0.25,1) 80ms both" }}>
            <div className="pf-glitch-layer pf-glitch-layer--a" aria-hidden="true"><HeroHeadline variant={tweakValues.heroVariant} lang={lang} /></div>
            <div className="pf-glitch-layer pf-glitch-layer--b" aria-hidden="true"><HeroHeadline variant={tweakValues.heroVariant} lang={lang} /></div>
            <HeroHeadline variant={tweakValues.heroVariant} lang={lang} />
          </div>

          <div className="pf-hero-meta" style={{
            display: "grid",
            gridTemplateColumns: "1.2fr 1fr auto",
            gap: 48,
            marginTop: 56,
            alignItems: "start",
            position: "relative", zIndex: 2,
            animation: "pf-rise 700ms cubic-bezier(0.25,0.1,0.25,1) 220ms both",
          }}>
            <p style={{ fontSize: 20, lineHeight: 1.45, color: "var(--pf-text)", maxWidth: 560, margin: 0 }}>
              {t(D.identity.bio_long)}
            </p>
            <div>
              <div className="pf-kicker" style={{ marginBottom: 12 }}>{lang === "vi" ? "Hiện tại" : "Currently"}</div>
              <div style={{ fontSize: 18, fontWeight: 600 }}>ATX · Finpath</div>
              <div style={{ fontSize: 14, color: "var(--pf-text-2)", marginTop: 4 }}>
                {lang === "vi" ? "Product Design Lead & Project Manager · 07/2021–nay" : "Product Design Lead & Project Manager · 07/2021–now"}
              </div>
            </div>
            <HeroBadge lang={lang} />
          </div>
        </section>

        {/* ── Marquee ─────────────────────────── */}
        <section style={{ borderBottom: "1px solid var(--pf-line)", overflow: "hidden", padding: "28px 0" }}>
          <div className="pf-marquee">
            {[...D.projects, ...D.projects].map((p, i) => (
              <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 22, padding: "0 22px", fontFamily: "var(--font-title)", fontSize: 32, fontWeight: 600, letterSpacing: "-0.02em" }}>
                {p.name}
                <span style={{ width: 8, height: 8, borderRadius: 9999, background: p.hue }}></span>
              </span>
            ))}
          </div>
        </section>

        {/* ── Selected Work ─── */}
        <section id="work" style={{ padding: "120px 64px" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 40 }}>
            <div>
              <span className="pf-kicker">§ 01</span>
              <h2 style={{ marginTop: 18, fontSize: 64, lineHeight: 1.05, letterSpacing: "-0.03em", fontWeight: 700 }}>
                {t(D.ui.sections.selected)}
              </h2>
            </div>
            <span className="pf-mono" style={{ fontSize: 12, color: "var(--pf-text-2)" }}>
              {lang === "vi" ? "DI CHUỘT ĐỂ XEM TRƯỚC" : "HOVER TO PREVIEW"}
            </span>
          </div>

          {/* Filter chips */}
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 24 }}>
            {categories.map(c => {
              const isActive = activeFilter === c.id;
              const count = counts[c.id] ?? 0;
              if (count === 0) return null;
              return (
                <button
                  key={c.id}
                  onClick={() => setActiveFilter(c.id)}
                  className="pf-filter-chip"
                  data-active={isActive}
                >
                  {t(c.label)}
                  <span className="pf-filter-count">{String(count).padStart(2,'0')}</span>
                </button>
              );
            })}
          </div>

          <ul className="pf-work-list" style={{ listStyle: "none", padding: 0, margin: 0, borderTop: "1px solid var(--pf-line)" }}>
            {filteredProjects.map((p) => (
              <li key={p.slug} {...bind(p)} className="pf-row pf-row--editorial">
                <a className="pf-row-link" href={p.slug === "atx" ? "case-study-atx.html" : `case-study.html?slug=${p.slug}`} style={{
                  display: "grid",
                  gridTemplateColumns: "60px 1.6fr 1.4fr 0.6fr 0.6fr",
                  alignItems: "center",
                  gap: 32,
                  padding: "32px 0",
                  borderBottom: "1px solid var(--pf-line)",
                  position: "relative",
                  transition: "padding 220ms cubic-bezier(0.25,0.1,0.25,1)",
                }}>
                  <span className="pf-mono" style={{ fontSize: 14, color: "var(--pf-text-2)" }}>{p.idx}</span>
                  <h3 style={{ fontFamily: "var(--font-title)", fontSize: 56, lineHeight: 1, letterSpacing: "-0.03em", fontWeight: 600, margin: 0, transition: "transform 220ms cubic-bezier(0.25,0.1,0.25,1), color 200ms ease" }}>
                    {p.name}
                  </h3>
                  <span style={{ color: "var(--pf-text-2)", fontSize: 15 }}>{t(p.role)} · {p.company}</span>
                  <span className="pf-mono" style={{ fontSize: 12, color: "var(--pf-text-2)", display: "flex", flexWrap: "wrap", gap: 6 }}>
                    {p.tags.slice(0,2).map(tag => <span key={tag} style={{ border: "1px solid var(--pf-line)", padding: "3px 8px", borderRadius: 9999 }}>{tag}</span>)}
                  </span>
                  <span className="pf-mono" style={{ fontSize: 14, color: "var(--pf-text-2)", textAlign: "right" }}>
                    {p.year_short} <i className="ph ph-arrow-up-right" style={{ marginLeft: 6 }}></i>
                  </span>
                </a>
              </li>
            ))}
          </ul>
          {filteredProjects.length === 0 && (
            <div style={{ padding: "64px 0", textAlign: "center", color: "var(--pf-text-2)" }}>
              {lang === "vi" ? "Không có dự án nào trong danh mục này." : "No projects in this category."}
            </div>
          )}
        </section>

        {/* ── NOW ─────────────────────────── */}
        {tweakValues.showNow && <NowSection lang={lang} t={t} />}

        {/* ── About ─────────────────────────── */}
        <section id="about" style={{ padding: "120px 64px", borderTop: "1px solid var(--pf-line)" }}>
          <span className="pf-kicker">§ 03 — {t(D.ui.sections.about)}</span>
          <div className="pf-about-grid" style={{ marginTop: 64 }}>
            <div style={{ position: "sticky", top: 120 }}>
              <div style={{
                aspectRatio: "4/5", borderRadius: 12,
                background: "transparent", border: "0",
                position: "relative", overflow: "hidden",
              }}>
                <div id="pf-about-3d-mount" className="pf-about-three" aria-hidden="true" style={{ position: "absolute", inset: 0 }}></div>
                <div className="pf-mono" style={{ position: "absolute", bottom: 16, left: 16, right: 16, display: "flex", justifyContent: "space-between", color: "var(--pf-text-2)", fontSize: 11, letterSpacing: "0.12em", pointerEvents: "none" }}>
                  <span>HÀ NỘI</span><span>EST. 1998</span>
                </div>
              </div>
              <div style={{ marginTop: 24, display: "flex", flexDirection: "column", gap: 8, fontSize: 14 }}>
                <Stat label={lang==="vi"?"Kinh nghiệm":"Experience"} value={lang==="vi"?"6+ năm · 5 năm fintech":"6+ yrs · 5 in fintech"} />
                <Stat label="ATX" value={lang==="vi"?"2M+ user · 700K MAU":"2M+ users · 700K MAU"} />
                <Stat label="Finpath" value={lang==="vi"?"150K user · 65K MAU":"150K users · 65K MAU"} />
                <Stat label={lang==="vi"?"Đang điều phối":"Teams coordinated"} value={lang==="vi"?"3 team":"3 teams"} />
                <Stat label={lang==="vi"?"Học vấn":"Education"} value="GPA 3.62 · ĐH GTVT" />
              </div>
            </div>
            <div>
              <h2 style={{ fontFamily: "var(--font-title)", fontSize: 56, lineHeight: 1.08, letterSpacing: "-0.025em", fontWeight: 600, margin: 0, textWrap: "balance" }}>
                {lang === "vi"
                  ? <>Tôi đơn giản hoá những <em style={{ fontStyle: "italic", color: "var(--pf-accent)" }}>hành trình tài chính</em> phức tạp — cho người mới lẫn nhà đầu tư kỳ cựu.</>
                  : <>I simplify complex <em style={{ fontStyle: "italic", color: "var(--pf-accent)" }}>financial journeys</em> — for first-timers and seasoned investors alike.</>}
              </h2>
              <div style={{ marginTop: 48, fontSize: 17, lineHeight: 1.6, color: "var(--pf-text-2)", display: "flex", flexDirection: "column", gap: 18, maxWidth: 620, textWrap: "pretty" }}>
                {lang === "vi" ? (
                  <>
                    <p style={{ margin: 0 }}>6+ năm làm product design, trong đó 5 năm chuyên sâu fintech. Thế mạnh của tôi là đọc được tâm lý nhà đầu tư — từ người lần đầu nạp tiền đến người đã quen thị trường nhiều năm — rồi biến những luồng tài chính rối rắm thành thao tác đơn giản.</p>
                    <p style={{ margin: 0 }}>Tại ATX &amp; Finpath, tôi giữ toàn quyền quyết định thiết kế: bóc tách yêu cầu từ ban lãnh đạo thành tài liệu sản phẩm, dựng Information Architecture, User Journey, UI và Design System, rồi kiểm thử và chịu trách nhiệm chất lượng đầu ra. Song song là vai trò quản lý dự án — điều phối kỹ thuật, marketing và ba nhóm Data, Interface, Integration để giữ tiến độ phát hành.</p>
                    <p style={{ margin: 0 }}>Từ 2023 tôi tập trung vào thiết kế trải nghiệm AI: định hình luồng tương tác cho News, Chat Bot và Chart, viết chiến lược prompt, xây cơ sở tri thức cho AI và tối ưu chi phí vận hành LLM. AI cũng nằm trong quy trình làm việc của tôi — thời gian từ ý tưởng đến bản thiết kế rút từ vài ngày xuống vài giờ.</p>
                    <p style={{ margin: 0 }}>Trước đó là EdTech tại Topica và agency UI/UX tại Onteractive — nơi tôi học cách làm việc trực tiếp với khách hàng, nghiên cứu người dùng và hướng dẫn nhân sự mới.</p>
                  </>
                ) : (
                  <>
                    <p style={{ margin: 0 }}>6+ years in product design, five of them deep in fintech. My core strength is reading investor psychology — from a first-timer making their first deposit to a seasoned trader — and turning tangled financial flows into simple actions.</p>
                    <p style={{ margin: 0 }}>At ATX &amp; Finpath I own design decisions end to end: turning C-level briefs into PRDs, building information architecture, user journeys, UI and the design system, then testing and owning output quality. Alongside that I run delivery — coordinating tech lead, marketing and three teams (Data, Interface, Integration) to protect release dates.</p>
                    <p style={{ margin: 0 }}>Since 2023 my focus is AI experience design: shaping the interaction flows for News, Chat Bot and Chart, writing prompt strategy, building the knowledge base and optimising LLM running cost. AI sits inside my own workflow too — idea to mockup went from days to hours.</p>
                    <p style={{ margin: 0 }}>Before that: EdTech at Topica and UI/UX agency work at Onteractive, where I learned to work directly with clients, run user research, and train juniors.</p>
                  </>
                )}
              </div>

              {/* Career line — click a row for the full CV detail */}
              <div style={{ marginTop: 56 }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                  <span className="pf-kicker">{lang === "vi" ? "Kinh nghiệm" : "Experience"}</span>
                  <span className="pf-mono" style={{ fontSize: 11, color: "var(--pf-text-3)", letterSpacing: "0.12em", textTransform: "uppercase" }}>
                    {lang === "vi" ? "Bấm để xem chi tiết" : "Click for detail"}
                  </span>
                </div>
                <ul style={{ listStyle: "none", padding: 0, margin: "24px 0 0", borderTop: "1px solid var(--pf-line)" }}>
                  {CAREER.map(job => (
                    <li key={job.id} className="pf-career-row" onClick={() => setOpenJob(job.id)} style={{ padding: "20px 0", borderBottom: "1px solid var(--pf-line)", cursor: "pointer" }}>
                      <span className="pf-mono" style={{ fontSize: 12, color: "var(--pf-text-2)" }}>{job.time[lang]}</span>
                      <div>
                        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                          <span style={{ fontSize: 18, fontWeight: 600, color: "var(--pf-text)" }}>{job.org}</span>
                          <i className="ph ph-arrow-up-right" style={{ fontSize: 13, color: "var(--pf-text-3)" }}></i>
                        </div>
                        <div style={{ fontSize: 14, color: "var(--pf-text)", marginTop: 3 }}>{job.role[lang]}</div>
                        <div style={{ fontSize: 13, color: "var(--pf-text-2)", marginTop: 3 }}>{job.note[lang]}</div>
                      </div>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </section>

        {/* ── Process ─────────────────────────── */}
        <section id="process" style={{ padding: "120px 64px", borderTop: "1px solid var(--pf-line)" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 64 }}>
            <div>
              <span className="pf-kicker">§ 04 — {t(D.ui.sections.process)}</span>
              <h2 style={{ marginTop: 18, fontSize: 64, lineHeight: 1.05, letterSpacing: "-0.03em", fontWeight: 600 }}>
                {lang === "vi" ? "Cách tôi làm việc" : "How I work"}
              </h2>
            </div>
            <span className="pf-mono" style={{ fontSize: 12, color: "var(--pf-text-2)" }}>04 / 04</span>
          </div>
          <div className="pf-process-grid" style={{ borderTop: "1px solid var(--pf-line)", paddingTop: 32 }}>
            {D.process.map(p => (
              <div key={p.idx}>
                <div className="pf-mono" style={{ fontSize: 11, color: "var(--pf-accent)", letterSpacing: "0.14em", marginBottom: 24 }}>{p.idx}</div>
                <h3 style={{ fontSize: 32, fontWeight: 600, letterSpacing: "-0.02em", margin: 0 }}>{t(p.title)}</h3>
                <p style={{ marginTop: 16, fontSize: 15, lineHeight: 1.6, color: "var(--pf-text-2)", textWrap: "pretty" }}>{t(p.body)}</p>
              </div>
            ))}
          </div>
        </section>

        {/* ── Skills + Awards ─────────────────────────── */}
        <section style={{ padding: "120px 64px", borderTop: "1px solid var(--pf-line)" }}>
          <div className="pf-skills-grid" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 96 }}>
            <div>
              <span className="pf-kicker">§ 05 — {t(D.ui.sections.skills)}</span>
              <h2 style={{ marginTop: 18, fontSize: 48, lineHeight: 1.05, letterSpacing: "-0.025em", fontWeight: 600 }}>
                {lang === "vi" ? "Bộ công cụ" : "Toolkit"}
              </h2>
              <div style={{ marginTop: 48, display: "flex", flexDirection: "column", gap: 32 }}>
                {Object.entries(D.skills).map(([group, items]) => (
                  <div key={group} style={{ borderTop: "1px solid var(--pf-line)", paddingTop: 18 }}>
                    <div className="pf-mono" style={{ fontSize: 11, color: "var(--pf-text-2)", letterSpacing: "0.14em", marginBottom: 12, textTransform: "uppercase" }}>{group}</div>
                    <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                      {items.map(it => (
                        <span key={it} style={{ padding: "8px 14px", border: "1px solid var(--pf-line)", borderRadius: 9999, fontSize: 14 }}>{it}</span>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <span className="pf-kicker">§ 06 — {lang === "vi" ? "Ghi nhận" : "Recognition"}</span>
              <h2 style={{ marginTop: 18, fontSize: 48, lineHeight: 1.05, letterSpacing: "-0.025em", fontWeight: 600 }}>
                {lang === "vi" ? "Ghi nhận & học vấn" : "Recognition & education"}
              </h2>
              <ul style={{ listStyle: "none", padding: 0, margin: "48px 0 0", borderTop: "1px solid var(--pf-line)" }}>
                {[
                  {
                    year: "2025",
                    title: { vi: "Designing Digital Product per Stage and Metric", en: "Designing Digital Product per Stage and Metric" },
                    org: "UXCamp Vietnam",
                    kind: { vi: "Chứng chỉ", en: "Certificate" },
                  },
                  {
                    year: "2024",
                    title: { vi: "Top 10 ứng dụng Fintech trên App Store Việt Nam", en: "Top 10 fintech apps on the Vietnam App Store" },
                    org: "ATX",
                    kind: { vi: "Thành tích sản phẩm", en: "Product milestone" },
                  },
                  {
                    year: "2020",
                    title: { vi: "Kỹ sư Công nghệ Thông tin — GPA 3.62, xếp loại Xuất sắc", en: "BEng Information Technology — GPA 3.62, with distinction" },
                    org: { vi: "Đại học Giao thông Vận tải", en: "University of Transport and Communications" },
                    kind: { vi: "Học vấn", en: "Education" },
                  },
                ].map((a, i) => (
                  <li key={i} style={{ display: "grid", gridTemplateColumns: "60px minmax(0,1fr)", gap: 16, padding: "20px 0", borderBottom: "1px solid var(--pf-line)", alignItems: "baseline" }}>
                    <span className="pf-mono" style={{ fontSize: 14, color: "var(--pf-text-2)" }}>{a.year}</span>
                    <div>
                      <div className="pf-mono" style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--pf-text-3)", marginBottom: 6 }}>{t(a.kind)}</div>
                      <div style={{ fontSize: 17, fontWeight: 600, lineHeight: 1.35, textWrap: "pretty" }}>{t(a.title)}</div>
                      <div style={{ fontSize: 13, color: "var(--pf-text-2)", marginTop: 3 }}>{t(a.org)}</div>
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </section>

        {/* ── Contact ─────────────────────────── */}
        <section id="contact" className="pf-footer">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
            <span className="pf-kicker" style={{ color: "rgba(255,255,255,0.6)" }}>§ 07 — {t(D.ui.sections.contact)}</span>
            <span className="pf-mono" style={{ fontSize: 12, color: "rgba(255,255,255,0.6)" }}>{lang === "vi" ? "Hộp thư mở 24/7" : "Inbox open 24/7"}</span>
          </div>

          <h2 style={{
            margin: "48px 0 0",
            fontFamily: "var(--font-title)", fontWeight: 600,
            fontSize: "clamp(52px, 8vw, 132px)",
            lineHeight: 1.04, letterSpacing: "-0.04em",
            color: "rgba(255,255,255,0.95)",
          }}>
            {lang === "vi" ? <>Có dự án?<br/>Bắt đầu <em style={{ fontStyle: "italic", color: "var(--pf-accent)" }}>cuộc trò chuyện.</em></> : <>Have a brief?<br/>Let's <em style={{ fontStyle: "italic", color: "var(--pf-accent)" }}>start talking.</em></>}
          </h2>

          <div style={{ display: "flex", flexWrap: "wrap", gap: 16, marginTop: 64, alignItems: "center" }}>
            <a href={`mailto:${D.identity.email}`} style={{
              display: "inline-flex", alignItems: "center", gap: 12,
              padding: "18px 28px", borderRadius: 9999,
              background: "var(--pf-accent)", color: "white",
              fontSize: 16, fontWeight: 600,
            }}>
              <i className="ph ph-paper-plane-tilt"></i> {D.identity.email}
            </a>
            <button onClick={copyEmail} style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              padding: "16px 22px", borderRadius: 9999,
              background: "transparent", color: "white",
              border: "1px solid rgba(255,255,255,0.25)",
              fontFamily: "inherit", fontSize: 14, fontWeight: 500, cursor: "pointer",
            }}>
              <i className={`ph ${emailCopied ? "ph-check" : "ph-copy"}`}></i>
              {emailCopied ? t(D.ui.cta.copied) : t(D.ui.cta.copy)}
            </button>
          </div>

          <div className="pf-footer-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32, marginTop: 96 }}>
            <FooterCol title={lang === "vi" ? "Mạng xã hội" : "Social"} items={[
              { label: "LinkedIn", url: `https://${D.identity.links.linkedin}` },
              { label: "Behance", url: `https://${D.identity.links.behance}` },
              { label: "Dribbble", url: `https://${D.identity.links.dribbble}` },
            ]} />
            <FooterCol title={lang === "vi" ? "Liên hệ" : "Direct"} items={[
              { label: D.identity.email, url: `mailto:${D.identity.email}` },
              { label: D.identity.phone, url: `tel:${D.identity.phone.replace(/\s/g,'')}` },
            ]} />
            <FooterCol title={lang === "vi" ? "Tài liệu" : "Resources"} items={[
              { label: lang === "vi" ? "Tải CV (PDF)" : "Download CV (PDF)", url: "https://drive.google.com/file/d/1Pinq8K7oT7JSfnkFWBOcqlgZhZIVHJAZ/view?usp=sharing" },
              { label: lang === "vi" ? "Đặt lịch gọi" : "Book a call", url: "#" },
            ]} />
          </div>

          <div className="pf-footer-bottom" style={{ marginTop: 80, paddingTop: 24, borderTop: "1px solid rgba(255,255,255,0.12)", display: "flex", justifyContent: "space-between", color: "rgba(255,255,255,0.55)", fontFamily: "var(--pf-mono)", fontSize: 12 }}>
            <span>© 2026 Han Viet Anh — All rights reserved</span>
            <span>v1.0 · {lang === "vi" ? "Cập nhật" : "Updated"} 05/2026</span>
          </div>
        </section>

        {Preview}
        <JobModal job={CAREER.find(j => j.id === openJob)} lang={lang} onClose={() => setOpenJob(null)} />

        {/* Optional Tweaks panel */}
        {window.TweaksPanel && <EditorialTweaks tweakValues={tweakValues} setTweak={setTweak} lang={lang} />}
      </div>
    );
  }

  /* ── Hero variants ───────────────────────────────────── */
  function HeroHeadline({ variant, lang }) {
    const baseStyle = {
      fontFamily: "var(--font-title)",
      fontWeight: 700,
      fontSize: "clamp(38px, 7.2vw, 150px)",
      lineHeight: 1.06,
      letterSpacing: "-0.04em",
      margin: 0,
    };
    // each designed line is an unbreakable block — never half-wraps
    const L = ({ children }) => <span style={{ display: "block", whiteSpace: "nowrap" }}>{children}</span>;
    const Em = ({ children }) => <em style={{ fontStyle: "italic", fontWeight: 500, color: "var(--pf-accent)" }}>{children}</em>;
    if (variant === "question") {
      return (
        <h1 style={baseStyle}>
          {lang === "vi" ? (
            <><L>Làm sao để</L><L><Em>1 triệu user</Em></L><L>cảm thấy được lắng nghe?</L></>
          ) : (
            <><L>How do you make</L><L><Em>a million users</Em></L><L>feel heard?</L></>
          )}
        </h1>
      );
    }
    if (variant === "metric") {
      return (
        <h1 style={baseStyle}>
          {lang === "vi" ? (
            <><L><Em>2M+ users</Em></L><L>30+ products</L><L>5+ năm fintech.</L></>
          ) : (
            <><L><Em>2M+ users</Em></L><L>30+ products</L><L>5+ years in fintech.</L></>
          )}
        </h1>
      );
    }
    // default 'statement'
    return (
      <h1 style={baseStyle}>
        {lang === "vi" ? (
          <>
            <L>Thiết kế sản phẩm</L>
            <L><Em>fintech</Em> bắt rễ từ</L>
            <L>người dùng Việt.</L>
          </>
        ) : (
          <>
            <L>Designing <Em>fintech</Em></L>
            <L>products rooted in</L>
            <L>Vietnamese users.</L>
          </>
        )}
      </h1>
    );
  }

  /* ── Hero badge — rotating circular text stamp ─────────
     Editorial device: slow-spinning type ring around an arrow that
     links down to the work list. Spins faster + inverts on hover. */
  function HeroBadge({ lang }) {
    const [hover, setHover] = React.useState(false);
    const ring = "PRODUCT DESIGN LEAD ✦ HÀ NỘI ✦ FINTECH × AI ✦ ";
    const size = 176;
    return (
      <a
        href="#work"
        className="pf-hero-badge"
        aria-label={lang === "vi" ? "Xem dự án" : "View work"}
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={{
          position: "relative",
          width: size, height: size,
          alignSelf: "center", justifySelf: "end",
          marginTop: -24,
          display: "grid", placeItems: "center",
          textDecoration: "none",
          animation: "pf-rise 700ms cubic-bezier(0.25,0.1,0.25,1) 350ms both",
        }}
      >
        <svg
          viewBox="0 0 200 200"
          width={size} height={size}
          style={{
            position: "absolute", inset: 0,
            animation: "pf-spin 22s linear infinite",
            animationDuration: hover ? "7s" : "22s",
          }}
        >
          <defs>
            <path id="pf-ring" d="M 100,100 m -78,0 a 78,78 0 1,1 156,0 a 78,78 0 1,1 -156,0" />
          </defs>
          <text style={{
            fontFamily: "var(--pf-mono)", fontSize: 12.5, fontWeight: 500,
            letterSpacing: "0.24em",
            fill: hover ? "var(--pf-accent)" : "var(--pf-text-2)",
            transition: "fill 200ms ease",
          }}>
            <textPath href="#pf-ring">{ring}</textPath>
          </text>
        </svg>
        <span style={{
          width: 74, height: 74, borderRadius: 9999,
          border: "1px solid " + (hover ? "var(--pf-accent)" : "var(--pf-line-strong)"),
          background: hover ? "var(--pf-accent)" : "transparent",
          color: hover ? "#fff" : "var(--pf-text)",
          display: "grid", placeItems: "center",
          fontSize: 26,
          transition: "all 220ms cubic-bezier(0.25,0.1,0.25,1)",
          transform: hover ? "scale(1.06)" : "scale(1)",
        }}>
          <i className="ph ph-arrow-down" style={{ transform: hover ? "rotate(-45deg)" : "none", transition: "transform 220ms cubic-bezier(0.25,0.1,0.25,1)" }}></i>
        </span>
      </a>
    );
  }

  /* ── Now section ─────────────────────────────────────── */
  function NowSection({ lang, t }) {
    const items = lang === "vi" ? [
      { kind: "Đang dẫn dắt", item: "Thiết kế sản phẩm cho ATX và Finpath — gồm các tính năng AI: News, Chat Bot, Chart", color: "var(--pf-accent)" },
      { kind: "Đang điều phối", item: "ba nhóm Data · Interface · Integration cho vòng phát hành của ATX & Finpath" },
      { kind: "Đang xây", item: "Design System dùng chung cho hệ sinh thái ATX & Finpath" },
      { kind: "Đang tối ưu", item: "Chiến lược prompt, cơ sở tri thức cho AI và chi phí vận hành LLM" },
      { kind: "Đang thử nghiệm", item: "Quy trình thiết kế cùng AI — từ ý tưởng đến bản thiết kế trong vài giờ" },
    ] : [
      { kind: "Leading", item: "Product design across ATX and Finpath — including the AI features: News, Chat Bot, Chart", color: "var(--pf-accent)" },
      { kind: "Coordinating", item: "Three teams — Data · Interface · Integration — across ATX & Finpath releases" },
      { kind: "Building", item: "A shared design system for the ATX & Finpath ecosystem" },
      { kind: "Optimising", item: "Prompt strategy, knowledge base and LLM running cost" },
      { kind: "Experimenting", item: "AI-assisted design workflow — idea to mockup in hours" },
    ];
    return (
      <section style={{ padding: "120px 64px", borderTop: "1px solid var(--pf-line)" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 48 }}>
          <div>
            <span className="pf-kicker">§ 02 — Now</span>
            <h2 style={{ marginTop: 18, fontSize: 64, lineHeight: 1.05, letterSpacing: "-0.03em", fontWeight: 600 }}>
              {lang === "vi" ? "Hiện đang…" : "Right now…"}
            </h2>
          </div>
          <span className="pf-mono" style={{ fontSize: 12, color: "var(--pf-text-2)" }}>
            {lang === "vi" ? "CẬP NHẬT THỦ CÔNG · 05 / 2026" : "MANUAL · 05 / 2026"}
          </span>
        </div>
        <ul style={{ listStyle: "none", padding: 0, margin: 0, borderTop: "1px solid var(--pf-line)" }}>
          {items.map((it, i) => (
            <li key={i} className="pf-now-row" style={{
              display: "grid", gridTemplateColumns: "180px 1fr 24px",
              gap: 32, padding: "24px 0",
              borderBottom: "1px solid var(--pf-line)",
              alignItems: "baseline",
            }}>
              <span className="pf-mono" style={{ fontSize: 11, color: "var(--pf-text-2)", letterSpacing: "0.14em", textTransform: "uppercase" }}>{it.kind}</span>
              <span style={{ fontSize: 22, fontWeight: 500, color: it.color || "var(--pf-text)", letterSpacing: "-0.01em" }}>{it.item}</span>
              <span style={{ width: 8, height: 8, borderRadius: 9999, background: it.color || "var(--pf-text-2)", opacity: it.color ? 1 : 0.4, marginLeft: "auto" }}></span>
            </li>
          ))}
        </ul>
      </section>
    );
  }

  /* ── Tweaks panel (optional) ─────────────────────────── */
  function EditorialTweaks({ tweakValues, setTweak, lang }) {
    const t = tweakValues;
    const T = window.TweaksPanel;
    const TS = window.TweakSection;
    const TRadio = window.TweakRadio;
    const TColor = window.TweakColor;
    const TToggle = window.TweakToggle;
    if (!T) return null;
    return (
      <T title="Tweaks">
        <TS title={lang === "vi" ? "Hệ màu" : "Accent"}>
          <TColor
            label={lang === "vi" ? "Màu nhấn" : "Accent color"}
            value={t.accentColor}
            onChange={v => setTweak("accentColor", v)}
            options={["#0052FF", "#E60815", "#07B269", "#0A0B0D"]}
          />
        </TS>
        <TS title="Hero">
          <TRadio
            label={lang === "vi" ? "Biến thể hero" : "Variant"}
            value={t.heroVariant}
            onChange={v => setTweak("heroVariant", v)}
            options={[
              { value: "statement", label: lang === "vi" ? "Tuyên ngôn" : "Statement" },
              { value: "question", label: lang === "vi" ? "Câu hỏi" : "Question" },
              { value: "metric", label: lang === "vi" ? "Số liệu" : "Metric" },
            ]}
          />
        </TS>
        <TS title="Sections">
          <TToggle
            label={lang === "vi" ? 'Hiện "Now"' : 'Show "Now"'}
            value={t.showNow}
            onChange={v => setTweak("showNow", v)}
          />
        </TS>
      </T>
    );
  }

  function Stat({ label, value }) {
    return (
      <div style={{ display: "flex", justifyContent: "space-between", padding: "8px 0", borderBottom: "1px solid var(--pf-line)" }}>
        <span style={{ color: "var(--pf-text-2)" }}>{label}</span>
        <span style={{ fontWeight: 600 }}>{value}</span>
      </div>
    );
  }

  function FooterCol({ title, items }) {
    return (
      <div>
        <div className="pf-mono" style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "rgba(255,255,255,0.55)", marginBottom: 18 }}>{title}</div>
        <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
          {items.map(it => {
            const ext = /^https?:/.test(it.url || "");
            return (
              <li key={it.label}><a href={it.url} target={ext ? "_blank" : undefined} rel={ext ? "noopener" : undefined} style={{ color: "rgba(255,255,255,0.92)", display: "inline-flex", alignItems: "center", gap: 6 }}>{it.label} <i className="ph ph-arrow-up-right" style={{ fontSize: 12, opacity: 0.6 }}></i></a></li>
            );
          })}
        </ul>
      </div>
    );
  }

  function LocalTime() {
    const [time, setTime] = useState(getVnTime);
    useEffect(() => {
      const id = setInterval(() => setTime(getVnTime()), 30000);
      return () => clearInterval(id);
    }, []);
    return <span>{time}</span>;
  }
  function getVnTime() {
    const now = new Date();
    const utc = now.getTime() + now.getTimezoneOffset() * 60000;
    const vn = new Date(utc + 7 * 3600 * 1000);
    return vn.toTimeString().slice(0,5);
  }

  function hexToRgba(hex, a) {
    const h = hex.replace("#","");
    const n = parseInt(h.length === 3 ? h.split("").map(x=>x+x).join("") : h, 16);
    const r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
    return `rgba(${r},${g},${b},${a})`;
  }


  /* ── Career data — from the CV ───────────────────────────── */
  const CAREER = [
    {
      id: "atx",
      time: { vi: "07/2021 — nay", en: "07/2021 — now" },
      org: "ATX · Finpath",
      role: { vi: "Product Design Lead & Project Manager", en: "Product Design Lead & Project Manager" },
      note: {
        vi: "Sàn crypto cho thị trường VN + nền tảng AI phân tích chứng khoán",
        en: "VN-focused crypto exchange + AI investment intelligence platform",
      },
      about: {
        vi: "ATX là sàn giao dịch tiền mã hoá được thiết kế chuyên biệt cho thị trường Việt Nam. Finpath là nền tảng dùng AI để cung cấp thông tin, quan điểm, phân tích và tin tức đầu tư về thị trường chứng khoán Việt Nam.",
        en: "ATX is a crypto exchange built specifically for the Vietnamese market. Finpath is an AI platform delivering investment intelligence, analysis and news on the Vietnamese stock market.",
      },
      metrics: [
        { v: "2M+", l: { vi: "user ATX · 700K MAU", en: "ATX users · 700K MAU" } },
        { v: "150K", l: { vi: "user Finpath · 65K MAU", en: "Finpath users · 65K MAU" } },
        { v: "3", l: { vi: "team điều phối", en: "teams coordinated" } },
      ],
      points: {
        vi: [
          ["Quản trị chiến lược & stakeholder", "Làm việc trực tiếp với ban lãnh đạo và các trưởng bộ phận để bóc tách yêu cầu thành tài liệu sản phẩm; đánh giá tính khả thi nhằm cân bằng giữa mục tiêu kinh doanh và giá trị người dùng."],
          ["Quyền tự quyết & thiết kế hệ thống", "Nắm toàn quyền quyết định, thiết kế toàn bộ cấu trúc thông tin, hành trình người dùng và giao diện. Trực tiếp thiết kế giao diện, xây design system, kiểm thử và đảm bảo chất lượng đầu ra cho toàn bộ tính năng của hệ sinh thái ATX & Finpath."],
          ["Tối ưu trải nghiệm & tăng trưởng", "Kiểm thử khả dụng và nghiên cứu hành vi để giảm tải nhận thức, giúp người mới bắt đầu tiếp cận các luồng giao dịch tài chính phức tạp một cách đơn giản. Đóng góp trực tiếp vào tăng trưởng: ATX 2M+ users (700K MAU), Finpath 150K users (65K MAU)."],
          ["Quản lý dự án E2E", "Quản lý toàn bộ vòng đời phát triển tính năng. Phối hợp cùng kỹ thuật, marketing và điều phối ba nhóm (Data, Interface, Integration) để xử lý rào cản kỹ thuật, linh hoạt điều chỉnh ưu tiên nhằm giữ tiến độ phát hành."],
          ["Team leadership", "Điều phối và phân công công việc cho nhân sự thiết kế cấp trung. Trực tiếp hướng dẫn và soát chất lượng đầu ra để thiết kế đi đúng định hướng sản phẩm và tuân thủ design system."],
          ["Thiết kế trải nghiệm AI", "Dẫn dắt phát triển, định hình giao diện và luồng tương tác các tính năng AI (News, Chat Bot, Chart) nhằm cá nhân hoá thông tin đầu tư. Định hình chiến lược prompt, xây cơ sở tri thức chuyên sâu cho AI và tối ưu chi phí vận hành LLM."],
          ["Tối ưu qua dữ liệu & feedback", "Kết hợp số liệu từ marketing, phản hồi từ chăm sóc khách hàng và phỏng vấn người dùng để xác định điểm nghẽn, từ đó xây các cải tiến thiết kế nhằm tăng tỷ lệ chuyển đổi trên luồng sản phẩm lõi."],
          ["Tối ưu hiệu suất", "Ứng dụng quy trình dựng giao diện cùng AI, rút ngắn thời gian từ ý tưởng đến bản thiết kế từ vài ngày xuống còn vài giờ."],
        ],
        en: [
          ["Strategy & stakeholder management", "Work directly with C-level and department heads to turn briefs into PRDs; assess feasibility to balance business goals against user value."],
          ["Design ownership & systems", "Full decision ownership across information architecture, user journeys and UI. Hands-on UI design, design-system build, QA and output quality for every feature in the ATX & Finpath ecosystem."],
          ["Experience & growth", "Usability testing and behavioural research to cut cognitive load so first-time investors can navigate complex financial flows. Direct contribution to growth: ATX 2M+ users (700K MAU), Finpath 150K users (65K MAU)."],
          ["End-to-end delivery", "Own the full feature lifecycle. Partner with the tech lead and marketing, and coordinate three teams (Data, Interface, Integration) to clear technical blockers and re-prioritise to protect release dates."],
          ["Team leadership", "Assign and coordinate work for mid-level UI/UX designers; mentor and review output so designs follow product direction and the design system."],
          ["AI experience design", "Lead development and shape the interfaces and interaction flows of AI features (News, Chat Bot, Chart) to personalise investment intelligence. Own prompt strategy, deep knowledge-base build and LLM cost optimisation."],
          ["Data & feedback loop", "Combine marketing metrics, CS feedback and user interviews to locate pain points, then design improvements that lift conversion on core flows."],
          ["Throughput", "Applied an AI-assisted (vibe coding) workflow, shortening idea-to-mockup from days to hours."],
        ],
      },
      projects: ["App ATX", "Web ATX", "App Finpath", "Web Finpath", "Savin"],
    },
    {
      id: "topica",
      time: { vi: "06/2020 — 07/2021", en: "06/2020 — 07/2021" },
      org: "Topica Edtech Group",
      role: { vi: "Product Designer", en: "Product Designer" },
      note: {
        vi: "Sản phẩm giáo dục: LuyenToan, Toan247, Japan Math",
        en: "Education products: LuyenToan, Toan247, Japan Math",
      },
      about: {
        vi: "Topica là công ty hàng đầu trong lĩnh vực công nghệ giáo dục (EdTech) tại Đông Nam Á.",
        en: "Topica is a leading education-technology company in Southeast Asia.",
      },
      metrics: [],
      points: {
        vi: [
          ["Chiến lược sản phẩm", "Đề xuất chiến lược và giải pháp thiết kế cho danh mục sản phẩm giáo dục."],
          ["Từ yêu cầu đến UI", "Tiếp nhận và phân tích yêu cầu từ quản lý sản phẩm để nghiên cứu tính năng, dựng cấu trúc thông tin và thiết kế giao diện."],
          ["Nghiên cứu & usability", "Nghiên cứu người dùng và thị trường, đánh giá khả dụng để liên tục cải thiện sản phẩm."],
          ["Nền tảng thiết kế", "Xây dựng design system, chân dung người dùng, hành trình khách hàng, sơ đồ màn hình và luồng người dùng."],
          ["Phối hợp liên phòng ban", "Phối hợp cùng lập trình và tăng trưởng để lên kế hoạch, thiết kế, kiểm thử và xây dựng sản phẩm."],
        ],
        en: [
          ["Product strategy", "Proposed strategy and design solutions across the education product portfolio."],
          ["Requirements to UI", "Took requirements from PO/BA, researched features, built information architecture and designed UI."],
          ["Research & usability", "User and market research plus usability evaluation to continuously improve the products."],
          ["Design foundations", "Built the design system, user personas, customer journeys, screen maps and user flows."],
          ["Cross-functional work", "Partnered with dev and growth to plan, design, test and ship."],
        ],
      },
      projects: ["LuyenToan", "LuyenToan Landing page", "Notification Tool", "Reply Tool", "Expeto", "Toan247", "Japan Math"],
    },
    {
      id: "onteractive",
      time: { vi: "01/2019 — 06/2020", en: "01/2019 — 06/2020" },
      org: "Onteractive",
      role: { vi: "UI/UX Designer", en: "UI/UX Designer" },
      note: {
        vi: "Agency UI/UX & research: VinBase, Ubank, WireKit",
        en: "UI/UX & research agency: VinBase, Ubank, WireKit",
      },
      about: {
        vi: "Onteractive là agency chuyên thiết kế giao diện UI và nghiên cứu chuyên sâu về trải nghiệm người dùng, cung cấp các giải pháp kiểm thử sản phẩm trực tiếp hoặc từ xa.",
        en: "Onteractive is an agency specialising in UI design and in-depth user-experience research, offering moderated and remote product-testing solutions.",
      },
      metrics: [],
      points: {
        vi: [
          ["Làm việc với khách hàng", "Làm việc trực tiếp với khách hàng, cùng nhóm phân tích đề bài và đề xuất giải pháp; tham gia cùng nhóm thương hiệu xây dựng định hướng."],
          ["Research & thiết kế", "Phối hợp nhóm nghiên cứu để tìm hiểu người dùng và đánh giá khả dụng; nghiên cứu đối thủ, dựng cấu trúc thông tin, design system, luồng người dùng, khung giao diện và bản mẫu."],
          ["Training", "Hướng dẫn thiết kế giao diện cho nhân sự mới."],
        ],
        en: [
          ["Client work", "Worked directly with clients, analysed briefs with the team and proposed solutions; contributed to brand strategy with the branding team."],
          ["Research & design", "Partnered with UX research on user studies and usability evaluation; competitive research, IA, design system, user flows, wireframes, UI and prototypes."],
          ["Training", "Ran UI design training for freshers."],
        ],
      },
      projects: ["VinBase", "Mypoint", "Người Dân", "Poshaco", "Ubank", "E-cabinet", "WireKit", "Quảng Ninh Tourism", "VR Museum", "Remo"],
    },
    {
      id: "wiloke",
      time: { vi: "05/2018 — 01/2019", en: "05/2018 — 01/2019" },
      org: "Wiloke",
      role: { vi: "UI/UX Designer", en: "UI/UX Designer" },
      note: {
        vi: "Theme WordPress bán trên ThemeForest: WilCity",
        en: "WordPress themes on ThemeForest: WilCity",
      },
      about: {
        vi: "Wiloke là công ty chuyên thiết kế và cung cấp giao diện, plugin và bộ công cụ hỗ trợ cho nền tảng WordPress.",
        en: "Wiloke designs and sells themes, plugins and toolkits for the WordPress platform.",
      },
      metrics: [],
      points: {
        vi: [["Thiết kế sản phẩm thương mại", "Nghiên cứu và thiết kế giao diện web/ứng dụng bán trên ThemeForest; làm việc trực tiếp với khách hàng và hỗ trợ tuỳ biến giao diện."]],
        en: [["Commercial product design", "Researched and designed web/app UI products sold on ThemeForest; worked directly with buyers and supported UI customisation."]],
      },
      projects: ["WilCity"],
    },
  ];

  /* ── Job detail modal ────────────────────────────────────── */
  function JobModal({ job, lang, onClose }) {
    useEffect(() => {
      if (!job) return;
      const onKey = (e) => { if (e.key === "Escape") onClose(); };
      window.addEventListener("keydown", onKey);
      return () => window.removeEventListener("keydown", onKey);
    }, [job, onClose]);
    if (!job) return null;
    return (
      <div
        onClick={onClose}
        style={{
          position: "fixed", inset: 0, zIndex: 200,
          background: "rgba(10,11,13,0.35)", backdropFilter: "blur(10px)",
          display: "flex", alignItems: "flex-start", justifyContent: "center",
          padding: "6vh 24px", overflowY: "auto",
          animation: "pf-fade 180ms ease both",
        }}
      >
        <div
          onClick={(e) => e.stopPropagation()}
          style={{
            width: "min(720px, 100%)",
            background: "var(--pf-bg)", color: "var(--pf-text)",
            border: "1px solid var(--pf-line)", borderRadius: 16,
            animation: "pf-rise 260ms cubic-bezier(0.25,0.1,0.25,1) both",
          }}
        >
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 24, padding: "28px 32px 20px", borderBottom: "1px solid var(--pf-line)" }}>
            <div>
              <div className="pf-mono" style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--pf-text-2)" }}>{job.time[lang]}</div>
              <h3 style={{ fontFamily: "var(--font-title)", fontSize: 34, fontWeight: 700, letterSpacing: "-0.025em", margin: "10px 0 0" }}>{job.org}</h3>
              <div style={{ fontSize: 15, color: "var(--pf-text)", marginTop: 6 }}>{job.role[lang]}</div>
            </div>
            <button onClick={onClose} className="pf-iconbtn" aria-label="Close" style={{ flexShrink: 0 }}>
              <i className="ph ph-x"></i>
            </button>
          </div>

          <div style={{ padding: "24px 32px 32px" }}>
            <p style={{ fontSize: 15, lineHeight: 1.6, color: "var(--pf-text-2)", margin: 0 }}>{job.about[lang]}</p>

            {job.metrics.length > 0 && (
              <div style={{ display: "grid", gridTemplateColumns: `repeat(${job.metrics.length}, minmax(0,1fr))`, gap: 0, border: "1px solid var(--pf-line)", borderRadius: 12, marginTop: 24, overflow: "hidden" }}>
                {job.metrics.map((m, i) => (
                  <div key={i} style={{ padding: "18px 20px", borderRight: i < job.metrics.length - 1 ? "1px solid var(--pf-line)" : "none" }}>
                    <div style={{ fontFamily: "var(--font-title)", fontSize: 30, fontWeight: 700, letterSpacing: "-0.03em" }}>{m.v}</div>
                    <div style={{ fontSize: 12, color: "var(--pf-text-2)", marginTop: 4, lineHeight: 1.4 }}>{m.l[lang]}</div>
                  </div>
                ))}
              </div>
            )}

            <ul style={{ listStyle: "none", padding: 0, margin: "28px 0 0" }}>
              {job.points[lang].map(([t, body], i) => (
                <li key={i} style={{ display: "grid", gridTemplateColumns: "28px minmax(0,1fr)", gap: 16, padding: "16px 0", borderTop: "1px solid var(--pf-line)" }}>
                  <span className="pf-mono" style={{ fontSize: 11, color: "var(--pf-text-3)", paddingTop: 3 }}>{String(i + 1).padStart(2, "0")}</span>
                  <div>
                    <div style={{ fontSize: 15, fontWeight: 600 }}>{t}</div>
                    <div style={{ fontSize: 14, lineHeight: 1.6, color: "var(--pf-text-2)", marginTop: 4 }}>{body}</div>
                  </div>
                </li>
              ))}
            </ul>

            <div style={{ marginTop: 28, paddingTop: 20, borderTop: "1px solid var(--pf-line)" }}>
              <div className="pf-mono" style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--pf-text-2)", marginBottom: 12 }}>
                {lang === "vi" ? "Dự án tiêu biểu" : "Selected projects"}
              </div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                {job.projects.map(p => (
                  <span key={p} className="pf-mono" style={{ fontSize: 12, padding: "6px 12px", border: "1px solid var(--pf-line)", borderRadius: 9999, color: "var(--pf-text-2)" }}>{p}</span>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  window.EditorialDirection = EditorialDirection;
})();
