// care-model.jsx — Every Man's Health · Care Model page.
// Visual + tonal source-of-truth = the homepage in this folder.
// Conventions: pull palette/type/copy tokens from shared.jsx; AI stays
// supportive; lab language is "lab-guided / coordinated"; medications,
// testosterone, peptides, and compounded therapies stay understated.
//
// Responsive: useViewport() tier hook (shared.jsx). PX = horizontal padding,
// SY = scaled vertical padding. Above 1024px = original desktop design.

const PX = (vp) => vp.pad;
const SY = (vp, n) => Math.round(n * (vp.isPhone ? 0.5 : vp.isMobile ? 0.6 : vp.isTablet ? 0.8 : 1));

// ── Local copy data ─────────────────────────────────────────────────────

// Slightly softer titles than shared SERVICES, framed as "areas of
// attention" rather than service-menu items.
const CARE_DOMAINS = [
  { n: '01', title: 'Preventive medicine',
    body: 'Comprehensive baselines, cardiometabolic risk, age-appropriate screening, and the ordinary primary-care work that nothing else replaces.' },
  { n: '02', title: 'Hormone health',
    body: 'Testosterone, thyroid, adrenal and related axes — evaluated as part of the whole, monitored over time, and addressed through physician-guided plans when clinically appropriate.' },
  { n: '03', title: 'Metabolic health',
    body: 'Insulin sensitivity, lipid biology, body composition, sleep and recovery — the foundation under everything else.' },
  { n: '04', title: 'Sexual health',
    body: 'Libido, function, pelvic health, and fertility considerations — discussed plainly, addressed through evidence-based pathways.' },
  { n: '05', title: 'Cognitive performance',
    body: 'Sleep, mood, focus, and the metabolic and hormonal contributors that shape how your brain feels at fifty and at seventy-five.' },
  { n: '06', title: 'Healthspan & longevity',
    body: 'Longitudinal biomarkers, recovery, cardiorespiratory fitness, and the habits that compound across decades.' },
];

const PILLARS = [
  { k: '01', t: 'In-person evaluation',
    body: 'Care begins in person at our Florida practice. A long first visit grounds the relationship — medical history, physical examination, an unhurried conversation about your goals.' },
  { k: '02', t: 'Coordinated labs',
    body: 'Routine blood and biomarker testing coordinated through trusted laboratory partners for your convenience. Your physician selects what to order, based on your history and goals.' },
  { k: '03', t: 'Longitudinal monitoring',
    body: 'Each new panel is read against the panels before it. Technology helps organize and trend your record; your physician interprets what it means.' },
  { k: '04', t: 'Telehealth-supported follow-up',
    body: 'Scheduled video visits between in-person appointments, when appropriate. A real physician, on a real schedule, who knows your file.' },
];

const RHYTHM = [
  { phase: 'Beginning',  sub: 'Year 1 · Onboarding', items: [
    { n: '01', t: 'Application or introductory conversation', body: 'A short conversation about fit, goals, and what you want from a long-term physician relationship.' },
    { n: '02', t: 'Initial in-person physician evaluation',   body: 'Your first long visit at our Florida practice — history, physical exam, and the start of your file.' },
    { n: '03', t: 'Coordinated baseline laboratory testing',  body: 'Routine blood and biomarker work ordered by your physician and coordinated through trusted laboratory partners.' },
  ] },
  { phase: 'Care',       sub: 'Interpretation & plan', items: [
    { n: '04', t: 'Physician interpretation',                 body: 'Your physician reviews your record with you, in person or by video. Technology assists in surfacing patterns; clinical decisions remain physician-guided.' },
    { n: '05', t: 'Personalized plan',                        body: 'A plan you can read. Lifestyle inputs, monitoring cadence, and — only when clinically appropriate — prescriptions or compounded therapies.' },
    { n: '06', t: 'Telehealth-supported follow-up',           body: 'Scheduled video check-ins between in-person visits, when appropriate to the plan.' },
  ] },
  { phase: 'Continuity', sub: 'Year-round & beyond', items: [
    { n: '07', t: 'Repeat labs & longitudinal monitoring',    body: 'Recurring laboratory work on a cadence your physician sets — typically quarterly or as your plan requires.' },
    { n: '08', t: 'Periodic reassessment',                    body: 'We re-examine the whole picture — what changed, what didn\'t, what to watch.' },
    { n: '09', t: 'Annual renewal or plan refinement',        body: 'At the end of the year, we refine the plan together for the year ahead. Year 2 begins where Year 1 ended.' },
  ] },
];

const COVERED = {
  within: [
    'Initial in-person physician evaluation',
    'Ongoing physician relationship',
    'Plan authoring, review, and refinement',
    'Longitudinal record interpretation',
    'Scheduled telehealth follow-up',
    'In-person check-ins through the year',
  ],
  coordinated: [
    'Routine blood and biomarker testing through trusted laboratory partners',
    'Imaging and specialty referrals when clinically indicated',
    'Prescriptions filled at retail or mail-order pharmacies',
    'Compounded therapies dispensed by 503A pharmacies when clinically appropriate',
  ],
};

const TECH = {
  helps: [
    'Organizing your laboratory and health data over time',
    'Surfacing patterns and outliers in your record for physician review',
    'Keeping context available across visits',
    'Making the same view available to you and your physician',
  ],
  doesnt: [
    'Make clinical decisions — your physician does',
    'Substitute for the physician-patient relationship',
    'Drive prescriptions, dosing, or "optimization" outside of physician review',
    'Diagnose or treat',
  ],
};

const BOUNDARIES = [
  'We are not a substitute for emergency or urgent care.',
  'We do not bill insurance. Membership is direct-pay.',
  'We coordinate sub-specialty and in-person procedural care with other clinicians when needed.',
  'We do not lead with medications. Therapeutics are one tool among many.',
  'We treat fewer patients on purpose. Membership is by application.',
];

const RECORD_TRACKED = [
  'Cardiometabolic markers',
  'Hormone axes',
  'Inflammation & immune markers',
  'Sleep, recovery & function',
  'Body composition',
  'Physician notes & plan history',
];

// ── Page ────────────────────────────────────────────────────────────────

function CareModelPage() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);
  const vp = useViewport();
  const p = PALETTES[t.palette];
  const T = TYPES[t.typePair];
  const tc = toneCopy(t.tone);

  const S = {
    base:      { background: p.cream, color: p.ink, fontFamily: T.body, fontSize: 15.5, lineHeight: 1.55, letterSpacing: '-0.005em' },
    display:   { fontFamily: T.display, fontWeight: T.displayWeight, letterSpacing: T.displayTracking, color: p.ink },
    mono:      { fontFamily: T.mono, letterSpacing: '0.14em', textTransform: 'uppercase' },
    container: { padding: `0 ${PX(vp)}px`, position: 'relative', maxWidth: 1440, margin: '0 auto' },
  };

  return (
    <div style={S.base}>
      <CMNav p={p} T={T} S={S} tc={tc} vp={vp} />
      <CMHero p={p} T={T} S={S} tc={tc} vp={vp} />
      <CMPillars p={p} T={T} S={S} vp={vp} />
      <CMRhythm p={p} T={T} S={S} vp={vp} />
      <CMCoverage p={p} T={T} S={S} vp={vp} />
      <CMRecord p={p} T={T} S={S} vp={vp} />
      <CMTechnology p={p} T={T} S={S} vp={vp} />
      <CMFrontier p={p} T={T} S={S} vp={vp} />
      <CMDomains p={p} T={T} S={S} vp={vp} />
      <CMBoundaries p={p} T={T} S={S} vp={vp} />
      <CMCTA p={p} T={T} S={S} tc={tc} vp={vp} />
      <CMFooter p={p} T={T} S={S} vp={vp} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette">
          <TweakColor label="Theme" value={t.palette}
            options={[
              ['#0E1E3A', '#F2EBDD', '#B8965B'],
              ['#0A1628', '#ECE6D9', '#3FB6C2'],
              ['#142244', '#EFE4D0', '#7A8F6E'],
            ]}
            onChange={(v) => {
              const map = { '["#0e1e3a","#f2ebdd","#b8965b"]': 'marine',
                            '["#0a1628","#ece6d9","#3fb6c2"]': 'graphite',
                            '["#142244","#efe4d0","#7a8f6e"]': 'atlantic' };
              setTweak('palette', map[JSON.stringify(v).toLowerCase()] || 'marine');
            }} />
        </TweakSection>
        <TweakSection label="Typography">
          <TweakRadio label="Pairing" value={t.typePair}
            options={[{ value: 'editorial', label: 'Editorial' },
                     { value: 'clinical',  label: 'Clinical' },
                     { value: 'technical', label: 'Technical' }]}
            onChange={(v) => setTweak('typePair', v)} />
        </TweakSection>
        <TweakSection label="Tone">
          <TweakSlider label="Clinical ↔ Consumer" value={t.tone}
            min={1} max={10} step={1}
            onChange={(v) => setTweak('tone', v)} />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

// ── NAV ─────────────────────────────────────────────────────────────────
function CMNav({ p, T, S, tc, vp }) {
  const [hover, setHover] = React.useState(null);
  const [open, setOpen] = React.useState(false);
  const current = 'Care Model';
  const items = [
    { label: 'The Practice', href: 'EMH_05_The_Practice.html' },
    { label: 'Care Model',   href: 'EMH_03_Care_Model.html' },
    { label: 'Membership',   href: 'EMH_04_Membership.html' },
    { label: 'Insights',     href: 'EMH_13_Insights.html' },
  ];
  const applyBtn = (
    <a href="EMH_06_Apply_For_Membership.html" style={{ fontFamily: T.body, fontSize: 13.5, fontWeight: 500, padding: '10px 18px', background: p.ink, color: p.cream, border: 'none', borderRadius: 2, cursor: 'pointer', whiteSpace: 'nowrap', textDecoration: 'none', display: 'inline-block' }}>Apply for membership</a>
  );

  if (vp.isMobile) {
    return (
      <div style={{ position: 'sticky', top: 0, zIndex: 20, background: `${p.cream}f5`, backdropFilter: 'blur(10px)', borderBottom: `1px solid ${p.ink}1a` }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: `14px ${PX(vp)}px`, gap: 14 }}>
          <a href="EMH_02_Florida_Concierge_Homepage_Current.html" style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none', color: 'inherit', minWidth: 0 }}>
            <EMHMark color={p.ink} size={24} />
            <div style={{ fontFamily: T.display, fontWeight: 500, fontSize: 15.5, letterSpacing: '-0.012em', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>Every Man's Health</div>
          </a>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexShrink: 0 }}>
            <button onClick={() => setOpen((o) => !o)} aria-expanded={open} aria-label="Menu"
              style={{ fontFamily: T.body, fontSize: 13, fontWeight: 500, padding: '9px 12px', background: 'transparent', color: p.ink, border: `1px solid ${p.ink}33`, borderRadius: 2, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              Menu<span style={{ display: 'inline-block', transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .18s', fontSize: 9 }}>▾</span>
            </button>
            {!vp.isPhone && applyBtn}
          </div>
        </div>
        {open && (
          <div style={{ borderTop: `1px solid ${p.ink}14`, padding: `8px ${PX(vp)}px 16px`, display: 'flex', flexDirection: 'column' }}>
            {items.map(({ label, href }) => (
              <a key={label} href={href} onClick={() => setOpen(false)}
                 style={{ fontSize: 15, color: p.ink, textDecoration: 'none', padding: '13px 0', borderBottom: `1px solid ${p.ink}10`, fontWeight: label === current ? 600 : 400 }}>
                {label}
              </a>
            ))}
            <a href="https://www.yourhealthfile.com/portal/login.jsp" target="_blank" rel="noopener noreferrer" style={{ fontSize: 15, color: p.inkSoft, textDecoration: 'none', padding: '13px 0' }}>Patient Portal</a>
            <div style={{ marginTop: 10 }}>{applyBtn}</div>
          </div>
        )}
      </div>
    );
  }

  return (
    <div style={{ position: 'sticky', top: 0, zIndex: 10, background: `${p.cream}f0`, backdropFilter: 'blur(10px)', borderBottom: `1px solid ${p.ink}1a` }}>
      <div style={{ ...S.container, display: 'flex', alignItems: 'center', padding: `20px ${PX(vp)}px`, gap: vp.isTablet ? 24 : 40 }}>
        <a href="EMH_02_Florida_Concierge_Homepage_Current.html" style={{ display: 'flex', alignItems: 'center', gap: 12, textDecoration: 'none', color: 'inherit' }}>
          <EMHMark color={p.ink} size={26} />
          <div style={{ fontFamily: T.display, fontWeight: 500, fontSize: 17, letterSpacing: '-0.012em', whiteSpace: 'nowrap' }}>Every Man's Health</div>
        </a>
        <div style={{ flex: 1, display: 'flex', justifyContent: 'center', gap: vp.isTablet ? 22 : 32 }}>
          {items.map(({ label, href }) => {
            const active = label === current;
            return (
              <a key={label} href={href} onMouseEnter={() => setHover(label)} onMouseLeave={() => setHover(null)}
                 style={{ fontSize: 13.5, color: (active || hover === label) ? p.ink : p.inkSoft, textDecoration: 'none', transition: 'color .12s', position: 'relative', padding: '4px 0', fontWeight: active ? 500 : 400, whiteSpace: 'nowrap' }}>
                {label}
                {(active || hover === label) && <span style={{ position: 'absolute', left: 0, right: 0, bottom: -2, height: 1, background: p.accent }} />}
              </a>
            );
          })}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
          {!vp.isTablet && <a href="https://www.yourhealthfile.com/portal/login.jsp" target="_blank" rel="noopener noreferrer" style={{ fontSize: 13.5, color: p.inkSoft, textDecoration: 'none', whiteSpace: 'nowrap' }}>Patient Portal</a>}
          {applyBtn}
        </div>
      </div>
    </div>
  );
}

// ── HERO ────────────────────────────────────────────────────────────────
function CMHero({ p, T, S, tc, vp }) {
  return (
    <section style={{ ...S.container, padding: `${SY(vp, 96)}px ${PX(vp)}px ${SY(vp, 80)}px`, borderBottom: `1px solid ${p.ink}14` }}>
      <div style={{ ...S.mono, fontSize: 11, color: p.accent, marginBottom: 24, display: 'inline-flex', alignItems: 'center', gap: 10 }}>
        <span style={{ width: 5, height: 5, borderRadius: 3, background: p.accent }} />
        Care Model · Florida concierge practice
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: vp.isMobile ? '1fr' : '1.3fr 1fr', gap: vp.isMobile ? 28 : 80, alignItems: vp.isMobile ? 'start' : 'end' }}>
        <h1 style={{ ...S.display, fontSize: vp.isPhone ? 34 : vp.isMobile ? 46 : vp.isTablet ? 56 : 64, lineHeight: 1.05, margin: 0, textWrap: 'balance' }}>
          A physician-led model for <span style={{ fontStyle: T.name === 'Editorial' ? 'italic' : 'normal', color: p.inkSoft }}>proactive men's health</span>.
        </h1>
        <p style={{ fontSize: 17, lineHeight: 1.6, color: p.inkSoft, margin: 0, maxWidth: 460 }}>
          How care works at Every Man's Health — from the first conversation to the long arc of a member's relationship with us, and our stance on the science shaping men's health today.
        </p>
      </div>
      <div style={{ display: 'flex', gap: 14, alignItems: 'stretch', marginTop: 48, flexWrap: 'wrap', flexDirection: vp.isPhone ? 'column' : 'row' }}>
        <a href="EMH_06_Apply_For_Membership.html" style={{ fontFamily: T.body, fontSize: 14.5, fontWeight: 500, padding: '15px 26px', background: p.ink, color: p.cream, border: 'none', borderRadius: 2, cursor: 'pointer', textDecoration: 'none', display: 'inline-block', textAlign: 'center' }}>{tc.ctaPrimary} →</a>
        <a href="EMH_02_Florida_Concierge_Homepage_Current.html" style={{ fontFamily: T.body, fontSize: 14.5, fontWeight: 500, padding: '15px 22px', background: 'transparent', color: p.ink, border: `1px solid ${p.ink}44`, borderRadius: 2, cursor: 'pointer', textDecoration: 'none', textAlign: 'center' }}>← Return to overview</a>
      </div>
    </section>
  );
}

// ── PILLARS ─────────────────────────────────────────────────────────────
function CMPillars({ p, T, S, vp }) {
  const cols = vp.isPhone ? 1 : vp.isMobile ? 2 : 4;
  return (
    <section style={{ ...S.container, padding: `${SY(vp, 112)}px ${PX(vp)}px`, borderBottom: `1px solid ${p.ink}14` }}>
      <div style={{ display: 'grid', gridTemplateColumns: vp.isMobile ? '1fr' : '320px 1fr', gap: vp.isMobile ? 28 : 80, marginBottom: vp.isMobile ? 40 : 56 }}>
        <div>
          <div style={{ ...S.mono, fontSize: 11, color: p.accent, marginBottom: 20 }}>The four pillars</div>
          <h2 style={{ ...S.display, fontSize: vp.isPhone ? 32 : 42, lineHeight: 1.06, margin: 0, textWrap: 'balance' }}>
            Four foundations of membership care.
          </h2>
        </div>
        <p style={{ fontSize: 16.5, lineHeight: 1.6, color: p.inkSoft, marginTop: 8, maxWidth: 560 }}>
          Each pillar reinforces the others. An in-person foundation makes telehealth useful between visits. Coordinated laboratory work fuels longitudinal monitoring. The whole picture is read by your physician — supported, but never replaced, by technology.
        </p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: `repeat(${cols}, 1fr)`, borderTop: `1px solid ${p.ink}1a` }}>
        {PILLARS.map((pl, i) => {
          const colInRow = i % cols;
          return (
          <div key={pl.k} style={{
            padding: '30px 28px 36px',
            borderRight: colInRow < cols - 1 ? `1px solid ${p.ink}1a` : 'none',
            borderBottom: vp.isMobile && i < PILLARS.length - (PILLARS.length % cols || cols) ? `1px solid ${p.ink}1a` : 'none',
          }}>
            <div style={{ ...S.mono, fontSize: 10.5, color: p.accent, marginBottom: 22 }}>{pl.k}</div>
            <h3 style={{ ...S.display, fontSize: 20, margin: 0, marginBottom: 14, lineHeight: 1.22 }}>{pl.t}</h3>
            <p style={{ fontSize: 13.5, lineHeight: 1.6, color: p.inkSoft, margin: 0 }}>{pl.body}</p>
          </div>
        );})}
      </div>
    </section>
  );
}

// ── ANNUAL RHYTHM ───────────────────────────────────────────────────────
function CMRhythm({ p, T, S, vp }) {
  return (
    <section style={{ ...S.container, padding: `${SY(vp, 112)}px ${PX(vp)}px`, borderBottom: `1px solid ${p.ink}14`, background: p.paper }}>
      <div style={{ display: 'grid', gridTemplateColumns: vp.isMobile ? '1fr' : '320px 1fr', gap: vp.isMobile ? 28 : 80, marginBottom: vp.isMobile ? 36 : 56 }}>
        <div>
          <div style={{ ...S.mono, fontSize: 11, color: p.accent, marginBottom: 20 }}>The annual rhythm</div>
          <h2 style={{ ...S.display, fontSize: vp.isPhone ? 32 : 42, lineHeight: 1.06, margin: 0, textWrap: 'balance' }}>
            A year-long sequence, repeated thoughtfully.
          </h2>
        </div>
        <div>
          <p style={{ fontSize: 16.5, lineHeight: 1.6, color: p.inkSoft, marginTop: 8, marginBottom: 0, maxWidth: 560 }}>
            Membership unfolds in three phases — beginning, care, continuity — and then the cycle repeats. The record gets sharper with each pass. Decisions become more considered. The relationship deepens.
          </p>
        </div>
      </div>

      {/* Desktop/tablet: horizontal SVG ribbon. Mobile: hidden in favor of
          stacked vertical phase blocks below. */}
      {!vp.isMobile && <RhythmTrack p={p} T={T} S={S} />}

      <div style={{ display: 'grid', gridTemplateColumns: vp.isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 0, borderTop: `1px solid ${p.ink}22`, marginTop: 4 }}>
        {RHYTHM.map((ph, i) => (
          <div key={ph.phase} style={{
            padding: vp.isMobile ? '28px 0 32px' : '30px 24px 36px',
            borderRight: (!vp.isMobile && i < 2) ? `1px solid ${p.ink}1a` : 'none',
            borderBottom: (vp.isMobile && i < 2) ? `1px solid ${p.ink}14` : 'none',
            background: (!vp.isMobile && i === 1) ? `${p.cream}` : 'transparent',
          }}>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: vp.isMobile ? 6 : 24 }}>
              <h3 style={{ ...S.display, fontSize: 22, margin: 0, fontWeight: T.displayWeight }}>{ph.phase}</h3>
              <span style={{ ...S.mono, fontSize: 9.5, color: p.muted }}>PHASE 0{i + 1}</span>
            </div>
            <div style={{ ...S.mono, fontSize: 10, color: p.accent, marginBottom: 22 }}>{ph.sub}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
              {ph.items.map((it) => (
                <div key={it.n} style={{ paddingTop: 14, borderTop: `1px solid ${p.ink}14` }}>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 6 }}>
                    <span style={{ ...S.mono, fontSize: 10, color: p.accent, minWidth: 22 }}>{it.n}</span>
                    <h4 style={{ ...S.display, fontSize: 15.5, margin: 0, lineHeight: 1.25, fontWeight: T.displayWeight }}>{it.t}</h4>
                  </div>
                  <p style={{ fontSize: 13, lineHeight: 1.55, color: p.inkSoft, margin: '0 0 0 34px' }}>{it.body}</p>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 28, display: 'flex', alignItems: vp.isPhone ? 'flex-start' : 'center', justifyContent: 'space-between', gap: 16, flexDirection: vp.isPhone ? 'column' : 'row' }}>
        <p style={{ fontSize: 13.5, color: p.muted, margin: 0, maxWidth: 600 }}>
          Year 2 begins where Year 1 ended. Your record carries forward; the plan refines, doesn't restart.
        </p>
        <div style={{ ...S.mono, fontSize: 10.5, color: p.muted, display: 'flex', alignItems: 'center', gap: 10 }}>
          <span>Annual cycle</span>
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
            <path d="M4 10 A6 6 0 1 0 10 4" stroke={p.accent} strokeWidth="1.4" strokeLinecap="round" />
            <path d="M10 4 L8 2 M10 4 L8 6" stroke={p.accent} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>
      </div>
    </section>
  );
}

// Horizontal nine-dot track sitting above the three phase columns —
// reads as a single connected year, with phase brackets above.
function RhythmTrack({ p, T, S }) {
  const W = 1296, H = 78;
  const padX = 12, y = 50;
  const N = 9;
  const dx = (W - padX * 2) / (N - 1);
  const xs = (i) => padX + i * dx;
  const phaseCols = [[0, 2], [3, 5], [6, 8]];
  return (
    <div style={{ marginBottom: 28 }}>
      <svg viewBox={`0 0 ${W} ${H}`} width="100%" height={H} style={{ display: 'block', overflow: 'visible' }}>
        {phaseCols.map(([a, b], i) => {
          const x1 = xs(a), x2 = xs(b);
          const label = ['BEGINNING', 'CARE', 'CONTINUITY'][i];
          return (
            <g key={i}>
              <line x1={x1} x2={x2} y1={22} y2={22} stroke={p.muted} strokeOpacity="0.4" strokeWidth="1" />
              <line x1={x1} x2={x1} y1={22} y2={28} stroke={p.muted} strokeOpacity="0.4" strokeWidth="1" />
              <line x1={x2} x2={x2} y1={22} y2={28} stroke={p.muted} strokeOpacity="0.4" strokeWidth="1" />
              <text x={(x1 + x2) / 2} y={14} fontFamily={T.mono} fontSize="10" letterSpacing="0.16em" textAnchor="middle" fill={p.muted}>{label}</text>
            </g>
          );
        })}
        <line x1={padX} x2={W - padX} y1={y} y2={y} stroke={p.ink} strokeOpacity="0.18" strokeWidth="1" />
        {Array.from({ length: N }, (_, i) => (
          <g key={i}>
            <circle cx={xs(i)} cy={y} r="5" fill={p.cream} stroke={p.accent} strokeWidth="1.5" />
            <circle cx={xs(i)} cy={y} r="1.6" fill={p.accent} />
            <text x={xs(i)} y={y + 22} fontFamily={T.mono} fontSize="10" textAnchor="middle" fill={p.muted} letterSpacing="0.12em">{String(i + 1).padStart(2, '0')}</text>
          </g>
        ))}
      </svg>
    </div>
  );
}

// ── COVERAGE ────────────────────────────────────────────────────────────
function CMCoverage({ p, T, S, vp }) {
  return (
    <section style={{ ...S.container, padding: `${SY(vp, 112)}px ${PX(vp)}px`, borderBottom: `1px solid ${p.ink}14` }}>
      <div style={{ display: 'grid', gridTemplateColumns: vp.isMobile ? '1fr' : '320px 1fr', gap: vp.isMobile ? 28 : 80, marginBottom: vp.isMobile ? 36 : 48 }}>
        <div>
          <div style={{ ...S.mono, fontSize: 11, color: p.accent, marginBottom: 20 }}>What's covered</div>
          <h2 style={{ ...S.display, fontSize: vp.isPhone ? 30 : 42, lineHeight: 1.06, margin: 0, textWrap: 'balance' }}>
            The physician relationship, and what we coordinate around it.
          </h2>
        </div>
        <p style={{ fontSize: 16.5, lineHeight: 1.6, color: p.inkSoft, marginTop: 8, maxWidth: 560 }}>
          Membership is the physician relationship — visits, plan, record, follow-up. Laboratory work, imaging, prescriptions, and compounded therapies are <em>coordinated</em> for you, billed by the entities providing them.
        </p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: vp.isMobile ? '1fr' : '1fr 1fr', gap: 0, borderTop: `1px solid ${p.ink}22` }}>
        <div style={{ padding: vp.isMobile ? '28px 0' : '32px 36px 36px 0', borderRight: vp.isMobile ? 'none' : `1px solid ${p.ink}1a`, borderBottom: vp.isMobile ? `1px solid ${p.ink}14` : 'none' }}>
          <div style={{ ...S.mono, fontSize: 10.5, color: p.accent, marginBottom: 20 }}>Within the physician relationship</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
            {COVERED.within.map((item) => (
              <li key={item} style={{ paddingLeft: 22, position: 'relative', fontSize: 15, lineHeight: 1.5, color: p.ink }}>
                <span style={{ position: 'absolute', left: 0, top: 11, width: 12, height: 1, background: p.accent }} />
                {item}
              </li>
            ))}
          </ul>
        </div>
        <div style={{ padding: vp.isMobile ? '28px 0 0' : '32px 0 36px 36px' }}>
          <div style={{ ...S.mono, fontSize: 10.5, color: p.muted, marginBottom: 20 }}>Coordinated for you</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
            {COVERED.coordinated.map((item) => (
              <li key={item} style={{ paddingLeft: 22, position: 'relative', fontSize: 15, lineHeight: 1.5, color: p.inkSoft }}>
                <span style={{ position: 'absolute', left: 0, top: 11, width: 12, height: 1, background: p.muted, opacity: 0.6 }} />
                {item}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

// ── LONGITUDINAL RECORD (lightweight) ───────────────────────────────────
function CMRecord({ p, T, S, vp }) {
  return (
    <section style={{ ...S.container, padding: `${SY(vp, 112)}px ${PX(vp)}px`, borderBottom: `1px solid ${p.ink}14`, background: p.paper }}>
      <div style={{ display: 'grid', gridTemplateColumns: vp.isMobile ? '1fr' : '1fr 1fr', gap: vp.isMobile ? 32 : 80, alignItems: 'start' }}>
        <div>
          <div style={{ ...S.mono, fontSize: 11, color: p.accent, marginBottom: 20 }}>The longitudinal record</div>
          <h2 style={{ ...S.display, fontSize: vp.isPhone ? 30 : 38, lineHeight: 1.06, margin: 0, marginBottom: 22, textWrap: 'balance' }}>
            One record, read across time.
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.65, color: p.inkSoft, marginBottom: 18 }}>
            Each laboratory panel, each visit, each plan adjustment is added to a single longitudinal record. New data is read against the data before it — not in isolation. The same view is open in both windows during your visit; nothing is hidden behind a portal.
          </p>
          <p style={{ fontSize: 16, lineHeight: 1.65, color: p.inkSoft, marginBottom: 28 }}>
            Your record is yours. It's exportable, portable, and follows you if you ever leave.
          </p>
          <a href="EMH_02_Florida_Concierge_Homepage_Current.html#record" style={{ fontFamily: T.mono, fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: p.accent, textDecoration: 'none', borderBottom: `1px solid ${p.accent}66`, paddingBottom: 4 }}>
            See the record view on the homepage →
          </a>
        </div>
        <div style={{ background: p.cream, border: `1px solid ${p.ink}22`, padding: '28px 28px 24px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 22 }}>
            <span style={{ fontFamily: T.display, fontSize: 15, color: p.ink, fontWeight: T.displayWeight }}>What gets tracked</span>
            <span style={{ ...S.mono, fontSize: 9.5, color: p.muted }}>LONGITUDINAL · YOURS</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0, borderTop: `1px solid ${p.ink}1a` }}>
            {RECORD_TRACKED.map((item, i) => (
              <div key={item} style={{
                padding: '18px 0',
                borderBottom: i < RECORD_TRACKED.length - 2 ? `1px solid ${p.ink}10` : 'none',
                paddingLeft: i % 2 === 0 ? 0 : 18,
                paddingRight: i % 2 === 0 ? 18 : 0,
                borderRight: i % 2 === 0 ? `1px solid ${p.ink}10` : 'none',
              }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
                  <span style={{ ...S.mono, fontSize: 9.5, color: p.accent, minWidth: 22 }}>{String(i + 1).padStart(2, '0')}</span>
                  <span style={{ fontSize: 14, color: p.ink }}>{item}</span>
                </div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 18, paddingTop: 14, borderTop: `1px solid ${p.ink}1a`, ...S.mono, fontSize: 9.5, color: p.muted }}>
            Read together by your physician — not in isolation.
          </div>
        </div>
      </div>
    </section>
  );
}

// ── TECHNOLOGY (helps / doesn't) ────────────────────────────────────────
function CMTechnology({ p, T, S, vp }) {
  return (
    <section style={{ ...S.container, padding: `${SY(vp, 112)}px ${PX(vp)}px`, borderBottom: `1px solid ${p.ink}14` }}>
      <div style={{ display: 'grid', gridTemplateColumns: vp.isMobile ? '1fr' : '320px 1fr', gap: vp.isMobile ? 28 : 80, marginBottom: vp.isMobile ? 36 : 48 }}>
        <div>
          <div style={{ ...S.mono, fontSize: 11, color: p.accent, marginBottom: 20 }}>Technology, in its place</div>
          <h2 style={{ ...S.display, fontSize: vp.isPhone ? 30 : 42, lineHeight: 1.06, margin: 0, textWrap: 'balance' }}>
            Software supports the work. The physician is responsible for it.
          </h2>
        </div>
        <p style={{ fontSize: 16.5, lineHeight: 1.6, color: p.inkSoft, marginTop: 8, maxWidth: 560 }}>
          We use software, and yes, AI, where they help — organizing your laboratory and health data, surfacing patterns, keeping context available across visits. We use them where they earn their place, and not where they don't. Clinical interpretation and medical decisions stay with your physician.
        </p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: vp.isMobile ? '1fr' : '1fr 1fr', gap: 0, borderTop: `1px solid ${p.ink}22` }}>
        <div style={{ padding: vp.isMobile ? '28px 0' : '32px 36px 36px 0', borderRight: vp.isMobile ? 'none' : `1px solid ${p.ink}1a`, borderBottom: vp.isMobile ? `1px solid ${p.ink}14` : 'none' }}>
          <div style={{ ...S.mono, fontSize: 10.5, color: p.accent, marginBottom: 20 }}>Where it helps</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
            {TECH.helps.map((item) => (
              <li key={item} style={{ paddingLeft: 22, position: 'relative', fontSize: 15, lineHeight: 1.5, color: p.ink }}>
                <span style={{ position: 'absolute', left: 0, top: 11, width: 12, height: 1, background: p.accent }} />
                {item}
              </li>
            ))}
          </ul>
        </div>
        <div style={{ padding: vp.isMobile ? '28px 0 0' : '32px 0 36px 36px' }}>
          <div style={{ ...S.mono, fontSize: 10.5, color: p.muted, marginBottom: 20 }}>Where it doesn't</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
            {TECH.doesnt.map((item) => (
              <li key={item} style={{ paddingLeft: 22, position: 'relative', fontSize: 15, lineHeight: 1.5, color: p.inkSoft }}>
                <span style={{ position: 'absolute', left: 0, top: 11, width: 12, height: 1, background: p.muted, opacity: 0.6 }} />
                {item}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

// ── FRONTIER ────────────────────────────────────────────────────────────
const FRONTIER = [
  { n: '01', t: 'Metabolic therapy',
    body: 'The GLP-1, GIP, and glucagon-pathway class has reshaped what is possible in metabolic care. When clinically appropriate, we prescribe these medicines with the testing, dosing discipline, and longitudinal follow-up they deserve.' },
  { n: '02', t: 'Hormone biology',
    body: 'What we know about the male endocrine system has matured. We address hormone health as part of a comprehensive picture — physician-guided, individualized, never as a transactional optimization decision.' },
  { n: '03', t: 'Peptide science',
    body: 'An active area of physician-led inquiry. Where clinically appropriate and legally available, compounded therapies may be used under medical supervision — never as a storefront, never to chase outcomes the literature does not support.' },
  { n: '04', t: 'Longitudinal biomarkers',
    body: 'Serial laboratory data, supported by AI-assisted organization, lets us read patterns and trends across years — not single results in isolation. Interpretation stays with your physician.' },
];

function CMFrontier({ p, T, S, vp }) {
  const cols = vp.isPhone ? 1 : vp.isMobile ? 2 : 4;
  return (
    <section style={{
      borderBottom: `1px solid ${p.ink}14`,
      background: p.ink,
      color: p.cream,
      position: 'relative',
      overflow: 'hidden',
    }}>
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0,
        backgroundImage: `linear-gradient(${p.cream}07 1px, transparent 1px), linear-gradient(90deg, ${p.cream}07 1px, transparent 1px)`,
        backgroundSize: '48px 48px', pointerEvents: 'none',
      }} />
      <div style={{ ...S.container, padding: `${SY(vp, 120)}px ${PX(vp)}px`, position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: vp.isMobile ? '1fr' : '320px 1fr', gap: vp.isMobile ? 28 : 80, marginBottom: vp.isMobile ? 40 : 56 }}>
          <div>
            <div style={{ ...S.mono, fontSize: 11, color: p.accent, marginBottom: 20 }}>The frontier, with judgment</div>
            <h2 style={{ fontFamily: T.display, fontWeight: T.displayWeight, letterSpacing: T.displayTracking, fontSize: vp.isPhone ? 32 : 42, lineHeight: 1.06, margin: 0, color: p.cream, textWrap: 'balance' }}>
              Emerging medicine, responsibly applied.
            </h2>
          </div>
          <div>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: `${p.cream}d8`, marginTop: 8, marginBottom: 16, maxWidth: 580 }}>
              Men's health is entering a different era. Metabolic therapy is being rewritten by the GLP-1, GIP, and glucagon-pathway class. Hormone biology is better understood than a decade ago. Peptide science is moving from research toward early clinical application. Longitudinal biomarkers and AI-assisted data organization make it possible to read a man's body over time in ways that were not practical even a few years ago.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: `${p.cream}d8`, margin: 0, maxWidth: 580 }}>
              We are a practice for men who want to engage with these changes — thoughtfully, with a physician who can separate promise from hype.
            </p>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: 0, borderTop: `1px solid ${p.cream}22`, borderBottom: `1px solid ${p.cream}22` }}>
          {FRONTIER.map((f, i) => {
            const colInRow = i % cols;
            return (
            <div key={f.n} style={{
              padding: '30px 28px 36px',
              borderRight: colInRow < cols - 1 ? `1px solid ${p.cream}1c` : 'none',
              borderBottom: vp.isMobile && i < FRONTIER.length - (FRONTIER.length % cols || cols) ? `1px solid ${p.cream}1c` : 'none',
            }}>
              <div style={{ ...S.mono, fontSize: 10.5, color: p.accent, marginBottom: 18 }}>{f.n}</div>
              <h3 style={{ fontFamily: T.display, fontSize: 20, margin: 0, marginBottom: 14, lineHeight: 1.22, color: p.cream, fontWeight: T.displayWeight }}>{f.t}</h3>
              <p style={{ fontSize: 13.5, lineHeight: 1.6, color: `${p.cream}b8`, margin: 0 }}>{f.body}</p>
            </div>
          );})}
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: vp.isPhone ? '1fr' : '60px 1fr', gap: vp.isPhone ? 12 : 24, marginTop: 36, alignItems: 'baseline', paddingTop: 4 }}>
          <span style={{ ...S.mono, fontSize: 10.5, color: p.accent }}>OUR STANCE</span>
          <p style={{ fontFamily: T.display, fontSize: vp.isPhone ? 19 : 22, lineHeight: 1.4, color: p.cream, margin: 0, maxWidth: 920, fontWeight: T.displayWeight, letterSpacing: T.displayTracking, textWrap: 'pretty' }}>
            None of this is sold as a product. Every emerging therapy lives inside the same physician-led framework — appropriate testing, individualized risk assessment, informed consent, longitudinal follow-up. We are not a medication storefront. <span style={{ color: `${p.cream}b0` }}>We are also not stuck in yesterday's model of care.</span>
          </p>
        </div>
      </div>
    </section>
  );
}

// ── DOMAINS ─────────────────────────────────────────────────────────────
function CMDomains({ p, T, S, vp }) {
  const cols = vp.isPhone ? 1 : vp.isMobile ? 2 : 3;
  return (
    <section style={{ ...S.container, padding: `${SY(vp, 112)}px ${PX(vp)}px`, borderBottom: `1px solid ${p.ink}14`, background: p.paper }}>
      <div style={{ display: 'grid', gridTemplateColumns: vp.isMobile ? '1fr' : '320px 1fr', gap: vp.isMobile ? 28 : 80, marginBottom: vp.isMobile ? 40 : 56 }}>
        <div>
          <div style={{ ...S.mono, fontSize: 11, color: p.accent, marginBottom: 20 }}>Areas of attention</div>
          <h2 style={{ ...S.display, fontSize: vp.isPhone ? 32 : 42, lineHeight: 1.06, margin: 0, textWrap: 'balance' }}>
            Connected systems, considered together.
          </h2>
        </div>
        <p style={{ fontSize: 16.5, lineHeight: 1.6, color: p.inkSoft, marginTop: 8, maxWidth: 560 }}>
          We treat men's health as a connected whole. These are the areas your physician will be paying attention to — not as items on a service menu, but as parts of one record.
        </p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: `repeat(${cols}, 1fr)`, borderTop: `1px solid ${p.ink}1a` }}>
        {CARE_DOMAINS.map((d, i) => {
          const colInRow = i % cols;
          const lastRowStart = CARE_DOMAINS.length - (CARE_DOMAINS.length % cols || cols);
          return (
            <div key={d.n} style={{
              padding: '30px 28px 34px',
              borderRight: colInRow < cols - 1 ? `1px solid ${p.ink}1a` : 'none',
              borderBottom: i < lastRowStart ? `1px solid ${p.ink}1a` : 'none',
              background: p.cream,
            }}>
              <div style={{ ...S.mono, fontSize: 10.5, color: p.accent, marginBottom: 14 }}>{d.n}</div>
              <h3 style={{ ...S.display, fontSize: 22, margin: 0, marginBottom: 12, lineHeight: 1.2 }}>{d.title}</h3>
              <p style={{ fontSize: 14, lineHeight: 1.6, color: p.inkSoft, margin: 0 }}>{d.body}</p>
            </div>
          );
        })}
      </div>
    </section>
  );
}

// ── BOUNDARIES ──────────────────────────────────────────────────────────
function CMBoundaries({ p, T, S, vp }) {
  return (
    <section style={{ ...S.container, padding: `${SY(vp, 112)}px ${PX(vp)}px`, borderBottom: `1px solid ${p.ink}14` }}>
      <div style={{ display: 'grid', gridTemplateColumns: vp.isMobile ? '1fr' : '320px 1fr', gap: vp.isMobile ? 28 : 80, marginBottom: 36 }}>
        <div>
          <div style={{ ...S.mono, fontSize: 11, color: p.accent, marginBottom: 20 }}>What we are, and are not</div>
          <h2 style={{ ...S.display, fontSize: vp.isPhone ? 32 : 42, lineHeight: 1.06, margin: 0, textWrap: 'balance' }}>
            Care boundaries, plainly stated.
          </h2>
        </div>
        <p style={{ fontSize: 16.5, lineHeight: 1.6, color: p.inkSoft, marginTop: 8, maxWidth: 560 }}>
          Care has a deliberate scope. The model works because we are explicit about what membership is — and what it isn't.
        </p>
      </div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, borderTop: `1px solid ${p.ink}1a` }}>
        {BOUNDARIES.map((b, i) => (
          <li key={b} style={{
            display: 'grid', gridTemplateColumns: '60px 1fr', gap: 24,
            padding: '22px 0', borderBottom: `1px solid ${p.ink}10`,
            alignItems: 'baseline',
          }}>
            <span style={{ ...S.mono, fontSize: 10.5, color: p.accent }}>{String(i + 1).padStart(2, '0')}</span>
            <span style={{ fontSize: 17, lineHeight: 1.5, color: p.ink, fontFamily: T.display, fontWeight: T.displayWeight }}>{b}</span>
          </li>
        ))}
      </ul>
      <p style={{ marginTop: 32, fontSize: 12.5, lineHeight: 1.6, color: p.muted, maxWidth: 760 }}>
        <span style={{ ...S.mono, fontSize: 9.5, color: p.muted, marginRight: 10, padding: '2px 6px', border: `1px solid ${p.muted}55` }}>Capabilities</span>
        Routine blood and biomarker testing is coordinated through trusted laboratory partners. Specialized pathology and molecular diagnostic testing may be supported through affiliated CAP/CLIA laboratory infrastructure when clinically indicated.
      </p>
    </section>
  );
}

// ── CTA ─────────────────────────────────────────────────────────────────
function CMCTA({ p, T, S, tc, vp }) {
  return (
    <section style={{ ...S.container, padding: `${SY(vp, 96)}px ${PX(vp)}px`, borderBottom: `1px solid ${p.ink}14` }}>
      <div style={{ display: 'flex', alignItems: vp.isMobile ? 'flex-start' : 'center', justifyContent: 'space-between', gap: vp.isMobile ? 28 : 48, flexDirection: vp.isMobile ? 'column' : 'row' }}>
        <div>
          <div style={{ ...S.mono, fontSize: 11, color: p.accent, marginBottom: 16 }}>Begin</div>
          <h2 style={{ ...S.display, fontSize: vp.isPhone ? 32 : 46, lineHeight: 1.04, margin: 0, textWrap: 'balance' }}>Begin with a conversation.</h2>
          <p style={{ fontSize: 17, color: p.inkSoft, marginTop: 14, marginBottom: 0, maxWidth: 600 }}>
            Concierge membership is by application. The first step is a short conversation about fit — followed, when right for both of us, by your in-person evaluation in Florida.
          </p>
        </div>
        <div style={{ display: 'flex', gap: 12, flexShrink: 0, width: vp.isPhone ? '100%' : 'auto' }}>
          <a href="EMH_06_Apply_For_Membership.html" style={{ fontFamily: T.body, fontSize: 15, fontWeight: 500, padding: '16px 28px', background: p.ink, color: p.cream, border: 'none', borderRadius: 2, cursor: 'pointer', textDecoration: 'none', display: 'inline-block', textAlign: 'center', width: vp.isPhone ? '100%' : 'auto' }}>{tc.ctaPrimary} →</a>
        </div>
      </div>
    </section>
  );
}

// ── FOOTER ──────────────────────────────────────────────────────────────
function CMFooter({ p, T, S, vp }) {
  const cols = [
    ['Practice',  ['Approach', 'Care team', 'Membership', 'Insights']],
    ['Care',      ['Preventive', 'Hormone health', 'Metabolic', 'Sexual', 'Cognitive', 'Longevity']],
    ['Resources', ['How it works', 'Membership', 'Lab partners', 'FAQ']],
    ['Company',   ['About', 'Careers', 'Press', 'Contact']],
  ];
  const gridCols = vp.isPhone ? '1fr 1fr' : vp.isMobile ? 'repeat(3, 1fr)' : '1.4fr repeat(4, 1fr)';
  return (
    <footer style={{ background: p.cream, padding: `${SY(vp, 72)}px ${PX(vp)}px 36px`, maxWidth: 1440, margin: '0 auto' }}>
      <div style={{ display: 'grid', gridTemplateColumns: gridCols, gap: vp.isMobile ? 32 : 48, marginBottom: vp.isMobile ? 40 : 60 }}>
        <div style={{ gridColumn: vp.isMobile ? '1 / -1' : 'auto' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
            <EMHMark color={p.ink} size={26} />
            <span style={{ fontFamily: T.display, fontSize: 17, fontWeight: 500 }}>Every Man's Health</span>
          </div>
          <p style={{ fontSize: 13.5, lineHeight: 1.6, color: p.inkSoft, maxWidth: 280, margin: 0 }}>
            A Florida concierge men's health practice. Physician-led, lab-guided, data-informed — by application.
          </p>
          <div style={{ marginTop: 18, fontSize: 12.5, lineHeight: 1.7, color: p.inkSoft }}>
            9401 SW Highway 200, STE 502<br />Ocala, FL 34481-9650<br />
            <span style={{ color: p.muted }}>Tel</span> (352) 861-2115 &nbsp;·&nbsp; <span style={{ color: p.muted }}>Fax</span> (352) 854-5726<br />
            <span style={{ color: p.muted }}>Mon–Thu</span> 8:00 AM – 3:30 PM<br />
            <a href="mailto:membership@everymanshealth.com" style={{ color: 'inherit', textDecoration: 'none' }}>membership@everymanshealth.com</a>
          </div>
        </div>
        {cols.map(([title, items]) => (
          <div key={title}>
            <div style={{ ...S.mono, fontSize: 10, color: p.muted, marginBottom: 14 }}>{title}</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
              {items.map((i) => <li key={i} style={{ fontSize: 13.5, color: p.inkSoft }}>{i}</li>)}
            </ul>
          </div>
        ))}
      </div>
      <div style={{ borderTop: `1px solid ${p.ink}1a`, paddingTop: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 32, flexDirection: vp.isMobile ? 'column' : 'row' }}>
        <p style={{ fontSize: 11.5, lineHeight: 1.55, color: p.muted, margin: 0, maxWidth: 760 }}>
          Information presented on this site is for educational purposes and does not constitute medical advice. Routine blood and biomarker testing is coordinated through trusted laboratory partners; specialized pathology and molecular diagnostic testing may be supported through affiliated CAP/CLIA laboratory infrastructure when clinically indicated. Technology, including AI-assisted organization of laboratory and health data, supports physician review; clinical interpretation and treatment decisions are made by licensed physicians on a case-by-case basis. Compounded medications, when used, are dispensed by 503A pharmacies in compliance with applicable regulations. Practice based in Florida; telehealth follow-up available where licensed.
        </p>
        <div style={{ ...S.mono, fontSize: 10, color: p.muted, textAlign: vp.isMobile ? 'left' : 'right' }}>
          © 2026 Every Man's Health. All rights reserved.<br /><a href="EMH_07_Privacy_Policy.html" style={{ color: 'inherit', textDecoration: 'none' }}>Privacy Policy</a> · <a href="EMH_08_Terms_Of_Use.html" style={{ color: 'inherit', textDecoration: 'none' }}>Terms of Use</a> · <a href="EMH_09_HIPAA_Notice.html" style={{ color: 'inherit', textDecoration: 'none' }}>HIPAA Notice</a><br /><a href="EMH_10_Accessibility_Statement.html" style={{ color: 'inherit', textDecoration: 'none' }}>Accessibility</a> · <a href="EMH_11_Website_Disclaimer.html" style={{ color: 'inherit', textDecoration: 'none' }}>Website Disclaimer</a> · <a href="EMH_12_Electronic_Communications.html" style={{ color: 'inherit', textDecoration: 'none' }}>Electronic Communications</a>
        </div>
      </div>
    </footer>
  );
}

// Wait for shared/tweaks globals before mounting.
function __mountCM() {
  if (window.PALETTES && window.TYPES && window.useTweaks && window.TweaksPanel && window.EMHMark && window.toneCopy && window.useViewport) {
    try {
      ReactDOM.createRoot(document.getElementById('root')).render(<CareModelPage />);
    } catch (e) {
      document.getElementById('root').innerHTML = '<pre style="padding:24px;color:#900;white-space:pre-wrap;font:12px ui-monospace">' + (e && e.stack || e) + '</pre>';
      throw e;
    }
  } else {
    setTimeout(__mountCM, 30);
  }
}
__mountCM();
