/* V2 Header + Footer — softer, plain-language nav. Reuses cart drawer from V1 parts.jsx. */

/* Official brand mark — animated orbiting cell. Used in the header, footer and hero. */
function VCOrbitMark({ size = 44, color = 'var(--v2-accent)', opacity = 1, style = {} }) {
  return (
    <svg className="vc-logo-mark" width={size} height={size} viewBox="0 0 64 64" fill="none"
         role="img" aria-label="My Vital Cell" style={{ opacity, ...style }}>
      <circle cx="32" cy="32" r="27" stroke={color} strokeWidth="1.2" opacity="0.55" />
      <g stroke={color} strokeWidth="0.7" opacity="0.32">
        <path d="M32 32 L20 21" /><path d="M32 32 L45 22" /><path d="M32 32 L46 40" /><path d="M32 32 L24 45" />
        <path d="M20 21 L45 22" /><path d="M45 22 L46 40" /><path d="M46 40 L24 45" /><path d="M24 45 L20 21" />
      </g>
      <g fill={color}>
        <circle cx="32" cy="32" r="4.4" />
        <circle className="vc-orb" style={{ '--ox': '6px', '--oy': '-4px', '--ox2': '-5px', '--oy2': '3px', '--ox3': '2px', '--oy3': '6px', animationDelay: '0s' }} cx="20" cy="21" r="2.6" />
        <circle className="vc-orb" style={{ '--ox': '-5px', '--oy': '5px', '--ox2': '4px', '--oy2': '-6px', '--ox3': '-2px', '--oy3': '4px', animationDelay: '-0.6s' }} cx="45" cy="22" r="2.2" />
        <circle className="vc-orb" style={{ '--ox': '-7px', '--oy': '-3px', '--ox2': '3px', '--oy2': '5px', '--ox3': '5px', '--oy3': '-4px', animationDelay: '-1.2s' }} cx="46" cy="40" r="2.6" />
        <circle className="vc-orb" style={{ '--ox': '4px', '--oy': '-6px', '--ox2': '-6px', '--oy2': '-3px', '--ox3': '3px', '--oy3': '5px', animationDelay: '-1.8s' }} cx="24" cy="45" r="2.2" />
      </g>
      <g fill={color} opacity="0.45">
        <circle className="vc-orb-sm" style={{ '--ox': '-4px', '--oy': '6px', '--ox2': '5px', '--oy2': '2px', '--ox3': '-3px', '--oy3': '-4px', animationDelay: '-0.3s' }} cx="38" cy="14" r="1.4" />
        <circle className="vc-orb-sm" style={{ '--ox': '-6px', '--oy': '-2px', '--ox2': '2px', '--oy2': '6px', '--ox3': '4px', '--oy3': '-5px', animationDelay: '-1.1s' }} cx="52" cy="32" r="1.4" />
        <circle className="vc-orb-sm" style={{ '--ox': '6px', '--oy': '-3px', '--ox2': '-3px', '--oy2': '5px', '--ox3': '-4px', '--oy3': '-2px', animationDelay: '-1.7s' }} cx="14" cy="36" r="1.4" />
        <circle className="vc-orb-sm" style={{ '--ox': '3px', '--oy': '-6px', '--ox2': '-5px', '--oy2': '-2px', '--ox3': '6px', '--oy3': '3px', animationDelay: '-2.4s' }} cx="34" cy="52" r="1.4" />
      </g>
    </svg>
  );
}

/* Site search — overlay panel that finds products and pages. */
function SearchOverlayV2({ open, onClose, onNav }) {
  const [q, setQ] = React.useState('');
  const inputRef = React.useRef(null);
  React.useEffect(() => {
    if (!open) return;
    setQ('');
    const t = setTimeout(() => inputRef.current && inputRef.current.focus(), 40);
    const esc = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', esc);
    return () => { clearTimeout(t); window.removeEventListener('keydown', esc); };
  }, [open]);
  if (!open) return null;

  const term = q.trim().toLowerCase();
  const products = (window.VC_PRODUCTS || []).filter((p) =>
    !term || (p.name + ' ' + (p.catLabel || '') + ' ' + (p.blurb || '')).toLowerCase().includes(term)
  ).slice(0, 8);
  const pages = [
    ['Shop all products', 'compounds'], ['How it works', 'how'],
    ['Learn', 'insights'], ['About us', 'about'], ['Contact', 'contact'],
  ].filter(([t]) => !term || t.toLowerCase().includes(term));

  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, zIndex: 120, background: 'rgba(20,20,25,0.42)',
      backdropFilter: 'blur(6px)', display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
      padding: 'clamp(60px,10vh,140px) 20px 20px', animation: 'v2FadeIn 220ms ease-out both',
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        width: '100%', maxWidth: 640, background: '#fff', border: '1px solid var(--v2-line)',
        borderRadius: 20, overflow: 'hidden', boxShadow: '0 40px 90px -40px rgba(0,0,0,0.5)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '16px 18px', borderBottom: '1px solid var(--v2-line)' }}>
          <i data-lucide="search" style={{ width: 18, height: 18, color: 'var(--v2-muted)' }}></i>
          <input ref={inputRef} value={q} onChange={(e) => setQ(e.target.value)}
                 placeholder="Search products and pages…"
                 style={{ flex: 1, border: 0, outline: 'none', fontSize: 16, fontFamily: 'var(--font-body-v2)', color: 'var(--v2-ink)', background: 'transparent' }} />
          <button onClick={onClose} aria-label="Close search"
                  style={{ border: 0, background: 'transparent', cursor: 'pointer', color: 'var(--v2-muted)', fontSize: 12, letterSpacing: '0.08em' }}>ESC</button>
        </div>
        <div style={{ maxHeight: '52vh', overflowY: 'auto', padding: '8px 0 12px' }}>
          {products.length === 0 && pages.length === 0 && (
            <div style={{ padding: '24px 20px', color: 'var(--v2-muted)', fontSize: 14 }}>Nothing matched “{q}”.</div>
          )}
          {products.length > 0 && (
            <div style={{ padding: '10px 20px 4px', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--v2-muted)', fontWeight: 600 }}>Products</div>
          )}
          {products.map((p) => (
            <div key={p.name} onClick={() => { onClose(); window.dispatchEvent(new CustomEvent('vc-open-product', { detail: p.name })); }}
                 style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '10px 20px', cursor: 'pointer' }}
                 onMouseEnter={(e) => (e.currentTarget.style.background = 'var(--v2-cream)')}
                 onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')}>
              <img src={(window.VC_PRODUCT_IMG || {})[p.name] || '/vital/img/cellular.jpg'} alt=""
                   style={{ width: 40, height: 40, borderRadius: 10, objectFit: 'contain', background: '#f0ebe1' }} />
              <div style={{ minWidth: 0 }}>
                <div style={{ fontSize: 14.5, fontWeight: 600, color: 'var(--v2-ink)' }}>{p.name}</div>
                <div style={{ fontSize: 12.5, color: 'var(--v2-muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.catLabel}</div>
              </div>
            </div>
          ))}
          {pages.length > 0 && (
            <div style={{ padding: '14px 20px 4px', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--v2-muted)', fontWeight: 600 }}>Pages</div>
          )}
          {pages.map(([t, k]) => (
            <div key={t} onClick={() => { onClose(); onNav(k); }}
                 style={{ padding: '10px 20px', cursor: 'pointer', fontSize: 14.5, color: 'var(--v2-ink)' }}
                 onMouseEnter={(e) => (e.currentTarget.style.background = 'var(--v2-cream)')}
                 onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')}>{t}</div>
          ))}
        </div>
      </div>
    </div>
  );
}


/* Tagline line that stretches its letters to fill the wordmark width exactly. */
function TaglineLine({ text }) {
  return (
    <span className="v2-tagline-line">
      {text.split('').map((ch, i) => (
        <span key={i} style={{ whiteSpace: 'pre' }}>{ch}</span>
      ))}
    </span>
  );
}

function HeaderV2({ page, onNav }) {
  const [cartCount, setCartCount] = React.useState(() => window.VC_CART.count());
  const [cartOpen, setCartOpen] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [searchOpen, setSearchOpen] = React.useState(false);
  const [openMenu, setOpenMenu] = React.useState(null);   // desktop dropdown
  const [mobileSub, setMobileSub] = React.useState(null); // mobile accordion
  const closeTimer = React.useRef(null);

  React.useEffect(() => {
    const onChange = (e) => setCartCount(e.detail?.count ?? window.VC_CART.count());
    const onOpen = () => setCartOpen(true);
    window.addEventListener('vc-cart-change', onChange);
    window.addEventListener('vc-cart-open', onOpen);
    return () => {
      window.removeEventListener('vc-cart-change', onChange);
      window.removeEventListener('vc-cart-open', onOpen);
    };
  }, []);
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); }, [cartCount, cartOpen, menuOpen, searchOpen, page, openMenu, mobileSub]);
  React.useEffect(() => { setMenuOpen(false); setOpenMenu(null); setMobileSub(null); }, [page]);

  const items = [
    { k: 'home',      t: 'Home' },
    { k: 'compounds', t: 'Shop', sub: [
      ['All products', 'compounds'], ['Skin & Glow', 'compounds'], ['Recovery', 'compounds'],
      ['Metabolic reset', 'compounds'], ['Longevity', 'compounds'], ['Focus', 'compounds'],
    ] },
    { k: 'how',       t: 'How It Works', sub: [
      ['The process', 'how'], ['Mixing & storage', 'how'], ['Common questions', 'how'],
    ] },
    { k: 'insights',  t: 'Learn', sub: [
      ['The science', 'insights'], ['Our standards', 'insights'], ['The Journal', 'insights'],
    ] },
    { k: 'about',     t: 'About', sub: [
      ['Our story', 'about'], ['Where we ship from', 'about'], ['Contact us', 'contact'],
    ] },
    { k: 'contact',   t: 'Contact', sub: [
      ['Get in touch', 'contact'], ['Shipping & returns', 'policy'], ['Payment options', 'policy'],
    ] },
  ];

  const hoverOpen = (k) => { clearTimeout(closeTimer.current); setOpenMenu(k); };
  const hoverClose = () => { clearTimeout(closeTimer.current); closeTimer.current = setTimeout(() => setOpenMenu(null), 140); };

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 40,
      background: 'rgba(248,244,236,0.92)', backdropFilter: 'blur(14px)',
      borderBottom: '1px solid var(--v2-line)',
    }}>
      <div className="v2-hdr-bar" style={{
        maxWidth: 1360, margin: '0 auto', padding: '0 clamp(16px,3.5vw,56px)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20,
      }}>
        {/* Wordmark */}
        <div onClick={() => onNav('home')} className="v2-hdr-brand" style={{ display: 'flex', alignItems: 'center', gap: 16, cursor: 'pointer', flex: '0 0 auto', minWidth: 0 }}>
          <span className="v2-hdr-mark"><VCOrbitMark size={61} /></span>
          <div style={{ lineHeight: 1 }}>
            <div className="v2-hdr-word" style={{ fontFamily: 'var(--font-display-v2)', fontWeight: 500, fontSize: 28, letterSpacing: '-0.01em', color: 'var(--v2-ink)', whiteSpace: 'nowrap' }}>My Vital Cell</div>
            <div className="v2-hdr-tag" style={{ fontFamily: 'var(--font-body-v2)', fontWeight: 500, color: 'var(--v2-muted)', marginTop: 7, textTransform: 'uppercase' }}>
              <TaglineLine text="Healthy Cells," />
              <TaglineLine text="Healthy Life" />
            </div>

          </div>
        </div>

        {/* Nav */}
        <nav className="v2-hide-md" style={{ display: 'flex', gap: 'clamp(18px,2.4vw,36px)' }}>
          {items.map((it) => (
            <div key={it.k} style={{ position: 'relative' }}
                 onMouseEnter={() => it.sub && hoverOpen(it.k)}
                 onMouseLeave={() => it.sub && hoverClose()}>
              <a onClick={() => onNav(it.k)} style={{
                cursor: 'pointer', fontFamily: 'var(--font-body-v2)',
                fontWeight: 500, fontSize: 18, display: 'inline-flex', alignItems: 'center', gap: 6,
                color: page === it.k ? 'var(--v2-accent)' : 'var(--v2-ink)',
                textDecoration: 'none', paddingBottom: 6,
                borderBottom: page === it.k ? '2px solid var(--v2-accent)' : '2px solid transparent',
                transition: 'color 160ms', whiteSpace: 'nowrap',
              }}>
                {it.t}
                {it.sub && <span style={{ fontSize: 9, opacity: 0.55, transform: openMenu === it.k ? 'rotate(180deg)' : 'none', transition: 'transform 180ms' }}>▼</span>}
              </a>
              {it.sub && openMenu === it.k && (
                <div style={{
                  position: 'absolute', top: '100%', left: -14, marginTop: 14, minWidth: 220,
                  background: '#fff', border: '1px solid var(--v2-line)', borderRadius: 16,
                  boxShadow: '0 30px 60px -34px rgba(20,20,25,0.45)', padding: '10px 0',
                  animation: 'v2FadeIn 160ms ease-out both', zIndex: 50,
                }}>
                  {it.sub.map(([label, dest]) => (
                    <div key={label} onClick={() => { setOpenMenu(null); onNav(dest); }}
                         style={{ padding: '11px 20px', fontSize: 14.5, color: 'var(--v2-ink-2)', cursor: 'pointer', whiteSpace: 'nowrap' }}
                         onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--v2-cream)'; e.currentTarget.style.color = 'var(--v2-accent)'; }}
                         onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--v2-ink-2)'; }}>
                      {label}
                    </div>
                  ))}
                </div>
              )}
            </div>
          ))}
        </nav>

        {/* Actions */}
        <div className="v2-hdr-actions" style={{ display: 'flex', alignItems: 'center', gap: 10, flex: '0 0 auto' }}>
          <button
            className="v2-hdr-btn"
            aria-label="Search"
            onClick={() => setSearchOpen(true)}
            style={{ borderRadius: 999, background: 'transparent',
                     color: 'var(--v2-ink)', border: '1px solid var(--v2-line)', cursor: 'pointer',
                     display: 'inline-flex', alignItems: 'center', justifyContent: 'center', padding: 0 }}
          >
            <i data-lucide="search" className="v2-hdr-ic"></i>
          </button>
          <button
            className="v2-hdr-btn"
            aria-label={`Cart, ${cartCount} items`}
            onClick={() => setCartOpen(true)}
            style={{ position: 'relative', borderRadius: 999,
                     background: 'var(--v2-ink)', color: '#fff', border: 0, cursor: 'pointer',
                     display: 'inline-flex', alignItems: 'center', justifyContent: 'center', padding: 0 }}
          >
            <i data-lucide="shopping-bag" className="v2-hdr-ic"></i>
            {cartCount > 0 && (
              <span style={{ position: 'absolute', top: -4, right: -4, minWidth: 20, height: 20, padding: '0 5px',
                             borderRadius: 999, background: 'var(--v2-accent)', color: '#fff',
                             fontFamily: 'var(--font-body-v2)', fontWeight: 700, fontSize: 10,
                             display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                             border: '2px solid var(--v2-cream)' }}>{cartCount}</span>
            )}
          </button>

          <button
            className="v2-hide-md-inv v2-hdr-btn"
            aria-label={menuOpen ? 'Close menu' : 'Open menu'}
            onClick={() => setMenuOpen((v) => !v)}
            style={{ display: 'none', borderRadius: 999,
                     background: 'transparent', color: 'var(--v2-ink)', border: '1px solid var(--v2-line)',
                     cursor: 'pointer', alignItems: 'center', justifyContent: 'center', padding: 0 }}
          >
            <i data-lucide={menuOpen ? 'x' : 'menu'} className="v2-hdr-ic"></i>
          </button>
        </div>
      </div>

      {menuOpen && (
        <div style={{ borderTop: '1px solid var(--v2-line)', background: '#fff', padding: '8px 18px 18px', maxHeight: '70vh', overflowY: 'auto' }}>
          {items.map((it) => (
            <div key={it.k} style={{ borderBottom: '1px solid var(--v2-line)' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
                <a onClick={() => { onNav(it.k); setMenuOpen(false); }}
                   style={{ flex: 1, display: 'block', padding: '15px 4px', cursor: 'pointer',
                            fontFamily: 'var(--font-body-v2)', fontWeight: 600, fontSize: 16,
                            color: page === it.k ? 'var(--v2-accent)' : 'var(--v2-ink)', textDecoration: 'none' }}>{it.t}</a>
                {it.sub && (
                  <button onClick={() => setMobileSub(mobileSub === it.k ? null : it.k)}
                          aria-label={`Toggle ${it.t} menu`}
                          style={{ width: 38, height: 38, borderRadius: 999, border: '1px solid var(--v2-line)',
                                   background: '#fff', color: 'var(--v2-ink-2)', cursor: 'pointer', fontSize: 11,
                                   transform: mobileSub === it.k ? 'rotate(180deg)' : 'none', transition: 'transform 180ms' }}>▼</button>
                )}
              </div>
              {it.sub && mobileSub === it.k && (
                <div style={{ padding: '0 4px 12px' }}>
                  {it.sub.map(([label, dest]) => (
                    <a key={label} onClick={() => { onNav(dest); setMenuOpen(false); }}
                       style={{ display: 'block', padding: '11px 12px', fontSize: 14.5, color: 'var(--v2-ink-2)',
                                cursor: 'pointer', textDecoration: 'none', borderLeft: '2px solid var(--v2-line)' }}>{label}</a>
                  ))}
                </div>
              )}
            </div>
          ))}
        </div>
      )}

      <CartDrawer open={cartOpen} onClose={() => setCartOpen(false)} onNav={onNav} />
      <SearchOverlayV2 open={searchOpen} onClose={() => setSearchOpen(false)} onNav={onNav} />

      <style>{`
        .v2-hdr-bar { height: 128px; }
        .v2-hdr-btn { width: 58px; height: 58px; flex: 0 0 auto; }
        .v2-hdr-ic { width: 24px; height: 24px; }
        .v2-hdr-tag { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; }
        .v2-hdr-tag > .v2-tagline-line { display: flex; justify-content: space-between; width: 100%; line-height: 1.25; }
        @media (max-width: 900px) {
          header nav.v2-hide-md { display: none !important; }
          header button.v2-hide-md-inv { display: inline-flex !important; }
          .v2-hdr-bar { height: 84px; gap: 10px; }
          .v2-hdr-brand { gap: 10px; }
          .v2-hdr-mark svg { width: 40px !important; height: 40px !important; }
          .v2-hdr-word { font-size: 20px !important; }
          .v2-hdr-tag { font-size: 8.5px; gap: 2px; }
          .v2-hdr-btn { width: 42px; height: 42px; }
          .v2-hdr-ic { width: 18px; height: 18px; }
          .v2-hdr-actions { gap: 8px; }
        }
        @media (max-width: 380px) {
          .v2-hdr-word { font-size: 17px !important; }
          .v2-hdr-mark svg { width: 34px !important; height: 34px !important; }
          .v2-hdr-btn { width: 38px; height: 38px; }
        }
      `}</style>
    </header>
  );
}


function FooterV2({ onNav }) {
  const cols = [
    { h: 'Shop', links: [['All products', 'compounds'], ['Skin & Glow', 'compounds'], ['Recovery', 'compounds'], ['Longevity', 'compounds'], ['Focus', 'compounds']] },
    { h: 'Learn', links: [['How it works', 'how'], ['The science', 'insights'], ['Our standards', 'insights'], ['The Journal', 'insights'], ['About us', 'about']] },
    { h: 'Support', links: [['Contact', 'contact'], ['Shipping & returns', 'policy'], ['Payment options', 'policy'], ['Get in touch', 'contact']] },
  ];
  return (
    <footer style={{ background: '#fff', borderTop: '1px solid var(--v2-line)' }}>
      {/* Animated orbiting-dots brand mark */}
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: 'clamp(56px,7vw,96px) clamp(20px,4vw,56px) 8px', textAlign: 'center' }}>
        <svg className="vc-logo-mark" width="140" height="140" viewBox="0 0 64 64" fill="none" role="img" aria-label="Vital Cell">
          <circle cx="32" cy="32" r="27" stroke="var(--v2-accent)" strokeWidth="1.2" opacity="0.55" />
          <g stroke="var(--v2-accent)" strokeWidth="0.7" opacity="0.32">
            <path d="M32 32 L20 21" /><path d="M32 32 L45 22" /><path d="M32 32 L46 40" /><path d="M32 32 L24 45" />
            <path d="M20 21 L45 22" /><path d="M45 22 L46 40" /><path d="M46 40 L24 45" /><path d="M24 45 L20 21" />
          </g>
          <g fill="var(--v2-accent)">
            <circle cx="32" cy="32" r="4.4" />
            <circle className="vc-orb" style={{ '--ox': '6px', '--oy': '-4px', '--ox2': '-5px', '--oy2': '3px', '--ox3': '2px', '--oy3': '6px', animationDelay: '0s' }} cx="20" cy="21" r="2.6" />
            <circle className="vc-orb" style={{ '--ox': '-5px', '--oy': '5px', '--ox2': '4px', '--oy2': '-6px', '--ox3': '-2px', '--oy3': '4px', animationDelay: '-0.6s' }} cx="45" cy="22" r="2.2" />
            <circle className="vc-orb" style={{ '--ox': '-7px', '--oy': '-3px', '--ox2': '3px', '--oy2': '5px', '--ox3': '5px', '--oy3': '-4px', animationDelay: '-1.2s' }} cx="46" cy="40" r="2.6" />
            <circle className="vc-orb" style={{ '--ox': '4px', '--oy': '-6px', '--ox2': '-6px', '--oy2': '-3px', '--ox3': '3px', '--oy3': '5px', animationDelay: '-1.8s' }} cx="24" cy="45" r="2.2" />
          </g>
          <g fill="var(--v2-accent)" opacity="0.45">
            <circle className="vc-orb-sm" style={{ '--ox': '-4px', '--oy': '6px', '--ox2': '5px', '--oy2': '2px', '--ox3': '-3px', '--oy3': '-4px', animationDelay: '-0.3s' }} cx="38" cy="14" r="1.4" />
            <circle className="vc-orb-sm" style={{ '--ox': '-6px', '--oy': '-2px', '--ox2': '2px', '--oy2': '6px', '--ox3': '4px', '--oy3': '-5px', animationDelay: '-1.1s' }} cx="52" cy="32" r="1.4" />
            <circle className="vc-orb-sm" style={{ '--ox': '6px', '--oy': '-3px', '--ox2': '-3px', '--oy2': '5px', '--ox3': '-4px', '--oy3': '-2px', animationDelay: '-1.7s' }} cx="14" cy="36" r="1.4" />
            <circle className="vc-orb-sm" style={{ '--ox': '3px', '--oy': '-6px', '--ox2': '-5px', '--oy2': '-2px', '--ox3': '6px', '--oy3': '3px', animationDelay: '-2.4s' }} cx="34" cy="52" r="1.4" />
          </g>
        </svg>
        <div style={{ fontFamily: 'var(--font-body-v2)', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--v2-accent)', marginTop: 18 }}>~ AS ABOVE, SO BELOW ~</div>
        <div style={{ fontFamily: 'var(--font-display-v2)', fontWeight: 400, fontStyle: 'italic', fontSize: 'clamp(1.4rem,2.4vw,2rem)', color: 'var(--v2-ink)', marginTop: 6, whiteSpace: 'pre-line' }}>"Healthy Cells,&nbsp;Healthy Life"</div>
      </div>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '48px clamp(20px,4vw,56px) 40px',
                    display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr', gap: 48 }} className="v2-grid-4">
        <div>
          <div style={{ fontFamily: 'var(--font-display-v2)', fontSize: 28, letterSpacing: '-0.01em', color: 'var(--v2-ink)' }}>My Vital Cell</div>
          <p style={{ fontSize: 14, lineHeight: 1.7, color: 'var(--v2-muted)', maxWidth: 34 + 'ch', marginTop: 12 }}>
            Premium peptides and cellular wellness for patients and researchers who want to feel their best — sleep deeper,
            recover faster, and age well. Backed by science, delivered simply.
          </p>
          <div style={{ fontSize: 13.5, lineHeight: 1.7, color: 'var(--v2-ink-2)', marginTop: 16 }}>
            <div style={{ fontWeight: 600, color: 'var(--v2-ink)' }}>Phoenix, Arizona</div>
            <div>Headquarters &amp; shipping origin</div>
            <div style={{ marginTop: 8 }}>Call or text · <a href="tel:+16026377231" style={{ color: 'var(--v2-accent)', textDecoration: 'none', fontWeight: 600, whiteSpace: 'nowrap' }}>+1 (602) 637-7231</a></div>
            <div style={{ marginTop: 4 }}>Payment by Zelle · <span style={{ whiteSpace: 'nowrap' }}>(602) 471-2152</span></div>
          </div>
        </div>

        {cols.map((c) => (
          <div key={c.h}>
            <div style={{ fontFamily: 'var(--font-body-v2)', fontWeight: 700, fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--v2-ink)', marginBottom: 20 }}>{c.h}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {c.links.map(([l, p]) => (
                <a key={l} onClick={() => onNav(p)} style={{ cursor: 'pointer', fontSize: 14, color: 'var(--v2-ink-2)', textDecoration: 'none' }}>{l}</a>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{ borderTop: '1px solid var(--v2-line)', padding: '20px clamp(20px,4vw,56px)',
                    display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12,
                    maxWidth: 1240, margin: '0 auto' }}>
        <span style={{ fontSize: 11.5, color: 'var(--v2-muted)' }}>© 2026 My Vital Cell.</span>
        <span style={{ fontSize: 11.5, color: 'var(--v2-muted)' }}>Privacy · Terms · Cookies · For research use only. Not intended for human consumption.</span>
      </div>
    </footer>
  );
}

Object.assign(window, { HeaderV2, FooterV2, VCOrbitMark, SearchOverlayV2 });