// Section components for KIKKA landing

const Brand = () => (
  <a href="#top" className="brand">
    <span className="brand-mark">
      <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <rect x="1" y="1" width="30" height="30" fill="none" stroke="currentColor" strokeWidth="1" />
        <line x1="16" y1="6" x2="16" y2="26" stroke="currentColor" strokeWidth="1" />
        <line x1="6" y1="16" x2="26" y2="16" stroke="currentColor" strokeWidth="1" />
        <circle cx="16" cy="16" r="3.5" fill="none" stroke="var(--gold)" strokeWidth="1" />
      </svg>
    </span>
    <span className="brand-name">KIKKA</span>
  </a>
);

const Nav = () => (
  <div className="nav-wrap">
    <div className="container nav">
      <Brand />
      <nav className="nav-links">
        <a href="#why">特徴</a>
        <a href="#features">機能</a>
        <a href="#pricing">料金</a>
        <a href="#markets">対応マーケット</a>
        <a href="#requirements">動作環境</a>
        <a href="#faq">FAQ</a>
      </nav>
      <div className="nav-cta">
        <a href="#pricing" className="btn btn-primary btn-sm">5日間無料で試す</a>
      </div>
    </div>
  </div>
);

const Hero = () => (
  <section className="hero" id="top">
    <div className="container">
      <div className="hero-grid">
        <div>
          <span className="eyebrow">Rakuma Auto-Listing — Native App</span>
          <h1>
            高性能、<br />
            <span className="serif">ラクマ自動出品</span>。
          </h1>
          <p className="lead">
            CSVインポート、スケジュール出品、一括停止・再開・削除まで。<br />
            あなたのPCの中だけで完結する、静謐で精緻な出品オートメーション。
          </p>
          <div className="hero-cta">
            <a href="#pricing" className="btn btn-primary">
              5日間無料で試す <IconArrow size={14} />
            </a>
            <a href="#features" className="btn btn-ghost">機能を見る</a>
          </div>
          <div className="hero-meta">
            <div className="hero-meta-item"><IconCheck size={14} /> クレジット登録なしで試用可能</div>
            <div className="hero-meta-item"><IconCheck size={14} /> 月額500円から</div>
            <div className="hero-meta-item"><IconCheck size={14} /> 個人情報をサーバに保持しない</div>
          </div>
        </div>
        <HeroVisual />
      </div>
      <div className="hero-spec">
        <HeroSpec />
      </div>
    </div>
  </section>
);

const HeroVisual = () => (
  <div className="hero-visual" aria-hidden="true">
    <div className="hv-grid"></div>
    <div className="hv-ring"></div>
    <div className="hv-disc"></div>
    <div className="hv-mask"></div>
    <div className="hv-card">
      <div className="hv-card-head">
        <span className="hv-card-dot"></span>
        <span className="hv-card-dot"></span>
        <span className="hv-card-dot"></span>
        <span className="mono" style={{ marginLeft: 10, fontSize: 10, color: 'var(--fg-faint)', letterSpacing: '0.06em' }}>KIKKA — listing queue</span>
      </div>
      <div className="hv-row"><span className="name">ヴィンテージスカーフ</span><span className="status">LISTED</span></div>
      <div className="hv-row"><span className="name">レザートートバッグ</span><span className="status">LISTED</span></div>
      <div className="hv-row"><span className="name">シルバーリング 925</span><span className="status gray">SCHEDULED</span></div>
      <div className="hv-row"><span className="name">セラミック マグカップ</span><span className="status gray">SCHEDULED</span></div>
      <div className="hv-row"><span className="name">リネンシャツ ベージュ</span><span className="status gray">DRAFT</span></div>
    </div>
    <div className="hv-pulse">
      <span className="hv-pulse-dot"></span>
      <div className="hv-pulse-text">
        <strong>稼働中</strong>
        次の出品まで 03:42
      </div>
    </div>
  </div>
);

const HeroSpec = () => (
  <div className="spec-card">
    <h4>At a glance</h4>
    <div className="spec-rows">
      <div className="spec-row">
        <div className="v">¥500<span style={{fontSize: 14, color: 'var(--fg-muted)', fontWeight: 400, marginLeft: 4 }}>/月</span></div>
        <div className="l">スタートプラン</div>
      </div>
      <div className="spec-row">
        <div className="v">5日間</div>
        <div className="l">無料試用 — いつでも解約可</div>
      </div>
      <div className="spec-row">
        <div className="v">Win / Mac</div>
        <div className="l">PCインストール型</div>
      </div>
    </div>
  </div>
);

const Trust = () => (
  <div className="trust">
    <div className="container trust-row">
      <div className="trust-item"><IconLock size={18} /> 個人情報をサーバに保持しない</div>
      <div className="trust-item"><IconDesktop size={18} /> Windows / macOS 対応</div>
      <div className="trust-item"><IconClock size={18} /> 5日間 完全無料</div>
      <div className="trust-item"><IconRefresh size={18} /> いつでも解約OK</div>
    </div>
  </div>
);

const Differentiator = () => (
  <section id="why">
    <div className="container">
      <div className="section-head">
        <span className="eyebrow">Why KIKKA</span>
        <h2>WEBサービスではなく、<br /><span className="serif">あなたのPCで動く</span>道具。</h2>
        <p>
          KIKKAは、ブラウザで動かすSaaSではなく、PCにインストールして使うネイティブツールです。
          ラクマのアカウント情報も、出品データも、すべてあなたの端末の中で完結します。
        </p>
      </div>
      <div className="diff-grid">
        <div className="diff-card reveal">
          <div className="diff-icon"><IconDesktop size={28} /></div>
          <div className="diff-num">— No. 01</div>
          <h3>PCインストール型</h3>
          <p>WEBツールとは違い、KIKKAはあなたのPCにインストールして動作します。ブラウザを開きっぱなしにする必要も、サービス側のメンテナンスで止まる心配もありません。</p>
        </div>
        <div className="diff-card reveal">
          <div className="diff-icon"><IconNoCloud size={28} /></div>
          <div className="diff-num">— No. 02</div>
          <h3>個人情報をサーバに置かない</h3>
          <p>ラクマのログイン情報や出品データはすべてローカルに保存。KIKKAのサーバ側にお客様の個人情報は一切送信・保管されません。</p>
        </div>
        <div className="diff-card reveal">
          <div className="diff-icon"><IconTag size={28} /></div>
          <div className="diff-num">— No. 03</div>
          <h3>月額500円、5日間無料</h3>
          <p>必要十分なスタートプランは月額500円。5日間の無料試用付きで、期間中の解約はもちろん無料。まずは静かに、お試しください。</p>
        </div>
      </div>
    </div>
  </section>
);

const FEATURES = [
  { icon: <IconUpload size={22} />, title: "出品・再出品・削除", body: "新規出品から再出品、削除までを自動化。キューに積むだけで順次処理されます。" },
  { icon: <IconDownload size={22} />, title: "CSVインポート / エクスポート", body: "Excelで作成した商品データをそのまま取り込み、編集も書き出しも自由自在。" },
  { icon: <IconLayers size={22} />, title: "出品中商品データ取込", body: "ラクマに出品中の商品情報をまとめて取得し、ローカルで一元管理。" },
  { icon: <IconTag size={22} />, title: "値下げ・値上げ", body: "条件を指定して、対象商品の価格を一括で調整。価格戦略を素早く実行。" },
  { icon: <IconSquares size={22} />, title: "一括停止・再開・削除", body: "複数商品の状態をまとめて操作。長期休暇中の停止と復帰もワンクリック。" },
  { icon: <IconCalendar size={22} />, title: "スケジュール機能", body: "曜日・時刻を指定して自動出品。アクセスが伸びる時間帯を狙って公開。" },
];

const Features = () => (
  <section id="features" style={{ background: 'var(--bg-soft)' }}>
    <div className="container">
      <div className="section-head">
        <span className="eyebrow">Features</span>
        <h2>必要な機能を、<span className="serif">過不足なく。</span></h2>
        <p>
          スタートプランで利用できる機能。日々の出品作業をまるごと自動化するために、
          手作業で繰り返しがちな操作を一通り揃えました。
        </p>
      </div>
      <div className="features-grid">
        {FEATURES.map((f, i) => (
          <div className="feat" key={i}>
            <div className="feat-icon">{f.icon}</div>
            <h4>{f.title}</h4>
            <p>{f.body}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const PRICING = [
  {
    name: "START",
    label: "スタートプラン",
    price: 500,
    tag: "個人セラー向け / 出品自動化の基本セット",
    active: true,
    features: [
      "出品・再出品・削除",
      "CSVインポート / エクスポート",
      "出品中商品データ取込",
      "値下げ・値上げ",
      "一括停止・再開・削除",
      "スケジュール機能",
    ],
    payUrl: "https://www.paypal.com/webapps/billing/plans/subscribe?plan_id=P-53V08733EU7410806NHKRPNQ",
  },
  {
    name: "STANDARD",
    label: "スタンダードプラン",
    price: 2500,
    tag: "発送・評価・メッセージまで自動化",
    active: false,
    features: [
      "スタートプランの全機能",
      "一括発送・評価・メッセージ",
      "発送先CSV出力",
    ],
  },
  {
    name: "PRO",
    label: "プロプラン",
    price: 5000,
    tag: "在庫連携・LLM連携によるフルオート",
    active: false,
    features: [
      "スタンダードプランの全機能",
      "全アプリ一括操作",
      "在庫連携",
      "Discord / LINE 通知",
      "LLM連携・AI操作対応",
      "自動コメント&メッセージ(LLM)",
    ],
  },
];

const Pricing = () => (
  <section id="pricing">
    <div className="container">
      <div className="section-head" style={{ marginInline: 'auto', textAlign: 'center' }}>
        <span className="eyebrow" style={{ justifyContent: 'center' }}>Pricing</span>
        <h2>シンプルな、<span className="serif">料金体系。</span></h2>
        <p style={{ marginInline: 'auto' }}>
          全プラン5日間の無料試用付き。期間中の解約はいつでも可能で、料金は発生しません。
        </p>
      </div>
      <div className="pricing-grid">
        {PRICING.map((p) => (
          <div key={p.name} className={`price-card ${p.active ? 'is-active' : 'is-disabled'}`}>
            <span className="price-badge">{p.active ? 'Available' : 'Coming Soon'}</span>
            <div className="price-name">{p.name}</div>
            <div className="price-label-jp">{p.label}</div>
            <div className="price-amount">
              <span className="num">¥{p.price.toLocaleString()}</span>
              <span className="unit">/ 月</span>
            </div>
            <div className="price-tag">{p.tag}</div>
            <ul className="price-list">
              {p.features.map((f, i) => (
                <li key={i}><span className="check"><IconCheck size={14} /></span><span>{f}</span></li>
              ))}
            </ul>
            {p.active ? (
              <a href={p.payUrl} target="_blank" rel="noopener" className="btn btn-primary">5日間無料で試す</a>
            ) : (
              <button className="btn is-disabled" disabled>準備中</button>
            )}
            <div className="price-foot">{p.active ? '5-DAY FREE TRIAL · CANCEL ANYTIME' : 'IN DEVELOPMENT'}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const MARKETS = [
  { name: "ラクマ",       en: "Rakuma",         mark: "ラ", active: true,  body: "本日より利用可能。出品・再出品・スケジュール・一括操作まで、すべての機能に対応します。" },
  { name: "メルカリ",     en: "Mercari",        mark: "メ", active: false, body: "順次対応予定。1ライセンスで複数マーケットを扱える設計を進めています。" },
  { name: "PayPayフリマ", en: "PayPay Flea",    mark: "P",  active: false, body: "順次対応予定。ラクマ・メルカリと同一の操作感で運用できるよう開発中です。" },
];

const Marketplaces = () => (
  <section id="markets">
    <div className="container">
      <div className="section-head">
        <span className="eyebrow">Supported Marketplaces</span>
        <h2>対応マーケット<span className="serif">プレイス。</span></h2>
        <p>
          まずはラクマから。メルカリ・PayPayフリマも順次対応予定です。
          複数マーケットを単一のツールで運用できる体験を、KIKKAは目指しています。
        </p>
      </div>
      <div className="markets-grid">
        {MARKETS.map((m) => (
          <div key={m.en} className={`market ${m.active ? '' : 'is-soon'}`}>
            <span className="market-flag">{m.active ? 'Available' : 'Coming'}</span>
            <div className="market-logo">
              <span className="market-mark">{m.mark}</span>
              <div>
                <div className="market-name">{m.name}</div>
                <div className="market-status">{m.en}</div>
              </div>
            </div>
            <p>{m.body}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const Security = () => (
  <section id="security" style={{ background: 'var(--bg-soft)' }}>
    <div className="container">
      <div className="sec-card" style={{ background: 'var(--bg)' }}>
        <div>
          <span className="eyebrow">Privacy by Design</span>
          <h3>あなたのデータは、<br /><span className="serif">あなたのPCの中</span>にだけ。</h3>
          <p>
            KIKKAはPCインストール型のため、ラクマのログイン情報、出品データ、画像などは
            お客様の端末ローカルにのみ保存されます。KIKKA側でこれらの個人情報を取得・保持することはありません。
            利用解析はオプトインで、匿名化された統計情報のみを最低限取得します。
          </p>
        </div>
        <SecurityDiagram />
      </div>
    </div>
  </section>
);

const SecurityDiagram = () => (
  <div className="sec-diagram" aria-hidden="true">
    <svg width="100%" height="100%" viewBox="0 0 320 240" preserveAspectRatio="xMidYMid meet">
      <defs>
        <pattern id="dots" width="10" height="10" patternUnits="userSpaceOnUse">
          <circle cx="1" cy="1" r="0.8" fill="var(--line)" />
        </pattern>
      </defs>
      <rect width="320" height="240" fill="url(#dots)" />
      <rect x="40" y="60" width="160" height="120" fill="var(--bg)" stroke="var(--fg)" />
      <text x="120" y="92" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="var(--fg-muted)" letterSpacing="2">YOUR PC</text>
      <rect x="58" y="104" width="124" height="12" fill="var(--bg-soft)" />
      <rect x="58" y="122" width="124" height="12" fill="var(--bg-soft)" />
      <rect x="58" y="140" width="80" height="14" fill="var(--accent-soft)" stroke="var(--accent)" strokeWidth="0.5" />
      <text x="98" y="150" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="var(--accent)">KIKKA.app</text>

      <rect x="230" y="80" width="70" height="80" fill="var(--bg)" stroke="var(--line)" strokeDasharray="2 3" />
      <text x="265" y="100" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="8" fill="var(--fg-faint)" letterSpacing="2">KIKKA</text>
      <text x="265" y="113" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="8" fill="var(--fg-faint)" letterSpacing="2">SERVER</text>
      <line x1="232" y1="82" x2="298" y2="158" stroke="var(--gold)" strokeWidth="1" />

      <line x1="200" y1="120" x2="226" y2="120" stroke="var(--line)" strokeWidth="1" strokeDasharray="2 2" />
      <text x="213" y="115" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="7" fill="var(--gold)" letterSpacing="1">NO DATA</text>
    </svg>
  </div>
);

const Requirements = () => (
  <section id="requirements">
    <div className="container">
      <div className="env-grid">
        <div>
          <span className="eyebrow">System Requirements</span>
          <h2 style={{ fontSize: 'clamp(28px, 3.2vw, 40px)', lineHeight: 1.4, letterSpacing: '-0.005em', margin: '20px 0 24px', fontWeight: 500 }}>
            動作環境について。
          </h2>
          <p className="muted" style={{ margin: '0 0 28px', fontSize: 14.5, lineHeight: 1.9 }}>
            Windows・macOS の両OSに対応しています。マルチアカウント運用には対応していません(1ライセンス1アカウント)。
          </p>
          <div className="os-pills">
            <span className="os-pill"><span className="dot"></span>Windows 10 / 11</span>
            <span className="os-pill"><span className="dot"></span>macOS 12+</span>
          </div>
        </div>
        <div className="env-card">
          <div className="env-row"><span className="k">対応OS</span><span className="v">Windows 10/11 · macOS 12+</span></div>
          <div className="env-row"><span className="k">CPU</span><span className="v">Intel · AMD · Apple Silicon</span></div>
          <div className="env-row"><span className="k">メモリ</span><span className="v">4 GB 以上推奨</span></div>
          <div className="env-row"><span className="k">空き容量</span><span className="v">500 MB 以上</span></div>
          <div className="env-row"><span className="k">通信</span><span className="v">インターネット接続必須</span></div>
          <div className="env-row"><span className="k">ライセンス</span><span className="v">1ライセンス / 1アカウント</span></div>
        </div>
      </div>
    </div>
  </section>
);

const FAQS = [
  { q: "本当に5日間は無料ですか?", a: "はい。お申し込みから5日間は料金が発生しません。期間内に解約いただければ、課金されることはありません。" },
  { q: "WEBツールではないのですか?", a: "はい、KIKKAはPCインストール型のネイティブアプリケーションです。ブラウザではなく、お使いのPCにインストールしてご利用いただきます。" },
  { q: "ダウンロード方法は?", a: "お申し込み(PayPalでの定期購入の登録)完了後、ご登録のメールアドレス宛にダウンロードページのリンクをお送りします。" },
  { q: "ラクマのログイン情報はKIKKAに送信されますか?", a: "いいえ。ラクマのログイン情報や出品データは、お客様のPCの中にのみ保存されます。KIKKA側でこれらの個人情報を取得・保管することはありません。" },
  { q: "複数のラクマアカウントで使えますか?", a: "現バージョンはマルチアカウントには対応しておりません。1ライセンスにつき1アカウントでのご利用となります。" },
  { q: "Macでも使えますか?", a: "はい、macOS にも対応しています(macOS 12 以降推奨)。Apple Silicon にもネイティブ対応します。" },
  { q: "メルカリやPayPayフリマには対応していますか?", a: "現在はラクマのみ対応です。メルカリ・PayPayフリマへの対応は開発を進めており、順次提供予定です。" },
  { q: "解約はどうすればよいですか?", a: "PayPalの定期購入ページからいつでも解約いただけます。無料試用期間内であれば料金は発生しません。" },
  { q: "スタンダード・プロプランはいつ提供されますか?", a: "現在開発中です。提供開始時期はお知らせやメールでご案内します。" },
];

const FAQ = () => (
  <section id="faq" style={{ background: 'var(--bg-soft)' }}>
    <div className="container">
      <div className="section-head" style={{ textAlign: 'center', marginInline: 'auto' }}>
        <span className="eyebrow" style={{ justifyContent: 'center' }}>FAQ</span>
        <h2>よくある<span className="serif">ご質問</span></h2>
      </div>
      <div className="faq-wrap">
        {FAQS.map((f, i) => (
          <details className="faq" key={i}>
            <summary>{f.q}</summary>
            <div className="a">{f.a}</div>
          </details>
        ))}
      </div>
    </div>
  </section>
);

const CTA = () => (
  <section className="cta-section">
    <div className="cta-pattern" aria-hidden="true"></div>
    <div className="container cta-inner" style={{ position: 'relative', zIndex: 2 }}>
      <div>
        <span className="eyebrow" style={{ color: 'var(--gold)' }}>Get Started</span>
        <h2>まずは5日間、<br /><span className="serif">無料で</span>お試しください。</h2>
        <p>クレジット登録不要。お申し込み完了後、ダウンロードページのリンクをメールでお送りします。試用期間内の解約はいつでも無料です。</p>
        <div className="hero-cta">
          <a href="https://www.paypal.com/webapps/billing/plans/subscribe?plan_id=P-53V08733EU7410806NHKRPNQ" target="_blank" rel="noopener" className="btn btn-primary">
            5日間無料で試す <IconArrow size={14} />
          </a>
          <a href="#faq" className="btn btn-ghost">よくある質問</a>
        </div>
      </div>
      <div className="cta-stats">
        <div className="cta-stat">
          <div className="v">¥500<span style={{ fontSize: 13, color: 'oklch(0.62 0.005 130)', marginLeft: 4 }}>/月</span></div>
          <div className="l">START PLAN</div>
        </div>
        <div className="cta-stat">
          <div className="v">5 days</div>
          <div className="l">FREE TRIAL</div>
        </div>
        <div className="cta-stat">
          <div className="v">0</div>
          <div className="l">SERVER-SIDE PERSONAL DATA</div>
        </div>
        <div className="cta-stat">
          <div className="v">Win / Mac</div>
          <div className="l">SUPPORTED OS</div>
        </div>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer>
    <div className="container">
      <div className="footer-grid">
        <div className="footer-col">
          <div style={{ marginBottom: 18 }}><Brand /></div>
          <p>PCインストール型のラクマ自動出品ツール。静謐で、精緻に。出品作業をまるごと自動化します。</p>
        </div>
        <div className="footer-col">
          <h5>Product</h5>
          <a href="#features">機能</a>
          <a href="#pricing">料金</a>
          <a href="#markets">対応マーケット</a>
          <a href="#requirements">動作環境</a>
        </div>
        <div className="footer-col">
          <h5>Trust</h5>
          <a href="#security">セキュリティ</a>
          <a href="#faq">FAQ</a>
          <a href="#">利用規約</a>
          <a href="#">プライバシーポリシー</a>
        </div>
        <div className="footer-col">
          <h5>Support</h5>
          <a href="#">お問い合わせ</a>
          <a href="#">マニュアル</a>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 KIKKA · kikka-tools.com</span>
        <span className="mono" style={{ fontSize: 10, letterSpacing: '0.14em' }}>v1.0.0 · RAKUMA AUTO-LISTING</span>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Nav, Hero, Trust, Differentiator, Features, Pricing, Marketplaces, Security, Requirements, FAQ, CTA, Footer });