/* ─── Dualbat home-sections.jsx — 홈 리디자인 전용 컴포넌트 ──────────────
   원본: design_handoff_landing_redesign/components.jsx
   IIFE 래퍼로 기존 sections.jsx의 Header·Hero·등과 이름 충돌 차단.
   `window.KBHome*` prefix로 export — app.jsx에서 명시적으로 호출.
*/
(function(){
  const { useState, useEffect, useMemo, useRef } = React;
  const D = window.KB_HOME_DATA;
  const TEAM_COLORS = window.KB_TEAM_COLORS || {};

  function relDate(s){
    const m = (s||"").match(/^(\d{4})-(\d{2})-(\d{2})$/); if(!m) return s;
    const pub = new Date(+m[1], +m[2]-1, +m[3]);
    const now = new Date(); const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
    const days = Math.round((today-pub)/86400000);
    if (days<=0) return "오늘"; if (days===1) return "어제"; if (days<=7) return `${days}일 전`;
    return `${+m[2]}/${+m[3]}`;
  }

  /* ─── Icons ─────────────────────────────────────────────────────────── */
  const I = {
    search:(p)=><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>,
    moon:(p)=><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M21 12.5A8.5 8.5 0 1 1 11.5 3a7 7 0 0 0 9.5 9.5z"/></svg>,
    sun:(p)=><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>,
    star:(p)=><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 17.3 5.8 21l1.6-7-5.4-4.7 7-.6L12 2l3 6.7 7 .6-5.4 4.7L18.2 21z"/></svg>,
    arrow:(p)=><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M5 12h14M13 5l7 7-7 7"/></svg>,
    home:(p)=><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M3 11 12 3l9 8"/><path d="M5 10v10h14V10"/></svg>,
    user:(p)=><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>,
    vs:(p)=><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="7" cy="12" r="3"/><circle cx="17" cy="12" r="3"/><path d="M10 12h4"/></svg>,
    pin:(p)=><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 17v5"/><path d="M9 10V4h6v6l3 4H6z"/></svg>,
    menu:(p)=><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M4 6h16M4 12h16M4 18h16"/></svg>,
  };

  /* ─── Header ─────────────────────────────────────────────────────────── */
  function Header(){
    const [isDark, setIsDark] = useState(()=>localStorage.getItem("dualbat_theme")==="dark");
    useEffect(()=>{
      // .home2026 스코프 내 토글 (글 페이지의 :root 토큰 영향 X)
      const root = document.querySelector(".home2026") || document.documentElement;
      root.setAttribute("data-theme", isDark?"dark":"light");
      localStorage.setItem("dualbat_theme", isDark?"dark":"light");
    },[isDark]);
    const items = [
      {id:"home",label:"홈",active:true},{id:"today",label:"오늘 경기"},{id:"mlb",label:"MLB"},
      {id:"kbo",label:"KBO"},{id:"players",label:"선수"},{id:"rank",label:"랭킹"},{id:"guide",label:"가이드"},
    ];
    return (
      <header className="hdr">
        <div className="hdr-inner">
          <a className="logo" href="#"><span className="logo-mark"/><span>Dualbat<small>MLB · KBO ANALYTICS</small></span></a>
          <nav className="nav">{items.map(x=><a key={x.id} href={`#${x.id}`} className={x.active?"active":""}>{x.label}</a>)}</nav>
          <div className="hdr-actions">
            <div className="search-pill desktop-only" role="button"><I.search/> <span>선수 · 팀 · 지표 검색</span> <span className="kbd">⌘K</span></div>
            <button className="icon-btn" title="테마" onClick={()=>setIsDark(d=>!d)}>{isDark?<I.moon/>:<I.sun/>}</button>
            <button className="icon-btn" title="즐겨찾기"><I.star/></button>
          </div>
        </div>
      </header>
    );
  }

  /* ─── Hero — single clear spotlight ──────────────────────────────────── */
  function Hero(){
    const h = D.hero;
    return (
      <section className="hero" id="mlb">
        <div className="hero-grid">
          <div className="hero-main">
            <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",gap:12,flexWrap:"wrap"}}>
              <div style={{display:"flex",alignItems:"center",gap:10}}>
                <span className="tag tag-mlb">한국인 MLB</span>
                <span style={{fontSize:13,color:"var(--text-2)"}}>오늘의 메이저리거</span>
              </div>
              <span className="num" style={{fontSize:12.5,color:"var(--text-3)"}}>갱신 {h.updated} · MLB Stats API</span>
            </div>

            <div className="hero-spotlight">
              <div className="hero-avatar" style={{background:h.teamColor}}>{h.ko[0]}</div>
              <div style={{minWidth:0}}>
                <div style={{display:"flex",alignItems:"baseline",gap:10,flexWrap:"wrap"}}>
                  <span className="hero-name">{h.ko}</span>
                  <span className="num" style={{fontSize:14,color:"var(--text-2)"}}>{h.today.vs} · {h.today.date}</span>
                </div>
                <div className="hero-line" style={{color:h.teamColor}}>{h.today.line}</div>
                <div className="hero-role">{h.role}</div>
              </div>
            </div>

            <div className="hero-stats">
              {h.stats.map((s,i)=>(
                <div className="hero-stat" key={i}>
                  <div className="k">{s.k}</div><div className="v">{s.v}</div><div className="d">{s.d}</div>
                </div>
              ))}
            </div>

            <a className="hero-cta" href="/today.html">
              <span style={{display:"flex",alignItems:"center",gap:9}}>
                <span style={{fontSize:17}}>📅</span> 오늘 KBO 5경기 매치업 분석
              </span>
              <I.arrow/>
            </a>
          </div>

          <div className="hero-side">
            <h4>최근 4경기 폼</h4>
            <div style={{marginBottom:20}}>
              {h.form.map((g,i)=>(
                <div className="form-row" key={i}>
                  <span className="form-date">{g.date}</span>
                  <span className="form-line" style={{color:g.hot?h.teamColor:"var(--text-2)",fontWeight:g.hot?700:600}}>{g.line}</span>
                </div>
              ))}
            </div>
            <h4>다른 한국인 선수</h4>
            <div style={{display:"flex",flexDirection:"column",gap:10}}>
              {h.others.map((p,i)=>(
                <div key={i} style={{display:"flex",alignItems:"center",gap:10}}>
                  <span className="team-mark sm" style={{background:p.color,fontSize:10}}>{p.team}</span>
                  <span style={{fontSize:13.5,fontWeight:700,flexShrink:0}}>{p.ko}</span>
                  <span className="num" style={{marginLeft:"auto",fontSize:11,color:"var(--text-2)",whiteSpace:"nowrap"}}>{p.line}</span>
                </div>
              ))}
            </div>
            <a href="/tools/compare.html" style={{marginTop:"auto",paddingTop:18,display:"inline-flex",alignItems:"center",gap:6,color:"var(--kbo)",fontSize:13,fontWeight:700,textDecoration:"none"}}>
              ✦ 선수 1대1 비교 도구 <I.arrow/>
            </a>
          </div>
        </div>
      </section>
    );
  }

  /* ─── Today's KBO games ──────────────────────────────────────────────── */
  function Games(){
    return (
      <section className="section" id="today">
        <div className="section-head">
          <div><div className="eyebrow" style={{marginBottom:8}}>2026-06-07 · 5경기</div><h2>오늘 KBO 경기</h2></div>
          <a className="more" href="/today.html">전체 일정 <I.arrow/></a>
        </div>
        <div className="games-row">
          {D.matchups.map((m,i)=>(
            <a className="game-card" href="/today.html" key={i}>
              <div className="game-meta"><span className="tag tag-kbo">KBO</span><span className="time">{m.time}</span></div>
              <div style={{display:"flex",flexDirection:"column",gap:8}}>
                <div className="game-team">
                  <span className="abbr" style={{background:m.away.color}}>{m.away.code}</span>
                  <span className="nm">{m.away.code}</span><span className="sp"><i>선발</i>{m.away.sp}</span>
                </div>
                <div className="game-vs"><span>VS</span></div>
                <div className="game-team">
                  <span className="abbr" style={{background:m.home.color}}>{m.home.code}</span>
                  <span className="nm">{m.home.code}</span><span className="sp"><i>선발</i>{m.home.sp}</span>
                </div>
              </div>
              <div className="game-foot"><span>{m.tag}</span><span className="h2h">{m.h2h}</span></div>
            </a>
          ))}
        </div>
      </section>
    );
  }

  /* ─── Analysis — lead + compact rows ─────────────────────────────────── */
  function Analysis(){
    const lead = D.lead;
    return (
      <section className="section" id="analysis">
        <div className="section-head">
          <div><div className="eyebrow" style={{marginBottom:8}}>오늘의 분석</div><h2>한국 야구, 오늘의 시선</h2></div>
          <a className="more" href="#analysis">전체 보기 <I.arrow/></a>
        </div>
        <div className="analysis-layout">
          <a className="lead" href={lead.href} style={{"--rail":lead.rail}}>
            <span className={`tag ${lead.league==="MLB"?"tag-mlb":"tag-kbo"}`}>{lead.league}</span>
            <div className="big">{lead.stat}<small>{lead.unit}</small></div>
            <h3>{lead.title}</h3>
            <p>{lead.excerpt}</p>
            <div className="meta"><span>{lead.author} · {relDate(lead.date)}</span><span className="num">{lead.read} 읽기</span></div>
          </a>
          <div className="story-list">
            {D.stories.map((s,i)=>(
              <a className="story" href={s.href} key={i} style={{"--rail":s.rail}}>
                <div className="stat">{s.stat}<small>{s.unit}</small></div>
                <div className="body">
                  <h4>{s.title}</h4>
                  <div className="sub">
                    <span className={`tag ${s.league==="MLB"?"tag-mlb":"tag-kbo"}`} style={{fontSize:11,padding:"3px 8px"}}>{s.league}</span>
                    <span>{s.sub}</span><span style={{marginLeft:"auto"}}>{relDate(s.date)}</span>
                  </div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>
    );
  }

  /* ─── Player carousel ────────────────────────────────────────────────── */
  function Carousel(){
    return (
      <section className="section" id="players">
        <div className="section-head">
          <div><div className="eyebrow" style={{marginBottom:8}}>인기 선수</div><h2>지금 이 선수들</h2></div>
          <a className="more" href="/players/kbo-stars-mlb.html">선수 전체 <I.arrow/></a>
        </div>
        <div className="carousel">
          {D.players.map((p,i)=>(
            <a className="player-chip" href={p.href} key={i}>
              <div className="player-avatar" style={{background:p.color, fontSize:p.team.length>=3?13:17, boxShadow:`0 0 0 4px ${p.color}22, 0 8px 20px -8px rgba(0,0,0,.35)`}}>
                {p.team}
                {p.live && <span style={{position:"absolute",top:-1,right:-1,width:13,height:13,borderRadius:"50%",background:"var(--mlb)",border:"2px solid var(--bg)"}}/>}
              </div>
              <div className="name">{p.ko}</div>
              <div className="team-line num">{p.team} · {p.pos}</div>
              <div className="live-stat">{p.stat}</div>
              <div className="lg"><span className={`tag ${p.league==="MLB"?"tag-mlb":"tag-kbo"}`} style={{fontSize:10,padding:"2px 8px"}}>{p.league}</span></div>
            </a>
          ))}
        </div>
      </section>
    );
  }

  /* ─── Career chart ───────────────────────────────────────────────────── */
  function CareerChart(){
    const c = D.career, S = c.seasons;
    const W=760, H=300, padL=44, padR=20, padT=24, padB=40;
    const xs = (i)=> padL + i*((W-padL-padR)/(S.length-1));
    const lo=.60, hi=1.05;
    const ys = (v)=> padT + (1-(v-lo)/(hi-lo))*(H-padT-padB);
    const kIdx = S.map((s,i)=>({s,i})).filter(o=>o.s.lg==="kbo");
    const mIdx = S.map((s,i)=>({s,i})).filter(o=>o.s.lg==="mlb");
    const line = (arr)=> arr.map((o,j)=> `${j===0?"M":"L"} ${xs(o.i).toFixed(1)} ${ys(o.s.ops).toFixed(1)}`).join(" ");
    const area = (arr)=>{
      const d = arr.map((o,j)=>`${j===0?"M":"L"} ${xs(o.i).toFixed(1)} ${ys(o.s.ops).toFixed(1)}`).join(" ");
      return `${d} L ${xs(arr[arr.length-1].i).toFixed(1)} ${H-padB} L ${xs(arr[0].i).toFixed(1)} ${H-padB} Z`;
    };
    const grid = [.6,.7,.8,.9,1.0];
    return (
      <section className="section" id="career">
        <div className="section-head">
          <div><div className="eyebrow" style={{marginBottom:8}}>커리어 아크</div><h2>이정후 KBO → MLB 여정</h2></div>
          <div className="chart-legend">
            <span className="lg-item"><span className="dot" style={{background:"var(--kbo)"}}/>KBO 2017–2022</span>
            <span className="lg-item"><span className="dot" style={{background:"var(--mlb)"}}/>MLB 2024–현재</span>
          </div>
        </div>
        <div className="chart-card">
          <svg viewBox={`0 0 ${W} ${H}`} width="100%" style={{display:"block",overflow:"visible"}}>
            <defs>
              <linearGradient id="kboG" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="var(--kbo)" stopOpacity=".28"/><stop offset="1" stopColor="var(--kbo)" stopOpacity="0"/></linearGradient>
              <linearGradient id="mlbG" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="var(--mlb)" stopOpacity=".28"/><stop offset="1" stopColor="var(--mlb)" stopOpacity="0"/></linearGradient>
            </defs>
            {grid.map((g,i)=>(
              <g key={i}>
                <line x1={padL} x2={W-padR} y1={ys(g)} y2={ys(g)} stroke="var(--hairline)" strokeWidth="1"/>
                <text x={padL-10} y={ys(g)+4} textAnchor="end" fontSize="11" fill="var(--text-3)" fontFamily="var(--num)">{g.toFixed(2)}</text>
              </g>
            ))}
            <path d={area(kIdx)} fill="url(#kboG)"/>
            <path d={area(mIdx)} fill="url(#mlbG)"/>
            <path d={line(kIdx)} stroke="var(--kbo)" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
            <path d={line(mIdx)} stroke="var(--mlb)" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
            {S.map((s,i)=>(
              <g key={i}>
                <circle cx={xs(i)} cy={ys(s.ops)} r="4" fill={s.lg==="kbo"?"var(--kbo)":"var(--mlb)"} stroke="var(--bg)" strokeWidth="2"/>
                {(s.ops>=.95 || s.partial) && <text x={xs(i)} y={ys(s.ops)-12} textAnchor="middle" fontSize="11.5" fontWeight="700" fill={s.lg==="kbo"?"var(--kbo)":"var(--mlb)"} fontFamily="var(--num)">{s.ops.toFixed(3).replace(/^0/,"")}</text>}
                <text x={xs(i)} y={H-padB+20} textAnchor="middle" fontSize="11" fill="var(--text-3)" fontFamily="var(--num)">{s.y}</text>
              </g>
            ))}
          </svg>
          <div style={{marginTop:14,fontSize:13.5,color:"var(--text-2)"}}>KBO 통산 OPS .896 · 2022 정점 .996 → MLB 적응기 거쳐 2026 .808 회복 중 <span style={{color:"var(--text-3)"}}>· 출처 KBO 공식 · MLB Stats API</span></div>
        </div>
      </section>
    );
  }

  /* ─── Leaderboard ────────────────────────────────────────────────────── */
  function Sparkbars({ data, color }){
    const max = 4;
    return (
      <div className="sparkbars" title="최근 5경기 안타">
        {data.map((v,i)=>(
          <span key={i} className="sb" style={{height:`${Math.max(14, (v/max)*100)}%`, background: v>=3?color:(v>=1?`color-mix(in srgb, ${color} 55%, transparent)`:"var(--hairline-strong)")}}/>
        ))}
      </div>
    );
  }
  function Leaderboard(){
    const [tab, setTab] = useState("kbo");
    const lb = D.leaderboards[tab];
    const max = Math.max(...lb.rows.map(r=>r.ops), 0.5);
    const LINKS = window.KB_HOME_PLAYER_LINKS || {};
    return (
      <section className="section" id="rank">
        <div className="section-head">
          <div>
            <div className="eyebrow" style={{marginBottom:8}}>2026 리더보드</div>
            <h2>OPS 기준 탑 플레이어</h2>
            <div className="num" style={{fontSize:13,color:"var(--text-3)",marginTop:8}}>자동 갱신 · {tab==="kbo"?"KBO 공식":"MLB Stats API"}</div>
          </div>
          <div className="tabs">
            <button className={tab==="kbo"?"on":""} onClick={()=>setTab("kbo")}><span className="dot" style={{background:"var(--kbo)"}}/>KBO 야수</button>
            <button className={tab==="mlb"?"on":""} onClick={()=>setTab("mlb")}><span className="dot" style={{background:"var(--mlb)"}}/>한국인 MLB</button>
          </div>
        </div>
        <div className="lb" style={{"--accent-lb": tab==="mlb"?"var(--mlb)":"var(--kbo)"}}>
          <table className="lb-table">
            <thead><tr>
              <th style={{width:48}}>#</th>
              <th style={{width:184}}>선수</th>
              <th className="num" style={{width:66}}>OPS</th>
              <th className="lb-bar">시즌 OPS 비교</th>
              <th className="lb-form" style={{width:128}}>최근 5경기</th>
              <th className="num lb-g" style={{width:72,whiteSpace:"nowrap"}}>경기</th>
              <th className="num" style={{width:72,whiteSpace:"nowrap"}}>홈런</th>
              <th className="num lb-rbi" style={{width:72,whiteSpace:"nowrap"}}>타점</th>
              <th className="num" style={{width:80,whiteSpace:"nowrap"}}>타율</th>
            </tr></thead>
            <tbody>
              {lb.rows.map((r,i)=>{
                const tc = TEAM_COLORS[r.sub.split(" ")[0]] || "var(--card-2)";
                const accent = tab==="mlb" ? "var(--mlb)" : "var(--kbo)";
                const href = LINKS[r.name];
                const trProps = href ? {
                  onClick: () => { window.location.href = href; },
                  onKeyDown: (e) => { if (e.key==="Enter") window.location.href = href; },
                  role: "link",
                  tabIndex: 0,
                  title: `${r.name} 페이지로 이동`,
                  style: { cursor: "pointer" },
                } : { style: { cursor: "default" } };
                return (
                <tr key={i} {...trProps}>
                  <td><span className="rank">{i+1}</span></td>
                  <td><div className="player-cell">
                    <span className="team-mark sm" style={{background:tc,fontSize:r.sub.split(" ")[0].length>=3?9:11,fontWeight:800,color:"#fff"}}>{r.sub.split(" ")[0]}</span>
                    <div><div className="name">{r.name}</div><div className="sub">{r.sub}</div></div>
                  </div></td>
                  <td className="num" style={{fontWeight:800,fontSize:16,color:accent}}>{r.ops?r.ops.toFixed(3).replace(/^0/,""):"—"}</td>
                  <td className="lb-bar"><div className={`bar-cell ${tab==="mlb"?"red":""}`}>
                    <div className="track"><div className="fill" style={{width:`${(r.ops/max)*100}%`}}/></div>
                    <span className="num bar-pct">{r.ops?`${Math.round((r.ops/max)*100)}%`:"—"}</span>
                  </div></td>
                  <td className="lb-form"><Sparkbars data={r.last5} color={accent}/></td>
                  <td className="num lb-g" style={{color:"var(--text-2)"}}>{r.g||"—"}</td>
                  <td className="num" style={{fontWeight:700}}>{r.hr}</td>
                  <td className="num lb-rbi" style={{color:"var(--text-2)"}}>{r.rbi||"—"}</td>
                  <td className="num">{r.avg?r.avg.toFixed(3).replace(/^0/,""):"—"}</td>
                </tr>
              );})}
            </tbody>
          </table>
        </div>
      </section>
    );
  }

  /* ─── Guides ─────────────────────────────────────────────────────────── */
  function Guides(){
    return (
      <section className="section" id="guide">
        <div className="section-head">
          <div><div className="eyebrow" style={{marginBottom:8}}>입문자 가이드</div><h2>처음 보는 야구 데이터, 5분이면 이해</h2></div>
          <a className="more" href="/guides/">전체 24편 <I.arrow/></a>
        </div>
        <div className="guides-grid">
          {D.guides.map((g,i)=>(
            <a className="guide-box" href={g.href} key={i} style={{"--gc":g.ec}}>
              <div className="num-badge">{g.n}</div>
              <div className="g-eyebrow" style={{color:g.ec}}>{g.eyebrow}</div>
              <h3>{g.title}</h3>
              <p>{g.body}</p>
              <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginTop:12}}>
                <span className="read">읽으러 가기 <I.arrow/></span>
                <span className="num" style={{fontSize:11,color:"var(--text-3)"}}>{g.time}</span>
              </div>
            </a>
          ))}
        </div>
      </section>
    );
  }

  /* ─── Footer ─────────────────────────────────────────────────────────── */
  function Footer(){
    const cols = [
      { h:"선수", items:[["이정후 — SF","/players/이정후.html"],["김혜성 — LAD","/players/김혜성.html"],["김하성 — ATL","/players/김하성.html"],["오늘 KBO 경기 ✦","/today.html"]] },
      { h:"레전드", items:[["박찬호 124승","/players/박찬호.html"],["류현진 78승","/players/류현진.html"],["추신수 218HR","/players/추신수.html"],["한국인 MLB 순위","/players/korean-mlb-ranking.html"]] },
      { h:"도구", items:[["선수 1대1 비교 ✦","/tools/compare.html"],["드림팀 빌더","/tools/dreamteam.html"],["히트존 매핑","/tools/heatzone.html"],["KBO 10팀 시즌","/teams/"]] },
      { h:"가이드", items:[["가이드 전체 24편","/guides/"],["wRC+가 뭐야?","/guides/wrc-plus.html"],["WAR 5분","/guides/war.html"],["Statcast 풀이","/guides/statcast.html"]] },
    ];
    return (
      <footer>
        <div className="wrap">
          <div className="f-grid">
            <div>
              <a className="logo" href="/"><span className="logo-mark"/><span>Dualbat</span></a>
              <p style={{margin:"14px 0 0",maxWidth:300,lineHeight:1.6,color:"var(--text-3)"}}>한국 팬을 위한 MLB·KBO 동시 분석. 한국인 메이저리거의 매 타석을 한국어로.</p>
              <div className="sources">
                {["MLB Stats API","KBO 공식","Statcast","Lahman DB"].map(s=><span className="source-chip" key={s}>{s}</span>)}
              </div>
            </div>
            {cols.map((c,i)=>(
              <div key={i}><h4>{c.h}</h4><ul>{c.items.map((it,j)=><li key={j}><a href={it[1]}>{it[0]}</a></li>)}</ul></div>
            ))}
          </div>
          <div className="f-bottom">
            <span className="num">© 2026 Dualbat · 비공식 분석 사이트</span>
            <span>이 사이트는 MLB / KBO와 직접 연관되어 있지 않습니다.</span>
          </div>
        </div>
      </footer>
    );
  }

  /* ─── Mobile tab bar ─────────────────────────────────────────────────── */
  function MobileTabBar(){
    const tabs = [
      {id:"home",label:"홈",icon:I.home,href:"#"},{id:"today",label:"오늘",icon:I.vs,href:"/today.html"},
      {id:"players",label:"선수",icon:I.user,href:"#players"},{id:"rank",label:"랭킹",icon:I.pin,href:"#rank"},
      {id:"guide",label:"가이드",icon:I.menu,href:"#guide"},
    ];
    return (
      <nav className="tabbar"><div className="tabbar-inner">
        {tabs.map(t=>{ const Ic=t.icon; return <a key={t.id} href={t.href} className={t.id==="home"?"on":""}><Ic className="tab-icon"/><span>{t.label}</span></a>; })}
      </div></nav>
    );
  }

  /* IIFE export — 명시적 prefix로 기존 sections.jsx와 분리 */
  Object.assign(window, {
    KBHomeHeader: Header,
    KBHomeHero: Hero,
    KBHomeGames: Games,
    KBHomeAnalysis: Analysis,
    KBHomeCarousel: Carousel,
    KBHomeCareerChart: CareerChart,
    KBHomeLeaderboard: Leaderboard,
    KBHomeGuides: Guides,
    KBHomeFooter: Footer,
    KBHomeMobileTabBar: MobileTabBar,
  });
})();