/* HighConfig.jsx — high-risk tier config + 3-tab bar + ComingSoon sheet.
   Persona: Fatima Ibrahim, 52, teacher in Kano. Tone: calm, direct, no euphemism;
   the product has PAST-tense agency (we've arranged / connected / sent), the user
   has FUTURE-tense agency (you'll see / we'll let you know). No exclamation marks. */

const DEMO_HIGH = {
  name: 'Fatima', initials: 'F', last: 'Ibrahim',
  score: 38, oral: 28,
  city: 'Kano',
};

// ── Result tier config (consumed by the shared ResultScreen template) ────
const TIER_HIGH = {
  key: 'high',
  band: 'var(--band-high)',
  overline: 'Urgent attention needed',
  title: 'High risk',
  score: 38,
  paragraph: 'Your screening reveals serious health concerns that need immediate medical and dental attention. We’ve already arranged your care team and a plan — you don’t have to figure this out alone.',
  riskFactors: {
    title: 'Critical findings',
    iconTone: 'high',
    items: [
      'Type 2 diabetes confirmed (HbA1c: 7.4%)',
      'Severe chronic periodontitis',
      'High cardiovascular risk factors',
    ],
  },
  goodNews: {
    title: 'You’re not alone in this',
    body: 'We know this might feel overwhelming. We’ve connected doctors who will guide you through every step — starting today.',
  },
  breakdown: { oral: 28, general: 42, lifestyle: 45 },
  cta: 'See your care plan',
};

// ── Recommended-next-step copy (high-risk framing — necessity, not option) ──
const NEXTSTEP_HIGH = {
  title: 'Bloodwork is critical at this stage.',
  paragraph: 'Your screening already points to type 2 diabetes. Bloodwork will give your doctors the exact numbers they need to start treatment safely.',
  reasons: [
    { title: 'Confirm what we’re seeing', desc: 'Lock in the findings with lab-grade numbers.' },
    { title: 'Guide your treatment', desc: 'Your doctors need exact values to prescribe safely.' },
    { title: 'Track from today', desc: 'Establish your starting point so progress is measurable.' },
    { title: 'Catch what’s hidden', desc: 'Find anything the screening couldn’t see.' },
  ],
  cadence: 'Within the next 7 days, then again in 3 months once treatment starts. We’ll coordinate the timing with your physician.',
  laterLabel: 'I’ll do this with my doctor',
};

// ── Shared care-team data (reused across dashboard, care, profile, consult) ──
const CARE_TEAM = {
  physician: { initials: 'AT', name: 'Dr. Adebayo Taiwo', role: 'Physician', detail: 'Internal Medicine', bg: 'var(--clay-500)' },
  dentist: { initials: 'FA', name: 'Dr. Folake Adeyemi', role: 'Dentist', detail: 'General & Preventive Dentistry', bg: 'var(--stone-600)' },
};

// ── High-risk tab bar — THREE tabs only (no 2nd slot). Config-driven. ────
const HIGH_TABS = [
  { id: 'home', label: 'Home', icon: 'home' },
  { id: 'care', label: 'Care', icon: 'heart' },
  { id: 'profile', label: 'Profile', icon: 'user' },
];
function HighTabBar({ active = 'home', onChange = () => {} }) {
  return <TierTabBar tabs={HIGH_TABS} active={active} onChange={onChange}/>;
}

// ── ComingSoonSheet — bottom sheet for unbuilt prototype destinations ────
function HighComingSoonSheet({ 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={{ 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.MunaHighConfig = { DEMO_HIGH, TIER_HIGH, NEXTSTEP_HIGH, CARE_TEAM, HighTabBar, HighComingSoonSheet };