/* V2 Home — simplified, plain-language, benefit-first (still compliant). */

/* ===================== HERO BANNER — 3 variants + mini devbar ===================== */

const HERO_VARIANTS = [
  { key: 'cell',   label: 'Cellular',  hint: 'Live cell-grid over the vial' },
  { key: 'pastel', label: 'Pastel',    hint: 'Soft diagonal bottle drift' },
  { key: 'halo',   label: 'Halo',      hint: 'Spinning light halo + ripples' },
];

/* Bestseller slideshow source — names must exist in VC_PRODUCTS */
const HERO_SLIDE_NAMES = ['Retatrutide 10 mg', 'Tesamorelin', 'GLOW', 'BPC-157', 'NAD+', 'Ipamorelin'];

function useHeroSlides(intervalMs = 8500) {
  const imgs = window.VC_PRODUCT_IMG || {};
  const prods = window.VC_PRODUCTS || [];
  const slides = React.useMemo(() => HERO_SLIDE_NAMES
    .map((n) => {
      const p = prods.find((x) => x.name === n);
      return p ? { name: p.name, cat: p.catLabel, img: imgs[p.name] || '/vital/img/cellular.jpg' } : null;
    })
    .filter(Boolean), []);
  const [i, setI] = React.useState(0);
  const [prev, setPrev] = React.useState(null);
  React.useEffect(() => {
    if (slides.length < 2) return;
    const t = setInterval(() => {
      setI((c) => { setPrev(c); return (c + 1) % slides.length; });
    }, intervalMs);
    return () => clearInterval(t);
  }, [slides.length, intervalMs]);
  return { slides, i, prev, setI };
}

function HeroSlideLabel({ slide, index }) {
  return (
    <div className="vc-slide-label" key={'lb' + index}>
      <span className="chip">
        <span style={{ width: 7, height: 7, borderRadius: 999, background: 'var(--v2-accent)' }} />
        Bestseller · {slide.cat}
      </span>
      <span className="name">{slide.name}</span>
    </div>
  );
}

function HeroSlideDots({ n, i, onPick }) {
  return (
    <div className="vc-slide-dots" aria-hidden="true">
      {Array.from({ length: n }).map((_, k) => (
        <i key={k} data-on={k === i} onClick={() => onPick(k)} style={{ cursor: 'pointer' }} />
      ))}
    </div>
  );
}

function ScrollToBestSellers({ light }) {
  return (
    <button
      className="vc-cta-ripple"
      onClick={() => {
        const el = document.getElementById('bestsellers');
        if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }}
      style={{ left: 20, bottom: 20 }}>
      <span style={{ width: 10, height: 10, borderRadius: 999, background: '#fff' }} />
      View best sellers
      <i data-lucide="arrow-down" style={{ width: 18, height: 18 }}></i>
    </button>
  );
}

/* A — the original cellular grid animation, now a bestseller slideshow */
function HeroCellular() {
  const { slides, i, prev, setI } = useHeroSlides();
  const cur = slides[i];
  return (
    <React.Fragment>
      <div style={{ position: 'absolute', inset: 0, background: '#14141a', overflow: 'hidden' }}>
        {prev != null && slides[prev] && (
          <div className="vc-slide out" key={'p' + prev}>
            <img src={slides[prev].img} alt=""
                 style={{ objectFit: 'cover', objectPosition: 'center' }} />
          </div>
        )}
        {cur && (
          <div className="vc-slide in" key={'c' + i}>
            <img src={cur.img} alt={cur.name}
                 style={{ objectFit: 'cover', objectPosition: 'center' }} />
          </div>
        )}
      </div>

      {/* drifting colour mesh over the product */}
      <div className="v2-hero-mesh" aria-hidden="true" />

      {cur && <HeroSlideLabel slide={cur} index={i} />}
      <HeroSlideDots n={slides.length} i={i} onPick={setI} />

      <ScrollToBestSellers light />
    </React.Fragment>
  );
}


/* B — pastel, almost-cartoonish: rows of small bottles drifting on diagonals */
function HeroPastel() {
  const VIAL = '/vital/img/hero/vial-art.png';
  // soft pastel tints per row — hue-rotated versions of the same simple vial
  const tints = [
    'hue-rotate(0deg) saturate(1.05)',
    'hue-rotate(38deg) saturate(0.95)',
    'hue-rotate(150deg) saturate(0.85)',
    'hue-rotate(-40deg) saturate(1)',
    'hue-rotate(200deg) saturate(0.8)',
    'hue-rotate(90deg) saturate(0.9)',
    'hue-rotate(-90deg) saturate(0.95)',
  ];
  const rows = Array.from({ length: 14 }, (_, i) => i);
  const perRow = Array.from({ length: 16 }, (_, i) => i);
  return (
    <React.Fragment>
      <div className="vc-pastel-bg" aria-hidden="true" />
      <div className="vc-drift-wrap" aria-hidden="true">
        {rows.map((r) => {
          const strip = (
            <span>
              {perRow.map((i) => (
                <img key={i} src={VIAL} alt=""
                     style={{ filter: tints[(r + i) % tints.length] + ' drop-shadow(0 10px 20px rgba(120,90,110,0.24))' }} />
              ))}
            </span>
          );
          return (
            <div key={r} className={'vc-drift-row ' + (r % 2 ? 'r' : 'l')}
                 style={{ animationDuration: (104 + r * 10) + 's', opacity: 0.85 + (r % 3) * 0.05 }}>
              {strip}{strip}
            </div>
          );
        })}
      </div>
      <div className="vc-pastel-soft" aria-hidden="true" />



      <ScrollToBestSellers light />
    </React.Fragment>
  );
}

/* C — halo stage: bestseller slideshow floating through the rainbow light */
function HeroHalo() {
  const { slides, i, prev, setI } = useHeroSlides();
  const cur = slides[i];
  return (
    <React.Fragment>
      <div aria-hidden="true" style={{ position: 'absolute', inset: 0, background: 'radial-gradient(90% 80% at 50% 30%, #16181A 0%, #0B0B10 70%)' }} />
      <div className="vc-halo-spin" aria-hidden="true" />
      {[0, 1, 2].map((k) => (
        <div key={k} className="vc-ripple" aria-hidden="true" style={{ animationDelay: (k * 2) + 's' }} />
      ))}
      <div className="vc-halo-bob" style={{ position: 'absolute', inset: 0, zIndex: 3, display: 'grid', placeItems: 'center' }}>
        <div style={{ position: 'relative', width: '78%', aspectRatio: '1/1' }}>
          {prev != null && slides[prev] && (
            <div className="vc-slide out" key={'p' + prev}>
              <img src={slides[prev].img} alt=""
                   style={{ objectFit: 'contain', borderRadius: 24,
                            filter: 'drop-shadow(0 40px 60px rgba(0,0,0,0.55))', mixBlendMode: 'screen' }} />
            </div>
          )}
          {cur && (
            <div className="vc-slide in" key={'c' + i}>
              <img src={cur.img} alt={cur.name}
                   style={{ objectFit: 'contain', borderRadius: 24,
                            filter: 'drop-shadow(0 40px 60px rgba(0,0,0,0.55))', mixBlendMode: 'screen' }} />
            </div>
          )}
        </div>
      </div>


      {cur && <HeroSlideLabel slide={cur} index={i} />}
      <HeroSlideDots n={slides.length} i={i} onPick={setI} />

      <ScrollToBestSellers />
    </React.Fragment>
  );
}

function HeroBannerV2() {
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); }, []);

  return (
    <div className="v2-in" style={{
      position: 'relative', aspectRatio: '4/5', borderRadius: 32, overflow: 'hidden',
      background: '#eee', boxShadow: '0 40px 80px -40px rgba(20,20,25,0.25)', isolation: 'isolate',
    }}>
      <HeroCellular />
    </div>
  );
}

function HeroSectionField() {
  const Field = window.MoleculeField;
  if (!Field) return null;
  return (
    <div aria-hidden="true" style={{
      position: 'absolute', top: '-30%', left: '-32%',
      width: '115%', height: '170%',
      opacity: 0.62, pointerEvents: 'none', zIndex: 0,
      overflow: 'visible',
    }}>
      <Field color="rgba(255,255,255,1)" opacity={1} linkDistance={34} speed={0.32} nodeScale={0.35} />
    </div>
  );
}






function HomeV2({ onNav, onProduct }) {
  const products = window.VC_PRODUCTS;
  const prodImg = window.VC_PRODUCT_IMG || {};

  /* Friendly benefit-tiles instead of "categories under research" */
  const benefits = [
    { key: 'regeneration', label: 'Glow',        blurb: 'Skin, hair, and the visible stuff.',       img: '/vital/img/regeneration.jpg', color: '#E96A4F' },
    { key: 'recovery',     label: 'Recover',     blurb: 'Bounce back faster, feel less sore.',      img: '/vital/img/recovery.jpg',     color: '#C01530' },
    { key: 'metabolic',    label: 'Reset',       blurb: 'Appetite, weight, and energy balance.',    img: '/vital/img/metabolic.jpg',    color: '#C9A84C' },
    { key: 'longevity',    label: 'Long-term',   blurb: 'Age well, cell by cell.',                   img: '/vital/img/longevity.jpg',    color: '#7FA48B' },
    { key: 'cognitive',    label: 'Focus',       blurb: 'Sharper mind, calmer mood.',               img: '/vital/img/cognitive.jpg',    color: '#7A5CC6' },
    { key: 'vitality',     label: 'Vitality',    blurb: 'Confidence, drive, and connection.',       img: '/vital/img/cellular.jpg',     color: '#B85A7C' },
  ];

  /* Six friendly picks for the featured strip */
  const picks = ['Retatrutide 10 mg', 'Tesamorelin', 'GLOW', 'BPC-157', 'NAD+', 'Ipamorelin']
    .map((n) => products.find((p) => p.name === n)).filter(Boolean);

  const friendlyBlurb = (p) => ({
    'Retatrutide 10 mg':  'A crowd favorite for metabolic reset and body-composition goals.',
    'Retatrutide 12 mg':  'The higher-fill option for metabolic and body-composition research.',
    'Tesamorelin':  'Loved for growth-hormone support and lean-body composition.',
    'GLOW':         'Our bestseller for radiant, healthy-looking skin.',
    'BPC-157':      'Everyone\'s favorite for recovery and repair.',
    'NAD+':         'A daily boost for energy and cellular health.',
    'Ipamorelin':   'Sleep deeper, wake up feeling stronger.',
  })[p.name] || p.blurb;

  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });

  return (
    <div>
      {/* ---------- HERO ---------- */}
      <section style={{ position: 'relative', overflow: 'hidden' }}>
        <HeroSectionField />
        <div style={{
          maxWidth: 1360, margin: '0 auto',
          padding: 'clamp(48px,7vw,110px) clamp(20px,4vw,56px) clamp(64px,8vw,120px)',
          display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 'clamp(32px,5vw,80px)',
          alignItems: 'center',
        }} className="v2-grid-2">
          <div>
            <div className="v2-up" style={{ display: 'inline-flex', alignItems: 'center', gap: 8,
                                             background: '#fff', border: '1px solid var(--v2-line)',
                                             borderRadius: 999, padding: '7px 14px 7px 8px',
                                             fontSize: 12, color: 'var(--v2-ink-2)' }}>
              <span style={{ width: 22, height: 22, borderRadius: 999, background: 'var(--v2-accent)',
                             color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                             fontSize: 11 }}>♥</span>
              <div style={{ whiteSpace: 'pre-line' }}>
                <span style={{ fontWeight: 400 }}>Welcome to the healthcare frontier:&nbsp;</span>{"\n"}
                <span style={{ fontWeight: 700 }}>Gentle science from the cell up.</span>
              </div>

            </div>
            <h1 className="v2-up v2-d1" style={{
              fontFamily: 'var(--font-display-v2)', fontWeight: 400,
              fontSize: 'clamp(2.6rem, 5.6vw, 4.8rem)', lineHeight: 1.02,
              letterSpacing: '-0.02em', color: 'var(--v2-ink)',
              margin: '28px 0 0',
            }}>
              Discover&nbsp;<span style={{ fontStyle: 'italic', color: 'var(--v2-accent)' }}>deep health</span>, from cell&nbsp;<br />to shining cell.
            </h1>
            <span className="v2-line" style={{ display: 'block', width: 88, height: 2,
                                                background: 'var(--v2-accent)', margin: '30px 0 0' }} />
            <p className="v2-up v2-d2" style={{
              fontSize: 18, lineHeight: 1.65, color: 'var(--v2-ink-2)',
              maxWidth: '48ch', margin: '30px 0 0',
            }}>
              My Vital Cell brings premium peptides and cellular nutrients to your everyday routine - simple, honest, and based on real science. Help your patients and research associates discover deeper sleep, faster recovery and a brighter glow. This is the new frontier of medicine - starting from the cell up.
            </p>
            <div className="v2-up v2-d3" style={{ display: 'flex', gap: 12, marginTop: 40, flexWrap: 'wrap' }}>
              <button className="v2-btn primary" onClick={() => onNav('compounds')}>Shop the collection</button>
              <button className="v2-btn secondary" onClick={() => onNav('how')}>How it works →</button>
            </div>
            <div className="v2-up v2-d4" style={{ display: 'flex', gap: 22, marginTop: 40, flexWrap: 'wrap',
                                                    fontSize: 13, color: 'var(--v2-muted)' }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                <i data-lucide="leaf" style={{ width: 15, height: 15, color: 'var(--v2-sage)' }}></i>
                Clean formulas
              </span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                <i data-lucide="shield-check" style={{ width: 15, height: 15, color: 'var(--v2-accent)' }}></i>
                Third-party tested
              </span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                <i data-lucide="package" style={{ width: 15, height: 15, color: 'var(--v2-ink-2)' }}></i>
                Clear labeling
              </span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                <i data-lucide="map-pin" style={{ width: 15, height: 15, color: 'var(--v2-accent)' }}></i>
                Ships from Phoenix, AZ
              </span>
            </div>
          </div>

          {/* Hero banner — 3 experimental variants */}
          <HeroBannerV2 />


        </div>
      </section>

      {/* ---------- FEATURED PRODUCTS ---------- */}
      <section id="bestsellers" style={{ scrollMarginTop: 90 }}>

        <div style={{ maxWidth: 1240, margin: '0 auto', padding: 'clamp(56px,7vw,96px) clamp(20px,4vw,56px)' }}>
          <div style={{ display: 'flex', alignItems: 'end', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap', marginBottom: 36 }}>
            <div>
              <div style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--v2-accent)', fontWeight: 600 }}>BEST SELLERS</div>
              <h2 style={{ fontFamily: 'var(--font-display-v2)', fontWeight: 400, fontSize: 'clamp(1.8rem,3.6vw,2.8rem)', letterSpacing: '-0.01em', color: 'var(--v2-ink)', margin: '10px 0 0' }}>
                What patients love.
              </h2>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }} className="v2-grid-3">
            {picks.map((p) => (
              <article key={p.name} className="v2-card" style={{ cursor: 'pointer' }} onClick={() => onProduct(p.name)}>
                <div style={{ position: 'relative', aspectRatio: '1/1', background: '#f0ebe1', overflow: 'hidden' }}>
                  <img src={prodImg[p.name] || '/vital/img/cellular.jpg'} alt={p.name}
                       style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'contain' }} />
                  <button
                    aria-label={`Add ${p.name} to cart`}
                    onClick={(e) => { e.stopPropagation(); window.VC_CART.add({ name: p.name, catLabel: p.catLabel, formula: p.formula }); }}
                    style={{ position: 'absolute', bottom: 14, right: 14, width: 42, height: 42, borderRadius: 999,
                             background: 'var(--v2-ink)', color: '#fff', border: 0, cursor: 'pointer',
                             display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                             boxShadow: '0 12px 24px -12px rgba(0,0,0,0.35)' }}>
                    <i data-lucide="plus" style={{ width: 18, height: 18 }}></i>
                  </button>
                </div>
                <div style={{ padding: '22px 22px 24px' }}>
                  <div style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--v2-muted)', fontWeight: 600 }}>{p.catLabel}</div>
                  <h3 style={{ fontFamily: 'var(--font-display-v2)', fontWeight: 500, fontSize: 22, margin: '8px 0 6px', color: 'var(--v2-ink)', letterSpacing: '-0.01em' }}>{p.name}</h3>
                  <p style={{ margin: 0, fontSize: 14, lineHeight: 1.6, color: 'var(--v2-muted)' }}>{friendlyBlurb(p)}</p>
                  <div style={{ marginTop: 16, display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
                    <span style={{ fontFamily: 'var(--font-display-v2)', fontSize: 20, color: 'var(--v2-ink)' }}>${window.VC_CART.price(p.name).toFixed(0)}</span>
                    <span style={{ fontSize: 13, color: 'var(--v2-accent)', fontWeight: 500 }}>Learn more →</span>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* ---------- BENEFIT TILES ---------- */}
      <section style={{ background: '#fff', borderTop: '1px solid var(--v2-line)', borderBottom: '1px solid var(--v2-line)' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto', padding: 'clamp(56px,7vw,96px) clamp(20px,4vw,56px)' }}>
          <div style={{ display: 'flex', alignItems: 'end', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap', marginBottom: 40 }}>
            <div>
              <div style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--v2-accent)', fontWeight: 600 }}>SUPERPOWERS FOR YOUR PATIENTS & RESEARCHERS</div>
              <h2 style={{ fontFamily: 'var(--font-display-v2)', fontWeight: 400, fontSize: 'clamp(1.8rem,3.6vw,2.8rem)', letterSpacing: '-0.01em', lineHeight: 1.1, color: 'var(--v2-ink)', margin: '10px 0 0' }}>
                You pick the direction.
              </h2>
            </div>
            <a onClick={() => onNav('compounds')} style={{ cursor: 'pointer', color: 'var(--v2-ink)', fontSize: 14, fontWeight: 500, borderBottom: '1px solid var(--v2-accent)' }}>See everything →</a>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }} className="v2-grid-3">
            {benefits.map((b) => (
              <button key={b.key} onClick={() => onNav('compounds')} className="v2-card"
                      style={{ textAlign: 'left', padding: 0, cursor: 'pointer', border: '1px solid var(--v2-line)' }}>
                <div style={{ position: 'relative', aspectRatio: '5/3', overflow: 'hidden' }}>
                  <img src={b.img} alt={b.label}
                       style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
                  <div style={{ position: 'absolute', inset: 0,
                                background: `linear-gradient(180deg, rgba(0,0,0,0) 40%, ${b.color}CC 100%)` }} />
                  <div style={{ position: 'absolute', top: 14, left: 14, padding: '4px 10px',
                                borderRadius: 999, background: 'rgba(255,255,255,0.95)',
                                fontSize: 11, fontWeight: 600, color: b.color, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
                    {b.label}
                  </div>
                </div>
                <div style={{ padding: '20px 22px 22px' }}>
                  <div style={{ fontFamily: 'var(--font-display-v2)', fontWeight: 500, fontSize: 22, color: 'var(--v2-ink)', letterSpacing: '-0.01em' }}>{b.label}</div>
                  <p style={{ margin: '6px 0 0', fontSize: 14, color: 'var(--v2-muted)', lineHeight: 1.55 }}>{b.blurb}</p>
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>


      {/* ---------- HOW IT WORKS (3 steps, plain-language) ---------- */}
      <section style={{ background: 'var(--v2-cream-2)', borderTop: '1px solid var(--v2-line)', borderBottom: '1px solid var(--v2-line)' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto', padding: 'clamp(64px,8vw,110px) clamp(20px,4vw,56px)' }}>
          <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto 56px' }}>
            <div style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--v2-accent)', fontWeight: 600 }}>How it works</div>
            <h2 style={{ fontFamily: 'var(--font-display-v2)', fontWeight: 400, fontSize: 'clamp(1.8rem,3.6vw,2.8rem)', letterSpacing: '-0.01em', margin: '10px 0 14px', color: 'var(--v2-ink)' }}>
              Three steps. That's it.
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--v2-muted)', margin: 0 }}>
              My Vital Cell is built to help your patients and research partners discover the full gamut of health. Even from the deepest levels, we make it as easy as 1, 2, 3!
            </p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }} className="v2-grid-3">
            {[
              { n: '01', ic: 'sparkles',  t: 'Pick your research goal',   d: 'Skin, sleep, recovery, focus — you decide, or we can help.' },
              { n: '02', ic: 'package',   t: 'We keep it simple',  d: 'Every order arrives with clear labels, simple next steps and no confusion.' },
              { n: '03', ic: 'heart-pulse', t: 'Feel the shift',  d: 'We\'re here for the questions in between — tips, tricks, and a real human when you need one.' },
            ].map((s) => (
              <div key={s.n} style={{ background: '#fff', borderRadius: 22, padding: '32px 30px', border: '1px solid var(--v2-line)' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
                  <span style={{ width: 42, height: 42, borderRadius: 999, background: 'var(--v2-cream)',
                                 display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                                 color: 'var(--v2-accent)' }}>
                    <i data-lucide={s.ic} style={{ width: 20, height: 20 }}></i>
                  </span>
                  <span style={{ fontFamily: 'var(--font-body-v2)', fontWeight: 600, fontSize: 12, letterSpacing: '0.14em', color: 'var(--v2-muted)' }}>{s.n}</span>
                </div>
                <h3 style={{ fontFamily: 'var(--font-display-v2)', fontWeight: 500, fontSize: 22, letterSpacing: '-0.01em', margin: '0 0 10px', color: 'var(--v2-ink)' }}>{s.t}</h3>
                <p style={{ fontSize: 14.5, lineHeight: 1.65, color: 'var(--v2-muted)', margin: 0 }}>{s.d}</p>
              </div>
            ))}
          </div>
          <div style={{ textAlign: 'center', marginTop: 40 }}>
            <button className="v2-btn primary" onClick={() => window.dispatchEvent(new CustomEvent('mvc-cta-open', { detail: { view: 'builder' } }))}>Start Here →</button>
          </div>
        </div>
      </section>

      {/* ---------- EDITORIAL CAMPAIGN: SLEEP & RECOVER ---------- */}
      <section style={{ background: '#0F1B1C', color: '#fff' }}>
        <div style={{ maxWidth: 1360, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr' }} className="v2-grid-2">
          <div style={{ position: 'relative', aspectRatio: '5/4', overflow: 'hidden', minHeight: 360 }}>
            <img src="/vital/ui_kits/website/media/sleep-recovery.png" alt="Sleep & recovery"
                 style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'contain', objectPosition: 'center' }} />
          </div>
          <div style={{ padding: 'clamp(48px,6vw,88px) clamp(24px,4vw,64px)', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <div style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--v2-warm)', fontWeight: 600 }}>The bedtime edit</div>
            <h2 style={{ fontFamily: 'var(--font-display-v2)', fontWeight: 400, fontSize: 'clamp(2rem,4vw,3.2rem)', letterSpacing: '-0.02em', lineHeight: 1.05, margin: '16px 0 18px', color: '#fff' }}>
              Sleep like there's <span style={{ fontStyle: 'italic', color: 'var(--v2-warm)' }}>no tomorrow</span>.
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: 'rgba(255,255,255,0.78)', maxWidth: 44 + 'ch', margin: 0 }}>
              A small, gentle stack for the humans who wake up tired — melatonin, CJC-1295, magnesium,
              and a routine that respects your evenings.
            </p>
            <div style={{ marginTop: 32 }}>
              <button className="v2-btn accent" onClick={() => onNav('compounds')}>Shop the edit →</button>
            </div>
          </div>
        </div>
      </section>

      {/* ---------- BREAKTHROUGH STORIES ---------- */}
      <section style={{ background: 'var(--v2-cream-2)', borderTop: '1px solid var(--v2-line)', borderBottom: '1px solid var(--v2-line)' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto', padding: 'clamp(64px,8vw,110px) clamp(20px,4vw,56px)' }}>
          <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 48px' }}>
            <div style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--v2-accent)', fontWeight: 600 }}>Breakthroughs in the wild</div>
            <h2 style={{ fontFamily: 'var(--font-display-v2)', fontWeight: 400, fontSize: 'clamp(1.8rem,3.6vw,2.8rem)', letterSpacing: '-0.01em', margin: '10px 0 12px', color: 'var(--v2-ink)' }}>
              Stories that <span style={{ fontStyle: 'italic', color: 'var(--v2-accent)' }}>changed lives</span>.
            </h2>
            <p style={{ fontSize: 15, color: 'var(--v2-muted)', margin: 0, lineHeight: 1.55 }}>
              Real reporting on the peptide and cellular-health breakthroughs shaping modern medicine — from the newsrooms and journals covering them.
            </p>
          </div>
          <div
            style={{
              display: 'grid',
              gridAutoFlow: 'column',
              gridAutoColumns: 'minmax(300px, 360px)',
              gap: 20,
              overflowX: 'auto',
              scrollSnapType: 'x mandatory',
              padding: '4px 32px 20px',
              WebkitOverflowScrolling: 'touch',
              WebkitMaskImage: 'linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 48px), transparent 100%)',
              maskImage: 'linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 48px), transparent 100%)',
            }}
            className="v2-research-scroller"
          >
            {[
              {
                tag: 'Science · Breakthrough of the Year',
                title: 'GLP-1 obesity drugs named 2023 Breakthrough of the Year',
                source: 'Science Magazine',
                blurb: 'Semaglutide, tirzepatide and retatrutide are rewriting what medicine thought possible for weight and metabolic health.',
                img: 'https://images.unsplash.com/photo-1631549916768-4119b2e5f926?w=800&q=80&auto=format&fit=crop',
                url: 'https://www.science.org/content/article/breakthrough-of-the-year-2023',
              },
              {
                tag: 'Harvard Gazette',
                title: 'Scientists reverse aging in mice — and want to try it in people',
                source: 'Harvard Medical School',
                blurb: 'Sinclair lab shows NAD+ pathways and epigenetic reprogramming can restore youthful function to aging tissue.',
                img: 'https://images.unsplash.com/photo-1532187863486-abf9dbad1b69?w=800&q=80&auto=format&fit=crop',
                url: 'https://news.harvard.edu/gazette/story/2020/12/reversing-aging-in-mice/',
              },
              {
                tag: 'The New York Times',
                title: 'A weight-loss drug so effective it took researchers by surprise',
                source: 'NYT Health',
                blurb: 'Retatrutide trial participants lost up to 24% of their body weight — the largest reductions ever seen from a medication.',
                img: 'https://images.unsplash.com/photo-1587854692152-cbe660dbde88?w=800&q=80&auto=format&fit=crop',
                url: 'https://www.nytimes.com/2023/06/26/health/weight-loss-drug-retatrutide.html',
              },
              {
                tag: 'Nature',
                title: 'How NAD+ became one of the hottest molecules in aging research',
                source: 'Nature News',
                blurb: 'A generation of researchers is testing whether restoring cellular NAD+ can slow the biology of aging itself.',
                img: 'https://images.unsplash.com/photo-1530026405186-ed1f139313f8?w=800&q=80&auto=format&fit=crop',
                url: 'https://www.nature.com/articles/d41586-020-01568-2',
              },
              {
                tag: 'STAT News',
                title: 'The peptide revolution: how tiny proteins moved from labs into everyday medicine',
                source: 'STAT',
                blurb: 'From GLP-1s to growth-hormone releasers, peptides are quietly redefining prescribing across metabolic, recovery and longevity care.',
                img: 'https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?w=800&q=80&auto=format&fit=crop',
                url: 'https://www.statnews.com/2023/12/13/glp-1-drugs-ozempic-wegovy-mounjaro-2023-year-in-review/',
              },
              {
                tag: 'TIME',
                title: 'Inside the Ozempic era — and what comes next',
                source: 'TIME Magazine',
                blurb: 'A cultural and clinical look at how GLP-1 medicines reshaped conversations about health, weight and access.',
                img: 'https://images.unsplash.com/photo-1584017911766-d451b3d0e843?w=800&q=80&auto=format&fit=crop',
                url: 'https://time.com/6329880/ozempic-glp-1-drugs-year-in-review/',
              },
              {
                tag: 'BBC Future',
                title: 'The peptide that might heal tendons faster than anything else',
                source: 'BBC Future',
                blurb: 'BPC-157 is drawing intense interest from athletes and surgeons for its regenerative effects on soft tissue.',
                img: 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=800&q=80&auto=format&fit=crop',
                url: 'https://www.bbc.com/future/article/20230725-the-science-of-regeneration',
              },
              {
                tag: 'Al Jazeera',
                title: 'Kambo: the ancient Amazonian frog-peptide ritual crossing into the West',
                source: 'Al Jazeera',
                blurb: 'A look at kambô — the Matsés and Katukina practice using peptide-rich secretions of the giant monkey frog — as it moves from the Amazon into global wellness circles.',
                img: 'https://images.unsplash.com/photo-1591382386627-349b692688ff?w=800&q=80&auto=format&fit=crop',
                url: 'https://www.aljazeera.com/news/2026/5/29/kambo-what-is-the-frog-poison-spiritual-ritual-killing',
              },
              {
                tag: 'The Independent',
                title: 'Inside kambo: the Amazonian peptide medicine drawing Western seekers',
                source: 'The Independent',
                blurb: 'Reporting on the origins, peptide pharmacology and modern ceremonial use of kambo — and why practitioners urge care and trained facilitators.',
                img: 'https://images.unsplash.com/photo-1500259783852-0ca9ce8a64dc?w=800&q=80&auto=format&fit=crop',
                url: 'https://www.independent.co.uk/news/health/frog-poison-kambo-health-warning-kristian-trend-b2986662.html',
              },
            ].map((s) => (
              <a
                key={s.title}
                href={s.url}
                target="_blank"
                rel="noopener noreferrer"
                style={{
                  scrollSnapAlign: 'start',
                  background: '#fff',
                  border: '1px solid var(--v2-line)',
                  borderRadius: 22,
                  overflow: 'hidden',
                  textDecoration: 'none',
                  color: 'inherit',
                  display: 'flex',
                  flexDirection: 'column',
                  transition: 'transform .25s ease, box-shadow .25s ease, border-color .25s ease',
                }}
                onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 12px 32px -18px rgba(0,0,0,.25)'; e.currentTarget.style.borderColor = 'var(--v2-accent)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.borderColor = 'var(--v2-line)'; }}
              >
                <div style={{ position: 'relative', width: '100%', aspectRatio: '16 / 10', overflow: 'hidden', background: 'var(--v2-cream)' }}>
                  <img src={s.img} alt="" loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                  <div style={{ position: 'absolute', top: 12, left: 12, background: 'rgba(255,255,255,0.94)', color: 'var(--v2-accent)', fontSize: 10.5, letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 700, padding: '5px 10px', borderRadius: 999 }}>{s.tag}</div>
                </div>
                <div style={{ padding: '22px 24px 24px', display: 'flex', flexDirection: 'column', gap: 10, flex: 1 }}>
                  <h3 style={{ fontFamily: 'var(--font-display-v2)', fontWeight: 400, fontSize: 20, lineHeight: 1.3, letterSpacing: '-0.01em', color: 'var(--v2-ink)', margin: 0 }}>{s.title}</h3>
                  <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--v2-ink)', opacity: .82, margin: 0 }}>{s.blurb}</p>
                  <div style={{ marginTop: 'auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 8, paddingTop: 6 }}>
                    <span style={{ fontSize: 12, color: 'var(--v2-muted)', fontStyle: 'italic' }}>{s.source}</span>
                    <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--v2-accent)' }}>Read story →</span>
                  </div>
                </div>
              </a>
            ))}
          </div>
          <p style={{ textAlign: 'center', fontSize: 12, color: 'var(--v2-muted)', marginTop: 24 }}>
            External reporting linked for context. My Vital Cell is not affiliated with these publications.
          </p>
        </div>
      </section>

      {/* ---------- RESEARCH CAROUSEL ---------- */}
      <section>
        <div style={{ maxWidth: 1240, margin: '0 auto', padding: 'clamp(64px,8vw,110px) clamp(20px,4vw,56px)' }}>
          <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 48px' }}>
            <div style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--v2-accent)', fontWeight: 600 }}>From the literature</div>
            <h2 style={{ fontFamily: 'var(--font-display-v2)', fontWeight: 400, fontSize: 'clamp(1.8rem,3.6vw,2.8rem)', letterSpacing: '-0.01em', margin: '10px 0 12px', color: 'var(--v2-ink)' }}>
              What the <span style={{ fontStyle: 'italic', color: 'var(--v2-accent)' }}>research</span> says.
            </h2>
            <p style={{ fontSize: 15, color: 'var(--v2-muted)', margin: 0, lineHeight: 1.55 }}>
              Peer-reviewed studies and reviews on the peptides in our catalog. Follow the links to read the source.
            </p>
          </div>
          <div
            style={{
              display: 'grid',
              gridAutoFlow: 'column',
              gridAutoColumns: 'minmax(320px, 380px)',
              gap: 20,
              overflowX: 'auto',
              scrollSnapType: 'x mandatory',
              padding: '4px 32px 20px',
              WebkitOverflowScrolling: 'touch',
              WebkitMaskImage: 'linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 48px), transparent 100%)',
              maskImage: 'linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 48px), transparent 100%)',
            }}
            className="v2-research-scroller"
          >
            {[
              {
                tag: 'Retatrutide',
                title: 'Triple–Hormone-Receptor Agonist Retatrutide for Obesity — A Phase 2 Trial',
                journal: 'New England Journal of Medicine, 2023',
                summary: 'At 48 weeks, participants receiving retatrutide had mean weight reductions up to 24.2% versus 2.1% with placebo.',
                url: 'https://www.nejm.org/doi/full/10.1056/NEJMoa2301972',
              },
              {
                tag: 'BPC-157',
                title: 'Stable Gastric Pentadecapeptide BPC 157: Novel Therapy in Gastrointestinal Tract',
                journal: 'Current Pharmaceutical Design, 2020',
                summary: 'Review of BPC-157 preclinical evidence on tendon, ligament, muscle and GI healing, and its cytoprotective mechanisms.',
                url: 'https://pubmed.ncbi.nlm.nih.gov/32175837/',
              },
              {
                tag: 'GHK-Cu',
                title: 'GHK Peptide as a Natural Modulator of Multiple Cellular Pathways in Skin Regeneration',
                journal: 'BioMed Research International, 2015',
                summary: 'Reviews GHK-Cu evidence for wound healing, collagen synthesis, anti-inflammatory activity and gene expression modulation.',
                url: 'https://pubmed.ncbi.nlm.nih.gov/26236730/',
              },
              {
                tag: 'Tesamorelin',
                title: 'Effects of Tesamorelin on Visceral Fat and Liver Fat in HIV-Infected Patients',
                journal: 'JAMA, 2014',
                summary: 'Randomized trial showing tesamorelin reduced visceral adipose tissue and liver fat versus placebo over 6 months.',
                url: 'https://pubmed.ncbi.nlm.nih.gov/25027140/',
              },
              {
                tag: 'Ipamorelin',
                title: 'Ipamorelin, the First Selective Growth Hormone Secretagogue',
                journal: 'European Journal of Endocrinology, 1998',
                summary: 'Original characterization of ipamorelin as a selective GH releaser without affecting ACTH or cortisol.',
                url: 'https://pubmed.ncbi.nlm.nih.gov/9849822/',
              },
              {
                tag: 'NAD+',
                title: 'NAD+ Metabolism and Its Roles in Cellular Processes During Ageing',
                journal: 'Nature Reviews Molecular Cell Biology, 2021',
                summary: 'Comprehensive review of NAD+ biology, decline with age, and therapeutic strategies to restore NAD+ levels.',
                url: 'https://pubmed.ncbi.nlm.nih.gov/33353981/',
              },
              {
                tag: 'Epithalon',
                title: 'Epithalamin and Epithalon Peptide Effects on Telomerase Activity and Telomere Length',
                journal: 'Bulletin of Experimental Biology and Medicine, 2003',
                summary: 'In vitro study reporting activation of telomerase and elongation of telomeres in human somatic cells.',
                url: 'https://pubmed.ncbi.nlm.nih.gov/14562026/',
              },
              {
                tag: 'Glutathione',
                title: 'Glutathione: Antioxidant Properties Dedicated to Nanotechnologies',
                journal: 'Antioxidants, 2018',
                summary: 'Review of glutathione as the body\u2019s master antioxidant and its role in redox balance, detoxification and immunity.',
                url: 'https://pubmed.ncbi.nlm.nih.gov/30248923/',
              },
              {
                tag: 'Kambo · Phyllomedusa bicolor',
                title: 'The Amazonian Kambô Frog Phyllomedusa bicolor: Biology, Toxinology, Ethnopharmacology and Medical Aspects',
                journal: 'Frontiers in Pharmacology, 2022',
                summary: 'Comprehensive peer-reviewed review of the peptide-rich skin secretion used in traditional kambô practice — including dermaseptins, phyllocaerulein, phyllomedusin and deltorphins — and their pharmacological research.',
                url: 'https://www.frontiersin.org/journals/pharmacology/articles/10.3389/fphar.2022.997318/full',
              },
            ].map((r) => (
              <a
                key={r.title}
                href={r.url}
                target="_blank"
                rel="noopener noreferrer"
                style={{
                  scrollSnapAlign: 'start',
                  background: '#fff',
                  border: '1px solid var(--v2-line)',
                  borderRadius: 22,
                  padding: '28px 26px',
                  textDecoration: 'none',
                  color: 'inherit',
                  display: 'flex',
                  flexDirection: 'column',
                  gap: 14,
                  transition: 'transform .25s ease, box-shadow .25s ease, border-color .25s ease',
                }}
                onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 12px 32px -18px rgba(0,0,0,.25)'; e.currentTarget.style.borderColor = 'var(--v2-accent)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.borderColor = 'var(--v2-line)'; }}
              >
                <div style={{ display: 'inline-flex', alignSelf: 'flex-start', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--v2-accent)', fontWeight: 700, border: '1px solid var(--v2-accent)', borderRadius: 999, padding: '4px 10px' }}>{r.tag}</div>
                <h3 style={{ fontFamily: 'var(--font-display-v2)', fontWeight: 400, fontSize: 20, lineHeight: 1.3, letterSpacing: '-0.01em', color: 'var(--v2-ink)', margin: 0 }}>{r.title}</h3>
                <div style={{ fontSize: 12, color: 'var(--v2-muted)', fontStyle: 'italic' }}>{r.journal}</div>
                <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--v2-ink)', opacity: .82, margin: 0 }}>{r.summary}</p>
                <div style={{ marginTop: 'auto', fontSize: 13, fontWeight: 600, color: 'var(--v2-accent)' }}>Read study →</div>
              </a>
            ))}
          </div>
          <p style={{ textAlign: 'center', fontSize: 12, color: 'var(--v2-muted)', marginTop: 24 }}>
            Sources are provided for research context. Nothing here is medical advice or a claim of therapeutic effect.
          </p>
        </div>
      </section>



      {/* ---------- FINAL CTA ---------- */}
      <section style={{ background: 'var(--v2-cream-2)', borderTop: '1px solid var(--v2-line)' }}>
        <div style={{ maxWidth: 900, margin: '0 auto', padding: 'clamp(64px,8vw,120px) clamp(20px,4vw,56px)', textAlign: 'center' }}>
          <h2 style={{ fontFamily: 'var(--font-display-v2)', fontWeight: 400, fontSize: 'clamp(2rem,4.4vw,3.4rem)', letterSpacing: '-0.02em', lineHeight: 1.05, color: 'var(--v2-ink)', margin: 0 }}>
            Not sure where to start? <span style={{ fontStyle: 'italic', color: 'var(--v2-accent)' }}>{"\n"}We're here to help.</span>
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--v2-ink-2)', margin: '20px auto 0', maxWidth: 52 + 'ch' }}>
            Chat with our AI wellness guide - it'll ask a few questions, then suggest a starter routine
            that fits your research goals, budget and comfort level. No pressure - no forms - just simple science.
          </p>
          <div style={{ marginTop: 32, display: 'flex', justifyContent: 'center', gap: 12, flexWrap: 'wrap' }}>
            <button className="v2-btn primary" onClick={() => window.dispatchEvent(new CustomEvent('mvc-cta-open'))}>Talk to the guide</button>
            <button className="v2-btn secondary" onClick={() => onNav('compounds')}>Browse the shop</button>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { HomeV2 });