// fc-widgets.jsx — post-launch nicety: Home- and Lock-screen WIDGETS.
//   WidgetGallery · the widget designs for sign-off (small / medium / lock)
//   WidgetHome    · the small + medium widgets in context on a Home Screen
//   WidgetLock    · the lock-screen complications around the clock
// kg (the app default — the lb parity layer converts these the same way).
// Same balanced system. IIFE-scoped.
(function () {
  const Phone = window.Phone, StatusBar = window.StatusBar, HomeIndicator = window.HomeIndicator;
  const A = '#a32a18', INK = '#15140f', CREAM = '#f4efe6', GREEN = '#2f5a24';

  function Mark({ size = 22, ink = CREAM }) {
    return (
      <div style={{ width: size, height: size, borderRadius: size * 0.28, background: INK, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
        {window.AppMark ? <window.AppMark ink={ink} accent={A} size={size * 0.62} /> : null}
      </div>
    );
  }

  // downward 7-day spark
  function Spark({ w = 96, h = 38, stroke = CREAM }) {
    const ys = [30, 27, 31, 24, 22, 25, 16, 14];
    const pts = ys.map((y, i) => [(i / (ys.length - 1)) * w, y]);
    const d = pts.map((p, i) => (i ? 'L' : 'M') + p[0].toFixed(1) + ' ' + p[1].toFixed(1)).join(' ');
    return (
      <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`} style={{ display: 'block', overflow: 'visible' }}>
        <line x1="0" y1="10" x2={w} y2="10" stroke={A} strokeWidth="1" strokeDasharray="2 3" opacity="0.7" />
        <path d={d} fill="none" stroke={stroke} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        <circle cx={pts[pts.length - 1][0]} cy={pts[pts.length - 1][1]} r="2.6" fill={stroke} />
      </svg>
    );
  }

  // progress ring (walk-in → limit), value in centre
  function Ring({ size = 58, stroke = 5, pct = 0.78, track = 'rgba(255,255,255,0.25)', bar = '#fff', children }) {
    const r = (size - stroke) / 2, c = 2 * Math.PI * r;
    return (
      <div style={{ position: 'relative', width: size, height: size }}>
        <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>
          <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={track} strokeWidth={stroke} />
          <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={bar} strokeWidth={stroke} strokeLinecap="round" strokeDasharray={`${c * pct} ${c}`} />
        </svg>
        <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>{children}</div>
      </div>
    );
  }

  // ── WIDGET DESIGNS ───────────────────────────────────────────────────────────
  // Small (paper)
  function SmallWidget() {
    return (
      <div style={{ width: 158, height: 158, borderRadius: 22, background: 'var(--paper)', boxShadow: '0 10px 30px rgba(0,0,0,0.18)', padding: 16, display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <Mark size={22} />
          <span style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.08em', color: A, fontWeight: 700 }}>D−23</span>
        </div>
        <div style={{ flex: 1 }} />
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 5 }}>
          <span style={{ fontFamily: 'var(--num)', fontWeight: 300, fontSize: 46, letterSpacing: '-0.03em', color: INK, lineHeight: 0.9 }}>76.0</span>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.1em', color: 'var(--ink-3)', fontWeight: 600 }}>KG</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 8 }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: GREEN }} />
          <span style={{ fontFamily: 'var(--display)', fontSize: 10.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: GREEN, fontWeight: 700 }}>On track</span>
        </div>
      </div>
    );
  }
  // Medium (ink)
  function MediumWidget() {
    return (
      <div style={{ width: 338, height: 158, borderRadius: 22, background: INK, color: CREAM, boxShadow: '0 10px 30px rgba(0,0,0,0.28)', padding: 18, display: 'flex', gap: 18 }}>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <Mark size={20} />
            <span style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.1em', color: 'rgba(244,239,230,0.6)', fontWeight: 600 }}>IN CAMP · D−23</span>
          </div>
          <div style={{ flex: 1 }} />
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
            <span style={{ fontFamily: 'var(--num)', fontWeight: 300, fontSize: 50, letterSpacing: '-0.03em', lineHeight: 0.9 }}>76.0</span>
            <span style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.1em', color: 'rgba(244,239,230,0.6)', fontWeight: 600 }}>KG</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 7 }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#8fb27a' }} />
            <span style={{ fontFamily: 'var(--display)', fontSize: 10.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#8fb27a', fontWeight: 700 }}>Making weight</span>
          </div>
        </div>
        <div style={{ width: 120, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', borderLeft: '1px solid rgba(244,239,230,0.16)', paddingLeft: 16 }}>
          <Spark w={104} h={40} />
          <div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <span style={{ fontFamily: 'var(--mono)', fontSize: 9.5, letterSpacing: '0.08em', color: 'rgba(244,239,230,0.55)', fontWeight: 600 }}>PROJ</span>
              <span style={{ fontFamily: 'var(--num)', fontSize: 16, color: CREAM }}>74.0</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 5 }}>
              <span style={{ fontFamily: 'var(--mono)', fontSize: 9.5, letterSpacing: '0.08em', color: 'rgba(244,239,230,0.55)', fontWeight: 600 }}>LIMIT</span>
              <span style={{ fontFamily: 'var(--num)', fontSize: 16, color: '#e0876f' }}>74.4</span>
            </div>
          </div>
        </div>
      </div>
    );
  }

  // ── WIDGET GALLERY (sign-off) ────────────────────────────────────────────────
  function Label({ children }) {
    return <div style={{ fontFamily: 'var(--display)', fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--ink-3)', fontWeight: 600, margin: '0 0 12px' }}>{children}</div>;
  }
  function WidgetGallery() {
    return (
      <Phone styleKey="balanced" label="Widget gallery">
        <StatusBar />
        <window.CompactNav title="Widgets" 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' }}>Your cut at a glance, without opening the app. Home Screen and Lock Screen.</div>

          <div style={{ marginTop: 22 }}><Label>Home · Small</Label><SmallWidget /></div>
          <div style={{ marginTop: 24 }}><Label>Home · Medium</Label><MediumWidget /></div>

          <div style={{ marginTop: 24 }}>
            <Label>Lock screen</Label>
            <div style={{ background: '#16140f', borderRadius: 18, padding: 18, display: 'flex', alignItems: 'center', gap: 22 }}>
              <Ring size={58} pct={0.78}><span style={{ fontFamily: 'var(--num)', fontWeight: 400, fontSize: 17, color: '#fff', lineHeight: 1 }}>76</span><span style={{ fontFamily: 'var(--mono)', fontSize: 7.5, color: 'rgba(255,255,255,0.6)', fontWeight: 600, letterSpacing: '0.08em' }}>KG</span></Ring>
              <div style={{ flex: 1 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
                  <Mark size={16} />
                  <span style={{ fontFamily: 'var(--mono)', fontSize: 9.5, letterSpacing: '0.1em', color: 'rgba(255,255,255,0.6)', fontWeight: 600 }}>D−23 · ON TRACK</span>
                </div>
                <div style={{ fontFamily: 'system-ui, sans-serif', fontSize: 15, fontWeight: 600, color: '#fff', marginTop: 6 }}>76.0 → 74.4 kg</div>
                <div style={{ fontFamily: 'system-ui, sans-serif', fontSize: 12.5, color: 'rgba(255,255,255,0.7)', marginTop: 2 }}>Trending to make weight · 9 days out</div>
              </div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 10, padding: '0 2px' }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: GREEN }} />
              <span style={{ fontFamily: 'system-ui, sans-serif', fontSize: 13, color: 'var(--ink-2)', fontWeight: 500 }}>Inline · <strong style={{ color: 'var(--ink)' }}>OnWeight 76.0 kg · D−23</strong></span>
            </div>
          </div>
        </div>
        <HomeIndicator />
      </Phone>
    );
  }

  // ── HOME SCREEN (in context) ──────────────────────────────────────────────────
  function AppDot({ tint }) {
    return <div style={{ width: 60, height: 60, borderRadius: 15, background: tint, boxShadow: '0 4px 12px rgba(0,0,0,0.18)' }} />;
  }
  function WidgetHome() {
    const tints = ['rgba(255,255,255,0.22)', 'rgba(255,255,255,0.16)', 'rgba(255,255,255,0.2)', 'rgba(255,255,255,0.14)'];
    return (
      <Phone styleKey="balanced" label="Home screen">
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(130% 90% at 30% 0%, #4a4239 0%, #2a2620 50%, #16140f 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 }}>9:41</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" /></svg>
          </div>
        </div>
        <div style={{ position: 'absolute', top: 74, left: 18, right: 18, display: 'flex', flexDirection: 'column', gap: 18 }}>
          <div style={{ display: 'flex', justifyContent: 'center' }}><MediumWidget /></div>
          <div style={{ display: 'flex', gap: 18, alignItems: 'flex-start' }}>
            <SmallWidget />
            <div style={{ flex: 1, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, justifyItems: 'center', alignContent: 'flex-start' }}>
              {tints.concat(tints).map((t, i) => <AppDot key={i} tint={t} />)}
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, justifyItems: 'center', marginTop: 4 }}>
            {[0, 1, 2, 3].map((i) => <AppDot key={i} tint="rgba(255,255,255,0.16)" />)}
          </div>
        </div>
        {/* dock */}
        <div style={{ position: 'absolute', bottom: 26, left: 14, right: 14, height: 86, borderRadius: 32, background: 'rgba(255,255,255,0.14)', backdropFilter: 'blur(20px)', display: 'flex', alignItems: 'center', justifyContent: 'space-around', padding: '0 16px' }}>
          {[0, 1, 2].map((i) => <AppDot key={i} tint="rgba(255,255,255,0.28)" />)}
          <Mark size={60} ink={CREAM} />
        </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>
    );
  }

  // ── LOCK SCREEN (complications) ───────────────────────────────────────────────
  function WidgetLock() {
    return (
      <Phone styleKey="balanced" label="Lock screen widgets">
        <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" /></svg>
          </div>
        </div>
        {/* date + circular complications row */}
        <div style={{ position: 'absolute', top: 64, left: 0, right: 0, textAlign: 'center', color: '#fff' }}>
          <div style={{ display: 'flex', justifyContent: 'center', gap: 22, marginBottom: 10 }}>
            <Ring size={52} pct={0.78}><span style={{ fontFamily: 'var(--num)', fontWeight: 400, fontSize: 15, color: '#fff', lineHeight: 1 }}>76</span><span style={{ fontFamily: 'var(--mono)', fontSize: 6.5, color: 'rgba(255,255,255,0.6)', fontWeight: 600 }}>KG</span></Ring>
            <Ring size={52} pct={0.5} bar="#e0876f"><span style={{ fontFamily: 'var(--num)', fontWeight: 400, fontSize: 17, color: '#fff', lineHeight: 1 }}>23</span><span style={{ fontFamily: 'var(--mono)', fontSize: 6.5, color: 'rgba(255,255,255,0.6)', fontWeight: 600 }}>DAYS</span></Ring>
          </div>
          <div style={{ fontFamily: 'system-ui, sans-serif', fontSize: 14, fontWeight: 500, opacity: 0.9 }}>Saturday, 11 January</div>
          <div style={{ fontFamily: 'system-ui, sans-serif', fontSize: 72, fontWeight: 600, letterSpacing: '-0.02em', lineHeight: 1.04, marginTop: 2 }}>6:50</div>
        </div>
        {/* rectangular complication under clock */}
        <div style={{ position: 'absolute', top: 322, left: 40, right: 40 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
            <Mark size={26} />
            <div>
              <div style={{ fontFamily: 'system-ui, sans-serif', fontSize: 15, fontWeight: 700, color: '#fff' }}>76.0 → 74.4 kg</div>
              <div style={{ fontFamily: 'system-ui, sans-serif', fontSize: 12.5, color: 'rgba(255,255,255,0.72)', marginTop: 1 }}>On track · 23 days out</div>
            </div>
          </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>
    );
  }

  Object.assign(window, { WidgetGallery, WidgetHome, WidgetLock });
})();