// fc-comprules.jsx, the granular "enter details manually" sub-flow off the
// Competition Rules step (Refine Plan). The build collapses these into one
// card; this is the per-rule walkthrough the FC source breaks out:
//   CompEquipReq      · do you wear/carry gear at weigh-in?  (Yes/No)
//   CompEquipWeight   · how much does it weigh?              (kg)
//   CompReweigh       · is there a re-weigh-in?              (Yes/No)
//   CompReweighAllow  · re-weigh allowance                  (%)
//   CompHydration     · is there a hydration clause?         (Yes/No)
//   CompHydrationMax  · max body-weight loss via dehydration (%)
// Reuses the onboarding step chrome (window.OnbStep / SelRow) so it sits
// natively inside the "Refine your plan" flow — OnWeight editorial system.

const CR = { B: '#a32a18' };

// Yes/No selectable pair using the app's standard select rows.
function YesNo({ yes = true }) {
  const Sel = window.SelRow, List = window.GroupedList;
  return (
    <List>
      <Sel label="Yes" on={yes} />
      <Sel label="No" on={!yes} last />
    </List>
  );
}

// Underline number field — label above, big numeral with a cursor, unit trailing.
function NumberField({ label, value, unit }) {
  return (
    <div>
      <div style={{ fontFamily: 'var(--display)', fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-3)', fontWeight: 600, marginBottom: 14 }}>{label}</div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, borderBottom: '1.5px solid var(--ink)', paddingBottom: 12 }}>
        <span style={{ fontFamily: 'var(--num)', fontWeight: 300, fontSize: 44, letterSpacing: '-0.02em', color: 'var(--ink)' }}>{value}</span>
        <span style={{ display: 'inline-block', width: 2, height: 34, background: CR.B, borderRadius: 1, alignSelf: 'center', transform: 'translateY(2px)' }} />
        <span style={{ marginLeft: 'auto', fontFamily: 'var(--mono)', fontSize: 14, letterSpacing: '0.12em', color: 'var(--ink-3)', fontWeight: 600 }}>{unit}</span>
      </div>
    </div>
  );
}

// Small reference list (e.g. typical equipment weights).
function RefList({ items }) {
  return (
    <ul style={{ listStyle: 'none', margin: '14px 0 0', padding: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
      {items.map((t, i) => (
        <li key={i} style={{ display: 'flex', gap: 10, fontFamily: 'var(--sans)', fontSize: 13.5, lineHeight: 1.45, color: 'var(--ink-2)' }}>
          <span style={{ flexShrink: 0, width: 5, height: 5, borderRadius: '50%', background: 'var(--rule-2)', marginTop: 7 }} />
          <span style={{ flex: 1, textWrap: 'pretty' }}>{t}</span>
        </li>
      ))}
    </ul>
  );
}

const SUB = { flow: 'goal', total: 6 };
const headerLabel = 'Competition Rules';

// ── 1 · EQUIPMENT REQUIRED? ─────────────────────────────────────────────────────
function CompEquipReq() {
  return (
    <window.OnbStep {...SUB} step={1} label={headerLabel} title="Do you have equipment requirements?" subtitle="Do you need to wear or carry anything during your weigh-in — a gi, gloves, a uniform?" cta="Next" skip="Skip for now">
      <YesNo yes={true} />
    </window.OnbStep>
  );
}

// ── 2 · EQUIPMENT WEIGHT ─────────────────────────────────────────────────────────
function CompEquipWeight() {
  return (
    <window.OnbStep {...SUB} step={2} label={headerLabel} title="What does your equipment weigh?" subtitle="You weigh in dressed, so we set your body target this much under the class limit." cta="Next" skip="Skip for now"
      footer={<RefList items={['Gi (BJJ / Judo): 1.2–1.8 kg', 'Rashguard & shorts (no-gi): 0.3–0.5 kg', 'Light clothing: ~0.3 kg']} />}>
      <NumberField label="Weight of equipment" value="1.2" unit="KG" />
    </window.OnbStep>
  );
}

// ── 3 · RE-WEIGH-IN? ─────────────────────────────────────────────────────────────
function CompReweigh() {
  return (
    <window.OnbStep {...SUB} step={3} label={headerLabel} title="Is there a re-weigh-in?" subtitle="Some sports check you again on competition day and cap how far above your weigh-in you can be — often within ~5%. Will you be re-weighed?" cta="Next" skip="Skip for now">
      <YesNo yes={true} />
    </window.OnbStep>
  );
}

// ── 4 · RE-WEIGH ALLOWANCE ───────────────────────────────────────────────────────
function CompReweighAllow() {
  return (
    <window.OnbStep {...SUB} step={4} label={headerLabel} title="What’s your re-weigh allowance?" subtitle="How much more can you weigh at the re-weigh compared to your first weigh-in?" cta="Next" skip="Skip for now"
      footer={<div style={{ marginTop: 16 }}><window.CoachTip chip="Judo · Taekwondo" headline="This cap is a built-in anti-cut guardrail." body="If you can’t exceed +5% on comp morning, you can’t over-dehydrate the day before — you have to be able to rebound under the cap. We factor it straight into your fight-week plan." tone="green" /></div>}>
      <NumberField label="Re-weigh allowance" value="5" unit="%" />
    </window.OnbStep>
  );
}

// ── 5 · HYDRATION CLAUSE? ─────────────────────────────────────────────────────────
function CompHydration() {
  return (
    <window.OnbStep {...SUB} step={5} label={headerLabel} title="Do you have a hydration clause?" subtitle="Rules limiting weight loss from dehydration change how close to the fight you can cut water. Does your promotion run one?" cta="Next" skip="Skip for now">
      <YesNo yes={true} />
    </window.OnbStep>
  );
}

// ── 6 · HYDRATION MAX ─────────────────────────────────────────────────────────────
function CompHydrationMax() {
  return (
    <window.OnbStep {...SUB} step={6} label={headerLabel} title="Max body weight you can lose to dehydration?" subtitle="If you’re not allowed to be dehydrated at all, this is usually around 2%." cta="Save rules" skip="Skip for now"
      footer={<div style={{ marginTop: 16 }}><window.CoachTip chip="Hydration cap" headline="A tighter cap pulls your real-weight target lower." body="The less water you’re allowed to drop on the day, the more of the cut has to be real weight across camp. We push your daily targets earlier so you never have to crash." tone="accent" /></div>}>
      <NumberField label="Max body-weight loss" value="2" unit="%" />
    </window.OnbStep>
  );
}

Object.assign(window, { CompEquipReq, CompEquipWeight, CompReweigh, CompReweighAllow, CompHydration, CompHydrationMax });
