/* group-f-page.jsx */
function GroupFPage() {
  const teamByKey = Object.fromEntries(Object.values(TEAM_DETAILS).map((t) => [t.key, t]));
  const radarSeries = GROUPF_STANDINGS.map((r) => ({ name: r.team, values: teamByKey[r.key].radar, color: teamByKey[r.key].color, fill: .08 }));
  return <PageShell active="Group F分析">
    <HeroSection eyebrow="Group F Power Analysis" title={<>Group F 戦力分析<br />日本代表は突破できるのか？</>} subtitle="オランダ、日本、スウェーデン、チュニジアを独自レーティングと試合視点で整理する非公式データ観戦ガイドです。">
      <div className="team-stats">
        {GROUPF_STANDINGS.map((r) => <article key={r.key}><b>{r.rating.toFixed(1)}</b><RankBadge item={r} /><span>{r.team} / {r.label}</span></article>)}
      </div>
    </HeroSection>

    <section className="section section--light wc-section-light"><div className="wrap"><AnalysisNote>オランダが本命ですが、日本も十分に突破を狙える組です。ただし、スウェーデンは前線火力が高く、チュニジアも守備型で簡単ではありません。日本は取りこぼしを防ぎつつ、スウェーデン戦をどう戦うかが大きなポイントになります。</AnalysisNote></div></section>

    <section className="section section--tint wc-section-light"><div className="wrap"><SectionHead eyebrow="Standings" title="Group F予想順位表" lead="大会前の独自予想です。公式順位ではありません。" /><StandingsTable /></div></section>

    <section className="section section--light wc-section-light"><div className="wrap"><SectionHead eyebrow="Simulation" title="Group F突破確率" lead="独自Ratingをもとにした現時点の暫定予測です。1位、2位、3位、4位、3位通過、R32進出率を並べています。" /><GroupProbabilityTable /><div className="extra-card-grid probability-insight"><article className="extra-card"><span>Japan View</span><h3>日本は2位通過が本線</h3><p>1位通過も十分に狙えますが、スウェーデン戦を落とすと3位争いに回るリスクがあります。チュニジア戦で取りこぼさず、スウェーデン戦で勝ち点を確保できるかが大きなポイントです。</p></article><article className="extra-card"><span>Notice</span><h3>独自シミュレーション</h3><p>本ページのレーティングと突破確率は、現時点の独自Ratingとシミュレーションに基づく暫定予測です。実際の結果を保証するものではありません。</p></article></div><p className="data-note">出典：当サイト独自シミュレーション / 最終更新日：{PAGE_UPDATED}</p></div></section>

    <section className="section section--light wc-section-light"><div className="wrap"><SectionHead eyebrow="Fixtures" title="Group F対戦表・日本時間・放送予定" lead="日本代表3試合はJFA公式発表を反映。日本戦以外は配信予定と放送局発表待ちを分けて表示します。" /><FixturesTable fixtures={GROUPF_FIXTURES_DETAIL} /><p className="data-note">出典：JFA公式 放送ページ、DAZN公式、電通発表 / 最終更新日：{PAGE_UPDATED}</p></div></section>

    <section className="section section--dark wc-section-dark"><div className="wrap"><SectionHead eyebrow="Knockout Outlook" title="Group Fチームのノックアウト見通し" lead="R32進出、R16進出、ベスト8、優勝確率を概要カードで確認できます。詳しい比較はRatingページで整理しています。" /><GroupFKnockoutCards /><p className="data-note">{window.KNOCKOUT_MODEL_NOTICE}</p><RelatedLinks links={[{label:"順位予想ページ",href:"/worldcup2026/predictions/"},{label:"Ratingページで詳しく見る",href:"/worldcup2026/ratings/"},{label:"日本代表ページ",flag:"jpn",href:TEAM_URLS.jpn}]} /></div></section>

    <section className="section section--dark wc-section-dark"><div className="wrap"><SectionHead eyebrow="Rating Compare" title="Group F総合Rating比較" lead="4チームの総合Ratingと6軸評価を同じ画面で比較できます。" /><div className="group-layout"><div className="team-grid">{GROUPF_STANDINGS.map((r) => <TeamCard key={r.key} team={teamByKey[r.key]} compact />)}</div><div className="radar-panel wc-card-dark"><TeamRadar series={radarSeries} size={330} /></div></div></div></section>

    <section className="section section--navy wc-section-dark"><div className="wrap"><SectionHead eyebrow="Team Cards" title="4チーム比較カード" /><div className="compare-grid">{GROUPF_STANDINGS.map((r) => <TeamCard key={r.key} team={teamByKey[r.key]} />)}</div></div></section>

    <section className="section section--navy wc-section-dark"><div className="wrap"><SectionHead eyebrow="Mini Analysis" title="4チームのミニ分析" /><div className="mini-grid">{Object.values(TEAM_DETAILS).map((t) => <article className="view-card" key={t.key}><h3>{t.displayName}</h3><p>{t.summary}</p></article>)}</div></div></section>

    <section className="section section--light wc-section-light"><div className="wrap"><SectionHead eyebrow="Japan View" title="日本代表視点の見どころ" /><div className="view-grid">{GROUPF_VIEWPOINTS.map((v) => <article className="sub-analysis" key={v.title}><h2>{v.title}</h2><p>{v.body}</p></article>)}</div></div></section>

    <section className="section section--dark wc-section-dark"><div className="wrap"><SectionHead eyebrow="Featured Matches" title="注目カード" /><div className="featured-grid">{FEATURED_MATCHES.map((m) => <article className="featured-card wc-card-dark" key={m.title}><p className="eyebrow">{m.label}</p><h3>{m.title}</h3><p>{m.body}</p></article>)}</div></div></section>

    <section className="section section--tint wc-section-light"><div className="wrap"><SectionHead eyebrow="Explore" title="関連ページ" /><RelatedLinks links={[{label:"順位予想",href:"/worldcup2026/predictions/"},{label:"日本代表ページ",flag:"jpn",href:TEAM_URLS.jpn},{label:"オランダ代表ページ",flag:"ned",href:TEAM_URLS.ned},{label:"スウェーデン代表ページ",flag:"swe",href:TEAM_URLS.swe},{label:"チュニジア代表ページ",flag:"tun",href:TEAM_URLS.tun},{label:"放送・配信",href:"/worldcup2026/broadcast/"}]} /></div></section>

    <footer className="page-footer wc-section-dark"><div className="wrap"><DisclaimerBox /></div></footer>
  </PageShell>;
}
ReactDOM.createRoot(document.getElementById("root")).render(<GroupFPage />);