/* ============================================================
   App — view router · nav · About · Tweaks
   ============================================================ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "arc",
  "accent": "#FF6A1A",
  "titleFont": "smiley",
  "showGrid": true
}/*EDITMODE-END*/;

const ACCENTS = {
  "#FF6A1A": { deep: "#EA5A0C", soft: "#FFF1E7", line: "#FFD8BD" },
  "#FF4D2E": { deep: "#E23A1C", soft: "#FFEDE8", line: "#FFC9BC" },
  "#F08A24": { deep: "#D9740F", soft: "#FFF3E0", line: "#FFE0B0" },
  "#7C2BE0": { deep: "#671FC0", soft: "#F2E6FE", line: "#E0C9F8" },
};

const NAV_MENU = [
  { label: "超级 HR",   role: "人事", img: "assets/roles/role-01.jpg", sub: "招聘·组织·绩效" },
  { label: "超级销售",  role: "销售", img: "assets/roles/role-08.jpg", sub: "线索·话术·成交" },
  { label: "超级财务",  role: "财务", img: "assets/roles/role-02.jpg", sub: "记账·对账·报表" },
  { label: "超级法务",  role: "法务", img: "assets/roles/role-07.jpg", sub: "审合同·控风险" },
];

function ScanIcon() {
  return (
    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
      <path d="M4 8V5a1 1 0 0 1 1-1h3M16 4h3a1 1 0 0 1 1 1v3M20 16v3a1 1 0 0 1-1 1h-3M8 20H5a1 1 0 0 1-1-1v-3" />
      <path d="M3 12h18" />
    </svg>
  );
}

function QRModal({ open, onClose }) {
  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    if (open) { window.addEventListener("keydown", onKey); document.body.style.overflow = "hidden"; }
    return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [open, onClose]);
  if (!open) return null;
  return (
    <div className="qr-overlay" onClick={onClose}>
      <div className="qr-modal" onClick={(e) => e.stopPropagation()}>
        <button className="qr-close" onClick={onClose} aria-label="关闭">✕</button>
        <span className="qr-eyebrow"><span className="dot"></span>预约通道 · 即将开放</span>
        <h3 className="qr-title display">扫码马上预约<br />你的 AI 员工</h3>
        <p className="qr-sub">该岗位 AI 员工正在内测预约中。<b>微信扫一扫</b>下方二维码加入预约通道，开放第一时间通知你，抢先让 TA 上岗。</p>
        <div className="qr-img"><img src="assets/qr.jpg" alt="预约二维码" /></div>
        <div className="qr-foot"><ScanIcon /> 微信扫一扫 · 立即预约</div>
      </div>
    </div>
  );
}

function Nav({ view, go, goStaff }) {
  const link = (id, label) => (
    <a className={view === id ? "active" : ""} onClick={() => go(id)}>{label}</a>
  );
  return (
    <nav className="nav">
      <div className="wrap">
        <div className="brand" style={{ cursor: "pointer" }} onClick={() => go("home")}>
          <span className="brand-mark"><BrandGlyph /></span>
          <span className="brand-name display">元企智工</span>
        </div>
        <div className="nav-links">
          {link("home", "首页")}
          <div className="nav-item">
            <a className={view === "staff" ? "active" : ""} onClick={() => goStaff("全部")}>
              AI 员工 <span className="caret">▾</span>
            </a>
            <div className="nav-dd">
              <div className="dd-card">
                <div className="dd-title">数字员工·热门岗位</div>
                {NAV_MENU.map((m) => (
                  <button key={m.role} className="dd-row" onClick={() => goStaff(m.role)}>
                    <img src={m.img} alt={m.label} />
                    <span className="dd-meta"><b>{m.label}</b><i>{m.sub}</i></span>
                    <span className="dd-arrow">→</span>
                  </button>
                ))}
                <button className="dd-all" onClick={() => goStaff("全部")}>其他岗位 · 查看全部 →</button>
              </div>
            </div>
          </div>
          {link("about", "关于我们")}
        </div>
        <div className="nav-spacer"></div>
        <button className="btn btn-dark login" onClick={() => window.open("https://yuanqiwork.com/login", "_blank", "noopener")}>登录</button>
      </div>
    </nav>
  );
}

function About({ go }) {
  const { ADVANTAGES } = window.DATA;
  useReveal();
  return (
    <div>
      <section className="section ink" style={{ paddingTop: 130 }}>
        <div className="wrap" style={{ textAlign: "center" }}>
          <span className="eyebrow" style={{ color: "var(--orange)" }}>About us</span>
          <h1 className="display reveal" style={{ fontSize: "clamp(40px,6vw,84px)", lineHeight: 1.04, margin: "18px auto 0", maxWidth: 900 }}>
            让每家企业都拥有<br />自己的 <span style={{ color: "var(--orange)" }}>AI 员工</span>
          </h1>
          <p className="reveal" style={{ color: "rgba(255,255,255,.72)", fontSize: 19, lineHeight: 1.8, maxWidth: 640, margin: "26px auto 0" }}>
            元企智工 用「大模型 + RPA + 多模态 + 知识图谱」构建可上岗的企业智能体，
            让 1 分钟、1% 的成本，解决过去需要一整支团队才能完成的工作。
          </p>
          <div className="hero-cta reveal" style={{ justifyContent: "center", marginTop: 34 }}>
            <button className="btn btn-primary" onClick={() => go("staff")}>浏览 AI 员工 <span className="arrow">→</span></button>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="section-head reveal">
            <span className="eyebrow">Our belief</span>
            <h2 className="section-title display">我们相信的事</h2>
          </div>
          <div className="adv-grid">
            {ADVANTAGES.slice(0, 3).map((a) => (
              <div className="adv-card reveal" key={a.n}>
                <div className="adv-banner">
                  <img src={a.img} alt={a.title} />
                  <span className="adv-chip display">{a.n}</span>
                </div>
                <div className="adv-body">
                  <h3>{a.title}</h3>
                  <p>{a.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CtaBand onExplore={() => go("staff")} />
    </div>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [view, setView] = useState("home");
  const [detailId, setDetailId] = useState(null);
  const [hired, setHired] = useState({});
  const [staffFilter, setStaffFilter] = useState("全部");
  const [qrOpen, setQrOpen] = useState(false);

  // global action hooks used by hire buttons across components
  useEffect(() => {
    window.openQR = () => setQrOpen(true);
    window.goPricing = () => window.open("https://yuanqiwork.com/pricing", "_blank", "noopener");
    window.goLogin = () => window.open("https://yuanqiwork.com/login", "_blank", "noopener");
  }, []);

  // apply theme tweaks
  useEffect(() => {
    const r = document.documentElement.style;
    const a = ACCENTS[t.accent] || ACCENTS["#FF6A1A"];
    r.setProperty("--orange", t.accent);
    r.setProperty("--orange-deep", a.deep);
    r.setProperty("--orange-soft", a.soft);
    r.setProperty("--orange-line", a.line);
    r.setProperty("--font-display",
      t.titleFont === "smiley"
        ? '"Smiley Sans Oblique","Smiley Sans","SmileySans-Oblique", var(--font-body)'
        : '"Noto Sans SC", system-ui, sans-serif');
    document.documentElement.style.setProperty("--display-weight", t.titleFont === "smiley" ? "400" : "900");
  }, [t.accent, t.titleFont]);

  const go = useCallback((v) => {
    if (v && v.startsWith && window.DATA.STAFF.some((s) => s.id === v)) {
      setDetailId(v); setView("detail"); return;
    }
    setView(v); window.scrollTo(0, 0);
  }, []);

  const toggleHire = useCallback((id) => {
    setHired((h) => ({ ...h, [id]: !h[id] }));
  }, []);

  const goStaff = useCallback((role) => {
    setStaffFilter(role || "全部");
    setView("staff"); window.scrollTo(0, 0);
  }, []);

  return (
    <div className="app">
      <Nav view={view === "detail" ? "staff" : view} go={go} goStaff={goStaff} />

      {view === "home" && <Home variant={t.heroVariant} go={go} hired={hired} onHire={toggleHire} goStaff={goStaff} />}
      {view === "staff" && <StaffPage key={staffFilter} initialFilter={staffFilter} go={go} hired={hired} onHire={toggleHire} />}
      {view === "detail" && <DetailPage id={detailId} back={() => go("staff")} hired={hired} onHire={toggleHire} />}
      {view === "about" && <About go={go} />}

      {view !== "detail" && <Footer go={go} />}

      <QRModal open={qrOpen} onClose={() => setQrOpen(false)} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="首页工牌墙" />
        <TweakRadio label="布局" value={t.heroVariant}
          options={[{ label: "弧形 Arc", value: "arc" }, { label: "环形 Orbit", value: "orbit" }, { label: "横向 Cover", value: "coverflow" }]}
          onChange={(v) => setTweak("heroVariant", v)} />
        <TweakSection label="品牌" />
        <TweakColor label="主色" value={t.accent}
          options={["#FF6A1A", "#FF4D2E", "#F08A24", "#7C2BE0"]}
          onChange={(v) => setTweak("accent", v)} />
        <TweakRadio label="标题字体" value={t.titleFont}
          options={[{ label: "得意黑", value: "smiley" }, { label: "思源黑 Heavy", value: "noto" }]}
          onChange={(v) => setTweak("titleFont", v)} />
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);