const { useState, useEffect } = React;
const { Icon, BRAND, ProtoNav, Logo, StateSwitcher } = window;

// 营销首页仅需的两态
const HOME_STATES = [
  { key: false, label: "访客（未登录）", dot: "#86909C" },
  { key: true,  label: "已登录（林）",   dot: "#8EC31E" },
];

// 轮播数据（近期营销活动）
const SLIDES = [
  {
    id: "llm-2026",
    eyebrow: "首月立减 $1000",
    title: "2026大模型拉新促销",
    sub: "提交资料并通过审核，最高领取 $1000 AI Hub 抵扣券。$20 → $200 → $800 三层递进。",
    gradient: "linear-gradient(120deg, #0085D0 0%, #1A91D5 45%, #0098AD 100%)",
    deco: "model",
    cta: "立即参与",
  },
  {
    id: "mcp-trial",
    eyebrow: "限时领取",
    title: "MCP 服务试用体验",
    sub: "MCP 工具调用免费额度，无需审批，按需领取。适合快速集成 Agent 工具链。",
    gradient: "linear-gradient(120deg, #A6165F 0%, #D53574 60%, #0098AD 130%)",
    deco: "cloud",
    cta: "立即领取",
  },
  {
    id: "gpu-elastic",
    eyebrow: "弹性算力",
    title: "智算云弹性试用",
    sub: "GPU 训练/推理资源，分钟级弹性伸缩。新用户专享 $150 试用金，30 天有效期。",
    gradient: "linear-gradient(120deg, #8EC31E 0%, #0098AD 100%)",
    deco: "cloud",
    cta: "立即体验",
  },
];

function Carousel() {
  const [idx, setIdx] = useState(0);
  const [paused, setPaused] = useState(false);
  useEffect(() => {
    if (paused) return;
    const t = setInterval(() => setIdx(i => (i + 1) % SLIDES.length), 5000);
    return () => clearInterval(t);
  }, [paused]);
  const go = (d) => setIdx(i => (i + d + SLIDES.length) % SLIDES.length);
  const deco = (k) => k === "model"
    ? <Icon.Cpu size={120} style={{ opacity: 0.18, position: "absolute", right: 40, bottom: 20 }} />
    : <Icon.Cloud size={140} style={{ opacity: 0.18, position: "absolute", right: 30, bottom: 10 }} />;
  return (
    <div className="carousel" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
      <div className="carousel-track" style={{ transform: `translateX(-${idx * 100}%)` }}>
        {SLIDES.map((s, i) => (
          <div className="carousel-slide" key={s.id} style={{ background: s.gradient }} data-screen-label={"carousel-" + s.id}>
            {deco(s.deco)}
            <div className="carousel-slide-bg" />
            <div className="carousel-slide-content">
              <span className="carousel-slide-eyebrow"><Icon.Sparkles size={14} /> {s.eyebrow}</span>
              <h2 className="carousel-slide-title">{s.title}</h2>
              <p className="carousel-slide-sub">{s.sub}</p>
              <div className="carousel-slide-cta">
                <a className="btn btn--primary btn--lg" href="campaign-landing.html">{s.cta}</a>
                <a className="btn btn--ghost btn--lg" href="campaign-landing.html">了解更多 <Icon.ArrowRight size={16} /></a>
              </div>
            </div>
          </div>
        ))}
      </div>
      <button className="carousel-arrow carousel-arrow--prev" onClick={() => go(-1)} aria-label="上一张"><Icon.ArrowLeft size={22} /></button>
      <button className="carousel-arrow carousel-arrow--next" onClick={() => go(1)} aria-label="下一张"><Icon.ArrowRight size={22} /></button>
      <div className="carousel-dots">
        {SLIDES.map((s, i) => (
          <button key={s.id} className={"carousel-dot" + (i === idx ? " carousel-dot--active" : "")} onClick={() => setIdx(i)} aria-label={s.title} />
        ))}
      </div>
    </div>
  );
}

function BusinessCard({ type, name, desc, tags, cta }) {
  return (
    <div className={"business-card business-card--" + type}>
      <span className="business-card-icon">
        {type === "model" ? <Icon.Sparkles size={28} /> : <Icon.Cloud size={28} />}
      </span>
      <h3 className="business-card-name">{name}</h3>
      <p className="business-card-desc">{desc}</p>
      <div className="business-card-tags">
        {tags.map(t => <span key={t} className="tag tag--neutral">{t}</span>)}
      </div>
      <a className="btn btn--secondary business-card-cta" href={type === "model" ? "#" : "#"}>
        {cta} <Icon.ArrowRight size={16} />
      </a>
    </div>
  );
}

function QuickConfig() {
  const [product, setProduct] = useState("model");
  const [model, setModel] = useState("gpt4o");
  const [tier, setTier] = useState("standard");
  const [duration, setDuration] = useState("1m");
  const price = { model: 299, cloud: 880 }[product] || 299;
  const Field = ({ label, value, onChange, options }) => (
    <div>
      <label className="quick-config-field-label">{label}</label>
      <select className="select" value={value} onChange={e => onChange(e.target.value)}>
        {options.map(o => <option key={o.v} value={o.v}>{o.l}</option>)}
      </select>
    </div>
  );
  return (
    <div className="quick-config">
      <div className="quick-config-header">
        <div>
          <h3 className="quick-config-title">快速配置询价</h3>
          <p className="quick-config-desc">选择产品配置，实时估算月费</p>
        </div>
        <Icon.TrendingUp size={28} style={{ color: "var(--color-primary)" }} />
      </div>
      <div className="quick-config-fields">
        <Field label="产品类型" value={product} onChange={setProduct}
          options={[{v:"model",l:"模型推理"},{v:"cloud",l:"智算云"}]} />
        <Field label="模型 / 规格" value={model} onChange={setModel}
          options={[{v:"gpt4o",l:"GPT-4o"},{v:"claude",l:"Claude"},{v:"glm",l:"GLM-4"},{v:"wen",l:"文心"}]} />
        <Field label="配置规格" value={tier} onChange={setTier}
          options={[{v:"standard",l:"标准版"},{v:"pro",l:"专业版"},{v:"ent",l:"企业版"}]} />
        <Field label="时长" value={duration} onChange={setDuration}
          options={[{v:"1m",l:"1 个月"},{v:"3m",l:"3 个月"},{v:"6m",l:"6 个月"},{v:"1y",l:"1 年"}]} />
      </div>
      <div className="quick-config-price">
        <div>
          <div className="quick-config-price-label">预估价格</div>
          <div><span className="quick-config-price-num">${price.toFixed(2)}</span><span className="quick-config-price-unit">/ 月</span></div>
        </div>
        <span className="tag tag--success"><Icon.Sparkles size={12} /> 含首月抵扣</span>
      </div>
      <div className="quick-config-actions">
        <button className="btn btn--secondary btn--lg">业务办理</button>
        <button className="btn btn--primary btn--lg">一键下单 <Icon.ArrowRight size={16} /></button>
      </div>
    </div>
  );
}

// 右上角登录态区域：仅区分未登录 / 已登录
function TopbarActions({ isLoggedIn, balance }) {
  if (!isLoggedIn) {
    return (
      <div className="home-topbar-actions">
        <button className="btn btn--text">登录</button>
        <button className="btn btn--primary">立即注册</button>
      </div>
    );
  }
  return (
    <div className="home-topbar-actions">
      {balance != null && (
        <span className="home-user-badge" style={{ background: "var(--color-primary-outline-bg)", color: "var(--color-primary)" }}>
          <Icon.Wallet size={14} /> 营销金 <strong>${balance.toFixed(2)}</strong>
        </span>
      )}
      <span className="avatar">林</span>
    </div>
  );
}

function Home({ isLoggedIn, balance }) {
  return (
    <div className="home">
      <Logo variant="full" context="floating" style={{ position: "fixed", top: 60, left: 24, zIndex: 1001 }} />
      <header className="home-topbar">
        <nav className="home-nav">
          <a className="active" href="marketing-home.html">首页</a>
          <a href="campaign-landing.html">活动</a>
          <a href="benefits.html">我的权益</a>
        </nav>
        <div className="home-topbar-spacer" />
        <TopbarActions isLoggedIn={isLoggedIn} balance={balance} />
      </header>

      <main className="home-main" data-screen-label="marketing-home">

        <section data-region="marketing-carousel"><Carousel /></section>

        <div className="section-title-wrap">
          <span className="section-title-eyebrow">CORE SERVICES</span>
          <h2 className="section-title">核心业务</h2>
        </div>
        <section className="business-grid" data-region="marketing-business">
          <BusinessCard type="model" name="多模态大模型服务"
            desc="文本生成、代码补全、推理问答、文生图、视频生成。覆盖 GPT-4o、Claude、GLM 等主流模型，统一 API 接入。"
            tags={["GPT-4o", "Claude", "文生图", "视频生成"]} cta="立即体验" />
          <BusinessCard type="cloud" name="智算云服务"
            desc="弹性 GPU 集群，支持训练与推理一体化。分钟级扩缩容，按量计费，适配大模型全生命周期算力需求。"
            tags={["A100", "H800", "弹性扩缩", "训练推理"]} cta="了解详情" />
        </section>

        <div className="section-title-wrap">
          <span className="section-title-eyebrow">QUOTE</span>
          <h2 className="section-title">快速配置询价</h2>
        </div>
        <section data-region="marketing-config"><QuickConfig /></section>
      </main>

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

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const balance = isLoggedIn ? 200 : null;
  return (
    <div className="proto-root">
      <ProtoNav active="home" />
      <StateSwitcher
        states={HOME_STATES}
        active={isLoggedIn}
        onChange={setIsLoggedIn}
        title="登录态"
        variant="top-collapsible"
      />
      <Home isLoggedIn={isLoggedIn} balance={balance} />
    </div>
  );
}

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