// membership.jsx — Every Man's Health · Membership page.
// Source of truth: homepage.jsx + care-model.jsx in this folder.
// Tone: premium, calm, physician-led, selective without elitism.
// Guardrails: no pricing table, no medication storefront, AI supportive only,
// lab language = lab-guided / coordinated.
//
// 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));

// ── Copy data ───────────────────────────────────────────────────────────

const M_INCLUDES = [
  { n: '01', t: 'Initial in-person physician evaluation',
    body: 'A long first visit at our Florida practice — medical history, physical examination, and an unhurried conversation that grounds the relationship.' },
  { n: '02', t: 'Coordinated laboratory testing',
    body: 'Routine blood and biomarker testing coordinated through trusted laboratory partners for your convenience. Your physician selects what to order.' },
  { n: '03', t: 'Physician interpretation & personalized planning',
    body: 'Your physician reads your record with you and authors a plan you can actually follow — lifestyle, monitoring, and therapeutics only where clinically appropriate.' },
  { n: '04', t: 'Longitudinal health record & trend review',
    body: 'A single record, read across time. Each panel is interpreted against the ones before it, supported by AI-assisted organization of your data.' },
  { n: '05', t: 'Telehealth-supported follow-up',
    body: 'Scheduled video visits between in-person appointments, when appropriate to your plan. A real physician who knows your file.' },
  { n: '06', t: 'Periodic reassessment & plan refinement',
    body: 'We re-examine the whole picture on a deliberate cadence — what changed, what held, what to watch — and refine the plan together.' },
  { n: '07', t: 'Review of emerging therapies',
    body: 'When clinically appropriate and legally available, we discuss emerging options within a physician-guided framework — never as storefront products.' },
];

const M_AUDIENCE = [
  { range: '30 – 44', focus: 'Baseline · Prevention · Performance',
    body: 'Establishing a meaningful baseline, prevention, energy and fitness, fertility or sexual health concerns, and early metabolic risk — the inputs that compound the longest.' },
  { range: '45 – 59', focus: 'Metabolic · Hormones · Vitality',
    body: 'Metabolic health, hormone questions, cardiovascular risk, sexual health, body composition, sleep, stress, and sustained performance — examined together, not in isolation.' },
  { range: '60 +', focus: 'Healthspan · Function · Cognition',
    body: 'Healthspan and function, cognition, strength preservation, urinary and sexual health, vitality and resilience — the areas with the highest leverage on quality of life.' },
];

const M_NOT = [
  'Not urgent care or emergency care.',
  'Not a replacement for primary care or appropriate specialists.',
  'Not an insurance-billed sick-care model.',
  'Not a medication-first program.',
  'Not a TRT, peptide, or weight-loss storefront.',
  'Not a promise of specific outcomes.',
];

const M_STEPS = [
  { n: '01', t: 'Start the conversation',
    body: 'A brief, no-pressure conversation about what you\'re looking for and whether our model is the right fit.' },
  { n: '02', t: 'Complete a focused pre-assessment',
    body: 'A short, structured questionnaire about your history, goals, and current care — so the first visit starts informed.' },
  { n: '03', t: 'Schedule the in-person evaluation',
    body: 'Your initial physician evaluation at our Florida practice — the real beginning of the relationship.' },
  { n: '04', t: 'Decide together',
    body: 'After the evaluation, we decide together whether ongoing membership is appropriate for you. No obligation either way.' },
];

const M_FAQ = [
  { q: 'Do I need to live in Florida?',
    a: 'Membership begins with an in-person evaluation at our Florida practice, so members are based in or able to travel to Florida for their initial visit and periodic in-person reassessments. Telehealth supports follow-up between those visits where licensing allows.' },
  { q: 'Is this telehealth or in-person?',
    a: 'Both, in a deliberate order. Care begins and is anchored in person. Telehealth supports follow-up between visits when it is appropriate — it is not the primary model of care.' },
  { q: 'Do you accept insurance?',
    a: 'No. Every Man\'s Health is a direct-pay concierge program. We are not an insurance-billed sick-care practice, and membership does not replace your insurance for hospital, emergency, or specialty care.' },
  { q: 'Are labs included?',
    a: 'Membership is the physician relationship — visits, interpretation, planning, record, and follow-up. Routine blood and biomarker testing is coordinated through trusted laboratory partners; laboratory costs are reviewed with you before testing is ordered.' },
  { q: 'Do you prescribe testosterone or other medications?',
    a: 'Therapeutics are one tool among many, and never the starting point. When a medication — including hormone-related therapy — is clinically appropriate, your physician may prescribe it as part of a broader plan, with proper evaluation, testing, and follow-up. We are not a medication storefront.' },
  { q: 'Is this primary care?',
    a: 'Membership complements, and does not replace, primary care or appropriate specialists. Many members keep a primary-care physician; we coordinate where it makes sense. We are a proactive, longitudinal layer focused on optimization and prevention.' },
  { q: 'What happens after I apply?',
    a: 'We start with a short conversation, then a focused pre-assessment, then your in-person evaluation. After that, we decide together whether ongoing membership is the right fit. There is no obligation to continue.' },
];

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

function MembershipPage() {
  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}>
      <MNav p={p} T={T} S={S} tc={tc} vp={vp} />
      <MHero p={p} T={T} S={S} tc={tc} vp={vp} />
      <MMeaning p={p} T={T} S={S} vp={vp} />
      <MIncludes p={p} T={T} S={S} vp={vp} />
      <MAudience p={p} T={T} S={S} vp={vp} />
      <MNot p={p} T={T} S={S} vp={vp} />
      <MProcess p={p} T={T} S={S} vp={vp} />
      <MFees p={p} T={T} S={S} vp={vp} />
      <MFrontier p={p} T={T} S={S} vp={vp} />
      <MFAQ p={p} T={T} S={S} vp={vp} />
      <MCTA p={p} T={T} S={S} tc={tc} vp={vp} />
      <MFooter 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 MNav({ p, T, S, tc, vp }) {
  const [hover, setHover] = React.useState(null);
  const [open, setOpen] = React.useState(false);
  const current = 'Membership';
  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 MHero({ 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 }} />
        Membership · By application · Limited panel
      </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 ? 32 : vp.isMobile ? 44 : vp.isTablet ? 52 : 60, lineHeight: 1.06, margin: 0, textWrap: 'balance' }}>
          Membership for men who want a <span style={{ fontStyle: T.name === 'Editorial' ? 'italic' : 'normal', color: p.inkSoft }}>more personal, proactive relationship with their physician</span>.
        </h1>
        <p style={{ fontSize: 17, lineHeight: 1.6, color: p.inkSoft, margin: 0, maxWidth: 460 }}>
          Membership is by application. It is designed for men who want a physician-led, longitudinal, proactive relationship — not episodic sick-care that begins only once something is already wrong.
        </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' }}>Begin your application →</a>
        <a href="EMH_03_Care_Model.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' }}>See the care model</a>
      </div>
    </section>
  );
}

// ── WHAT MEMBERSHIP MEANS ───────────────────────────────────────────────
function MMeaning({ 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={{ ...S.mono, fontSize: 11, color: p.accent, marginBottom: 36 }}>What membership means</div>
      <div style={{ display: 'grid', gridTemplateColumns: vp.isMobile ? '1fr' : '1.4fr 1fr', gap: vp.isMobile ? 32 : 80 }}>
        <p style={{ ...S.display, fontSize: vp.isPhone ? 25 : vp.isMobile ? 30 : 34, lineHeight: 1.24, margin: 0, color: p.ink, fontWeight: T.displayWeight, letterSpacing: T.displayTracking, textWrap: 'pretty' }}>
          Membership is not simply access to visits or medications. It is a <em style={{ color: p.inkSoft, fontStyle: T.name === 'Editorial' ? 'italic' : 'normal' }}>longitudinal physician relationship</em> — built around proactive evaluation, coordinated labs, a personalized plan, and ongoing monitoring.
        </p>
        <div>
          <p style={{ fontSize: 16, lineHeight: 1.65, color: p.inkSoft, margin: 0, marginBottom: 18 }}>
            Most medical care is episodic: you arrive when something is wrong, you're treated, you leave. Membership is the opposite — a continuous relationship with a physician who knows your file, watches your trends, and helps you act before problems take shape.
          </p>
          <p style={{ fontSize: 16, lineHeight: 1.65, color: p.inkSoft, margin: 0 }}>
            It is a deliberate, year-over-year model of attention. Your record carries forward. Your plan refines rather than restarts.
          </p>
        </div>
      </div>
    </section>
  );
}

// ── WHAT MEMBERSHIP INCLUDES ────────────────────────────────────────────
function MIncludes({ p, T, S, vp }) {
  const cols = vp.isPhone ? 1 : vp.isMobile ? 2 : 3;
  // The trailing note spans the empty cells on the last row so the grid
  // stays visually complete. On phone (1 col) it's just a full-width row.
  const noteSpan = cols === 3 ? 2 : 1;
  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 }}>What membership includes</div>
          <h2 style={{ ...S.display, fontSize: vp.isPhone ? 32 : 42, lineHeight: 1.06, margin: 0, textWrap: 'balance' }}>
            The physician relationship, in full.
          </h2>
        </div>
        <p style={{ fontSize: 16.5, lineHeight: 1.6, color: p.inkSoft, marginTop: 8, maxWidth: 560 }}>
          Membership covers the physician relationship and everything that makes it work — the visits, the interpretation, the plan, the record, and the follow-up. Laboratory work and any therapeutics are coordinated around it.
        </p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: `repeat(${cols}, 1fr)`, borderTop: `1px solid ${p.ink}1a`, borderLeft: vp.isPhone ? 'none' : `1px solid ${p.ink}1a` }}>
        {M_INCLUDES.map((it) => (
          <div key={it.n} style={{
            padding: '28px 26px 32px',
            borderRight: vp.isPhone ? 'none' : `1px solid ${p.ink}1a`,
            borderBottom: `1px solid ${p.ink}1a`,
            background: p.cream,
          }}>
            <div style={{ ...S.mono, fontSize: 10.5, color: p.accent, marginBottom: 16 }}>{it.n}</div>
            <h3 style={{ ...S.display, fontSize: 19, margin: 0, marginBottom: 12, lineHeight: 1.22 }}>{it.t}</h3>
            <p style={{ fontSize: 13.5, lineHeight: 1.6, color: p.inkSoft, margin: 0 }}>{it.body}</p>
          </div>
        ))}
        <div style={{ padding: '28px 26px 32px', borderRight: vp.isPhone ? 'none' : `1px solid ${p.ink}1a`, borderBottom: `1px solid ${p.ink}1a`, background: p.paper, gridColumn: `span ${noteSpan}`, display: 'flex', alignItems: 'center' }}>
          <p style={{ fontSize: 14.5, lineHeight: 1.6, color: p.muted, margin: 0, fontStyle: T.name === 'Editorial' ? 'italic' : 'normal', fontFamily: T.display }}>
            Every element exists to support one thing: a physician who knows you well enough to help you decide what's worth doing — and what isn't.
          </p>
        </div>
      </div>
    </section>
  );
}

// ── WHO MEMBERSHIP IS FOR ───────────────────────────────────────────────
function MAudience({ 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 ? 40 : 56 }}>
        <div>
          <div style={{ ...S.mono, fontSize: 11, color: p.accent, marginBottom: 20 }}>Who membership is for</div>
          <h2 style={{ ...S.display, fontSize: vp.isPhone ? 32 : 42, lineHeight: 1.06, margin: 0, textWrap: 'balance' }}>
            The same relationship, at every stage.
          </h2>
        </div>
        <p style={{ fontSize: 16.5, lineHeight: 1.6, color: p.inkSoft, marginTop: 8, maxWidth: 560 }}>
          Men arrive at different ages with different questions. These are areas of attention, not promises — a sense of what your physician is likely to focus on alongside you.
        </p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: vp.isMobile ? '1fr' : 'repeat(3, 1fr)', gap: vp.isMobile ? 16 : 28 }}>
        {M_AUDIENCE.map((s) => (
          <div key={s.range} style={{ background: p.paper, border: `1px solid ${p.ink}1f`, padding: '32px 28px 36px' }}>
            <div style={{ ...S.mono, fontSize: 10, color: p.muted, marginBottom: 12 }}>AGE</div>
            <div style={{ fontFamily: T.display, fontSize: 44, color: p.ink, lineHeight: 1, marginBottom: 18, fontWeight: T.displayWeight, letterSpacing: T.displayTracking }}>{s.range}</div>
            <div style={{ ...S.mono, fontSize: 10.5, color: p.accent, marginBottom: 14 }}>{s.focus}</div>
            <p style={{ fontSize: 14, lineHeight: 1.6, color: p.inkSoft, margin: 0 }}>{s.body}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

// ── WHAT MEMBERSHIP IS NOT ──────────────────────────────────────────────
function MNot({ p, T, S, vp }) {
  const cols = vp.isPhone ? 1 : 2;
  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: 36 }}>
        <div>
          <div style={{ ...S.mono, fontSize: 11, color: p.accent, marginBottom: 20 }}>What membership is not</div>
          <h2 style={{ ...S.display, fontSize: vp.isPhone ? 32 : 42, lineHeight: 1.06, margin: 0, textWrap: 'balance' }}>
            Clarity, in both directions.
          </h2>
        </div>
        <p style={{ fontSize: 16.5, lineHeight: 1.6, color: p.inkSoft, marginTop: 8, maxWidth: 560 }}>
          We would rather be clear now than disappoint later. Membership is a specific thing, with a deliberate scope. If what you need is something on this list, we'll tell you plainly — and point you in the right direction.
        </p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: 0, borderTop: `1px solid ${p.ink}22` }}>
        {M_NOT.map((item, i) => {
          const colInRow = i % cols;
          return (
          <div key={item} style={{
            display: 'grid', gridTemplateColumns: '60px 1fr', gap: 20, alignItems: 'baseline',
            padding: '24px 0',
            paddingLeft: (cols === 2 && colInRow === 1) ? 36 : 0,
            borderRight: (cols === 2 && colInRow === 0) ? `1px solid ${p.ink}1a` : 'none',
            borderBottom: i < M_NOT.length - cols ? `1px solid ${p.ink}10` : 'none',
          }}>
            <span style={{ ...S.mono, fontSize: 10.5, color: p.muted }}>{String(i + 1).padStart(2, '0')}</span>
            <span style={{ fontSize: 17, lineHeight: 1.45, color: p.ink, fontFamily: T.display, fontWeight: T.displayWeight }}>{item}</span>
          </div>
        );})}
      </div>
    </section>
  );
}

// ── APPLICATION PROCESS ─────────────────────────────────────────────────
function MProcess({ 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: 'flex', alignItems: vp.isMobile ? 'flex-start' : 'baseline', justifyContent: 'space-between', marginBottom: vp.isMobile ? 40 : 56, gap: vp.isMobile ? 16 : 40, flexDirection: vp.isMobile ? 'column' : 'row' }}>
        <div>
          <div style={{ ...S.mono, fontSize: 11, color: p.accent, marginBottom: 20 }}>The application process</div>
          <h2 style={{ ...S.display, fontSize: vp.isPhone ? 32 : 42, lineHeight: 1.06, margin: 0, textWrap: 'balance' }}>How to begin.</h2>
        </div>
        <div style={{ ...S.mono, fontSize: 10.5, color: p.muted, alignSelf: vp.isMobile ? 'flex-start' : 'flex-end', flexShrink: 0 }}>Four steps · No obligation</div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: `repeat(${cols}, 1fr)`, borderTop: `1px solid ${p.ink}22` }}>
        {M_STEPS.map((s, i) => {
          const colInRow = i % cols;
          return (
          <div key={s.n} style={{ padding: '32px 28px 36px', borderRight: colInRow < cols - 1 ? `1px solid ${p.ink}1a` : 'none', borderBottom: vp.isMobile && i < M_STEPS.length - (M_STEPS.length % cols || cols) ? `1px solid ${p.ink}14` : 'none' }}>
            <div style={{ ...S.mono, fontSize: 10.5, color: p.accent, marginBottom: 22 }}>{s.n}</div>
            <h3 style={{ ...S.display, fontSize: 20, margin: 0, marginBottom: 14, lineHeight: 1.2 }}>{s.t}</h3>
            <p style={{ fontSize: 14, lineHeight: 1.6, color: p.inkSoft, margin: 0 }}>{s.body}</p>
          </div>
        );})}
      </div>
    </section>
  );
}

// ── FEES & EXPECTATIONS ─────────────────────────────────────────────────
function MFees({ 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: 'center' }}>
        <div>
          <div style={{ ...S.mono, fontSize: 11, color: p.accent, marginBottom: 20 }}>Fees & expectations</div>
          <h2 style={{ ...S.display, fontSize: vp.isPhone ? 30 : 38, lineHeight: 1.06, margin: 0, marginBottom: 22, textWrap: 'balance' }}>
            Direct-pay, and transparent about it.
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.65, color: p.inkSoft, marginBottom: 18 }}>
            Every Man's Health is a direct-pay concierge program. We don't bill insurance, and we don't build our model around what a payer will or won't cover.
          </p>
          <p style={{ fontSize: 16, lineHeight: 1.65, color: p.inkSoft, margin: 0 }}>
            Membership fees, laboratory costs, medications, imaging, outside services, and any coordinated third-party services are reviewed with you before enrollment, or before they are ordered. You will not be surprised by a charge.
          </p>
        </div>
        <div style={{ background: p.cream, border: `1px solid ${p.ink}22`, padding: '32px 32px 28px' }}>
          <div style={{ ...S.mono, fontSize: 10, color: p.muted, marginBottom: 22 }}>Reviewed before it occurs</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column' }}>
            {[
              'Membership fee',
              'Coordinated laboratory testing',
              'Medications, when prescribed',
              'Imaging & outside services',
              'Coordinated third-party services',
            ].map((item, i, arr) => (
              <li key={item} style={{
                display: 'flex', alignItems: 'baseline', gap: 14,
                padding: '14px 0',
                borderBottom: i < arr.length - 1 ? `1px solid ${p.ink}12` : 'none',
              }}>
                <span style={{ ...S.mono, fontSize: 9.5, color: p.accent, minWidth: 22 }}>{String(i + 1).padStart(2, '0')}</span>
                <span style={{ fontSize: 15, color: p.ink }}>{item}</span>
              </li>
            ))}
          </ul>
          <p style={{ marginTop: 20, paddingTop: 16, borderTop: `1px solid ${p.ink}1a`, fontSize: 12.5, lineHeight: 1.55, color: p.muted, margin: '20px 0 0' }}>
            Specific fees are discussed during the application conversation, in the context of your situation.
          </p>
        </div>
      </div>
    </section>
  );
}

// ── RESPONSIBLE INNOVATION (carries Care Model frontier language) ───────
function MFrontier({ p, T, S, vp }) {
  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, 100)}px ${PX(vp)}px`, position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: vp.isMobile ? '1fr' : '1fr 1.2fr', gap: vp.isMobile ? 28 : 80, alignItems: 'center' }}>
          <div>
            <div style={{ ...S.mono, fontSize: 11, color: p.accent, marginBottom: 20 }}>Responsible innovation</div>
            <h2 style={{ fontFamily: T.display, fontWeight: T.displayWeight, letterSpacing: T.displayTracking, fontSize: vp.isPhone ? 30 : 38, lineHeight: 1.08, margin: 0, color: p.cream, textWrap: 'balance' }}>
              Medically responsible. Not timid.
            </h2>
          </div>
          <div>
            <p style={{ fontSize: 16.5, lineHeight: 1.65, color: `${p.cream}d8`, marginTop: 0, marginBottom: 16, maxWidth: 580 }}>
              We are engaged with the evolving frontier of men's health — metabolic medicine, hormone biology, peptide science, longitudinal biomarkers, and technology-supported care. Members increasingly want a physician who understands these developments and can help separate promise from hype.
            </p>
            <p style={{ fontSize: 16.5, lineHeight: 1.65, color: `${p.cream}d8`, margin: 0, maxWidth: 580 }}>
              Emerging therapies are considered only within a physician-guided framework — with appropriate evaluation, testing, legal availability, individualized risk assessment, and longitudinal follow-up. Never as storefront products, never as guaranteed outcomes.
            </p>
            <a href="EMH_03_Care_Model.html" style={{ display: 'inline-block', marginTop: 24, fontFamily: T.mono, fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: p.accent, textDecoration: 'none', borderBottom: `1px solid ${p.accent}66`, paddingBottom: 4 }}>
              Read our full stance in the care model →
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── FAQ ─────────────────────────────────────────────────────────────────
function MFAQ({ p, T, S, vp }) {
  const [open, setOpen] = React.useState(0);
  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 }}>
        <div>
          <div style={{ ...S.mono, fontSize: 11, color: p.accent, marginBottom: 20 }}>Common questions</div>
          <h2 style={{ ...S.display, fontSize: vp.isPhone ? 32 : 42, lineHeight: 1.06, margin: 0, textWrap: 'balance' }}>
            Answered plainly.
          </h2>
        </div>
        <div style={{ borderTop: `1px solid ${p.ink}22` }}>
          {M_FAQ.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={f.q} style={{ borderBottom: `1px solid ${p.ink}14` }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)}
                  style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24,
                           padding: '24px 0', background: 'transparent', border: 'none', cursor: 'pointer', textAlign: 'left', fontFamily: 'inherit', color: p.ink }}>
                  <span style={{ fontFamily: T.display, fontSize: vp.isPhone ? 17 : 20, fontWeight: T.displayWeight, letterSpacing: T.displayTracking, lineHeight: 1.25 }}>{f.q}</span>
                  <span style={{ flexShrink: 0, width: 24, height: 24, position: 'relative', color: p.accent }}>
                    <span style={{ position: 'absolute', top: '50%', left: '50%', width: 13, height: 1.5, background: 'currentColor', transform: 'translate(-50%,-50%)' }} />
                    <span style={{ position: 'absolute', top: '50%', left: '50%', width: 13, height: 1.5, background: 'currentColor', transform: `translate(-50%,-50%) rotate(${isOpen ? 0 : 90}deg)`, transition: 'transform .2s' }} />
                  </span>
                </button>
                <div style={{ maxHeight: isOpen ? 320 : 0, overflow: 'hidden', transition: 'max-height .28s ease' }}>
                  <p style={{ fontSize: 15, lineHeight: 1.65, color: p.inkSoft, margin: 0, paddingBottom: 26, maxWidth: 680 }}>{f.a}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ── FINAL CTA ───────────────────────────────────────────────────────────
function MCTA({ 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 ? 30 : 46, lineHeight: 1.04, margin: 0, textWrap: 'balance' }}>Membership begins with a conversation.</h2>
          <p style={{ fontSize: 17, color: p.inkSoft, marginTop: 14, marginBottom: 0, maxWidth: 600 }}>
            A short conversation about fit, then a focused pre-assessment, then your in-person evaluation in Florida. We decide together from there.
          </p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, flexShrink: 0, alignItems: 'flex-start', width: vp.isMobile ? '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', width: '100%', textDecoration: 'none', display: 'inline-block', textAlign: 'center', boxSizing: 'border-box' }}>Begin your application →</a>
          <a href="EMH_03_Care_Model.html" style={{ fontFamily: T.body, fontSize: 15, fontWeight: 500, padding: '15px 26px', background: 'transparent', color: p.ink, border: `1px solid ${p.ink}44`, borderRadius: 2, cursor: 'pointer', textDecoration: 'none', textAlign: 'center', width: '100%', boxSizing: 'border-box' }}>Review the care model</a>
        </div>
      </div>
    </section>
  );
}

// ── FOOTER ──────────────────────────────────────────────────────────────
function MFooter({ p, T, S, vp }) {
  const cols = [
    ['Practice',  ['Approach', 'Care team', 'Membership', 'Insights']],
    ['Care',      ['Preventive', 'Hormone health', 'Metabolic', 'Sexual', 'Cognitive', 'Longevity']],
    ['Resources', ['Care model', '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 __mountM() {
  if (window.PALETTES && window.TYPES && window.useTweaks && window.TweaksPanel && window.EMHMark && window.toneCopy && window.useViewport) {
    try {
      ReactDOM.createRoot(document.getElementById('root')).render(<MembershipPage />);
    } 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(__mountM, 30);
  }
}
__mountM();
