// fc-legal.jsx — legal + data-rights screens needed before launch:
//   LegalToS        · Terms of Service (readable long-form document)
//   LegalPrivacy    · Privacy Policy, with a "data at a glance" summary
//   DataExport      · "Download my data" request (GDPR/CCPA)
//   DataExportReady · export-ready confirmation (emailed link)
//
// Same balanced editorial system; quiet long-form reading layout. IIFE-scoped.
(function () {
  const Phone = window.Phone, StatusBar = window.StatusBar, HomeIndicator = window.HomeIndicator;
  const A = 'var(--accent)';

  function Nav({ title }) {
    return (
      <div style={{ height: 50, padding: '0 14px', display: 'flex', alignItems: 'center', flexShrink: 0, borderBottom: '1px solid var(--rule)' }}>
        <div style={{ minWidth: 40 }}>
          <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 P({ children }) {
    return <p style={{ fontFamily: 'var(--sans)', fontSize: 14, lineHeight: 1.62, color: 'var(--ink-2)', margin: '8px 0 0', textWrap: 'pretty' }}>{children}</p>;
  }
  // numbered section: Oswald accent index + bold subhead + body
  function Sec({ n, title, children }) {
    return (
      <div style={{ marginTop: 24 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 12, fontWeight: 700, color: A, letterSpacing: '0.04em', minWidth: 22 }}>{n}</span>
          <span style={{ fontFamily: 'var(--sans)', fontSize: 16.5, fontWeight: 700, color: 'var(--ink)', letterSpacing: '-0.01em' }}>{title}</span>
        </div>
        <div style={{ paddingLeft: 32 }}>{children}</div>
      </div>
    );
  }
  function DocHead({ title, updated }) {
    return (
      <>
        <div style={{ fontFamily: 'var(--sans)', fontSize: 28, fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.08, color: 'var(--ink)', textWrap: 'balance' }}>{title}</div>
        <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-3)', fontWeight: 600, marginTop: 12 }}>Last updated · {updated}</div>
      </>
    );
  }

  // ── TERMS OF SERVICE ───────────────────────────────────────────────────────
  function LegalToS() {
    return (
      <Phone styleKey="balanced" label="Terms of Service">
        <StatusBar />
        <Nav title="Terms of Service" />
        <div className="scroll" style={{ padding: '18px 24px 30px' }}>
          <DocHead title="Terms of Service" updated="12 May 2026" />
          <P>Welcome to OnWeight. These terms are the agreement between you and OnWeight for using the app. By creating an account you accept them, so please read them, especially the health section.</P>

          <Sec n="1" title="Using OnWeight">
            <P>OnWeight helps combat athletes plan and track a weight cut to a competition. You may use it for your own training only, and you agree to provide accurate information so your plan is safe.</P>
          </Sec>
          <Sec n="2" title="Your account">
            <P>You're responsible for your account and for keeping your login secure. You must be at least 18 to use OnWeight.</P>
          </Sec>
          <Sec n="3" title="Subscriptions & billing">
            <P>OnWeight requires an active subscription. Free trials convert to a paid plan unless cancelled before they end. Billing is handled by the App Store; manage or cancel anytime there. If a subscription lapses, your history stays but becomes read-only.</P>
          </Sec>
          <Sec n="4" title="Health & safety">
            <P>OnWeight is guidance, not medical advice, and is not a substitute for a doctor or qualified coach. Cutting weight carries real health risks. You use your plan at your own discretion, should consult a professional before a significant cut, and must stop if you feel unwell.</P>
          </Sec>
          <Sec n="5" title="Acceptable use">
            <P>Don't misuse the app: no reverse-engineering, reselling, or using OnWeight to harm yourself or others. We may suspend accounts that break these terms.</P>
          </Sec>
          <Sec n="6" title="Liability">
            <P>OnWeight is provided "as is." To the extent the law allows, we aren't liable for outcomes from following a plan, including missed weight or health effects. Nothing here removes rights you have by law.</P>
          </Sec>
          <Sec n="7" title="Changes & contact">
            <P>We may update these terms; we'll tell you in-app when it matters. Questions? Reach us at legal@onweight.app.</P>
          </Sec>
        </div>
        <HomeIndicator />
      </Phone>
    );
  }

  // ── PRIVACY POLICY ─────────────────────────────────────────────────────────
  function GlanceItem({ icon, head, body }) {
    return (
      <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
        <span style={{ width: 32, height: 32, borderRadius: 9, flexShrink: 0, background: 'var(--paper)', border: '1px solid var(--rule)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{icon}</span>
        <div>
          <div style={{ fontFamily: 'var(--display)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-3)', fontWeight: 700 }}>{head}</div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 13.5, color: 'var(--ink)', lineHeight: 1.4, marginTop: 3, fontWeight: 500 }}>{body}</div>
        </div>
      </div>
    );
  }
  function LegalPrivacy() {
    return (
      <Phone styleKey="balanced" label="Privacy Policy">
        <StatusBar />
        <Nav title="Privacy Policy" />
        <div className="scroll" style={{ padding: '18px 24px 30px' }}>
          <DocHead title="Privacy Policy" updated="12 May 2026" />
          <P>Your weight is sensitive. Here's plainly what we collect, why, and the control you have. The short version is in the card below; the detail follows.</P>

          <div style={{ marginTop: 18, padding: '18px 17px', background: 'var(--paper-2)', borderRadius: 'var(--radius)', border: '1px solid var(--rule)', display: 'flex', flexDirection: 'column', gap: 16 }}>
            <GlanceItem head="We collect" body="Your weigh-ins, camps, sport and account basics."
              icon={<svg width="17" height="17" viewBox="0 0 18 18" fill="none"><rect x="3" y="2.5" width="12" height="13" rx="2" stroke="var(--ink-2)" strokeWidth="1.4" /><path d="M6 6.5 H12 M6 9.5 H12 M6 12.5 H10" stroke="var(--ink-2)" strokeWidth="1.4" strokeLinecap="round" /></svg>} />
            <GlanceItem head="We use it for" body="Your plan, projections and the cut-science models."
              icon={<svg width="17" height="17" viewBox="0 0 18 18" fill="none"><path d="M2.5 13 L7 8 L10.5 11 L15.5 5" stroke="var(--ink-2)" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" /></svg>} />
            <GlanceItem head="We never" body="Sell your data or tie research data to your name."
              icon={<svg width="17" height="17" viewBox="0 0 18 18" fill="none"><circle cx="9" cy="9" r="7" stroke="var(--accent)" strokeWidth="1.4" /><path d="M4 4 L14 14" stroke="var(--accent)" strokeWidth="1.4" strokeLinecap="round" /></svg>} />
          </div>

          <Sec n="1" title="What we collect">
            <P>Account details (email), your inputs (sport, fight date, weigh-ins, targets) and basic device/usage data so the app works and improves.</P>
          </Sec>
          <Sec n="2" title="Health data">
            <P>Weight and any cycle data you add are health information, stored encrypted. If you connect Apple Health, we only read what you approve and never write without asking. You can disconnect anytime.</P>
          </Sec>
          <Sec n="3" title="How we share it">
            <P>With processors that run the app (hosting, payments, analytics) under strict contracts, never advertisers. Aggregated, de-identified data may improve our models; it can't be traced back to you.</P>
          </Sec>
          <Sec n="4" title="Your rights">
            <P>You can export everything we hold and delete your account at any time from Settings → Privacy & data. We keep data only as long as your account is active, plus what the law requires.</P>
          </Sec>
          <Sec n="5" title="Contact">
            <P>Privacy questions or requests: privacy@onweight.app.</P>
          </Sec>
        </div>
        <HomeIndicator />
      </Phone>
    );
  }

  // ── DATA EXPORT · request ────────────────────────────────────────────────────
  function Incl({ children }) {
    return (
      <div style={{ display: 'flex', gap: 11, alignItems: 'center', minHeight: 30 }}>
        <svg width="17" height="17" viewBox="0 0 18 18" fill="none"><circle cx="9" cy="9" r="8" fill="var(--accent-soft)" /><path d="M5.3 9.2 L7.8 11.6 L12.7 6.2" stroke={A} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg>
        <span style={{ fontFamily: 'var(--sans)', fontSize: 14.5, color: 'var(--ink)', fontWeight: 500 }}>{children}</span>
      </div>
    );
  }
  function DataExport() {
    return (
      <Phone styleKey="balanced" label="Download my data">
        <StatusBar />
        <Nav title="Your data" />
        <div className="scroll" style={{ padding: '14px 26px 26px', display: 'flex', flexDirection: 'column' }}>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 27, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.12, color: 'var(--ink)', textWrap: 'balance' }}>Download my data</div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 15, lineHeight: 1.5, color: 'var(--ink-2)', marginTop: 10, textWrap: 'pretty' }}>We'll build a complete copy of everything OnWeight holds for you and email a secure download link.</div>

          <div style={{ fontFamily: 'var(--display)', fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--ink-3)', fontWeight: 600, margin: '24px 0 10px' }}>What's included</div>
          <div style={{ background: 'var(--paper)', borderRadius: 'var(--radius)', border: 'var(--card-border)', boxShadow: 'var(--card-shadow)', padding: '14px 16px' }}>
            <Incl>Every weigh-in, with dates and times</Incl>
            <Incl>All camps, plans and fight results</Incl>
            <Incl>Cycle data you've logged</Incl>
            <Incl>Account &amp; subscription details</Incl>
          </div>

          <div style={{ display: 'flex', gap: 12, marginTop: 18 }}>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: 'var(--display)', fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-3)', fontWeight: 600, marginBottom: 8 }}>Format</div>
              <div style={{ display: 'flex', gap: 8 }}>
                <span style={{ flex: 1, textAlign: 'center', fontFamily: 'var(--sans)', fontSize: 14, fontWeight: 600, color: 'var(--paper)', background: 'var(--ink)', borderRadius: 'var(--radius-ctl)', padding: '11px 0' }}>CSV</span>
                <span style={{ flex: 1, textAlign: 'center', fontFamily: 'var(--sans)', fontSize: 14, fontWeight: 500, color: 'var(--ink-2)', background: 'var(--paper)', border: '1px solid var(--rule)', borderRadius: 'var(--radius-ctl)', padding: '11px 0' }}>JSON</span>
              </div>
            </div>
          </div>

          <div style={{ marginTop: 16 }}>
            <div style={{ fontFamily: 'var(--display)', fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-3)', fontWeight: 600, marginBottom: 8 }}>Send to</div>
            <div style={{ background: 'var(--paper)', border: '1px solid var(--rule)', borderRadius: 'var(--radius-ctl)', minHeight: 52, display: 'flex', alignItems: 'center', padding: '0 16px', fontFamily: 'var(--sans)', fontSize: 16, color: 'var(--ink)' }}>alex.mercer@gmail.com</div>
          </div>

          <div style={{ flex: 1, minHeight: 22 }} />
          <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 }}>REQUEST MY DATA</button>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 12, color: 'var(--ink-3)', lineHeight: 1.5, textAlign: 'center', marginTop: 12, textWrap: 'pretty' }}>Exports usually arrive within a few minutes. The link expires in 24 hours.</div>
        </div>
        <HomeIndicator />
      </Phone>
    );
  }

  // ── DATA EXPORT · ready confirmation ─────────────────────────────────────────
  function DataExportReady() {
    return (
      <Phone styleKey="balanced" label="Export ready">
        <StatusBar />
        <Nav title="Your data" />
        <div style={{ flex: 1, padding: '10px 26px 26px', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
            <div style={{ width: 80, height: 80, borderRadius: '50%', background: 'var(--accent-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <svg width="38" height="38" viewBox="0 0 40 40" fill="none"><rect x="6" y="9" width="28" height="21" rx="3" stroke={A} strokeWidth="1.8" /><path d="M7 11 L20 21 L33 11" stroke={A} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></svg>
            </div>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 25, fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--ink)', marginTop: 26, textWrap: 'balance' }}>Your data is on its way</div>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 15, lineHeight: 1.55, color: 'var(--ink-2)', marginTop: 10, maxWidth: '32ch', textWrap: 'pretty' }}>We've emailed a secure download link to <span style={{ fontWeight: 600, color: 'var(--ink)' }}>alex.mercer@gmail.com</span>. It expires in 24 hours.</div>
          </div>
          <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 }}>GOT IT</button>
          <div style={{ marginTop: 10 }}><span style={{ fontFamily: 'var(--sans)', fontSize: 14, color: 'var(--ink-3)' }}>Didn't get it? </span><span style={{ fontFamily: 'var(--sans)', fontSize: 14, color: A, fontWeight: 600 }}>Resend</span></div>
        </div>
        <HomeIndicator />
      </Phone>
    );
  }

  Object.assign(window, { LegalToS, LegalPrivacy, DataExport, DataExportReady });
})();
