// fc-account-safety.jsx — launch-blocker screens the funnel was missing:
//   CreateAccount   · social-first sign-up (Apple / Google) + email, with consent
//   VerifyEmail     · 6-digit email confirmation
//   SafetyDisclaimer· medical/weight-cut safety acknowledgement (required)
//   AgeGate         · date of birth + eligibility (must be 18+)
//   AgeGateMinor    · under-18 → not eligible (OnWeight is 18+ only)
//
// Same "balanced" editorial system as the rest of the app. IIFE-scoped so its
// primitives don't collide with fc-auth's. Social glyphs are quiet/neutral.
(function () {
  const Phone = window.Phone, StatusBar = window.StatusBar, HomeIndicator = window.HomeIndicator;
  const ACCENT = '#a32a18';

  // ── chrome ───────────────────────────────────────────────────────────────
  function Nav({ title, back = true, eyebrow }) {
    return (
      <div style={{ height: 50, padding: '0 14px', display: 'flex', alignItems: 'center', flexShrink: 0 }}>
        <div style={{ minWidth: 40 }}>
          {back && (
            <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>
        <div style={{ flex: 1, textAlign: 'center', fontFamily: 'var(--display)', fontSize: 13, letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 600, color: 'var(--ink-2)' }}>{title}</div>
        <div style={{ minWidth: 40 }} />
      </div>
    );
  }

  function Mark({ size = 50 }) {
    return (
      <div style={{ width: size, height: size, borderRadius: size * 0.29, background: 'var(--ink)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        {window.AppMark ? <window.AppMark ink="var(--paper)" accent="var(--accent)" size={size * 0.6} /> : null}
      </div>
    );
  }

  function Field({ label, val, ph, mask = false, glyph = null, helper = null }) {
    const shown = mask && val ? '\u2022'.repeat(val.length) : val;
    return (
      <div>
        <div style={{ fontFamily: 'var(--display)', fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-3)', fontWeight: 600, marginBottom: 8 }}>{label}</div>
        <div style={{ background: 'var(--paper)', border: '1.5px solid var(--rule)', borderRadius: 'var(--radius-ctl)', minHeight: 52, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 16px', fontFamily: 'var(--sans)', fontSize: 16, color: val ? 'var(--ink)' : 'var(--ink-3)' }}>
          <span style={{ letterSpacing: mask && val ? '0.18em' : 'normal' }}>{shown || ph}</span>
          {glyph}
        </div>
        {helper && <div style={{ fontFamily: 'var(--sans)', fontSize: 12.5, color: 'var(--ink-3)', marginTop: 7, lineHeight: 1.4 }}>{helper}</div>}
      </div>
    );
  }

  function Primary({ label, disabled = false }) {
    return <button style={{ width: '100%', background: disabled ? 'var(--rule)' : 'var(--ink)', color: disabled ? 'var(--ink-3)' : 'var(--paper)', border: 'none', borderRadius: 'var(--radius-ctl)', minHeight: 54, fontFamily: 'var(--display)', fontSize: 14, letterSpacing: '0.14em', fontWeight: 600 }}>{label}</button>;
  }
  function Ghost({ label }) {
    return <button style={{ width: '100%', background: 'transparent', color: 'var(--ink-2)', border: 'none', minHeight: 44, fontFamily: 'var(--sans)', fontSize: 15, fontWeight: 500 }}>{label}</button>;
  }

  function OrRule() {
    return (
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <div style={{ flex: 1, height: 1, background: 'var(--rule)' }} />
        <span style={{ fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--ink-3)', fontWeight: 600 }}>or</span>
        <div style={{ flex: 1, height: 1, background: 'var(--rule)' }} />
      </div>
    );
  }

  const AppleGlyph = <svg width="17" height="19" viewBox="0 0 16 18" fill="none"><path d="M11.2 9.4c0-2 1.5-2.9 1.6-3-0.9-1.3-2.2-1.4-2.7-1.5-1.1-0.1-2.2 0.7-2.8 0.7-0.6 0-1.5-0.6-2.4-0.6-1.2 0-2.4 0.7-3 1.8-1.3 2.2-0.3 5.5 0.9 7.3 0.6 0.9 1.3 1.9 2.2 1.8 0.9 0 1.2-0.6 2.3-0.6 1 0 1.3 0.6 2.3 0.5 0.9 0 1.5-0.9 2.1-1.7 0.4-0.6 0.6-0.9 0.4-1-0.1-0.1-1.9-0.7-1.9-2.9Z" fill="currentColor" /><path d="M9.6 3.6c0.5-0.6 0.8-1.4 0.7-2.3-0.7 0-1.5 0.5-2 1.1-0.4 0.5-0.8 1.3-0.7 2.1 0.8 0.1 1.6-0.4 2-0.9Z" fill="currentColor" /></svg>;
  const GoogleGlyph = <svg width="17" height="17" viewBox="0 0 18 18" fill="none"><circle cx="9" cy="9" r="6.5" stroke="currentColor" strokeWidth="1.5" /><path d="M9 9 H15.5" stroke="currentColor" strokeWidth="1.5" /><path d="M9 9 L13.6 13.6" stroke="currentColor" strokeWidth="1.5" /></svg>;

  // Apple = prominent solid (HIG); Google = neutral outline.
  function Social({ label, glyph, solid = false }) {
    return (
      <button style={{ width: '100%', background: solid ? 'var(--ink)' : 'var(--paper)', color: solid ? 'var(--paper)' : 'var(--ink)', border: solid ? 'none' : '1px solid var(--rule-2)', borderRadius: 'var(--radius-ctl)', minHeight: 52, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 11, fontFamily: 'var(--sans)', fontSize: 15.5, fontWeight: 600 }}>
        <span style={{ width: 20, height: 20, display: 'flex', alignItems: 'center', justifyContent: 'center', color: solid ? 'var(--paper)' : 'var(--ink-2)' }}>{glyph}</span>
        {label}
      </button>
    );
  }

  function Consent() {
    return (
      <div style={{ fontFamily: 'var(--sans)', fontSize: 12.5, color: 'var(--ink-3)', lineHeight: 1.5, textWrap: 'pretty' }}>
        By continuing you agree to the <span style={{ color: 'var(--accent)', fontWeight: 600 }}>Terms of Service</span> and <span style={{ color: 'var(--accent)', fontWeight: 600 }}>Privacy Policy</span>.
      </div>
    );
  }

  function Check({ on = true }) {
    return (
      <span style={{ width: 24, height: 24, borderRadius: 7, flexShrink: 0, background: on ? 'var(--ink)' : 'var(--paper)', border: on ? 'none' : '1.5px solid var(--rule-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: 1 }}>
        {on && <svg width="13" height="13" viewBox="0 0 14 14" fill="none"><path d="M2.5 7.5 L5.5 10.5 L11.5 3.5" stroke="var(--paper)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>}
      </span>
    );
  }

  // status pill (eligibility readout)
  function Pill({ tone, children }) {
    const c = tone === 'green' ? { fg: 'var(--t-green)', bg: 'var(--t-green-soft)' } : tone === 'amber' ? { fg: 'var(--t-amber)', bg: 'var(--t-amber-soft)' } : { fg: 'var(--accent)', bg: 'var(--accent-soft)' };
    return (
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: c.bg, borderRadius: 100, padding: '7px 14px 7px 11px', fontFamily: 'var(--display)', fontSize: 12, letterSpacing: '0.08em', textTransform: 'uppercase', fontWeight: 700, color: c.fg }}>
        <span style={{ width: 7, height: 7, borderRadius: '50%', background: c.fg }} />{children}
      </span>
    );
  }

  const CalGlyph = <svg width="19" height="19" viewBox="0 0 20 20" fill="none"><rect x="2.5" y="4" width="15" height="13.5" rx="2.5" stroke="var(--ink-3)" strokeWidth="1.4" /><path d="M2.5 8 H17.5" stroke="var(--ink-3)" strokeWidth="1.4" /><path d="M6.5 2.5 V5 M13.5 2.5 V5" stroke="var(--ink-3)" strokeWidth="1.4" strokeLinecap="round" /></svg>;

  // ── CREATE ACCOUNT ─────────────────────────────────────────────────────────
  function CreateAccount() {
    return (
      <Phone styleKey="balanced" label="Create account">
        <StatusBar />
        <Nav title="Create account" />
        <div className="scroll" style={{ padding: '6px 26px 22px', display: 'flex', flexDirection: 'column' }}>
          <Mark />
          <div style={{ fontFamily: 'var(--sans)', fontSize: 27, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.12, color: 'var(--ink)', marginTop: 20, textWrap: 'balance' }}>Create your account</div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 15, lineHeight: 1.5, color: 'var(--ink-2)', marginTop: 9, textWrap: 'pretty' }}>One login for every camp. We keep your history so each cut starts smarter than the last.</div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 11, marginTop: 24 }}>
            <Social label="Continue with Apple" glyph={AppleGlyph} solid />
            <Social label="Continue with Google" glyph={GoogleGlyph} />
          </div>
          <div style={{ margin: '20px 0 16px' }}><OrRule /></div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <Field label="Email" val="" ph="you@email.com" />
            <Field label="Password" val="" ph="At least 8 characters" mask />
          </div>
          <div style={{ marginTop: 18 }}><Primary label="CREATE ACCOUNT" /></div>
          <div style={{ marginTop: 14 }}><Consent /></div>
          <div style={{ flex: 1, minHeight: 18 }} />
          <div style={{ textAlign: 'center', fontFamily: 'var(--sans)', fontSize: 14.5, color: 'var(--ink-2)', paddingTop: 6 }}>
            Already have an account? <span style={{ color: 'var(--accent)', fontWeight: 600 }}>Log in</span>
          </div>
        </div>
        <HomeIndicator />
      </Phone>
    );
  }

  // ── VERIFY EMAIL ─────────────────────────────────────────────────────────────
  function CodeBoxes({ digits = '724', total = 6 }) {
    return (
      <div style={{ display: 'flex', gap: 9, justifyContent: 'center' }}>
        {Array.from({ length: total }).map((_, i) => {
          const filled = i < digits.length, cursor = i === digits.length;
          return (
            <div key={i} style={{ width: 46, height: 58, borderRadius: 'var(--radius-ctl)', background: 'var(--paper)', border: `1.5px solid ${cursor ? 'var(--ink)' : filled ? 'var(--rule-2)' : 'var(--rule)'}`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--num)', fontWeight: 300, fontSize: 30, color: 'var(--ink)' }}>
              {filled ? digits[i] : cursor ? <span style={{ width: 2, height: 26, background: ACCENT, borderRadius: 1 }} /> : ''}
            </div>
          );
        })}
      </div>
    );
  }
  function VerifyEmail() {
    return (
      <Phone styleKey="balanced" label="Verify email">
        <StatusBar />
        <Nav title="Verify email" />
        <div style={{ flex: 1, padding: '12px 26px 22px', display: 'flex', flexDirection: 'column' }}>
          <div style={{ width: 78, height: 78, borderRadius: '50%', background: 'var(--accent-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg width="36" height="36" viewBox="0 0 40 40" fill="none"><rect x="5" y="9" width="30" height="22" rx="3" stroke="var(--accent)" strokeWidth="1.8" /><path d="M6 11 L20 22 L34 11" stroke="var(--accent)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 27, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.12, color: 'var(--ink)', marginTop: 22, textWrap: 'balance' }}>Confirm your email</div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 15, lineHeight: 1.5, color: 'var(--ink-2)', marginTop: 10, textWrap: 'pretty' }}>Enter the 6-digit code we sent to <span style={{ fontWeight: 600, color: 'var(--ink)' }}>alex.mercer@gmail.com</span>.</div>
          <div style={{ marginTop: 28 }}><CodeBoxes digits="724" /></div>
          <div style={{ textAlign: 'center', marginTop: 18, fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.06em', color: 'var(--ink-3)', fontWeight: 600 }}>RESEND IN 0:31</div>
          <div style={{ marginTop: 22 }}><Primary label="VERIFY EMAIL" /></div>
          <div style={{ flex: 1 }} />
          <div style={{ textAlign: 'center' }}><Ghost label="Wrong email? Change it" /></div>
        </div>
        <HomeIndicator />
      </Phone>
    );
  }

  // ── SAFETY DISCLAIMER ─────────────────────────────────────────────────────────
  function SafePoint({ icon, head, body }) {
    return (
      <div style={{ display: 'flex', gap: 13, alignItems: 'flex-start' }}>
        <span style={{ width: 34, height: 34, borderRadius: 9, flexShrink: 0, background: 'var(--accent-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{icon}</span>
        <div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 15.5, fontWeight: 600, color: 'var(--ink)', lineHeight: 1.3 }}>{head}</div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 13.5, color: 'var(--ink-2)', lineHeight: 1.5, marginTop: 3, textWrap: 'pretty' }}>{body}</div>
        </div>
      </div>
    );
  }
  function SafetyDisclaimer() {
    const A = 'var(--accent)';
    return (
      <Phone styleKey="balanced" label="Safety">
        <StatusBar />
        <Nav title="OnWeight Setup" />
        <div className="scroll" style={{ padding: '6px 26px 22px', display: 'flex', flexDirection: 'column' }}>
          <div style={{ fontFamily: 'var(--display)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: A, fontWeight: 600 }}>Before we build your plan</div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 28, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.08, color: 'var(--ink)', marginTop: 10, textWrap: 'balance' }}>Cut smart.<br />Stay safe.</div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 15, lineHeight: 1.5, color: 'var(--ink-2)', marginTop: 12, textWrap: 'pretty' }}>OnWeight maps the slowest cut that still makes weight. Read this before we build your plan.</div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 18, marginTop: 24 }}>
            <SafePoint head="No crash cuts. Ever." body="Every plan targets safe, gradual loss. Never a last-minute scramble that costs you power."
              icon={<svg width="18" height="18" viewBox="0 0 20 20" fill="none"><path d="M10 2.5 L17 5.5 V10 c0 4.2-3 6.6-7 7.8-4-1.2-7-3.6-7-7.8V5.5Z" stroke={A} strokeWidth="1.5" strokeLinejoin="round" /><path d="M7 10 L9.2 12.2 L13.2 7.6" stroke={A} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>} />
            <SafePoint head="Guidance, not medical advice." body="Talk to a doctor or your coach before a serious cut, especially with any health condition."
              icon={<svg width="18" height="18" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="7.5" stroke={A} strokeWidth="1.5" /><path d="M10 9 V14" stroke={A} strokeWidth="1.6" strokeLinecap="round" /><circle cx="10" cy="6.2" r="1" fill={A} /></svg>} />
            <SafePoint head="Listen to your body." body="Feeling dizzy, drained, or unable to train? Stop and reassess. Making weight isn't worth your health."
              icon={<svg width="18" height="18" viewBox="0 0 20 20" fill="none"><path d="M10 16.5 C5 13 2.5 10.2 2.5 7.2 A3.7 3.7 0 0 1 10 5.6 A3.7 3.7 0 0 1 17.5 7.2 C17.5 10.2 15 13 10 16.5Z" stroke={A} strokeWidth="1.5" strokeLinejoin="round" /></svg>} />
            <SafePoint head="Hydrate, don't dehydrate." body="We plan around water, not against it. Extreme dehydration to hit a number is dangerous."
              icon={<svg width="18" height="18" viewBox="0 0 20 20" fill="none"><path d="M10 2.5 C10 2.5 4.5 8.5 4.5 12.3 a5.5 5.5 0 0 0 11 0 C15.5 8.5 10 2.5 10 2.5Z" stroke={A} strokeWidth="1.5" strokeLinejoin="round" /></svg>} />
          </div>

          <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start', marginTop: 24, padding: '15px 16px', background: 'var(--paper-2)', borderRadius: 'var(--radius)', border: '1px solid var(--rule)' }}>
            <Check on />
            <span style={{ fontFamily: 'var(--sans)', fontSize: 13.5, color: 'var(--ink)', lineHeight: 1.45, fontWeight: 500, textWrap: 'pretty' }}>I understand how OnWeight approaches weight cuts, and that it isn't a substitute for medical advice.</span>
          </div>
          <div style={{ marginTop: 16 }}><Primary label="I UNDERSTAND" /></div>
        </div>
        <HomeIndicator />
      </Phone>
    );
  }

  // ── AGE GATE ──────────────────────────────────────────────────────────────────
  function AgeShell({ label, dob, pill, children, cta = 'CONFIRM MY AGE', ghost }) {
    return (
      <Phone styleKey="balanced" label={label}>
        <StatusBar />
        <Nav title="OnWeight Setup" />
        <div className="scroll" style={{ padding: '6px 26px 22px', display: 'flex', flexDirection: 'column' }}>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 28, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.1, color: 'var(--ink)', textWrap: 'balance' }}>How old are you?</div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 15, lineHeight: 1.5, color: 'var(--ink-2)', marginTop: 11, textWrap: 'pretty' }}>Weight-cut guidance changes with age. Your date of birth keeps the plan safe.</div>
          <div style={{ marginTop: 26 }}><Field label="Date of birth" val={dob} ph="DD / MM / YYYY" glyph={CalGlyph} /></div>
          <div style={{ marginTop: 16 }}>{pill}</div>
          {children}
          <div style={{ flex: 1, minHeight: 20 }} />
          <Primary label={cta} />
          {ghost && <div style={{ marginTop: 4 }}><Ghost label={ghost} /></div>}
          <div style={{ fontFamily: 'var(--sans)', fontSize: 12, color: 'var(--ink-3)', lineHeight: 1.5, textAlign: 'center', marginTop: 12, textWrap: 'pretty' }}>You must be 18 or over to use OnWeight.</div>
        </div>
        <HomeIndicator />
      </Phone>
    );
  }
  function AgeGate() {
    return <AgeShell label="Age · eligible" dob="14 March 1998" pill={<Pill tone="green">27 · Good to go</Pill>} />;
  }
  function AgeGateMinor() {
    return (
      <AgeShell label="Age · under 18 (not eligible)" dob="06 May 2009" cta="GO BACK"
        pill={<Pill tone="amber">15 · Must be 18 to use OnWeight</Pill>}>
        <div style={{ marginTop: 18, padding: '16px 17px', background: 'var(--accent-soft)', borderRadius: 'var(--radius)', border: '1px solid color-mix(in srgb, var(--accent) 30%, transparent)' }}>
          <div style={{ fontFamily: 'var(--display)', fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--accent)', fontWeight: 700 }}>18+ only</div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 14, color: 'var(--ink)', lineHeight: 1.5, marginTop: 8, textWrap: 'pretty' }}>OnWeight is for adults. You must be 18 or over to use it — the cut science and safety guidance are built for adult athletes. Come back when you turn 18.</div>
        </div>
      </AgeShell>
    );
  }

  Object.assign(window, { CreateAccount, VerifyEmail, SafetyDisclaimer, AgeGate, AgeGateMinor });
})();
