/* 始め方・準備 — 記事一覧ページ */

const GUIDE_ARTICLES = [
  {
    id: "tanigen-mimankabu",
    title: "100円から始める単元未満株完全ガイド",
    subtitle: "主要6社徹底比較【2026年6月】",
    overview: "「数十万円ないと投資できない」は昔の話。今は1株から有名企業の株主になれる時代。SBI証券・楽天証券など主要6社のサービスを徹底比較し、メリット・デメリット・選び方まで初心者向けに解説します。",
    category: "始め方",
    date: "2026年6月",
    readTime: "約10分",
  },
];

function Guide({ nav }) {
  return (
    <>
      <style>{`
        .guide-main {
          padding: 32px 28px 80px;
          max-width: 860px;
        }
        .guide-page-header {
          margin-bottom: 32px;
        }
        .guide-page-header h1 {
          font-size: 22px;
          font-weight: 900;
          color: var(--navy-900);
          margin: 0 0 8px;
        }
        .guide-page-header p {
          font-size: 14px;
          color: var(--ink-500);
          margin: 0;
          line-height: 1.6;
        }
        .guide-article-list {
          display: flex;
          flex-direction: column;
          gap: 16px;
        }
        .guide-card {
          background: var(--white);
          border-radius: var(--radius-md);
          box-shadow: var(--shadow-md);
          padding: 24px;
          cursor: pointer;
          transition: box-shadow 0.18s, transform 0.18s;
          border: 1.5px solid transparent;
        }
        .guide-card:hover {
          box-shadow: var(--shadow-lg);
          transform: translateY(-2px);
          border-color: var(--navy-100);
        }
        .guide-card-top {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 10px;
        }
        .guide-card-category {
          display: inline-block;
          background: var(--navy-100);
          color: var(--navy-800);
          font-size: 11px;
          font-weight: 700;
          padding: 3px 10px;
          border-radius: 99px;
        }
        .guide-card-date {
          font-size: 12px;
          color: var(--ink-300);
        }
        .guide-card-readtime {
          font-size: 12px;
          color: var(--ink-300);
          margin-left: auto;
        }
        .guide-card-title {
          font-size: 18px;
          font-weight: 900;
          color: var(--navy-900);
          margin: 0 0 4px;
          line-height: 1.4;
        }
        .guide-card-subtitle {
          font-size: 13px;
          color: var(--gold-600);
          font-weight: 700;
          margin: 0 0 12px;
        }
        .guide-card-overview {
          font-size: 13px;
          color: var(--ink-700);
          line-height: 1.7;
          margin: 0 0 16px;
        }
        .guide-card-footer {
          display: flex;
          align-items: center;
          justify-content: flex-end;
        }
        .guide-card-btn {
          background: var(--navy-800);
          color: #fff;
          font-size: 13px;
          font-weight: 700;
          padding: 8px 20px;
          border-radius: 99px;
          border: none;
          cursor: pointer;
          transition: background 0.15s;
        }
        .guide-card-btn:hover {
          background: var(--navy-700);
        }
        .guide-empty {
          text-align: center;
          padding: 60px 20px;
          color: var(--ink-300);
          font-size: 14px;
        }
        @media (max-width: 600px) {
          .guide-main { padding: 20px 16px 80px; }
          .guide-card { padding: 18px 16px; }
          .guide-card-title { font-size: 16px; }
        }
      `}</style>

      <main className="main guide-main">
        <div className="guide-page-header">
          <h1>📋 始め方・準備</h1>
          <p>証券口座の開設方法・各社サービス比較など、投資を始める前に知っておきたい情報をまとめています。</p>
        </div>

        <div className="guide-article-list">
          {GUIDE_ARTICLES.map(art => (
            <div
              key={art.id}
              className="guide-card"
              onClick={() => nav.goGuideArticle(art.id)}
            >
              <div className="guide-card-top">
                <span className="guide-card-category">{art.category}</span>
                <span className="guide-card-date">{art.date}</span>
                <span className="guide-card-readtime">📖 {art.readTime}</span>
              </div>
              <h2 className="guide-card-title">{art.title}</h2>
              <p className="guide-card-subtitle">{art.subtitle}</p>
              <p className="guide-card-overview">{art.overview}</p>
              <div className="guide-card-footer">
                <button className="guide-card-btn">読む →</button>
              </div>
            </div>
          ))}
        </div>
      </main>
    </>
  );
}

window.Guide = Guide;
