// fc-strategy-info.jsx — content lost in the rebuild, restored from the Figma
// GS_06A_Info sheets + Logic & Flows §8:
//   • Five cut-strategy info sheets (the ⓘ destination on each strategy card):
//     Low Fibre · Low Sodium · Sweat Out · Low Carb · Water Load
//   • The ±20 kg out-of-healthy-range goal gate (with a keep-anyway branch)
// Same balanced editorial system. IIFE-scoped so primitives don't collide.
(function () {
  const Phone = window.Phone, StatusBar = window.StatusBar, HomeIndicator = window.HomeIndicator, CoachTip = window.CoachTip;

  // ── sheet primitives ───────────────────────────────────────────────────────
  function SubHead({ children, warn = false }) {
    return <div style={{ fontFamily: 'var(--display)', fontSize: 11.5, letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 600, color: warn ? 'var(--accent)' : 'var(--ink-3)', display: 'flex', alignItems: 'center', gap: 7 }}>
      {warn && <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M8 1.5 L15 14 H1 Z" stroke="var(--accent)" strokeWidth="1.4" strokeLinejoin="round" /><path d="M8 6 V9.5" stroke="var(--accent)" strokeWidth="1.4" strokeLinecap="round" /><circle cx="8" cy="11.6" r="0.85" fill="var(--accent)" /></svg>}
      {children}
    </div>;
  }
  function P({ children }) {
    return <div style={{ fontFamily: 'var(--sans)', fontSize: 14.5, lineHeight: 1.55, color: 'var(--ink-2)', textWrap: 'pretty' }}>{children}</div>;
  }
  function Bullets({ items }) {
    return <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
      {items.map((t, i) => (
        <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
          <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--ink-3)', flexShrink: 0, marginTop: 8 }} />
          <span style={{ fontFamily: 'var(--sans)', fontSize: 14.5, lineHeight: 1.5, color: 'var(--ink-2)' }}>{t}</span>
        </div>
      ))}
    </div>;
  }
  function Block({ children }) { return <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>{children}</div>; }

  // The whole sheet: scrim above (dimmed context), card pinned to the bottom.
  function InfoSheet({ label, title, headline, intro = [], lose, how = {}, warn = [] }) {
    return (
      <Phone styleKey="balanced" label={label}>
        <div style={{ position: 'absolute', inset: 0, background: '#15140f', opacity: 0.55 }} />
        <div style={{ position: 'relative', zIndex: 1, height: '100%', display: 'flex', flexDirection: 'column' }}>
          <div style={{ height: 50, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', padding: '0 26px 8px', fontFamily: 'system-ui', fontSize: 15, fontWeight: 600, color: '#fff', flexShrink: 0 }}>
            <span>9:41</span>
            <div style={{ display: 'flex', gap: 7, alignItems: 'center' }}>
              <svg width="18" height="11" viewBox="0 0 18 11" fill="none"><rect x="1" y="3" width="2" height="6" rx="0.5" fill="#fff" /><rect x="5" y="1" width="2" height="8" rx="0.5" fill="#fff" /><rect x="9" y="3" width="2" height="6" rx="0.5" fill="#fff" /><rect x="13" y="5" width="2" height="4" rx="0.5" fill="#fff" /></svg>
              <svg width="23" height="11" viewBox="0 0 23 11" fill="none"><rect x="0.5" y="0.8" width="19" height="9.4" rx="2.2" stroke="#fff" fill="none" /><rect x="2" y="2.3" width="14" height="6.4" rx="1.2" fill="#fff" /><rect x="20" y="3.4" width="2" height="4.2" rx="0.5" fill="#fff" /></svg>
            </div>
          </div>
          <div style={{ flex: 1, display: 'flex', alignItems: 'flex-start', justifyContent: 'center', paddingTop: 18 }}>
            <span style={{ fontFamily: 'var(--display)', fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', fontWeight: 600, color: 'rgba(255,255,255,0.62)' }}>Cut strategies</span>
          </div>
          <div style={{ background: 'var(--paper)', borderRadius: '22px 22px 0 0', boxShadow: '0 -10px 40px rgba(0,0,0,0.25)', display: 'flex', flexDirection: 'column' }}>
            <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 9 }}>
              <span style={{ width: 38, height: 5, borderRadius: 3, background: 'var(--rule-2)' }} />
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', padding: '8px 20px 12px' }}>
              <span />
              <span style={{ fontFamily: 'var(--sans)', fontSize: 15.5, fontWeight: 600, color: 'var(--ink)' }}>{title}</span>
              <button style={{ justifySelf: 'end', fontFamily: 'var(--sans)', fontSize: 15.5, fontWeight: 600, color: 'var(--accent)' }}>Done</button>
            </div>
            <div style={{ height: 1, background: 'var(--rule)' }} />
            <div style={{ padding: '20px 22px 8px', display: 'flex', flexDirection: 'column', gap: 20 }}>
              <div style={{ fontFamily: 'var(--sans)', fontSize: 20, fontWeight: 700, letterSpacing: '-0.01em', lineHeight: 1.22, color: 'var(--ink)', textWrap: 'balance' }}>{headline}</div>
              {intro.length > 0 && <Block>{intro.map((t, i) => <P key={i}>{t}</P>)}</Block>}
              <Block>
                <SubHead>How much can you lose?</SubHead>
                <div style={{ fontFamily: 'var(--sans)', fontSize: 16.5, fontWeight: 600, color: 'var(--ink)' }}>{lose}</div>
              </Block>
              <Block>
                <SubHead>How do you do it?</SubHead>
                {how.lead && <P>{how.lead}</P>}
                {how.bullets && <Bullets items={how.bullets} />}
                {how.after && <P>{how.after}</P>}
              </Block>
              <div style={{ background: 'var(--accent-soft)', borderRadius: 'var(--radius)', border: '1px solid color-mix(in srgb, var(--accent) 24%, transparent)', padding: '15px 16px', display: 'flex', flexDirection: 'column', gap: 9 }}>
                <SubHead warn>Warning</SubHead>
                {warn.map((t, i) => <div key={i} style={{ fontFamily: 'var(--sans)', fontSize: 14, lineHeight: 1.5, color: 'var(--ink)', textWrap: 'pretty' }}>{t}</div>)}
              </div>
            </div>
            <HomeIndicator />
          </div>
        </div>
      </Phone>
    );
  }

  // ── the five sheets ──────────────────────────────────────────────────────────
  function StratLowFibre() {
    return <InfoSheet label="Strategy · Low fibre" title="Low Fibre Diet"
      headline="Flush your gut to drop ~1% of scale weight."
      intro={["Clears food out of your digestive system so there's less mass to weigh in.",
              "Eating less fibre moves food through faster — less sitting in your gut on weigh-in day."]}
      lose="~1% of your body weight"
      how={{ lead: "Eat under 10g of fibre a day. Lean on high-energy, low-volume foods:", bullets: ["Puffed rice cereal", "Peanut butter", "White rice"] }}
      warn={["Don't run a low-fibre diet long-term — it's a short-term cutting tool only."]} />;
  }
  function StratLowSodium() {
    return <InfoSheet label="Strategy · Low sodium" title="Low Sodium Diet"
      headline="Shed excess water for a 0.5–1% drop."
      intro={["Sodium makes your body hold water. Cutting it back lowers fluid retention so you weigh in lighter."]}
      lose="~0.5–1% of your body weight"
      how={{ lead: "Stay under 500mg of sodium a day for 2–3 days before weigh-in.", after: "Use salt-reduced foods and don't add salt at the table." }}
      warn={["Never run low sodium more than 3 days without a sports dietitian.", "Extended restriction can be dangerous."]} />;
  }
  function StratSweatOut() {
    return <InfoSheet label="Strategy · Sweat out" title="Sweat Out"
      headline="Sweat off water to drop scale weight fast."
      intro={["Sauna, hot baths or light exercise temporarily lower your body water.",
              "It can sap performance if you overdo it."]}
      lose="Depends on the time between weigh-in and fight"
      how={{ lead: "Sweat using:", bullets: ["Hot bath (38–40°C)", "Sauna (45–55°C)", "Light exercise"], after: "Sweat 10–15 minutes, then rest wrapped in towels or a blanket." }}
      warn={["Never lose more than 5% of your body weight through sweat.", "Dizzy or faint? Stop at once and get medical help."]} />;
  }
  function StratLowCarb() {
    return <InfoSheet label="Strategy · Low carb" title="Low Carb Diet"
      headline="Shed water stored with carbs for a ~3% drop."
      intro={["Every gram of carbohydrate holds about 3ml of water.", "Fewer carbs means less stored water weight."]}
      lose="~3% of your body weight"
      how={{ lead: "Stay under 50g of carbs a day for the 7 days before weigh-in." }}
      warn={["Carbs take 24 hours to fully replenish.", "Don't refeed in time and your energy and performance suffer on fight day."]} />;
  }
  function StratWaterLoad() {
    return <InfoSheet label="Strategy · Water load" title="Water Load"
      headline="Trick your body into over-flushing for a ~0.5% drop."
      intro={["After a few days of high water intake, cutting fluid suddenly keeps your body flushing — and you lose water."]}
      lose="~0.5% of your body weight"
      how={{ lead: "Recommended for male athletes only:", bullets: ["100ml per kg bodyweight for 3 days", "15ml per kg bodyweight the day before weigh-in"] }}
      warn={["Not recommended for female athletes.", "In the luteal phase, water loading can cause hyponatraemia and bloating."]} />;
  }

  // ── ±20 kg out-of-healthy-range goal gate ────────────────────────────────────
  function GoalOutOfRange() {
    return (
      <Phone styleKey="balanced" label="Goal · out of range">
        <StatusBar />
        <div style={{ height: 50, padding: '0 14px', display: 'flex', alignItems: 'center', flexShrink: 0 }}>
          <button aria-label="Back" style={{ width: 44, height: 44, borderRadius: 0, marginLeft: -8, background: 'none', border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg width="9" height="16" viewBox="0 0 11 18" fill="none"><path d="M9 1 L2 9 L9 17" stroke="var(--ink)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </button>
          <div style={{ flex: 1, textAlign: 'center', fontFamily: 'var(--display)', fontSize: 13, letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 600, color: 'var(--ink-2)' }}>Your fight</div>
          <div style={{ width: 38 }} />
        </div>
        <div className="scroll" style={{ padding: '8px 26px 22px', display: 'flex', flexDirection: 'column' }}>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 27, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.12, color: 'var(--ink)', textWrap: 'balance' }}>What weight are you aiming for?</div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 15, lineHeight: 1.5, color: 'var(--ink-2)', marginTop: 9 }}>Your total weight on the scale, including everything you're wearing.</div>

          <div style={{ marginTop: 26, paddingBottom: 14, borderBottom: '2px solid var(--accent)', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
            <span style={{ fontFamily: 'var(--display)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--accent)', fontWeight: 600 }}>Target weight</span>
            <span style={{ fontFamily: 'var(--num)', fontWeight: 300, fontSize: 32, color: 'var(--ink)' }}>50<span style={{ fontSize: 17, color: 'var(--ink-3)', marginLeft: 4 }}>kg</span></span>
          </div>

          <div style={{ marginTop: 22 }}>
            <CoachTip coach={false} tone="red" chip="Out of healthy range"
              headline="This target looks like a mistake."
              bullets={["50 kg is far below your healthy range.", "Don't attempt this without medical supervision.", "See a doctor and sports dietitian first."]}
              note="OnWeight won't build an aggressive plan toward an unsafe target." />
          </div>

          <div style={{ flex: 1, minHeight: 18 }} />
          <button style={{ width: '100%', background: 'var(--ink)', color: 'var(--paper)', border: 'none', borderRadius: 'var(--radius-ctl)', minHeight: 54, fontFamily: 'var(--display)', fontSize: 14, letterSpacing: '0.14em', fontWeight: 600 }}>ADJUST MY TARGET</button>
          <button style={{ width: '100%', background: 'transparent', color: 'var(--ink-3)', border: 'none', minHeight: 46, marginTop: 4, fontFamily: 'var(--sans)', fontSize: 14.5, fontWeight: 500 }}>Keep it anyway</button>
        </div>
        <HomeIndicator />
      </Phone>
    );
  }

  Object.assign(window, { StratLowFibre, StratLowSodium, StratSweatOut, StratLowCarb, StratWaterLoad, GoalOutOfRange });
})();