// Episode close + retrospective + paywall (redesigned · 3-day trial)
const { Icon, Phone, HomeIndicator, ModalShell, Label } = window;

// ═══════════════════════════════════════════════════════════
// EPISODE CLOSE
// ═══════════════════════════════════════════════════════════
function EpisodeClose() {
  const T = UN.d;
  return (
    <ModalShell
      mode="d"
      title="Close this episode?"
      subtitle="Maeve · feeling better"
      cta="Close · save retrospective"
      footer={(
        <button style={{
          marginBottom: 8, width: '100%', height: 44,
          background: 'transparent', border: 'none',
          color: UN.d.textDim, fontFamily: UN.font.body, fontSize: 13.5, fontWeight: 500,
        }}>Not yet — keep tracking</button>
      )}
    >
      <div style={{
        margin: '0 0 14px', padding: '14px 16px', borderRadius: 16,
        background: T.sageSoft, border: `1px solid ${T.sageEdge}`,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
          <div style={{
            width: 36, height: 36, borderRadius: 36, background: T.sage,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Icon name="check" size={18} color="#0E1A14" strokeWidth={2.4}/>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14, color: T.text, fontWeight: 700, letterSpacing: -0.1 }}>Recovery signs</div>
            <div style={{ fontSize: 11.5, color: T.textDim, marginTop: 1 }}>All four markers cleared</div>
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
          {[
            'No temp > 37.8° for 36h',
            'Eating · 3 meals',
            'Hydrated · 4 wet diapers',
            'Energy back · "perky"',
          ].map((t,i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: T.textDim }}>
              <Icon name="check" size={11} color={T.sage} strokeWidth={2.4}/>{t}
            </div>
          ))}
        </div>
      </div>

      <Label>Retrospective · auto-built</Label>
      <div style={{
        marginTop: 8,
        background: T.surface, border: `1px solid ${T.line2}`,
        borderRadius: 16, overflow: 'hidden',
      }}>
        <div style={{ padding: '12px 16px', borderBottom: `1px solid ${T.line}` }}>
          <div style={{ fontSize: 15, fontWeight: 700, color: T.text, letterSpacing: -0.2 }}>
            Maeve · stomach flu · 5 days
          </div>
          <div style={{ fontSize: 11.5, color: T.textDim, marginTop: 2 }}>Apr 10 → Apr 15 · 3 caregivers</div>
        </div>
        <div style={{
          padding: '12px 16px', display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 12,
        }}>
          {[
            { l: 'Peak',   v: '39.3°' },
            { l: 'Doses',  v: '14' },
            { l: 'Vomits', v: '3' },
            { l: 'Fluids', v: '92oz' },
            { l: 'Wet',    v: '18' },
            { l: 'Fever',  v: 'D5' },
          ].map((s,i) => (
            <div key={i}>
              <div style={{ fontSize: 9.5, color: T.textMute, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase' }}>{s.l}</div>
              <div style={{
                fontFamily: UN.font.num, fontSize: 18, fontWeight: 700, color: T.text,
                fontVariantNumeric: 'tabular-nums', letterSpacing: -0.3, marginTop: 1,
              }}>{s.v}</div>
            </div>
          ))}
        </div>
      </div>

      <Label>For next time · voice note</Label>
      <div style={{
        marginTop: 8, padding: '12px 14px', borderRadius: 14,
        background: T.surface, border: `1px dashed ${T.line2}`,
        fontSize: 12.5, color: T.textMute, fontStyle: 'italic', lineHeight: 1.5,
      }}>
        "Motrin held her temp better than Tylenol — try Motrin first."
      </div>
    </ModalShell>
  );
}

// ═══════════════════════════════════════════════════════════
// PAYWALL — redesigned · 3-day trial · richer
// ═══════════════════════════════════════════════════════════
function Paywall() {
  const T = UN.d;
  return (
    <Phone mode="d" time="2:14">
      <div style={{
        height: '100%',
        background: `radial-gradient(circle at 50% -10%, rgba(143,181,162,0.22), transparent 60%), ${T.bg}`,
        display: 'flex', flexDirection: 'column',
      }}>
        {/* close */}
        <div style={{ padding: '6px 18px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <button style={{
            width: 32, height: 32, borderRadius: 32,
            background: T.surface, border: `1px solid ${T.line2}`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: T.textDim,
          }}>
            <Icon name="x" size={14} color={T.textDim} strokeWidth={2}/>
          </button>
          <button style={{ fontSize: 12.5, color: T.textDim, fontWeight: 600, background: 'transparent', border: 'none' }}>
            Restore
          </button>
        </div>

        <div style={{ flex: 1, overflowY: 'auto', padding: '4px 22px 12px' }}>
          {/* Brand */}
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, marginTop: 14, marginBottom: 16 }}>
            <UnpanicMark size={20} color={T.sage}/>
            <span style={{ fontSize: 12, color: T.text, fontWeight: 700, letterSpacing: 1.4 }}>UNPANIC PRO</span>
          </div>

          {/* Hero */}
          <h1 style={{
            margin: 0, fontFamily: UN.font.body, fontSize: 32, fontWeight: 700,
            color: T.text, letterSpacing: -0.8, lineHeight: 1.04, textAlign: 'center', textWrap: 'pretty',
          }}>
            Try Pro free<br/>for 3 days.
          </h1>
          <p style={{
            margin: '10px 0 18px', fontSize: 13.5, color: T.textDim, lineHeight: 1.5,
            textAlign: 'center', maxWidth: 300, marginLeft: 'auto', marginRight: 'auto',
          }}>
            Logging stays free forever. We never paywall a dose during a crisis.
          </p>

          {/* Social proof strip */}
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
            padding: '10px 14px', borderRadius: 99,
            background: T.surface, border: `1px solid ${T.line2}`,
            marginBottom: 18,
          }}>
            <div style={{ display: 'flex', marginLeft: -2 }}>
              {['#c2b39a','#a5b8c9','#d3a89a','#b8a89a'].map((c, i) => (
                <div key={i} style={{
                  width: 22, height: 22, borderRadius: 22,
                  background: c, marginLeft: i ? -6 : 0,
                  border: `2px solid ${T.surface}`,
                }}/>
              ))}
            </div>
            <div style={{ fontSize: 11.5, color: T.textDim }}>
              <strong style={{ color: T.text, fontWeight: 700 }}>4,800 parents</strong> · ★★★★★ 4.9 App Store
            </div>
          </div>

          {/* Timeline of trial */}
          <div style={{
            marginBottom: 22,
            background: T.surface, border: `1px solid ${T.line2}`,
            borderRadius: 18, padding: '14px 16px',
          }}>
            <div style={{ fontSize: 10.5, color: T.textMute, letterSpacing: 0.6, fontWeight: 700, textTransform: 'uppercase', marginBottom: 10 }}>
              Your 3-day trial
            </div>
            {[
              { d: 'Today',    icon: 'check',  t: 'Voice logging unlocks instantly',     active: true },
              { d: 'Day 2',    icon: 'bell',   t: 'Reminder · we\u2019ll ping you before charging' },
              { d: 'Day 3',    icon: 'gear',   t: 'Trial ends · £4.99/mo unless cancelled' },
            ].map((row, i, arr) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0',
                borderBottom: i < arr.length - 1 ? `1px solid ${T.line}` : 'none',
              }}>
                <div style={{
                  width: 24, height: 24, borderRadius: 24,
                  background: row.active ? T.sage : T.surface2,
                  display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                }}>
                  <Icon name={row.icon} size={12} color={row.active ? '#0E1A14' : T.textDim} strokeWidth={2.4}/>
                </div>
                <div style={{ width: 50, fontSize: 11, color: T.textDim, fontWeight: 600 }}>{row.d}</div>
                <div style={{ flex: 1, fontSize: 12.5, color: row.active ? T.text : T.textDim, fontWeight: 500 }}>{row.t}</div>
              </div>
            ))}
          </div>

          {/* Feature highlights — bigger, visual */}
          <Label>What unlocks</Label>
          <div style={{
            marginTop: 8, marginBottom: 22,
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8,
          }}>
            {[
              { i: 'mic',    t: 'Voice logging',  s: 'AI parses sentences' },
              { i: 'people', t: 'Family room',    s: 'Unlimited caregivers' },
              { i: 'camera', t: 'Photos',         s: 'Rash · throat · notes' },
              { i: 'doc',    t: 'Doctor handoff', s: 'Web link + PDF' },
            ].map((f, i) => (
              <div key={i} style={{
                padding: '14px 12px', borderRadius: 16,
                background: T.surface, border: `1px solid ${T.line2}`,
              }}>
                <div style={{
                  width: 32, height: 32, borderRadius: 10, background: T.sageSoft, border: `1px solid ${T.sageEdge}`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 10,
                }}>
                  <Icon name={f.i} size={15} color={T.sage} strokeWidth={1.9}/>
                </div>
                <div style={{ fontSize: 13.5, color: T.text, fontWeight: 700, letterSpacing: -0.1 }}>{f.t}</div>
                <div style={{ fontSize: 11, color: T.textMute, marginTop: 2 }}>{f.s}</div>
              </div>
            ))}
          </div>

          {/* Plan cards — bigger, plan focus */}
          <Label>Pick a plan</Label>
          <div style={{ marginTop: 8, display: 'flex', flexDirection: 'column', gap: 8 }}>
            {/* Annual — recommended */}
            <div style={{
              padding: '14px 16px', borderRadius: 16,
              background: T.sageSoft, border: `2px solid ${T.sage}`,
              display: 'flex', alignItems: 'center', gap: 12,
              boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 18px rgba(143,181,162,0.18)',
              position: 'relative',
            }}>
              <span style={{
                position: 'absolute', top: -8, right: 16,
                padding: '3px 8px', borderRadius: 5, background: T.sage, color: '#0E1A14',
                fontSize: 9.5, fontWeight: 700, letterSpacing: 0.5,
              }}>SAVE 50%</span>
              <div style={{
                width: 22, height: 22, borderRadius: 22,
                background: T.sage,
                display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
              }}>
                <Icon name="check" size={12} color="#0E1A14" strokeWidth={3}/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14.5, color: T.text, fontWeight: 700, letterSpacing: -0.2 }}>
                  Annual · <span style={{ color: T.sage }}>£2.50/mo</span>
                </div>
                <div style={{ fontSize: 11, color: T.textDim, marginTop: 2 }}>£29.99 billed yearly · cancel anytime</div>
              </div>
              <div style={{
                fontFamily: UN.font.num, fontSize: 18, fontWeight: 700, color: T.text,
                fontVariantNumeric: 'tabular-nums',
              }}>£29.99</div>
            </div>

            {/* Monthly */}
            <div style={{
              padding: '14px 16px', borderRadius: 16,
              background: T.surface, border: `1.5px solid ${T.line2}`,
              display: 'flex', alignItems: 'center', gap: 12,
            }}>
              <div style={{
                width: 22, height: 22, borderRadius: 22,
                border: `1.5px solid ${T.line2}`,
                flexShrink: 0,
              }}/>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14.5, color: T.text, fontWeight: 700, letterSpacing: -0.2 }}>Monthly</div>
                <div style={{ fontSize: 11, color: T.textDim, marginTop: 2 }}>cancel anytime</div>
              </div>
              <div style={{
                fontFamily: UN.font.num, fontSize: 16, fontWeight: 600, color: T.textDim,
                fontVariantNumeric: 'tabular-nums',
              }}>£4.99<span style={{ fontSize: 11, color: T.textMute }}>/mo</span></div>
            </div>
          </div>

          {/* Reassurance */}
          <div style={{
            marginTop: 16, padding: '10px 14px', borderRadius: 12,
            background: T.surface2, display: 'flex', alignItems: 'center', gap: 9,
          }}>
            <Icon name="check" size={14} color={T.sage} strokeWidth={2.6}/>
            <div style={{ fontSize: 11.5, color: T.textDim, lineHeight: 1.4 }}>
              Reminder 24h before billing · cancel from Settings in 2 taps
            </div>
          </div>
        </div>

        {/* Sticky CTA */}
        <div style={{ padding: '12px 22px 6px', borderTop: `1px solid ${T.line}` }}>
          <button style={window.btnPrimaryStyle('d', { height: 58, radius: 18 })}>
            Start 3-day free trial
          </button>
          <div style={{ marginTop: 6, fontSize: 10.5, color: T.textMute, textAlign: 'center' }}>
            Then £29.99/year · cancel anytime · no charge today
          </div>
        </div>
        <HomeIndicator mode="d"/>
      </div>
    </Phone>
  );
}

window.UnpanicMark = window.UnpanicMark || (({ size = 24, color = '#8FB5A2' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
    <circle cx="12" cy="12" r="10" stroke={color} strokeWidth="1.6"/>
    <circle cx="12" cy="12" r="4" fill={color}/>
  </svg>
));

Object.assign(window, { EpisodeClose, Paywall });