import {
  ArrowRight,
  CirclePlay,
  Coins,
  FolderKanban,
  ImagePlus,
  ShieldCheck,
  Sparkles,
} from "lucide-react";
import Link from "next/link";

const productHighlights = [
  {
    title: "生成工作台",
    copy: "把模型、提示词、时长、比例和素材引用收进一个创作面板。",
    icon: Sparkles,
  },
  {
    title: "素材系统",
    copy: "图片、视频、音频参考素材统一入库，创作时直接调用。",
    icon: ImagePlus,
  },
  {
    title: "任务追踪",
    copy: "生成状态实时刷新，结果视频、积分消耗和任务详情一屏可见。",
    icon: FolderKanban,
  },
  {
    title: "积分与增长",
    copy: "充值、兑换码、注册奖励和邀请关系形成完整的商业闭环。",
    icon: Coins,
  },
];

export default function HomePage() {
  return (
    <main className="marketing-home">
      <header className="marketing-nav">
        <div className="marketing-logo">AIVideo</div>
        <nav className="marketing-nav-links">
          <a href="#product">产品能力</a>
          <a href="#workflow">创作流程</a>
          <a href="#ops">运营控制</a>
        </nav>
        <div className="marketing-nav-actions">
          <Link href="/login" className="marketing-link-button">
            登录
          </Link>
          <Link href="/register" className="marketing-primary-button">
            立即体验
          </Link>
        </div>
      </header>

      <section className="marketing-hero">
        <div className="marketing-hero-copy">
          <span className="marketing-kicker">AI VIDEO PLATFORM</span>
          <h1>把视频生成、素材管理与运营链路，做成可交付的产品级体验。</h1>
          <p>
            AIVideo 把用户创作端与后台控制台收进同一套系统里，既能让普通用户顺滑出片，也能让运营团队管理模型、价格、订单与任务健康度。
          </p>
          <div className="marketing-hero-actions">
            <Link href="/register" className="marketing-primary-button">
              免费开始
              <ArrowRight size={16} />
            </Link>
            <Link href="/login" className="marketing-secondary-button">
              进入工作台
            </Link>
          </div>
          <div className="marketing-stat-row">
            <div>
              <strong>一体化</strong>
              <span>创作、素材、任务、钱包和后台控制台</span>
            </div>
            <div>
              <strong>更少跳转</strong>
              <span>用户从提示词到成片提交只需要一条主流程</span>
            </div>
            <div>
              <strong>可商业化</strong>
              <span>支持积分、充值、兑换和邀请奖励体系</span>
            </div>
          </div>
        </div>

        <div className="marketing-stage">
          <div className="marketing-stage-card marketing-stage-card-dark">
            <div className="marketing-stage-label">Creator Workspace</div>
            <h2>一块真正能交付创作结果的 AI 工作台</h2>
            <p>
              把模型选择、提示词、素材引用和任务提交放在同一屏里，让用户不需要理解底层供应商和协议，也能稳定完成视频生产。
            </p>
            <div className="marketing-chip-row">
              <span>Text to video</span>
              <span>Asset references</span>
              <span>Task polling</span>
            </div>
          </div>

          <div className="marketing-stage-grid">
            <div className="marketing-stage-card">
              <CirclePlay size={18} />
              <strong>从提交到成片</strong>
              <span>任务页持续刷新进度，成功后直接打开结果视频。</span>
            </div>
            <div className="marketing-stage-card">
              <Coins size={18} />
              <strong>从增长到付费</strong>
              <span>积分冻结、充值订单、兑换码和奖励规则统一串联。</span>
            </div>
          </div>
        </div>
      </section>

      <section className="marketing-section marketing-section-light" id="product">
        <div className="marketing-section-copy">
          <span className="marketing-kicker">Product Capabilities</span>
          <h2>对用户足够简单，对业务足够完整。</h2>
          <p>
            不是一个只有生成接口的 DEMO，而是一套从创作体验到运营规则都能继续打磨和落地的产品基础设施。
          </p>
        </div>
        <div className="marketing-tile-grid">
          {productHighlights.map((item) => {
            const Icon = item.icon;
            return (
              <article className="marketing-tile" key={item.title}>
                <div className="marketing-tile-icon">
                  <Icon size={20} />
                </div>
                <h3>{item.title}</h3>
                <p>{item.copy}</p>
              </article>
            );
          })}
        </div>
      </section>

      <section className="marketing-section marketing-section-dark" id="workflow">
        <div className="marketing-section-copy">
          <span className="marketing-kicker">Workflow</span>
          <h2>把复杂的视频生成流程，压缩成用户能理解的三步。</h2>
        </div>
        <div className="marketing-flow-grid">
          <div className="marketing-flow-card">
            <span>01</span>
            <strong>选择模型与输出规格</strong>
            <p>平台只暴露对创作真正重要的参数，不把底层技术复杂度扔给用户。</p>
          </div>
          <div className="marketing-flow-card">
            <span>02</span>
            <strong>组织提示词和参考素材</strong>
            <p>提示词、图片、视频和音频素材在同一工作台里互相配合。</p>
          </div>
          <div className="marketing-flow-card">
            <span>03</span>
            <strong>提交任务并持续跟踪</strong>
            <p>任务记录页承接状态轮询、扣费结果和最终视频交付。</p>
          </div>
        </div>
      </section>

      <section className="marketing-section marketing-section-light" id="ops">
        <div className="marketing-ops-shell">
          <div className="marketing-section-copy">
            <span className="marketing-kicker">Operations Console</span>
            <h2>面向运营和业务团队的控制台，也在同一套设计语言里。</h2>
            <p>
              用户端强调体验，后台强调秩序。两者共享同一业务模型，但在视觉气质上各自准确，不互相污染。
            </p>
          </div>
          <div className="marketing-ops-card">
            <ShieldCheck size={20} />
            <strong>用户、模型、价格、任务、回调与系统配置</strong>
            <p>
              运营后台不是附属页面，而是产品交付的一部分。AIVideo
              从一开始就把增长、付费和模型治理一起纳入设计。
            </p>
            <Link href="/admin/login" className="marketing-link-inline">
              进入管理员登录
              <ArrowRight size={14} />
            </Link>
          </div>
        </div>
      </section>
    </main>
  );
}