// Voice log — the daily moment. Fullscreen listening + parsed result.
// And iOS Home/Lock widget.
const { Icon, Phone, HomeIndicator } = window;

// ═══════════════════════════════════════════════════════════
// Fullscreen voice listening view
// ═══════════════════════════════════════════════════════════
function VoiceLog() {
  const T = UN.d;
  return (
    <Phone mode="d" time="2:14">
      <div style={{
        height: '100%',
        background: `radial-gradient(circle at 50% 60%, rgba(143,181,162,0.18), transparent 60%), ${T.bg}`,
        display: 'flex', flexDirection: 'column',
      }}>
        {/* top header */}
        <div style={{
          padding: '8px 22px 0', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        }}>
          <button style={{
            width: 36, height: 36, borderRadius: 99,
            background: T.surface, border: `1px solid ${T.line2}`,
            color: T.text, display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Icon name="x" size={16} color={T.text} strokeWidth={2}/>
          </button>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            padding: '6px 12px', borderRadius: 99,
            background: T.surface, border: `1px solid ${T.line2}`,
            fontSize: 11.5, color: T.text, fontWeight: 600,
          }}>
            <div style={{
              width: 22, height: 22, borderRadius: 22,
              background: 'linear-gradient(135deg, #d3a89a, #8b6c5c)',
              color: '#fff', fontSize: 10, fontWeight: 700,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>M</div>
            Maeve
            <Icon name="chevDown" size={12} color={T.textDim} strokeWidth={2}/>
          </div>
          <div style={{ width: 36 }}/>
        </div>

        {/* Transcript area */}
        <div style={{
          flex: 1, padding: '40px 28px 20px',
          display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
        }}>
          <div style={{
            fontSize: 11, color: T.sage, fontWeight: 700,
            letterSpacing: 1, textTransform: 'uppercase', marginBottom: 12,
            display: 'flex', alignItems: 'center', gap: 6,
          }}>
            <span style={{
              width: 7, height: 7, borderRadius: 7, background: T.sage,
            }}/>
            Listening
          </div>
          <div style={{
            fontSize: 26, fontWeight: 500, color: T.text,
            letterSpacing: -0.5, lineHeight: 1.25, textWrap: 'pretty',
          }}>
            She just threw up again, only a small one, and she won't drink the Pedialyte. Maybe four ounces left in the cup.
          </div>
        </div>

        {/* Parsed cards preview */}
        <div style={{
          margin: '0 22px 16px',
          background: T.surface, border: `1px solid ${T.line}`,
          borderRadius: 18, padding: '12px 14px',
        }}>
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8,
          }}>
            <div style={{ fontSize: 11, color: T.textMute, letterSpacing: 0.6, fontWeight: 600, textTransform: 'uppercase' }}>
              We'll log
            </div>
            <span style={{ fontSize: 11, color: T.sage, fontWeight: 600 }}>3 events · review →</span>
          </div>
          {[
            { i: 'vomit', label: 'Vomit', detail: 'small', tone: UN.d.sev.warm },
            { i: 'drop',  label: 'Pedialyte refused', detail: '~4oz left', tone: UN.d.trust },
            { i: 'alert', label: 'Refusing fluids', detail: 'flag for watch', tone: UN.d.textDim },
          ].map((c, 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: 28, height: 28, borderRadius: 9, background: T.surface2,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon name={c.i} size={14} color={c.tone} strokeWidth={2}/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13.5, color: T.text, fontWeight: 500, letterSpacing: -0.1 }}>{c.label}</div>
                <div style={{ fontSize: 11, color: T.textMute, marginTop: 1 }}>{c.detail}</div>
              </div>
            </div>
          ))}
        </div>

        {/* Mic + waveform */}
        <div style={{
          padding: '0 22px 12px',
          display: 'flex', alignItems: 'center', gap: 14,
        }}>
          {/* waveform */}
          <div style={{
            flex: 1, height: 64, borderRadius: 18,
            background: T.surface, border: `1px solid ${T.line2}`,
            padding: '0 14px',
            display: 'flex', alignItems: 'center', gap: 2.5,
          }}>
            {Array.from({ length: 36 }).map((_, i) => {
              const h = 6 + Math.abs(Math.sin(i * 0.55) * 22) + Math.abs(Math.cos(i * 0.3) * 12);
              return (
                <div key={i} style={{
                  flex: 1, height: h, borderRadius: 2,
                  background: i < 28 ? T.sage : T.line2,
                  opacity: i < 28 ? 0.4 + (h / 50) : 1,
                }}/>
              );
            })}
          </div>
          {/* mic button */}
          <button style={{
            width: 64, height: 64, borderRadius: 64,
            background: `radial-gradient(circle at 30% 30%, ${T.sage}, ${T.sageDeep})`,
            border: 'none', color: '#0E1A14',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: `0 0 0 6px rgba(143,181,162,0.18), 0 8px 24px rgba(143,181,162,0.35)`,
          }}>
            <Icon name="mic" size={28} color="#0E1A14" strokeWidth={2.2}/>
          </button>
        </div>

        <div style={{
          paddingBottom: 6, textAlign: 'center',
          fontSize: 11.5, color: T.textMute,
        }}>
          Release to review · or keep talking
        </div>

        <HomeIndicator mode="d"/>
      </div>
    </Phone>
  );
}

// ═══════════════════════════════════════════════════════════
// iOS Lock screen widgets (large + medium + small) + home set
// ═══════════════════════════════════════════════════════════
function VoiceWidget() {
  const T = UN.d;
  return (
    <Phone mode="d" time="2:14">
      <div style={{
        height: '100%',
        background: `linear-gradient(180deg, #0E0B0A 0%, #1A1310 100%)`,
        position: 'relative', overflow: 'hidden',
      }}>
        {/* faux wallpaper grain */}
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: `radial-gradient(circle at 25% 30%, rgba(143,181,162,0.08), transparent 50%), radial-gradient(circle at 75% 70%, rgba(211,168,154,0.06), transparent 50%)`,
        }}/>

        {/* big lockscreen clock */}
        <div style={{
          position: 'relative', textAlign: 'center', paddingTop: 64,
        }}>
          <div style={{
            fontSize: 17, color: 'rgba(255,255,255,0.85)', fontWeight: 500, letterSpacing: 1,
          }}>Thursday, May 15</div>
          <div style={{
            fontFamily: '"SF Pro Display", -apple-system, system-ui',
            fontSize: 90, color: '#fff', fontWeight: 200,
            letterSpacing: -3, lineHeight: 0.95, marginTop: 2,
            fontVariantNumeric: 'tabular-nums',
          }}>2:14</div>
        </div>

        {/* Widget stack */}
        <div style={{ padding: '36px 18px 0', display: 'flex', flexDirection: 'column', gap: 12 }}>
          {/* Large Unpanic widget */}
          <div style={{
            background: 'rgba(35,33,31,0.7)',
            backdropFilter: 'blur(40px) saturate(180%)',
            WebkitBackdropFilter: 'blur(40px) saturate(180%)',
            border: `1px solid rgba(255,255,255,0.08)`,
            borderRadius: 28, padding: '16px 18px 14px',
          }}>
            {/* header */}
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <UnpanicMarkDark/>
                <span style={{ fontSize: 10.5, fontWeight: 700, color: 'rgba(255,255,255,0.7)', letterSpacing: 1, textTransform: 'uppercase' }}>
                  Unpanic
                </span>
              </div>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 4,
                padding: '3px 8px', borderRadius: 99,
                background: 'rgba(232,176,92,0.16)',
                fontSize: 9.5, color: UN.d.sev.warm, fontWeight: 700,
                letterSpacing: 0.5, textTransform: 'uppercase',
              }}>
                <span style={{ width: 5, height: 5, borderRadius: 5, background: UN.d.sev.warm }}/>
                Day 3
              </div>
            </div>

            {/* hero number */}
            <div style={{ marginTop: 10, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
              <div>
                <div style={{
                  fontFamily: UN.font.num, fontSize: 44, fontWeight: 500,
                  letterSpacing: -1.6, color: '#fff', lineHeight: 1,
                  fontVariantNumeric: 'tabular-nums',
                }}>
                  38.4<span style={{ fontSize: 18, color: 'rgba(255,255,255,0.6)', fontWeight: 400, marginLeft: 2 }}>°</span>
                </div>
                <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.6)', marginTop: 4 }}>
                  Maeve · ↓ 0.2
                </div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontSize: 9.5, color: 'rgba(255,255,255,0.55)', letterSpacing: 0.5, fontWeight: 600, textTransform: 'uppercase' }}>
                  Next dose
                </div>
                <div style={{
                  fontFamily: UN.font.num, fontSize: 17, color: '#fff', fontWeight: 600,
                  letterSpacing: -0.4, marginTop: 2,
                  fontVariantNumeric: 'tabular-nums',
                }}>1h 22m</div>
                <div style={{ fontSize: 10, color: UN.d.trust, fontWeight: 600, marginTop: 1 }}>Tylenol 5mL</div>
              </div>
            </div>

            {/* Voice tap-target */}
            <button style={{
              marginTop: 14, width: '100%', height: 50, borderRadius: 16,
              background: `linear-gradient(135deg, ${T.sage}, ${T.sageDeep})`,
              border: 'none', color: '#0E1A14',
              fontFamily: UN.font.body, fontSize: 14, fontWeight: 700,
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
              letterSpacing: -0.1,
            }}>
              <Icon name="mic" size={18} color="#0E1A14" strokeWidth={2.2}/>
              Voice log
            </button>

            {/* Mini caregiver activity */}
            <div style={{
              marginTop: 10, display: 'flex', alignItems: 'center', gap: 8,
              padding: '8px 10px', borderRadius: 11,
              background: 'rgba(255,255,255,0.04)',
            }}>
              <div style={{
                width: 18, height: 18, borderRadius: 18, background: '#d3a89a',
                color: '#fff', fontSize: 9, fontWeight: 700,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>G</div>
              <div style={{ flex: 1, fontSize: 11, color: 'rgba(255,255,255,0.8)' }}>
                <strong style={{ color: '#fff', fontWeight: 600 }}>Grandma</strong> · 2.5mL Tylenol
              </div>
              <span style={{ fontSize: 10, color: 'rgba(255,255,255,0.45)' }}>12m</span>
            </div>
          </div>

          {/* Medium widget row */}
          <div style={{ display: 'flex', gap: 12 }}>
            {/* Small widget — Quick Voice */}
            <div style={{
              flex: 1, aspectRatio: '1',
              background: 'rgba(35,33,31,0.7)',
              backdropFilter: 'blur(40px) saturate(180%)',
              WebkitBackdropFilter: 'blur(40px) saturate(180%)',
              border: `1px solid rgba(255,255,255,0.08)`,
              borderRadius: 24, padding: 14,
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <UnpanicMarkDark/>
                <span style={{ fontSize: 9.5, color: 'rgba(255,255,255,0.55)', fontWeight: 600, letterSpacing: 0.4 }}>1-TAP</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flex: 1 }}>
                <div style={{
                  width: 64, height: 64, borderRadius: 64,
                  background: `radial-gradient(circle at 30% 30%, ${T.sage}, ${T.sageDeep})`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  boxShadow: '0 0 0 4px rgba(143,181,162,0.18)',
                }}>
                  <Icon name="mic" size={30} color="#0E1A14" strokeWidth={2.2}/>
                </div>
              </div>
              <div style={{ fontSize: 11.5, fontWeight: 600, color: '#fff', textAlign: 'center', letterSpacing: -0.1 }}>
                Voice log
              </div>
            </div>

            {/* Small widget — Next dose countdown */}
            <div style={{
              flex: 1, aspectRatio: '1',
              background: 'rgba(35,33,31,0.7)',
              backdropFilter: 'blur(40px) saturate(180%)',
              WebkitBackdropFilter: 'blur(40px) saturate(180%)',
              border: `1px solid rgba(255,255,255,0.08)`,
              borderRadius: 24, padding: 14,
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <Icon name="pill" size={16} color={UN.d.trust} strokeWidth={2}/>
                <span style={{ fontSize: 9, color: UN.d.trust, fontWeight: 700, letterSpacing: 0.4 }}>NEXT</span>
              </div>
              <div>
                <div style={{
                  fontFamily: UN.font.num, fontSize: 28, fontWeight: 600,
                  letterSpacing: -1, color: '#fff',
                  fontVariantNumeric: 'tabular-nums', lineHeight: 1,
                }}>1h 22m</div>
                <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.7)', marginTop: 4 }}>
                  Tylenol · 5mL
                </div>
              </div>
              <div style={{
                height: 4, borderRadius: 4, background: 'rgba(255,255,255,0.1)', overflow: 'hidden',
              }}>
                <div style={{ width: '72%', height: '100%', background: UN.d.trust }}/>
              </div>
            </div>
          </div>
        </div>

        {/* Bottom: flash + camera */}
        <div style={{
          position: 'absolute', left: 0, right: 0, bottom: 38,
          padding: '0 38px',
          display: 'flex', justifyContent: 'space-between',
        }}>
          {[
            { i: 'mic', size: 22 },
            { i: 'camera', size: 22 },
          ].map((b,i) => (
            <div key={i} style={{
              width: 50, height: 50, borderRadius: 50,
              background: 'rgba(0,0,0,0.5)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              border: '1px solid rgba(255,255,255,0.05)',
            }}>
              <Icon name={b.i} size={b.size} color="#fff" strokeWidth={1.8}/>
            </div>
          ))}
        </div>

        <HomeIndicator mode="d"/>
      </div>
    </Phone>
  );
}

function UnpanicMarkDark() {
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="12" r="10" stroke="rgba(255,255,255,0.85)" strokeWidth="1.8"/>
      <circle cx="12" cy="12" r="4" fill="#8FB5A2"/>
    </svg>
  );
}

Object.assign(window, { VoiceLog, VoiceWidget });