/* Pricing */
function Pricing() {
  const plans = [
    {
      name: 'クローズドβ',
      tag: 'NOW OPEN',
      tagColor: 'gold',
      price: '無料',
      priceSub: '先着10社限定',
      desc: '全機能を制限なく、検証期間中はずっと無料でご利用いただけます。',
      features: [
        '全プラット連携 (Amazon / 楽天 / Yahoo!)',
        '電子帳簿法 完全対応',
        '全データ形式の管理',
        '導入時の個別サポート',
        'プロダクトチームへの直接フィードバック',
      ],
      cta: 'クローズドβに登録する',
      ctaStyle: 'gold',
      featured: true,
    },
    {
      name: 'βローンチ',
      tag: '2026 / 08 〜',
      tagColor: 'amber',
      price: '有料開始',
      priceSub: '公開時に発表',
      desc: 'クローズドβ卒業後の有料β。招待コード制で対象拡大。',
      features: [
        '招待コード制',
        '外部API公開',
        'GoQSystem連携',
        '電子帳簿法 完全対応',
        'クローズドβ参加企業様には優待価格',
      ],
      cta: '公開時に通知を受ける',
      ctaStyle: 'ghost',
      featured: false,
    },
    {
      name: 'スターター',
      tag: '2027 〜 公開予定',
      tagColor: 'gray',
      price: '¥5,000',
      priceSuffix: '（予定）',
      priceSub: '月額 / SaaS 一般公開後',
      desc: '中小企業・個人事業主向けの標準プラン。',
      features: [
        '3プラット同時連携',
        '商品数 〜1,000点',
        '電子帳簿法 完全対応',
        '標準サポート (営業時間内)',
        '月次レポート',
        'GoQSystem連携（予定）',
        'Shopify連携（予定）',
        'AI商品分析レポート（予定）',
        'データ自動バックアップ（日次）',
      ],
      cta: '公開時に通知を受ける',
      ctaStyle: 'ghost',
      featured: false,
    },
    {
      name: 'エンタープライズ',
      tag: 'CUSTOM',
      tagColor: 'violet',
      price: '¥30,000〜',
      priceSuffix: '（予定）',
      priceSub: '月額 / SaaS 完全稼働後',
      desc: '大規模事業者・複数ブランド運営向け。',
      features: [
        '無制限プラット連携',
        '商品数 無制限',
        '電子帳簿法 + 監査ログ',
        '24/7 専任サポート',
        'API / SSO / カスタム連携',
        'GoQSystem連携対応',
        '専任カスタマーサクセスマネージャー',
        'マルチブランド同時連携管理',
        'セキュリティ審査ログ（ISMS準拠）（予定）',
        'SLA保証 99.9%（予定）',
      ],
      cta: 'お問い合わせ',
      ctaStyle: 'ghost',
      featured: false,
    },
  ];

  const tagColors = {
    gold: { bg: 'rgba(245,200,66,0.12)', border: 'rgba(245,200,66,0.4)', text: 'var(--gold)' },
    amber: { bg: 'oklch(0.7 0.14 60 / 0.12)', border: 'oklch(0.7 0.14 60 / 0.4)', text: 'oklch(0.82 0.13 70)' },
    gray: { bg: 'rgba(255,255,255,0.04)', border: 'var(--line-strong)', text: 'var(--ink-3)' },
    violet: { bg: 'oklch(0.55 0.15 285 / 0.15)', border: 'oklch(0.6 0.18 285 / 0.4)', text: 'oklch(0.78 0.15 285)' },
  };

  return (
    <section id="pricing" style={{ position: 'relative', padding: '120px 0' }}>
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <Reveal>
          <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 80px' }}>
            <span className="section-tag">◆ Pricing · 料金プラン</span>
            <h2 className="section-h2">
              はじめての方は、<span className="gold-text">クローズドβ</span>から。
            </h2>
          </div>
        </Reveal>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
          gap: 16,
          alignItems: 'stretch',
        }}>
          {plans.map((p, i) => {
            const tc = tagColors[p.tagColor];
            return (
              <Reveal key={p.name} delay={i * 120}>
                <div className="card" style={{
                  height: '100%',
                  display: 'flex',
                  flexDirection: 'column',
                  padding: '32px 24px',
                  borderRadius: 20,
                  borderColor: p.featured ? 'rgba(245,200,66,0.4)' : 'var(--line)',
                  background: p.featured
                    ? 'linear-gradient(180deg, rgba(245,200,66,0.08) 0%, rgba(245,200,66,0) 60%)'
                    : 'linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0) 100%)',
                  boxShadow: p.featured ? '0 0 40px -10px rgba(245,200,66,0.3)' : 'none',
                  position: 'relative',
                }}>
                  {p.featured && (
                    <div style={{
                      position: 'absolute',
                      top: -1, left: -1, right: -1,
                      height: 3,
                      background: 'var(--grad-gold)',
                      borderRadius: '20px 20px 0 0',
                      boxShadow: '0 0 16px rgba(245,200,66,0.6)',
                    }} />
                  )}

                  <div style={{
                    display: 'inline-flex',
                    alignSelf: 'flex-start',
                    padding: '4px 10px',
                    borderRadius: 999,
                    background: tc.bg,
                    border: `1px solid ${tc.border}`,
                    fontFamily: 'JetBrains Mono, monospace',
                    fontSize: 10,
                    color: tc.text,
                    letterSpacing: '0.15em',
                  }}>{p.tag}</div>

                  <h3 className="serif" style={{
                    fontSize: 24,
                    fontWeight: 600,
                    margin: '20px 0 8px',
                    color: p.featured ? 'var(--gold)' : 'var(--ink)',
                    letterSpacing: '0.04em',
                  }}>{p.name}</h3>

                  <p style={{ fontSize: 13, color: 'var(--ink-3)', margin: '0 0 24px', lineHeight: 1.7 }}>{p.desc}</p>

                  <div style={{ marginBottom: 28, paddingBottom: 28, borderBottom: '1px solid var(--line)' }}>
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
                      <span className="serif" style={{
                        fontSize: 36,
                        fontWeight: 700,
                        color: p.featured ? 'var(--gold)' : 'var(--ink)',
                        letterSpacing: '-0.02em',
                        lineHeight: 1,
                      }}>{p.price}</span>
                      {p.priceSuffix && (
                        <span className="mono" style={{ fontSize: 12, color: 'var(--ink-3)', letterSpacing: '0.05em' }}>{p.priceSuffix}</span>
                      )}
                    </div>
                    <div className="mono" style={{ marginTop: 6, fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.05em' }}>{p.priceSub}</div>
                  </div>

                  <ul style={{
                    listStyle: 'none',
                    padding: 0,
                    margin: '0 0 32px',
                    display: 'flex',
                    flexDirection: 'column',
                    gap: 12,
                    flex: 1,
                  }}>
                    {p.features.map((f) => (
                      <li key={f} style={{
                        display: 'flex',
                        gap: 10,
                        fontSize: 13,
                        color: 'var(--ink-2)',
                        lineHeight: 1.6,
                      }}>
                        <span style={{ color: p.featured ? 'var(--gold)' : 'var(--ink-3)', flexShrink: 0, display: 'inline-flex', alignItems: 'center', marginTop: 2 }}>
                          <Glyph.Check width="14" height="14" />
                        </span>
                        <span>{f}</span>
                      </li>
                    ))}
                  </ul>

                  <a href="#cta-final" className={`btn ${p.ctaStyle === 'gold' ? 'btn-gold' : 'btn-ghost'}`} style={{ justifyContent: 'center', fontSize: 13 }}>
                    {p.cta}
                    <Glyph.Arrow width="14" height="14" />
                  </a>
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}

window.Pricing = Pricing;