// MiraBlogChat — editorial wrapper that embeds the Mira chat widget at the
// bottom of every blog post, pre-seeded with a context-appropriate question.
//
// Depends on:
//   - blog-shared.jsx  (BS colors, BlogEyebrow, Reveal)
//   - mira-chat.jsx    (MiraChat component)
//
// Load order in blog-post.html:
//   blog-shared.jsx → blog-index.jsx → mira-chat.jsx → mira-blog-chat.jsx → blog-post.jsx

function MiraBlogChat({ seedQuestion }) {
  if (!seedQuestion) return null;

  return (
    <section
      style={{
        maxWidth: 700,
        margin: '72px auto 0',
        padding: '0 32px 80px',
      }}
    >
      {/* Divider + editorial framing */}
      <div
        style={{
          borderTop: `1px solid ${BS.border}`,
          paddingTop: 64,
        }}
      >
        <Reveal>
          {/* Eyebrow */}
          <div
            style={{
              fontFamily: '"DM Sans"',
              fontSize: 11,
              fontWeight: 700,
              letterSpacing: '.14em',
              textTransform: 'uppercase',
              color: BS.green,
              marginBottom: 14,
            }}
          >
            Keep the conversation going
          </div>

          {/* Heading */}
          <h2
            style={{
              fontFamily: '"DM Serif Display", Georgia, serif',
              fontSize: 'clamp(28px, 3vw, 38px)',
              lineHeight: 1.1,
              letterSpacing: '-.015em',
              color: BS.black,
              margin: '0 0 12px',
              textWrap: 'balance',
            }}
          >
            Ask Mira about this
          </h2>

          {/* Subtitle */}
          <p
            style={{
              fontFamily: '"DM Sans"',
              fontSize: 16,
              lineHeight: 1.6,
              color: BS.gray,
              margin: '0 0 36px',
              maxWidth: 520,
              textWrap: 'pretty',
            }}
          >
            Mira is KeepAfter's AI coach — the same one in the app. Ask her
            anything about what you just read. Your first question is already
            queued up.
          </p>
        </Reveal>

        {/* Chat widget — centered */}
        <Reveal delay={120}>
          <div
            style={{
              display: 'flex',
              justifyContent: 'center',
            }}
          >
            <MiraChat seedQuestion={seedQuestion} />
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.MiraBlogChat = MiraBlogChat;