const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primary": "#CC785C",
  "bg": "#F5F1EB",
  "serif": "\"Source Serif 4\", \"Noto Serif SC\", Georgia, serif",
  "showRibbon": true,
  "heroVariant": "code"
}/*EDITMODE-END*/;

function App() {
  const t = TWEAK_DEFAULTS;
  const [openFaq, setOpenFaq] = useState(0);

  useEffect(() => {
    document.documentElement.style.setProperty('--primary', t.primary);
    document.documentElement.style.setProperty('--bg', t.bg);
    document.documentElement.style.setProperty('--serif', t.serif);
  }, []);

  return (
    <div className="page">
      <Nav />
      <Hero variant={t.heroVariant} />
      <Trust />
      <Benefits />
      <Pricing showRibbon={t.showRibbon} />
      <Integration />
      <Faq openFaq={openFaq} setOpenFaq={setOpenFaq} />
      <CtaBanner />
      <Footer />
    </div>
  );
}

/* ============ Nav ============ */
function Nav() {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a className="logo" href="/">
          <LogoMark />
          <span>ShopAI</span>
        </a>
        <div className="nav-links">
          <a href="#benefits">优势</a>
          <a href="#pricing">定价</a>
          <a href="#integration">接入</a>
          <a href="#faq">FAQ</a>
        </div>
        <div className="nav-cta">
          <a href="https://code.wearekna.com/login" className="btn btn-ghost">登录</a>
          <a href="https://code.wearekna.com/register" className="btn btn-primary">注册</a>
        </div>
      </div>
    </nav>
  );
}

function LogoMark() {
  return (
    <svg width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true">
      <rect x="1" y="1" width="20" height="20" rx="5" fill="var(--primary)" />
      <path d="M7 14.5L11 6.5L15 14.5M8.6 11.5H13.4" stroke="#fff" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

/* ============ Hero ============ */
function Hero({ variant }) {
  return (
    <section className="hero">
      <div className="container hero-inner">
        <div className="hero-eyebrow">
          <span className="dot" /> Claude API · 中国开发者直连
        </div>
        <h1 className="hero-title">
          用<em>人民币</em>，调用<br />
          Claude 官方 API
        </h1>
        <p className="hero-sub">
          免海外信用卡、免审核、余额永不过期。注册即拿 API Key，<br className="md-only" />
          5 分钟接入 Claude Code 与 Anthropic SDK。
        </p>
        <div className="hero-cta">
          <a href="https://code.wearekna.com/register" className="btn btn-primary btn-lg">立即注册 <span className="arr">→</span></a>
          <a href="#pricing" className="btn btn-ghost btn-lg">查看定价</a>
        </div>
        <div className="hero-meta">
          <span><Check /> 注册免审核</span>
          <span className="dot-sep">·</span>
          <span><Check /> 信用卡 / Link 充值</span>
          <span className="dot-sep">·</span>
          <span><Check /> Opus · Sonnet · Haiku</span>
        </div>

        <HeroDemo variant={variant} />
      </div>
    </section>
  );
}

function Check() {
  return (
    <svg width="13" height="13" viewBox="0 0 13 13" fill="none" aria-hidden="true" style={{ marginRight: 6, verticalAlign: '-2px' }}>
      <path d="M2.5 6.8L5.2 9.4L10.5 3.6" stroke="var(--primary)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function HeroDemo({ variant }) {
  if (variant === 'minimal') {
    return (
      <div className="hero-demo hero-demo-minimal">
        <div className="key-row">
          <span className="key-label">API KEY</span>
          <code className="key-value">sk-shop-•••••••••••••••••••••a3F2</code>
          <button className="key-copy">复制</button>
        </div>
        <div className="key-foot">余额 ¥98.40 · 永不过期</div>
      </div>
    );
  }

  if (variant === 'terminal') {
    return (
      <div className="hero-demo terminal">
        <div className="term-bar">
          <span /><span /><span />
          <span className="term-title">~/my-app</span>
        </div>
        <div className="term-body">
          <div><span className="term-prompt">$</span> <span className="term-cmd">claude</span> <span className="term-arg">"帮我写个函数 ..."</span></div>
          <div className="term-out">✓ Connected to ShopAI · model: claude-sonnet-4</div>
          <div className="term-out term-dim">  使用 245 tokens · 扣费 ¥0.012 · 余额 ¥98.39</div>
          <div><span className="term-prompt">$</span> <span className="term-caret">▍</span></div>
        </div>
      </div>
    );
  }

  // code snippet (default)
  return (
    <div className="hero-demo code-card">
      <div className="code-head">
        <span className="code-tab active">.bashrc</span>
        <span className="code-tab">claude-code</span>
        <span className="code-tab">SDK</span>
        <span className="code-copy">复制</span>
      </div>
      <pre className="code-body"><code>
        <span className="c-cm"># 三行配置，原生兼容 Anthropic SDK</span>{'\n'}
        <span className="c-kw">export</span> <span className="c-id">ANTHROPIC_BASE_URL</span>=<span className="c-str">"https://code.wearekna.com"</span>{'\n'}
        <span className="c-kw">export</span> <span className="c-id">ANTHROPIC_AUTH_TOKEN</span>=<span className="c-str">"sk-shop-xxxx"</span>{'\n'}
        <span className="c-kw">export</span> <span className="c-id">ANTHROPIC_MODEL</span>=<span className="c-str">"claude-sonnet-4-20250514"</span>{'\n'}
        {'\n'}
        <span className="c-cm"># 然后像往常一样使用 Claude Code</span>{'\n'}
        <span className="c-cmd">claude</span> <span className="c-str">"重构这个函数"</span>
      </code></pre>
    </div>
  );
}

/* ============ Trust strip ============ */
function Trust() {
  return (
    <section className="trust">
      <div className="container trust-inner">
        <span className="trust-label">兼容生态</span>
        <div className="trust-logos">
          <span>Claude Code</span>
          <span className="sep" />
          <span>Anthropic SDK</span>
          <span className="sep" />
          <span>Cline</span>
          <span className="sep" />
          <span>Cursor</span>
          <span className="sep" />
          <span>Continue</span>
          <span className="sep" />
          <span>Aider</span>
        </div>
      </div>
    </section>
  );
}

/* ============ Benefits ============ */
function Benefits() {
  const items = [
    {
      n: '01',
      title: '免审核即用',
      desc: '不需要海外手机号、不需要信用卡、不会被实名拦截。注册一分钟开通，立刻拿到可用的 API Key。',
      icon: <IconLock />,
      bullets: ['国内手机号注册', '无需身份验证', '不限制地区与代理'],
    },
    {
      n: '02',
      title: '余额永不过期',
      desc: '充值即到账，不是月费订阅。哪怕一年只用一次，余额都还在。按实际消耗扣费，随时停用不浪费。',
      icon: <IconClock />,
      bullets: ['一次充值，永久可用', '无最低消费', '不强制套餐'],
    },
    {
      n: '03',
      title: '透明计费',
      desc: '严格按 Anthropic 官方价格按 token 实时扣费，不加价、不打包。Dashboard 看得到每一次请求、每一分钱。',
      icon: <IconReceipt />,
      bullets: ['官方同价', '逐次请求明细', '可导出账单'],
    },
  ];

  return (
    <section id="benefits" className="benefits">
      <div className="container">
        <div className="section-head">
          <div className="kicker">为什么选 ShopAI</div>
          <h2 className="section-title">为中国开发者<br />解决三件麻烦事。</h2>
        </div>
        <div className="benefit-grid">
          {items.map((it) => (
            <article key={it.n} className="benefit-card">
              <div className="benefit-num">{it.n}</div>
              <div className="benefit-icon">{it.icon}</div>
              <h3 className="benefit-title">{it.title}</h3>
              <p className="benefit-desc">{it.desc}</p>
              <ul className="benefit-list">
                {it.bullets.map((b) => (
                  <li key={b}><Check />{b}</li>
                ))}
              </ul>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function IconLock() {
  return (
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" aria-hidden="true">
      <path d="M8 12V9a6 6 0 0112 0v3" stroke="var(--primary)" strokeWidth="1.6" strokeLinecap="round" />
      <rect x="6" y="12" width="16" height="12" rx="2.5" stroke="var(--primary)" strokeWidth="1.6" />
      <circle cx="14" cy="18" r="1.6" fill="var(--primary)" />
    </svg>
  );
}
function IconClock() {
  return (
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" aria-hidden="true">
      <circle cx="14" cy="14" r="9.5" stroke="var(--primary)" strokeWidth="1.6" />
      <path d="M14 8.5V14L17.8 16.2" stroke="var(--primary)" strokeWidth="1.6" strokeLinecap="round" />
    </svg>
  );
}
function IconReceipt() {
  return (
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" aria-hidden="true">
      <path d="M7 4h14v20l-2.5-1.6L16 24l-2.5-1.6L11 24l-2.5-1.6L7 24V4z" stroke="var(--primary)" strokeWidth="1.6" strokeLinejoin="round" />
      <path d="M10.5 9h7M10.5 13h7M10.5 17h4.5" stroke="var(--primary)" strokeWidth="1.6" strokeLinecap="round" />
    </svg>
  );
}

/* ============ Pricing ============ */
function Pricing({ showRibbon }) {
  const tiers = [
    {
      name: '入门',
      cny: 35,
      usd: '5.00',
      bonus: null,
      hint: '适合初次试用、做个 Demo',
      features: [
        '到账 $5.00 USD 等值额度',
        'Opus / Sonnet / Haiku 全模型',
        '约 250 万 Haiku tokens',
        '邮件支持',
      ],
      cta: '充值 $5',
      featured: false,
    },
    {
      name: '专业',
      cny: 140,
      usd: '20.00',
      bonus: null,
      hint: '日常项目开发，最受开发者欢迎',
      features: [
        '到账 $20.00 USD 等值额度',
        '约 1300 万 Sonnet 输入 tokens',
        '更高并发限额',
        '优先邮件支持',
      ],
      cta: '充值 $20',
      featured: true,
    },
    {
      name: '商家',
      cny: 700,
      usd: '100.00',
      bonus: null,
      hint: '中等规模团队 / 长期项目',
      features: [
        '到账 $100.00 USD 等值额度',
        '最高并发限额',
        '工单 + 1v1 接入支持',
        '可申请发票',
      ],
      cta: '充值 $100',
      featured: false,
    },
  ];

  return (
    <section id="pricing" className="pricing">
      <div className="container">
        <div className="section-head center">
          <div className="kicker">充值档位</div>
          <h2 className="section-title">充多少，<em>到账多少</em>。</h2>
          <p className="section-sub">人民币按当日汇率折算成 USD 余额，按 Anthropic 官方 token 价实时扣费，余额永不过期。</p>
        </div>

        <div className="pricing-grid">
          {tiers.map((tier) => (
            <article key={tier.name} className={`tier ${tier.featured ? 'tier-featured' : ''}`}>
              {tier.featured && showRibbon && <div className="ribbon">最受欢迎</div>}
              <div className="tier-name">{tier.name}</div>
              <div className="tier-price">
                <span className="cny">¥{tier.cny}</span>
                <span className="usd">→ 到账 <strong>${tier.usd}</strong> USD</span>
              </div>
              {tier.bonus && <div className="tier-bonus">⭐ {tier.bonus}</div>}
              <div className="tier-hint">{tier.hint}</div>
              <ul className="tier-features">
                {tier.features.map((f) => (
                  <li key={f}><Check />{f}</li>
                ))}
              </ul>
              <a href="https://code.wearekna.com/register" className={`btn btn-lg btn-block ${tier.featured ? 'btn-primary' : 'btn-outline'}`}>{tier.cta}</a>
            </article>
          ))}
        </div>

        <div className="pricing-extra">
          <div className="extra-item">
            <div className="extra-title">自定义金额</div>
            <p>支持任意金额充值，<strong>$5 起</strong>，按需调整。</p>
          </div>
          <div className="extra-divider" />
          <div className="extra-item">
            <div className="extra-title">企业大客户</div>
            <p>单次 <strong>$200+</strong>，专属返点 / 发票 / 私有部署，<a href="mailto:info@wearekna.com">联系销售 →</a></p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ Integration ============ */
function Integration() {
  return (
    <section id="integration" className="integration">
      <div className="container integ-inner">
        <div className="integ-text">
          <div className="kicker">5 分钟接入</div>
          <h2 className="section-title">改一个 <em>baseURL</em>，<br />其他什么都不用动。</h2>
          <p className="section-sub">
            ShopAI 与 Anthropic 官方 API 完全一致。任何支持 <code>ANTHROPIC_BASE_URL</code> 的工具或 SDK，
            把指向改到 <code>code.wearekna.com</code>，再换上你的 ShopAI Key 就能直接跑。
          </p>
          <div className="integ-tags">
            <span>Claude Code</span>
            <span>Python SDK</span>
            <span>TypeScript SDK</span>
            <span>Cursor</span>
            <span>Cline</span>
            <span>Aider</span>
            <span>OpenAI 兼容端点</span>
          </div>
          <a href="https://code.wearekna.com/docs" className="link-arrow">查看完整接入文档 →</a>
        </div>

        <div className="integ-code">
          <div className="code-card code-card-flat">
            <div className="code-head">
              <span className="code-tab active">Python</span>
              <span className="code-tab">TypeScript</span>
              <span className="code-tab">cURL</span>
            </div>
            <pre className="code-body"><code>
              <span className="c-kw">from</span> anthropic <span className="c-kw">import</span> Anthropic{'\n'}
              {'\n'}
              client = Anthropic({'\n'}
              {'  '}base_url=<span className="c-str">"https://code.wearekna.com"</span>,{'\n'}
              {'  '}api_key=<span className="c-str">"sk-shop-xxxx"</span>,{'\n'}
              {'){'}{'\n'}
              {'\n'}
              msg = client.messages.create({'\n'}
              {'  '}model=<span className="c-str">"claude-sonnet-4-20250514"</span>,{'\n'}
              {'  '}max_tokens=<span className="c-num">1024</span>,{'\n'}
              {'  '}messages=[{'\n'}
              {'    '}{'{'}<span className="c-str">"role"</span>: <span className="c-str">"user"</span>,{'\n'}
              {'     '}<span className="c-str">"content"</span>: <span className="c-str">"你好"</span>{'}'},{'\n'}
              {'  '}],{'\n'}
              {')'}
            </code></pre>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ FAQ ============ */
function Faq({ openFaq, setOpenFaq }) {
  const items = [
    {
      q: 'ShopAI 是 Anthropic 官方还是中转服务？',
      a: 'ShopAI 是独立运营的中转服务，不是 Anthropic 官方。我们把你的请求转发到 Anthropic 官方 API，完整透传 Opus / Sonnet / Haiku 所有能力。模型质量和官方 100% 一致——因为请求最终就是发给 Anthropic 的。',
    },
    {
      q: '充 $20 大概能用多久？余额会过期吗？',
      a: '看你用什么模型。$20 余额可以跑约 130 万 Sonnet 输入 tokens，或约 2000 万 Haiku 输入 tokens。一般日常 Coding / Chat 场景能用一到两个月。余额永不过期，不像月费订阅过期清零。',
    },
    {
      q: '支持哪些支付方式？可以开发票吗？',
      a: '当前支持 Visa / Mastercard / American Express 等主流信用卡，以及 Stripe Link。企业大额充值（$200+）可申请增值税普通发票，请联系 info@wearekna.com。所有充值在 Dashboard 都有记录，可以导出对账。',
    },
    {
      q: '如何接入 Claude Code / Anthropic SDK？',
      a: 'Claude Code 设置 ANTHROPIC_BASE_URL 和 ANTHROPIC_AUTH_TOKEN 两个环境变量即可。Python / TypeScript SDK 只需在初始化时把 base_url 改到 https://code.wearekna.com，其余代码不用动。我们提供完整接入文档与示例。',
    },
    {
      q: '不满意能退款吗？',
      a: '充值后 7 天内、未消费部分可全额原路退款。已消费部分按 Anthropic 实际扣费结算，不收任何手续费。详情见退款政策。',
    },
  ];

  return (
    <section id="faq" className="faq">
      <div className="container faq-inner">
        <div className="faq-head">
          <div className="kicker">FAQ</div>
          <h2 className="section-title">常见问题</h2>
          <p className="section-sub">还有别的疑问？给我们发邮件 <a href="mailto:info@wearekna.com">info@wearekna.com</a></p>
        </div>
        <div className="faq-list">
          {items.map((it, i) => (
            <div key={i} className={`faq-item ${openFaq === i ? 'open' : ''}`}>
              <button className="faq-q" onClick={() => setOpenFaq(openFaq === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="faq-toggle" aria-hidden="true">
                  <span className="bar bar-h" />
                  <span className="bar bar-v" />
                </span>
              </button>
              <div className="faq-a-wrap">
                <p className="faq-a">{it.a}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ CTA banner ============ */
function CtaBanner() {
  return (
    <section className="cta-banner">
      <div className="container cta-inner">
        <h2 className="cta-title">3 分钟拿到 <em>API Key</em>。</h2>
        <p className="cta-sub">注册免审核，按需充值，余额永不过期。立刻调通 Claude。</p>
        <div className="hero-cta">
          <a href="https://code.wearekna.com/register" className="btn btn-primary btn-lg">立即注册 <span className="arr">→</span></a>
          <a href="https://code.wearekna.com/docs" className="btn btn-ghost btn-lg">阅读文档</a>
        </div>
      </div>
    </section>
  );
}

/* ============ Footer ============ */
function Footer() {
  const cols = [
    {
      title: '产品',
      links: [
        { label: '充值档位', href: '#pricing' },
        { label: '接入指南', href: '#integration' },
        { label: 'Dashboard', href: 'https://code.wearekna.com/login' },
      ],
    },
    {
      title: '资源',
      links: [
        { label: 'Claude Code 教程', href: 'https://docs.anthropic.com/en/docs/claude-code' },
        { label: 'Anthropic SDK', href: 'https://docs.anthropic.com/en/api' },
        { label: 'FAQ', href: '#faq' },
      ],
    },
    {
      title: '联系',
      links: [
        { label: 'info@wearekna.com', href: 'mailto:info@wearekna.com' },
        { label: '商务合作', href: 'mailto:info@wearekna.com' },
      ],
    },
  ];
  return (
    <footer className="footer">
      <div className="container footer-inner">
        <div className="footer-brand">
          <a className="logo" href="/">
            <LogoMark />
            <span>ShopAI</span>
          </a>
          <p className="footer-desc">独立运营的 Claude API 中转服务。免海外信用卡、免审核、余额永不过期。</p>
        </div>
        <div className="footer-cols">
          {cols.map((c) => (
            <div key={c.title} className="footer-col">
              <div className="footer-col-title">{c.title}</div>
              <ul>
                {c.links.map((l) => <li key={l.label}><a href={l.href}>{l.label}</a></li>)}
              </ul>
            </div>
          ))}
        </div>
      </div>
      <div className="footer-bot">
        <div className="container footer-bot-inner">
          <div>© 2026 KNA Inc. · 独立运营，与 Anthropic 无隶属关系</div>
          <div className="footer-legal">
            <a href="/privacy">隐私政策</a>
            <a href="/terms">服务条款</a>
            <a href="/refund">退款政策</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);