// Log-type comparison · grouped artboards
// Shows what logging looks like for each of the major types side-by-side:
// temperature, image (photo), mood (observation), plus a few others.
// One tall artboard stacks them so you can scan the variations.

const { Icon, Phone, HomeIndicator, ModalShell, Label, Stepper, Scale5 } = window;

// ─────────────────────────────────────────────────────────────
// LOG TEMP — quick, the +/- pattern. (Restoring the temp modal explicitly.)
// ─────────────────────────────────────────────────────────────
function LogTemp() {
  const T = UN.d;
  return (
    <ModalShell mode="d" title="Temperature" subtitle="Maeve" cta="Log temperature">
      <Label>When</Label>
      <div style={{ marginTop: 8, marginBottom: 14, display: 'flex', gap: 6 }}>
        <button style={{
          flex: 1, padding: '12px 10px', borderRadius: 12,
          background: T.sageSoft, border: `1.5px solid ${T.sage}`,
          color: T.text, fontSize: 13, fontWeight: 700,
        }}>Just now</button>
        <button style={{
          flex: 1, padding: '12px 10px', borderRadius: 12,
          background: T.surface, border: `1.5px solid ${T.line2}`,
          color: T.textDim, fontSize: 13, fontWeight: 500,
        }}>Earlier</button>
      </div>

      <Label>Reading</Label>
      <div style={{ marginTop: 8, marginBottom: 16 }}>
        <Stepper value="38.4" unit="°C"
          sub={<span style={{ color: UN.d.sev.warm }}>● warm</span>}/>
      </div>

      <Label>Method</Label>
      <div style={{ marginTop: 8, marginBottom: 14, display: 'flex', gap: 6 }}>
        {['Forehead', 'Ear', 'Underarm', 'Rectal'].map((m, i) => (
          <button key={m} style={{
            flex: 1, padding: '10px 4px', borderRadius: 99,
            background: i === 1 ? T.sageSoft : T.surface,
            border: `1.5px solid ${i === 1 ? T.sage : T.line2}`,
            color: i === 1 ? T.text : T.textDim,
            fontSize: 11.5, fontWeight: i === 1 ? 700 : 500,
          }}>{m}</button>
        ))}
      </div>
    </ModalShell>
  );
}

// ─────────────────────────────────────────────────────────────
// LOG IMAGE — photo capture flow. Camera preview frame + body-map.
// ─────────────────────────────────────────────────────────────
function LogImage() {
  const T = UN.d;

  // Faux "throat" photo placeholder
  const Photo = () => (
    <div style={{
      width: '100%', aspectRatio: '4/3', borderRadius: 16, overflow: 'hidden',
      background: `radial-gradient(circle at 50% 45%, #c1856d 0%, #5a3a2d 80%)`,
      position: 'relative',
      border: `1px solid ${T.line2}`,
    }}>
      {/* mouth shape */}
      <div style={{
        position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -45%)',
        width: '52%', height: '40%', borderRadius: '50%',
        background: `radial-gradient(circle, #7d2e1e, #3a1208)`,
        boxShadow: 'inset 0 -8px 20px rgba(0,0,0,0.5)',
      }}/>
      {/* viewfinder grid */}
      <div style={{
        position: 'absolute', inset: 14, border: '1px dashed rgba(255,255,255,0.4)',
        borderRadius: 4,
      }}/>
      {/* tap-to-focus dot */}
      <div style={{
        position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)',
        width: 38, height: 38, borderRadius: 38, border: '2px solid #fff', opacity: 0.85,
      }}/>
    </div>
  );

  return (
    <ModalShell mode="d" title="Photo" subtitle="Maeve · throat · day 3" cta="Capture">
      <div style={{ marginBottom: 12 }}>
        <Photo/>
      </div>

      {/* Subject chips */}
      <Label>What's in the photo</Label>
      <div style={{ marginTop: 8, marginBottom: 14, display: 'flex', flexWrap: 'wrap', gap: 5 }}>
        {[
          { i: 'alert', t: 'Throat', sel: true },
          { i: 'camera', t: 'Rash' },
          { i: 'camera', t: 'Ear' },
          { i: 'camera', t: 'Eye' },
          { i: 'camera', t: 'Medicine bottle' },
          { i: 'camera', t: 'Other' },
        ].map((c, i) => (
          <button key={i} style={{
            display: 'inline-flex', alignItems: 'center', gap: 5,
            padding: '7px 11px', borderRadius: 99,
            background: c.sel ? T.sageSoft : T.surface,
            border: `1.5px solid ${c.sel ? T.sage : T.line2}`,
            color: c.sel ? T.text : T.textDim,
            fontFamily: UN.font.body, fontSize: 12, fontWeight: c.sel ? 700 : 500,
          }}>
            <Icon name={c.i} size={11} color={c.sel ? T.sage : T.textMute} strokeWidth={1.9}/>
            {c.t}
          </button>
        ))}
      </div>

      {/* Photo series */}
      <Label>Series · 4 photos this episode</Label>
      <div style={{ marginTop: 8, marginBottom: 12, display: 'flex', gap: 6, overflowX: 'auto' }}>
        {[1,2,3,'NEW'].map((p, i) => (
          <div key={i} style={{
            width: 60, height: 60, borderRadius: 10,
            background: i < 3 ? `radial-gradient(circle, #b87a64, #5a3a2d)` : T.surface,
            border: `1.5px solid ${p === 'NEW' ? T.sage : T.line2}`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 9, color: p === 'NEW' ? T.sage : '#fff', fontWeight: 700, letterSpacing: 0.4,
            flexShrink: 0,
            backgroundImage: i < 3 ? `radial-gradient(circle at 50% 50%, #b87a64, #5a3a2d)` : undefined,
          }}>
            {p === 'NEW' ? 'NEW' : `D${p}`}
          </div>
        ))}
      </div>

      <Label>Note · optional</Label>
      <div style={{
        marginTop: 8, padding: '12px 14px', borderRadius: 12,
        background: T.surface, border: `1px dashed ${T.line2}`,
        fontSize: 13, color: T.textMute, fontStyle: 'italic',
        minHeight: 50,
        display: 'flex', alignItems: 'center', gap: 8,
      }}>
        <Icon name="mic" size={13} color={T.textMute} strokeWidth={1.9}/>
        Tap to voice the note · or type it
      </div>
    </ModalShell>
  );
}

// ─────────────────────────────────────────────────────────────
// LOG MOOD — short mood/observation entry (cleaner than full Observation)
// ─────────────────────────────────────────────────────────────
function LogMood() {
  const T = UN.d;
  const moods = [
    { t: 'Inconsolable', c: UN.d.sev.urgent, emoji: '◉' },
    { t: 'Crying',       c: UN.d.sev.hot,    emoji: '◐' },
    { t: 'Fussy',        c: UN.d.sev.warm,   emoji: '◑', sel: true },
    { t: 'Calm',         c: T.sage,          emoji: '○' },
    { t: 'Cheerful',     c: T.sage,          emoji: '◯' },
  ];

  return (
    <ModalShell mode="d" title="Mood" subtitle="Maeve · how does she seem?" cta="Log mood">
      <Label>Right now</Label>
      <div style={{
        marginTop: 8, marginBottom: 14,
        display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 6,
      }}>
        {moods.map((m, i) => (
          <button key={i} style={{
            padding: '14px 6px', borderRadius: 14,
            background: m.sel ? `${m.c}28` : T.surface,
            border: `1.5px solid ${m.sel ? m.c : T.line2}`,
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
          }}>
            <div style={{
              width: 28, height: 28, borderRadius: 28,
              background: m.sel ? m.c : 'transparent',
              border: `2px solid ${m.c}`,
              opacity: m.sel ? 1 : 0.5,
            }}/>
            <span style={{
              fontSize: 9.5, color: m.sel ? T.text : T.textMute,
              fontWeight: m.sel ? 700 : 500, letterSpacing: 0.1,
              textAlign: 'center', lineHeight: 1.1,
            }}>{m.t}</span>
          </button>
        ))}
      </div>

      <Label>Energy</Label>
      <div style={{ marginTop: 8, marginBottom: 14 }}>
        <Scale5 value={2} color={UN.d.sev.warm}/>
      </div>

      <Label>Appetite</Label>
      <div style={{ marginTop: 8, marginBottom: 14 }}>
        <Scale5 value={2} color={UN.d.sev.warm}/>
      </div>

      {/* casual quick chips */}
      <Label>Quick tags · optional</Label>
      <div style={{ marginTop: 8, display: 'flex', flexWrap: 'wrap', gap: 5 }}>
        {['Slumping','Clingy','Pulling at ear','Cold hands','Sweaty','Whiny'].map((t,i) => (
          <button key={i} style={{
            padding: '6px 10px', borderRadius: 99,
            background: T.surface, border: `1px solid ${T.line2}`,
            fontSize: 11.5, color: T.textDim, fontWeight: 500,
          }}>{t}</button>
        ))}
      </div>
    </ModalShell>
  );
}

Object.assign(window, { LogTemp, LogImage, LogMood });