// fc-subscription.jsx — the subscription lifecycle the app was missing.
//   SubPaywall      · choose plan + 14-day free trial (the subscribe moment)
//   SubTrialActive  · Subscription screen, trial-running state
//   SubLapsed       · subscription ended — read-only lockout + renew (critical)
//   SubBillingIssue · failed renewal / grace period — update payment
//   SubRestore      · "purchases restored" confirmation
//
// Paywalled end-to-end model (Logic §10): one tier, one hinge. Same balanced
// editorial system. IIFE-scoped so primitives don't collide.
(function () {
  const Phone = window.Phone, StatusBar = window.StatusBar, HomeIndicator = window.HomeIndicator;
  const A = 'var(--accent)';

  function Nav({ title, close = false }) {
    return (
      <div style={{ height: 50, padding: '0 14px', display: 'flex', alignItems: 'center', flexShrink: 0 }}>
        <div style={{ minWidth: 40 }}>
          <button aria-label={close ? 'Close' : 'Back'} style={{ width: 44, height: 44, borderRadius: 0, marginLeft: -8, background: 'none', border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            {close
              ? <svg width="13" height="13" viewBox="0 0 14 14" fill="none"><path d="M1 1 L13 13 M13 1 L1 13" stroke="var(--ink)" strokeWidth="1.8" strokeLinecap="round" /></svg>
              : <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 Primary({ label, sub }) {
    return (
      <button style={{ width: '100%', background: 'var(--ink)', color: 'var(--paper)', border: 'none', borderRadius: 'var(--radius-ctl)', minHeight: 56, fontFamily: 'var(--display)', fontSize: 14, letterSpacing: '0.14em', fontWeight: 600, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 3 }}>
        {label}
        {sub && <span style={{ fontFamily: 'var(--sans)', fontSize: 11.5, letterSpacing: 0, fontWeight: 500, opacity: 0.75, textTransform: 'none' }}>{sub}</span>}
      </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 Restore() {
    return <div style={{ textAlign: 'center', fontFamily: 'var(--sans)', fontSize: 13.5, color: 'var(--ink-3)' }}>Already subscribed? <span style={{ color: A, fontWeight: 600 }}>Restore purchases</span></div>;
  }

  // selectable plan card
  function PlanCard({ name, price, per, foot, badge, on }) {
    return (
      <div style={{ position: 'relative', border: `1.5px solid ${on ? 'var(--ink)' : 'var(--rule)'}`, background: on ? 'var(--paper)' : 'transparent', borderRadius: 'var(--radius)', padding: '16px 17px', display: 'flex', alignItems: 'center', gap: 14, boxShadow: on ? 'var(--card-shadow)' : 'none' }}>
        <span style={{ width: 22, height: 22, borderRadius: '50%', flexShrink: 0, border: `2px solid ${on ? 'var(--ink)' : 'var(--rule-2)'}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          {on && <span style={{ width: 11, height: 11, borderRadius: '50%', background: 'var(--ink)' }} />}
        </span>
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
            <span style={{ fontFamily: 'var(--sans)', fontSize: 16.5, fontWeight: 700, color: 'var(--ink)' }}>{name}</span>
            {badge && <span style={{ fontFamily: 'var(--display)', fontSize: 9.5, letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 700, color: 'var(--paper)', background: A, borderRadius: 100, padding: '3px 8px' }}>{badge}</span>}
          </div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 13, color: 'var(--ink-2)', marginTop: 4 }}>{foot}</div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontFamily: 'var(--num)', fontWeight: 300, fontSize: 26, letterSpacing: '-0.02em', color: 'var(--ink)', lineHeight: 1 }}>{price}</div>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.08em', color: 'var(--ink-3)', fontWeight: 600, marginTop: 3 }}>{per}</div>
        </div>
      </div>
    );
  }

  function Proof({ children }) {
    return (
      <div style={{ display: 'flex', gap: 11, alignItems: 'flex-start' }}>
        <svg width="18" height="18" viewBox="0 0 20 20" fill="none" style={{ flexShrink: 0, marginTop: 1 }}><circle cx="10" cy="10" r="9" fill="var(--accent-soft)" /><path d="M5.8 10.2 L8.7 13 L14.2 7" stroke={A} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" /></svg>
        <span style={{ fontFamily: 'var(--sans)', fontSize: 14.5, color: 'var(--ink)', lineHeight: 1.4, textWrap: 'pretty' }}>{children}</span>
      </div>
    );
  }

  // ── PAYWALL · choose plan + free trial ─────────────────────────────────────
  function SubPaywall() {
    return (
      <Phone styleKey="balanced" label="Paywall · free trial">
        <StatusBar />
        <Nav title="OnWeight" close />
        <div className="scroll" style={{ padding: '4px 24px 24px', display: 'flex', flexDirection: 'column' }}>
          <Mark />
          <div style={{ fontFamily: 'var(--sans)', fontSize: 27, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.1, color: 'var(--ink)', marginTop: 18, textWrap: 'balance' }}>Start your 14-day free trial</div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 15, lineHeight: 1.5, color: 'var(--ink-2)', marginTop: 9, textWrap: 'pretty' }}>Full access to your adaptive cut. Cancel anytime before it ends and pay nothing.</div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 13, margin: '22px 0 24px' }}>
            <Proof>A daily plan that re-maps the moment your weight drifts.</Proof>
            <Proof>Sport-specific weigh-in rules, hydration and rehydration windows.</Proof>
            <Proof>Every camp's history, so each cut starts smarter.</Proof>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
            <PlanCard name="Annual" price="$59" per="/ YEAR" badge="Best value" on foot="14 days free, then $59/yr ($4.92/mo)" />
            <PlanCard name="Monthly" price="$8" per="/ MONTH" foot="14 days free, then $8/mo" />
          </div>

          {/* trial timeline */}
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 0, marginTop: 22, padding: '4px 2px' }}>
            {[['Today', 'Full access unlocks', true], ['Day 12', 'Reminder before billing', false], ['Day 14', 'Trial ends, billing starts', false]].map(([d, t, on], i) => (
              <div key={i} style={{ flex: 1, position: 'relative', paddingRight: i < 2 ? 6 : 0 }}>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <span style={{ width: 11, height: 11, borderRadius: '50%', background: on ? A : 'var(--rule-2)', flexShrink: 0 }} />
                  {i < 2 && <span style={{ flex: 1, height: 2, background: 'var(--rule)' }} />}
                </div>
                <div style={{ fontFamily: 'var(--display)', fontSize: 10.5, letterSpacing: '0.08em', textTransform: 'uppercase', fontWeight: 700, color: on ? A : 'var(--ink-2)', marginTop: 9 }}>{d}</div>
                <div style={{ fontFamily: 'var(--sans)', fontSize: 11.5, color: 'var(--ink-3)', lineHeight: 1.35, marginTop: 3, paddingRight: 8 }}>{t}</div>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 22 }}><Primary label="START FREE TRIAL" sub="14 days free, then $59/yr · cancel anytime" /></div>
          <div style={{ marginTop: 16 }}><Restore /></div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 11.5, color: 'var(--ink-3)', lineHeight: 1.5, textAlign: 'center', marginTop: 14, textWrap: 'pretty' }}>
            Billed through the App Store. <span style={{ color: A, fontWeight: 600 }}>Terms</span> · <span style={{ color: A, fontWeight: 600 }}>Privacy</span>
          </div>
        </div>
        <HomeIndicator />
      </Phone>
    );
  }

  // ── settings list bits (local) ──────────────────────────────────────────────
  function Section({ children }) {
    return <div style={{ fontFamily: 'var(--display)', fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--ink-3)', fontWeight: 600, marginBottom: 11 }}>{children}</div>;
  }
  function Row({ label, value, valueColor, chevron = true, last = false }) {
    return (
      <div style={{ display: 'flex', alignItems: 'center', minHeight: 52, padding: '0 16px', borderBottom: last ? 'none' : '1px solid var(--rule)' }}>
        <span style={{ flex: 1, fontFamily: 'var(--sans)', fontSize: 15.5, color: valueColor || 'var(--ink)', fontWeight: valueColor ? 600 : 500 }}>{label}</span>
        {value && <span style={{ fontFamily: 'var(--sans)', fontSize: 14.5, color: 'var(--ink-3)', marginRight: chevron ? 8 : 0 }}>{value}</span>}
        {chevron && <svg width="7" height="12" viewBox="0 0 7 12" fill="none"><path d="M1 1 L6 6 L1 11" stroke="var(--rule-2)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>}
      </div>
    );
  }
  function List({ children }) {
    return <div style={{ background: 'var(--paper)', borderRadius: 'var(--radius)', boxShadow: 'var(--card-shadow)', border: 'var(--card-border)', overflow: 'hidden' }}>{children}</div>;
  }

  // ── SUBSCRIPTION · trial running ─────────────────────────────────────────────
  function SubTrialActive() {
    return (
      <Phone styleKey="balanced" label="Subscription · trial">
        <StatusBar />
        <Nav title="Subscription" />
        <div className="scroll" style={{ padding: '6px 20px 28px', display: 'flex', flexDirection: 'column', gap: 22 }}>
          <div style={{ background: 'var(--ink)', color: 'var(--paper)', borderRadius: 'var(--radius)', padding: 22 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <span style={{ fontFamily: 'var(--display)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'rgba(246,244,239,0.6)', fontWeight: 600 }}>Current plan</span>
              <span style={{ fontFamily: 'var(--display)', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 700, color: 'var(--ink)', background: 'var(--paper)', borderRadius: 100, padding: '3px 10px' }}>Free trial</span>
            </div>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 24, fontWeight: 700, marginTop: 16 }}>OnWeight Annual</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 8 }}>
              <span style={{ fontFamily: 'var(--num)', fontWeight: 300, fontSize: 30 }}>10</span>
              <span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'rgba(246,244,239,0.7)', fontWeight: 600 }}>DAYS LEFT IN TRIAL</span>
            </div>
            <div style={{ height: 5, borderRadius: 3, background: 'rgba(246,244,239,0.22)', marginTop: 16, overflow: 'hidden' }}><div style={{ width: '28%', height: '100%', background: 'var(--paper)', borderRadius: 3 }} /></div>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 13, color: 'rgba(246,244,239,0.8)', marginTop: 12 }}>Billing starts 21 Jun 2026 · then $59/yr</div>
          </div>

          <div>
            <Section>Manage</Section>
            <List>
              <Row label="Switch to monthly" value="$8 / mo" />
              <Row label="Payment method" value="•• 4242" />
              <Row label="Restore purchases" valueColor="var(--accent)" chevron={false} last />
            </List>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 12.5, color: 'var(--ink-3)', lineHeight: 1.5, marginTop: 11, padding: '0 4px', textWrap: 'pretty' }}>You won't be charged until your trial ends. Cancel before 21 Jun and you pay nothing.</div>
          </div>

          <Ghost label="Cancel trial" />
        </div>
        <HomeIndicator />
      </Phone>
    );
  }

  // ── SUBSCRIPTION ENDED · read-only lockout ───────────────────────────────────
  function SubLapsed() {
    return (
      <Phone styleKey="balanced" label="Subscription ended">
        <StatusBar />
        <Nav title="OnWeight" close />
        <div className="scroll" style={{ padding: '6px 26px 24px', display: 'flex', flexDirection: 'column' }}>
          <div style={{ width: 64, height: 64, borderRadius: 18, background: 'var(--paper-2)', border: '1px solid var(--rule)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg width="26" height="28" viewBox="0 0 26 28" fill="none"><rect x="3" y="12" width="20" height="14" rx="3" stroke="var(--ink)" strokeWidth="1.8" /><path d="M7 12 V8 a6 6 0 0 1 12 0 V12" stroke="var(--ink)" strokeWidth="1.8" strokeLinecap="round" /><circle cx="13" cy="19" r="1.8" fill="var(--ink)" /></svg>
          </div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 27, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.12, color: 'var(--ink)', marginTop: 20, textWrap: 'balance' }}>Your subscription has ended</div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 15, lineHeight: 1.55, color: 'var(--ink-2)', marginTop: 10, textWrap: 'pretty' }}>Your camps and history are safe, but read-only. Renew to log weigh-ins, track your cut and get your daily plan again.</div>

          <div style={{ marginTop: 22, borderRadius: 'var(--radius)', border: '1px solid var(--rule)', overflow: 'hidden' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '14px 16px', borderBottom: '1px solid var(--rule)' }}>
              <svg width="18" height="18" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="var(--t-green)" strokeWidth="1.5" /><path d="M5.8 10.2 L8.7 13 L14.2 7" stroke="var(--t-green)" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" /></svg>
              <span style={{ fontFamily: 'var(--sans)', fontSize: 14, color: 'var(--ink)', fontWeight: 500 }}>Kept · every camp, weigh-in and result</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '14px 16px' }}>
              <svg width="18" height="18" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="var(--ink-3)" strokeWidth="1.5" /><path d="M6.5 10 H13.5" stroke="var(--ink-3)" strokeWidth="1.7" strokeLinecap="round" /></svg>
              <span style={{ fontFamily: 'var(--sans)', fontSize: 14, color: 'var(--ink-2)', fontWeight: 500 }}>Paused · logging, projections and your plan</span>
            </div>
          </div>

          <div style={{ flex: 1, minHeight: 22 }} />
          <Primary label="RENEW · $59 / YEAR" sub="Pick up exactly where you left off" />
          <div style={{ marginTop: 4 }}><Ghost label="See all plans" /></div>
          <div style={{ marginTop: 6 }}><Restore /></div>
        </div>
        <HomeIndicator />
      </Phone>
    );
  }

  // ── BILLING PROBLEM · grace period ───────────────────────────────────────────
  function SubBillingIssue() {
    return (
      <Phone styleKey="balanced" label="Billing problem">
        <StatusBar />
        <Nav title="Subscription" />
        <div className="scroll" style={{ padding: '6px 26px 24px', display: 'flex', flexDirection: 'column' }}>
          <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'var(--t-amber-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg width="34" height="34" viewBox="0 0 36 36" fill="none"><path d="M18 4 L34 31 H2 Z" stroke="var(--t-amber)" strokeWidth="1.8" strokeLinejoin="round" /><path d="M18 14 V22" stroke="var(--t-amber)" strokeWidth="2" strokeLinecap="round" /><circle cx="18" cy="26.5" r="1.2" fill="var(--t-amber)" /></svg>
          </div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 26, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.12, color: 'var(--ink)', marginTop: 20, textWrap: 'balance' }}>There's a problem with your payment</div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 15, lineHeight: 1.55, color: 'var(--ink-2)', marginTop: 10, textWrap: 'pretty' }}>We couldn't renew OnWeight Annual on 14 Sep. We'll keep trying. Update your payment method so you don't lose access mid-camp.</div>

          <div style={{ display: 'flex', alignItems: 'center', gap: 13, marginTop: 22, padding: '15px 16px', borderRadius: 'var(--radius)', border: '1px solid var(--rule)', background: 'var(--paper)' }}>
            <svg width="30" height="22" viewBox="0 0 32 22" fill="none"><rect x="1" y="1" width="30" height="20" rx="3" stroke="var(--ink-3)" strokeWidth="1.4" /><path d="M1 6 H31" stroke="var(--ink-3)" strokeWidth="1.4" /></svg>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: 'var(--sans)', fontSize: 15, fontWeight: 600, color: 'var(--ink)' }}>Visa •• 4242</div>
              <div style={{ fontFamily: 'var(--sans)', fontSize: 13, color: 'var(--t-red)', marginTop: 2, fontWeight: 500 }}>Card declined</div>
            </div>
          </div>

          <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginTop: 16, padding: '11px 14px', borderRadius: 'var(--radius-ctl)', background: 'var(--t-amber-soft)' }}>
            <svg width="15" height="15" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="var(--t-amber)" strokeWidth="1.4" /><path d="M8 5 V8.4 L10.2 9.8" stroke="var(--t-amber)" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" /></svg>
            <span style={{ fontFamily: 'var(--sans)', fontSize: 13, color: 'var(--ink)', fontWeight: 500 }}>Access ends in 5 days if not resolved.</span>
          </div>

          <div style={{ flex: 1, minHeight: 22 }} />
          <Primary label="UPDATE PAYMENT METHOD" />
          <div style={{ marginTop: 4 }}><Ghost label="Remind me later" /></div>
        </div>
        <HomeIndicator />
      </Phone>
    );
  }

  // ── RESTORE · restored confirmation ──────────────────────────────────────────
  function SubRestore() {
    return (
      <Phone styleKey="balanced" label="Purchases restored">
        <StatusBar />
        <Nav title="Restore purchases" />
        <div style={{ flex: 1, padding: '10px 26px 24px', 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(--t-green-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <svg width="38" height="38" viewBox="0 0 40 40" fill="none"><path d="M11 20.5 L17.5 27 L29 14" stroke="var(--t-green)" strokeWidth="2.4" 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' }}>Subscription restored</div>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 15, lineHeight: 1.55, color: 'var(--ink-2)', marginTop: 10, maxWidth: '30ch', textWrap: 'pretty' }}>Welcome back. <span style={{ fontWeight: 600, color: 'var(--ink)' }}>OnWeight Annual</span> is active again, renewing 14 Sep 2026.</div>
          </div>
          <div style={{ width: '100%' }}><Primary label="BACK TO MY PLAN" /></div>
        </div>
        <HomeIndicator />
      </Phone>
    );
  }

  Object.assign(window, { SubPaywall, SubTrialActive, SubLapsed, SubBillingIssue, SubRestore });
})();
