/* ─── App composition + Tweaks ───────────────────────────────────────── */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#FF4B4B",
  "kboColor": "#4B9CFF",
  "density": "regular",
  "showHeatmap": true,
  "heroLayout": "split"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply tweaks → CSS vars
  React.useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty("--mlb", t.accent);
    r.style.setProperty("--mlb-soft", hex2rgba(t.accent, 0.14));
    r.style.setProperty("--kbo", t.kboColor);
    r.style.setProperty("--kbo-soft", hex2rgba(t.kboColor, 0.14));
    const padMap = { compact: "40px", regular: "56px", comfy: "72px" };
    r.style.setProperty("--section-pad", padMap[t.density] || "56px");
    document.querySelectorAll(".section").forEach(s => {
      s.style.paddingTop = padMap[t.density] || "56px";
      s.style.paddingBottom = padMap[t.density] || "56px";
    });
  }, [t.accent, t.kboColor, t.density]);

  return (
    <>
      <Header/>
      <main className="wrap" style={{paddingTop:24}}>
        <Hero/>
        <MatchupGrid/>
        <AnalysisGrid/>
        <PlayerCarousel/>
        <CareerChart/>
        <Leaderboard/>
        <Guides/>
        <NotifyCTA/>
      </main>
      <Footer/>
      <MobileTabBar/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="컬러"/>
        <TweakColor
          label="MLB / 강조"
          value={t.accent}
          options={["#FF4B4B","#FF7A1A","#F0B229","#FF5CA8"]}
          onChange={(v)=>setTweak("accent", v)}
        />
        <TweakColor
          label="KBO / 보조"
          value={t.kboColor}
          options={["#4B9CFF","#3FB950","#7A5AE0","#22D3EE"]}
          onChange={(v)=>setTweak("kboColor", v)}
        />
        <TweakSection label="레이아웃"/>
        <TweakRadio
          label="섹션 밀도"
          value={t.density}
          options={["compact","regular","comfy"]}
          onChange={(v)=>setTweak("density", v)}
        />
      </TweaksPanel>
    </>
  );
}

function hex2rgba(hex, a) {
  const h = hex.replace("#","");
  const n = parseInt(h.length===3?h.split("").map(c=>c+c).join(""):h, 16);
  return `rgba(${(n>>16)&255}, ${(n>>8)&255}, ${n&255}, ${a})`;
}

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