const { useState, useEffect, useRef } = React;
const { CATEGORIES, APPS, STATS, PLANS, CREDIT, TOPUPS, SESSION_PACKS, BILLING } = window.LCY;

// hue lookup per category
const HUE = {};
CATEGORIES.forEach((c) => (HUE[c.id] = c.hue));
const hueOf = (app) => HUE[app.cat] || 270;

// Lucide icon helper — renders an <i> that lucide converts to svg
function Icon({ name, cls }) {
  return <i data-lucide={name} className={"ic " + (cls || "")}></i>;
}

/* ---------------- Nav ---------------- */
function Nav({ onLogin, onScrollTo, theme, onToggleTheme }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const h = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", h);
    return () => window.removeEventListener("scroll", h);
  }, []);
  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="wrap nav-inner">
        <div className="brand" onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}>
          <div className="brand-mark"><Icon name="sparkles" /></div>
          <div>
            <div className="brand-name"><b>灵次元</b>AI</div>
            <div className="brand-cn">LINGCIYUAN</div>
          </div>
        </div>
        <div className="nav-links">
          <a className="nav-link" onClick={() => onScrollTo("apps")}>应用中心</a>
          <a className="nav-link" onClick={() => onScrollTo("featured")}>热门推荐</a>
          <a className="nav-link" onClick={() => onScrollTo("pricing")}>会员方案</a>
          <a className="nav-link" onClick={() => onScrollTo("about")}>关于我们</a>
        </div>
        <div className="nav-actions">
          <button className="btn btn-ghost theme-toggle" onClick={onToggleTheme} title={theme === "light" ? "切换深色" : "切换浅色"} aria-label="切换主题">
            <Icon name={theme === "light" ? "moon" : "sun"} />
          </button>
          <button className="btn btn-ghost btn-sm" onClick={() => onLogin("login")}>登录</button>
          <button className="btn btn-primary btn-sm" onClick={() => onLogin("register")}>免费注册</button>
        </div>
      </div>
    </nav>
  );
}

/* ---------------- Hero ---------------- */
function Hero({ query, setQuery, onScrollTo, onLogin }) {
  const quick = [
    { icon: "mic", label: "面试助手" },
    { icon: "book-open", label: "小说创作" },
    { icon: "palette", label: "AI 绘画" },
    { icon: "book-a", label: "背单词" },
    { icon: "presentation", label: "做 PPT" },
  ];
  return (
    <header className="hero wrap">
      <div className="pill">
        <span className="dot"></span>
        全新升级 · 接入新一代大模型
        <span className="new">NEW</span>
      </div>
      <h1>
        你的 AI 灵感次元<br />
        <span className="grad-text">万象皆可创造</span>
      </h1>
      <p className="sub">
        面试、写作、学习、绘画、办公…… 三十余款 AI 应用汇于一处。<br />
        一个入口，连接你需要的全部 AI 能力。
      </p>
      <div className="hero-search">
        <Icon name="search" />
        <input
          placeholder="搜索你想要的 AI 应用，如「面试」「PPT」「单词」"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          onKeyDown={(e) => e.key === "Enter" && onScrollTo("apps")}
        />
        <button className="btn btn-primary btn-sm" onClick={() => onScrollTo("apps")}>
          探索 <Icon name="arrow-right" />
        </button>
      </div>
      <div className="hero-tags">
        {quick.map((q) => (
          <span key={q.label} className="hero-tag" onClick={() => { setQuery(q.label); onScrollTo("apps"); }}>
            <Icon name={q.icon} />{q.label}
          </span>
        ))}
      </div>
      <div className="stats">
        {STATS.map((s) => (
          <div className="stat" key={s.label}>
            <div className="v grad-text">{s.value}</div>
            <div className="l">{s.label}</div>
          </div>
        ))}
      </div>
    </header>
  );
}

/* ---------------- Featured ---------------- */
function Featured({ apps, onOpen }) {
  return (
    <section className="sec wrap" id="featured">
      <div className="sec-head">
        <div>
          <div className="eyebrow">Editor's Pick</div>
          <h2 className="sec-title">本周热门精选</h2>
          <p className="sec-sub">数百万用户正在使用的明星应用，点开即可体验。</p>
        </div>
      </div>
      <div className="featured-grid">
        {apps.map((app) => (
          <div key={app.id} className="fcard" style={{ "--h": hueOf(app) }} onClick={() => onOpen(app)}>
            <div className="icon-tile" style={{ "--h": hueOf(app) }}><Icon name={app.icon} /></div>
            <span className="ftag">{app.tag}</span>
            <h3>{app.name}</h3>
            <p>{app.desc}</p>
            <div className="farrow">立即体验 <Icon name="arrow-right" /></div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------------- App grid ---------------- */
function AppCard({ app, onOpen }) {
  return (
    <div className="acard" style={{ "--h": hueOf(app) }} onClick={() => onOpen(app)}>
      <div className="ahead">
        <div className="icon-tile" style={{ "--h": hueOf(app) }}><Icon name={app.icon} /></div>
        {app.hot && <span className="hot-badge">HOT</span>}
      </div>
      <h4>{app.name}</h4>
      <div className="atag">{app.tag}</div>
      <p>{app.desc}</p>
      <div className="afoot"><Icon name="users" />{app.users} 人在用</div>
    </div>
  );
}

function AppCenter({ query, setQuery, onOpen }) {
  const [cat, setCat] = useState("all");
  const filtered = APPS.filter((a) => {
    const okCat = cat === "all" || a.cat === cat;
    const q = query.trim();
    const okQ = !q || a.name.includes(q) || a.tag.includes(q) || a.desc.includes(q);
    return okCat && okQ;
  });
  return (
    <section className="sec wrap" id="apps">
      <div className="sec-head">
        <div>
          <div className="eyebrow">App Center</div>
          <h2 className="sec-title">应用中心</h2>
          <p className="sec-sub">按场景探索全部 AI 应用，总有一款解决你当下的需求。</p>
        </div>
      </div>
      <div className="filter-bar">
        {CATEGORIES.map((c) => (
          <button key={c.id} className={"chip" + (cat === c.id ? " active" : "")} onClick={() => setCat(c.id)}>
            {c.label}
          </button>
        ))}
        <div className="filter-search">
          <Icon name="search" />
          <input placeholder="搜索应用" value={query} onChange={(e) => setQuery(e.target.value)} />
        </div>
      </div>
      <div className="app-grid">
        {filtered.length ? (
          filtered.map((app) => <AppCard key={app.id} app={app} onOpen={onOpen} />)
        ) : (
          <div className="empty">
            <div><Icon name="search-x" /></div>
            没有找到「{query}」相关的应用，换个关键词试试？
          </div>
        )}
      </div>
    </section>
  );
}

/* ---------------- Pricing (teaser → full page) ---------------- */
function Pricing({ onLogin }) {
  return (
    <section className="sec wrap" id="pricing">
      <div className="sec-head" style={{ justifyContent: "center", textAlign: "center" }}>
        <div>
          <div className="eyebrow">Membership</div>
          <h2 className="sec-title">订阅即享每月灵感值</h2>
          <p className="sec-sub" style={{ margin: "10px auto 0" }}>
            文字应用按<b style={{ color: "var(--text)" }}>灵感值</b>畅用，实时会话按次计费。新人注册即送 1,000 灵感值。
          </p>
        </div>
      </div>
      <div className="plans plans-4">
        {PLANS.map((p) => (
          <div key={p.id} className={"plan" + (p.popular ? " popular" : "")}>
            {p.multiple && <div className="plan-mult">{p.multiple}</div>}
            <div className="pname">{p.name}</div>
            <div><span className="pprice">{p.price}</span> <span className="pper">{p.per}</span></div>
            <div className="plan-credits">
              <div className="pc-row"><Icon name="zap" /><b>{p.credits}</b> 灵感值</div>
              <div className="pc-row"><Icon name="ticket" />{p.sessions}</div>
            </div>
            <button className={"btn " + (p.popular ? "btn-primary" : "btn-ghost")} onClick={() => onLogin("register")}>{p.cta}</button>
          </div>
        ))}
      </div>
      <div style={{ textAlign: "center", marginTop: 28 }}>
        <a className="btn btn-ghost" href="灵次元-价格方案.html" style={{ display: "inline-flex" }}>
          查看完整方案 · 加油包 · 各应用计费 <Icon name="arrow-right" />
        </a>
      </div>
    </section>
  );
}

/* ---------------- CTA band ---------------- */
function CtaBand({ onLogin }) {
  return (
    <section className="wrap">
      <div className="cta-band">
        <h2>进入灵次元，<span className="grad-text">让 AI 替你完成</span></h2>
        <p>注册即送新人额度，全部应用免费体验。</p>
        <div className="cta-actions">
          <button className="btn btn-primary" onClick={() => onLogin("register")}>免费开始使用 <Icon name="arrow-right" /></button>
          <button className="btn btn-ghost" onClick={() => document.getElementById("apps").scrollIntoView({ behavior: "smooth" })}>浏览应用</button>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Footer ---------------- */
function Footer() {
  const cols = [
    { h: "产品", links: ["应用中心", "热门推荐", "会员方案", "更新日志"] },
    { h: "支持", links: ["帮助中心", "使用教程", "意见反馈", "API 文档"] },
    { h: "公司", links: ["关于我们", "加入我们", "商务合作", "隐私政策"] },
  ];
  return (
    <footer className="footer" id="about">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <div className="brand">
              <div className="brand-mark"><Icon name="sparkles" /></div>
              <div>
                <div className="brand-name"><b>灵次元</b>AI</div>
                <div className="brand-cn">LINGCIYUAN</div>
              </div>
            </div>
            <p className="footer-about">汇聚前沿大模型能力的一站式 AI 应用平台，让每一个想法都能被快速实现。</p>
          </div>
          {cols.map((c) => (
            <div className="footer-col" key={c.h}>
              <h5>{c.h}</h5>
              {c.links.map((l) => <a key={l}>{l}</a>)}
            </div>
          ))}
        </div>
        <div className="footer-bottom">
          <div>© 2026 灵次元AI · LingCiYuan. 保留所有权利。</div>
          <div>京ICP备 2026XXXXXX 号</div>
        </div>
      </div>
    </footer>
  );
}

/* ---------------- App detail modal ---------------- */
function AppModal({ app, onClose }) {
  if (!app) return null;
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" style={{ position: "relative" }} onClick={(e) => e.stopPropagation()}>
        <div className="modal-x" onClick={onClose}><Icon name="x" /></div>
        <div className="app-modal-top" style={{ "--h": hueOf(app) }}>
          <div className="icon-tile" style={{ "--h": hueOf(app) }}><Icon name={app.icon} /></div>
          <h3>{app.name}</h3>
          <div className="atag">{app.tag} · {app.users} 人在用</div>
        </div>
        <div className="app-modal-body">
          <p>{app.desc}</p>
          <div className="feat-list">
            {app.bullets.map((b) => (
              <div className="row" key={b}>
                <span className="ck"><Icon name="check" /></span>{b}
              </div>
            ))}
          </div>
          <div className="modal-cta">
            <button className="btn btn-primary" onClick={() => { if (app.url) window.location.href = app.url; }}><Icon name="zap" />立即体验</button>
            <button className="btn btn-ghost" onClick={onClose}>稍后再说</button>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------------- Auth modal ---------------- */
function AuthModal({ mode, onClose, setMode }) {
  if (!mode) return null;
  const isLogin = mode === "login";
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" style={{ position: "relative", maxWidth: 420 }} onClick={(e) => e.stopPropagation()}>
        <div className="modal-x" onClick={onClose}><Icon name="x" /></div>
        <div className="auth">
          <div className="brand">
            <div className="brand-mark"><Icon name="sparkles" /></div>
            <div className="brand-name"><b>灵次元</b>AI</div>
          </div>
          <h3>{isLogin ? "欢迎回来" : "创建你的账号"}</h3>
          <div className="ph">{isLogin ? "登录以继续你的创作" : "注册即送新人体验额度"}</div>
          <div className="auth-tabs">
            <button className={isLogin ? "active" : ""} onClick={() => setMode("login")}>登录</button>
            <button className={!isLogin ? "active" : ""} onClick={() => setMode("register")}>注册</button>
          </div>
          <div className="field">
            <label>手机号 / 邮箱</label>
            <input placeholder="请输入手机号或邮箱" />
          </div>
          <div className="field">
            <label>密码</label>
            <input type="password" placeholder="请输入密码" />
          </div>
          {!isLogin && (
            <div className="field">
              <label>验证码</label>
              <input placeholder="请输入短信验证码" />
            </div>
          )}
          <button className="btn btn-primary">{isLogin ? "登录" : "注册并登录"} <Icon name="arrow-right" /></button>
          <div className="auth-alt">
            {isLogin ? "还没有账号？" : "已有账号？"}
            <span onClick={() => setMode(isLogin ? "register" : "login")}>{isLogin ? "立即注册" : "去登录"}</span>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------------- Root ---------------- */
function App() {
  const [query, setQuery] = useState("");
  const [selApp, setSelApp] = useState(null);
  const [auth, setAuth] = useState(null);
  const [theme, setTheme] = useState(() => document.documentElement.getAttribute("data-theme") || "light");

  useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);
    try { localStorage.setItem("lcy-theme", theme); } catch (e) {}
  }, [theme]);
  const toggleTheme = () => setTheme((t) => (t === "light" ? "dark" : "light"));

  // re-render lucide icons after every render
  useEffect(() => {
    if (window.lucide) window.lucide.createIcons();
  });

  // lock scroll when a modal is open
  useEffect(() => {
    const open = selApp || auth;
    document.body.style.overflow = open ? "hidden" : "";
  }, [selApp, auth]);

  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: "smooth" });
  };

  const featured = APPS.filter((a) => a.featured);

  return (
    <React.Fragment>
      <Nav onLogin={setAuth} onScrollTo={scrollTo} theme={theme} onToggleTheme={toggleTheme} />
      <Hero query={query} setQuery={setQuery} onScrollTo={scrollTo} onLogin={setAuth} />
      <Featured apps={featured} onOpen={setSelApp} />
      <AppCenter query={query} setQuery={setQuery} onOpen={setSelApp} />
      <Pricing onLogin={setAuth} />
      <CtaBand onLogin={setAuth} />
      <Footer />
      <AppModal app={selApp} onClose={() => setSelApp(null)} />
      <AuthModal mode={auth} onClose={() => setAuth(null)} setMode={setAuth} />
    </React.Fragment>
  );
}

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