/* app.jsx - top page composition */
function Nav() {
  const links = [
    ["/worldcup2026/teams/japan/", "日本代表"],
    ["/worldcup2026/groups/group-f/", "Group F分析"],
    ["/worldcup2026/broadcast/", "放送・配信"],
    ["/worldcup2026/predictions/", "順位予想"],
    ["/worldcup2026/goods/", "観戦準備"]
  ];
  return <nav className="nav wc-section-dark"><div className="wrap nav__inner"><a className="brand" href="#top"><span className="brand__mark"><BallMark size={20} /></span><span>AI二刀流 W杯2026<small>Data Watch Guide</small></span></a><div className="nav__links">{links.map(([href, label]) => <a key={href} href={href}>{label}</a>)}<a className="nav__cta" href="/worldcup2026/ratings/">Rating</a></div></div></nav>;
}

function Hero() {
  return <header className="hero wc-section-dark" id="top"><picture><source media="(max-width: 720px)" srcSet="/worldcup2026/public/worldcup2026/hero-top-mobile.png" /><img src="/worldcup2026/public/worldcup2026/hero-top-desktop.png" alt="" className="hero__image" /></picture><div className="hero__shade" /><div className="wrap hero__inner"><Reveal className="hero__copy"><p className="hero__kicker"><BallMark size={15} /> 非公式データ観戦ガイド 2026</p><h1>W杯2026を、<em>データで楽しむ。</em></h1><p>日本代表・Group F・試合日程・放送配信・独自レーティングをまとめた非公式観戦ガイドです。</p><div className="hero__cta"><a className="btn btn--blue" href="/worldcup2026/teams/japan/">日本代表</a><a className="btn btn--gold" href="/worldcup2026/groups/group-f/">Group F分析</a><a className="btn btn--ghost" href="/worldcup2026/broadcast/">放送・配信</a></div><p className="source-note">最終更新日：{LAST_UPDATED} / {DATA_STATUS}</p></Reveal><Reveal className="hero__panel" delay={120}><PowerPanel /></Reveal></div></header>;
}

function GuideLinksSection() {
  return <section className="section section--light wc-section-light section--tight"><div className="wrap guide-grid">{guideLinks.map((item) => <GuideCard key={item.title} item={item} />)}</div></section>;
}

function GroupFSection() {
  return <GroupRatingCompare />;
}

function ScheduleSection() {
  return <section className="section section--light wc-section-light" id="schedule"><div className="wrap two-col"><div><SectionHead eyebrow="Japan Fixtures" title="日本代表の日程" lead="日本代表3試合の日本時間と放送・配信情報を、最新発表にあわせて更新します。" /><div className="inline-actions"><a className="btn btn--blue" href="/worldcup2026/teams/japan/">日本代表ページ</a><a className="btn btn--outline" href="/worldcup2026/broadcast/">放送・配信を確認</a><a className="btn btn--outline" href="/worldcup2026/schedule/">日程ページ</a></div></div><Reveal><MatchScheduleCard /></Reveal></div></section>;
}

function BreakdownSection() {
  return <section className="section section--tint wc-section-light"><div className="wrap"><SectionHead eyebrow="Methodology" title="独自レーティング説明" lead="総合力は4要素で評価。個人戦力を中心にしつつ、代表実績と組織力で補正します。" /><div className="break-grid">{ratings.breakdown.map((item) => <RatingBreakdownCard key={item.label} item={item} />)}</div><p className="data-note">{ratings.sourceNote}</p><div className="inline-actions"><a className="btn btn--outline" href="/worldcup2026/ratings/">レーティングを見る</a></div></div></section>;
}

function CountriesSection() {
  return <section className="section section--light wc-section-light" id="countries"><div className="wrap"><SectionHead eyebrow="Team Files" title="Group F各国カード" lead="6角形の軸は、攻撃力・中盤力・守備力・GK力・控え層・組織力で統一しています。" /><div className="file-grid">{teams.map((team) => <TeamFileCard key={team.key} team={team} />)}</div></div></section>;
}

function AnalysisSection() {
  return <section className="section section--light wc-section-light section--tight"><div className="wrap"><Reveal><article className="analysis"><p className="eyebrow">My View</p><h2>私の見立て</h2><p>オランダが本命ですが、日本も十分に突破を狙える組です。<br />ただし、スウェーデンは前線火力が高く、チュニジアも守備型で簡単ではありません。<br />日本は取りこぼしを防ぎつつ、スウェーデン戦をどう戦うかが大きなポイントになります。</p></article></Reveal></div></section>;
}

function BroadcastSection() {
  return <section className="section section--dark wc-section-dark" id="broadcast"><div className="wrap broadcast"><div><p className="eyebrow">Broadcast & Streaming</p><h2>W杯2026はどこで見られる？</h2><p>日本代表3試合の放送局はJFA公式で発表済みです。全104試合はDAZNでライブ配信予定として、詳細ページに整理しています。</p><a className="btn btn--gold" href="/worldcup2026/broadcast/">放送・配信ページへ</a><p className="data-note">出典：JFA公式 放送ページ、DAZN公式、電通発表 / 最終更新日：2026年6月8日</p></div><div className="broadcast__cards"><span>{I.tv}<b>日本代表戦</b><small>発表済み</small></span><span>{I.cast}<b>全104試合</b><small>配信予定あり</small></span><span>{I.play}<b>見逃し配信</b><small>大会開始後に更新</small></span></div></div></section>;
}

function GoodsSection() {
  return <section className="section section--light wc-section-light" id="goods"><div className="wrap"><SectionHead eyebrow="Watch Setup" title="観戦準備ガイド" lead="W杯2026をより楽しむための観戦準備ガイドは近日公開予定です。放送・配信情報、日本時間の日程、順位予想は先に公開しています。" /><div className="inline-actions"><a className="btn btn--outline" href="/worldcup2026/goods/">観戦準備ガイド（近日公開）</a><a className="btn btn--outline" href="/worldcup2026/schedule/">日程ページへ</a><a className="btn btn--outline" href="/worldcup2026/broadcast/">放送・配信ページへ</a></div></div></section>;
}

function ArticlesSection() {
  return <section className="section section--tint wc-section-light"><div className="wrap"><SectionHead eyebrow="Latest" title="最新記事・動画一覧" lead="ブログ記事やYouTube動画を、更新にあわせて追加していきます。" /><div className="article-grid">{articles.map((item) => <ArticleCard key={item.title} item={item} />)}</div><div className="inline-actions"><a className="btn btn--outline" href="/worldcup2026/news/">最新記事一覧へ</a></div></div></section>;
}

function Footer() {
  return <footer className="footer wc-section-dark"><div className="wrap"><DisclaimerBox /><div className="footer__bottom"><a className="brand" href="#top"><span className="brand__mark"><BallMark size={20} /></span><span>AI二刀流 W杯2026<small>Data Watch Guide</small></span></a><p>© 2026 AI二刀流 W杯2026 データ観戦ガイド</p></div></div></footer>;
}

function App() {
  return <React.Fragment><Nav /><Hero /><GuideLinksSection /><GroupFSection /><ScheduleSection /><BreakdownSection /><CountriesSection /><AnalysisSection /><BroadcastSection /><GoodsSection /><ArticlesSection /><Footer /></React.Fragment>;
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);