/* My Vital Cell website kit — shared parts: Logo, image components, Header, Footer */

function VCLogo({ dark = false, size = 54 }) {
  const c = dark ? '#FF5670' : '#DC2743';
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '16px', cursor: 'pointer', whiteSpace: 'nowrap' }}>
      <svg className="vc-logo-mark" width={size} height={size} viewBox="0 0 64 64" fill="none" role="img" aria-label="My Vital Cell">
        <circle cx="32" cy="32" r="27" stroke={c} strokeWidth="1.4" opacity="0.55" />
        <g stroke={c} strokeWidth="1" 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={c}>
          <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={c} 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={{ lineHeight: 1, minWidth: 0 }}>
        <div className="vc-wordmark" style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: size * 0.46 + 'px', letterSpacing: '0.18em', color: dark ? '#fff' : 'var(--vc-ink)', whiteSpace: 'nowrap' }}>MY&nbsp;VITAL&nbsp;CELL</div>
        <div className="vc-wordmark-sub" style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: '9.5px', letterSpacing: '0.34em', color: dark ? 'var(--vc-crimson-400)' : 'var(--vc-crimson-500)', marginTop: '7px' }}>ELEVATING WELLNESS</div>

      </div>
    </div>
  );
}


/* Constellation overlay — echoes the cellular-network motif */
function MoleculeField({ color = 'rgba(220,39,67,0.85)', opacity = 1, dense = false, linkDistance = 34, speed = 1, nodeScale = 1 }) {
  const svgRef = React.useRef(null);
  const linesRef = React.useRef(null);
  const dotsRef = React.useRef(null);
  const ptsRef = React.useRef(null);

  React.useEffect(() => {
    // Seed points in a 100x100 virtual space with slow drift velocities
    const N = dense ? 14 : 9;
    const rand = (a, b) => a + Math.random() * (b - a);
    const pts = Array.from({ length: N }, () => ({
      x: rand(6, 94), y: rand(6, 94),
      vx: rand(-0.05, 0.05) * speed, vy: rand(-0.05, 0.05) * speed,
      r: (Math.random() < 0.35 ? 1.05 : 0.7) * nodeScale,
      phase: Math.random() * Math.PI * 2,
    }));
    ptsRef.current = pts;

    const svg = svgRef.current; if (!svg) return;
    const NS = 'http://www.w3.org/2000/svg';

    // Build dots
    const dotsG = dotsRef.current;
    while (dotsG.firstChild) dotsG.removeChild(dotsG.firstChild);
    const dotEls = pts.map((p) => {
      const c = document.createElementNS(NS, 'circle');
      c.setAttribute('r', p.r);
      c.setAttribute('fill', color);
      dotsG.appendChild(c);
      return c;
    });

    // Build line pool for all possible pairs
    const linesG = linesRef.current;
    while (linesG.firstChild) linesG.removeChild(linesG.firstChild);
    const pairs = [];
    for (let i = 0; i < N; i++) for (let j = i + 1; j < N; j++) pairs.push([i, j]);
    const lineEls = pairs.map(() => {
      const l = document.createElementNS(NS, 'line');
      l.setAttribute('stroke', color);
      l.setAttribute('stroke-width', String(0.28 * nodeScale));
      l.setAttribute('stroke-linecap', 'round');
      linesG.appendChild(l);
      return l;
    });

    let raf = 0;
    const tick = (t) => {
      for (let i = 0; i < pts.length; i++) {
        const p = pts[i];
        p.x += p.vx; p.y += p.vy;
        if (p.x < 4 || p.x > 96) p.vx *= -1;
        if (p.y < 4 || p.y > 96) p.vy *= -1;
        const pulse = 0.75 + 0.25 * Math.sin(t * 0.0012 * speed + p.phase);
        dotEls[i].setAttribute('cx', p.x.toFixed(2));
        dotEls[i].setAttribute('cy', p.y.toFixed(2));
        dotEls[i].setAttribute('opacity', pulse.toFixed(3));
      }
      for (let k = 0; k < pairs.length; k++) {
        const [a, b] = pairs[k];
        const pa = pts[a], pb = pts[b];
        const dx = pa.x - pb.x, dy = pa.y - pb.y;
        const d = Math.sqrt(dx * dx + dy * dy);
        const el = lineEls[k];
        if (d < linkDistance) {
          const strength = 1 - d / linkDistance;
          const fade = 0.35 + 0.55 * Math.sin(t * 0.0006 * speed + (a + b));
          const o = Math.max(0, Math.min(1, strength * (0.35 + 0.65 * Math.abs(fade))));
          el.setAttribute('x1', pa.x.toFixed(2));
          el.setAttribute('y1', pa.y.toFixed(2));
          el.setAttribute('x2', pb.x.toFixed(2));
          el.setAttribute('y2', pb.y.toFixed(2));
          el.setAttribute('opacity', o.toFixed(3));
        } else {
          el.setAttribute('opacity', '0');
        }
      }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [color, dense, linkDistance, speed, nodeScale]);

  return (
    <svg
      ref={svgRef}
      viewBox="0 0 100 100"
      preserveAspectRatio="xMidYMid slice"
      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity, pointerEvents: 'none' }}
    >
      <g ref={linesRef} />
      <g ref={dotsRef} />
    </svg>
  );
}


/* Real photography component — replaces VCImage's wash placeholder.
   Falls back to constellation overlay if no src. */
function VCPhoto({ src, alt = '', overlay = 'none', ken = false, style = {}, className = '' }) {
  const overlays = {
    none: null,
    ink: 'linear-gradient(180deg, rgba(15,15,18,0.0) 50%, rgba(15,15,18,0.55) 100%)',
    warm: 'linear-gradient(180deg, rgba(40,12,16,0.0) 55%, rgba(40,12,16,0.45) 100%)',
    soft: 'linear-gradient(180deg, rgba(255,255,255,0.0) 60%, rgba(255,255,255,0.35) 100%)',
  };
  return (
    <div className={className} style={{ position: 'relative', overflow: 'hidden', background: '#1a1a1e', ...style }}>
      <img
        src={src}
        alt={alt}
        className={ken ? 'vc-ken' : ''}
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
      />
      {overlays[overlay] && (
        <div style={{ position: 'absolute', inset: 0, background: overlays[overlay], pointerEvents: 'none' }} />
      )}
    </div>
  );
}

/* Branded image placeholder — retained as a fallback when no photo is supplied. */
function VCImage({ tone = 'cool', label, style = {}, children }) {
  const washes = {
    cool: 'linear-gradient(135deg, #e9eaee 0%, #f4f1f3 55%, #eceef1 100%)',
    warm: 'linear-gradient(135deg, #f6ece4 0%, #f8f0ea 50%, #f0e7e2 100%)',
    skin: 'linear-gradient(135deg, #f6ece9 0%, #f8f1ef 45%, #efe6e6 100%)',
    crimson: 'linear-gradient(135deg, #2a1418 0%, #4a1822 60%, #2a1014 100%)',
    ink: 'linear-gradient(135deg, #16161a 0%, #22222a 100%)',
  };
  return (
    <div style={{ position: 'relative', overflow: 'hidden', background: washes[tone] || washes.cool, ...style }}>
      <MoleculeField color={tone === 'crimson' || tone === 'ink' ? 'rgba(255,255,255,0.5)' : 'rgba(220,39,67,0.45)'} opacity={0.7} />
      <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <img src={tone === 'crimson' || tone === 'ink' ? '../../assets/vitalcell-mark-white.svg' : '../../assets/vitalcell-mark.svg'} width="56" height="56" style={{ opacity: 0.22 }} />
      </div>
      {label && (
        <div style={{ position: 'absolute', bottom: '12px', left: '14px', fontFamily: 'var(--font-mono)', fontSize: '9px', letterSpacing: '0.12em', textTransform: 'uppercase', color: tone === 'crimson' || tone === 'ink' ? 'rgba(255,255,255,0.6)' : 'var(--color-text-muted)' }}>{label}</div>
      )}
      {children}
    </div>
  );
}

/* ---------- Cart store (shared, event-driven, localStorage-backed) ---------- */
(function initCartStore() {
  if (window.VC_CART) return;
  const KEY = 'mvc_cart_v2';
  const load = () => { try { return JSON.parse(localStorage.getItem(KEY) || '[]'); } catch { return []; } };
  const save = (items) => {
    try { localStorage.setItem(KEY, JSON.stringify(items)); } catch {}
    // Mirror count to legacy key for anything still reading it
    const count = items.reduce((s, it) => s + (it.qty || 1), 0);
    try { localStorage.setItem('mvc_cart_count', String(count)); } catch {}
    window.dispatchEvent(new CustomEvent('vc-cart-change', { detail: { items, count } }));
  };
  const priceFor = (name) => {
    // Explicit override wins (e.g. Bacteriostatic Water = $5)
    const overrides = (window.VC_PRICE_OVERRIDE) || {};
    if (Object.prototype.hasOwnProperty.call(overrides, name)) return overrides[name];
    // Deterministic pseudo-price: $180–$420 in $10 steps based on name hash
    let h = 0; for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) >>> 0;
    return 180 + (h % 25) * 10;
  };
  window.VC_CART = {
    KEY,
    get: load,
    count: () => load().reduce((s, it) => s + (it.qty || 1), 0),
    subtotal: () => load().reduce((s, it) => s + (it.price || 0) * (it.qty || 1), 0),
    price: priceFor,
    add: (item) => {
      const items = load();
      const key = item.name;
      const found = items.find((x) => x.name === key);
      if (found) found.qty = (found.qty || 1) + (item.qty || 1);
      else items.push({ name: item.name, catLabel: item.catLabel || '', formula: item.formula || '', price: item.price != null ? item.price : priceFor(item.name), qty: item.qty || 1 });
      save(items);
      window.dispatchEvent(new CustomEvent('vc-cart-open'));
    },
    setQty: (name, qty) => {
      const items = load().map((it) => it.name === name ? { ...it, qty: Math.max(1, qty) } : it);
      save(items);
    },
    remove: (name) => save(load().filter((it) => it.name !== name)),
    clear: () => save([]),
  };
})();

function CartDrawer({ open, onClose, onNav }) {
  const [items, setItems] = React.useState(() => window.VC_CART.get());
  const [toast, setToast] = React.useState('');
  React.useEffect(() => {
    const h = () => setItems(window.VC_CART.get());
    window.addEventListener('vc-cart-change', h);
    return () => window.removeEventListener('vc-cart-change', h);
  }, []);
  React.useEffect(() => {
    if (open) document.body.style.overflow = 'hidden'; else document.body.style.overflow = '';
    window.dispatchEvent(new CustomEvent('vc-cart-visibility', { detail: { open } }));
    return () => { document.body.style.overflow = ''; };
  }, [open]);
  const subtotal = items.reduce((s, it) => s + (it.price || 0) * (it.qty || 1), 0);
  const fmt = (n) => '$' + n.toFixed(2);

  return (
    <>
      <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(10,12,18,0.42)', backdropFilter: 'blur(4px)', opacity: open ? 1 : 0, pointerEvents: open ? 'auto' : 'none', transition: 'opacity 240ms ease', zIndex: 10000 }} />
      <aside role="dialog" aria-label="Shopping cart" style={{ position: 'fixed', top: 0, right: 0, height: 'calc(100vh - var(--devbar-h, 0px))', width: 'min(460px, 96vw)', background: 'var(--color-surface, #fff)', borderLeft: '1px solid var(--color-border)', boxShadow: '-24px 0 60px -20px rgba(10,12,18,0.35)', transform: open ? 'translateX(0)' : 'translateX(100%)', transition: 'transform 320ms cubic-bezier(.2,.7,.2,1)', zIndex: 10001, display: 'flex', flexDirection: 'column' }}>
        <header style={{ padding: '22px 24px 18px', borderBottom: '1px solid var(--color-border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div>
            <div style={{ fontFamily: 'var(--font-mono, monospace)', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--color-accent)', marginBottom: 6 }}>Your Cart</div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, margin: 0, fontSize: 22, letterSpacing: '0.02em', color: 'var(--color-ink-strong)' }}>{items.length} {items.length === 1 ? 'item' : 'items'}</h3>
          </div>
          <button onClick={onClose} aria-label="Close cart" style={{ background: 'transparent', border: '1px solid var(--color-border)', width: 36, height: 36, borderRadius: 6, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--color-ink)' }}>
            <i data-lucide="x" style={{ width: 18, height: 18 }}></i>
          </button>
        </header>

        <div style={{ flex: 1, overflowY: 'auto', padding: '4px 8px' }}>
          {items.length === 0 ? (
            <div style={{ padding: '64px 28px', textAlign: 'center', color: 'var(--color-text-muted)' }}>
              <div style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 64, height: 64, borderRadius: '50%', background: 'var(--color-surface-haze)', margin: '0 auto 18px' }}>
                <i data-lucide="shopping-bag" style={{ width: 26, height: 26 }}></i>
              </div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, color: 'var(--color-ink-strong)', marginBottom: 6 }}>Your cart is empty</div>
              <div style={{ fontSize: 13, lineHeight: 1.6, marginBottom: 20 }}>Explore research compounds or build a custom plan with our AI specialist.</div>
              <button onClick={() => { onClose(); onNav && onNav('compounds'); }} style={{ appearance: 'none', border: '1px solid var(--color-ink-strong)', background: 'var(--color-ink-strong)', color: 'var(--color-on-ink, #fff)', padding: '11px 20px', borderRadius: 4, fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', cursor: 'pointer' }}>Browse compounds</button>
            </div>
          ) : (
            items.map((it) => (
              <div key={it.name} style={{ display: 'grid', gridTemplateColumns: '56px 1fr auto', gap: 14, alignItems: 'center', padding: '16px 16px', borderBottom: '1px solid var(--color-border)' }}>
                <div style={{ width: 56, height: 56, borderRadius: 6, background: 'var(--color-surface-haze)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                  <img src="../../assets/vitalcell-mark.svg" width="26" height="26" alt="" style={{ opacity: 0.72 }} />
                </div>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 14, color: 'var(--color-ink-strong)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{it.name}</div>
                  {it.catLabel && <div style={{ fontSize: 11, color: 'var(--color-text-muted)', letterSpacing: '0.06em', textTransform: 'uppercase', marginTop: 3 }}>{it.catLabel}</div>}
                  <div style={{ marginTop: 10, display: 'inline-flex', alignItems: 'center', gap: 0, border: '1px solid var(--color-border)', borderRadius: 4, overflow: 'hidden' }}>
                    <button onClick={() => window.VC_CART.setQty(it.name, (it.qty || 1) - 1)} aria-label="Decrease" style={{ appearance: 'none', border: 0, background: 'transparent', width: 26, height: 26, cursor: 'pointer', color: 'var(--color-ink)' }}>−</button>
                    <span style={{ minWidth: 24, textAlign: 'center', fontFamily: 'var(--font-mono, monospace)', fontSize: 12 }}>{it.qty || 1}</span>
                    <button onClick={() => window.VC_CART.setQty(it.name, (it.qty || 1) + 1)} aria-label="Increase" style={{ appearance: 'none', border: 0, background: 'transparent', width: 26, height: 26, cursor: 'pointer', color: 'var(--color-ink)' }}>+</button>
                  </div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{ fontFamily: 'var(--font-mono, monospace)', fontWeight: 600, fontSize: 14, color: 'var(--color-ink-strong)' }}>{fmt((it.price || 0) * (it.qty || 1))}</div>
                  <button onClick={() => window.VC_CART.remove(it.name)} style={{ appearance: 'none', background: 'transparent', border: 0, color: 'var(--color-text-muted)', fontSize: 11, cursor: 'pointer', marginTop: 6, textDecoration: 'underline' }}>Remove</button>
                </div>
              </div>
            ))
          )}
        </div>

        {items.length > 0 && (
          <footer style={{ padding: '18px 24px 22px', borderTop: '1px solid var(--color-border)', background: 'var(--color-surface-haze)' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, color: 'var(--color-text-muted)', marginBottom: 6 }}><span>Subtotal</span><span>{fmt(subtotal)}</span></div>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, color: 'var(--color-text-muted)', marginBottom: 12 }}><span>Shipping</span><span>Calculated at checkout</span></div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', fontFamily: 'var(--font-display)', fontSize: 20, color: 'var(--color-ink-strong)', marginBottom: 16 }}><span>Total</span><span>{fmt(subtotal)}</span></div>
            <button onClick={() => { onClose(); window.VC_ORDER && window.VC_ORDER.open(); }} style={{ width: '100%', appearance: 'none', border: '1px solid var(--color-ink-strong)', background: 'var(--color-ink-strong)', color: 'var(--color-on-ink, #fff)', padding: '14px 20px', borderRadius: 4, fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', cursor: 'pointer' }}>Ready to order</button>
            <div style={{ display: 'flex', gap: 10, marginTop: 10 }}>
              <button onClick={() => { onClose(); onNav && onNav('compounds'); }} style={{ flex: 1, appearance: 'none', border: '1px solid var(--color-border)', background: 'transparent', color: 'var(--color-ink)', padding: '11px 14px', borderRadius: 4, fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', cursor: 'pointer' }}>Keep shopping</button>
              <button onClick={() => window.VC_CART.clear()} style={{ appearance: 'none', border: '1px solid var(--color-border)', background: 'transparent', color: 'var(--color-text-muted)', padding: '11px 14px', borderRadius: 4, fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', cursor: 'pointer' }}>Clear</button>
            </div>
            {toast && <div style={{ marginTop: 12, padding: '10px 12px', background: 'var(--color-accent-soft, #FBEEF1)', color: 'var(--color-accent)', borderRadius: 4, fontSize: 12, textAlign: 'center' }}>{toast}</div>}
          </footer>
        )}
      </aside>
    </>
  );
}

function Header({ page, onNav }) {
  const { IconButton } = window.VitalCellDesignSystem_fbb4ec;
  const [cartCount, setCartCount] = React.useState(() => window.VC_CART.count());
  const [cartOpen, setCartOpen] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    const h = (e) => setCartCount(e.detail?.count ?? window.VC_CART.count());
    const openH = () => setCartOpen(true);
    window.addEventListener('vc-cart-change', h);
    window.addEventListener('vc-cart-open', openH);
    return () => { window.removeEventListener('vc-cart-change', h); window.removeEventListener('vc-cart-open', openH); };
  }, []);
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); }, [cartOpen, cartCount, menuOpen]);
  React.useEffect(() => { setMenuOpen(false); }, [page]);

  const items = [
    { k: 'home', t: 'Home' },
    { k: 'compounds', t: 'Compounds' },
    { k: 'science', t: 'Learn' },
    { k: 'about', t: 'About' },
    { k: 'contact', t: 'Contact' },
  ];
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 40, background: 'rgba(251,250,252,0.9)', backdropFilter: 'blur(14px)', borderBottom: '1px solid var(--color-border)' }}>
      <div className="vc-header-row" style={{ maxWidth: '1360px', margin: '0 auto', padding: '0 clamp(20px,3.5vw,56px)', height: '96px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '20px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, flex: '0 0 auto' }}>
          <div onClick={() => onNav('home')} style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 14 }}>
            <span className="vc-monogram" style={{ width: 46, height: 46 }} aria-label="Vital Cell monogram">
              <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" role="img">
                <path className="vcm-c" d="M50 20 A18 18 0 1 0 50 44" stroke="var(--color-sage, #0F5B60)" strokeWidth="5" />
                <path className="vcm-v" d="M14 16 L28 48 L42 16" stroke="var(--color-accent)" strokeWidth="5" />
                <circle className="vcm-dot" cx="32" cy="32" r="2.4" fill="var(--color-accent)" />
              </svg>
            </span>
            <div style={{ lineHeight: 1 }}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 22, letterSpacing: '0.18em', color: 'var(--vc-ink, #1B1D1C)', whiteSpace: 'nowrap' }}>MY&nbsp;VITAL&nbsp;CELL</div>
              <div style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 9.5, letterSpacing: '0.34em', color: 'var(--color-accent)', marginTop: 7 }}>ELEVATING WELLNESS</div>
            </div>
          </div>
          <span aria-label="Beta" style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '3px 8px', borderRadius: 3, background: 'var(--color-accent)', color: '#fff', fontFamily: 'var(--font-mono, monospace)', fontSize: 9, fontWeight: 700, letterSpacing: '0.22em', textTransform: 'uppercase', lineHeight: 1 }}>
            <span style={{ width: 5, height: 5, borderRadius: '50%', background: '#fff', boxShadow: '0 0 0 2px rgba(255,255,255,0.25)' }} />
            Beta
          </span>
        </div>
        <nav className="vc-header-nav" style={{ display: 'flex', gap: '26px' }}>
          {items.map((it) => (
            <a key={it.k} onClick={() => onNav(it.k)} style={{ cursor: 'pointer', fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: '12px', letterSpacing: '0.16em', textTransform: 'uppercase', color: page === it.k ? 'var(--color-accent)' : 'var(--color-ink-2)', textDecoration: 'none', paddingBottom: '6px', borderBottom: page === it.k ? '2px solid var(--color-accent)' : '2px solid transparent', transition: 'color 140ms' }}>{it.t}</a>
          ))}
        </nav>
        <div style={{ display: 'flex', alignItems: 'center', gap: '10px', flex: '0 0 auto' }}>
          <IconButton className="vc-header-search" aria-label="Search" variant="ghost" size="lg"><i data-lucide="search" style={{ width: 22, height: 22 }}></i></IconButton>
          <button
            aria-label={`Cart, ${cartCount} items`}
            onClick={() => setCartOpen(true)}
            style={{ position: 'relative', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: '46px', height: '46px', borderRadius: 'var(--radius-xs)', background: 'var(--color-ink-strong)', color: '#fff', border: '1px solid var(--color-ink-strong)', cursor: 'pointer', transition: 'background 140ms', flex: '0 0 auto' }}
            onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--color-accent)'; e.currentTarget.style.borderColor = 'var(--color-accent)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--color-ink-strong)'; e.currentTarget.style.borderColor = 'var(--color-ink-strong)'; }}
          >
            <i data-lucide="shopping-bag" style={{ width: 20, height: 20 }}></i>
            {cartCount > 0 && (
              <span style={{ position: 'absolute', top: '-6px', right: '-6px', minWidth: '20px', height: '20px', padding: '0 5px', borderRadius: '999px', background: 'var(--color-accent)', color: '#fff', fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: '10px', letterSpacing: '0.02em', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', border: '2px solid var(--color-surface, #fbfafc)' }}>{cartCount}</span>
            )}
          </button>
          <button
            className="vc-header-burger"
            aria-label={menuOpen ? 'Close menu' : 'Open menu'}
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen((v) => !v)}
            style={{ display: 'none', alignItems: 'center', justifyContent: 'center', width: '46px', height: '46px', borderRadius: 'var(--radius-xs)', background: 'transparent', color: 'var(--color-ink-strong)', border: '1px solid var(--color-border)', cursor: 'pointer', flex: '0 0 auto' }}
          >
            <i data-lucide={menuOpen ? 'x' : 'menu'} style={{ width: 22, height: 22 }}></i>
          </button>
        </div>
      </div>
      {menuOpen && (
        <div className="vc-mobile-menu" style={{ borderTop: '1px solid var(--color-border)', background: 'var(--color-surface, #fbfafc)', padding: '10px 20px 18px' }}>
          {items.map((it) => (
            <a key={it.k} onClick={() => { onNav(it.k); setMenuOpen(false); }} style={{ display: 'block', padding: '14px 6px', borderBottom: '1px solid var(--color-border)', cursor: 'pointer', fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: '14px', letterSpacing: '0.16em', textTransform: 'uppercase', color: page === it.k ? 'var(--color-accent)' : 'var(--color-ink-strong)', textDecoration: 'none' }}>{it.t}</a>
          ))}
        </div>
      )}
      <CartDrawer open={cartOpen} onClose={() => setCartOpen(false)} onNav={onNav} />
    </header>
  );
}

function Footer({ onNav }) {
  const cols = [
    { h: 'Compounds', k: 'compounds', items: ['Regeneration', 'Recovery', 'Metabolic', 'Longevity', 'Cognitive'] },
    { h: 'Learn', k: 'science',   items: ['Cellular basics', 'Research themes', 'Education', 'Quality standards'] },
    { h: 'Company',   k: 'about',     items: ['About', 'Insights journal', 'Press', 'Careers', 'Contact'] },
  ];
  const linkFor = (label) => {
    const l = label.toLowerCase();
    if (l.includes('insight')) return 'insights';
    if (l.includes('quality')) return 'quality';
    if (l.includes('about'))   return 'about';
    if (l.includes('contact')) return 'contact';
    if (l.includes('research')|| l.includes('science') || l.includes('education')) return 'science';
    return 'compounds';
  };
  return (
    <footer style={{ background: 'var(--color-surface-haze)', borderTop: '1px solid var(--color-border)' }}>
      {/* Animated orbiting-dots brand mark */}
      <div style={{ maxWidth: '1240px', 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(--color-accent)" strokeWidth="1.2" opacity="0.55" />
          <g stroke="var(--color-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(--color-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(--color-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-mono)', fontSize: '11px', letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--color-accent)', marginTop: 18 }}>The Cell</div>
        <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 500, fontSize: 'clamp(1.4rem,2.4vw,2rem)', color: 'var(--color-ink-strong)', marginTop: 6 }}>One cell. Everything downstream.</div>
      </div>
      <div style={{ maxWidth: '1240px', margin: '0 auto', padding: '48px clamp(20px,4vw,56px) 40px', display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: '40px' }}>
        <div>
          <VCLogo size={40} />
            <p style={{ fontSize: '13px', lineHeight: 1.7, color: 'var(--color-text-muted)', margin: '22px 0 0', maxWidth: '34ch' }}>Premium peptides and cellular wellness education, explained clearly.</p>
        </div>
        {cols.map((c) => (
          <div key={c.h}>
            <div style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: '10px', letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--color-ink-strong)', marginBottom: '18px' }}>{c.h}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
              {c.items.map((i) => <a key={i} onClick={() => onNav(linkFor(i))} style={{ cursor: 'pointer', fontSize: '13px', color: 'var(--color-text)', textDecoration: 'none' }}>{i}</a>)}
            </div>
          </div>
        ))}
      </div>
      <div style={{ maxWidth: '1240px', margin: '0 auto', padding: '22px clamp(20px,4vw,56px)', borderTop: '1px solid var(--color-border)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: '12px' }}>
        <span style={{ fontSize: '11px', color: 'var(--color-text-muted)' }}>© 2026 My Vital Cell. For research purposes only.</span>
        <span style={{ fontSize: '11px', color: 'var(--color-text-muted)' }}>Licenses · Privacy · Terms · Cookies</span>
      </div>
    </footer>
  );
}

Object.assign(window, { VCLogo, MoleculeField, VCImage, VCPhoto, Header, Footer });
