function HomePillarStrip() {
  const pillars = [
    { n: '01', t: 'Clean\nEnergy', d: '140mg green tea caffeine, 500mg Cognizin®, 200mg CognatiQ®. Smooth focus, zero crash.' },
    { n: '02', t: 'Peptide\nPerformance', d: '20g protein + 2.4g clinical-dose PeptiStrong® peptides. Strength, recovery, output.' },
    { n: '03', t: 'RTD\nConvenience', d: '12 fl oz. Shelf-stable. Built for the gym bag, the desk, the back of the fridge.' },
  ];
  return (
    <section style={{ background: 'var(--bm-ink)', color: 'var(--bm-paper)', padding: '120px 80px', position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0,
        background: "url('assets/facets-black.png') center / cover no-repeat",
        opacity: 0.85,
        pointerEvents: 'none',
      }} />
      <div style={{ position: 'relative', zIndex: 1 }}>
        <Eyebrow color="var(--bm-pink)">What we stand for</Eyebrow>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontWeight: 900,
          fontSize: 88, lineHeight: 0.9, letterSpacing: '-0.02em',
          textTransform: 'uppercase', marginTop: 16, maxWidth: 900, color: 'var(--bm-paper)',
        }}>Three pillars.<br/>No compromises.</h2>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 48, marginTop: 64 }}>
          {pillars.map(p => (
            <div key={p.n} style={{ borderTop: '4px solid var(--bm-pink)', paddingTop: 24 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 16, color: 'var(--bm-pink)', letterSpacing: '0.04em' }}>{p.n}</div>
              <div style={{
                fontFamily: 'var(--font-display)', fontWeight: 800,
                fontSize: 48, lineHeight: 0.95, textTransform: 'uppercase',
                marginTop: 12, letterSpacing: '-0.01em', whiteSpace: 'pre-line',
                color: 'var(--bm-paper)',
              }}>{p.t}</div>
              <p style={{ fontSize: 16, lineHeight: 1.5, marginTop: 16, color: 'rgba(244,239,228,0.78)' }}>{p.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomeProductGrid() {
  return (
    <section style={{ background: 'var(--bm-ink)', padding: '120px 80px', color: 'var(--bm-paper)', position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0,
        background: "url('assets/facets-navy.png') center / cover no-repeat",
        opacity: 0.55,
        pointerEvents: 'none',
      }} />
      <div style={{ position: 'relative', zIndex: 1, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48, flexWrap: 'wrap', gap: 24 }}>
        <div>
          <Eyebrow color="var(--bm-pink)">The lineup · 6 flavors</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 900,
            fontSize: 88, lineHeight: 0.9, letterSpacing: '-0.02em',
            textTransform: 'uppercase', marginTop: 16, color: 'var(--bm-paper)',
          }}>Pick your<br/>weapon.</h2>
        </div>
        <Link to="/shop" style={{ fontFamily: 'var(--font-text)', fontWeight: 700, fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--bm-pink)', textDecoration: 'none' }}>See all flavors →</Link>
      </div>

      <div style={{ position: 'relative', zIndex: 1, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
        {SITE_PRODUCTS.map(p => (
          <Link key={p.id} to={`/product/${p.id}`} className="bm-product-card" style={{
            background: p.bg, borderRadius: 12, padding: 32,
            cursor: 'pointer', position: 'relative', overflow: 'hidden',
            minHeight: 420, display: 'flex', flexDirection: 'column',
            border: `2px solid ${p.dark ? p.bg : 'var(--bm-ink)'}`,
            boxShadow: `8px 8px 0 0 ${p.dark ? 'var(--bm-pink)' : 'var(--bm-ink)'}`,
            textDecoration: 'none',
            transition: 'transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out)',
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
              <Capsule tone={p.dark ? 'blue' : 'pink'} style={{ fontSize: 10 }}>
                {p.line}
              </Capsule>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: p.accent, letterSpacing: '0.08em', whiteSpace: 'nowrap' }}>12 FL OZ</span>
            </div>
            <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '16px 0' }}>
              <img src={p.img} style={{ maxHeight: 280, maxWidth: '80%', width: 'auto', height: 'auto', objectFit: 'contain', filter: 'drop-shadow(6px 8px 0 rgba(10,10,10,0.18))' }} />
            </div>
            <div>
              <div style={{
                fontFamily: 'var(--font-display)', fontWeight: 800,
                fontSize: 28, lineHeight: 1, textTransform: 'uppercase',
                color: p.accent, letterSpacing: '-0.01em',
              }}>{p.flavor}</div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 14 }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: p.accent, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Coming soon</span>
                <span style={{ fontFamily: 'var(--font-text)', fontWeight: 700, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: p.accent }}>Learn more →</span>
              </div>
            </div>
          </Link>
        ))}
      </div>
    </section>
  );
}

function HomeScienceStrip() {
  const pillars = [
    { num: '144%', label: 'Faster recovery', sub: 'Increased muscle recovery rate.', ref: '3', tint: 'pink' },
    { num: '47%', label: 'Less fatigue', sub: 'Reduced muscular fatigue post-exercise.', ref: '3', tint: 'pink' },
    { num: '17%', label: 'More strength', sub: 'Greater strength gains than training alone.', ref: '4', tint: 'pink' },
    { num: '24.9%', label: 'Improved cognitive accuracy', sub: 'N-back test, 200mg CognatiQ® single dose.', ref: '10', tint: 'blue' },
    { num: '35%', label: 'Improvement in processing speed', sub: 'Reaction time, 200mg/day, 28 days.', ref: '10', tint: 'blue' },
  ];
  return (
    <section style={{ background: 'var(--bm-paper-2)', padding: '120px 80px', position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0,
        background: "url('assets/facets-black.png') center / cover no-repeat",
        opacity: 0.18,
        pointerEvents: 'none',
      }} />
      <div style={{ position: 'relative', zIndex: 1, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48, flexWrap: 'wrap', gap: 24 }}>
        <div>
          <Eyebrow color="var(--bm-pink-deep)">Clinically proven · Both formulas</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 900,
            fontSize: 80, lineHeight: 0.95, letterSpacing: '-0.02em',
            textTransform: 'uppercase', marginTop: 16, maxWidth: 800,
          }}>The numbers<br/>don't lie.</h2>
        </div>
        <Link to="/science" style={{ fontFamily: 'var(--font-text)', fontWeight: 700, fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--bm-pink)', textDecoration: 'none' }}>Read the science →</Link>
      </div>

      <div style={{ position: 'relative', zIndex: 1, display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 20 }}>
        {pillars.map(p => {
          const accent = p.tint === 'blue' ? 'var(--bm-blue-deep)' : 'var(--bm-pink)';
          const shadow = p.tint === 'blue'
            ? '4px 4px 0 rgba(43, 182, 232, 0.18)'
            : '4px 4px 0 rgba(238, 61, 139, 0.18)';
          return (
            <div key={p.label} style={{
              background: '#fff', border: '2px solid var(--bm-ink)', borderRadius: 8,
              padding: 24, boxShadow: '6px 6px 0 0 var(--bm-ink)',
            }}>
              <div style={{
                fontFamily: 'var(--font-display)', fontWeight: 900,
                fontSize: 'clamp(48px, 4.5vw, 64px)', lineHeight: 0.9, letterSpacing: '-0.04em',
                color: accent,
                textShadow: shadow,
              }}>{p.num}<sup style={{ fontSize: 16, color: 'var(--bm-ink)', verticalAlign: 'super', marginLeft: 4 }}>{p.ref}</sup></div>
              <div style={{
                fontFamily: 'var(--font-display)', fontWeight: 800,
                fontSize: 19, lineHeight: 1.1, textTransform: 'uppercase',
                marginTop: 10, letterSpacing: '-0.01em',
                color: accent,
              }}>{p.label}</div>
              <p style={{ fontSize: 13, lineHeight: 1.5, marginTop: 8, color: 'var(--fg-2)' }}>{p.sub}</p>
            </div>
          );
        })}
      </div>
      <div style={{ position: 'relative', zIndex: 1, marginTop: 32, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)', letterSpacing: '0.04em', lineHeight: 1.7 }}>
        ³ Kerr et al., <em>Nutrients</em> 2023;15(4):986. RCT, healthy males, 2.4g PeptiStrong®/day. &nbsp;&nbsp; ⁴ RCT manuscript submitted; resistance training, 2.4g PeptiStrong®/day. &nbsp;&nbsp; ¹⁰ Robinson et al., <em>Nutrients</em> 2024 (PMC11279654). 200mg CognatiQ®.<br/>
        These statements have not been evaluated by the FDA. This product is not intended to diagnose, treat, cure, or prevent any disease.
      </div>
    </section>
  );
}

function HomeFounderStrip() {
  return (
    <section style={{ background: 'var(--bm-ink)', color: 'var(--bm-paper)', padding: '120px 80px', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, opacity: 0.5, background: "url('assets/facets-black.png') center/cover" }} />
      <div style={{ position: 'relative', zIndex: 1, display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'center' }}>
        <div>
          <Eyebrow color="var(--bm-pink)">Our Story</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 900,
            fontSize: 80, lineHeight: 0.92, letterSpacing: '-0.02em',
            textTransform: 'uppercase', marginTop: 16,
          }}>Built in<br/>adversity.</h2>
          <Link to="/about" style={{ display: 'inline-block', marginTop: 24, fontFamily: 'var(--font-text)', fontWeight: 700, fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--bm-pink)', textDecoration: 'none' }}>Read Jonathan's story →</Link>
        </div>
        <div>
          <p style={{ fontSize: 22, lineHeight: 1.5, color: 'rgba(244,239,228,0.85)' }}>
            "A spinal cord injury at birth put me in a power wheelchair at age two. At 28, the doctors gave me weeks to live. I wasn't done."
          </p>
          <p style={{ fontSize: 22, lineHeight: 1.5, marginTop: 16, color: 'rgba(244,239,228,0.85)' }}>
            "I built a formula. It changed the game — for me, for my family. My wife asked me how I felt. I told her I felt like I was living on Boss Mode™."
          </p>
          <div style={{ marginTop: 24, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--bm-pink)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>— Jonathan, Founder</div>
        </div>
      </div>
    </section>
  );
}

function HomeFoundersBanner() {
  const [email, setEmail] = React.useState('');
  const [submitted, setSubmitted] = React.useState(false);
  const onSubmit = (e) => {
    e.preventDefault();
    if (!email.includes('@')) return;
    try {
      const list = JSON.parse(localStorage.getItem('bm_waitlist') || '[]');
      list.push({ email, at: Date.now(), source: 'home_founders_banner' });
      localStorage.setItem('bm_waitlist', JSON.stringify(list));
    } catch {}
    if (typeof joinKlaviyoWaitlist === 'function') {
      joinKlaviyoWaitlist(email, 'Home Founders Banner', { tier: 'Founders' });
    }
    setSubmitted(true);
  };
  return (
    <section style={{
      position: 'relative', overflow: 'hidden',
      background: 'var(--bm-ink)', color: 'var(--bm-paper)',
      padding: '96px 80px',
    }}>
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0,
        background: "url('assets/facets-black.png') center / cover no-repeat",
        opacity: 0.85, pointerEvents: 'none',
      }} />
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse at 75% 50%, rgba(238,61,139,0.28) 0%, transparent 55%)',
        pointerEvents: 'none',
      }} />
      <div style={{
        position: 'relative', zIndex: 1,
        display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 56, alignItems: 'center',
      }}>
        <div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '7px 14px', borderRadius: 999,
            background: 'var(--bm-pink)', color: '#fff',
            fontFamily: 'var(--font-mono)', fontWeight: 700,
            fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
          }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: '#fff' }} />
            Limited · 500 founders only
          </div>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 900,
            fontSize: 'clamp(56px, 7.5vw, 104px)', lineHeight: 0.88, letterSpacing: '-0.03em',
            textTransform: 'uppercase', margin: '20px 0 0', color: 'var(--bm-paper)',
          }}>Join the<br/>Founders List.</h2>
          <p style={{ marginTop: 18, fontSize: 18, lineHeight: 1.5, color: 'rgba(244,239,228,0.78)', maxWidth: 520 }}>
            The first <strong style={{ color: 'var(--bm-paper)' }}>500 founders</strong> lock in an exclusive
            launch-day discount, ship-first priority, and a signed first-batch can.
          </p>
        </div>
        <div>
          {submitted ? (
            <div style={{
              background: 'var(--bm-pink)', padding: '24px 28px', borderRadius: 6,
              boxShadow: '6px 6px 0 0 rgba(244,239,228,0.95)',
              color: '#fff', fontFamily: 'var(--font-display)', fontWeight: 800,
              fontSize: 22, letterSpacing: '0.02em', textTransform: 'uppercase',
            }}>
              ✓ You're in. Welcome to Boss Mode.
            </div>
          ) : (
            <form onSubmit={onSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <input
                type="email" required value={email} onChange={(e) => setEmail(e.target.value)}
                placeholder="you@email.com"
                style={{
                  height: 60, padding: '0 22px',
                  background: 'var(--bm-paper)', color: 'var(--bm-ink)',
                  border: '2px solid var(--bm-paper)', borderRadius: 4,
                  fontFamily: 'var(--font-mono)', fontSize: 16, outline: 'none',
                }}
              />
              <button type="submit" style={{
                height: 60, padding: '0 28px',
                background: 'var(--bm-pink)', color: '#fff',
                border: '2px solid var(--bm-pink)', borderRadius: 4,
                fontFamily: 'var(--font-text)', fontWeight: 700, fontSize: 14,
                letterSpacing: '0.18em', textTransform: 'uppercase', cursor: 'pointer',
                boxShadow: '4px 4px 0 0 var(--bm-paper)',
              }}>Claim my founders spot →</button>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'rgba(244,239,228,0.55)', letterSpacing: '0.06em' }}>
                No spam. One launch announcement. Discount is one-time.
              </div>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

// ─── Fast Mode hero — single screen, everything important visible ───
function FastHero() {
  const [email, setEmail] = React.useState('');
  const [submitted, setSubmitted] = React.useState(false);

  const onSubmit = (e) => {
    e.preventDefault();
    if (!email || !/.+@.+\..+/.test(email)) return;
    if (typeof joinKlaviyoWaitlist === 'function') {
      joinKlaviyoWaitlist(email, 'Fast Mode Hero', { tier: 'Fast Hero' });
    }
    setSubmitted(true);
  };

  return (
    <section style={{
      position: 'relative',
      minHeight: 'calc(100vh - 140px)',
      background: 'var(--bm-ink)',
      color: 'var(--bm-paper)',
      padding: '64px 80px',
      overflow: 'hidden',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
    }}>
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0,
        background: "url('assets/facets-black.png') center/cover no-repeat",
        opacity: 0.85, pointerEvents: 'none',
      }} />
      <div style={{ position: 'relative', zIndex: 1, display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48, alignItems: 'center', maxWidth: 1400, margin: '0 auto', width: '100%' }}>
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--bm-pink)', letterSpacing: '0.16em', textTransform: 'uppercase', fontWeight: 700 }}>
            ⚡ Pre-launch · 500 Founders · Launch-day discount
          </div>
          <h1 style={{
            fontFamily: 'var(--font-display)', fontWeight: 900,
            fontSize: 'clamp(40px, 5.4vw, 84px)', lineHeight: 0.92, letterSpacing: '-0.025em',
            textTransform: 'uppercase', margin: '16px 0 0', color: 'var(--bm-paper)',
            textWrap: 'balance',
          }}>
            The world's first <span style={{ color: 'var(--bm-pink)' }}>peptide shake</span>.<br/>
            The category-defining <span style={{ color: 'var(--bm-blue)' }}>clean energy drink</span>.
          </h1>
          <p style={{ fontSize: 18, lineHeight: 1.5, marginTop: 20, color: 'rgba(244,239,228,0.85)', maxWidth: 620 }}>
            Sip. Dominate. Repeat.<sup style={{ color: 'var(--bm-pink)', fontSize: '0.7em' }}>™</sup> Two formulas. Three published RCTs. Zero compromises.
          </p>

          {submitted ? (
            <div style={{
              marginTop: 28, padding: '20px 24px',
              background: 'var(--bm-pink)', color: 'var(--bm-ink)', borderRadius: 8,
              fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: '0.08em', textTransform: 'uppercase', fontWeight: 700,
              maxWidth: 520,
            }}>
              ✓ You're on the Founders List. Watch your inbox.
            </div>
          ) : (
            <form onSubmit={onSubmit} style={{ marginTop: 28, display: 'flex', gap: 0, maxWidth: 520, alignItems: 'stretch' }}>
              <input
                type="email" value={email} onChange={(e) => setEmail(e.target.value)}
                placeholder="email@yours.com" required
                style={{
                  flex: 1, padding: '16px 20px',
                  border: '2px solid var(--bm-paper)', borderRight: 'none',
                  borderRadius: '4px 0 0 4px',
                  background: 'transparent', color: 'var(--bm-paper)',
                  fontFamily: 'var(--font-mono)', fontSize: 14,
                }}
              />
              <button type="submit" style={{
                padding: '16px 28px',
                border: '2px solid var(--bm-paper)',
                borderRadius: '0 4px 4px 0',
                background: 'var(--bm-pink)', color: 'var(--bm-ink)',
                fontFamily: 'var(--font-text)', fontWeight: 700, fontSize: 13,
                letterSpacing: '0.16em', textTransform: 'uppercase',
                cursor: 'pointer', whiteSpace: 'nowrap',
              }}>Lock in →</button>
            </form>
          )}

          {/* TWO clearly grouped stat panels — Myo (pink) | Energy (blue) */}
          <div style={{ marginTop: 32, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            {/* Myo-Peptide column */}
            <div style={{
              border: '2px solid var(--bm-pink)', borderRadius: 8,
              padding: '16px 18px', background: 'rgba(238,61,139,0.06)',
            }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--bm-pink)', letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 700 }}>
                Myo-Peptide™ · Recovery
              </div>
              <div style={{ display: 'flex', gap: 20, marginTop: 12, flexWrap: 'wrap' }}>
                {[
                  { n: '144%', l: 'Faster recovery' },
                  { n: '20g', l: 'Plant protein' },
                  { n: '2.4g', l: 'PeptiStrong®' },
                ].map(s => (
                  <div key={s.l}>
                    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 28, lineHeight: 1, color: 'var(--bm-pink)', letterSpacing: '-0.02em' }}>{s.n}</div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(244,239,228,0.7)', marginTop: 4 }}>{s.l}</div>
                  </div>
                ))}
              </div>
            </div>
            {/* Energy column */}
            <div style={{
              border: '2px solid var(--bm-blue)', borderRadius: 8,
              padding: '16px 18px', background: 'rgba(43,182,232,0.06)',
            }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--bm-blue)', letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 700 }}>
                Boss Mode Energy · Focus
              </div>
              <div style={{ display: 'flex', gap: 20, marginTop: 12, flexWrap: 'wrap' }}>
                {[
                  { n: '24.9%', l: 'Cog. accuracy' },
                  { n: '35%', l: 'Processing speed' },
                  { n: '500mg', l: 'Cognizin®' },
                ].map(s => (
                  <div key={s.l}>
                    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 28, lineHeight: 1, color: 'var(--bm-blue)', letterSpacing: '-0.02em' }}>{s.n}</div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(244,239,228,0.7)', marginTop: 4 }}>{s.l}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div style={{ marginTop: 24, display: 'flex', gap: 16, flexWrap: 'wrap', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase' }}>
            <Link to="/shop" style={{ color: 'var(--bm-paper)', textDecoration: 'underline' }}>Shop the lineup →</Link>
            <Link to="/science" style={{ color: 'var(--bm-paper)', textDecoration: 'underline' }}>Read the science →</Link>
          </div>
        </div>

        <div style={{ display: 'flex', justifyContent: 'center', gap: 12 }}>
          <img src="assets/cropped-can-myo-strawberry.png" alt="Boss Mode Myo-Peptide" style={{ maxHeight: 480, width: 'auto', filter: 'drop-shadow(6px 8px 0 var(--bm-pink))' }} />
          <img src="assets/cropped-can-energy-apex.png" alt="Boss Mode Energy" style={{ maxHeight: 480, width: 'auto', filter: 'drop-shadow(6px 8px 0 var(--bm-blue))' }} onError={(e) => { e.target.style.display = 'none'; }} />
        </div>
      </div>
    </section>
  );
}

function HomePage() {
  const [fast] = (typeof useFastMode === 'function') ? useFastMode() : [false];

  if (fast) {
    return (
      <>
        <FastHero />
        <HomeProductGrid />
        <HomeScienceStrip />
        <HomeFoundersBanner />
      </>
    );
  }

  return (
    <>
      <VariantB_StatBarrage />
      <HomePillarStrip />
      <HomeScienceStrip />
      <HomeProductGrid />
      <HomeFounderStrip />
      <HomeFoundersBanner />
    </>
  );
}

window.HomePage = HomePage;