/* ModerateConfig.jsx — moderate-tier config + the Learn "coming soon" sheet
   + the moderate tab bar (Home / Learn / Care / Profile). Reads the shared
   result template (HealthyResult) via window config objects. Persona: Bisola. */

// ── Persona-driven demo data (Bisola Adeyemi, 45, Wuse 2, Abuja) ─────────
const DEMO_MOD = {
  name: 'Bisola', initials: 'B', last: 'Adeyemi',
  score: 65, oral: 58,
  reversalDay: 3, reversalTotal: 30,
  adherentDays: 3, actionsCompletedAllTime: 4,
};

// ── Result tier config (consumed by the shared ResultScreen template) ────
const TIER_MODERATE = {
  key: 'moderate',
  band: 'var(--band-moderate)',
  overline: 'Action needed',
  title: 'Moderate risk detected',
  score: 65,
  paragraph: 'We’ve identified some risk factors that need attention. Early intervention can prevent serious complications — and most of what we’re seeing is reversible.',
  riskFactors: {
    title: 'Risk factors identified',
    items: [
      'Pre-diabetes indicators (HbA1c: 6.1%)',
      'Mild gum inflammation detected',
      'Family history of diabetes',
    ],
  },
  goodNews: {
    title: 'Good news',
    body: 'With the right actions now, you can avoid developing full disease. Studies show 30-day interventions reduce risk by 35%.',
  },
  breakdown: { oral: 58, general: 68, lifestyle: 70 },
  cta: 'See your recommended next step',
};

// ── Recommended-next-step copy (moderate framing) ───────────────────────
const NEXTSTEP_MODERATE = {
  title: 'Let’s confirm your health with baseline bloodwork.',
  paragraph: 'Your AI screening flagged some early signs. Blood work will confirm what’s happening and give you a clear baseline to track from.',
  cadence: 'Every 6 months while you work on reversing these signs. We’ll send you reminders so it’s one less thing to track.',
};

// ── Moderate tab bar — uses the shared config-driven TierTabBar (book-open
//    in the 2nd slot per the tier-tab system rule). ───────────────────────
function ModerateTabBar({ active = 'home', onChange = () => {} }) {
  return <TierTabBar tabs={tierTabs('moderate')} active={active} onChange={onChange}/>;
}

// ── ComingSoonSheet — bottom sheet for unbuilt prototype destinations ────
function ComingSoonSheet({ open, title, body, onClose }) {
  return (
    <div style={{ position: 'absolute', inset: 0, zIndex: 50, pointerEvents: open ? 'auto' : 'none' }}>
      <div onClick={onClose} style={{ position: 'absolute', inset: 0, background: 'var(--bg-overlay)', opacity: open ? 1 : 0, transition: 'opacity var(--dur-slow) var(--ease-out)' }}/>
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, background: '#fff', borderRadius: 'var(--radius-l) var(--radius-l) 0 0',
        padding: '10px 24px 40px', boxShadow: 'var(--shadow-l)', transform: open ? 'translateY(0)' : 'translateY(100%)', transition: 'transform var(--dur-slow) var(--ease-out)',
      }}>
        <div style={{ width: 38, height: 4, borderRadius: 2, background: 'var(--stone-300)', margin: '0 auto 22px' }}/>
        <div style={{ width: 56, height: 56, borderRadius: '50%', background: 'var(--amber-50)', color: 'var(--amber-600)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
          <Icon name="play-circle" size={26} strokeWidth={1.7}/>
        </div>
        <div style={{ font: 'var(--type-display-s)', color: 'var(--fg-1)', letterSpacing: 'var(--tracking-snug)', marginBottom: 8 }}>{title}</div>
        <p style={{ font: 'var(--type-body)', color: 'var(--fg-2)', textWrap: 'pretty', marginBottom: 20 }}>{body}</p>
        <Button full variant="secondary" onClick={onClose}>Close</Button>
      </div>
    </div>
  );
}

window.MunaModerateConfig = { DEMO_MOD, TIER_MODERATE, NEXTSTEP_MODERATE, ModerateTabBar, ComingSoonSheet };