// ===== Icons =====
const Icon = ({ name, size = 18, stroke = 1.8 }) => {
  const common = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round" };
  const paths = {
    search:   <><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></>,
    arrow:    <><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></>,
    rocket:   <><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/></>,
    pen:      <><path d="M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></>,
    coin:     <><circle cx="8" cy="8" r="6"/><path d="M18.09 10.37A6 6 0 1 1 10.34 18"/><path d="M7 6h1v4"/><path d="m16.71 13.88.7.71-2.82 2.82"/></>,
    flame:    <><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/></>,
    mail:     <><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-10 5L2 7"/></>,
    twitter:  <><path d="M18 6 6 18M6 6l12 12"/></>,
    youtube:  <><path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17"/><path d="m10 15 5-3-5-3z"/></>,
    ig:       <><rect width="20" height="20" x="2" y="2" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/></>,
    clock:    <><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></>,
    chevL:    <><path d="m15 18-6-6 6-6"/></>,
    chevR:    <><path d="m9 18 6-6-6-6"/></>,
    check:    <><path d="M20 6 9 17l-5-5"/></>,
    gift:     <><rect x="3" y="8" width="18" height="4" rx="1"/><path d="M12 8v13"/><path d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7"/><path d="M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5"/></>,
    spark:    <><path d="M12 3v4M12 17v4M3 12h4M17 12h4"/><path d="m5.6 5.6 2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8"/></>,
    calendar: <><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/></>,
    cpu:      <><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M15 2v2M9 2v2M15 20v2M9 20v2M2 15h2M2 9h2M20 15h2M20 9h2"/></>,
    settings: <><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></>,
  };
  return <svg {...common}>{paths[name]}</svg>;
};

// ===== Announcement =====
const Announce = () => (
  <div className="announce">
    <div className="announce-inner">
      <div className="announce-left">
        <span className="announce-badge">NEW</span>
        <span>月5万円達成ロードマップを無料公開中 📘</span>
      </div>
      <div className="announce-right">
        <a href="articles/ai-blog-50000-roadmap.html">無料で読む →</a>
      </div>
    </div>
  </div>
);

// ===== Header =====
const Header = ({ nav }) => (
  <header className="header">
    <div className="header-inner">
      <a href="index.html" className="logo">
        <div className="logo-mark">A</div>
        <div className="logo-text">
          <div className="name">AI Blog Start</div>
          <div className="url">ai-blog-start.com</div>
        </div>
      </a>
      <nav className="nav">
        {nav.map((n, i) => (
          <a key={i} href={n.href} className={n.active ? "active" : ""}>{n.label}</a>
        ))}
        <a href="articles/index.html" className="nav-cta">記事一覧</a>
      </nav>
    </div>
  </header>
);

// ===== Hero =====
const Hero = () => (
  <section className="hero">
    <div className="hero-inner">
      <div>
        <span className="hero-kicker"><span className="dot"></span>AIツールでブログ副業を加速する</span>
        <h1>
          <span className="mark">AIで</span>始める、<br/>
          稼げる<span className="accent">ブログ副業</span>の教科書。
        </h1>
        <p className="lead">
          「ChatGPT・Claudeをどう使えばいい？」初心者でも1記事30分で書ける方法から、SEO・収益化まで。AIを活用したブログ副業の全ステップをやさしく解説します。
        </p>
        <div className="hero-ctas">
          <a href="articles/ai-blog-50000-roadmap.html" className="btn btn-primary">
            <Icon name="rocket" size={16}/>ロードマップを読む
          </a>
          <a href="articles/wordpress-ai-start.html" className="btn btn-ghost">
            <Icon name="gift" size={16}/>ブログの始め方
          </a>
        </div>
        <div className="hero-stats">
          <div className="hero-stat"><div className="num">60</div><div className="lbl">ARTICLES</div></div>
          <div className="hero-stat"><div className="num">5</div><div className="lbl">CATEGORIES</div></div>
          <div className="hero-stat"><div className="num">無料</div><div className="lbl">ROADMAP</div></div>
        </div>
      </div>
      <div className="hero-visual">
        <div className="hero-float f1">
          <div className="emoji"><Icon name="spark" size={14}/></div>
          <span>AIで記事が爆速に!</span>
        </div>
        <div className="hero-card c1">
          <div className="ph">AI WRITING · DASHBOARD</div>
          <span className="tag">AIツール活用</span>
          <div className="t">1記事30分で量産する方法</div>
          <div className="m">2026.05</div>
        </div>
        <div className="hero-card c2">
          <div className="ph" style={{background: "repeating-linear-gradient(45deg, #CFFAFE, #CFFAFE 6px, #ECFEFF 6px, #ECFEFF 12px)"}}>SEO ARTICLE</div>
          <span className="tag">SEO・集客</span>
          <div className="t">ロングテールKW戦略で上位表示</div>
          <div className="m">2026.05 · 10 min</div>
        </div>
        <div className="hero-card c3">
          <div className="ph">SETUP · WORDPRESS</div>
          <span className="tag">始め方</span>
          <div className="t">10分でブログ開設</div>
          <div className="m">2026.05</div>
        </div>
        <div className="hero-float f2">
          <div className="emoji"><Icon name="coin" size={14}/></div>
          <span>初報酬発生 🎉</span>
        </div>
      </div>
    </div>
  </section>
);

// ===== Category strip =====
const CategoryStrip = ({ cats }) => (
  <section className="cat-strip">
    <div className="cat-strip-inner">
      {cats.map(c => (
        <a key={c.key} href={c.href || "articles/index.html#" + c.key} className="cat-card">
          <div className="cat-ic"><Icon name={c.icon} size={22}/></div>
          <div className="cat-meta">
            <div className="cn">{c.name}</div>
            <div className="ct">{c.en} · {c.count} POSTS</div>
          </div>
        </a>
      ))}
    </div>
  </section>
);

// ===== Pickup (featured) =====
const Pickup = ({ items }) => (
  <section className="section">
    <div className="sec-head">
      <div className="sec-title-wrap">
        <h2 className="sec-title">
          <span className="en">PICKUP</span>注目の特集記事
        </h2>
      </div>
      <a href="articles/index.html" className="sec-more">すべて見る <Icon name="arrow" size={13}/></a>
    </div>
    <div className="pickup-grid">
      {items.map((p, i) => (
        <a key={i} href={p.href || "articles/index.html"} className={"pickup-card" + (p.big ? " lg" : "")}>
          <div className={"pickup-thumb " + p.bg}></div>
          <div className="ph-overlay-dots"></div>
          <div className="pickup-overlay"></div>
          <div className="pickup-body">
            <span className="pickup-tag">{p.tag}</span>
            <div className="pickup-title">{p.title}</div>
            <div className="pickup-meta">
              <span>{p.date}</span>
              <span>👁 {p.reads}</span>
            </div>
          </div>
        </a>
      ))}
    </div>
  </section>
);

// ===== Articles list =====
const ArticleCard = ({ a }) => (
  <article className="article-card">
    <a href={a.href || "articles/index.html"} className="article-thumb">
      <div className={"ph " + a.thumb}>
        <div className="ph-overlay-dots"></div>
        <span style={{position: "relative"}}>ARTICLE IMAGE</span>
      </div>
      <span className="pill">{a.pill}</span>
    </a>
    <div className="article-body">
      <div className="article-meta">
        {a.isNew && <span className="new">NEW</span>}
        <span>{a.date}</span>
        <span className="sep"></span>
        <span>{a.cat}</span>
      </div>
      <h3 className="article-title"><a href={a.href || "articles/index.html"}>{a.title}</a></h3>
      <p className="article-excerpt">{a.excerpt}</p>
      <div className="article-footer">
        <div className="article-tags">
          {a.tags.map((t, i) => <span key={i} className="tag-sm">#{t}</span>)}
        </div>
        <span className="read-time"><Icon name="clock" size={11}/> 読了 {a.time}</span>
      </div>
    </div>
  </article>
);

const ArticlesSection = ({ articles }) => (
  <section className="section">
    <div className="sec-head">
      <div className="sec-title-wrap">
        <h2 className="sec-title">
          <span className="en">LATEST POSTS</span>新着・おすすめ記事
        </h2>
      </div>
      <a href="articles/index.html" className="sec-more">全60記事 <Icon name="arrow" size={13}/></a>
    </div>
    <div className="articles">
      {articles.map((a, i) => <ArticleCard key={i} a={a}/>)}
    </div>
    <div style={{textAlign:"center",marginTop:"32px"}}>
      <a href="articles/index.html" className="btn btn-primary" style={{display:"inline-flex",gap:"8px",alignItems:"center"}}>
        <Icon name="arrow" size={16}/>全60記事を見る
      </a>
    </div>
  </section>
);

// ===== Sidebar widgets =====
const ProfileWidget = ({ p }) => (
  <div className="widget">
    <div className="profile-cover"></div>
    <div className="profile-body">
      <div className="avatar">{p.avatar}</div>
      <div className="profile-name">{p.name}</div>
      <div className="profile-handle">{p.handle}</div>
      <div className="profile-tags">
        {p.tags.map((t, i) => <span key={i} className="tag-sm">{t}</span>)}
      </div>
      <p className="profile-bio">{p.bio}</p>
      <div className="profile-stats">
        {p.stats.map((s, i) => (
          <div key={i} className="profile-stat">
            <div className="n">{s.n}</div>
            <div className="l">{s.l}</div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

const CategoriesWidget = ({ cats }) => (
  <div className="widget">
    <div className="widget-head">
      <div className="t">カテゴリー</div>
      <div className="en">CATEGORIES</div>
    </div>
    <ul className="cat-list">
      {cats.map(c => (
        <li key={c.key}>
          <a href={c.href || "articles/index.html#" + c.key} className="cat-link">
            <div className="ic"><Icon name={c.icon} size={16}/></div>
            <div className="txt">
              <div style={{fontSize: "13.5px", fontWeight: 700}}>{c.name}</div>
              <div style={{fontSize: "11px", color: "var(--ink-500)", fontWeight: 500, marginTop: "1px"}}>{c.desc}</div>
            </div>
            <div className="cnt">{String(c.count).padStart(2, "0")}</div>
          </a>
        </li>
      ))}
    </ul>
  </div>
);

const RankingWidget = ({ items }) => (
  <div className="widget">
    <div className="widget-head">
      <div className="t">人気記事ランキング</div>
      <div className="en">RANKING</div>
    </div>
    <ol className="rank-list">
      {items.map((r, i) => (
        <li key={i} className={"rank-item" + (i < 3 ? " top3" : "")}>
          <div className="rank-num">{String(i + 1).padStart(2, "0")}</div>
          <div className="rank-body">
            <h4 className="rank-title"><a href={r.href || "articles/index.html"} style={{color:"inherit",textDecoration:"none"}}>{r.title}</a></h4>
            <div className="rank-meta">{r.date} · 👁 {r.reads}</div>
          </div>
        </li>
      ))}
    </ol>
  </div>
);

const NewsletterWidget = () => (
  <div className="widget news-widget">
    <div className="widget-head">
      <div className="t">月5万円ロードマップ</div>
      <div className="en">FREE GUIDE</div>
    </div>
    <div className="widget-body">
      <p className="d">AIブログで月5万円稼ぐまでの具体的な行動計画を無料公開 📘</p>
      <a href="articles/ai-blog-50000-roadmap.html" className="news-btn" style={{display:"block",textAlign:"center",textDecoration:"none"}}>無料で読む →</a>
    </div>
  </div>
);

const CtaWidget = () => (
  <div className="widget cta-widget">
    <div className="k">RECOMMENDED</div>
    <div className="h">AIブログを始めるなら<br/>ConoHa WING</div>
    <div className="d">LiteSpeed採用・国内最速クラス。ドメイン2個永久無料キャンペーン実施中</div>
    <a href="articles/conoha-wing-register.html" className="btn">
      <Icon name="arrow" size={14}/>登録手順を見る
    </a>
  </div>
);

// ===== Footer =====
const Footer = () => (
  <footer className="footer">
    <div className="footer-inner">
      <div className="footer-brand">
        <a href="index.html" className="logo">
          <div className="logo-mark">A</div>
          <div className="logo-text">
            <div className="name">AI Blog Start</div>
            <div className="url">ai-blog-start.com</div>
          </div>
        </a>
        <p>AIツールを活用したブログ副業の始め方を発信。ChatGPT・Claudeで記事を量産し、SEOと収益化を両立する方法を初心者向けに解説するメディアです。</p>
      </div>
      <div className="footer-col">
        <h4>CATEGORY</h4>
        <ul>
          <li><a href="articles/index.html#start">始め方・基礎</a></li>
          <li><a href="articles/index.html#seo">SEO・集客</a></li>
          <li><a href="articles/index.html#ai">AIツール活用</a></li>
          <li><a href="articles/index.html#monetize">収益化</a></li>
          <li><a href="articles/index.html#management">ブログ運営</a></li>
        </ul>
      </div>
      <div className="footer-col">
        <h4>POPULAR</h4>
        <ul>
          <li><a href="articles/ai-blog-50000-roadmap.html">月5万円ロードマップ</a></li>
          <li><a href="articles/wordpress-ai-start.html">AIでブログ開設</a></li>
          <li><a href="articles/adsense-pass-guide.html">アドセンス審査対策</a></li>
          <li><a href="articles/seo-guide-for-ai-blog.html">SEO対策ガイド</a></li>
        </ul>
      </div>
      <div className="footer-col">
        <h4>OTHER</h4>
        <ul>
          <li><a href="articles/index.html">記事一覧</a></li>
          <li><a href="#">プライバシーポリシー</a></li>
          <li><a href="#">免責事項</a></li>
        </ul>
      </div>
    </div>
    <div className="footer-bottom">
      <div>© 2026 AI Blog Start (ai-blog-start.com) · All rights reserved.</div>
      <div>Powered by AI 🤖</div>
    </div>
  </footer>
);

// Export globally for app.jsx
Object.assign(window, {
  Icon, Announce, Header, Hero, CategoryStrip, Pickup,
  ArticleCard, ArticlesSection, ProfileWidget, CategoriesWidget,
  RankingWidget, NewsletterWidget, CtaWidget, Footer,
});