/* 証券口座おすすめ紹介ページ（ログイン不要・公開） */

const BROKER_PAGE_TITLE = "【2026年最新】初心者におすすめの証券口座5選｜手数料・NISA対応を徹底比較 - 株次郎";
const BROKER_PAGE_DESCRIPTION = "株式投資初心者向けに、SBI証券・楽天証券など人気ネット証券5社を手数料・新NISA対応・ポイント還元で徹底比較。口座開設の流れもわかりやすく解説します。";

const BROKER_DATA = [
  {
    id: "sbi",
    rank: 1,
    name: "SBI証券",
    catch: "国内シェアNo.1！迷ったらここ",
    rating: 5,
    features: [
      "国内株式・米国株式の売買手数料0円（条件あり）",
      "投資信託2,600本以上",
      "新NISA対応 ✅ / iDeCo対応 ✅",
      "三井住友カードでクレカ積立 → Vポイント還元",
    ],
    recommend: "とにかく迷ったら間違いない万能型。初心者にも上級者にも人気No.1",
    affiliateUrl: "", // A8等のアフィリエイトリンク（取得後に差し替え）
    officialUrl: "https://www.sbisec.co.jp/",
  },
  {
    id: "rakuten",
    rank: 2,
    name: "楽天証券",
    catch: "楽天ユーザーなら圧倒的にお得",
    rating: 5,
    features: [
      "国内株式手数料0円コースあり",
      "楽天ポイントで投資信託が買える",
      "新NISA対応 ✅ / iDeCo対応 ✅",
      "楽天カードでクレカ積立 → 楽天ポイント還元",
    ],
    recommend: "楽天経済圏（楽天カード・楽天市場）をよく使う人。ポイント投資もできる",
    affiliateUrl: "",
    officialUrl: "https://www.rakuten-sec.co.jp/",
  },
  {
    id: "monex",
    rank: 3,
    name: "マネックス証券",
    catch: "米国株に強い！グローバル投資派に",
    rating: 4.5,
    features: [
      "米国株の取扱銘柄数が豊富（5,000銘柄以上）",
      "投資信託の購入時手数料すべて0円",
      "新NISA対応 ✅ / iDeCo対応 ✅",
      "dカードでクレカ積立 → dポイント還元",
    ],
    recommend: "米国株やグローバル投資に興味がある人。銘柄分析ツールも充実",
    affiliateUrl: "",
    officialUrl: "https://www.monex.co.jp/",
  },
  {
    id: "matsui",
    rank: 4,
    name: "松井証券",
    catch: "サポート最高評価！初心者に優しい老舗",
    rating: 4,
    features: [
      "25歳以下は国内株式手数料無料",
      "投資信託の信託報酬の一部をポイント還元",
      "新NISA対応 ✅ / iDeCo対応 ✅",
      "電話サポートの品質が業界最高評価",
    ],
    recommend: "困った時にすぐ相談したい初心者。サポート重視で選ぶならここ",
    affiliateUrl: "",
    officialUrl: "https://www.matsui.co.jp/",
  },
  {
    id: "aukabu",
    rank: 5,
    name: "auカブコム証券",
    catch: "au経済圏ユーザーの味方",
    rating: 4,
    features: [
      "auユーザーなら手数料割引あり",
      "Pontaポイントで投資信託が買える",
      "新NISA対応 ✅ / iDeCo対応 ✅",
      "au PAYカードでクレカ積立 → Pontaポイント還元",
    ],
    recommend: "auユーザーやPontaポイントを貯めている人",
    affiliateUrl: "",
    officialUrl: "https://kabu.com/",
  },
];

// affiliateUrl が空の間は公式サイトにフォールバック。A8リンク取得後、affiliateUrlを埋めるだけで切り替わる。
const getCtaUrl = (broker) => broker.affiliateUrl || broker.officialUrl;

const BROKER_COMPARE_ROWS = [
  { label: "国内株手数料", values: ["0円", "0円", "55円〜", "25歳以下0円", "0円（条件あり）"] },
  { label: "米国株手数料", values: ["約定代金の0.495%", "約定代金の0.495%", "約定代金の0.495%", "約定代金の0.495%", "-"] },
  { label: "投資信託本数", values: ["2,600+", "2,600+", "1,700+", "1,800+", "1,700+"] },
  { label: "新NISA",       values: ["✅", "✅", "✅", "✅", "✅"] },
  { label: "クレカ積立",   values: ["三井住友", "楽天カード", "dカード", "-", "au PAY"] },
  { label: "ポイント",     values: ["Vポイント", "楽天P", "dポイント", "松井P", "Ponta"] },
];

const BROKER_STEPS = [
  { n: 1, title: "証券会社の公式サイトにアクセス", desc: "「口座開設」ボタンをタップ" },
  { n: 2, title: "本人確認書類をアップロード",     desc: "マイナンバーカード or 運転免許証" },
  { n: 3, title: "基本情報を入力",                desc: "名前・住所・勤務先など（5〜10分）" },
  { n: 4, title: "審査完了 → 取引開始！",          desc: "最短当日〜数日でログインIDが届く" },
];

const BROKER_FAQ = [
  { q: "口座開設に費用はかかりますか？", a: "無料です。口座開設・維持ともに費用はかかりません。", comment: "気軽に申し込んでOKだよ！" },
  { q: "未成年でも口座開設できますか？", a: "親権者の同意があれば可能な証券会社があります。", comment: "証券会社によって条件が違うから、公式サイトで確認してみてね。" },
  { q: "複数の証券会社で口座を作ってもいいですか？", a: "OKです。ただしNISA口座は1人1つの金融機関でしか作れません。", comment: "比較のために複数開いて使い分ける人も多いよ。" },
  { q: "口座開設に必要な書類は？", a: "マイナンバーカード or 通知カード＋本人確認書類（運転免許証など）が一般的です。", comment: "スマホでマイナンバーカードを撮影するだけで済むところが多いよ。" },
  { q: "口座を作ったらすぐに株を買わないとダメ？", a: "焦る必要はありません。まずは口座を作って入金しておくだけでもOKです。", comment: "準備しておけば、学びながらタイミングを待てるから安心だよ。" },
];

function BrokerKabuBubble({ children }) {
  return (
    <div className="bk-conv bk-conv-kabu">
      <div className="bk-conv-avatar bk-conv-avatar-kabu" />
      <div className="bk-conv-body">{children}</div>
    </div>
  );
}

function BrokerStudentBubble({ children }) {
  return (
    <div className="bk-conv bk-conv-student">
      <div className="bk-conv-body">{children}</div>
      <div className="bk-conv-avatar bk-conv-avatar-stu" />
    </div>
  );
}

function BrokerStars({ rating }) {
  const full = Math.floor(rating);
  const half = rating - full >= 0.5;
  const stars = [];
  for (let i = 0; i < 5; i++) {
    if (i < full) stars.push("★");
    else if (i === full && half) stars.push("⭐"); // 半星の簡易表現
    else stars.push("☆");
  }
  return <span className="bk-stars" aria-label={`評価 ${rating} / 5`}>{stars.join("")}</span>;
}

const RANK_META = {
  1: { medal: "🥇", label: "第1位", cls: "bk-rank-gold" },
  2: { medal: "🥈", label: "第2位", cls: "bk-rank-silver" },
  3: { medal: "🥉", label: "第3位", cls: "bk-rank-bronze" },
  4: { medal: "④",  label: "第4位", cls: "bk-rank-navy" },
  5: { medal: "⑤",  label: "第5位", cls: "bk-rank-navy" },
};

function BrokerRankCard({ broker }) {
  const meta = RANK_META[broker.rank];
  return (
    <div className={`bk-card ${meta.cls}`} id={`broker-${broker.id}`}>
      <div className="bk-card-rank-badge">{meta.medal} {meta.label}</div>
      <h3 className="bk-card-name">{broker.name}</h3>
      <p className="bk-card-catch">{broker.catch}</p>
      <BrokerStars rating={broker.rating} />

      <p className="bk-card-feature-label">📊 特徴</p>
      <ul className="bk-card-features">
        {broker.features.map((f, i) => <li key={i}>{f}</li>)}
      </ul>

      <div className="bk-card-recommend">
        <strong>こんな人におすすめ：</strong>
        <p>{broker.recommend}</p>
      </div>

      <a
        className="bk-card-cta"
        href={getCtaUrl(broker)}
        target="_blank"
        rel="noopener noreferrer"
      >
        🔗 公式サイトを見る
      </a>
      <p className="bk-card-cta-note">※口座開設は無料・最短翌営業日</p>
    </div>
  );
}

function BrokerFaqItem({ item, isOpen, onToggle }) {
  return (
    <div className={`bk-faq-item ${isOpen ? "open" : ""}`}>
      <button className="bk-faq-q" onClick={onToggle}>
        <span>Q. {item.q}</span>
        <span className="bk-faq-arrow">{isOpen ? "▲" : "▼"}</span>
      </button>
      {isOpen && (
        <div className="bk-faq-a">
          <p className="bk-faq-a-text">A. {item.a}</p>
          <p className="bk-faq-a-comment">🎓 株次郎「{item.comment}」</p>
        </div>
      )}
    </div>
  );
}

function BrokerPage({ nav }) {
  const [openFaq, setOpenFaq] = React.useState(null);

  React.useEffect(() => {
    const prevTitle = document.title;
    document.title = BROKER_PAGE_TITLE;
    let descEl = document.querySelector('meta[name="description"]');
    const hadDescEl = !!descEl;
    const prevDesc = descEl ? descEl.getAttribute("content") : null;
    if (!descEl) {
      descEl = document.createElement("meta");
      descEl.setAttribute("name", "description");
      document.head.appendChild(descEl);
    }
    descEl.setAttribute("content", BROKER_PAGE_DESCRIPTION);
    return () => {
      document.title = prevTitle;
      if (descEl && hadDescEl) descEl.setAttribute("content", prevDesc || "");
    };
  }, []);

  return (
    <>
      <style>{`
        .bk-main { padding: 32px 28px 80px; max-width: 900px; width: 100%; overflow-x: hidden; }
        .bk-main, .bk-main * { word-break: break-word; overflow-wrap: break-word; }
        .bk-main .bk-table-wrap, .bk-main .bk-table-wrap * { word-break: normal; overflow-wrap: normal; }
        .bk-back-link { display: inline-block; background: none; border: none; padding: 0; margin: 0 0 16px; font-size: 13px; color: var(--ink-500); cursor: pointer; }
        .bk-back-link:hover { color: var(--navy-800); }
        .bk-h1 { font-size: 22px; font-weight: 900; color: var(--navy-900); margin: 0 0 22px; line-height: 1.4; }
        .bk-h2 { font-size: 18px; font-weight: 900; color: var(--navy-900); margin: 44px 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--navy-100); }

        /* 会話バブル（page-lesson.jsx の conv-kabu/conv-student と統一デザイン） */
        .bk-conv { display: flex; align-items: flex-start; gap: 12px; margin: 16px 0; border-radius: 12px; padding: 14px 16px; }
        .bk-conv-kabu    { background: var(--navy-50, #F2F6FE); }
        .bk-conv-student { background: var(--ink-50, #F6F7FB); flex-direction: row-reverse; }
        .bk-conv-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background-size: cover; background-position: center; background-color: var(--navy-100); }
        .bk-conv-avatar-kabu { background-image: url("assets/kabujiro_mainicon.jpg"); }
        .bk-conv-avatar-stu  { background-image: url("assets/student_aicon.jpg"); background-color: var(--green-100, #D1FAE5); }
        .bk-conv-body { font-size: 14px; line-height: 1.7; color: var(--navy-800, #1E3A8A); flex: 1; }

        /* 「この記事でわかること」 */
        .bk-toc { background: var(--gold-100, #FFF1D6); border-radius: 12px; padding: 18px 20px; margin: 20px 0 8px; }
        .bk-toc-title { font-size: 13px; font-weight: 800; color: var(--navy-900); margin: 0 0 10px; }
        .bk-toc ul { margin: 0; padding-left: 20px; }
        .bk-toc li { font-size: 13px; color: var(--ink-700); line-height: 1.8; }

        /* 選び方ポイント */
        .bk-point-list { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
        .bk-point { display: flex; gap: 12px; align-items: flex-start; background: white; border: 1px solid var(--ink-100); border-radius: 10px; padding: 14px 16px; }
        .bk-point-num { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--navy-900); color: white; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
        .bk-point-body strong { display: block; font-size: 14px; color: var(--navy-900); margin-bottom: 2px; }
        .bk-point-body span { font-size: 12.5px; color: var(--ink-500); line-height: 1.6; }

        /* ランキングカード */
        .bk-card-list { display: flex; flex-direction: column; gap: 20px; margin: 20px 0; }
        .bk-card { position: relative; background: white; border-radius: 16px; box-shadow: var(--shadow-md, 0 2px 10px rgba(0,0,0,.07)); padding: 26px 22px 22px; border: 2px solid transparent; }
        .bk-rank-gold   { border-color: #D4A017; }
        .bk-rank-silver { border-color: #A0A0A0; }
        .bk-rank-bronze { border-color: #CD7F32; }
        .bk-rank-navy   { border-color: var(--navy-100); }
        .bk-card-rank-badge { position: absolute; top: -14px; left: 18px; background: var(--navy-900); color: white; font-size: 12.5px; font-weight: 800; padding: 5px 14px; border-radius: 99px; }
        .bk-rank-gold .bk-card-rank-badge   { background: #D4A017; color: #402c00; }
        .bk-rank-silver .bk-card-rank-badge { background: #A0A0A0; color: #fff; }
        .bk-rank-bronze .bk-card-rank-badge { background: #CD7F32; color: #fff; }
        .bk-card-name { font-size: 19px; font-weight: 900; color: var(--navy-900); margin: 8px 0 2px; }
        .bk-card-catch { font-size: 13.5px; font-weight: 700; color: var(--gold-600, #D88718); margin: 0 0 8px; }
        .bk-stars { font-size: 16px; color: var(--gold-500, #F5A623); letter-spacing: 1px; }
        .bk-card-feature-label { font-size: 12.5px; font-weight: 800; color: var(--navy-900); margin: 16px 0 6px; }
        .bk-card-features { margin: 0 0 14px; padding-left: 20px; }
        .bk-card-features li { font-size: 13px; color: var(--ink-700); line-height: 1.8; }
        .bk-card-recommend { background: var(--green-100, #D1FAE5); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; }
        .bk-card-recommend strong { font-size: 12px; color: var(--green-600, #059669); display: block; margin-bottom: 4px; }
        .bk-card-recommend p { margin: 0; font-size: 13px; color: var(--ink-700); line-height: 1.6; }
        .bk-card-cta { display: block; text-align: center; background: var(--navy-900); color: white; font-weight: 800; font-size: 14.5px; padding: 13px; border-radius: 10px; text-decoration: none; transition: background .15s; }
        .bk-card-cta:hover { background: var(--navy-800); }
        .bk-card-cta-note { text-align: center; font-size: 11px; color: var(--ink-300); margin: 8px 0 0; }

        /* 比較表 */
        .bk-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 20px 0; border-radius: 12px; border: 1px solid var(--ink-100); }
        .bk-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
        .bk-table th, .bk-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--ink-100); white-space: nowrap; }
        .bk-table thead th { background: var(--navy-900); color: white; font-weight: 700; }
        .bk-table tbody th { background: var(--ink-50); color: var(--navy-900); font-weight: 700; }
        .bk-table tbody tr:nth-child(even) td { background: var(--navy-50, #F2F6FE); }
        .bk-table-hint { font-size: 11.5px; color: var(--ink-300); margin: 6px 0 0; }

        /* ステップ */
        .bk-steps { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
        .bk-step { display: flex; gap: 14px; align-items: flex-start; background: white; border: 1px solid var(--ink-100); border-radius: 10px; padding: 14px 16px; }
        .bk-step-num { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--green-600, #059669); color: white; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
        .bk-step-body strong { display: block; font-size: 14px; color: var(--navy-900); margin-bottom: 2px; }
        .bk-step-body span { font-size: 12.5px; color: var(--ink-500); }

        /* FAQ */
        .bk-faq-list { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
        .bk-faq-item { background: white; border: 1px solid var(--ink-100); border-radius: 10px; overflow: hidden; }
        .bk-faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; background: none; border: none; padding: 14px 16px; text-align: left; font-size: 13.5px; font-weight: 700; color: var(--navy-900); cursor: pointer; }
        .bk-faq-arrow { font-size: 11px; color: var(--ink-300); flex-shrink: 0; }
        .bk-faq-a { padding: 0 16px 16px; }
        .bk-faq-a-text { font-size: 13px; color: var(--ink-700); line-height: 1.7; margin: 0 0 10px; }
        .bk-faq-a-comment { font-size: 12.5px; color: var(--navy-800); background: var(--navy-50, #F2F6FE); border-radius: 8px; padding: 10px 12px; margin: 0; }

        /* CTA */
        .bk-cta-block { display: flex; flex-direction: column; gap: 10px; margin: 24px 0 8px; }
        .bk-cta-primary, .bk-cta-secondary { text-align: center; padding: 14px; border-radius: 10px; font-size: 14.5px; font-weight: 800; cursor: pointer; border: none; }
        .bk-cta-primary { background: var(--navy-900); color: white; }
        .bk-cta-secondary { background: white; color: var(--navy-900); border: 1.5px solid var(--navy-100); }

        /* 免責 */
        .bk-disclaimer { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--ink-100); }
        .bk-disclaimer p { font-size: 11px; color: var(--ink-300); line-height: 1.8; margin: 0 0 4px; }

        @media (max-width: 600px) {
          .bk-main { padding: 20px 16px 80px; }
          .bk-card { padding: 22px 16px 18px; }
        }
      `}</style>

      <main className="main bk-main">
        <button className="bk-back-link" onClick={() => nav.goGuide()}>← 始め方・準備に戻る</button>
        <h1 className="bk-h1">初心者におすすめのネット証券口座【2026年最新】</h1>

        {/* ── セクション1: ヒーロー + 導入会話 ── */}
        <BrokerStudentBubble>
          株を始めたいんだけど、証券口座ってどこで開けばいいの？たくさんありすぎて迷うんだけど…
        </BrokerStudentBubble>
        <BrokerKabuBubble>
          いい質問だね！証券口座は銀行口座みたいなもので、株を売買するために必要な「お財布」なんだ。
          でも証券会社によって手数料や使いやすさが全然違うから、自分に合ったところを選ぶのが大事だよ！
        </BrokerKabuBubble>

        <div className="bk-toc">
          <p className="bk-toc-title">📝 この記事でわかること</p>
          <ul>
            <li>初心者が証券口座を選ぶ時のポイント</li>
            <li>おすすめネット証券5社の特徴と比較</li>
            <li>口座開設の流れ（最短当日〜数日）</li>
            <li>新NISAに対応した証券会社の選び方</li>
          </ul>
        </div>

        {/* ── セクション2: 証券口座の選び方 ── */}
        <h2 className="bk-h2">証券口座の選び方（5つのポイント）</h2>
        <BrokerKabuBubble>証券口座を選ぶ時は、この5つをチェックすれば間違いないよ！</BrokerKabuBubble>

        <div className="bk-point-list">
          <div className="bk-point"><div className="bk-point-num">1</div><div className="bk-point-body"><strong>手数料の安さ</strong><span>取引ごとにかかるコスト。ネット証券なら無料〜格安</span></div></div>
          <div className="bk-point"><div className="bk-point-num">2</div><div className="bk-point-body"><strong>取扱商品の豊富さ</strong><span>投資信託・国内株・米国株・ETFなど</span></div></div>
          <div className="bk-point"><div className="bk-point-num">3</div><div className="bk-point-body"><strong>新NISA対応</strong><span>非課税で投資できるNISA口座が使えるか</span></div></div>
          <div className="bk-point"><div className="bk-point-num">4</div><div className="bk-point-body"><strong>アプリ・ツールの使いやすさ</strong><span>初心者でも直感的に操作できるか</span></div></div>
          <div className="bk-point"><div className="bk-point-num">5</div><div className="bk-point-body"><strong>ポイント還元・キャンペーン</strong><span>楽天ポイント・Vポイントなどの連携</span></div></div>
        </div>

        <BrokerStudentBubble>手数料が安いのが一番大事？</BrokerStudentBubble>
        <BrokerKabuBubble>
          最近のネット証券は手数料ほぼゼロのところが多いから、実は手数料だけじゃ差がつかないんだ。
          普段使ってるポイントとの相性や、アプリの使いやすさで選ぶのがおすすめだよ！
        </BrokerKabuBubble>

        {/* ── セクション3: おすすめランキング ── */}
        <h2 className="bk-h2">おすすめネット証券ランキング</h2>

        <div className="bk-card-list">
          <BrokerRankCard broker={BROKER_DATA[0]} />
          <BrokerRankCard broker={BROKER_DATA[1]} />

          <BrokerStudentBubble>SBI証券と楽天証券、どっちがいいの？結局迷う…</BrokerStudentBubble>
          <BrokerKabuBubble>
            正直どっちも超優秀！判断基準はシンプルで、
            楽天カードや楽天市場をよく使うなら楽天証券、
            それ以外ならSBI証券を選べば間違いないよ！
          </BrokerKabuBubble>

          <BrokerRankCard broker={BROKER_DATA[2]} />

          <BrokerStudentBubble>米国株ってやった方がいいの？</BrokerStudentBubble>
          <BrokerKabuBubble>
            まずは日本株や投資信託から始めるのがおすすめ！
            でも将来的にApple・Google・NVIDIAみたいな米国企業にも投資したくなったら、
            マネックス証券が取扱銘柄数でリードしてるよ。
          </BrokerKabuBubble>

          <BrokerRankCard broker={BROKER_DATA[3]} />
          <BrokerRankCard broker={BROKER_DATA[4]} />
        </div>

        {/* ── セクション4: 比較表 ── */}
        <h2 className="bk-h2">5社スペック比較表</h2>
        <div className="bk-table-wrap">
          <table className="bk-table">
            <thead>
              <tr>
                <th>項目</th>
                {BROKER_DATA.map(b => <th key={b.id}>{b.name}</th>)}
              </tr>
            </thead>
            <tbody>
              {BROKER_COMPARE_ROWS.map(row => (
                <tr key={row.label}>
                  <th>{row.label}</th>
                  {row.values.map((v, i) => <td key={i}>{v}</td>)}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <p className="bk-table-hint">→ 横にスクロールできます</p>

        {/* ── セクション5: 口座開設の流れ ── */}
        <h2 className="bk-h2">口座開設の流れ</h2>
        <BrokerStudentBubble>口座開設って難しそう…何日くらいかかるの？</BrokerStudentBubble>
        <BrokerKabuBubble>
          全然難しくないよ！スマホがあれば10分で申し込めるし、
          最短で当日〜翌営業日には取引できるようになるよ！
        </BrokerKabuBubble>

        <div className="bk-steps">
          {BROKER_STEPS.map(s => (
            <div key={s.n} className="bk-step">
              <div className="bk-step-num">{s.n}</div>
              <div className="bk-step-body"><strong>{s.title}</strong><span>{s.desc}</span></div>
            </div>
          ))}
        </div>

        {/* ── セクション6: FAQ ── */}
        <h2 className="bk-h2">よくある質問</h2>
        <div className="bk-faq-list">
          {BROKER_FAQ.map((item, i) => (
            <BrokerFaqItem
              key={i}
              item={item}
              isOpen={openFaq === i}
              onToggle={() => setOpenFaq(openFaq === i ? null : i)}
            />
          ))}
        </div>

        {/* ── セクション7: まとめ + CTA ── */}
        <h2 className="bk-h2">まとめ</h2>
        <BrokerKabuBubble>
          まとめると、初心者がまず1つ開くならSBI証券か楽天証券がおすすめ！
          どっちも手数料ほぼゼロで、新NISAにも対応してるから安心だよ。
          口座開設は無料だから、まずは気軽に申し込んでみよう！
        </BrokerKabuBubble>
        <BrokerStudentBubble>よし、さっそく口座開設してみる！開設できたら次は何を勉強すればいい？</BrokerStudentBubble>
        <BrokerKabuBubble>
          株次郎の学習コースで一緒にステップアップしよう！
          基礎からしっかり学べば、自信を持って投資を始められるよ💪
        </BrokerKabuBubble>

        <div className="bk-cta-block">
          <button className="bk-cta-primary" onClick={() => nav.goHome()}>📚 株次郎の学習コースを見る</button>
          <button className="bk-cta-secondary" onClick={() => nav.goGuide()}>📖 始め方・準備ガイドに戻る</button>
        </div>

        {/* ── セクション8: 免責 ── */}
        <div className="bk-disclaimer">
          <p>※本ページの情報は2026年8月時点のものです。最新の手数料・サービス内容は各証券会社の公式サイトでご確認ください。</p>
          <p>※証券口座の開設・投資にはリスクがあります。投資は自己責任で行ってください。</p>
          <p>※本ページにはプロモーションが含まれます。</p>
        </div>
      </main>
    </>
  );
}

window.BrokerPage = BrokerPage;
