function VialkitTweaks({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Brand">
        <TweakText label="Brand name" value={tweaks.brand} onChange={v => setTweak("brand", v)} />
        <TweakText label="Tagline" value={tweaks.tagline} onChange={v => setTweak("tagline", v)} />
        <TweakSelect label="Headline variant" value={tweaks.headlineVariant || "A"}
          onChange={v => {
            const map = {
              A: {
                headline: "The first injection is\nquieter than the deciding.",
                subhead: "A starter kit for the week before your first injection. The right supplies, a practice pad, a plain-language booklet, and the founder direct on Discord. Same-day in Bangkok.",
              },
              B: {
                headline: "You've already made up your mind.\nThis is everything that comes next.",
                subhead: "A starter kit for the week before your first injection. The right supplies, a practice pad, a plain-language booklet, and the founder direct on Discord. Same-day in Bangkok.",
              },
              C: {
                headline: "Everything you need for the first time.\nNothing you have to figure out.",
                subhead: "A starter kit for the week before your first injection. The right supplies, a practice pad, a plain-language booklet, and the founder direct on Discord. Same-day in Bangkok.",
              },
            };
            setTweak({ headlineVariant: v, headline: map[v].headline, subhead: map[v].subhead });
          }}
          options={[
            { label: "A — quieter than the deciding", value: "A" },
            { label: "B — made up your mind", value: "B" },
            { label: "C — everything / nothing", value: "C" },
          ]} />
        <TweakText label="Hero headline" value={tweaks.headline} onChange={v => setTweak("headline", v)} multiline />
        <TweakText label="Hero subhead" value={tweaks.subhead} onChange={v => setTweak("subhead", v)} multiline />
      </TweakSection>

      <TweakSection title="Visual">
        <TweakColor label="Accent color" value={tweaks.accent} onChange={v => setTweak("accent", v)} />
        <TweakRadio label="Display font" value={tweaks.fontDisplay} onChange={v => setTweak("fontDisplay", v)}
          options={[
            { label: "Newsreader", value: "Newsreader" },
            { label: "Instrument", value: "Instrument Serif" },
            { label: "Inter", value: "Inter" },
            { label: "Manrope", value: "Manrope" },
          ]} />
        <TweakRadio label="Body font" value={tweaks.fontBody} onChange={v => setTweak("fontBody", v)}
          options={[
            { label: "Inter", value: "Inter" },
            { label: "Manrope", value: "Manrope" },
          ]} />
        <TweakToggle label="Dark mode" value={tweaks.darkMode} onChange={v => setTweak("darkMode", v)} />
      </TweakSection>

      <TweakSection title="Layout variants">
        <TweakRadio label="Form style" value={tweaks.formVariant} onChange={v => setTweak("formVariant", v)}
          options={[
            { label: "Full intake", value: "quiz" },
            { label: "Advanced", value: "lightweight" },
          ]} />
        <TweakRadio label="Offer angle" value={tweaks.offerAngle} onChange={v => setTweak("offerAngle", v)}
          options={[
            { label: "Stacked perks", value: "stacked" },
            { label: "Pure discount", value: "discount" },
          ]} />
      </TweakSection>

      <TweakSection title="Pricing (THB)">
        <TweakNumber label="Monthly" value={tweaks.priceMonthly} onChange={v => setTweak("priceMonthly", v)} />
      </TweakSection>

      <TweakSection title="Quick palettes">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 6 }}>
          {[
            ["#2F6F4E", "Clinical green"],
            ["#1F3A5F", "Trust navy"],
            ["#7B3F2C", "Apothecary"],
            ["#0E1410", "Mono ink"],
          ].map(([c, n]) => (
            <button key={c} onClick={() => setTweak("accent", c)}
              title={n}
              style={{
                aspectRatio: "1", borderRadius: 8, background: c,
                border: tweaks.accent === c ? "2px solid white" : "1px solid rgba(255,255,255,0.2)",
                outline: tweaks.accent === c ? `2px solid ${c}` : "none",
                cursor: "pointer",
              }} />
          ))}
        </div>
      </TweakSection>
    </TweaksPanel>
  );
}

Object.assign(window, { VialkitTweaks });