const REF_CODE = "BroLeon";
const REGISTER_URL = "https://partner.pionex.com/p/BroLeon";
const APP_DOWNLOAD_URL = "https://download.pionex.com/?lang=en&type=trial_fund";
const ACTIVITY_PERIOD = "2026/05/29 – 2026/06/30 UTC+8";
const GOOGLE_SHEET_WEBHOOK_URL = "https://script.google.com/macros/s/AKfycbxRSIhIdLUx31uQMgFL3ld7jXP2c6FZ0ZsR50kfIeLNtn8Uyd2aK832OlCObjCNqOo8/exec";
const MU_GRID_URL =
  "https://link.pionex.com/?url=https%3A%2F%2Fwww.pionex.com%2Ffutures%2FMUX.PERP_USDT%2FBot%3FriskLessOrder%3Dtrue%26page_name%3DfuturesGridRiskLessActivity%26copy_type%3Dactivity_compensation_copybot0529MU&page=GridV4FuturesCreateRiskLessActivity&copy_type=activity_compensation_copybot0529MU";
const GRID_GIF_URL = "https://pionex-boyin-landing.vercel.app/faq/grid.gif";

const links = {
  register: REGISTER_URL,
  appDownload: APP_DOWNLOAD_URL,
  stockGrid: MU_GRID_URL
};

const guideImages = {
  register: [
    { src: "./public/assets/register-guide.png", fileName: "register-guide.png" },
    { src: "./public/assets/register-guide2.png", fileName: "register-guide2.png" }
  ],
  kyc: { src: "./public/assets/kyc-guide.png", fileName: "kyc-guide.png" },
  googleAuth: [
    { src: "./public/assets/google-auth-guide.png", fileName: "google-auth-guide.png" },
    { src: "./public/assets/google-auth-guide2.png", fileName: "google-auth-guide2.png" }
  ],
  tradingBonus: { src: "./public/assets/trading-bonus-guide.png", fileName: "trading-bonus-guide.png" },
  uid: { src: "./public/assets/uid-guide.png", fileName: "uid-guide.png" }
};

const navItems = [
  { label: "活动流程", href: "#process" },
  { label: "美股网格", href: "#stock-grid" },
  { label: "图文教学", href: "#tutorials" },
  { label: "交易金", href: "#trading-credit" },
  { label: "提交 UID", href: "#uid-copy" },
  { label: "FAQ", href: "#faq" }
];

const stockGridAssets = [
  {
    rank: "1",
    symbol: "MU",
    name: "美光",
    category: "半导体",
    spot: "+37.73%",
    benefit: "+56.60%",
    href: MU_GRID_URL
  },
  {
    rank: "2",
    symbol: "TSLA",
    name: "特斯拉",
    category: "科技巨头",
    spot: "+12.58%",
    benefit: "+18.87%",
    href: "https://link.pionex.com/?url=https%3A%2F%2Fwww.pionex.com%2Ffutures%2FTSLAX.PERP_USDT%2FBot%3FriskLessOrder%3Dtrue%26page_name%3DfuturesGridRiskLessActivity%26copy_type%3Dactivity_compensation_copybot0529TSLA&page=GridV4FuturesCreateRiskLessActivity&copy_type=activity_compensation_copybot0529TSLA"
  },
  {
    rank: "3",
    symbol: "SNDK",
    name: "闪迪",
    category: "半导体",
    spot: "+11.96%",
    benefit: "+17.94%",
    href: "https://link.pionex.com/?url=https%3A%2F%2Fwww.pionex.com%2Ffutures%2FSNDKX.PERP_USDT%2FBot%3FriskLessOrder%3Dtrue%26page_name%3DfuturesGridRiskLessActivity%26copy_type%3Dactivity_compensation_copybot0529SNDK&page=GridV4FuturesCreateRiskLessActivity&copy_type=activity_compensation_copybot0529SNDK"
  },
  {
    rank: "4",
    symbol: "NVDA",
    name: "辉达",
    category: "半导体",
    spot: "+7.63%",
    benefit: "+11.45%",
    href: "https://link.pionex.com/?url=https%3A%2F%2Fwww.pionex.com%2Ffutures%2FNVDAX.PERP_USDT%2FBot%3FriskLessOrder%3Dtrue%26page_name%3DfuturesGridRiskLessActivity%26copy_type%3Dactivity_compensation_copybot0529NVDAX&page=GridV4FuturesCreateRiskLessActivity&copy_type=activity_compensation_copybot0529NVDAX"
  },
  {
    rank: "5",
    symbol: "ETH",
    name: "以太币",
    category: "加密货币",
    spot: "+6.71%",
    benefit: "+10.07%",
    href: "https://link.pionex.com/?url=https%3A%2F%2Fwww.pionex.com%2Ffutures%2FETH.PERP_USDT%2FBot%3FriskLessOrder%3Dtrue%26page_name%3DfuturesGridRiskLessActivity%26copy_type%3Dactivity_compensation_copybot0529ETH&page=GridV4FuturesCreateRiskLessActivity&copy_type=activity_compensation_copybot0529ETH"
  },
  {
    rank: "6",
    symbol: "BTC",
    name: "比特币",
    category: "加密货币",
    spot: "+6.65%",
    benefit: "+9.98%",
    href: "https://link.pionex.com/?url=https%3A%2F%2Fwww.pionex.com%2Ffutures%2FBTC.PERP_USDT%2FBot%3FriskLessOrder%3Dtrue%26page_name%3DfuturesGridRiskLessActivity%26copy_type%3Dactivity_compensation_copybot0529BTC&page=GridV4FuturesCreateRiskLessActivity&copy_type=activity_compensation_copybot0529BTC"
  },
  {
    rank: "7",
    symbol: "AMZN",
    name: "亚马逊",
    category: "科技巨头",
    spot: "+5.50%",
    benefit: "+8.25%",
    href: "https://link.pionex.com/?url=https%3A%2F%2Fwww.pionex.com%2Ffutures%2FAMZNX.PERP_USDT%2FBot%3FriskLessOrder%3Dtrue%26page_name%3DfuturesGridRiskLessActivity%26copy_type%3Dactivity_compensation_copybot0529AMZNX&page=GridV4FuturesCreateRiskLessActivity&copy_type=activity_compensation_copybot0529AMZNX"
  },
  {
    rank: "8",
    symbol: "GOOGL",
    name: "谷歌",
    category: "科技巨头",
    spot: "+4.25%",
    benefit: "+6.38%",
    href: "https://link.pionex.com/?url=https%3A%2F%2Fwww.pionex.com%2Ffutures%2FGOOGLX.PERP_USDT%2FBot%3FriskLessOrder%3Dtrue%26page_name%3DfuturesGridRiskLessActivity%26copy_type%3Dactivity_compensation_copybot0529GOOGLEX&page=GridV4FuturesCreateRiskLessActivity&copy_type=activity_compensation_copybot0529GOOGLEX"
  },
  {
    rank: "9",
    symbol: "SMSN",
    name: "三星",
    category: "半导体",
    spot: "+4.04%",
    benefit: "+6.06%",
    href: "https://link.pionex.com/?url=https%3A%2F%2Fwww.pionex.com%2Ffutures%2FSMSN.PERP_USDT%2FBot%3FriskLessOrder%3Dtrue%26page_name%3DfuturesGridRiskLessActivity%26copy_type%3Dactivity_compensation_copybot0529SMHX&page=GridV4FuturesCreateRiskLessActivity&copy_type=activity_compensation_copybot0529SMHX"
  },
  {
    rank: "10",
    symbol: "USOX",
    name: "原油",
    category: "大宗商品",
    spot: "+4.00%",
    benefit: "+6.00%",
    href: "https://link.pionex.com/?url=https%3A%2F%2Fwww.pionex.com%2Ffutures%2FUSOX.PERP_USDT%2FBot%3FriskLessOrder%3Dtrue%26page_name%3DfuturesGridRiskLessActivity%26copy_type%3Dactivity_compensation_copybot0529wti&page=GridV4FuturesCreateRiskLessActivity&copy_type=activity_compensation_copybot0529wti"
  },
  {
    rank: "11",
    symbol: "AAPL",
    name: "苹果",
    category: "科技巨头",
    spot: "+3.75%",
    benefit: "+5.63%",
    href: "https://link.pionex.com/?url=https%3A%2F%2Fwww.pionex.com%2Ffutures%2FAAPLX.PERP_USDT%2FBot%3FriskLessOrder%3Dtrue%26page_name%3DfuturesGridRiskLessActivity%26copy_type%3Dactivity_compensation_copybot0529AAPLX&page=GridV4FuturesCreateRiskLessActivity&copy_type=activity_compensation_copybot0529AAPLX"
  },
  {
    rank: "12",
    symbol: "TSM",
    name: "台积电",
    category: "半导体",
    spot: "+3.48%",
    benefit: "+5.22%",
    href: "https://link.pionex.com/?url=https%3A%2F%2Fwww.pionex.com%2Ffutures%2FTSMX.PERP_USDT%2FBot%3FriskLessOrder%3Dtrue%26page_name%3DfuturesGridRiskLessActivity%26copy_type%3Dactivity_compensation_copybot0529&page=GridV4FuturesCreateRiskLessActivity&copy_type=activity_compensation_copybot0529"
  },
  {
    rank: "13",
    symbol: "MSFT",
    name: "微软",
    category: "科技巨头",
    spot: "+2.16%",
    benefit: "+3.24%",
    href: "https://link.pionex.com/?url=https%3A%2F%2Fwww.pionex.com%2Ffutures%2FMSFTX.PERP_USDT%2FBot%3FriskLessOrder%3Dtrue%26page_name%3DfuturesGridRiskLessActivity%26copy_type%3Dactivity_compensation_copybot0529MSFTX&page=GridV4FuturesCreateRiskLessActivity&copy_type=activity_compensation_copybot0529MSFTX"
  },
  {
    rank: "14",
    symbol: "XAUT",
    name: "泰达金",
    category: "大宗商品",
    spot: "+2.15%",
    benefit: "+3.23%",
    href: "https://link.pionex.com/?url=https%3A%2F%2Fwww.pionex.com%2Ffutures%2FXAUT.PERP_USDT%2FBot%3FriskLessOrder%3Dtrue%26page_name%3DfuturesGridRiskLessActivity%26copy_type%3Dactivity_compensation_copybot0529XAUT&page=GridV4FuturesCreateRiskLessActivity&copy_type=activity_compensation_copybot0529XAUT"
  },
  {
    rank: "15",
    symbol: "META",
    name: "脸书",
    category: "科技巨头",
    spot: "+0.65%",
    benefit: "+0.98%",
    href: "https://link.pionex.com/?url=https%3A%2F%2Fwww.pionex.com%2Ffutures%2FMETAX.PERP_USDT%2FBot%3FriskLessOrder%3Dtrue%26page_name%3DfuturesGridRiskLessActivity%26copy_type%3Dactivity_compensation_copybot0529METAX&page=GridV4FuturesCreateRiskLessActivity&copy_type=activity_compensation_copybot0529METAX"
  }
];

const faqItems = [
  {
    question: "美股网格是什么？",
    answer:
      "美股网格是一种基于美股标的（如 SNDK、MU）的自动化网格策略，会在预设价格区间内自动低买高卖，帮助用户在市场波动中持续捕捉交易机会并积累网格收益。"
  },
  {
    question: "我已经注册了，为什么不能领取活动？",
    answer:
      "请先确认你是否使用本页的注册链接进行注册，是否完成 KYC 身份认证，是否使用相同的账号登入 Pionex App。若仍无法领取，请联系官方客服。"
  },
  {
    question: "没有 KYC 可以领取奖励吗？",
    answer:
      "不可以哦，一定要完成 KYC2（二级身份认证）才可以领取活动奖励。"
  },
  {
    question: "1000 USDT 是直接送给我吗？",
    answer:
      "美股网格仓位属于活动体验仓位或活动权益，并不等于可自由提现的 USDT 现金。通过网格策略产生的盈利部分可以按规则提取。该仓位通常会设置止盈止损（最高 20% 止盈 / 止损）。"
  },
  {
    question: "领取后需要自己操作吗？",
    answer:
      "美股网格策略会自动执行买卖操作，但你仍需在 App 内查看仓位状态。"
  },
  {
    question: "绩效是保证的吗？",
    answer:
      "不保证。任何历史收益、历史表现或策略展示均不代表未来收益。网格策略可能因市场波动产生盈利或亏损，请根据自身风险承受能力谨慎参与。"
  },
  {
    question: "怎么手动添加邀请码？",
    answer: (
      <>
        点击「个人中心」→「邀请码」→ 输入 BroLeon。<br />
        有其他问题请联系 Pionex X 客服：@Eberlinliu0220
      </>
    )
  }
];

const categoryClassNames = {
  半导体: "category-badge category-semiconductor",
  科技巨头: "category-badge category-tech",
  加密货币: "category-badge category-crypto",
  大宗商品: "category-badge category-commodity"
};

function CTAButton({ href, children, variant = "primary", className = "" }) {
  const base =
    "focus-ring inline-flex min-h-11 items-center justify-center rounded-full px-5 py-3 text-sm font-black transition";
  const styles = {
    primary: "cta-primary text-ink",
    secondary: "cta-secondary text-white",
    dark: "border border-slate-800 bg-slate-950 text-white hover:bg-slate-800",
    ghost: "cta-secondary text-white"
  };

  return (
    <a href={href} className={`${base} ${styles[variant]} ${className}`} target={href.startsWith("http") ? "_blank" : undefined} rel="noreferrer">
      {children}
    </a>
  );
}

function CopyRefButton({ compact = false }) {
  const [copied, setCopied] = React.useState(false);

  function copyCode() {
    navigator.clipboard?.writeText(REF_CODE);
    setCopied(true);
    window.setTimeout(() => setCopied(false), 1600);
  }

  return (
    <button
      className={`focus-ring cta-secondary inline-flex min-h-11 items-center justify-center rounded-full px-5 py-3 text-sm font-black text-white transition ${compact ? "min-h-9 px-4 py-2 text-xs" : ""}`}
      type="button"
      onClick={copyCode}
    >
      {copied ? "已复制" : compact ? "复制" : "复制推荐码"}
    </button>
  );
}

function Header() {
  return (
    <header className="sticky top-0 z-40 border-b border-white/10 bg-[#09090b]/88 text-white backdrop-blur-xl">
      <div className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-3">
        <a href="#top" className="focus-ring rounded text-base font-black">
          Pionex
        </a>
        <nav className="hidden items-center gap-1 overflow-x-auto lg:flex" aria-label="Primary navigation">
          {navItems.map((item) => (
            <a key={item.href} href={item.href} className="focus-ring rounded-full px-3 py-2 text-sm font-semibold text-slate-300 hover:bg-white/10 hover:text-white">
              {item.label}
            </a>
          ))}
        </nav>
        <CTAButton href={links.register} className="hidden lg:inline-flex">
          立即注册
        </CTAButton>
      </div>
      <nav className="mx-auto flex max-w-6xl gap-2 overflow-x-auto px-4 pb-3 lg:hidden" aria-label="Mobile section navigation">
        {navItems.map((item) => (
          <a key={item.href} href={item.href} className="focus-ring shrink-0 rounded-full border border-white/10 bg-white/5 px-3 py-2 text-xs font-bold text-slate-200">
            {item.label}
          </a>
        ))}
      </nav>
    </header>
  );
}

function Hero() {
  return (
    <section id="top" className="hero-grid bg-ink text-white">
      <div className="mx-auto grid min-h-[720px] max-w-6xl items-center gap-8 px-4 py-16 sm:py-20 lg:grid-cols-[1.12fr_0.88fr]">
        <div>
          <p className="mb-5 inline-flex rounded-full border border-amber-400/35 bg-amber-400/10 px-4 py-2 text-sm font-semibold text-amber-200">
            土澳大狮兄专属｜海外华人新户活动
          </p>
          <h1 className="max-w-4xl text-4xl font-black leading-tight sm:text-5xl lg:text-6xl">
            <span className="block">Pionex 新户美股网格活动</span>
            <span className="hero-title-accent mt-4 block">领取 1000 美金网格仓位</span>
          </h1>
          <p className="mt-6 max-w-2xl text-base leading-8 text-slate-300 sm:text-lg">
            15 个热门标的任你选，美光、闪迪、英伟达、比特币、以太坊、原油、黄金等热门标的均可参与。完成注册后，按官方活动页面提示领取 1000 美金美股网格仓位。
          </p>
          <div className="mt-8 flex flex-col gap-3 sm:flex-row sm:flex-wrap">
            <CTAButton href={links.register}>立即注册 Pionex</CTAButton>
            <CTAButton href={links.appDownload} variant="ghost">下载派网 App</CTAButton>
            <CopyRefButton />
          </div>
        </div>
        <HeroProfitCard />
      </div>
    </section>
  );
}

function CheckIcon() {
  return (
    <svg aria-hidden="true" className="h-8 w-8" fill="none" viewBox="0 0 24 24">
      <path d="m5 12.5 4.2 4.2L19 6.8" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.8" />
    </svg>
  );
}

function ShieldIcon() {
  return (
    <svg aria-hidden="true" className="h-8 w-8" fill="none" viewBox="0 0 24 24">
      <path d="M12 3.4 19 6v5.5c0 4.5-2.9 7.5-7 9.1-4.1-1.6-7-4.6-7-9.1V6l7-2.6Z" stroke="currentColor" strokeLinejoin="round" strokeWidth="2.2" />
    </svg>
  );
}

function ProfitItems() {
  const items = [
    { eyebrow: "盈利", title: "盈利的金额都可以提取", icon: <CheckIcon /> },
    { eyebrow: "亏损", title: "亏损由派网承担", icon: <ShieldIcon /> }
  ];

  return items.map((item) => (
    <article key={item.eyebrow} className="flex items-center gap-5">
      <div className="profit-icon flex h-20 w-20 shrink-0 items-center justify-center rounded-2xl text-white">
        {item.icon}
      </div>
      <div>
        <p className="text-base font-black text-white">{item.eyebrow}</p>
        <h2 className="mt-2 text-2xl font-black leading-tight text-white sm:text-3xl">{item.title}</h2>
      </div>
    </article>
  ));
}

function HeroProfitCard() {
  return (
    <aside className="profit-banner mx-auto grid w-full max-w-[500px] gap-6 rounded-3xl p-5 sm:p-7 lg:justify-self-end">
      <ProfitItems />
    </aside>
  );
}

function WhyGridSection() {
  const cards = [
    {
      title: "现货",
      text: "容易因为波动拿不住，涨跌都容易情绪化操作。"
    },
    {
      title: "Grid Bot 网格机器人",
      text: "自动低买高卖，利用波动积累网格收益，适合想参与行情但不想频繁盯盘的用户。",
      featured: true
    },
    {
      title: "杠杆 / 合约",
      text: "潜在收益更高，但风险也更高，新手容易因为波动被动止损或爆仓。"
    }
  ];

  return (
    <section className="anchor-offset bg-[#0b0b0f] px-4 py-16 text-white" id="why-grid">
      <div className="mx-auto max-w-6xl">
        <SectionTitle
          title="为什么要使用网格机器人？"
          subtitle="很多投资者拿不住现货，杠杆风险又太高。Grid Bot 位于两者之间，利用市场波动自动低买高卖，帮助用户更系统地参与行情。"
          light
        />
        <div className="grid gap-5 lg:grid-cols-3">
          {cards.map((card) => (
            <article key={card.title} className={`${card.featured ? "grid-compare-card-featured" : "grid-compare-card"} rounded-3xl p-5 sm:p-6`}>
              <h3 className="text-2xl font-black text-white">{card.title}</h3>
              <p className="mt-4 leading-7 text-slate-300">{card.text}</p>
            </article>
          ))}
        </div>
        <p className="mt-5 rounded-2xl border border-white/10 bg-white/5 p-4 text-sm font-semibold leading-6 text-slate-300">
          网格策略不保证收益，市场波动可能产生盈利或亏损，请根据自身风险承受能力参与。
        </p>
      </div>
    </section>
  );
}

function SectionTitle({ eyebrow, title, subtitle, light = false }) {
  return (
    <div className="mx-auto mb-8 max-w-3xl text-center">
      {eyebrow && <p className="mb-3 text-sm font-black uppercase text-amber-400">{eyebrow}</p>}
      <h2 className={`text-3xl font-black tracking-normal sm:text-4xl ${light ? "text-white" : "text-slate-950"}`}>{title}</h2>
      {subtitle && <p className={`mt-4 text-base leading-7 ${light ? "text-slate-300" : "text-slate-600"}`}>{subtitle}</p>}
    </div>
  );
}

function UIDSubmitForm() {
  const [uid, setUid] = React.useState("");
  const [status, setStatus] = React.useState("idle");
  const [message, setMessage] = React.useState("");

  function validateUid(value) {
    const trimmed = value.trim();

    if (!trimmed) return "请输入你的派网 UID";
    if (!/^\d+$/.test(trimmed)) return "UID 只能填写数字";
    if (trimmed.length < 6 || trimmed.length > 12) return "请输入正确的 UID";
    return "";
  }

  async function handleSubmit(event) {
    event.preventDefault();

    if (status === "submitting") return;

    const error = validateUid(uid);
    if (error) {
      setStatus("error");
      setMessage(error);
      return;
    }

    setStatus("submitting");
    setMessage("");

    try {
      await fetch(GOOGLE_SHEET_WEBHOOK_URL, {
        method: "POST",
        mode: "no-cors",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          uid: uid.trim(),
          referralCode: REF_CODE,
          campaign: "Pionex Stock Grid BroLeon",
          submittedAt: new Date().toISOString(),
          pageUrl: window.location.href
        })
      });

      setUid("");
      setStatus("submitted");
      setMessage("提交成功，我们会在确认入金后发放 50 USDT 交易金");
      window.setTimeout(() => setStatus("idle"), 1800);
    } catch {
      setStatus("error");
      setMessage("提交失败，请稍后重试或联系工作人员");
    }
  }

  return (
    <form className="uid-card rounded-3xl p-5 sm:p-6" onSubmit={handleSubmit}>
      <h3 className="text-xl font-black text-white">提交 UID 报名活动</h3>
      <div className="mt-5 grid gap-3">
        <input
          className="focus-ring uid-input min-h-12 rounded-full px-4 font-semibold"
          inputMode="numeric"
          placeholder="例如 12345678"
          value={uid}
          onChange={(event) => {
            setUid(event.target.value);
            if (status === "error") {
              setStatus("idle");
              setMessage("");
            }
          }}
          aria-describedby="uid-submit-message uid-submit-note"
        />
        <button className="focus-ring cta-primary inline-flex min-h-12 w-full items-center justify-center rounded-full px-5 py-3 text-sm font-black text-ink transition" type="submit" disabled={status === "submitting"}>
          {status === "submitting" ? "提交中..." : status === "submitted" ? "已提交" : "送出 UID 报名活动 →"}
        </button>
      </div>
      {message && (
        <p id="uid-submit-message" className={`mt-4 rounded-2xl px-4 py-3 text-sm font-bold leading-6 ${status === "error" ? "form-message-error" : "form-message-success"}`}>
          {message}
        </p>
      )}
      <p id="uid-submit-note" className="mt-4 text-sm leading-6 text-slate-300">UID 可在派网 App →「我的」→ 个人中心查看。请确认 UID 正确后再提交。</p>
    </form>
  );
}

function ProcessStep({ number, title, description, actions, alignActions = "start" }) {
  return (
    <article className="dark-card rounded-2xl p-5">
      <div className="flex items-start gap-4">
        <span className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-amber-500 text-sm font-black text-ink">
          {number}
        </span>
        <div>
          <p className="text-xs font-black text-amber-300">STEP {number}</p>
          <h3 className="mt-1 text-xl font-black text-white">{title}</h3>
          <p className="mt-3 leading-7 text-slate-300">{description}</p>
        </div>
      </div>
      {actions?.length > 0 && (
        <div className={`mt-5 flex flex-wrap gap-3 ${alignActions === "center" ? "justify-center" : ""}`}>
          {actions.map((action) => (
            <CTAButton key={action.label} href={action.href} variant={action.variant} className={action.className || ""}>
              {action.label}
            </CTAButton>
          ))}
        </div>
      )}
    </article>
  );
}

function ProcessSection() {
  return (
    <section className="anchor-offset bg-[#0b0b0f] px-4 py-16 text-white" id="process">
      <div className="mx-auto max-w-6xl">
        <SectionTitle title="完成 4 步骤即可参与活动" subtitle="本页核心奖励：领取 1000 美金美股网格仓位；入金 100 USDT 后，领取 50 USDT 交易金。" light />
        <div className="grid gap-5 lg:grid-cols-2">
          <ProcessStep
            number="01"
            title="使用专属链接注册"
            description={`点击本页任一注册按钮进入 Pionex，推荐码统一为 ${REF_CODE}。`}
            alignActions="center"
            actions={[{ label: "立即注册", href: links.register, variant: "primary", className: "min-w-[220px]" }]}
          />
          <ProcessStep
            number="02"
            title="下载并登录派网 App"
            description="完成注册后，下载派网 App，并使用刚刚注册的账号登录。"
            alignActions="center"
            actions={[{ label: "下载派网 App", href: links.appDownload, variant: "primary", className: "min-w-[220px]" }]}
          />
          <ProcessStep
            number="03"
            title="选择想体验的美股，领取 1000 美金仓位"
            description="在下方美股网格活动区选择 MU、TSLA、SNDK、NVDA 或 ETH，点击「领取」后按照官方活动页面提示完成领取流程。"
            alignActions="center"
            actions={[{ label: "前往选择美股网格 →", href: "#stock-grid", variant: "primary", className: "min-w-[220px]" }]}
          />
          <ProcessStep
            number="04"
            title="入金 100 USDT，再领 50 USDT 交易金"
            description="入金 100 USDT 后，可获得 50 USDT 交易金。交易金可用于交易美股、RWA 或加密货币，优先抵扣手续费与亏损，盈利部分可全部提现。"
            alignActions="center"
            actions={[{ label: "提交 UID 报名活动 →", href: "#uid-copy", variant: "primary", className: "min-w-[220px]" }]}
          />
        </div>
      </div>
    </section>
  );
}

function StockGridSection() {
  return (
    <section className="anchor-offset stock-section px-4 py-16 text-white" id="stock-grid">
      <div className="mx-auto max-w-6xl">
        <SectionTitle
          eyebrow="美股网格"
          title="选择下方美股，领取 1000 美金网格仓位"
          subtitle={`活动时间：${ACTIVITY_PERIOD}。选择指定标的后，可按官方活动页提示领取 1000 美金美股网格体验仓位。`}
          light
        />
        <div className="mb-5 rounded-2xl border border-amber-300/30 bg-amber-400/10 p-4 text-sm font-bold leading-7 text-amber-100 shadow-lg shadow-amber-500/10">
          注意一定要先下载派网 App 哟<br />
          没装 App 将无法领取网格仓位<br />
          手机用户请右划领取
        </div>
        <div className="table-scroll overflow-x-auto rounded-3xl border border-white/10 bg-black/28 shadow-2xl shadow-black/30">
          <table className="w-full min-w-[760px] text-left text-sm">
            <thead className="bg-white/8 text-slate-200">
              <tr>
                {["排名", "标的", "分类", "现货", "福利单", "操作"].map((heading) => (
                  <th key={heading} className="px-4 py-4 font-black">
                    {heading}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {stockGridAssets.map(({ rank, symbol, name, category, spot, benefit, href }) => (
                <tr key={symbol} className="stock-row border-t border-white/10">
                  <td className="px-4 py-5">
                    <span className="rank-chip">{rank}</span>
                  </td>
                  <td className="px-4 py-5">
                    <div className="flex items-center gap-3">
                      <div>
                        <div className="stock-symbol text-white">{symbol}</div>
                        <div className="mt-1 text-sm font-semibold text-slate-400">{name}</div>
                      </div>
                    </div>
                  </td>
                  <td className="px-4 py-5">
                    <span className={categoryClassNames[category] || "category-badge"}>{category}</span>
                  </td>
                  <td className="px-4 py-5 font-black text-emerald-400/90">{spot}</td>
                  <td className="px-4 py-5 font-black text-orange-300">{benefit}</td>
                  <td className="px-4 py-5">
                    <CTAButton href={href} variant="secondary" className="claim-button min-h-10 min-w-[92px] px-4 py-2">
                      领取 →
                    </CTAButton>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <p className="mt-4 text-sm leading-6 text-slate-400">以上数据为活动展示信息，历史表现不代表未来收益。</p>
      </div>
    </section>
  );
}

function GuideImage({ image, title, subtitle, ratio = "wide", className = "" }) {
  const imageList = Array.isArray(image) ? image : [image].filter(Boolean);
  const [missing, setMissing] = React.useState({});
  const fallbackList = imageList.length > 0 ? imageList : [{ fileName: "", src: "" }];

  return (
    <div className={`visual-placeholder ${ratio === "banner" ? "visual-placeholder-banner" : ""} ${ratio === "phone" ? "visual-placeholder-phone" : ""} mt-5 rounded-3xl p-6 text-center ${className}`}>
      <div className="guide-image-stack">
        {fallbackList.map((item, index) => {
          const key = item.fileName || `${title}-${index}`;
          const isMissing = missing[key] || !item.src;
          const placeholderTitle = item.fileName ? `图片待替换：${item.fileName}` : title;

          return (
            <div key={key}>
              {!isMissing && (
                <img
                  className="guide-asset mx-auto"
                  src={item.src}
                  alt={imageList.length > 1 ? `${title} ${index + 1}` : title}
                  onError={() => setMissing((current) => ({ ...current, [key]: true }))}
                />
              )}
              {isMissing && (
                <div className="guide-placeholder mx-auto flex min-h-[180px] max-w-4xl flex-col items-center justify-center rounded-2xl border border-dashed border-orange-300/35 bg-black/18 px-5 py-8">
                  <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-2xl border border-amber-200/20 bg-amber-300/10 text-amber-100">
                    <svg aria-hidden="true" className="h-7 w-7" fill="none" viewBox="0 0 24 24">
                      <path d="M7 3h10a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z" stroke="currentColor" strokeWidth="1.8" />
                      <path d="M9 7h6M9 11h6M9 15h4" stroke="currentColor" strokeLinecap="round" strokeWidth="1.8" />
                    </svg>
                  </div>
                  <p className="text-lg font-black text-orange-100">{placeholderTitle}</p>
                  <p className="mt-3 max-w-2xl text-sm leading-6 text-slate-300">{subtitle}</p>
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

function TutorialAccordion({ title, children, defaultOpen = false }) {
  return (
    <details className="tutorial-card group rounded-3xl p-5 sm:p-6" open={defaultOpen}>
      <summary className="focus-ring flex cursor-pointer list-none items-center justify-between gap-4 rounded-2xl font-black text-white">
        <span className="text-xl">{title}</span>
        <span className="rounded-full bg-amber-500 px-3 py-1 text-sm text-ink group-open:hidden">展开</span>
        <span className="hidden rounded-full bg-white/12 px-3 py-1 text-sm text-white group-open:inline">收合</span>
      </summary>
      <div className="mt-6">{children}</div>
    </details>
  );
}

function TutorialsSection() {
  return (
    <section className="anchor-offset bg-[#111114] px-4 py-16 text-white" id="tutorials">
      <div className="mx-auto max-w-5xl">
        <SectionTitle title="注册、KYC 与 Google 验证器教学" light />
        <div className="grid gap-5">
          <TutorialAccordion title="注册派网教学" defaultOpen>
            <p className="leading-7 text-slate-300">
              第一次使用派网吗？跟着下面步骤完成 App 安装、注册与推荐码填写。注册时请务必确认推荐码为 {REF_CODE}，才能参与本页活动。
            </p>
            <div className="mt-5 flex flex-col gap-4 rounded-2xl border border-amber-300/20 bg-amber-400/10 p-4 sm:flex-row sm:items-center sm:justify-between">
              <div>
                <p className="text-xs font-black text-amber-200">必填｜推荐码</p>
                <p className="mt-2 break-all text-2xl font-black text-[#ffb36a]">{REF_CODE}</p>
              </div>
              <CopyRefButton compact />
            </div>
            <GuideImage image={guideImages.register} title="注册教学图片占位" subtitle="稍后替换为 App 安装、注册、填写推荐码截图" ratio="banner" />
            <div className="mt-5">
              <CTAButton href={links.register}>立即前往注册派网</CTAButton>
            </div>
          </TutorialAccordion>

          <TutorialAccordion title="KYC 身份验证怎么做？">
            <p className="leading-7 text-slate-300">
              为了符合平台安全与规则要求，完成身份验证后才能完整使用派网账户功能，并参与部分新户活动。请根据 App 内提示完成认证。
            </p>
            <div className="mt-5 grid gap-3 sm:grid-cols-2 lg:grid-cols-5">
              {["有效身份证件", "可收信的 Email", "手机", "稳定网络环境", "光线充足的拍摄环境"].map((item) => (
                <div key={item} className="rounded-2xl border border-white/10 bg-white/6 p-4 text-sm font-bold text-slate-100">
                  {item}
                </div>
              ))}
            </div>
            <GuideImage image={guideImages.kyc} title="KYC 教学图片占位" subtitle="稍后替换为点击头像、实名验证、上传资料截图" />
            <p className="mt-5 rounded-2xl border border-amber-300/20 bg-amber-400/10 p-4 text-sm font-bold leading-6 text-amber-100">
              KYC 通过后，即可回到本页选择美股网格标的并领取活动奖励。
            </p>
            <div className="mt-5 grid gap-3">
              {[
                ["KYC 一定要做吗？", "若要完整参与新户活动、领取活动奖励或使用更多账户功能，通常需要完成 KYC。实际规则请以官方活动页面为准。"],
                ["KYC 多久会完成？", "一般会依照平台审核状况而定，请以 App 显示结果为准。"],
                ["KYC 没通过怎么办？", "请确认证件照片是否清楚、资料是否一致，并依照 App 内提示重新提交。"]
              ].map(([question, answer]) => (
                <div key={question} className="rounded-2xl border border-white/10 bg-black/20 p-4">
                  <p className="font-black text-white">Q：{question}</p>
                  <p className="mt-2 text-sm leading-6 text-slate-300">A：{answer}</p>
                </div>
              ))}
            </div>
          </TutorialAccordion>

          <TutorialAccordion title="Google 验证器设置教学">
            <p className="leading-7 text-slate-300">
              Google Authenticator 是双重验证工具，设置后在登录、提币或修改安全设置时都需要输入 6 位数动态码，可以提升账户安全。
            </p>
            <div className="mt-5 grid gap-4 lg:grid-cols-2">
              <div className="rounded-2xl border border-white/10 bg-white/6 p-5">
                <p className="text-xs font-black text-amber-300">PART A</p>
                <h3 className="mt-2 text-xl font-black text-white">下载 Google Authenticator</h3>
                <p className="mt-3 leading-7 text-slate-300">先安装 Authenticator App，再回到派网 App 绑定账户。</p>
                <div className="mt-5 flex flex-wrap gap-3">
                  <CTAButton href={links.appDownload} variant="secondary">iOS</CTAButton>
                  <CTAButton href={links.appDownload} variant="secondary">Android</CTAButton>
                </div>
              </div>
              <div className="rounded-2xl border border-white/10 bg-white/6 p-5">
                <p className="text-xs font-black text-amber-300">PART B</p>
                <h3 className="mt-2 text-xl font-black text-white">绑定派网账户</h3>
                <p className="mt-3 leading-7 text-slate-300">在派网 App 的安全设置中选择 Google 验证器，按步骤绑定并保存密钥。</p>
              </div>
            </div>
            <GuideImage image={guideImages.googleAuth} title="Google 验证器绑定图片占位" subtitle="稍后替换为绑定 Google 验证器、输入验证码、保存密钥截图" />
            <div className="mt-5 rounded-2xl border border-rose-300/20 bg-rose-400/10 p-4">
              <p className="font-black text-rose-100">安全提醒</p>
              <div className="mt-3 grid gap-2 text-sm font-semibold leading-6 text-rose-50 sm:grid-cols-2">
                {["务必备份密钥", "不要把验证码截图发给任何人", "官方客服不会要求你提供 Google 验证码", "更换手机前，请先确认验证器可正常转移"].map((item) => (
                  <p key={item}>• {item}</p>
                ))}
              </div>
            </div>
          </TutorialAccordion>
        </div>
      </div>
    </section>
  );
}

function TradingCreditGuide() {
  return (
    <section className="anchor-offset bg-[#0b0b0f] px-4 py-16 text-white" id="trading-credit">
      <div className="mx-auto max-w-6xl">
        <SectionTitle title="如何查看交易金？" subtitle="收到交易金后，可按以下 3 步骤查看并使用" light />
        <GuideImage
          image={guideImages.tradingBonus}
          title="交易金教学图片占位"
          subtitle="稍后替换为查看合约账户、查看交易金详情、使用交易金开单截图"
          ratio="phone"
          className="mx-auto max-w-[420px]"
        />
      </div>
    </section>
  );
}

function UIDCopyGuide() {
  return (
    <section className="anchor-offset bg-[#111114] px-4 py-16 text-white" id="uid-copy">
      <div className="mx-auto max-w-3xl">
        <SectionTitle
          title="提交 UID，领取 50 USDT 交易金"
          subtitle="完成入金 100 USDT 后，请复制你的派网 UID 并提交，工作人员会在确认入金后发放 50 USDT 交易金。"
          light
        />
        <div className="mx-auto max-w-[620px]">
          <UIDSubmitForm />
        </div>
      </div>
    </section>
  );
}

function FAQAccordion() {
  return (
    <div className="grid gap-3">
      {faqItems.map((item, index) => (
        <details key={item.question} className="dark-card group rounded-2xl p-5" open={index === 0}>
          <summary className="focus-ring flex cursor-pointer list-none items-center justify-between gap-4 rounded-xl font-black text-white">
            <span>{item.question}</span>
            <span className="shrink-0 text-2xl leading-none text-amber-400 group-open:rotate-45">+</span>
          </summary>
          <p className="mt-4 leading-7 text-slate-300">{item.answer}</p>
          {index === 0 && <img className="mt-5 w-full max-w-full rounded-2xl border border-white/10 bg-black/30" src={GRID_GIF_URL} alt="美股网格使用动态示意图" />}
        </details>
      ))}
    </div>
  );
}

function Footer() {
  return (
    <footer className="bg-black px-4 pb-24 pt-12 text-white sm:pb-12">
      <div className="mx-auto max-w-6xl">
        <div className="flex flex-col justify-between gap-6 sm:flex-row sm:items-start">
          <div>
            <h2 className="text-2xl font-black">土澳大狮兄专属｜Pionex 新户美股网格活动</h2>
            <p className="mt-4 max-w-4xl text-sm leading-7 text-slate-400">
              本页面仅作为活动参与与产品操作教学用途，不构成任何投资建议、财务建议或保证收益。美股、加密货币、RWA 资产与网格策略皆可能受到市场波动影响而产生损益。活动资格、奖励内容、领取期限与实际规则，请以 Pionex 官方活动页面公告为准。
            </p>
          </div>
          <div className="flex shrink-0 flex-col gap-3">
            <CTAButton href={links.register}>立即注册</CTAButton>
            <CTAButton href={links.appDownload} variant="ghost">下载派网 App</CTAButton>
          </div>
        </div>
      </div>
    </footer>
  );
}

function StickyMobileCTA() {
  return (
    <div className="fixed inset-x-0 bottom-0 z-50 border-t border-white/10 bg-[#09090b]/95 p-3 shadow-2xl backdrop-blur sm:hidden">
      <CTAButton href={links.register} className="w-full">
        立即注册 Pionex
      </CTAButton>
    </div>
  );
}

function App() {
  return (
    <>
      <Header />
      <main>
        <Hero />
        <WhyGridSection />
        <ProcessSection />
        <StockGridSection />
        <TutorialsSection />
        <TradingCreditGuide />
        <UIDCopyGuide />

        <section className="anchor-offset bg-[#0b0b0f] px-4 py-16" id="faq">
          <div className="mx-auto max-w-4xl">
            <SectionTitle title="常见问题" light />
            <FAQAccordion />
          </div>
        </section>
      </main>
      <Footer />
      <StickyMobileCTA />
    </>
  );
}

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