// fc-notifications.jsx — should-have launch surfaces:
//   NotifContent     · the full push-message content set (copy + triggers + cadence)
//   NotifStack       · how they actually land on the lock screen (stacked, in context)
//   HealthSync       · Apple Health + smart-scale connection (auto weigh-ins)
//   PermissionPrimer · pre-prompt priming shown BEFORE the iOS notifications dialog
//
// Same balanced editorial system. IIFE-scoped. Coach voice: plain, direct, kind.
(function () {
  const Phone = window.Phone, StatusBar = window.StatusBar, HomeIndicator = window.HomeIndicator;
  const A = 'var(--accent)';

  // The notification set, grouped by job.
  const NOTIFS = [
    ['Daily', 'Morning weigh-in', 'Day 41 · 9 to go. Step on fasted, before water or coffee. 10 seconds.', 'Daily · at your weigh-in time'],
    ['Drift & pace', 'Ease off the cut', "You're dropping faster than the plan. Add a little food back to protect your power.", 'Trending too fast · 2 confirmed reads'],
    ['Drift & pace', 'Small gap to close', "A touch behind this week. Tighten up and you're back on the line.", 'Drifting behind · early warning'],
    ['Drift & pace', "Let's adjust the plan", "At this pace you'll miss weight. Two safe ways through. Tap to choose.", 'Projection miss · 2× confirmed'],
    ['Lifecycle', 'Fight week', '3 days out. Your taper and hydration plan is ready.', '7 days before weigh-in'],
    ['Lifecycle', 'You made weight', '155.0 on the nose. Now rebuild smart. Here\u2019s your rehydration.', 'After a made weigh-in'],
    ['Re-engagement', 'We lost the thread', 'Two mornings without a weigh-in. A quick step keeps your projection honest.', 'After 2 missed logs · max 1 / wk'],
    ['Re-engagement', 'Sunday check-in', 'On pace this week. Here\u2019s the seven days in one glance.', 'Weekly · Sunday evening'],
  ];

  function Icon({ size = 38 }) {
    return (
      <div style={{ width: size, height: size, borderRadius: size * 0.26, background: '#15140f', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
        {window.AppMark ? <window.AppMark ink="#f6f4ef" accent="#a32a18" size={size * 0.62} /> : null}
      </div>
    );
  }

  // light banner preview (for the content reference)
  function Banner({ title, body, time = 'now', glass = false }) {
    return (
      <div style={{ background: glass ? 'rgba(245,243,238,0.85)' : 'var(--paper)', backdropFilter: glass ? 'blur(24px)' : 'none', border: glass ? 'none' : '1px solid var(--rule)', borderRadius: 18, padding: '12px 14px', display: 'flex', gap: 11, boxShadow: glass ? '0 8px 30px rgba(0,0,0,0.25)' : 'var(--card-shadow)' }}>
        <Icon size={38} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 8 }}>
            <span style={{ fontFamily: 'var(--mono)', fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', color: '#000', textTransform: 'uppercase' }}>OnWeight</span>
            <span style={{ fontFamily: 'system-ui, sans-serif', fontSize: 12, color: 'rgba(0,0,0,0.45)', flexShrink: 0 }}>{time}</span>
          </div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 14.5, fontWeight: 700, color: '#000', marginTop: 2 }}>{title}</div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 13.5, lineHeight: 1.35, color: '#1c1c1c', marginTop: 1, textWrap: 'pretty' }}>{body}</div>
        </div>
      </div>
    );
  }

  // ── CONTENT SET (reference) ──────────────────────────────────────────────────
  function NotifContent() {
    const cats = [...new Set(NOTIFS.map((n) => n[0]))];
    return (
      <Phone styleKey="balanced" label="Notifications · content">
        <StatusBar />
        <window.CompactNav title="Notification copy" trailing={<span style={{ width: 40 }} />} />
        <div className="scroll" style={{ flex: 1, padding: '8px 20px 28px' }}>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 14.5, lineHeight: 1.55, color: 'var(--ink-2)', textWrap: 'pretty' }}>Every push the app sends, in the coach's voice. Quiet by default; nothing noisy.</div>
          {cats.map((cat) => (
            <div key={cat} style={{ marginTop: 22 }}>
              <div style={{ fontFamily: 'var(--display)', fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: A, fontWeight: 700, marginBottom: 12 }}>{cat}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                {NOTIFS.filter((n) => n[0] === cat).map((n, i) => (
                  <div key={i}>
                    <Banner title={n[1]} body={n[2]} time="now" />
                    <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginTop: 7, paddingLeft: 4 }}>
                      <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><circle cx="6" cy="6" r="5" stroke="var(--ink-3)" strokeWidth="1.2" /><path d="M6 3.4 V6.2 L7.8 7.4" stroke="var(--ink-3)" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" /></svg>
                      <span style={{ fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.04em', color: 'var(--ink-3)', fontWeight: 600, textTransform: 'uppercase' }}>{n[3]}</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
        <HomeIndicator />
      </Phone>
    );
  }

  // ── LOCK SCREEN (stacked, in context) ────────────────────────────────────────
  function NotifStack() {
    return (
      <Phone styleKey="balanced" label="Lock screen · stacked">
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(120% 80% at 50% 8%, #2a2722 0%, #16140f 55%, #0c0b08 100%)' }} />
        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 54, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 30px', color: '#fff' }}>
          <span style={{ fontFamily: 'system-ui, sans-serif', fontSize: 15, fontWeight: 600 }}>6:50</span>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <svg width="17" height="11" viewBox="0 0 17 11" fill="none"><rect x="0.5" y="3" width="3" height="8" rx="1" fill="#fff" /><rect x="4.8" y="1.5" width="3" height="9.5" rx="1" fill="#fff" /><rect x="9.1" y="0" width="3" height="11" rx="1" fill="#fff" /><rect x="13.4" y="0" width="3" height="11" rx="1" fill="rgba(255,255,255,0.4)" /></svg>
            <svg width="22" height="11" viewBox="0 0 24 12" fill="none"><rect x="1" y="1" width="20" height="10" rx="3" stroke="#fff" strokeOpacity="0.5" /><rect x="2.5" y="2.5" width="15" height="7" rx="1.5" fill="#fff" /><rect x="22" y="4" width="1.6" height="4" rx="0.8" fill="#fff" fillOpacity="0.6" /></svg>
          </div>
        </div>
        <div style={{ position: 'absolute', top: 66, left: 0, right: 0, textAlign: 'center', color: '#fff' }}>
          <div style={{ fontFamily: 'system-ui, sans-serif', fontSize: 15, fontWeight: 500, opacity: 0.92 }}>Saturday, 11 January</div>
          <div style={{ fontFamily: 'system-ui, sans-serif', fontSize: 76, fontWeight: 600, letterSpacing: '-0.02em', lineHeight: 1.05, marginTop: 2 }}>6:50</div>
        </div>
        <div style={{ position: 'absolute', top: 240, left: 12, right: 12, display: 'flex', flexDirection: 'column', gap: 9 }}>
          <Banner glass title="Morning weigh-in" body="Day 41 · 9 to go. Step on fasted, before water or coffee. 10 seconds." time="now" />
          <Banner glass title="Fight week" body="3 days out. Your taper and hydration plan is ready." time="7:02" />
          {/* collapsed stack hint */}
          <div style={{ background: 'rgba(245,243,238,0.5)', backdropFilter: 'blur(18px)', borderRadius: 16, height: 30, marginLeft: 18, marginRight: 18, marginTop: -2, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'system-ui, sans-serif', fontSize: 12.5, color: 'rgba(0,0,0,0.55)', fontWeight: 500 }}>2 more from OnWeight</div>
        </div>
        <div style={{ position: 'absolute', bottom: 9, left: 0, right: 0, display: 'flex', justifyContent: 'center' }}>
          <div style={{ width: 140, height: 5, background: 'rgba(255,255,255,0.85)', borderRadius: 3 }} />
        </div>
      </Phone>
    );
  }

  // ── APPLE HEALTH + SMART SCALE SYNC ──────────────────────────────────────────
  function ConnectRow({ name, sub, connected, last }) {
    return (
      <div style={{ display: 'flex', alignItems: 'center', gap: 13, minHeight: 60, padding: '12px 16px', borderBottom: last ? 'none' : '1px solid var(--rule)' }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 15.5, fontWeight: 600, color: 'var(--ink)' }}>{name}</div>
          {sub && <div style={{ fontFamily: 'var(--sans)', fontSize: 12.5, color: 'var(--ink-3)', marginTop: 2, lineHeight: 1.4 }}>{sub}</div>}
        </div>
        {connected
          ? <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: 'var(--display)', fontSize: 10.5, letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 700, color: 'var(--t-green)' }}><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(--t-green)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>Connected</span>
          : <span style={{ fontFamily: 'var(--display)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 700, color: A }}>Connect</span>}
      </div>
    );
  }
  function HealthSync() {
    return (
      <Phone styleKey="balanced" label="Connect data">
        <StatusBar />
        <window.CompactNav title="Devices & sync" trailing={<span style={{ width: 40 }} />} />
        <div className="scroll" style={{ flex: 1, padding: '6px 20px 28px', display: 'flex', flexDirection: 'column', gap: 22 }}>
          <div>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 24, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.12, color: 'var(--ink)', textWrap: 'balance' }}>Weigh in without typing</div>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 14.5, lineHeight: 1.55, color: 'var(--ink-2)', marginTop: 9, textWrap: 'pretty' }}>Connect Apple Health and your morning weight flows in on its own. Fasted, accurate, every day.</div>
          </div>

          <div style={{ background: 'var(--paper)', borderRadius: 'var(--radius)', boxShadow: 'var(--card-shadow)', border: 'var(--card-border)', overflow: 'hidden' }}>
            <ConnectRow name="Apple Health" sub="Reads Body Mass · we never write without asking" last />
          </div>

          <div>
            <div style={{ fontFamily: 'var(--display)', fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--ink-3)', fontWeight: 600, marginBottom: 11 }}>Smart scales</div>
            <div style={{ background: 'var(--paper)', borderRadius: 'var(--radius)', boxShadow: 'var(--card-shadow)', border: 'var(--card-border)', overflow: 'hidden' }}>
              <ConnectRow name="Withings" sub="Body / Body+" />
              <ConnectRow name="Renpho" />
              <ConnectRow name="Garmin Index" />
              <ConnectRow name="Eufy Smart Scale" last />
            </div>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 12.5, color: 'var(--ink-3)', lineHeight: 1.5, marginTop: 11, padding: '0 4px', textWrap: 'pretty' }}>Any scale that syncs to Apple Health works. We read the morning reading and drop the rest.</div>
          </div>

          <button style={{ width: '100%', background: 'transparent', color: 'var(--ink-2)', border: 'none', minHeight: 44, fontFamily: 'var(--sans)', fontSize: 15, fontWeight: 500 }}>I'll log manually</button>
        </div>
        <HomeIndicator />
      </Phone>
    );
  }

  // ── PERMISSION PRIMER (before the OS dialog) ─────────────────────────────────
  function PrimeBullet({ icon, children }) {
    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>
        <span style={{ flex: 1, fontFamily: 'var(--sans)', fontSize: 14.5, color: 'var(--ink)', lineHeight: 1.45, paddingTop: 6, textWrap: 'pretty' }}>{children}</span>
      </div>
    );
  }
  function PermissionPrimer() {
    return (
      <Phone styleKey="balanced" label="Reminder priming">
        <StatusBar />
        <window.CompactNav title="OnWeight Setup" trailing={<span style={{ width: 40 }} />} />
        <div className="scroll" style={{ flex: 1, padding: '10px 26px 26px', display: 'flex', flexDirection: 'column' }}>
          <div style={{ width: 64, height: 64, borderRadius: 18, background: 'var(--accent-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg width="30" height="30" viewBox="0 0 30 30" fill="none"><path d="M15 4 a6.5 6.5 0 0 0 -6.5 6.5 v4.5 l-2.5 4 h18 l-2.5 -4 v-4.5 A6.5 6.5 0 0 0 15 4Z" stroke={A} strokeWidth="1.8" strokeLinejoin="round" /><path d="M12 23 a3 3 0 0 0 6 0" stroke={A} strokeWidth="1.8" strokeLinecap="round" /></svg>
          </div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 27, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.12, color: 'var(--ink)', marginTop: 20, textWrap: 'balance' }}>One reminder. Same time each morning.</div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 15, lineHeight: 1.55, color: 'var(--ink-2)', marginTop: 10, textWrap: 'pretty' }}>The fasted morning weigh-in is the whole engine. We'll never spam you.</div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 26 }}>
            <PrimeBullet icon={<svg width="17" height="17" viewBox="0 0 18 18" fill="none"><circle cx="9" cy="9" r="7" stroke={A} strokeWidth="1.5" /><path d="M9 5 V9 L11.5 11" stroke={A} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>}>One nudge a day, at the time you choose.</PrimeBullet>
            <PrimeBullet icon={<svg width="17" height="17" viewBox="0 0 18 18" fill="none"><path d="M9 2.5 L15 5 V9 c0 3.8-2.7 6-6 7-3.3-1-6-3.2-6-7V5Z" stroke={A} strokeWidth="1.5" strokeLinejoin="round" /></svg>}>Pace alerts only when something needs your attention.</PrimeBullet>
            <PrimeBullet icon={<svg width="17" height="17" viewBox="0 0 18 18" fill="none"><path d="M4 9.5 L7.5 13 L14 5.5" stroke={A} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" /></svg>}>Turn any of it off in Settings, anytime.</PrimeBullet>
          </div>

          <div style={{ flex: 1, minHeight: 24 }} />
          <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 }}>TURN ON REMINDERS</button>
          <button style={{ width: '100%', background: 'transparent', color: 'var(--ink-2)', border: 'none', minHeight: 44, marginTop: 4, fontFamily: 'var(--sans)', fontSize: 15, fontWeight: 500 }}>Not now</button>
        </div>
        <HomeIndicator />
      </Phone>
    );
  }

  Object.assign(window, { NotifContent, NotifStack, HealthSync, PermissionPrimer });
})();
