// content-howto.jsx — How-to and usage guide pages for InfraredSaunaSpot
// Depends on: components.jsx globals

const { useState } = React;

// ============================================================
// SHARED SUB-COMPONENTS (howto-local)
// ============================================================

function HowtoQuickAnswer({ children }) {
  return (
    <div style={{
      padding: '22px 26px',
      background: 'var(--paper-2)',
      border: '1px solid var(--line)',
      borderLeft: '4px solid var(--ember-deep)',
      borderRadius: 14,
      margin: '28px 0',
    }}>
      <div className="eyebrow" style={{ marginBottom: 10 }}>Quick answer</div>
      <div style={{ fontFamily: 'var(--serif)', fontSize: 17, lineHeight: 1.65, color: 'var(--text)' }}>
        {children}
      </div>
    </div>
  );
}

function ExperienceCard({ rank, label, temp, duration, note }) {
  return (
    <div style={{
      background: 'var(--paper-2)',
      border: '1px solid var(--line)',
      borderRadius: 14,
      padding: 22,
    }}>
      <div className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ember-deep)', marginBottom: 8 }}>{rank}</div>
      <div style={{ fontFamily: 'var(--serif)', fontSize: 21, letterSpacing: '-0.015em', marginBottom: 14, lineHeight: 1.2 }}>{label}</div>
      <div style={{ display: 'flex', gap: 12, marginBottom: 14, flexWrap: 'wrap' }}>
        <span className="chip">{temp}</span>
        <span className="chip">{duration}</span>
      </div>
      <div style={{ fontSize: 13.5, color: 'var(--text-2)', lineHeight: 1.6 }}>{note}</div>
    </div>
  );
}

function HowtoCallout({ label, children }) {
  return (
    <div style={{
      padding: '20px 24px',
      background: 'var(--paper-2)',
      border: '1px solid var(--line)',
      borderLeft: '3px solid var(--line)',
      borderRadius: 10,
      margin: '22px 0',
    }}>
      {label && <div className="eyebrow" style={{ marginBottom: 8 }}>{label}</div>}
      <div style={{ fontSize: 14.5, color: 'var(--text-2)', lineHeight: 1.65 }}>{children}</div>
    </div>
  );
}

function MistakeItem({ label, children }) {
  return (
    <div style={{
      display: 'flex', gap: 18, padding: '18px 0',
      borderTop: '1px solid var(--line)',
    }}>
      <div className="mono" style={{
        flexShrink: 0, fontSize: 10, letterSpacing: '0.12em',
        textTransform: 'uppercase', color: 'var(--ember-deep)',
        paddingTop: 2, width: 110,
      }}>{label}</div>
      <div style={{ flex: 1, fontSize: 14.5, color: 'var(--text-2)', lineHeight: 1.6 }}>{children}</div>
    </div>
  );
}

function RankedWearItem({ rank, title, subtitle }) {
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '40px 1fr',
      gap: 16, background: 'var(--paper-2)',
      border: '1px solid var(--line)', borderRadius: 14, padding: 20,
    }}>
      <div style={{
        fontFamily: 'var(--serif)', fontSize: 32, lineHeight: 1,
        color: rank === 1 ? 'var(--ember-deep)' : 'var(--text-3)',
        letterSpacing: '-0.02em',
      }}>{rank}</div>
      <div>
        <div style={{ fontFamily: 'var(--sans)', fontWeight: 600, fontSize: 15, marginBottom: 5 }}>{title}</div>
        <div style={{ fontSize: 13.5, color: 'var(--text-2)', lineHeight: 1.6 }}>{subtitle}</div>
      </div>
    </div>
  );
}

function GoalTableRow({ goal, duration, temp, notes, isLast }) {
  return (
    <tr style={{ borderBottom: isLast ? 'none' : '1px solid var(--line)' }}>
      <td style={{ padding: '13px 16px', fontFamily: 'var(--sans)', fontWeight: 600, fontSize: 14, color: 'var(--text)', verticalAlign: 'top' }}>{goal}</td>
      <td style={{ padding: '13px 16px', fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.04em', color: 'var(--ember-deep)', whiteSpace: 'nowrap', verticalAlign: 'top' }}>{duration}</td>
      <td style={{ padding: '13px 16px', fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.04em', color: 'var(--text-2)', whiteSpace: 'nowrap', verticalAlign: 'top' }}>{temp}</td>
      <td style={{ padding: '13px 16px', fontSize: 13.5, color: 'var(--text-2)', lineHeight: 1.55, verticalAlign: 'top' }}>{notes}</td>
    </tr>
  );
}

function FreqTableRow({ freq, effect, isLast }) {
  return (
    <tr style={{ borderBottom: isLast ? 'none' : '1px solid var(--line)' }}>
      <td style={{ padding: '13px 16px', fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.06em', color: 'var(--ember-deep)', whiteSpace: 'nowrap', verticalAlign: 'top' }}>{freq}</td>
      <td style={{ padding: '13px 16px', fontSize: 14, lineHeight: 1.55, color: 'var(--text)', verticalAlign: 'top' }}>{effect}</td>
    </tr>
  );
}

function HowtoRailNewsletter() {
  return (
    <div style={{ padding: '22px 20px', background: 'var(--ink)', borderRadius: 14, marginBottom: 22 }}>
      <div className="eyebrow" style={{ color: 'var(--ember)', marginBottom: 10 }}>The Heat Lab</div>
      <div style={{ fontFamily: 'var(--serif)', fontSize: 18, lineHeight: 1.25, marginBottom: 10, letterSpacing: '-0.012em', color: 'var(--paper)' }}>
        New research, once a week.
      </div>
      <p style={{ fontSize: 13, color: 'rgba(255,255,255,0.6)', lineHeight: 1.5, marginBottom: 14 }}>
        We read the sauna literature so you don't have to. No supplements to sell. No brand deals.
      </p>
      <input placeholder="Your email" style={{
        width: '100%', boxSizing: 'border-box', padding: '10px 14px',
        border: '1px solid rgba(255,255,255,0.15)', borderRadius: 8, fontSize: 13.5,
        background: 'rgba(255,255,255,0.08)', color: 'var(--paper)', marginBottom: 8,
        outline: 'none', fontFamily: 'var(--sans)',
      }} />
      <button className="btn btn-ember" style={{ width: '100%', justifyContent: 'center', padding: '10px 0' }}>
        Subscribe
      </button>
    </div>
  );
}

function HowtoRailProductCard() {
  return (
    <div style={{
      position: 'sticky', top: 80,
      padding: '20px', border: '1px solid var(--line)',
      borderRadius: 14, background: 'var(--paper)',
    }}>
      <div className="eyebrow" style={{ marginBottom: 12 }}>Editor's pick</div>
      <Ph w="100%" h={160} label="SAUNA PHOTO" style={{ borderRadius: 10, marginBottom: 14 }} />
      <div style={{ display: 'flex', gap: 8, marginBottom: 8, flexWrap: 'wrap' }}>
        <span className="chip ember">Best overall</span>
        <span className="chip">9.4/10</span>
      </div>
      <div style={{ fontFamily: 'var(--serif)', fontSize: 19, letterSpacing: '-0.012em', marginBottom: 6 }}>Lumen Heritage 4</div>
      <div style={{ fontSize: 13, color: 'var(--text-2)', lineHeight: 1.5, marginBottom: 14 }}>
        Full-spectrum, ultra-low EMF (&lt;0.2 mG), Canadian cedar. Top pick after 24 weeks of testing.
      </div>
      <div style={{ fontFamily: 'var(--serif)', fontSize: 26, letterSpacing: '-0.02em', marginBottom: 10 }}>$5,990</div>
      <a href="/best/best-infrared-saunas/" className="btn btn-ember" style={{ width: '100%', justifyContent: 'center' }}>
        Check price →
      </a>
    </div>
  );
}

function MobStickyHowto({ label, href }) {
  return (
    <div style={{
      position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 30,
      background: 'var(--ink)', borderTop: '1px solid rgba(255,255,255,0.1)',
      padding: '12px 18px', display: 'flex', alignItems: 'center', gap: 14,
    }}>
      <div style={{ flex: 1 }}>
        <div style={{ fontFamily: 'var(--serif)', fontSize: 14, color: 'var(--paper)', letterSpacing: '-0.01em' }}>InfraredSaunaSpot</div>
        <div className="mono" style={{ fontSize: 9.5, letterSpacing: '0.1em', color: 'var(--ember)', textTransform: 'uppercase' }}>How-to guides</div>
      </div>
      <a href={href || '/best/best-infrared-saunas/'} className="btn btn-ember" style={{ padding: '10px 18px', whiteSpace: 'nowrap', fontSize: 13 }}>
        {label || 'Best saunas →'}
      </a>
    </div>
  );
}

function ArticleBreadcrumb({ section, page }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 20 }}>
      <a href="/how-to/" className="mono" style={{ fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ember-deep)', textDecoration: 'none' }}>{section}</a>
      <span style={{ width: 3, height: 3, borderRadius: 999, background: 'var(--text-3)' }} />
      <span className="mono" style={{ fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--text-3)' }}>{page}</span>
    </div>
  );
}

function ArticleAuthorRow() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 26, paddingBottom: 24, borderBottom: '1px solid var(--line)' }}>
      <Ph w={44} h={44} label="MB" style={{ borderRadius: 999, flexShrink: 0 }} />
      <div style={{ flex: 1 }}>
        <div style={{ fontFamily: 'var(--serif)', fontSize: 14, letterSpacing: '-0.005em' }}>Dr. Mira Brandt, PhD</div>
        <div className="mono" style={{ fontSize: 10.5, letterSpacing: '0.08em', color: 'var(--text-3)', marginTop: 2 }}>
          Integrative Medicine
        </div>
      </div>
      <Disclose />
      <div className="mono" style={{ fontSize: 10.5, letterSpacing: '0.08em', color: 'var(--text-3)' }}>May 2026</div>
    </div>
  );
}

function SectionH2({ children }) {
  return (
    <h2 style={{ margin: '48px 0 14px', fontSize: 34, lineHeight: 1.1, letterSpacing: '-0.018em' }}>
      {children}
    </h2>
  );
}

function BodyP({ children, style }) {
  return (
    <p style={{ fontSize: 16.5, lineHeight: 1.65, marginBottom: 16, ...style }}>
      {children}
    </p>
  );
}

function ContrastStep({ number, title, children }) {
  return (
    <div style={{
      display: 'flex', gap: 18, paddingBottom: 22,
    }}>
      <div style={{
        flexShrink: 0, width: 38, height: 38, borderRadius: 999,
        background: 'var(--ember-deep)', color: '#fff',
        fontFamily: 'var(--mono)', fontSize: 13, letterSpacing: '0.06em',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        border: '2px solid var(--ember)',
      }}>{number}</div>
      <div style={{ flex: 1, paddingTop: 4 }}>
        <div style={{ fontFamily: 'var(--sans)', fontWeight: 600, fontSize: 15, marginBottom: 6 }}>{title}</div>
        <div style={{ fontSize: 14.5, color: 'var(--text-2)', lineHeight: 1.6 }}>{children}</div>
      </div>
    </div>
  );
}

// ============================================================
// COMPONENT 1: InfraredSaunaSessionGuide
// ============================================================

const sessionTocItems = [
  'Before your session',
  'Temperature and duration',
  'During the session',
  'After your session',
  'Sauna before vs after workout',
  'Common beginner mistakes',
  'FAQ',
];

const sessionFaq = [
  {
    q: 'How long is an infrared sauna session?',
    a: '20-45 minutes depending on experience level and temperature. Beginners start at 15-20 minutes. Research protocols showing cardiovascular and pain benefits consistently use 30-45 minute sessions.',
  },
  {
    q: 'What should I do on my first infrared sauna session?',
    a: 'Set temperature to 110-120°F (43-49°C). Sit for 15-20 minutes. Bring water. Leave when you feel you want to - there is no benefit to pushing through discomfort early on. Shower after, rehydrate, rest.',
  },
  {
    q: 'Can I bring my phone into an infrared sauna?',
    a: 'Risky at higher temperatures and longer sessions. Most phones are rated to 45°C (113°F); infrared cabins run 49-68°C (120-155°F). Short 15-min sessions at lower temps are less risky. Long sessions at full temperature can permanently damage the battery or trigger thermal shutdown.',
  },
  {
    q: 'Should I shower before infrared sauna?',
    a: 'Not required, but a rinse removes surface oils and sunscreen that can block pores. If you have recently applied topical medications or heavy lotions, shower first - these can react unpredictably with heat.',
  },
  {
    q: 'How do I know if I am getting too hot in a sauna?',
    a: 'Dizziness, forming headache, nausea, or tingling skin patches are clear exit signals. A pounding heart that feels uncomfortable (vs the expected elevation) is another. These are not mind-over-matter situations - exit, cool down, drink water.',
  },
  {
    q: 'Can I do infrared sauna every day?',
    a: 'Yes, for most healthy adults. Daily sessions are well-tolerated if you maintain hydration and watch recovery markers. If resting heart rate climbs, sleep quality drops, or you feel persistently fatigued, reduce to 4-5x/week and reassess.',
  },
];

const sessionRelated = [
  { href: '/how-to/what-to-wear-in-infrared-sauna/', cat: 'How-To', title: 'What to wear in an infrared sauna', read: '6 min', date: 'May 2026', label: 'HOW-TO' },
  { href: '/how-to/how-long-to-stay-in-infrared-sauna/', cat: 'How-To', title: 'How long to stay in an infrared sauna by goal', read: '7 min', date: 'May 2026', label: 'HOW-TO' },
  { href: '/how-to/sauna-cold-plunge-routine/', cat: 'How-To', title: 'The sauna and cold plunge routine: protocol and order', read: '9 min', date: 'May 2026', label: 'HOW-TO' },
];

function InfraredSaunaSessionGuideDesktop() {
  return (
    <div style={{ fontFamily: 'var(--sans)', color: 'var(--text)', background: 'var(--paper)' }}>
      <SiteHeader />

      {/* Article header */}
      <div style={{ padding: '40px 40px 0', maxWidth: 760, margin: '0 auto' }}>
        <ArticleBreadcrumb section="How-To" page="Infrared Sauna Session Guide" />

        <h1 style={{ margin: 0, fontSize: 56, lineHeight: 1.0, letterSpacing: '-0.025em' }}>
          Your First Infrared Sauna Session: A Complete Start-to-Finish Guide
        </h1>

        <p style={{ marginTop: 22, fontSize: 19, color: 'var(--text-2)', lineHeight: 1.55, fontFamily: 'var(--serif)' }}>
          Everything that happens before, during, and after a session - temperature progressions, hydration, timing, and the signals that tell you when to stop.
        </p>

        <ArticleAuthorRow />
      </div>

      {/* 3-column grid */}
      <div style={{ padding: '40px 40px 100px' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: '240px minmax(0, 760px) 280px',
          gap: 52,
          maxWidth: 1380,
          margin: '0 auto',
        }}>

          {/* TOC */}
          <aside>
            <TOC active={0} items={sessionTocItems} />
          </aside>

          {/* Body */}
          <div>

            <HowtoQuickAnswer>
              A standard session runs 20-45 minutes at 120-155°F (49-68°C). Beginners start at 110-125°F (43-52°C) for 15-20 minutes. Drink 16-20oz water beforehand, bring more to sip inside. Exit if you feel dizzy, nauseous, or your skin goes numb.
            </HowtoQuickAnswer>

            {/* Section 1 */}
            <SectionH2>Before Your Session</SectionH2>

            <BodyP>
              Hydration is the single most important preparation. Drink 16-20oz (475-590ml) of water 30-60 minutes before entering. Alcohol within 24 hours amplifies dehydration risk and impairs thermoregulation - skip it before sessions.
            </BodyP>

            <BodyP>
              Food timing is flexible: a light meal 1-2 hours prior works well, as does a session on an empty stomach. Both are common and both work - this is a personal preference call, not a physiological mandate.
            </BodyP>

            <BodyP>
              Pre-heat time matters. Most home units need 15-25 minutes to reach target temperature from a cold start. Start the preheat before you get changed, not after. Entering a cold cabin and waiting inside is less efficient and exposes you to uneven heat distribution during warm-up.
            </BodyP>

            <div style={{ background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 14, padding: 22, margin: '22px 0' }}>
              <div className="eyebrow" style={{ marginBottom: 12 }}>What to bring inside</div>
              <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
                {[
                  ['Water bottle', 'Insulated keeps it cooler for longer sessions'],
                  ['Timer or watch', 'Don\'t rely on phone in cabin at high temps for extended sessions'],
                  ['Small towel', 'For the bench - absorbs sweat and protects the wood'],
                  ['Phone (optional)', 'Most phones rated to 45°C (113°F). Sauna at 150°F (65°C) = risk zone after 20+ min. Keep sessions short or use Bluetooth speaker outside.'],
                ].map(([item, note], i) => (
                  <li key={i} style={{ display: 'flex', gap: 12, fontSize: 14, lineHeight: 1.5 }}>
                    <span style={{ color: 'var(--ember-deep)', fontFamily: 'var(--mono)', fontSize: 12, marginTop: 1, flexShrink: 0 }}>+</span>
                    <span><strong>{item}:</strong> {note}</span>
                  </li>
                ))}
              </ul>
            </div>

            {/* Section 2 */}
            <SectionH2>Temperature and Duration Protocol</SectionH2>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, margin: '22px 0' }}>
              <ExperienceCard
                rank="Beginner"
                label="First 2 weeks"
                temp="110-125°F (43-52°C)"
                duration="15-20 minutes"
                note="Focus on comfort and adaptation. Stop if you want to. You don't need to outlast the timer."
              />
              <ExperienceCard
                rank="Intermediate"
                label="Weeks 3-8"
                temp="130-145°F (54-63°C)"
                duration="25-35 minutes"
                note="Heat-up time 15-20 min. This is the research-supported dose range for most cardiovascular and pain studies."
              />
              <ExperienceCard
                rank="Regular"
                label="2+ months in"
                temp="145-155°F (63-68°C)"
                duration="35-45 minutes"
                note="The top end of what produces additional benefit. Above 45 min shows diminishing returns and increases dehydration risk."
              />
            </div>

            <HowtoCallout label="Why not to chase maximum temperature">
              At 158°F (70°C) vs 140°F (60°C), the additional thermal dose is modest. The discomfort-to-benefit ratio worsens sharply above 155°F (68°C). Temperature is not a proxy for effectiveness. Consistency at a moderate setting beats occasional high-temperature sessions.
            </HowtoCallout>

            {/* Section 3 */}
            <SectionH2>During the Session</SectionH2>

            <BodyP>
              Position matters more than most guides acknowledge. Middle bench height exposes more body surface area to the heaters than top or floor positions. The back heater - when your back contacts or faces it - delivers the largest share of far infrared dose of any panel in the cabin.
            </BodyP>

            <BodyP>
              Changing positions every 10-15 minutes improves heat distribution across different muscle groups. Standing for 2 minutes briefly increases heart rate - useful if you want more cardiovascular load without extending total session time.
            </BodyP>

            <BodyP>
              Breathe slowly through the nose. If the air feels too hot on inhalation, a damp small towel held loosely over the nose and mouth cools the air enough to make it comfortable without blocking airflow.
            </BodyP>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18, margin: '22px 0' }}>
              <div style={{ background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 12, padding: 20 }}>
                <div className="eyebrow" style={{ marginBottom: 12, color: 'var(--text-3)' }}>Exit immediately if you feel</div>
                {['Dizziness', 'Forming headache', 'Nausea', 'Tingling or numb skin', 'Heart pounding uncomfortably'].map((s, i) => (
                  <div key={i} style={{ display: 'flex', gap: 10, padding: '8px 0', fontSize: 13.5, borderTop: i === 0 ? 'none' : '1px solid var(--line)', color: 'var(--text)' }}>
                    <span style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--ember-deep)', flexShrink: 0 }}>!</span>
                    <span>{s}</span>
                  </div>
                ))}
              </div>
              <div style={{ background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 12, padding: 20 }}>
                <div className="eyebrow" style={{ marginBottom: 12, color: 'var(--text-3)' }}>Normal - not exit signals</div>
                {['Heavy sweating', 'Reddening skin', 'Feeling hot', 'Elevated heart rate (brisk walk equivalent)', 'Mild heat discomfort'].map((s, i) => (
                  <div key={i} style={{ display: 'flex', gap: 10, padding: '8px 0', fontSize: 13.5, borderTop: i === 0 ? 'none' : '1px solid var(--line)', color: 'var(--text)' }}>
                    <span style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--text-3)', flexShrink: 0 }}>+</span>
                    <span>{s}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Section 4 */}
            <SectionH2>After the Session</SectionH2>

            <BodyP>
              Sit outside the sauna for 5-10 minutes before doing anything else. Heart rate is elevated; letting it settle before cold exposure prevents lightheadedness, especially in the first few weeks.
            </BodyP>

            <BodyP>
              Cold shower or plunge: 3-5 minutes of cold water at 50-65°F (10-18°C) after the cool-down period. This is the vascular pump - the contrast between heat-driven vasodilation and cold-driven vasoconstriction produces a norepinephrine and endorphin release that most regular users describe as the best part of the ritual.
            </BodyP>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, margin: '22px 0' }}>
              {[
                { label: 'Rehydration', body: '20-32oz (590-945ml) water within the first 30 minutes. Add electrolytes - sodium, magnesium, potassium - not just plain water. Sweating removes minerals, not just fluid.' },
                { label: 'Rest period', body: '20-30 minutes low activity. Heart rate and core temperature return to baseline faster when you stay in a cool environment. Light reading or stretching is fine; intense exercise is not.' },
                { label: 'Skin care', body: 'Pores are open after a session. A gentle rinse is enough. Avoid heavy moisturizers immediately after - let the skin breathe for 20-30 minutes first, then moisturize if you want to.' },
              ].map((item, i) => (
                <div key={i} style={{ display: 'flex', gap: 18, padding: '16px 0', borderTop: '1px solid var(--line)' }}>
                  <div className="mono" style={{ flexShrink: 0, fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--ember-deep)', width: 110, paddingTop: 2 }}>{item.label}</div>
                  <div style={{ flex: 1, fontSize: 14.5, color: 'var(--text-2)', lineHeight: 1.6 }}>{item.body}</div>
                </div>
              ))}
            </div>

            {/* Section 5 */}
            <SectionH2>Infrared Sauna Before vs After Workout</SectionH2>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, margin: '22px 0' }}>
              <div style={{ background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 14, padding: 22 }}>
                <div style={{ fontFamily: 'var(--sans)', fontWeight: 700, fontSize: 14.5, marginBottom: 14, color: 'var(--text)' }}>After endurance training (recommended)</div>
                {[
                  'Heat exposure post-endurance compounds cardiovascular adaptations',
                  'Wait 30-60 min post-run or ride to let heart rate settle',
                  'The thermal load then adds a second cardiovascular stress wave - strong evidence base',
                  '30 min at 140°F (60°C) works well in this context',
                ].map((s, i) => (
                  <div key={i} style={{ display: 'flex', gap: 10, padding: '8px 0', fontSize: 13.5, borderTop: i === 0 ? 'none' : '1px solid var(--line)', color: 'var(--text-2)', lineHeight: 1.5 }}>
                    <span style={{ color: 'var(--ember-deep)', fontFamily: 'var(--mono)', fontSize: 12, flexShrink: 0, marginTop: 1 }}>+</span>
                    <span>{s}</span>
                  </div>
                ))}
              </div>
              <div style={{ background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 14, padding: 22 }}>
                <div style={{ fontFamily: 'var(--sans)', fontWeight: 700, fontSize: 14.5, marginBottom: 14, color: 'var(--text)' }}>After strength training (use caution)</div>
                {[
                  'Immediate post-lift heat may blunt the muscle protein synthesis response',
                  'The data is mixed - some studies show no interference, others show reduced adaptation',
                  'Safer approach: wait 2-3 hours post-lifting',
                  'Morning lift, evening sauna is a clean separation',
                ].map((s, i) => (
                  <div key={i} style={{ display: 'flex', gap: 10, padding: '8px 0', fontSize: 13.5, borderTop: i === 0 ? 'none' : '1px solid var(--line)', color: 'var(--text-2)', lineHeight: 1.5 }}>
                    <span style={{ color: 'var(--text-3)', fontFamily: 'var(--mono)', fontSize: 12, flexShrink: 0, marginTop: 1 }}>~</span>
                    <span>{s}</span>
                  </div>
                ))}
              </div>
            </div>

            <HowtoCallout label="Sauna before workout">
              Limited evidence for performance benefit. Some athletes report feeling better warmed up. No strong research base. If you do sauna pre-workout, keep it short (15 min, lower temp) and re-hydrate aggressively before starting exercise.
            </HowtoCallout>

            {/* Section 6 */}
            <SectionH2>Common Beginner Mistakes</SectionH2>

            <div style={{ marginBottom: 8 }}>
              <MistakeItem label="Dehydration">Skipping pre-session hydration is the most common cause of dizziness. 16-20oz of water 30-60 min before is the minimum. Most people who feel bad in a sauna simply didn't hydrate first.</MistakeItem>
              <MistakeItem label="Chasing heat">170°F is not better than 140°F. Research benefits cluster at 130-155°F (54-68°C). Higher temperatures increase cardiovascular strain without meaningfully adding therapeutic benefit.</MistakeItem>
              <MistakeItem label="Staying too long">60-minute sessions with no experience base. Build up over weeks. The body needs adaptation time - the same way you don't run a marathon in your first week of running.</MistakeItem>
              <MistakeItem label="Phone in sauna">Electronics are rated to 45°C (113°F); sauna cabinets reach 65°C (149°F)+. Risk of battery damage, thermal shutdown, or in rare cases fire from an overheating lithium battery.</MistakeItem>
              <MistakeItem label="Comparing to steam">Infrared at 140°F (60°C) feels very different from steam at 110°F (43°C) - the air is drier and more comfortable. Don't dismiss infrared because it doesn't feel hot enough. Your skin temperature and core temperature are still rising.</MistakeItem>
            </div>

            {/* FAQ */}
            <SectionH2>FAQ</SectionH2>
            <FAQ items={sessionFaq} />

            {/* CTA */}
            <div style={{ margin: '40px 0' }}>
              <CTABlock />
            </div>

            <AuthorBox />

            <Related items={sessionRelated} />

          </div>

          {/* Right rail */}
          <aside>
            <HowtoRailNewsletter />
            <HowtoRailProductCard />
          </aside>

        </div>
      </div>

      <SiteFooter />
    </div>
  );
}

function InfraredSaunaSessionGuideMobile() {
  return (
    <div style={{ fontFamily: 'var(--sans)', color: 'var(--text)', background: 'var(--paper)', paddingBottom: 80 }}>
      <MobHeader />

      <div style={{ padding: '28px 18px 0' }}>
        <ArticleBreadcrumb section="How-To" page="Session Guide" />

        <h1 style={{ margin: '0 0 16px', fontSize: 32, lineHeight: 1.1, letterSpacing: '-0.02em' }}>
          Your First Infrared Sauna Session: A Complete Start-to-Finish Guide
        </h1>

        <p style={{ fontSize: 16, color: 'var(--text-2)', lineHeight: 1.55, fontFamily: 'var(--serif)', marginBottom: 20 }}>
          Everything that happens before, during, and after a session - temperature progressions, hydration, timing, and the signals that tell you when to stop.
        </p>

        <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingBottom: 20, borderBottom: '1px solid var(--line)', marginBottom: 24 }}>
          <Ph w={38} h={38} label="MB" style={{ borderRadius: 999, flexShrink: 0 }} />
          <div>
            <div style={{ fontSize: 13.5, fontFamily: 'var(--serif)' }}>Dr. Mira Brandt, PhD</div>
            <div className="mono" style={{ fontSize: 10, letterSpacing: '0.08em', color: 'var(--text-3)' }}>May 2026</div>
          </div>
          <Disclose />
        </div>

        <HowtoQuickAnswer>
          A standard session runs 20-45 minutes at 120-155°F (49-68°C). Beginners start at 110-125°F (43-52°C) for 15-20 minutes. Drink 16-20oz water beforehand, bring more to sip inside. Exit if you feel dizzy, nauseous, or your skin goes numb.
        </HowtoQuickAnswer>

        <h2 style={{ fontSize: 26, margin: '36px 0 12px', letterSpacing: '-0.015em' }}>Before Your Session</h2>
        <BodyP>Drink 16-20oz (475-590ml) water 30-60 minutes before. No alcohol within 24 hours. Light meal 1-2 hours prior or empty stomach - both work. Start preheat 15-25 minutes before you plan to step in.</BodyP>

        <h2 style={{ fontSize: 26, margin: '36px 0 12px', letterSpacing: '-0.015em' }}>Temperature and Duration</h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, margin: '16px 0' }}>
          <ExperienceCard rank="Beginner" label="First 2 weeks" temp="110-125°F (43-52°C)" duration="15-20 min" note="Stop when you want to. Adaptation matters more than duration." />
          <ExperienceCard rank="Intermediate" label="Weeks 3-8" temp="130-145°F (54-63°C)" duration="25-35 min" note="The research-supported dose range for cardiovascular and pain studies." />
          <ExperienceCard rank="Regular" label="2+ months" temp="145-155°F (63-68°C)" duration="35-45 min" note="Hydrate aggressively. Above 45 min shows diminishing returns." />
        </div>

        <h2 style={{ fontSize: 26, margin: '36px 0 12px', letterSpacing: '-0.015em' }}>During the Session</h2>
        <BodyP>Middle bench height, back facing the rear heater. Change position every 10-15 minutes. Slow nasal breathing. Exit immediately for: dizziness, forming headache, nausea, tingling skin, or uncomfortable pounding heart.</BodyP>

        <h2 style={{ fontSize: 26, margin: '36px 0 12px', letterSpacing: '-0.015em' }}>After the Session</h2>
        <BodyP>Cool down 5-10 min outside the cabin. Optional cold shower or plunge 3-5 min at 50-65°F (10-18°C). Rehydrate with 20-32oz water plus electrolytes. Rest 20-30 min before intense activity.</BodyP>

        <h2 style={{ fontSize: 26, margin: '36px 0 12px', letterSpacing: '-0.015em' }}>Sauna Before vs After Workout</h2>
        <BodyP>After endurance training: strong evidence base, wait 30-60 min post-run. After strength training: wait 2-3 hours, or separate morning lift from evening sauna. Sauna before workout: limited evidence, keep it short if you do.</BodyP>

        <h2 style={{ fontSize: 26, margin: '36px 0 12px', letterSpacing: '-0.015em' }}>Common Mistakes</h2>
        <div style={{ marginBottom: 8 }}>
          <MistakeItem label="Dehydration">Skipping pre-session hydration is the most common cause of dizziness.</MistakeItem>
          <MistakeItem label="Chasing heat">170°F is not better than 140°F. Research benefits cluster at 130-155°F.</MistakeItem>
          <MistakeItem label="Too long">Build up over weeks. Don't start with 60-minute sessions.</MistakeItem>
          <MistakeItem label="Phone in sauna">Rated to 45°C (113°F); sauna runs 65°C (149°F)+. Risk of battery damage.</MistakeItem>
        </div>

        <h2 style={{ fontSize: 26, margin: '36px 0 12px', letterSpacing: '-0.015em' }}>FAQ</h2>
        <FAQ items={sessionFaq} />

        <div style={{ margin: '32px 0' }}>
          <CTABlock />
        </div>

        <AuthorBox />
      </div>

      <MobStickyHowto label="Best saunas →" href="/best/best-infrared-saunas/" />
    </div>
  );
}

function InfraredSaunaSessionGuide({ mobile = false }) {
  return mobile ? <InfraredSaunaSessionGuideMobile /> : <InfraredSaunaSessionGuideDesktop />;
}

// ============================================================
// COMPONENT 2: WhatToWearInfraredSauna
// ============================================================

const wearTocItems = [
  'Why clothing choice matters',
  'Your options ranked',
  'What to never wear',
  'Hair care in the sauna',
  'Eye protection',
  'Phones and electronics',
  'FAQ',
];

const wearFaq = [
  {
    q: 'Can I wear clothes in an infrared sauna?',
    a: 'Yes. Cotton is ideal. Loose cotton shorts, a swimsuit, or a towel wrap all work well. The main thing to avoid is synthetic fabric - polyester and nylon trap heat and reduce far infrared contact with your skin.',
  },
  {
    q: 'Should you wear a swimsuit in infrared sauna?',
    a: 'A swimsuit is one of the best options - absorbent, comfortable, appropriate for any setting (commercial or home), and allows sufficient IR contact. Cotton is preferable to polyester.',
  },
  {
    q: 'Is it better to be naked in infrared sauna?',
    a: 'In terms of infrared exposure and sweating efficiency: yes, minimal coverage maximizes both. In practice, a lightweight cotton suit or towel is nearly as effective and more comfortable for most people.',
  },
  {
    q: 'What material is best to wear in infrared sauna?',
    a: '100% cotton. It absorbs sweat, doesn\'t trap heat uncomfortably, and doesn\'t interfere with far infrared penetration the way synthetic fabrics do.',
  },
  {
    q: 'Do you need eye protection in an infrared sauna?',
    a: 'For standard far infrared cabins: no, the wavelengths are not well absorbed by eye tissue at normal distances. For full-spectrum saunas with near-IR panels at close range: protective wrap glasses are a low-cost sensible option.',
  },
];

const wearRelated = [
  { href: '/how-to/infrared-sauna-session-guide/', cat: 'How-To', title: 'Your first infrared sauna session: a complete guide', read: '8 min', date: 'May 2026', label: 'HOW-TO' },
  { href: '/how-to/how-long-to-stay-in-infrared-sauna/', cat: 'How-To', title: 'How long to stay in an infrared sauna by goal', read: '7 min', date: 'May 2026', label: 'HOW-TO' },
  { href: '/best/best-infrared-saunas/', cat: 'Best Of', title: 'Best infrared saunas of 2026 - tested and ranked', read: '14 min', date: 'May 2026', label: 'BEST OF' },
];

function WhatToWearInfraredSaunaDesktop() {
  return (
    <div style={{ fontFamily: 'var(--sans)', color: 'var(--text)', background: 'var(--paper)' }}>
      <SiteHeader />

      <div style={{ padding: '40px 40px 0', maxWidth: 760, margin: '0 auto' }}>
        <ArticleBreadcrumb section="How-To" page="What to Wear in Infrared Sauna" />

        <h1 style={{ margin: 0, fontSize: 56, lineHeight: 1.0, letterSpacing: '-0.025em' }}>
          What to Wear in an Infrared Sauna (and What to Leave Outside)
        </h1>

        <p style={{ marginTop: 22, fontSize: 19, color: 'var(--text-2)', lineHeight: 1.55, fontFamily: 'var(--serif)' }}>
          The short answer is less. Here is why fabric choice affects session quality, what options work best, and the one thing you should never wear.
        </p>

        <ArticleAuthorRow />
      </div>

      <div style={{ padding: '40px 40px 100px' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: '240px minmax(0, 760px) 280px',
          gap: 52,
          maxWidth: 1380,
          margin: '0 auto',
        }}>

          <aside>
            <TOC active={0} items={wearTocItems} />
          </aside>

          <div>

            <HowtoQuickAnswer>
              Loose cotton shorts or a swimsuit. Or a wrapped towel. Or nothing - in private home use, minimal coverage maximizes infrared exposure. Avoid synthetics (polyester, nylon) - they trap heat uncomfortably and reduce far infrared penetration to the skin.
            </HowtoQuickAnswer>

            <SectionH2>Why Clothing Choice Matters for Infrared</SectionH2>

            <BodyP>
              Far infrared penetrates skin directly - that is the core mechanism that distinguishes it from conventional sauna. Thick fabric between the heater and your skin reduces that contact surface. The thicker and more synthetic the fabric, the more it interferes.
            </BodyP>

            <BodyP>
              Cotton absorbs sweat effectively and doesn't trap heat against the skin. Synthetics trap it. In a conventional gym context that's a minor annoyance; at 140-155°F (60-68°C) it becomes genuinely uncomfortable and reduces the efficiency of heat dissipation through sweating.
            </BodyP>

            <BodyP>
              In commercial spa settings, the practical minimum is a swimsuit or shorts. In private home use, coverage is a personal choice - the tradeoff is legal requirements vs maximizing IR exposure and sweat efficiency.
            </BodyP>

            <SectionH2>Your Options, Ranked</SectionH2>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, margin: '22px 0' }}>
              <RankedWearItem
                rank={1}
                title="Nothing or minimal"
                subtitle="Best IR exposure, maximum sweat absorption by towel beneath you. Private home use only. Provides the highest thermal efficiency of any option."
              />
              <RankedWearItem
                rank={2}
                title="Cotton bikini or swimsuit"
                subtitle="Good balance of coverage and performance. Absorbent, comfortable, works in any setting - commercial or home. Most popular choice. Cotton preferred over polyester blend."
              />
              <RankedWearItem
                rank={3}
                title="Loose cotton shorts and sports bra or no top"
                subtitle="Practical and comfortable for longer sessions. Good airflow, easy to adjust. Recommended for 35-45 min sessions where comfort matters more than minimal coverage."
              />
              <RankedWearItem
                rank={4}
                title="Towel wrap"
                subtitle="Traditional approach. Effective, keeps the bench dry, easy to adjust as needed. Works in any setting. Slightly more cumbersome than a swimsuit but preferred by many regular users."
              />
              <RankedWearItem
                rank={5}
                title="Loose cotton t-shirt and shorts"
                subtitle="Fine but unnecessary coverage reduces some IR exposure. If you prefer this for comfort, use lightweight 100% cotton. Avoid heavy gym-weight cotton."
              />
            </div>

            <SectionH2>What to Never Wear</SectionH2>

            <div style={{ margin: '18px 0' }}>
              <MistakeItem label="Synthetics">Polyester, nylon, and spandex trap heat against skin, feel suffocating at 140°F (60°C)+, reduce IR penetration, and retain sweat odor. No performance benefit in this context.</MistakeItem>
              <MistakeItem label="Metal jewelry">Conducts heat and can cause localized burns on prolonged skin contact at session temperatures. Remove rings, necklaces, and bracelets before entering.</MistakeItem>
              <MistakeItem label="Heavy cotton">Counterproductive bulk. Pockets collect sweat. Heavy gym-weight hoodies or sweatpants add unnecessary weight and restrict airflow.</MistakeItem>
              <MistakeItem label="Street clothes">Bring in debris and contaminants that degrade the wood over time. Buttons and metal zips can get uncomfortably hot against skin.</MistakeItem>
            </div>

            <SectionH2>Hair Care in an Infrared Sauna</SectionH2>

            <BodyP>
              Keratin bonds begin degrading above approximately 60°C (140°F). Regular sauna sessions at full temperature can dry and weaken hair over time - particularly if hair is already chemically treated or color-processed.
            </BodyP>

            <div style={{ background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 14, padding: 22, margin: '18px 0' }}>
              <div className="eyebrow" style={{ marginBottom: 12 }}>Best options for hair</div>
              <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
                {[
                  ['Loose updo or bun', 'Not tight - scalp circulation matters. A loose bun reduces direct heat exposure to ends and length without restricting blood flow.'],
                  ['Loose towel over hair', 'Simple and effective. Creates a barrier that reduces peak heat at the scalp.'],
                  ['Wet hair', 'Protects slightly through evaporative cooling on the scalp, but adds humidity inside the cabin. A minor consideration in home units.'],
                  ['Product residue warning', 'If you have conditioner, dry shampoo, or styling product in your hair, it will melt and potentially transfer to the sauna wood. Rinse or use a towel barrier.'],
                ].map(([item, note], i) => (
                  <li key={i} style={{ display: 'flex', gap: 12, fontSize: 14, lineHeight: 1.5 }}>
                    <span style={{ color: 'var(--ember-deep)', fontFamily: 'var(--mono)', fontSize: 12, marginTop: 1, flexShrink: 0 }}>+</span>
                    <span><strong>{item}:</strong> {note}</span>
                  </li>
                ))}
              </ul>
            </div>

            <SectionH2>Eye Protection</SectionH2>

            <BodyP>
              Standard far infrared wavelengths (5.6-1000 microns) are very poorly absorbed by the aqueous humor and lens tissue. Eye risk from a standard far-IR sauna at normal bench distances is minimal - there is no clinical evidence of eye damage from conventional far infrared sauna exposure.
            </BodyP>

            <BodyP>
              Full-spectrum saunas that include near infrared panels (0.76-1.4 microns) present a slightly different picture. Near IR is more readily absorbed by eye tissue, particularly at close range with direct exposure. If your sauna has near-IR panels positioned at eye level and you use it at close range, wrap-around glasses designed for near-IR exposure are a sensible and inexpensive precaution.
            </BodyP>

            <HowtoCallout label="Practical answer">
              For standard far IR saunas: no eye protection needed. For full-spectrum units with near-IR panels at close range: near-IR wrap glasses are available for under $30 and eliminate the variable entirely.
            </HowtoCallout>

            <SectionH2>Phones and Electronics</SectionH2>

            <BodyP>
              Most smartphones are rated to 45°C (113°F) maximum operating temperature. Infrared sauna cabins run 49-68°C (120-155°F). Short 15-minute sessions at lower temperature settings carry low risk. Sessions at 155°F (68°C) for 35-45 minutes place phones well outside their thermal rating.
            </BodyP>

            <BodyP>
              Risks include: permanent battery capacity loss, thermal shutdown during the session, and in rare cases lithium battery failure from sustained overheating. A Bluetooth speaker outside the cabin paired with your phone on a nearby surface is the practical solution for those who want music or podcasts during sessions.
            </BodyP>

            <SectionH2>FAQ</SectionH2>
            <FAQ items={wearFaq} />

            <div style={{ margin: '40px 0' }}>
              <CTABlock />
            </div>

            <AuthorBox />

            <Related items={wearRelated} />

          </div>

          <aside>
            <HowtoRailNewsletter />
            <HowtoRailProductCard />
          </aside>

        </div>
      </div>

      <SiteFooter />
    </div>
  );
}

function WhatToWearInfraredSaunaMobile() {
  return (
    <div style={{ fontFamily: 'var(--sans)', color: 'var(--text)', background: 'var(--paper)', paddingBottom: 80 }}>
      <MobHeader />

      <div style={{ padding: '28px 18px 0' }}>
        <ArticleBreadcrumb section="How-To" page="What to Wear" />

        <h1 style={{ margin: '0 0 16px', fontSize: 32, lineHeight: 1.1, letterSpacing: '-0.02em' }}>
          What to Wear in an Infrared Sauna (and What to Leave Outside)
        </h1>

        <p style={{ fontSize: 16, color: 'var(--text-2)', lineHeight: 1.55, fontFamily: 'var(--serif)', marginBottom: 20 }}>
          The short answer is less. Here is why fabric choice affects session quality, what works best, and what to avoid.
        </p>

        <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingBottom: 20, borderBottom: '1px solid var(--line)', marginBottom: 24 }}>
          <Ph w={38} h={38} label="MB" style={{ borderRadius: 999, flexShrink: 0 }} />
          <div>
            <div style={{ fontSize: 13.5, fontFamily: 'var(--serif)' }}>Dr. Mira Brandt, PhD</div>
            <div className="mono" style={{ fontSize: 10, letterSpacing: '0.08em', color: 'var(--text-3)' }}>May 2026</div>
          </div>
          <Disclose />
        </div>

        <HowtoQuickAnswer>
          Loose cotton shorts or a swimsuit. Or a towel wrap. Avoid synthetics - polyester and nylon trap heat and reduce far infrared penetration to the skin.
        </HowtoQuickAnswer>

        <h2 style={{ fontSize: 26, margin: '36px 0 12px', letterSpacing: '-0.015em' }}>Why Fabric Choice Matters</h2>
        <BodyP>Far infrared penetrates skin directly. Thick or synthetic fabric reduces that contact. Cotton absorbs sweat; synthetics trap it. At 140-155°F (60-68°C) that distinction becomes significant.</BodyP>

        <h2 style={{ fontSize: 26, margin: '36px 0 12px', letterSpacing: '-0.015em' }}>Your Options, Ranked</h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, margin: '16px 0' }}>
          <RankedWearItem rank={1} title="Nothing or minimal" subtitle="Best IR exposure. Private home only." />
          <RankedWearItem rank={2} title="Cotton swimsuit" subtitle="Absorbent, works in any setting. Best all-around choice." />
          <RankedWearItem rank={3} title="Loose cotton shorts and top" subtitle="Comfortable for longer sessions." />
          <RankedWearItem rank={4} title="Towel wrap" subtitle="Traditional, keeps the bench dry." />
          <RankedWearItem rank={5} title="Cotton t-shirt and shorts" subtitle="Fine but reduces some IR exposure." />
        </div>

        <h2 style={{ fontSize: 26, margin: '36px 0 12px', letterSpacing: '-0.015em' }}>What to Never Wear</h2>
        <div>
          <MistakeItem label="Synthetics">Polyester, nylon, spandex - trap heat, reduce IR penetration.</MistakeItem>
          <MistakeItem label="Metal jewelry">Conducts heat, localized burn risk. Remove before entering.</MistakeItem>
          <MistakeItem label="Heavy cotton">Unnecessary bulk. Gym sweatshirts and heavy hoodies.</MistakeItem>
          <MistakeItem label="Street clothes">Contaminates the wood, buttons and zips get hot.</MistakeItem>
        </div>

        <h2 style={{ fontSize: 26, margin: '36px 0 12px', letterSpacing: '-0.015em' }}>Hair Care</h2>
        <BodyP>Keratin degrades above 60°C (140°F). Use a loose bun or a towel over the hair for regular sessions. Remove product residue before entering - conditioner and dry shampoo melt onto the wood.</BodyP>

        <h2 style={{ fontSize: 26, margin: '36px 0 12px', letterSpacing: '-0.015em' }}>Eye Protection</h2>
        <BodyP>Far IR standard saunas: not needed. Full-spectrum saunas with near-IR panels at close range: near-IR wrap glasses are a sensible precaution.</BodyP>

        <h2 style={{ fontSize: 26, margin: '36px 0 12px', letterSpacing: '-0.015em' }}>Phones</h2>
        <BodyP>Phones rated to 45°C (113°F). Sauna at 65°C (149°F)+. Short low-temp sessions carry low risk. Long sessions at full temperature risk battery damage. Use a Bluetooth speaker outside instead.</BodyP>

        <h2 style={{ fontSize: 26, margin: '36px 0 12px', letterSpacing: '-0.015em' }}>FAQ</h2>
        <FAQ items={wearFaq} />

        <div style={{ margin: '32px 0' }}>
          <CTABlock />
        </div>

        <AuthorBox />
      </div>

      <MobStickyHowto label="Best saunas →" href="/best/best-infrared-saunas/" />
    </div>
  );
}

function WhatToWearInfraredSauna({ mobile = false }) {
  return mobile ? <WhatToWearInfraredSaunaMobile /> : <WhatToWearInfraredSaunaDesktop />;
}

// ============================================================
// COMPONENT 3: HowLongInfraredSauna
// ============================================================

const howLongTocItems = [
  'Duration by experience level',
  'How long for specific goals',
  'Signs you have been in too long',
  'How long to heat up',
  'Frequency guide',
  'FAQ',
];

const howLongGoals = [
  { goal: 'Weight management', duration: '30-45 min', temp: '140-155°F (60-68°C)', notes: '~200-600 kcal heat expenditure per session. Supplement to exercise, not a replacement.' },
  { goal: 'Recovery', duration: '20-30 min', temp: '130-145°F (54-63°C)', notes: 'Post-endurance works well. Post-strength: wait 2-3 hours before entering.' },
  { goal: 'Relaxation', duration: '20-30 min', temp: '120-135°F (49-57°C)', notes: 'Lower temp, moderate duration. Sustainable for daily sessions.' },
  { goal: 'Skin and collagen', duration: '20-30 min', temp: '120-140°F (49-60°C)', notes: 'Consistent frequency matters more than long single sessions.' },
  { goal: 'Chronic pain', duration: '30-35 min', temp: '130-145°F (54-63°C)', notes: 'Research protocols use this range for 6-12 week treatment courses.' },
];

const howLongFreq = [
  { freq: '1-2x per week', effect: 'Some relaxation benefit, limited cardiovascular adaptation. Better than nothing but below the studied minimum effective dose.' },
  { freq: '3x per week', effect: 'Minimum effective dose for cardiovascular markers. Improvement begins appearing after 6-8 weeks of consistent use at this level.' },
  { freq: '4-5x per week (optimal)', effect: 'Best-studied range for blood pressure, pain, and conditioning outcomes. Most clinical protocols operate in this range.' },
  { freq: 'Daily', effect: 'Well-tolerated by most healthy adults. Monitor sleep quality and resting heart rate. If either degrades, reduce to 5x/week and reassess.' },
];

const howLongFaq = [
  {
    q: 'Is 20 minutes in infrared sauna enough?',
    a: 'Yes for beginners and for relaxation goals. For cardiovascular conditioning and pain management, research protocols use 30-45 minutes. A consistent 20-minute daily session beats an occasional 45-minute session.',
  },
  {
    q: 'Is 45 minutes too long in infrared sauna?',
    a: 'Not for experienced users at moderate temperatures. 45 minutes at 140-155°F (60-68°C) is within the studied range and well-tolerated by most healthy adults with adequate hydration. Above 45 minutes, benefits plateau for most goals.',
  },
  {
    q: 'Can you stay in infrared sauna too long?',
    a: 'Yes. Signs include dizziness, nausea, forming headache, and tingling skin. These are exit signals, not push-through moments. Dehydration compounds heat stress - if you skipped pre-session hydration, you will hit these signals earlier.',
  },
  {
    q: 'How long should I be in infrared sauna for weight loss?',
    a: '30-45 minutes at 140-155°F (60-68°C) produces the most heat expenditure - roughly 200-600 kcal equivalent per session. This is a supplement to exercise, not a replacement. Consistent 4-5x/week use combined with a caloric deficit produces the most meaningful long-term effect.',
  },
  {
    q: 'Is 30 minutes in infrared sauna enough?',
    a: 'For most goals: yes. Thirty minutes at 130-145°F (54-63°C) sits within the studied range for cardiovascular benefit, pain management, and cortisol reduction. It is the most practical daily commitment for consistent use.',
  },
  {
    q: 'How long does infrared sauna take to heat up?',
    a: 'Most home units reach 140°F (60°C) in 15-25 minutes from a cold start. Carbon flat-panel heaters are typically faster (10-18 min) than full-spectrum multi-element systems. Preheat before entering - waiting inside a cold cabin is less efficient.',
  },
];

const howLongRelated = [
  { href: '/how-to/infrared-sauna-session-guide/', cat: 'How-To', title: 'Your first infrared sauna session: a complete guide', read: '8 min', date: 'May 2026', label: 'HOW-TO' },
  { href: '/how-to/sauna-cold-plunge-routine/', cat: 'How-To', title: 'The sauna and cold plunge routine: protocol and order', read: '9 min', date: 'May 2026', label: 'HOW-TO' },
  { href: '/guides/far-infrared-sauna-benefits/', cat: 'Guide', title: 'Far infrared sauna benefits: what the evidence shows', read: '12 min', date: 'May 2026', label: 'GUIDE' },
];

function HowLongInfraredSaunaDesktop() {
  return (
    <div style={{ fontFamily: 'var(--sans)', color: 'var(--text)', background: 'var(--paper)' }}>
      <SiteHeader />

      <div style={{ padding: '40px 40px 0', maxWidth: 760, margin: '0 auto' }}>
        <ArticleBreadcrumb section="How-To" page="How Long to Stay in Infrared Sauna" />

        <h1 style={{ margin: 0, fontSize: 56, lineHeight: 1.0, letterSpacing: '-0.025em' }}>
          How Long to Stay in an Infrared Sauna: Duration by Experience and Goal
        </h1>

        <p style={{ marginTop: 22, fontSize: 19, color: 'var(--text-2)', lineHeight: 1.55, fontFamily: 'var(--serif)' }}>
          20-45 minutes covers most use cases. The right duration depends on your experience level, temperature, and what you are trying to achieve. Here are the specifics.
        </p>

        <ArticleAuthorRow />
      </div>

      <div style={{ padding: '40px 40px 100px' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: '240px minmax(0, 760px) 280px',
          gap: 52,
          maxWidth: 1380,
          margin: '0 auto',
        }}>

          <aside>
            <TOC active={0} items={howLongTocItems} />
          </aside>

          <div>

            <HowtoQuickAnswer>
              Beginners: 15-20 minutes at 110-125°F (43-52°C). After 2-4 weeks: 25-35 minutes at 130-145°F (54-63°C). Regular users: 35-45 minutes at 140-155°F (60-68°C). Above 45 minutes shows diminishing returns for most goals and increases dehydration risk.
            </HowtoQuickAnswer>

            <SectionH2>Duration by Experience Level</SectionH2>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, margin: '22px 0' }}>
              <ExperienceCard
                rank="Beginner"
                label="First 2 weeks"
                temp="110-125°F (43-52°C)"
                duration="15-20 minutes"
                note="Exit whenever you want. Adaptation matters more than duration at this stage."
              />
              <ExperienceCard
                rank="Intermediate"
                label="Weeks 3-8"
                temp="130-145°F (54-63°C)"
                duration="25-35 minutes"
                note="The studied dose. Most cardiovascular research protocols use this range."
              />
              <ExperienceCard
                rank="Regular"
                label="2+ months"
                temp="140-155°F (60-68°C)"
                duration="35-45 minutes"
                note="Full thermal dose. Hydrate aggressively before and after."
              />
            </div>

            <BodyP>
              These are progressions, not requirements. Some people stabilize at 25-minute sessions indefinitely - that is a valid routine. The progression exists because heat adaptation genuinely requires weeks and trying to rush it increases dropout from discomfort.
            </BodyP>

            <SectionH2>How Long for Specific Goals</SectionH2>

            <div style={{ overflowX: 'auto', margin: '18px 0 28px', border: '1px solid var(--line)', borderRadius: 12, overflow: 'hidden' }}>
              <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                <thead>
                  <tr style={{ background: 'var(--paper-2)' }}>
                    <th style={{ padding: '12px 16px', textAlign: 'left', fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--text-3)', borderBottom: '1px solid var(--line)' }}>Goal</th>
                    <th style={{ padding: '12px 16px', textAlign: 'left', fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--text-3)', borderBottom: '1px solid var(--line)' }}>Duration</th>
                    <th style={{ padding: '12px 16px', textAlign: 'left', fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--text-3)', borderBottom: '1px solid var(--line)' }}>Temp</th>
                    <th style={{ padding: '12px 16px', textAlign: 'left', fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--text-3)', borderBottom: '1px solid var(--line)' }}>Notes</th>
                  </tr>
                </thead>
                <tbody>
                  {howLongGoals.map((row, i) => (
                    <GoalTableRow key={i} {...row} isLast={i === howLongGoals.length - 1} />
                  ))}
                </tbody>
              </table>
            </div>

            <SectionH2>Signs You Have Been in Too Long</SectionH2>

            <BodyP>
              The following are exit signals. Not discomfort to push through - actual physiological indicators that your body has reached its limit for that session.
            </BodyP>

            <div style={{ margin: '18px 0' }}>
              <MistakeItem label="Dizziness">Vasodilation plus mild dehydration. Exit, sit down, drink water immediately. Do not try to tough it out.</MistakeItem>
              <MistakeItem label="Forming headache">Typically a dehydration signal. Don't push through. The headache will worsen after you exit and the heat effect resolves.</MistakeItem>
              <MistakeItem label="Nausea">The body's heat-overload response. Exit immediately, move to cool air, hydrate slowly.</MistakeItem>
              <MistakeItem label="Tingling skin">Circulation redistribution signal. Particularly in hands and feet. Time to cool down.</MistakeItem>
              <MistakeItem label="Pounding heart">Heart rate above approximately 160bpm at rest inside the sauna is a signal for most adults to exit. Some individual variation, but uncomfortable pounding is not normal.</MistakeItem>
            </div>

            <HowtoCallout label="Normal signs that are not exit signals">
              Heavy sweating, reddening skin, feeling hot (obviously), mild fatigue after the session, and mild heat discomfort inside. These are expected and do not require action beyond maintaining hydration.
            </HowtoCallout>

            <SectionH2>How Long Does an Infrared Sauna Take to Heat Up?</SectionH2>

            <BodyP>
              Most home units reach 140°F (60°C) in 15-25 minutes from a cold start. Carbon flat-panel heaters are faster: 10-18 minutes. Full-spectrum multi-element systems with ceramic or combination elements: 18-25 minutes. Factors affecting heat-up time include ambient room temperature (a cold garage slows it significantly), whether you are on 120V or 240V supply, and the insulation quality of the cabin construction.
            </BodyP>

            <HowtoCallout label="Practical tip">
              Start preheat 15-20 minutes before you plan to step in. Don't enter a cold cabin and wait inside - the heat-up from inside the cabin is less efficient because your body absorbs heat before the surfaces are at operating temperature, and you breathe the warming air throughout the whole cycle.
            </HowtoCallout>

            <SectionH2>Frequency Guide</SectionH2>

            <div style={{ overflowX: 'auto', margin: '18px 0 28px', border: '1px solid var(--line)', borderRadius: 12, overflow: 'hidden' }}>
              <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                <thead>
                  <tr style={{ background: 'var(--paper-2)' }}>
                    <th style={{ padding: '12px 16px', textAlign: 'left', fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--text-3)', borderBottom: '1px solid var(--line)', width: '28%' }}>Sessions per week</th>
                    <th style={{ padding: '12px 16px', textAlign: 'left', fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--text-3)', borderBottom: '1px solid var(--line)' }}>Effect</th>
                  </tr>
                </thead>
                <tbody>
                  {howLongFreq.map((row, i) => (
                    <FreqTableRow key={i} {...row} isLast={i === howLongFreq.length - 1} />
                  ))}
                </tbody>
              </table>
            </div>

            <SectionH2>FAQ</SectionH2>
            <FAQ items={howLongFaq} />

            <div style={{ margin: '40px 0' }}>
              <CTABlock />
            </div>

            <AuthorBox />

            <Related items={howLongRelated} />

          </div>

          <aside>
            <HowtoRailNewsletter />
            <HowtoRailProductCard />
          </aside>

        </div>
      </div>

      <SiteFooter />
    </div>
  );
}

function HowLongInfraredSaunaMobile() {
  return (
    <div style={{ fontFamily: 'var(--sans)', color: 'var(--text)', background: 'var(--paper)', paddingBottom: 80 }}>
      <MobHeader />

      <div style={{ padding: '28px 18px 0' }}>
        <ArticleBreadcrumb section="How-To" page="How Long to Stay" />

        <h1 style={{ margin: '0 0 16px', fontSize: 32, lineHeight: 1.1, letterSpacing: '-0.02em' }}>
          How Long to Stay in an Infrared Sauna: Duration by Experience and Goal
        </h1>

        <p style={{ fontSize: 16, color: 'var(--text-2)', lineHeight: 1.55, fontFamily: 'var(--serif)', marginBottom: 20 }}>
          20-45 minutes covers most use cases. The right duration depends on experience level, temperature, and goal.
        </p>

        <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingBottom: 20, borderBottom: '1px solid var(--line)', marginBottom: 24 }}>
          <Ph w={38} h={38} label="MB" style={{ borderRadius: 999, flexShrink: 0 }} />
          <div>
            <div style={{ fontSize: 13.5, fontFamily: 'var(--serif)' }}>Dr. Mira Brandt, PhD</div>
            <div className="mono" style={{ fontSize: 10, letterSpacing: '0.08em', color: 'var(--text-3)' }}>May 2026</div>
          </div>
          <Disclose />
        </div>

        <HowtoQuickAnswer>
          Beginners: 15-20 min at 110-125°F (43-52°C). Intermediate: 25-35 min at 130-145°F (54-63°C). Regular: 35-45 min at 140-155°F (60-68°C). Above 45 min shows diminishing returns.
        </HowtoQuickAnswer>

        <h2 style={{ fontSize: 26, margin: '36px 0 12px', letterSpacing: '-0.015em' }}>Duration by Experience Level</h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, margin: '16px 0' }}>
          <ExperienceCard rank="Beginner" label="First 2 weeks" temp="110-125°F (43-52°C)" duration="15-20 min" note="Exit when you want. Adaptation matters more than duration." />
          <ExperienceCard rank="Intermediate" label="Weeks 3-8" temp="130-145°F (54-63°C)" duration="25-35 min" note="The studied dose for cardiovascular and pain research." />
          <ExperienceCard rank="Regular" label="2+ months" temp="140-155°F (60-68°C)" duration="35-45 min" note="Full thermal dose. Hydrate aggressively." />
        </div>

        <h2 style={{ fontSize: 26, margin: '36px 0 12px', letterSpacing: '-0.015em' }}>Duration by Goal</h2>
        <div style={{ overflowX: 'auto', margin: '12px 0', border: '1px solid var(--line)', borderRadius: 10, overflow: 'hidden' }}>
          <table style={{ width: '100%', borderCollapse: 'collapse', minWidth: 360 }}>
            <thead>
              <tr style={{ background: 'var(--paper-2)' }}>
                <th style={{ padding: '10px 14px', textAlign: 'left', fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-3)', borderBottom: '1px solid var(--line)' }}>Goal</th>
                <th style={{ padding: '10px 14px', textAlign: 'left', fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-3)', borderBottom: '1px solid var(--line)' }}>Duration</th>
                <th style={{ padding: '10px 14px', textAlign: 'left', fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-3)', borderBottom: '1px solid var(--line)' }}>Temp</th>
              </tr>
            </thead>
            <tbody>
              {howLongGoals.map((row, i) => (
                <tr key={i} style={{ borderBottom: i < howLongGoals.length - 1 ? '1px solid var(--line)' : 'none' }}>
                  <td style={{ padding: '11px 14px', fontSize: 13, fontWeight: 600, color: 'var(--text)', verticalAlign: 'top' }}>{row.goal}</td>
                  <td style={{ padding: '11px 14px', fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ember-deep)', whiteSpace: 'nowrap', verticalAlign: 'top' }}>{row.duration}</td>
                  <td style={{ padding: '11px 14px', fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--text-2)', whiteSpace: 'nowrap', verticalAlign: 'top' }}>{row.temp}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <h2 style={{ fontSize: 26, margin: '36px 0 12px', letterSpacing: '-0.015em' }}>Signs You Have Been in Too Long</h2>
        <div>
          <MistakeItem label="Dizziness">Exit, sit, drink water. Vasodilation plus dehydration.</MistakeItem>
          <MistakeItem label="Headache">Dehydration signal. Don't push through it.</MistakeItem>
          <MistakeItem label="Nausea">Heat overload. Exit immediately, move to cool air.</MistakeItem>
          <MistakeItem label="Tingling skin">Circulation signal. Time to cool down.</MistakeItem>
          <MistakeItem label="Pounding heart">Uncomfortable elevated HR. Exit and rest.</MistakeItem>
        </div>

        <h2 style={{ fontSize: 26, margin: '36px 0 12px', letterSpacing: '-0.015em' }}>Heat-Up Time</h2>
        <BodyP>Most home units: 15-25 min to reach 140°F (60°C). Carbon panels: 10-18 min. Full-spectrum systems: 18-25 min. Start preheat before you get changed, not after.</BodyP>

        <h2 style={{ fontSize: 26, margin: '36px 0 12px', letterSpacing: '-0.015em' }}>Frequency Guide</h2>
        <BodyP>3x/week is the minimum effective dose for cardiovascular markers. 4-5x/week is the best-studied range. Daily is fine for most healthy adults - monitor sleep and resting HR.</BodyP>

        <h2 style={{ fontSize: 26, margin: '36px 0 12px', letterSpacing: '-0.015em' }}>FAQ</h2>
        <FAQ items={howLongFaq} />

        <div style={{ margin: '32px 0' }}>
          <CTABlock />
        </div>

        <AuthorBox />
      </div>

      <MobStickyHowto label="Best saunas →" href="/best/best-infrared-saunas/" />
    </div>
  );
}

function HowLongInfraredSauna({ mobile = false }) {
  return mobile ? <HowLongInfraredSaunaMobile /> : <HowLongInfraredSaunaDesktop />;
}

// ============================================================
// COMPONENT 4: SaunaColdPlungeRoutine
// ============================================================

const contrastTocItems = [
  'Why contrast therapy works',
  'The standard protocol',
  'Sauna first or cold plunge first?',
  'Temperature guidelines',
  'Benefits of the combo',
  'Equipment needed',
  'FAQ',
];

const contrastFaq = [
  {
    q: 'Should you cold plunge before or after sauna?',
    a: 'After sauna. The heat-first protocol generates stronger cardiovascular and norepinephrine responses than cold-first. This is the standard Finnish protocol and the one most research has studied.',
  },
  {
    q: 'How long should you stay in cold plunge after sauna?',
    a: '2-5 minutes at 50-59°F (10-15°C). Start at 1-2 minutes for your first sessions and build up. The norepinephrine response peaks quickly - diminishing returns after 5 minutes.',
  },
  {
    q: 'How many rounds of sauna and cold plunge?',
    a: '2-3 rounds is standard. One round (sauna + cold + rest) produces benefit. Three rounds is the Finnish traditional protocol and the one most associated with strong cardiovascular outcomes. Beyond three rounds, most people report fatigue rather than further benefit.',
  },
  {
    q: 'Is sauna and cold plunge every day OK?',
    a: 'For most healthy adults: yes. Daily contrast therapy is the norm in Finnish culture with no adverse health signal. Monitor resting heart rate and sleep quality - if either degrades over 1-2 weeks, reduce to 5x/week.',
  },
  {
    q: 'What temperature should cold plunge be after sauna?',
    a: '50-59°F (10-15°C). This range produces the documented norepinephrine and cardiovascular effects without the shock risk of colder water. Colder than 45°F (7°C) is not meaningfully more effective for most people.',
  },
  {
    q: 'Can I use a cold shower instead of a cold plunge?',
    a: 'Yes - it produces real but smaller effects. Cold shower at 55-65°F (13-18°C) for 2-4 minutes activates the sympathetic response and provides recovery benefit. Immersion is more effective because it covers more body surface area simultaneously, but a shower is a completely valid alternative.',
  },
];

const contrastRelated = [
  { href: '/guides/infrared-sauna-detox/', cat: 'Guide', title: 'Infrared sauna detox: what the evidence actually says', read: '12 min', date: 'May 2026', label: 'GUIDE' },
  { href: '/how-to/how-long-to-stay-in-infrared-sauna/', cat: 'How-To', title: 'How long to stay in an infrared sauna by goal', read: '7 min', date: 'May 2026', label: 'HOW-TO' },
  { href: '/best/best-infrared-saunas/', cat: 'Best Of', title: 'Best infrared saunas of 2026 - tested and ranked', read: '14 min', date: 'May 2026', label: 'BEST OF' },
];

const contrastSteps = [
  { title: 'Pre-heat sauna to 140-160°F (60-71°C)', body: 'Takes 15-25 minutes from a cold start. Start this before you get changed.' },
  { title: 'Sauna session 15-20 minutes', body: 'Sweat fully. Allow core temperature to rise. Middle bench, back facing the rear heater.' },
  { title: 'Exit and cool down 2-3 minutes', body: 'Sit at room temperature. Let vasoconstriction begin naturally. Don\'t rush to the cold immediately.' },
  { title: 'Cold plunge 1-5 minutes at 50-59°F (10-15°C)', body: 'Or cold shower 2-4 minutes if no plunge available. Full immersion is more effective than partial.' },
  { title: 'Passive rest 5-10 minutes', body: 'The recovery window. Don\'t exercise. Let the parasympathetic rebound complete.' },
  { title: 'Repeat 2-3 rounds', body: 'Total session: 60-90 minutes for a full 3-round protocol.' },
  { title: 'Final round choice', body: 'End with cold for alertness and daytime energy. End with sauna for relaxation and sleep preparation.' },
];

function SaunaColdPlungeRoutineDesktop() {
  return (
    <div style={{ fontFamily: 'var(--sans)', color: 'var(--text)', background: 'var(--paper)' }}>
      <SiteHeader />

      <div style={{ padding: '40px 40px 0', maxWidth: 760, margin: '0 auto' }}>
        <ArticleBreadcrumb section="How-To" page="Sauna and Cold Plunge Routine" />

        <h1 style={{ margin: 0, fontSize: 54, lineHeight: 1.0, letterSpacing: '-0.025em' }}>
          The Sauna and Cold Plunge Routine: Protocol, Order, and What the Research Shows
        </h1>

        <p style={{ marginTop: 22, fontSize: 19, color: 'var(--text-2)', lineHeight: 1.55, fontFamily: 'var(--serif)' }}>
          Contrast therapy - alternating heat and cold - has a stronger evidence base than either modality alone. Here is the protocol, the physiology, and who should and shouldn't use it.
        </p>

        <ArticleAuthorRow />
      </div>

      <div style={{ padding: '40px 40px 100px' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: '240px minmax(0, 760px) 280px',
          gap: 52,
          maxWidth: 1380,
          margin: '0 auto',
        }}>

          <aside>
            <TOC active={0} items={contrastTocItems} />
          </aside>

          <div>

            <HowtoQuickAnswer>
              Sauna 15-20 minutes at 140-160°F (60-71°C) - cold plunge 2-5 minutes at 50-59°F (10-15°C) - passive rest 5-10 minutes. Repeat 2-3 rounds. Sauna goes first. The evidence for this order is stronger than cold-first.
            </HowtoQuickAnswer>

            {/* Section 1 */}
            <SectionH2>Why Contrast Therapy Works</SectionH2>

            <BodyP>
              The mechanism is circulatory. Heat causes vasodilation: blood vessels expand, blood flows to the periphery, cardiac output rises from a resting 5-7 L/min to an equivalent of 13 L/min during a full session. Capillary beds in the skin and working muscles open.
            </BodyP>

            <BodyP>
              Cold causes rapid vasoconstriction: peripheral vessels contract, blood returns to the core and organs. The norepinephrine surge from cold immersion is well-documented - 3-5x baseline in multiple cold immersion studies. The alternating sequence creates what practitioners call a vascular pump effect: repeated vasodilation and vasoconstriction that drives circulation through tissues more forcefully than either state alone.
            </BodyP>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, margin: '22px 0' }}>
              {[
                { stat: '13 L/min', label: 'Cardiac output equivalent during full sauna session', sub: 'vs 5-7 L/min at rest' },
                { stat: '3-5x', label: 'Norepinephrine increase from cold immersion', sub: 'above baseline - documented in multiple studies' },
                { stat: '2-3 rounds', label: 'Traditional Finnish protocol', sub: 'most associated with cardiovascular outcomes' },
              ].map((card, i) => (
                <div key={i} style={{ background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 12, padding: 18, textAlign: 'center' }}>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 36, letterSpacing: '-0.025em', color: 'var(--ember-deep)', lineHeight: 1.1, marginBottom: 8 }}>{card.stat}</div>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-3)', lineHeight: 1.4, marginBottom: 6 }}>{card.label}</div>
                  <div style={{ fontSize: 12, color: 'var(--text-3)', lineHeight: 1.4 }}>{card.sub}</div>
                </div>
              ))}
            </div>

            <BodyP>
              The bulk of the cardiovascular benefit data - the Finnish studies on blood pressure, cardiac conditioning, and mortality risk - was generated with sauna-first protocols. Cold-first produces different physiological effects and has a much thinner research base for cardiovascular outcomes specifically.
            </BodyP>

            {/* Section 2 */}
            <SectionH2>The Standard Protocol</SectionH2>

            <div style={{ margin: '22px 0', padding: '4px 0' }}>
              {contrastSteps.map((step, i) => (
                <ContrastStep key={i} number={i + 1} title={step.title}>{step.body}</ContrastStep>
              ))}
            </div>

            {/* Rounds visual */}
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 40px 1fr 40px 1fr', gap: 0, margin: '28px 0', border: '1px solid var(--line)', borderRadius: 14, overflow: 'hidden' }}>
              {[
                { label: 'Round 1', heat: '15-20 min sauna', cold: '2-5 min plunge', rest: '5-10 min rest' },
                null,
                { label: 'Round 2', heat: '15-20 min sauna', cold: '2-5 min plunge', rest: '5-10 min rest' },
                null,
                { label: 'Round 3', heat: '15-20 min sauna', cold: '2-5 min plunge', rest: 'End here' },
              ].map((col, i) =>
                col === null ? (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--paper-2)', borderLeft: '1px solid var(--line)', borderRight: '1px solid var(--line)' }}>
                    <span className="mono" style={{ fontSize: 11, color: 'var(--text-3)' }}>--</span>
                  </div>
                ) : (
                  <div key={i} style={{ padding: 18, background: i === 0 ? 'var(--paper)' : i === 2 ? 'var(--paper)' : 'var(--paper)', borderRight: i < 4 ? '1px solid var(--line)' : 'none' }}>
                    <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--ember-deep)', marginBottom: 10 }}>{col.label}</div>
                    {[col.heat, col.cold, col.rest].map((s, j) => (
                      <div key={j} style={{ display: 'flex', gap: 8, padding: '6px 0', fontSize: 12.5, borderTop: j === 0 ? 'none' : '1px solid var(--line)', color: 'var(--text-2)', lineHeight: 1.4 }}>
                        <span style={{ fontFamily: 'var(--mono)', fontSize: 10, color: j === 0 ? 'var(--ember)' : j === 1 ? '#38bdf8' : 'var(--text-3)', flexShrink: 0, marginTop: 1 }}>{j === 0 ? 'H' : j === 1 ? 'C' : 'R'}</span>
                        <span>{s}</span>
                      </div>
                    ))}
                  </div>
                )
              )}
            </div>

            {/* Section 3 */}
            <SectionH2>Sauna First or Cold Plunge First?</SectionH2>

            <BodyP>
              Sauna first. The Finnish protocol - which generated the bulk of the cardiovascular research data - always leads with heat. Physiologically, heating the body first and then applying cold produces greater norepinephrine release than cold applied to an unheated body. The vasodilation-then-vasoconstriction sequence is the mechanism that produces the strongest vascular pump effect.
            </BodyP>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, margin: '22px 0' }}>
              <div style={{ background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 14, padding: 22 }}>
                <div style={{ fontFamily: 'var(--sans)', fontWeight: 700, fontSize: 14.5, marginBottom: 14, color: 'var(--text)' }}>Sauna first (recommended)</div>
                {[
                  'Stronger evidence base from Finnish research',
                  'Vasodilation then vasoconstriction maximizes vascular pump effect',
                  'Norepinephrine response is greater post-heat than pre-heat',
                  'Better supported for cardiovascular conditioning goal',
                ].map((s, i) => (
                  <div key={i} style={{ display: 'flex', gap: 10, padding: '8px 0', fontSize: 13.5, borderTop: i === 0 ? 'none' : '1px solid var(--line)', color: 'var(--text-2)', lineHeight: 1.5 }}>
                    <span style={{ color: 'var(--ember-deep)', fontFamily: 'var(--mono)', fontSize: 12, flexShrink: 0, marginTop: 1 }}>+</span>
                    <span>{s}</span>
                  </div>
                ))}
              </div>
              <div style={{ background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 14, padding: 22 }}>
                <div style={{ fontFamily: 'var(--sans)', fontWeight: 700, fontSize: 14.5, marginBottom: 14, color: 'var(--text)' }}>Cold first (specific use cases)</div>
                {[
                  'Pre-workout: cold pre-exercise may reduce perceived effort',
                  'Morning activation: cold then sauna is a valid morning routine',
                  'Less established for recovery and cardiovascular goals',
                  'Anecdotally popular - research base is thinner',
                ].map((s, i) => (
                  <div key={i} style={{ display: 'flex', gap: 10, padding: '8px 0', fontSize: 13.5, borderTop: i === 0 ? 'none' : '1px solid var(--line)', color: 'var(--text-2)', lineHeight: 1.5 }}>
                    <span style={{ color: 'var(--text-3)', fontFamily: 'var(--mono)', fontSize: 12, flexShrink: 0, marginTop: 1 }}>~</span>
                    <span>{s}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Section 4 */}
            <SectionH2>Temperature Guidelines</SectionH2>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18, margin: '22px 0' }}>
              <div style={{ background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 14, padding: 22 }}>
                <div className="eyebrow" style={{ marginBottom: 10, color: 'var(--ember-deep)' }}>Sauna temperature</div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 28, letterSpacing: '-0.02em', marginBottom: 10 }}>140-160°F</div>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--text-3)', marginBottom: 12 }}>(60-71°C)</div>
                <div style={{ fontSize: 13.5, color: 'var(--text-2)', lineHeight: 1.6 }}>
                  Optimal for contrast. Lower temps produce less vasodilation and weaker contrast effect. Above 160°F (71°C), cardiovascular strain increases without additional contrast benefit.
                </div>
              </div>
              <div style={{ background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 14, padding: 22 }}>
                <div className="eyebrow" style={{ marginBottom: 10, color: '#38bdf8' }}>Cold plunge temperature</div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 28, letterSpacing: '-0.02em', marginBottom: 10 }}>50-59°F</div>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--text-3)', marginBottom: 12 }}>(10-15°C)</div>
                <div style={{ fontSize: 13.5, color: 'var(--text-2)', lineHeight: 1.6 }}>
                  The most-studied range. Norepinephrine peaks at this temperature. Below 45°F (7°C) is not meaningfully more effective and increases cold shock risk.
                </div>
              </div>
            </div>

            <div style={{ background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 14, padding: 22, margin: '18px 0' }}>
              <div className="eyebrow" style={{ marginBottom: 12 }}>Cold shower alternative + duration progression</div>
              <BodyP style={{ marginBottom: 12 }}>
                Cold shower at 55-65°F (13-18°C) for 2-4 minutes is a valid alternative to a plunge. Less effective because partial immersion covers less body surface area simultaneously, but produces real sympathetic activation and recovery benefit.
              </BodyP>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
                {[
                  { period: 'Week 1-2', duration: '1-2 min cold' },
                  { period: 'Week 3-4', duration: '2-4 min cold' },
                  { period: '1+ month', duration: '3-5 min cold' },
                ].map((row, i) => (
                  <div key={i} style={{ borderTop: '1px solid var(--line)', paddingTop: 12 }}>
                    <div className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-3)', marginBottom: 4 }}>{row.period}</div>
                    <div style={{ fontFamily: 'var(--serif)', fontSize: 18, color: 'var(--text)' }}>{row.duration}</div>
                  </div>
                ))}
              </div>
            </div>

            {/* Section 5 */}
            <SectionH2>Benefits of the Combo vs Either Alone</SectionH2>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16, margin: '22px 0' }}>
              {[
                {
                  title: 'Endorphin and dopamine release',
                  body: 'Cold immersion after heat produces larger beta-endorphin and dopamine spikes than either modality alone. The parasympathetic rebound from heat combined with the sympathetic surge from cold creates a compound neurochemical effect most regular users describe as the clearest mood lift they experience.',
                },
                {
                  title: 'Recovery',
                  body: 'Reduced delayed onset muscle soreness (DOMS) in post-exercise contrast protocols. Some evidence for faster strength recovery compared to passive rest, particularly relevant for athletes training more than once per day.',
                },
                {
                  title: 'HRV and sleep',
                  body: 'Regular contrast therapy correlates with heart rate variability improvement in several small studies. Sleep architecture improvement is anecdotally common and supported by preliminary data - the parasympathetic rebound from the heat component appears to be the mechanism.',
                },
                {
                  title: 'Mental health',
                  body: 'Norepinephrine surges 2-3x baseline from cold (well-documented) combined with cortisol reduction from heat produces a compound mood effect. Not a clinical treatment, but a meaningful lifestyle tool. The effect is consistently reported across user populations.',
                },
              ].map((card, i) => (
                <div key={i} style={{ background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 14, padding: 22 }}>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 19, letterSpacing: '-0.012em', marginBottom: 10, lineHeight: 1.2 }}>{card.title}</div>
                  <div style={{ fontSize: 13.5, color: 'var(--text-2)', lineHeight: 1.6 }}>{card.body}</div>
                </div>
              ))}
            </div>

            {/* Section 6 */}
            <SectionH2>Equipment Needed</SectionH2>

            <div style={{ margin: '18px 0' }}>
              {[
                { label: 'Infrared sauna', body: 'Any infrared sauna works for the heat component of contrast therapy. See our best infrared saunas guide for tested recommendations.' },
                { label: 'Cold plunge', body: 'A dedicated plunge tub is ideal. For guidance on cold plunge equipment, ColdPlungeSpot.com covers this niche specifically.' },
                { label: 'Cold shower', body: 'Completely valid if a plunge is not available. Produces real benefit at lower cost and zero equipment investment. Run it 55-65°F (13-18°C) for 2-4 minutes minimum.' },
                { label: 'Thermometer', body: 'Recommended for plunge temperature verification. Water temperature gauges are inexpensive - don\'t rely on subjective feel, especially in early sessions.' },
              ].map((item, i) => (
                <div key={i} style={{ display: 'flex', gap: 18, padding: '16px 0', borderTop: '1px solid var(--line)' }}>
                  <div className="mono" style={{ flexShrink: 0, fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--ember-deep)', width: 110, paddingTop: 2 }}>{item.label}</div>
                  <div style={{ flex: 1, fontSize: 14.5, color: 'var(--text-2)', lineHeight: 1.6 }}>{item.body}</div>
                </div>
              ))}
            </div>

            <SectionH2>FAQ</SectionH2>
            <FAQ items={contrastFaq} />

            <div style={{ margin: '40px 0' }}>
              <CTABlock />
            </div>

            <AuthorBox />

            <Related items={contrastRelated} />

          </div>

          <aside>
            <HowtoRailNewsletter />
            <HowtoRailProductCard />
          </aside>

        </div>
      </div>

      <SiteFooter />
    </div>
  );
}

function SaunaColdPlungeRoutineMobile() {
  return (
    <div style={{ fontFamily: 'var(--sans)', color: 'var(--text)', background: 'var(--paper)', paddingBottom: 80 }}>
      <MobHeader />

      <div style={{ padding: '28px 18px 0' }}>
        <ArticleBreadcrumb section="How-To" page="Sauna and Cold Plunge Routine" />

        <h1 style={{ margin: '0 0 16px', fontSize: 30, lineHeight: 1.1, letterSpacing: '-0.02em' }}>
          The Sauna and Cold Plunge Routine: Protocol, Order, and What the Research Shows
        </h1>

        <p style={{ fontSize: 16, color: 'var(--text-2)', lineHeight: 1.55, fontFamily: 'var(--serif)', marginBottom: 20 }}>
          Contrast therapy has a stronger evidence base than either modality alone. Here is the protocol and the physiology.
        </p>

        <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingBottom: 20, borderBottom: '1px solid var(--line)', marginBottom: 24 }}>
          <Ph w={38} h={38} label="MB" style={{ borderRadius: 999, flexShrink: 0 }} />
          <div>
            <div style={{ fontSize: 13.5, fontFamily: 'var(--serif)' }}>Dr. Mira Brandt, PhD</div>
            <div className="mono" style={{ fontSize: 10, letterSpacing: '0.08em', color: 'var(--text-3)' }}>May 2026</div>
          </div>
          <Disclose />
        </div>

        <HowtoQuickAnswer>
          Sauna 15-20 min at 140-160°F (60-71°C) - cold plunge 2-5 min at 50-59°F (10-15°C) - rest 5-10 min. Repeat 2-3 rounds. Sauna goes first.
        </HowtoQuickAnswer>

        <h2 style={{ fontSize: 26, margin: '36px 0 12px', letterSpacing: '-0.015em' }}>Why Contrast Therapy Works</h2>
        <BodyP>Heat causes vasodilation - blood flows to the periphery, cardiac output rises to 13 L/min equivalent. Cold causes vasoconstriction - norepinephrine surges 3-5x baseline. The alternating sequence creates a vascular pump effect stronger than either alone.</BodyP>

        <h2 style={{ fontSize: 26, margin: '36px 0 12px', letterSpacing: '-0.015em' }}>The Standard Protocol</h2>
        <div style={{ margin: '16px 0' }}>
          {contrastSteps.map((step, i) => (
            <ContrastStep key={i} number={i + 1} title={step.title}>{step.body}</ContrastStep>
          ))}
        </div>

        <h2 style={{ fontSize: 26, margin: '36px 0 12px', letterSpacing: '-0.015em' }}>Sauna First or Cold First?</h2>
        <BodyP>Sauna first. The Finnish protocol - and the bulk of cardiovascular research - always leads with heat. Vasodilation then vasoconstriction produces greater norepinephrine release and stronger cardiovascular effect than cold-first.</BodyP>

        <HowtoCallout>
          Cold-first is valid for morning activation or pre-workout. The research base for cardiovascular and recovery outcomes is much thinner than sauna-first.
        </HowtoCallout>

        <h2 style={{ fontSize: 26, margin: '36px 0 12px', letterSpacing: '-0.015em' }}>Temperature Guidelines</h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, margin: '16px 0' }}>
          <div style={{ background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 12, padding: 18 }}>
            <div className="eyebrow" style={{ color: 'var(--ember-deep)', marginBottom: 8 }}>Sauna</div>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 24, letterSpacing: '-0.02em' }}>140-160°F (60-71°C)</div>
          </div>
          <div style={{ background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 12, padding: 18 }}>
            <div className="eyebrow" style={{ color: '#38bdf8', marginBottom: 8 }}>Cold plunge</div>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 24, letterSpacing: '-0.02em' }}>50-59°F (10-15°C)</div>
            <div style={{ fontSize: 13, color: 'var(--text-2)', marginTop: 8 }}>Build up: 1-2 min weeks 1-2, 2-4 min weeks 3-4, 3-5 min after 1 month.</div>
          </div>
          <div style={{ background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 12, padding: 18 }}>
            <div className="eyebrow" style={{ color: 'var(--text-3)', marginBottom: 8 }}>Cold shower alternative</div>
            <div style={{ fontSize: 13.5, color: 'var(--text-2)', lineHeight: 1.6 }}>55-65°F (13-18°C) for 2-4 min. Produces real benefit. Less effective than immersion but completely valid.</div>
          </div>
        </div>

        <h2 style={{ fontSize: 26, margin: '36px 0 12px', letterSpacing: '-0.015em' }}>Benefits of the Combo</h2>
        <BodyP>Larger beta-endorphin and dopamine release than either alone. Reduced DOMS post-exercise. HRV improvement. Sleep architecture improvement. Compound mood effect from norepinephrine surge (cold) plus cortisol reduction (heat).</BodyP>

        <h2 style={{ fontSize: 26, margin: '36px 0 12px', letterSpacing: '-0.015em' }}>Equipment</h2>
        <BodyP>Any infrared sauna for heat. Dedicated plunge tub or cold shower for cold. Thermometer recommended - don't rely on feel for plunge temperature in early sessions.</BodyP>

        <h2 style={{ fontSize: 26, margin: '36px 0 12px', letterSpacing: '-0.015em' }}>FAQ</h2>
        <FAQ items={contrastFaq} />

        <div style={{ margin: '32px 0' }}>
          <CTABlock />
        </div>

        <AuthorBox />
      </div>

      <MobStickyHowto label="Best saunas →" href="/best/best-infrared-saunas/" />
    </div>
  );
}

function SaunaColdPlungeRoutine({ mobile = false }) {
  return mobile ? <SaunaColdPlungeRoutineMobile /> : <SaunaColdPlungeRoutineDesktop />;
}

// ============================================================
// EXPORTS
// ============================================================

Object.assign(window, {
  InfraredSaunaSessionGuide,
  WhatToWearInfraredSauna,
  HowLongInfraredSauna,
  SaunaColdPlungeRoutine,
});
