/* GoldenPharm site — shared components & data (exported to window). */

/* ---------- Brand data (real distributed brands) ---------- */
const GP_BRANDS = [
  {
    id: 'rejuvea',
    name: 'Rejuvea HA',
    mark: 'R',
    logo: 'assets/brand-rejuvea-ha.png',
    logoRatio: 1.5,
    origin: 'Europe',
    category: 'HA & PDRN skincare',
    tagline: 'Premium dermocosmetics',
    blurb: 'Multi-molecular hyaluronic acid paired with PDRN for clinically validated, visibly regenerated skin.',
    url: 'https://rejuveaha.com',
    icon: 'droplet',
    products: ['Multi-molecular HA serum', 'PDRN regenerating ampoules', 'Barrier-repair moisturiser'],
  },
  {
    id: 'dermasecret',
    name: 'Derma Secret',
    mark: 'D',
    logo: 'assets/brand-derma-secret.png',
    logoRatio: 1.75,
    origin: 'Italy',
    category: 'Dermal fillers & mesotherapy',
    tagline: 'Italian aesthetic solutions',
    blurb: 'Face, lip and body fillers, mesotherapy and peels — manufactured to ISO 13485 and ISO 22716 standards.',
    url: 'https://dermasecret.it',
    icon: 'syringe',
    products: ['Face filler', 'Lip filler', 'Body filler', 'Mesotherapy', 'Peeling'],
  },
  {
    id: 'luminad',
    name: 'LumiNAD',
    mark: 'L',
    logo: 'assets/brand-luminad.png',
    logoRatio: 3.73,
    origin: 'Europe',
    category: 'NAD+ skin booster',
    tagline: 'Cellular rejuvenation',
    blurb: 'A NAD+ enriched 3 ml prefilled syringe skin booster for cellular rejuvenation of face, neck and décolleté.',
    url: 'https://luminad.me',
    icon: 'sparkles',
    products: ['NAD+ skin booster (3 ml)'],
  },
];
window.GP_BRANDS = GP_BRANDS;

/* ---------- Per-brand detail content (Learn more pages) ---------- */
const GP_BRAND_DETAIL = {
  rejuvea: {
    intro: 'Rejuvea HA is a premium dermocosmetic range built on multi-molecular hyaluronic acid and PDRN. Each formulation is designed to work at several depths of the skin at once — hydrating the surface while supporting regeneration below it — for results that are visible and clinically backed.',
    highlights: [
      ['droplet', 'Multi-molecular HA', 'High, medium and low molecular-weight hyaluronic acid hydrate and plump across multiple skin depths.'],
      ['sparkles', 'PDRN regeneration', 'Polydeoxyribonucleotide supports the skin’s natural repair processes for renewed tone and texture.'],
      ['shield', 'Clinically validated', 'Formulations backed by clinical evaluation and manufactured to European quality standards.'],
    ],
    facts: [['Origin', 'Europe'], ['Category', 'HA & PDRN skincare'], ['Range', '3 core formulations'], ['Best for', 'Post-procedure & daily care']],
    products: [
      ['droplet', 'Multi-molecular HA serum', 'Layered hyaluronic-acid weights deliver multi-depth hydration and immediate plumping.'],
      ['sparkles', 'PDRN regenerating ampoules', 'Concentrated ampoules that support tissue repair and visible skin regeneration.'],
      ['heart', 'Barrier-repair moisturiser', 'Restores and reinforces the skin barrier, sealing in moisture after treatment.'],
    ],
    certs: ['ISO 22716', 'CE marked'],
  },
  dermasecret: {
    intro: 'Derma Secret is an Italian aesthetic house producing dermal fillers, mesotherapy and peels for face, lips and body. Every product is manufactured to ISO 13485 and ISO 22716 standards, giving practitioners a complete, compliant toolkit for corrective and enhancement work.',
    highlights: [
      ['syringe', 'Full filler system', 'Face, lip and body fillers formulated for natural volume, contour and definition.'],
      ['flask', 'Mesotherapy & peels', 'Targeted mesotherapy cocktails and professional peels for skin quality and revitalisation.'],
      ['award', 'ISO 13485 & 22716', 'Medical-device and cosmetic GMP certification across the entire range.'],
    ],
    facts: [['Origin', 'Italy'], ['Category', 'Fillers & mesotherapy'], ['Range', '5 product families'], ['Standards', 'ISO 13485 · 22716']],
    products: [
      ['syringe', 'Face filler', 'Cross-linked HA fillers for volume restoration and facial contouring.'],
      ['droplet', 'Lip filler', 'Formulated for smooth, natural lip definition and hydration.'],
      ['package', 'Body filler', 'Higher-volume fillers for body contouring and correction.'],
      ['flask', 'Mesotherapy', 'Micro-injectable cocktails that revitalise and improve skin quality.'],
      ['sparkles', 'Peeling', 'Professional chemical peels for renewal, tone and texture.'],
    ],
    certs: ['ISO 13485', 'ISO 22716', 'CE marked'],
  },
  luminad: {
    intro: 'LumiNAD is a NAD+ enriched skin booster supplied as a 3 ml prefilled syringe. It delivers cellular rejuvenation to the face, neck and décolleté — supporting energy metabolism in skin cells for a rested, revitalised appearance.',
    highlights: [
      ['sparkles', 'NAD+ enriched', 'Nicotinamide adenine dinucleotide supports cellular energy and repair within the skin.'],
      ['syringe', 'Prefilled 3 ml syringe', 'A ready-to-use sterile format for precise, convenient application.'],
      ['heart', 'Face, neck & décolleté', 'Formulated for the areas that show ageing first, for all-over rejuvenation.'],
    ],
    facts: [['Origin', 'Europe'], ['Category', 'NAD+ skin booster'], ['Format', '3 ml prefilled syringe'], ['Areas', 'Face · neck · décolleté']],
    products: [
      ['sparkles', 'NAD+ skin booster (3 ml)', 'A prefilled-syringe skin booster enriched with NAD+ for cellular rejuvenation of face, neck and décolleté.'],
    ],
    certs: ['CE marked'],
  },
};
window.GP_BRAND_DETAIL = GP_BRAND_DETAIL;
window.getBrandBySlug = function (slug) {
  const b = GP_BRANDS.find((x) => x.id === slug) || GP_BRANDS[0];
  return { brand: b, detail: GP_BRAND_DETAIL[b.id] };
};

/* ---------- Eyebrow ---------- */
function Eyebrow({ children, onDark, style }) {
  return (
    <span className="eyebrow" style={{ color: onDark ? 'var(--gp-blue-300)' : undefined, ...style }}>
      <span style={{ width: 16, height: 16, display: 'inline-flex', color: onDark ? 'var(--gp-blue-300)' : 'var(--accent-light)' }}>
        {window.GPIcons.sparkle()}
      </span>
      {children}
    </span>
  );
}

/* ---------- Pill button ---------- */
function PillButton({ children, variant = 'primary', size = 'md', iconLeft, iconRight, href, onClick, style = {} }) {
  const [hover, setHover] = React.useState(false);
  const sizes = {
    sm: { pad: '9px 16px', fs: 14, h: 38, gap: 8, ic: 26 },
    md: { pad: '12px 20px', fs: 15, h: 48, gap: 10, ic: 30 },
    lg: { pad: '15px 24px', fs: 16, h: 56, gap: 12, ic: 34 },
  };
  const s = sizes[size] || sizes.md;
  const palettes = {
    primary: { bg: 'var(--accent)', bgH: 'var(--gp-blue-700)', color: '#fff', border: 'transparent', chip: 'rgba(255,255,255,0.22)', chipColor: '#fff' },
    light:   { bg: '#fff', bgH: 'var(--accent-soft)', color: 'var(--gp-navy-800)', border: 'var(--border-default)', chip: 'var(--accent-soft)', chipColor: 'var(--accent)' },
    dark:    { bg: 'var(--gp-navy-900)', bgH: 'var(--gp-navy-800)', color: '#fff', border: 'transparent', chip: 'rgba(255,255,255,0.16)', chipColor: '#fff' },
    onDark:  { bg: '#fff', bgH: 'var(--gp-blue-50)', color: 'var(--gp-navy-900)', border: 'transparent', chip: 'var(--accent)', chipColor: '#fff' },
    ghostDark: { bg: 'transparent', bgH: 'rgba(255,255,255,0.08)', color: '#fff', border: 'rgba(255,255,255,0.32)', chip: 'rgba(255,255,255,0.16)', chipColor: '#fff' },
  };
  const p = palettes[variant] || palettes.primary;
  const Tag = href ? 'a' : 'button';
  return (
    <Tag
      href={href} onClick={onClick}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: s.gap,
        fontFamily: 'var(--gp-font-sans)', fontSize: s.fs, fontWeight: 600, lineHeight: 1,
        padding: iconLeft ? `${(s.h - s.ic) / 2}px 22px ${(s.h - s.ic) / 2}px ${(s.h - s.ic) / 2}px` : s.pad,
        minHeight: s.h, borderRadius: 'var(--btn-radius)',
        border: `1px solid ${hover && p.border !== 'transparent' ? 'var(--accent-light)' : p.border}`,
        background: hover ? p.bgH : p.bg, color: p.color,
        cursor: 'pointer', textDecoration: 'none', whiteSpace: 'nowrap',
        boxShadow: variant === 'primary' && hover ? 'var(--shadow-3)' : 'none',
        transition: 'background var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-fast)',
        ...style,
      }}>
      {iconLeft && (
        <span style={{ width: s.ic, height: s.ic, borderRadius: '50%', background: p.chip, color: p.chipColor, display: 'grid', placeItems: 'center', flex: '0 0 auto' }}>
          <span style={{ width: s.ic * 0.5, height: s.ic * 0.5, display: 'inline-flex' }}>{iconLeft}</span>
        </span>
      )}
      {children}
      {iconRight && <span style={{ width: 18, height: 18, display: 'inline-flex' }}>{iconRight}</span>}
    </Tag>
  );
}

/* ---------- Circle arrow button (card corner action) ---------- */
function CircleArrow({ tone = 'dark', size = 44, href, onClick, icon, style = {} }) {
  const [hover, setHover] = React.useState(false);
  const tones = {
    dark: { bg: 'var(--gp-navy-900)', bgH: 'var(--accent)', color: '#fff' },
    blue: { bg: 'var(--accent)', bgH: 'var(--gp-blue-700)', color: '#fff' },
    light: { bg: '#fff', bgH: 'var(--accent-soft)', color: 'var(--accent)' },
  };
  const t = tones[tone] || tones.dark;
  const Tag = href ? 'a' : 'button';
  return (
    <Tag href={href} onClick={onClick}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        width: size, height: size, borderRadius: '50%', flex: '0 0 auto',
        border: t.bg === '#fff' ? '1px solid var(--border-default)' : 'none',
        background: hover ? t.bgH : t.bg, color: t.color,
        display: 'grid', placeItems: 'center', cursor: 'pointer', textDecoration: 'none',
        transition: 'background var(--dur-base) var(--ease-standard), transform var(--dur-base)',
        transform: hover ? 'rotate(45deg)' : 'none', ...style,
      }}>
      <span style={{ width: size * 0.42, height: size * 0.42, display: 'inline-flex', transform: hover ? 'rotate(-45deg)' : 'none', transition: 'transform var(--dur-base)' }}>
        {icon || window.GPIcons.arrowUpRight()}
      </span>
    </Tag>
  );
}

/* ---------- Placeholder imagery ---------- */
function Placeholder({ label = 'Photography', icon = 'sparkle', dark, radius = 'var(--radius-2xl)', className = '', style = {} }) {
  return (
    <div className={`ph ${dark ? 'ph--dark' : ''} ${className}`} style={{ borderRadius: radius, ...style }}>
      <div className="ph__inner">
        <span className="ph__icon">{window.GPIcons[icon] ? window.GPIcons[icon]() : window.GPIcons.sparkle()}</span>
        <span className="ph__label">{label}</span>
      </div>
    </div>
  );
}

/* ---------- User-fillable image slot (drag a real photo in; it persists) ---------- */
function ImageSlot({ id, label = 'Drop an image', radius = 24, src, className = '', style = {} }) {
  const rect = Number(radius) === 0;
  return React.createElement('image-slot', {
    id,
    placeholder: label,
    shape: rect ? 'rect' : 'rounded',
    radius: String(rect ? 0 : radius),
    src: src || undefined,
    className: `gp-slot ${className}`.trim(),
    style: { display: 'block', width: '100%', height: '100%', ...style },
  });
}

/* ---------- Floating chip ---------- */
function FloatingChip({ icon, children, style = {} }) {
  return (
    <span className="float-chip" style={style}>
      {icon && <span style={{ width: 22, height: 22, borderRadius: '50%', background: 'var(--accent-soft)', color: 'var(--accent)', display: 'grid', placeItems: 'center' }}>
        <span style={{ width: 13, height: 13, display: 'inline-flex' }}>{icon}</span>
      </span>}
      {children}
    </span>
  );
}

/* ---------- Brand wordmark ---------- */
function BrandMark({ brand, size = 'md' }) {
  const s = size === 'lg' ? { box: 48, fs: 22, name: 22, logoH: 58 } : size === 'sm' ? { box: 32, fs: 15, name: 15, logoH: 34 } : { box: 40, fs: 19, name: 18, logoH: 44 };
  // Real brand logo lockup (wordmark already contains the name)
  if (brand.logo) {
    return (
      <img
        src={brand.logo}
        alt={brand.name}
        style={{ height: s.logoH, width: 'auto', display: 'block', objectFit: 'contain' }}
      />
    );
  }
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 12 }}>
      <span style={{
        width: s.box, height: s.box, borderRadius: 12,
        background: 'linear-gradient(135deg, var(--gp-blue-500), var(--gp-navy-800))',
        color: '#fff', display: 'grid', placeItems: 'center', fontWeight: 800, fontSize: s.fs,
        letterSpacing: '-0.02em', flex: '0 0 auto',
      }}>{brand.mark}</span>
      <span style={{ fontWeight: 800, fontSize: s.name, letterSpacing: '-0.02em', color: 'var(--text-strong)' }}>{brand.name}</span>
    </span>
  );
}

/* ---------- Reveal on scroll (position-based + self-clearing poll — robust everywhere) ---------- */
function useReveal() {
  React.useEffect(() => {
    let poll = 0;
    const check = () => {
      const vh = window.innerHeight || document.documentElement.clientHeight;
      const pending = document.querySelectorAll('.reveal:not(.in)');
      pending.forEach((el) => {
        if (el.getBoundingClientRect().top < vh * 0.9) el.classList.add('in');
      });
      // once everything has revealed, stop polling
      if (poll && document.querySelectorAll('.reveal:not(.in)').length === 0) {
        clearInterval(poll); poll = 0;
      }
    };
    check();
    // poll catches programmatic scrolls (which don't always emit scroll events in embedded iframes)
    poll = setInterval(check, 220);
    window.addEventListener('scroll', check, { passive: true });
    window.addEventListener('resize', check);
    return () => {
      window.removeEventListener('scroll', check);
      window.removeEventListener('resize', check);
      if (poll) clearInterval(poll);
    };
  }, []);
}

/* ---------- Scroll progress bar ---------- */
function ScrollProgress() {
  const [p, setP] = React.useState(0);
  React.useEffect(() => {
    const on = () => {
      const h = document.documentElement;
      const max = h.scrollHeight - h.clientHeight;
      setP(max > 0 ? Math.min(1, h.scrollTop / max) : 0);
    };
    on();
    window.addEventListener('scroll', on, { passive: true });
    window.addEventListener('resize', on);
    return () => { window.removeEventListener('scroll', on); window.removeEventListener('resize', on); };
  }, []);
  return <div className="gp-progress" style={{ transform: `scaleX(${p})` }} aria-hidden="true" />;
}

/* ---------- Count-up number (animates once on scroll into view) ---------- */
function CountUp({ value, duration = 1500 }) {
  const ref = React.useRef(null);
  const [disp, setDisp] = React.useState(String(value));
  React.useEffect(() => {
    const m = String(value).match(/^([^\d-]*)(-?[\d.,]+)(.*)$/);
    if (!m) { setDisp(String(value)); return; }
    const prefix = m[1], numStr = m[2], suffix = m[3];
    const decimals = numStr.includes('.') ? (numStr.split('.')[1] || '').length : 0;
    const target = parseFloat(numStr.replace(/,/g, ''));
    const fmt = (n) => prefix + (decimals ? n.toFixed(decimals) : Math.round(n).toLocaleString()) + suffix;
    const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce) { setDisp(fmt(target)); return; }
    setDisp(fmt(0));
    let raf = 0, done = false;
    const run = () => {
      const t0 = performance.now();
      const tick = (now) => {
        const k = Math.min(1, (now - t0) / duration);
        setDisp(fmt(target * (1 - Math.pow(1 - k, 3))));
        if (k < 1) raf = requestAnimationFrame(tick);
      };
      raf = requestAnimationFrame(tick);
    };
    const io = new IntersectionObserver((es) => {
      es.forEach((e) => { if (e.isIntersecting && !done) { done = true; run(); io.disconnect(); } });
    }, { threshold: 0.4 });
    if (ref.current) io.observe(ref.current);
    return () => { cancelAnimationFrame(raf); io.disconnect(); };
  }, [value, duration]);
  return <span ref={ref}>{disp}</span>;
}

/* ---------- Animated stat block (on dark bands) ---------- */
function AnimatedStat({ value, label }) {
  return (
    <div>
      <div className="gp-stat-num"><CountUp value={value} /></div>
      <div className="gp-stat-label">{label}</div>
    </div>
  );
}

/* ---------- Back-to-top button ---------- */
function BackToTop() {
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const on = () => setShow(window.scrollY > 620);
    on();
    window.addEventListener('scroll', on, { passive: true });
    return () => window.removeEventListener('scroll', on);
  }, []);
  return ReactDOM.createPortal(
    <button className={`gp-top ${show ? 'show' : ''}`} aria-label="Back to top"
      onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
      <span style={{ width: 20, height: 20, display: 'inline-flex' }}>{window.GPIcons.arrowUp()}</span>
    </button>, document.body);
}

/* ---------- Mobile menu (full-screen, animated, premium) ---------- */
function MobileMenu({ open, onClose, links, current }) {
  const [render, setRender] = React.useState(false);
  const [closing, setClosing] = React.useState(false);

  React.useEffect(() => {
    if (open) {
      setRender(true);
      setClosing(false);
    } else if (render) {
      setClosing(true);
      const t = setTimeout(() => { setRender(false); setClosing(false); }, 320);
      return () => clearTimeout(t);
    }
  }, [open]); // eslint-disable-line

  // lock body scroll + close on Escape while open
  React.useEffect(() => {
    if (!render) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => { document.body.style.overflow = prev; window.removeEventListener('keydown', onKey); };
  }, [render, onClose]);

  if (!render) return null;
  const shown = !closing;

  return ReactDOM.createPortal((
    <div className={`gp-mmenu ${shown ? 'in' : ''}`} role="dialog" aria-modal="true">
      <div className="gp-mmenu__top">
        <a href="index.html" onClick={onClose} style={{ display: 'flex', alignItems: 'center' }}>
          <img src="assets/goldenpharm-logo-white-knockout.png" alt="GoldenPharm" style={{ height: 34 }} />
        </a>
        <button className="gp-mmenu__close" onClick={onClose} aria-label="Close menu">
          <span style={{ width: 22, height: 22, display: 'inline-flex' }}>{window.GPIcons.close()}</span>
        </button>
      </div>

      <nav className="gp-mmenu__links">
        {links.map((l, i) => (
          <a key={l.id} href={l.href} onClick={onClose}
            className={`gp-mmenu__link ${l.id === current ? 'active' : ''}`}
            style={{ animationDelay: `${90 + i * 64}ms` }}>
            <span className="gp-mmenu__num">{String(i + 1).padStart(2, '0')}</span>
            <span className="gp-mmenu__label">{l.label}</span>
            <span className="gp-mmenu__arrow">{window.GPIcons.arrowUpRight()}</span>
          </a>
        ))}
      </nav>

      <div className="gp-mmenu__foot" style={{ animationDelay: `${90 + links.length * 64 + 40}ms` }}>
        <a href="https://portal.gdnpharm.com/" onClick={onClose} className="gp-mmenu__cta">
          Client Login
          <span style={{ width: 18, height: 18, display: 'inline-flex' }}>{window.GPIcons.arrowRight()}</span>
        </a>
        <div className="gp-mmenu__meta">
          <span>Delivering quality service</span>
          <span style={{ display: 'inline-flex', gap: 10 }}>
            {['linkedin'].map((s) => (
              <a key={s} href="https://www.linkedin.com/company/gdnpharm" target="_blank" rel="noopener noreferrer" style={{ width: 18, height: 18, display: 'inline-flex', color: 'var(--gp-blue-300)' }}>{window.GPIcons[s]()}</a>
            ))}
          </span>
        </div>
      </div>
    </div>
  ), document.body);
}

/* ---------- Brands dropdown (desktop nav) ---------- */
function NavBrandsDropdown({ link, current }) {
  const [open, setOpen] = React.useState(false);
  const closeT = React.useRef(null);
  const brands = window.GP_BRANDS || [];
  const openNow = () => { clearTimeout(closeT.current); setOpen(true); };
  const closeSoon = () => { closeT.current = setTimeout(() => setOpen(false), 130); };
  return (
    <div className="nav-dd" onMouseEnter={openNow} onMouseLeave={closeSoon}>
      <a href={link.href} className={`nav-link nav-dd__trigger ${link.id === current ? 'active' : ''}`} aria-haspopup="true" aria-expanded={open}>
        {link.label}
        <span className="nav-dd__chev" style={{ width: 13, height: 13, display: 'inline-flex' }}>{window.GPIcons.chevronRight()}</span>
      </a>
      <div className={`nav-dd__panel ${open ? 'in' : ''}`} role="menu">
        {brands.map((b) => (
          <a key={b.id} href={`brand.html?b=${b.id}`} className="nav-dd__item" role="menuitem">
            <span className="nav-dd__mark">
              <span style={{ width: 18, height: 18, display: 'inline-flex' }}>{window.GPIcons[b.icon] ? window.GPIcons[b.icon]() : window.GPIcons.sparkles()}</span>
            </span>
            <span className="nav-dd__text">
              <span className="nav-dd__name">{b.name}</span>
              <span className="nav-dd__cat">{b.category}</span>
            </span>
          </a>
        ))}
        <a href="brands.html" className="nav-dd__all" role="menuitem">
          All brands
          <span style={{ width: 15, height: 15, display: 'inline-flex' }}>{window.GPIcons.arrowRight()}</span>
        </a>
      </div>
    </div>
  );
}

/* ---------- Navigation ---------- */
function Nav({ current = 'home' }) {
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const links = [
    { id: 'home', label: 'Home', href: 'index.html' },
    { id: 'brands', label: 'Brands', href: 'brands.html' },
    { id: 'about', label: 'About us', href: 'about.html' },
    { id: 'contact', label: 'Contact us', href: 'contact.html' },
  ];
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 100,
      background: scrolled ? 'rgba(255,255,255,0.82)' : 'rgba(255,255,255,0.6)',
      backdropFilter: 'blur(12px)',
      borderBottom: `1px solid ${scrolled ? 'var(--border-hairline)' : 'transparent'}`,
      transition: 'background var(--dur-base), border-color var(--dur-base)',
    }}>
      <ScrollProgress />
      <BackToTop />
      <div className="gp-wrap nav-bar" style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
        <a href="index.html" style={{ display: 'flex', alignItems: 'center', flex: '0 0 auto' }}>
          <img src="assets/goldenpharm-logo.png" alt="GoldenPharm" className="nav-logo" style={{ height: 38 }} />
        </a>
        <nav className="nav-desktop" style={{ display: 'flex', gap: 2, flex: 1, justifyContent: 'center' }}>
          {links.map((l) => (
            l.id === 'brands'
              ? <NavBrandsDropdown key={l.id} link={l} current={current} />
              : <a key={l.id} href={l.href} className={`nav-link ${l.id === current ? 'active' : ''}`}>{l.label}</a>
          ))}
        </nav>
        <div className="nav-actions" style={{ display: 'flex', alignItems: 'center', gap: 12, flex: '0 0 auto' }}>
          <PillButton size="sm" variant="primary" href="https://portal.gdnpharm.com/" iconRight={window.GPIcons.arrowRight()}>Client Login</PillButton>
        </div>
        <button className={`nav-burger ${open ? 'is-open' : ''}`} onClick={() => setOpen(!open)} aria-label="Menu" aria-expanded={open}>
          <span className="nav-burger__lines"><i></i><i></i><i></i></span>
        </button>
      </div>
      <MobileMenu open={open} onClose={() => setOpen(false)} links={links} current={current} />
    </header>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  const cols = [
    { title: 'Company', links: [['About us', 'about.html'], ['Brands', 'brands.html'], ['Quality & compliance', 'about.html'], ['Careers', 'contact.html']] },
    { title: 'Brands', links: [['All brands', 'brands.html'], ['Rejuvea HA', 'brands.html'], ['Derma Secret', 'brands.html'], ['LumiNAD', 'brands.html']] },
  ];
  return (
    <footer style={{ background: 'var(--gp-navy-900)', color: 'var(--text-on-dark)', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(700px 420px at 88% -10%, rgba(65,138,193,0.22), transparent 60%)' }} />
      {/* newsletter */}
      <div className="gp-wrap" style={{ position: 'relative', paddingTop: 64 }}>
        <div className="stack-sm gp-band" style={{
          display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 32, alignItems: 'center',
          background: 'rgba(255,255,255,0.04)', border: '1px solid var(--border-dark)',
          borderRadius: 'var(--radius-2xl)', padding: '36px 40px', marginBottom: 56,
        }}>
          <div>
            <h3 style={{ fontSize: 26, fontWeight: 800, letterSpacing: '-0.02em', color: '#fff', margin: '0 0 8px' }}>Stay current on new launches</h3>
            <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--text-on-dark-muted)', margin: 0, maxWidth: 420 }}>
              Product updates, regulatory notices and partner news — for licensed pharmacies and clinics.
            </p>
          </div>
          <form onSubmit={(e) => e.preventDefault()} style={{ display: 'flex', gap: 10, background: '#fff', borderRadius: 'var(--radius-pill)', padding: 6 }}>
            <input type="email" placeholder="Work email" required style={{
              flex: 1, border: 'none', outline: 'none', background: 'transparent', padding: '0 16px',
              fontFamily: 'var(--gp-font-sans)', fontSize: 15, color: 'var(--text-strong)', minWidth: 0,
            }} />
            <PillButton size="sm" variant="primary" iconRight={window.GPIcons.send()}>Subscribe</PillButton>
          </form>
        </div>
      </div>
      <div className="gp-wrap" style={{ position: 'relative', paddingBottom: 40 }}>
        <div className="stack-sm" style={{ display: 'grid', gridTemplateColumns: '1.5fr repeat(2, 1fr)', gap: 40 }}>
          <div>
            <img src="assets/goldenpharm-logo-white-knockout.png" alt="GoldenPharm" style={{ height: 38, marginBottom: 16 }} />
            <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--text-on-dark-muted)', maxWidth: 250, margin: '0 0 18px' }}>
              Delivering quality service — the trusted distributor of premium dermocosmetic and aesthetic brands to licensed healthcare providers.
            </p>
            <div style={{ display: 'flex', gap: 10 }}>
              {['linkedin'].map((s) => (
                <a key={s} href="https://www.linkedin.com/company/gdnpharm" target="_blank" rel="noopener noreferrer" style={{
                  width: 38, height: 38, borderRadius: '50%', border: '1px solid var(--border-dark)',
                  display: 'grid', placeItems: 'center', color: 'var(--gp-blue-300)',
                }}><span style={{ width: 18, height: 18, display: 'inline-flex' }}>{window.GPIcons[s]()}</span></a>
              ))}
            </div>
          </div>
          {cols.map((c) => (
            <div key={c.title}>
              <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 16, color: '#fff' }}>{c.title}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
                {c.links.map(([l, href]) => (
                  <a key={l} href={href} style={{ fontSize: 14, color: 'var(--text-on-dark-muted)' }}>{l}</a>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 48, paddingTop: 24, borderTop: '1px solid var(--border-dark)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12 }}>
          <span style={{ fontSize: 13, color: 'var(--text-on-dark-muted)' }}>© 2026 GoldenPharm. Crafted By <a href="https://webvue.com.lb" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--text-on-dark-muted)', textDecoration: 'underline' }}>WebVue</a></span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Eyebrow, PillButton, CircleArrow, Placeholder, ImageSlot, FloatingChip, BrandMark, useReveal, Nav, Footer, ScrollProgress, CountUp, AnimatedStat, BackToTop });
