// Option 2: Bold confident — black hero, oversized type, blue accent stripe.
// Responsive: mobile (≤640), tablet (641-1023), desktop (≥1024).

const O2_C = {
  bg: '#FFFFFF',
  ink: '#0B0D10',
  blue: '#2B7FBF',
  blueDark: '#1F5E8F',
  steel: '#62707E',
  pale: '#F2F4F7',
};

const O2_PHOTOS = {
  a: { src: 'assets/hannah-deadlift.jpg', pos: '50% 30%' },
  b: { src: 'assets/hannah-gym.jpg', pos: '50% 50%' },
  c: { src: 'assets/hannah-portrait.jpg', pos: '50% 30%' },
  d: { src: 'assets/hannah-rig.jpg', pos: '50% 35%' },
  e: { src: 'assets/hannah-press.jpg', pos: '50% 40%' },
  f: { src: 'assets/hannah-rings.jpg', pos: '50% 35%' },
};

// External destinations. null = not yet wired; button still renders, just inert.
// Flow: Stripe Payment Link collects payment, then redirects to Cal.com for time-bound services to schedule.
const O2_LINKS = {
  stripeStrategy:    'https://buy.stripe.com/28EeVd7gg7wHeI28kxbQY00', // $75  · redirects to Cal.com strategycall
  stripe1on1:        'https://buy.stripe.com/28EaEXdEEcR1fM644hbQY01', // $110 · redirects to Cal.com personalsession
  stripe5Pack:       'https://buy.stripe.com/cNifZh3003gr1Vg58lbQY02', // $500 · 5 × 1:1 sessions
  stripe10Pack:      'https://buy.stripe.com/00wfZh1VW7wH43ogR3bQY03', // $950 · 10 × 1:1 sessions
  stripeCustomBlock: 'https://buy.stripe.com/00wbJ13003gr9nI44hbQY04', // $800 · 12-week build
  stripeFloorPlan:   'https://buy.stripe.com/9B69AT1VW6sD0Rc58lbQY05', // $59  · PDF delivered via Stripe's post-payment redirect
  calStrategy:       'https://cal.com/hannah-crowell/strategycall',    // post-payment redirect target
  cal1on1:           'https://cal.com/hannah-crowell/personalsession', // post-payment redirect target
  calDiscovery:      'https://cal.com/hannah-crowell/discovery-call',  // free 15-min — no Stripe (intentional)
  instagram:         'https://www.instagram.com/coachhhannah/',
  email:             null,
};

// Inject responsive stylesheet once
if (typeof document !== 'undefined' && !document.getElementById('o2-styles')) {
  const s = document.createElement('style');
  s.id = 'o2-styles';
  s.textContent = `
    .o2-root { --pad: 48px; }
    .o2-nav { display: flex; align-items: center; justify-content: space-between; padding: 20px var(--pad); background: ${O2_C.ink}; color: ${O2_C.bg}; gap: 16px; flex-wrap: wrap; }
    .o2-nav-links { display: flex; gap: 32px; font-size: 13px; font-weight: 500; }
    .o2-nav-links a { color: ${O2_C.bg}; text-decoration: none; }
    .o2-nav-cta { background: ${O2_C.blue}; color: ${O2_C.ink}; border: none; padding: 12px 22px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; cursor: pointer; display: inline-block; text-align: center; text-decoration: none; }

    .o2-hero { background: ${O2_C.ink}; color: ${O2_C.bg}; padding: 0 var(--pad); position: relative; overflow: hidden; }
    .o2-hero-grid { display: grid; grid-template-columns: 1.3fr 1fr; min-height: 720px; gap: 0; }
    .o2-hero-text { padding: 80px 0; display: flex; flex-direction: column; justify-content: center; }
    .o2-hero-h1 { font-family: Anton, sans-serif; font-size: clamp(72px, 13vw, 168px); line-height: 0.84; margin: 0; text-transform: uppercase; letter-spacing: -0.015em; }
    .o2-hero-sub { font-size: clamp(15px, 1.4vw, 18px); line-height: 1.55; margin: 32px 0 36px; color: rgba(255,255,255,0.72); max-width: 480px; font-weight: 400; }
    .o2-hero-stats { display: flex; gap: 40px; margin-top: 56px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.15); flex-wrap: wrap; }
    .o2-hero-photo-wrap { position: relative; margin: 40px 0; }

    .o2-eyebrow { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: ${O2_C.blue}; font-weight: 700; display: flex; align-items: center; gap: 12px; }
    .o2-btn-primary { background: ${O2_C.blue}; color: ${O2_C.ink}; border: none; padding: 20px 32px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; cursor: pointer; display: inline-block; text-align: center; text-decoration: none; }
    .o2-btn-secondary { background: transparent; color: ${O2_C.bg}; border: 1.5px solid rgba(255,255,255,0.4); padding: 20px 32px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; cursor: pointer; display: inline-block; text-align: center; text-decoration: none; }
    .o2-btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

    .o2-section { padding: 96px var(--pad); }
    .o2-section-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 56px; gap: 32px; flex-wrap: wrap; }
    .o2-h2 { font-family: Anton, sans-serif; font-size: clamp(48px, 7vw, 96px); line-height: 0.9; margin: 0; text-transform: uppercase; }
    .o2-h2-big { font-family: Anton, sans-serif; font-size: clamp(56px, 11vw, 144px); line-height: 0.86; margin: 0; text-transform: uppercase; letter-spacing: -0.01em; }

    .o2-services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }

    .o2-stripe { background: ${O2_C.blue}; color: ${O2_C.ink}; padding: 24px var(--pad); display: flex; align-items: center; justify-content: space-between; font-family: Anton, sans-serif; font-size: clamp(18px, 2.4vw, 28px); text-transform: uppercase; letter-spacing: 0.04em; flex-wrap: wrap; gap: 12px; }

    .o2-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
    .o2-about-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; aspect-ratio: 1; }

    .o2-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

    .o2-cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

    .o2-footer { background: ${O2_C.ink}; color: rgba(255,255,255,0.6); padding: 32px var(--pad); display: flex; justify-content: space-between; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.1); flex-wrap: wrap; gap: 16px; }

    /* Tablet */
    @media (max-width: 1023px) {
      .o2-root { --pad: 32px; }
      .o2-hero-grid { grid-template-columns: 1fr; min-height: auto; }
      .o2-hero-text { padding: 64px 0 32px; }
      .o2-hero-photo-wrap { margin: 0 0 48px; height: 480px; }
      .o2-hero-photo-wrap > div:first-child { margin-left: 0 !important; }
      .o2-services { grid-template-columns: repeat(2, 1fr); }
      .o2-about-grid { grid-template-columns: 1fr; gap: 40px; }
      .o2-about-photos { aspect-ratio: 16/9; }
      .o2-quotes { grid-template-columns: 1fr 1fr; }
      .o2-section { padding: 72px var(--pad); }
    }

    /* Mobile */
    @media (max-width: 640px) {
      .o2-root { --pad: 20px; }
      .o2-nav { padding: 16px var(--pad); }
      .o2-nav-links { display: none; }
      .o2-hero-text { padding: 48px 0 24px; }
      .o2-hero-stats { gap: 24px; margin-top: 40px; padding-top: 20px; }
      .o2-hero-photo-wrap { height: 380px; margin-bottom: 32px; }
      .o2-section { padding: 56px var(--pad); }
      .o2-section-head { margin-bottom: 36px; gap: 16px; }
      .o2-services { grid-template-columns: 1fr; }
      .o2-about-photos { aspect-ratio: 4/3; }
      .o2-quotes { grid-template-columns: 1fr; }
      .o2-btn-primary, .o2-btn-secondary { padding: 16px 24px; font-size: 12px; flex: 1; min-width: 140px; }
      .o2-btn-row { width: 100%; }
      .o2-cta { padding: 80px var(--pad) !important; }
      .o2-footer { flex-direction: column; align-items: flex-start; }
      .o2-stripe { justify-content: center; padding: 20px var(--pad); }
      .o2-stripe-star { display: none; }
    }
  `;
  document.head.appendChild(s);
}

const o2Img = (h, label, tone) => {
  const p = O2_PHOTOS[tone] || O2_PHOTOS.a;
  return (
    <div style={{
      width: '100%', height: h, position: 'relative', overflow: 'hidden',
      background: '#1A2330',
    }}>
      <img src={p.src} alt={label} style={{
        position: 'absolute', inset: 0, width: '100%', height: '100%',
        objectFit: 'cover', objectPosition: p.pos,
      }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.5) 100%)' }} />
      <div style={{
        position: 'absolute', bottom: 12, left: 12,
        fontSize: 9, letterSpacing: '0.18em', textTransform: 'uppercase',
        color: 'rgba(255,255,255,0.95)', fontWeight: 600,
        textShadow: '0 1px 4px rgba(0,0,0,0.5)',
      }}>{label}</div>
    </div>
  );
};

function O2Nav() {
  return (
    <nav className="o2-nav">
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <img src="assets/logo.png" alt="" style={{ width: 40, height: 40, objectFit: 'contain' }} />
        <div style={{ fontFamily: 'Anton, sans-serif', fontSize: 20, letterSpacing: '0.06em' }}>ONE STRENGTH</div>
      </div>
      <div className="o2-nav-links">
        <a>Train 1:1</a>
        <a>Programs</a>
        <a>Remote</a>
        <a href={O2_LINKS.instagram} target="_blank" rel="noopener noreferrer">About</a>
      </div>
      <a className="o2-nav-cta" href={O2_LINKS.stripe1on1} target="_blank" rel="noopener noreferrer">Book Now →</a>
    </nav>
  );
}

function O2Hero() {
  return (
    <section className="o2-hero">
      <div className="o2-hero-grid">
        <div className="o2-hero-text">
          <div className="o2-eyebrow" style={{ marginBottom: 28, fontWeight: 600 }}>
            <span style={{ width: 28, height: 2, background: O2_C.blue }} />
            Personal training & nutrition coaching · YYC
          </div>
          <h1 className="o2-hero-h1">
            <span style={{ display: 'block' }}>Get</span>
            <span style={{ display: 'block', color: O2_C.blue }}>Strong.</span>
            <span style={{ display: 'block' }}>Stay loud.</span>
          </h1>
          <p className="o2-hero-sub">
            <em style={{ color: O2_C.blue, fontStyle: 'normal', fontWeight: 600 }}>Lift heavy. Stand tall. Take up space.</em>
            {' '}Coach Hannah Crowell — personal training and nutrition coaching for men and women who are ready to build real strength.
          </p>
          <div className="o2-btn-row">
            <a className="o2-btn-primary" href={O2_LINKS.stripe1on1} target="_blank" rel="noopener noreferrer">Book a 1:1 →</a>
            <a className="o2-btn-secondary" href="#services">Browse Programs</a>
          </div>
          <div className="o2-hero-stats">
            {[['140+', 'Clients coached'], ['4+ yrs', 'At Elevate YYC'], ['CSEP', 'Certified · Nutrition']].map(([k, v]) => (
              <div key={k}>
                <div style={{ fontFamily: 'Anton, sans-serif', fontSize: 'clamp(28px, 3.5vw, 36px)', color: O2_C.blue, lineHeight: 1 }}>{k}</div>
                <div style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)', marginTop: 4 }}>{v}</div>
              </div>
            ))}
          </div>
        </div>
        <div className="o2-hero-photo-wrap">
          <div style={{ position: 'absolute', inset: 0, marginLeft: 32 }}>{o2Img('100%', 'HANNAH C. · ELEVATE YYC', 'e')}</div>
          <div style={{
            position: 'absolute', bottom: 24, right: 24, padding: '16px 20px',
            background: O2_C.blue, color: O2_C.ink, maxWidth: 220,
          }}>
            <div style={{ fontFamily: 'Anton, sans-serif', fontSize: 'clamp(36px, 5vw, 56px)', lineHeight: 0.9 }}>+80<span style={{ fontSize: '0.43em' }}>LB</span></div>
            <div style={{ fontSize: 12, fontWeight: 600, marginTop: 4, lineHeight: 1.4 }}>Average DL gain<br />in 12 weeks</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function O2ServiceCard({ idx, title, kind, desc, price, priceNote, cta, ctaUrl, photo, primary, packs }) {
  const ctaStyle = {
    background: primary ? O2_C.blue : O2_C.ink,
    color: primary ? O2_C.ink : O2_C.bg,
    border: 'none', padding: '14px 18px', fontSize: 11,
    letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 700, cursor: 'pointer',
    whiteSpace: 'nowrap', display: 'inline-block', textDecoration: 'none', textAlign: 'center',
  };
  const ctaEl = ctaUrl
    ? <a href={ctaUrl} target="_blank" rel="noopener noreferrer" style={ctaStyle}>{cta} →</a>
    : <button style={ctaStyle}>{cta} →</button>;
  return (
    <article style={{
      background: primary ? O2_C.ink : O2_C.bg,
      color: primary ? O2_C.bg : O2_C.ink,
      border: primary ? 'none' : `1px solid ${O2_C.ink}`,
      padding: 0, display: 'flex', flexDirection: 'column', position: 'relative',
    }}>
      <div style={{ padding: '24px 28px 0', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 8 }}>
        <div style={{ fontFamily: 'Anton, sans-serif', fontSize: 14, letterSpacing: '0.14em', color: primary ? O2_C.blue : O2_C.steel }}>0{idx} / {kind}</div>
        {primary && (
          <div style={{ background: O2_C.blue, color: O2_C.ink, padding: '4px 8px', fontSize: 10, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', whiteSpace: 'nowrap' }}>Most Popular</div>
        )}
      </div>
      <div style={{ padding: '20px 28px 0' }}>{o2Img(160, kind, photo)}</div>
      <div style={{ padding: '24px 28px 0', flex: 1 }}>
        <h3 style={{ fontFamily: 'Anton, sans-serif', fontSize: 'clamp(28px, 3vw, 36px)', lineHeight: 0.95, margin: 0, marginBottom: 12, textTransform: 'uppercase' }}>{title}</h3>
        <p style={{ fontSize: 14, lineHeight: 1.55, color: primary ? 'rgba(255,255,255,0.7)' : O2_C.steel, margin: 0, marginBottom: 24 }}>{desc}</p>
      </div>
      <div style={{ padding: '0 28px 24px', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', borderTop: primary ? '1px solid rgba(255,255,255,0.15)' : `1px solid ${O2_C.ink}`, marginTop: 8, paddingTop: 16, gap: 12 }}>
        <div>
          <div style={{ fontFamily: 'Anton, sans-serif', fontSize: 32, lineHeight: 1 }}>{price}</div>
          <div style={{ fontSize: 11, letterSpacing: '0.1em', color: primary ? 'rgba(255,255,255,0.55)' : O2_C.steel, marginTop: 2, textTransform: 'uppercase' }}>{priceNote}</div>
        </div>
        {ctaEl}
      </div>
      {packs && (
        <div style={{ padding: '0 28px 24px', display: 'flex', gap: 14, fontSize: 11, letterSpacing: '0.08em', flexWrap: 'wrap', alignItems: 'center', marginTop: -4 }}>
          <span style={{ color: primary ? 'rgba(255,255,255,0.5)' : O2_C.steel, textTransform: 'uppercase', fontWeight: 600 }}>Or:</span>
          {packs.map((p, i) => p.url ? (
            <a key={i} href={p.url} target="_blank" rel="noopener noreferrer" style={{ color: primary ? O2_C.blue : O2_C.ink, fontWeight: 700, textDecoration: 'underline', textTransform: 'uppercase' }}>{p.label}</a>
          ) : (
            <span key={i} style={{ color: primary ? 'rgba(255,255,255,0.35)' : O2_C.steel, textTransform: 'uppercase', opacity: 0.5 }}>{p.label}</span>
          ))}
        </div>
      )}
    </article>
  );
}

function O2Services() {
  return (
    <section id="services" className="o2-section" style={{ background: O2_C.bg }}>
      <div className="o2-section-head">
        <div>
          <div className="o2-eyebrow" style={{ marginBottom: 12 }}>How we'll work together</div>
          <h2 className="o2-h2">
            Pick your<br /><span style={{ color: O2_C.blue }}>weapon.</span>
          </h2>
        </div>
        <div style={{ maxWidth: 320, fontSize: 14, color: O2_C.steel, lineHeight: 1.55 }}>
          Whether you want full-send custom coaching or just a smart program to follow on your own, there's a way in.
        </div>
      </div>
      <div className="o2-services">
        <O2ServiceCard idx="1" kind="Self-paced" title="Floor Plan" desc="My standard 8-week strength template. Three sessions a week, any commercial gym, video demos for every lift." price="$59" priceNote="One-time · PDF" cta="Buy" ctaUrl={O2_LINKS.stripeFloorPlan} photo="b" />
        <O2ServiceCard idx="2" kind="Remote" title="Strategy Call" desc="A 45-minute video session — audit your training, fix sticking points, plan your next block. You leave with a written action plan." price="$75" priceNote="One-off · 45 min" cta="Book" ctaUrl={O2_LINKS.stripeStrategy} photo="f" />
        <O2ServiceCard idx="3" kind="In-person · YYC" title="1:1 Session" desc="Hands-on coaching at Elevate YYC. Real cues, real corrections, real PRs." price="$110" priceNote="Per session" cta="Book" ctaUrl={O2_LINKS.stripe1on1} packs={[{ label: '5-Pack · $500', url: O2_LINKS.stripe5Pack }, { label: '10-Pack · $950', url: O2_LINKS.stripe10Pack }]} photo="a" primary />
        <O2ServiceCard idx="4" kind="12-week build" title="Custom Block" desc="A program built around you — body, schedule, gear, goals. Weekly check-ins, unlimited form review, programming I'm proud of." price="$800" priceNote="One-time · 12 wk" cta="Apply" ctaUrl={O2_LINKS.stripeCustomBlock} photo="d" />
      </div>
    </section>
  );
}

function O2Stripe() {
  return (
    <div className="o2-stripe">
      <span>Lift Heavy.</span>
      <span className="o2-stripe-star" style={{ opacity: 0.5 }}>★</span>
      <span>Stand Tall.</span>
      <span className="o2-stripe-star" style={{ opacity: 0.5 }}>★</span>
      <span>Take Up Space.</span>
      <span className="o2-stripe-star" style={{ opacity: 0.5 }}>★</span>
      <span>Repeat.</span>
    </div>
  );
}

function O2About() {
  return (
    <section className="o2-section" style={{ background: O2_C.pale }}>
      <div className="o2-about-grid">
        <div>
          <div className="o2-eyebrow" style={{ marginBottom: 16 }}>The Coach</div>
          <h2 className="o2-h2" style={{ marginBottom: 28 }}>
            Hi, I'm<br />Hannah.
          </h2>
          <p style={{ fontSize: 'clamp(16px, 1.5vw, 19px)', lineHeight: 1.55, color: O2_C.ink, marginBottom: 20, maxWidth: 540, fontWeight: 400 }}>
            I'm a personal trainer and nutrition coach based in Calgary 📍 helping men and women build strength, confidence, and real results.
          </p>
          <p style={{ fontSize: 15, lineHeight: 1.65, color: O2_C.steel, maxWidth: 540, marginBottom: 36 }}>
            I didn't grow up loving the gym — I found it after stepping away from sports, and over the last 4+ years it's become more than just training. It's been a way to rebuild confidence and push past limits. Now I help others do the same.
          </p>
          <button style={{
            background: O2_C.ink, color: O2_C.bg, border: 'none',
            padding: '16px 24px', fontSize: 12, letterSpacing: '0.14em',
            textTransform: 'uppercase', fontWeight: 700, cursor: 'pointer',
          }}>Read my story →</button>
        </div>
        <div className="o2-about-photos">
          <div style={{ gridRow: 'span 2' }}>{o2Img('100%', 'COACH HANNAH', 'c')}</div>
          <div>{o2Img('100%', 'ELEVATE YYC', 'b')}</div>
          <div>{o2Img('100%', 'CLIENT WORK', 'f')}</div>
        </div>
      </div>
    </section>
  );
}

function O2QuoteCard({ q, name, role }) {
  return (
    <div style={{ padding: 28, background: O2_C.bg, border: `1px solid ${O2_C.ink}` }}>
      <div style={{ fontFamily: 'Anton, sans-serif', fontSize: 60, color: O2_C.blue, lineHeight: 0.5, marginBottom: 16 }}>"</div>
      <div style={{ fontSize: 16, lineHeight: 1.55, color: O2_C.ink, marginBottom: 24 }}>{q}</div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderTop: `1px solid ${O2_C.pale}`, paddingTop: 16, gap: 12, flexWrap: 'wrap' }}>
        <div>
          <div style={{ fontWeight: 700, fontSize: 14 }}>{name}</div>
          <div style={{ fontSize: 12, color: O2_C.steel, letterSpacing: '0.04em' }}>{role}</div>
        </div>
        <div style={{ color: O2_C.blue, letterSpacing: '0.1em' }}>★★★★★</div>
      </div>
    </div>
  );
}

function O2Social() {
  return (
    <section className="o2-section" style={{ background: O2_C.bg }}>
      <div className="o2-section-head">
        <h2 className="o2-h2">
          What clients<br />actually say.
        </h2>
        <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
          <div style={{ fontFamily: 'Anton, sans-serif', fontSize: 'clamp(56px, 7vw, 80px)', color: O2_C.blue, lineHeight: 1 }}>4.9</div>
          <div style={{ fontSize: 13, color: O2_C.steel, letterSpacing: '0.04em', maxWidth: 160, lineHeight: 1.5 }}>Average across 80+ written reviews from clients past & present.</div>
        </div>
      </div>
      <div className="o2-quotes">
        <O2QuoteCard q="Hannah added 80 pounds to my deadlift in twelve weeks. More importantly she taught me how to stop apologizing for taking up space in a weight room." name="Mara K." role="Custom Block · Calgary" />
        <O2QuoteCard q="I came in nervous and left running a 1.5x bodyweight back squat. The programming is meticulous and the coaching is actually honest." name="Jess T." role="1:1 · 2 yrs" />
        <O2QuoteCard q="Booked a remote consult before my first powerlifting meet. Hannah rebuilt my warm-ups and peak week — I hit three PRs on the platform." name="Priya S." role="Strategy · Remote" />
      </div>
    </section>
  );
}

function O2CTA() {
  return (
    <section className="o2-cta" style={{
      background: O2_C.ink, color: O2_C.bg, padding: '120px 48px',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'repeating-linear-gradient(45deg, transparent 0 40px, rgba(43,127,191,0.08) 40px 41px)',
      }} />
      <div style={{ position: 'relative', textAlign: 'center', maxWidth: 920, margin: '0 auto' }}>
        <div className="o2-eyebrow" style={{ marginBottom: 24, justifyContent: 'center' }}>Free 15-min discovery call</div>
        <h2 className="o2-h2-big" style={{ marginBottom: 32 }}>
          Show up<br /><span style={{ color: O2_C.blue }}>strong.</span>
        </h2>
        <p style={{ fontSize: 'clamp(15px, 1.5vw, 19px)', lineHeight: 1.5, color: 'rgba(255,255,255,0.7)', maxWidth: 560, margin: '0 auto 40px' }}>
          Tell me where you're at. I'll tell you what's actually going to move the needle.
        </p>
        <div className="o2-cta-buttons">
          <a className="o2-btn-primary" href={O2_LINKS.calDiscovery} target="_blank" rel="noopener noreferrer">Book Discovery →</a>
          <a className="o2-btn-secondary" href={O2_LINKS.instagram} target="_blank" rel="noopener noreferrer" style={{ borderColor: 'rgba(255,255,255,0.5)' }}>@coachhhannah</a>
        </div>
      </div>
    </section>
  );
}

function O2Footer() {
  return (
    <footer className="o2-footer">
      <div>© 2026 ONE STRENGTH · CALGARY</div>
      <div style={{ display: 'flex', gap: 24 }}>
        <a style={{ color: 'inherit' }} href={O2_LINKS.instagram} target="_blank" rel="noopener noreferrer">Instagram</a>
        <a style={{ color: 'inherit' }} href={O2_LINKS.stripeStrategy} target="_blank" rel="noopener noreferrer">Schedule</a>
      </div>
    </footer>
  );
}

function Option2() {
  return (
    <div className="o2-root" style={{ background: O2_C.bg, color: O2_C.ink, fontFamily: 'Inter, system-ui, sans-serif' }}>
      <O2Nav />
      <O2Hero />
      <O2Stripe />
      <O2Services />
      <O2About />
      <O2Social />
      <O2CTA />
      <O2Footer />
    </div>
  );
}

window.Option2 = Option2;