// Tweaks panel — 5 design variations
const CohortTweaks = ({ tweaks }) => {
  const { values, setTweak } = tweaks;
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Hero">
        <TweakRadio
          label="Hero variant"
          value={values.heroVariant}
          options={[
            {value:'type', label:'Typography'},
            {value:'accent', label:'Gold accent'},
            {value:'image', label:'With image'},
          ]}
          onChange={v => setTweak('heroVariant', v)}
        />
      </TweakSection>

      <TweakSection title="Curriculum">
        <TweakRadio
          label="Module layout"
          value={values.curriculumVariant}
          options={[
            {value:'accordion', label:'Accordion'},
            {value:'timeline', label:'Timeline'},
            {value:'cards', label:'Cards'},
          ]}
          onChange={v => setTweak('curriculumVariant', v)}
        />
      </TweakSection>

      <TweakSection title="Pricing">
        <TweakRadio
          label="Presentation"
          value={values.pricingVariant}
          options={[
            {value:'side-by-side', label:'Side-by-side'},
            {value:'toggle', label:'Toggle'},
          ]}
          onChange={v => setTweak('pricingVariant', v)}
        />
      </TweakSection>

      <TweakSection title="Cohort vs alternatives">
        <TweakRadio
          label="Comparison style"
          value={values.labCohortVariant}
          options={[
            {value:'columns', label:'Paired columns'},
            {value:'table', label:'Table'},
            {value:'ledger', label:'Ledger'},
          ]}
          onChange={v => setTweak('labCohortVariant', v)}
        />
      </TweakSection>

      <TweakSection title="Color emphasis">
        <TweakRadio
          label="Accent color"
          value={values.colorEmphasis}
          options={[
            {value:'sky', label:'Sky'},
            {value:'gold', label:'Gold'},
            {value:'navy', label:'Navy'},
          ]}
          onChange={v => setTweak('colorEmphasis', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
};

window.CohortTweaks = CohortTweaks;