/* App シェル: 参戦中バナー・全セクション組み立て（デザインBで固定） */

function ArmyBar({ selected }) {
  const f = FACTIONS.find((x) => x.key === selected);
  const cls = f ? f.cls : "";
  // map faction class to its color var for the bar accent
  const colorVar = { f1: "var(--f1)", f2: "var(--f2)", f3: "var(--f3)", f4: "var(--f4)" }[selected];
  return (
    <div className={`army-bar ${f ? "show" : ""}`} style={f ? { "--fc": colorVar } : {}}>
      <span className="lab">あなたの軍</span>
      <span className="nm">{f ? f.name : "—"}</span>
      {f && <span className="army-code">CODE: {f.bonusCode}</span>}
      <a className="go" href="https://sloten.io?referral=2YjM7hs8" target="_blank" rel="noopener">入金して戦力UP »</a>
    </div>
  );
}

function App() {
  const [selected, setSelected] = React.useState(() => localStorage.getItem("kokonbini-army") || null);

  React.useEffect(() => {
    if (selected) localStorage.setItem("kokonbini-army", selected);
  }, [selected]);

  const handleSelect = (key) => setSelected((cur) => (cur === key ? null : key));

  return (
    <div className="page" data-tone="b">
      <div className="wrap">
        <Hero />
        <Overview />
        <Steps />
        <Factions selected={selected} onSelect={handleSelect} />
        <Prizes />
        <WhyConbini />
        <HowTo />
        <FAQ />
        <FinalCTA />
        <Footer />
      </div>
      <ArmyBar selected={selected} />
    </div>
  );
}

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