import {
  Apple,
  ArrowRight,
  CheckCircle2,
  ClipboardCheck,
  Cloud,
  Command,
  Download,
  FolderInput,
  Gauge,
  Globe2,
  HardDriveUpload,
  LockKeyhole,
  MousePointer2,
  Network,
  Server,
  Sparkles,
  TerminalSquare,
  UploadCloud,
} from 'lucide-react';
import appIcon from '../../build/appicon.png';

const defaultDownloadUrl =
  'https://github.com/mamamiyear/SnapGo/releases/latest/download/SnapGo-0.1.0-arm64.dmg';

const downloadUrl = import.meta.env.VITE_DOWNLOAD_URL || defaultDownloadUrl;

const providers = ['AWS S3', 'MinIO', 'Cloudflare R2', 'Backblaze B2'];

const workflow = [
  {
    title: '全局快捷键截图',
    detail: '菜单栏常驻，按下 cmd+shift+a 后直接框选当前屏幕内容。',
    icon: Command,
  },
  {
    title: '选择上传目标',
    detail: '对象存储得到公开 URL，远端服务器得到 SSH 家目录下的路径。',
    icon: Network,
  },
  {
    title: '自动复制结果',
    detail: '上传完成后，URL 或 ~/snapgo/...png 已经在剪贴板里。',
    icon: ClipboardCheck,
  },
];

const featureCards = [
  {
    title: '截图直传对象存储',
    copy: '接入 S3 兼容端点，支持路径前缀和自定义公开地址，适合自有图床和 CDN。',
    icon: Cloud,
  },
  {
    title: '远端服务器保存',
    copy: '通过 SSH/SCP 写入远端主机，复制相对家目录路径，方便登录服务器后立刻定位。',
    icon: Server,
  },
  {
    title: '失败也有兜底',
    copy: '上传失败时保住截图文件，避免截了一次图却丢了上下文。',
    icon: FolderInput,
  },
  {
    title: '为高频沟通而轻',
    copy: '截图、上传、复制三步合一，发给聊天、工单、Issue、PR 都不打断手上的事。',
    icon: Gauge,
  },
];

const comparison = [
  '不用打开图床网页',
  '不用手动保存再拖拽',
  '不用把图片交给陌生服务',
  '不用给 CLI Agent 拼 base64',
];

function App() {
  return (
    <div className="site-shell">
      <header className="hero">
        <nav className="top-nav" aria-label="主导航">
          <a className="brand" href="#top" aria-label="SnapGo 首页">
            <img src={appIcon} alt="" />
            <span>SnapGo</span>
          </a>
          <div className="nav-actions">
            <a href="#workflow">工作流</a>
            <a href="#destinations">远端目标</a>
            <a className="nav-download" href={downloadUrl}>
              <Download size={16} aria-hidden="true" />
              下载
            </a>
          </div>
        </nav>

        <div className="hero-grid" id="top">
          <div className="hero-copy">
            <div className="eyebrow">
              <Sparkles size={16} aria-hidden="true" />
              macOS 截图直传工具
            </div>
            <h1>截完图，链接已经在剪贴板。</h1>
            <p className="hero-lede">
              SnapGo 把「框选截图 → 上传远端 → 复制链接或路径」压缩成一次动作。
              图片进你的对象存储或远端服务器，分享结果立刻可粘贴。
            </p>
            <div className="hero-actions">
              <a className="primary-cta" href={downloadUrl}>
                <Apple size={19} aria-hidden="true" />
                下载 macOS Apple silicon
              </a>
              <a className="secondary-cta" href="#destinations">
                看远端目标
                <ArrowRight size={17} aria-hidden="true" />
              </a>
            </div>
            <div className="hero-proof" aria-label="核心能力">
              <span>S3 兼容对象存储</span>
              <span>SSH/SCP 远端服务器</span>
              <span>自动复制 URL/路径</span>
            </div>
          </div>

          <div className="hero-visual" aria-label="SnapGo 截图上传工作流示意">
            <img className="hero-app-icon" src={appIcon} alt="SnapGo 应用图标" />
            <div className="capture-scene">
              <div className="desktop-bar">
                <span />
                <span />
                <span />
              </div>
              <div className="selection-box">
                <div className="selection-label">1280 x 720</div>
                <div className="toolbar" aria-hidden="true">
                  <MousePointer2 size={16} />
                  <UploadCloud size={16} />
                  <HardDriveUpload size={16} />
                  <ClipboardCheck size={16} />
                </div>
              </div>
              <div className="result-stack">
                <div className="result-line">
                  <Globe2 size={15} aria-hidden="true" />
                  <span>https://cdn.example.com/snapgo/2026/06/shot.png</span>
                </div>
                <div className="result-line">
                  <TerminalSquare size={15} aria-hidden="true" />
                  <span>~/snapgo/2026/06/shot.png</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </header>

      <main>
        <section className="quick-strip" aria-label="上传目标">
          {providers.map((provider) => (
            <span key={provider}>{provider}</span>
          ))}
          <span>Custom CDN</span>
          <span>SSH Host</span>
        </section>

        <section className="section workflow-section" id="workflow">
          <div className="section-heading">
            <p>一次动作</p>
            <h2>给截图分享装上直达通道</h2>
          </div>
          <div className="workflow-grid">
            {workflow.map((item, index) => {
              const Icon = item.icon;
              return (
                <article className="workflow-card" key={item.title}>
                  <div className="step-index">0{index + 1}</div>
                  <Icon size={25} aria-hidden="true" />
                  <h3>{item.title}</h3>
                  <p>{item.detail}</p>
                </article>
              );
            })}
          </div>
        </section>

        <section className="section split-section" id="destinations">
          <div className="destination-copy">
            <p className="section-kicker">远端优先</p>
            <h2>对象存储给 URL，服务器给路径。</h2>
            <p>
              SnapGo 的吸引力不只是「能截图」，而是截图完成后直接抵达你真正要用的地方：
              公开链接可以贴进文档和 PR，远端路径可以给脚本、服务器会话或 Agent 继续处理。
            </p>
            <ul className="check-list">
              {comparison.map((item) => (
                <li key={item}>
                  <CheckCircle2 size={18} aria-hidden="true" />
                  {item}
                </li>
              ))}
            </ul>
          </div>

          <div className="destination-panel" aria-label="远端配置示意">
            <div className="panel-head">
              <span>Destination</span>
              <strong>Ready</strong>
            </div>
            <div className="route-row active">
              <Cloud size={20} aria-hidden="true" />
              <div>
                <strong>S3 compatible</strong>
                <span>snapgo/2026/06/*.png → public URL</span>
              </div>
            </div>
            <div className="route-row">
              <Server size={20} aria-hidden="true" />
              <div>
                <strong>SSH remote</strong>
                <span>~/snapgo/2026/06/*.png → clipboard path</span>
              </div>
            </div>
            <div className="clipboard-preview">
              <ClipboardCheck size={19} aria-hidden="true" />
              <code>Copied: https://cdn.example.com/snapgo/shot.png</code>
            </div>
          </div>
        </section>

        <section className="section feature-section">
          <div className="section-heading">
            <p>为什么值得用</p>
            <h2>为每天反复发截图的人打磨</h2>
          </div>
          <div className="feature-grid">
            {featureCards.map((feature) => {
              const Icon = feature.icon;
              return (
                <article className="feature-card" key={feature.title}>
                  <Icon size={24} aria-hidden="true" />
                  <h3>{feature.title}</h3>
                  <p>{feature.copy}</p>
                </article>
              );
            })}
          </div>
        </section>

        <section className="final-cta" aria-labelledby="download-title">
          <div>
            <p className="section-kicker">SnapGo for macOS</p>
            <h2 id="download-title">把截图分享流程缩短到一次粘贴。</h2>
            <p>
              当前主要围绕 macOS 体验打磨，推荐 Apple silicon 设备下载使用。
            </p>
          </div>
          <a className="primary-cta final-button" href={downloadUrl}>
            <Download size={19} aria-hidden="true" />
            下载 macOS Apple silicon
          </a>
        </section>
      </main>
    </div>
  );
}

export default App;