// menove-mona.jsx, the Mona Conversation, per handoff brief §2.
// Depends on menove-final.jsx (FB) + menove-checkin.jsx (CIDot).
// Exports: MonaThread frames M01–M07 components.

function MonaAvatar({ size }) {
  const d = size || 30;
  const src = window.V2A ? V2A('photos/mona-avatar.jpg') : 'photos/mona-avatar.jpg';
  return (
    <img src={src} alt="Mona" style={{
      width: d, height: d, borderRadius: '50%', flex: 'none',
      objectFit: 'cover', display: 'inline-block',
      boxShadow: `inset 0 0 0 1px ${FB.line}`,
    }} />
  );
}

/* full-screen thread frame: header · scroll area · composer */
function MonaFrame({ label, children, intake, firstOpen }) {
  return (
    <div data-screen-label={label} style={{ width: '100%', height: '100%', background: FB.paper, color: FB.ink, fontFamily: FB.sans, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', padding: '16px 26px 0', fontSize: 12.5, fontWeight: 600, flex: 'none' }}>
        <span>9:41</span><span>5G · 76</span>
      </div>
      <div style={{ padding: '12px 20px 10px', borderBottom: `1px solid ${FB.line}`, flex: 'none' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
          <MonaAvatar size={34} />
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14.5, fontWeight: 700 }}>Mona</div>
            {firstOpen ? <div style={{ fontSize: 10.5, color: FB.soft, marginTop: 1 }}>A companion, not a clinician</div> : null}
          </div>
          <span style={{ fontSize: 13, fontWeight: 700, color: FB.plum }}>Done</span>
        </div>
        {intake ? (
          <div style={{ marginTop: 10 }}>
            <div style={{ display: 'flex', gap: 4 }}>
              {[1, 1, 1, 0, 0, 0, 0].map((f, i) => (
                <span key={i} style={{ flex: 1, height: 3, borderRadius: 2, background: f ? FB.plum : 'rgba(42,37,48,.12)' }}></span>
              ))}
            </div>
            <div style={{ fontSize: 9.5, letterSpacing: '.14em', textTransform: 'uppercase', fontWeight: 700, color: FB.soft, marginTop: 5 }}>Getting to know you · meals</div>
          </div>
        ) : null}
      </div>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 12, padding: '16px 16px', overflow: 'hidden' }}>
        {children}
      </div>
      <div style={{ padding: '8px 14px 18px', flex: 'none' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, background: '#fff', borderRadius: 999, padding: '7px 8px 7px 8px', boxShadow: `inset 0 0 0 1px ${FB.line}, 0 12px 28px -22px rgba(35,20,45,.45)` }}>
          <span style={{ width: 30, height: 30, borderRadius: '50%', boxShadow: `inset 0 0 0 1.4px ${FB.line}`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, color: FB.soft, flex: 'none' }}>+</span>
          <span style={{ flex: 1, fontSize: 12.5, color: FB.soft }}>Tell Mona about your day…</span>
          <span style={{ width: 30, height: 30, borderRadius: '50%', background: FB.aub, display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}>
            <svg viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.9" style={{ width: 13, height: 13 }}><rect x="9" y="3" width="6" height="11" rx="3" /><path d="M5 11a7 7 0 0 0 14 0M12 18v3" /></svg>
          </span>
        </div>
      </div>
    </div>
  );
}

/* message types */
function MBubble({ children, tail }) {
  return (
    <div style={{ display: 'flex', gap: 8, alignItems: 'flex-end', maxWidth: '88%' }}>
      <MonaAvatar size={24} />
      <div style={{ background: '#fff', borderRadius: '16px 16px 16px 5px', padding: '11px 14px', fontSize: 13, lineHeight: 1.55, color: FB.ink, boxShadow: `inset 0 0 0 1px ${FB.line}` }}>{children}{tail}</div>
    </div>
  );
}
function UBubble({ children }) {
  return (
    <div style={{ alignSelf: 'flex-end', maxWidth: '78%', background: FB.aub, color: '#fff', borderRadius: '16px 16px 5px 16px', padding: '11px 14px', fontSize: 13, lineHeight: 1.55 }}>{children}</div>
  );
}
function MChips({ items, under }) {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 7, marginLeft: under ? 32 : 0 }}>
      {items.map((t) => (
        <span key={t} style={{ borderRadius: 999, padding: '7.5px 14px', fontSize: 12, fontWeight: 600, color: FB.aub, boxShadow: `inset 0 0 0 1.4px rgba(69,27,79,.32)` }}>{t}</span>
      ))}
    </div>
  );
}
function MReceipt({ children }) {
  return (
    <div style={{ alignSelf: 'center', display: 'flex', alignItems: 'center', gap: 6, fontSize: 10.5, fontWeight: 600, color: FB.soft }}>
      <svg viewBox="0 0 24 24" fill="none" stroke="#2F7A5D" strokeWidth="3" style={{ width: 10, height: 10 }}><path d="M5 12l5 5L20 6" /></svg>
      {children}
    </div>
  );
}
function MWhyChip() {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, borderRadius: 999, padding: '5.5px 11px', fontSize: 10.5, fontWeight: 700, color: FB.plum, boxShadow: `inset 0 0 0 1.3px rgba(112,6,101,.3)`, marginTop: 8 }}>
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" style={{ width: 10, height: 10 }}><circle cx="12" cy="12" r="9" /><path d="M12 8v5M12 16.5v.5" /></svg>
      Why Mona thinks this
    </span>
  );
}

/* the signature component, extraction-confirm card inside Mona's bubble */
function MExtract({ rows, saved }) {
  return (
    <div style={{ marginTop: 9, borderRadius: 12, boxShadow: `inset 0 0 0 1px ${FB.line}`, overflow: 'hidden' }}>
      {rows.map(([n, lvl, time], i) => (
        <div key={n} style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '9px 12px', borderTop: i ? `1px solid ${FB.line}` : 'none' }}>
          <span style={{ flex: 1, fontSize: 12.5, fontWeight: 600 }}>{n}</span>
          <span style={{ display: 'flex', gap: 10 }}>{[0, 1, 2].map((j) => <CIDot key={j} i={j} on={lvl === j} size={15} />)}</span>
          <span style={{ fontSize: 10.5, fontWeight: 600, color: FB.soft, width: 46, textAlign: 'right' }}>{time}</span>
        </div>
      ))}
      {saved ? null : (
        <div style={{ display: 'flex', gap: 8, padding: '10px 12px', borderTop: `1px solid ${FB.line}` }}>
          <span style={{ flex: 1, textAlign: 'center', borderRadius: 999, padding: '9px 0', fontSize: 12, fontWeight: 700, background: FB.aub, color: '#fff' }}>Save</span>
          <span style={{ flex: 1, textAlign: 'center', borderRadius: 999, padding: '9px 0', fontSize: 12, fontWeight: 700, color: FB.aub, boxShadow: `inset 0 0 0 1.4px rgba(69,27,79,.32)` }}>Adjust</span>
        </div>
      )}
    </div>
  );
}

/* ── M01 · the core loop: voice note → extraction → receipt ── */
function M01() {
  return (
    <MonaFrame label="M01 · The core loop" firstOpen>
      <MBubble>Good afternoon, Aujéna. How's the day treating you?</MBubble>
      <UBubble>Rough night honestly, and two hot flashes by lunch. Fog's not great either.</UBubble>
      <MBubble>
        That's a lot before noon. Thank you for telling me. Here's what I heard; save it and it's on the record.
        <MExtract rows={[['Hot flashes', 1, '~12:40'], ['Brain fog', 1, 'today'], ['Restless sleep', 2, 'last night']]} />
      </MBubble>
      <MReceipt>Hot flash · moderate · 12:40, saved</MReceipt>
      <MBubble>Saved. Be soft with yourself this afternoon, your record shows fog usually lifts by evening.<br /><MWhyChip /></MBubble>
    </MonaFrame>
  );
}

/* ── M02 · the intake interview, chips + free answers ── */
function M02() {
  return (
    <MonaFrame label="M02 · Intake interview" intake>
      <MBubble>Halfway there. Meals, do you usually eat at regular times, or does the day decide?</MBubble>
      <MChips under items={['Regular times', 'The day decides', 'Somewhere between']} />
      <UBubble>The day decides, mostly. Lunch disappears when work gets loud.</UBubble>
      <MBubble>Noted, no judgment, just a pattern worth watching. One more on meals: any foods you already suspect stir things up?</MBubble>
      <MChips under items={['Wine', 'Caffeine', 'Spicy food', 'Sugar', 'Not sure yet']} />
    </MonaFrame>
  );
}

/* ── M03 · pattern reference + education answer ── */
function M03() {
  return (
    <MonaFrame label="M03 · Patterns & answers">
      <UBubble>Why am I waking at 3am even on days I'm exhausted?</UBubble>
      <MBubble>
        Your own record first: you've woken before 4am on 9 of the last 14 nights, and 7 of those followed evenings with screens past eleven.
        <br /><MWhyChip />
      </MBubble>
      <MBubble>
        The wider picture: estrogen shifts disturb the second half of the night, when sleep is lightest. It's one of the most common, and least warned-about, signs.
        <div style={{ fontSize: 10, color: FB.soft, marginTop: 8, paddingTop: 7, borderTop: `1px solid ${FB.line}` }}>Source: The Menopause Society · clinical guidance 2024</div>
      </MBubble>
      <MBubble>Earlier you asked about wine and flashes, want to get into that now?</MBubble>
      <MChips under items={['Yes, now', 'Later']} />
    </MonaFrame>
  );
}

/* ── M04 · the food moment ── */
function M04() {
  return (
    <MonaFrame label="M04 · Food, without judgment">
      <UBubble>Had a burger and a glass of red with Dana tonight 🙂</UBubble>
      <MReceipt>Dinner · burger, red wine · wine tagged · 7:50</MReceipt>
      <MBubble>Logged, and your stones will tell us if the wine matters for you. Enjoy the evening with Dana.</MBubble>
    </MonaFrame>
  );
}

/* ── M05 · the gate moment (free, post-trial) ── */
function M05() {
  return (
    <MonaFrame label="M05 · The gate">
      <MReceipt>Check-in · steady · 8:02, saved</MReceipt>
      <UBubble>Can we dig into why my fog weeks line up with my skipped walks?</UBubble>
      <div style={{ display: 'flex', gap: 8, alignItems: 'flex-end', maxWidth: '88%' }}>
        <MonaAvatar size={24} />
        <div style={{ background: '#fff', borderRadius: '16px 16px 16px 5px', padding: '14px 15px', boxShadow: `inset 0 0 0 1px ${FB.line}` }}>
          <div style={{ fontSize: 13, lineHeight: 1.55 }}>I'd love to dig into this with you, open conversation is part of Menovē Plus. Your check-ins, reflections, and receipts keep working either way.</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 11 }}>
            <span style={{ borderRadius: 999, padding: '9px 18px', fontSize: 12, fontWeight: 700, background: FB.plum, color: '#fff' }}>See Menovē Plus</span>
            <span style={{ fontSize: 12, fontWeight: 600, color: FB.soft }}>Not now</span>
          </div>
        </div>
      </div>
    </MonaFrame>
  );
}

/* ── M06 · the red-flag card ── */
function M06() {
  return (
    <MonaFrame label="M06 · Red flag, never gated">
      <UBubble>Also, there was some bleeding again today. Third time this month.</UBubble>
      <div style={{ display: 'flex', gap: 8, alignItems: 'flex-end', maxWidth: '92%' }}>
        <MonaAvatar size={24} />
        <div style={{ background: '#fff', borderRadius: '16px 16px 16px 5px', padding: '14px 15px', boxShadow: `inset 0 0 0 1px ${FB.line}`, borderTop: '3px solid #B98A2F' }}>
          <div style={{ fontSize: 10, letterSpacing: '.18em', textTransform: 'uppercase', fontWeight: 700, color: '#B98A2F' }}>Worth a conversation with your provider</div>
          <div style={{ fontSize: 13, lineHeight: 1.55, marginTop: 7 }}>
            Bleeding after a long gap, three times this month, is something clinicians want to know about, even when it turns out to be nothing. I've noted the dates.
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 11 }}>
            <span style={{ borderRadius: 999, padding: '9px 16px', fontSize: 12, fontWeight: 700, background: FB.aub, color: '#fff' }}>Add to my report</span>
            <span style={{ fontSize: 12, fontWeight: 600, color: FB.soft }}>Find a provider</span>
          </div>
        </div>
      </div>
      <MBubble>This isn't a diagnosis, it's your record doing its job. I'm here while you sort the appointment.</MBubble>
    </MonaFrame>
  );
}

/* ── M07 · the crisis script, fixed, pre-empts everything ── */
function M07() {
  return (
    <MonaFrame label="M07 · Crisis, fixed script">
      <div style={{ display: 'flex', gap: 8, alignItems: 'flex-end', maxWidth: '94%' }}>
        <MonaAvatar size={24} />
        <div style={{ background: '#fff', borderRadius: '16px 16px 16px 5px', padding: '16px 16px', boxShadow: `inset 0 0 0 1px ${FB.line}` }}>
          <div style={{ fontSize: 13.5, lineHeight: 1.6, fontWeight: 600 }}>What you're feeling matters, and you don't have to carry it alone, right now there are people whose whole job is to sit with you in this.</div>
          <div style={{ marginTop: 12, borderRadius: 12, background: FB.aub, padding: '14px 15px', color: '#fff' }}>
            <div style={{ fontSize: 11, letterSpacing: '.16em', textTransform: 'uppercase', fontWeight: 700, color: FB.iris }}>24/7 · free · confidential</div>
            <div style={{ fontFamily: FB.display, fontSize: 24, marginTop: 5 }}>Call or text 988</div>
            <div style={{ fontSize: 11.5, color: 'rgba(255,255,255,.78)', marginTop: 3 }}>Suicide & Crisis Lifeline · United States</div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 11 }}>
            <span style={{ borderRadius: 999, padding: '9px 16px', fontSize: 12, fontWeight: 700, background: FB.plum, color: '#fff' }}>Call 988 now</span>
            <span style={{ fontSize: 12, fontWeight: 600, color: FB.soft }}>I'm safe, keep talking</span>
          </div>
        </div>
      </div>
    </MonaFrame>
  );
}

Object.assign(window, { MonaFrame, MonaAvatar, MBubble, UBubble, MChips, MReceipt, MWhyChip, MExtract, M01, M02, M03, M04, M05, M06, M07 });