const { useState } = React;
const { Icon, ProtoNav, Logo, StateSwitcher, USER_STATES, showToast } = window;

// CTA 状态矩阵（page-designs §2.8 CTA 按钮动态规则）
const CTA_BY_STATE = {
  GUEST:        { label: "立即参与", tone: "primary", note: "未登录：点击弹出登录框，登录后进入权益页", icon: Icon.Sparkles },
  REGISTERED:   { label: "提交企业信息", tone: "primary", note: "REGISTERED：弹出留资大表单 modal-lead-form", icon: Icon.File },
  LEAD_APPLIED: { label: "查看我的权益", tone: "secondary", note: "LEAD_APPLIED：资料审核中（DICT/EB/iBOSS 并行），跳转我的权益页", icon: Icon.Gift },
  LEAD_APPROVED:{ label: "开始模型体验", tone: "primary", note: "LEAD_APPROVED：$20 已到账，跳转模型体验页", icon: Icon.Robot },
  EB_APPROVED:  { label: "去完成企业认证", tone: "primary", note: "EB_APPROVED：累计 $200，新标签打开认证门户（Case B）或跳权益页", icon: Icon.Building },
  VERIFIED:     { label: "去订购 AI Hub", tone: "primary", note: "VERIFIED：认证通过，新标签跳转 AI Hub（携带 $800 抵扣券资格）", icon: Icon.External },
  SUBSCRIBED:   { label: "查看我的权益", tone: "secondary", note: "SUBSCRIBED：已订购，跳转我的权益页管理 Key", icon: Icon.Gift },
  ELIGIBLE:     { label: "去订购 AI Hub", tone: "primary", note: "ELIGIBLE（存量有资格）：跳转 AI Hub 订购页（$1000 抵扣券资格）", icon: Icon.External },
  INELIGIBLE:   { label: "去订购 AI Hub", tone: "primary", note: "INELIGIBLE（存量没资格）：点击提示无资格", icon: Icon.External },
};

function Hero({ state }) {
  const cta = CTA_BY_STATE[state];
  const [expired] = useState(false); // 切到过期演示可置 true
  const handleCtaClick = () => {
    if (state === "INELIGIBLE") {
      showToast("您当前账号无领取资格，请联系企业主账号管理员", "warning");
      return;
    }
    // 其他状态正常跳转（原型中仅展示，无实际路由）
  };
  return (
    <section data-region="campaign-landing-hero">
      <div className="campaign-hero" data-screen-label="campaign-landing-hero">
        <div className="campaign-hero-deco"><Icon.Sparkles size={180} /></div>
        <div className="campaign-hero-content">
          <span className="campaign-hero-badge"><Icon.Gift size={14} /> 三层递进 · 最高 $1000</span>
          <h1 className="campaign-hero-title">2026大模型拉新促销</h1>
          <p className="campaign-hero-sub">
            提交资料并通过审核得 <strong>$20</strong> → EB 审批通过追加 <strong>$180</strong>（累计 $200）→
            完成认证并订购 AI Hub 得 <strong>$800</strong> 抵扣券。
          </p>
          <div className="campaign-hero-meta">
            <span className="campaign-hero-meta-item"><Icon.Calendar size={14} /> 有效期：2026-05-01 至 2026-12-31</span>
            <span className="campaign-hero-meta-item"><Icon.Building size={14} /> 面向新注册企业用户</span>
            <span className="campaign-hero-meta-item"><Icon.Wallet size={14} /> 营销金 30 天有效</span>
          </div>
          <div className="campaign-hero-cta">
            <button className={"btn btn--lg btn--" + cta.tone} disabled={expired} onClick={handleCtaClick}>
              <cta.icon size={18} /> {cta.label}
            </button>
            <a className="btn btn--lg btn--secondary" href="benefits.html">查看我的权益</a>
          </div>
        </div>
      </div>
      <div className="cta-state-note">
        <Icon.Info size={16} />
        <span><strong>当前状态 CTA：</strong>{cta.note}</span>
      </div>
    </section>
  );
}

function Rules() {
  const rules = [
    { n: 1, title: "提交资料，DICT 审核通过", amount: "$20", desc: "完成留资大表单提交，DICT 审核留资资料（手机号、来源、推荐码）。通过后由 AI Hub 分配固定 API Key 并发放 $20 营销金。", metas: ["30 天有效期", "固定 API Key", "邮件通知销售跟进"] },
    { n: 2, title: "EB 审批通过，追加额度", amount: "$180", desc: "EB 部门审批试用申请（企业查重、项目评估）。通过后同一 Key 追加 $180，总额达 $200。依赖 DICT 先通过。", metas: ["累计 $200", "同一 Key 追加", "30 天有效期"] },
    { n: 3, title: "完成认证并订购 AI Hub", amount: "$800", desc: "完成 iBOSS 企业认证后状态变为 VERIFIED。订购 AI Hub 时由 AI Hub 自动生成 $800 首月抵扣券，订购时默认勾选使用。", metas: ["首月抵扣", "由 AI Hub 生成", "1 个月有效"] },
  ];
  return (
    <section className="campaign-section" data-region="campaign-landing-rules">
      <h2 className="campaign-section-title">活动规则</h2>
      <div className="rules-card">
        <div className="rules-steps">
          {rules.map(r => (
            <div className="rule-step" key={r.n}>
              <span className="rule-step-num">{r.n}</span>
              <div className="rule-step-body">
                <h3 className="rule-step-title">{r.title}<span className="rule-step-amount">{r.amount}</span></h3>
                <p className="rule-step-desc">{r.desc}</p>
                <div className="rule-step-meta">
                  {r.metas.map(m => <span key={m}><Icon.Check size={12} /> {m}</span>)}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Products() {
  const items = [
    { icon: Icon.Sparkles, name: "文本大模型", desc: "GPT-4o / Claude / GLM，对话、问答、推理" },
    { icon: Icon.Cpu, name: "代码生成", desc: "代码补全、重构、跨语言转换、单测生成" },
    { icon: Icon.Robot, name: "多模态推理", desc: "图文理解、文生图、视频生成" },
  ];
  return (
    <section className="campaign-section" data-region="campaign-landing-products">
      <h2 className="campaign-section-title">适用产品</h2>
      <div className="products-grid">
        {items.map(p => (
          <div className="product-card" key={p.name}>
            <span className="product-card-icon"><p.icon size={24} /></span>
            <h3 className="product-card-name">{p.name}</h3>
            <p className="product-card-desc">{p.desc}</p>
            <button className="btn btn--text product-card-action">立即体验 <Icon.ArrowRight size={14} /></button>
          </div>
        ))}
      </div>
    </section>
  );
}

function Campaign({ state }) {
  return (
    <div className="campaign">
      <Logo variant="full" context="floating" style={{ position: "fixed", top: 60, left: 24, zIndex: 1001 }} />
      <header className="campaign-topbar">
        <a className="campaign-back" href="marketing-home.html"><Icon.ArrowLeft size={16} /> 返回首页</a>
        <span className="campaign-topbar-title">营销活动详情</span>
        <div className="campaign-topbar-spacer" />
      </header>

      <main className="campaign-main" data-screen-label="campaign-landing">
        <Hero state={state} />
        <Rules />
        <Products />
      </main>

      <Footer variant="marketing" />
    </div>
  );
}

function App() {
  const [state, setState] = useState("GUEST");
  return (
    <div className="proto-root">
      <ProtoNav active="campaign" />
      <StateSwitcher states={USER_STATES} active={state} onChange={setState} title="用户状态 → CTA 切换" variant="top-collapsible" />
      <Campaign state={state} />
    </div>
  );
}

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