// app.jsx — Root composition + state. Spec-aligned.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "ink",
  "density": "comfortable",
  "bubbles": "on",
  "showSticky": true
}/*EDITMODE-END*/;

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

  const [castIdx, setCastIdx] = React.useState(0);
  const [amount, setAmount] = React.useState(10000);
  const [cond, setCond] = React.useState(3);
  const [payoutId, setPayoutId] = React.useState("four");
  const [machineId, setMachineId] = React.useState(null);
  const [query, setQuery] = React.useState("");
  const [copied, setCopied] = React.useState(false);

  const machine = MACHINES.find((m) => m.id === machineId) || null;

  const onCopy = async () => {
    const txt = buildCopyText({ amount, cond, payoutId, machine });
    try {
      await navigator.clipboard.writeText(txt);
    } catch (_e) {
      // fall through silently
    }
    setCopied(true);
    setTimeout(() => setCopied(false), 1800);
  };

  return (
    <div className="app" data-theme={t.theme} data-density={t.density} data-bubbles={t.bubbles}>
      <Navbar />
      <Hero />

      <StreakSection />

      <FlowSection />

      <CastSection activeIdx={castIdx} setActiveIdx={setCastIdx} />

      <section id="sim" className="sim" data-screen-label="Simulator">
        <SectionLabel
          num="03"
          kana="賞金シミュレーター"
          en="PRIZE SIMULATOR"
          sub="BUY額・勝利条件・受け取り方法・機種を選んで、想定受取額を確認しよう。"
        />

        <BuyBlock amount={amount} setAmount={setAmount} />
        <WinBlock cond={cond} setCond={setCond} />
        <PayoutBlock payoutId={payoutId} setPayoutId={setPayoutId} />

        <ResultBlock amount={amount} cond={cond} payoutId={payoutId} machine={machine} />

        <MachineBlock
          machineId={machineId}
          setMachineId={setMachineId}
          query={query}
          setQuery={setQuery}
        />

        <Dock
          amount={amount}
          cond={cond}
          payoutId={payoutId}
          machine={machine}
          onCopy={onCopy}
          copied={copied}
        />

        <CopyPreview amount={amount} cond={cond} payoutId={payoutId} machine={machine} />
      </section>

      <FinaleSection />
      <NoteBlock />
      <Footer />

      {t.showSticky && (
        <a
          className="sticky-apply"
          href="https://heavenshot-apply.slotenpromotion.com/"
          target="_blank"
          rel="noreferrer"
        >
          <span className="sticky-apply__dot" />
          今すぐ申請 →
        </a>
      )}

      <TweaksPanel title="CHS Tweaks">
        <TweakSection label="Theme" />
        <TweakRadio
          label="Palette"
          value={t.theme}
          options={[
            { value: "ink", label: "墨" },
            { value: "dawn", label: "暁" },
            { value: "ivory", label: "象牙" },
          ]}
          onChange={(v) => setTweak("theme", v)}
        />
        <TweakRadio
          label="Density"
          value={t.density}
          options={[
            { value: "compact", label: "密" },
            { value: "comfortable", label: "中" },
            { value: "spacious", label: "疎" },
          ]}
          onChange={(v) => setTweak("density", v)}
        />
        <TweakSection label="Voices" />
        <TweakRadio
          label="Bubbles"
          value={t.bubbles}
          options={[
            { value: "on", label: "表示" },
            { value: "off", label: "非表示" },
          ]}
          onChange={(v) => setTweak("bubbles", v)}
        />
        <TweakSection label="Chrome" />
        <TweakToggle
          label="Sticky CTA"
          value={t.showSticky}
          onChange={(v) => setTweak("showSticky", v)}
        />
      </TweaksPanel>
    </div>
  );
}

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