// ============================================================
// Enfield Royal Clinic — shared components (atoms + chrome)
// ============================================================

const { useState, useEffect, useRef, useMemo, useCallback } = React;

// -------------- Icons (inline, tiny, no heavy lib) ---------------
const Icon = ({ name, size = 18, stroke = 1.5, ...rest }) => {
  const s = { width: size, height: size, fill: 'none', stroke: 'currentColor', strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round', ...rest.style };
  const props = { viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg', style: s, ...rest };
  switch (name) {
    case 'arrow-right': return (<svg {...props}><path d="M5 12h14M13 5l7 7-7 7"/></svg>);
    case 'arrow-up-right': return (<svg {...props}><path d="M7 17 17 7M9 7h8v8"/></svg>);
    case 'chevron-down': return (<svg {...props}><path d="m6 9 6 6 6-6"/></svg>);
    case 'phone': return (<svg {...props}><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92Z"/></svg>);
    case 'whatsapp': return (<svg {...props}><path d="M3 21l1.65-3.8a9 9 0 1 1 3.4 3.34L3 21"/><path d="M9 10c.5 2 2 3.5 4 4l1.4-1a1 1 0 0 1 1.2-.2l2 1a1 1 0 0 1 .4 1.4 4 4 0 0 1-3.4 1.8c-3.3 0-6-2.7-6-6a4 4 0 0 1 1.8-3.4 1 1 0 0 1 1.4.4l1 2a1 1 0 0 1-.2 1.2L9 10z"/></svg>);
    case 'mail': return (<svg {...props}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>);
    case 'pin': return (<svg {...props}><path d="M12 22s7-7.58 7-13a7 7 0 0 0-14 0c0 5.42 7 13 7 13Z"/><circle cx="12" cy="9" r="2.5"/></svg>);
    case 'menu': return (<svg {...props}><path d="M4 7h16M4 12h16M4 17h16"/></svg>);
    case 'close': return (<svg {...props}><path d="m6 6 12 12M6 18 18 6"/></svg>);
    case 'check': return (<svg {...props}><path d="m5 12 5 5 9-11"/></svg>);
    case 'shield': return (<svg {...props}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/><path d="m9 12 2 2 4-4"/></svg>);
    case 'lock': return (<svg {...props}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>);
    case 'eye-off': return (<svg {...props}><path d="M9.88 5.08A10 10 0 0 1 12 5c5 0 9 4.5 10 7-1 2.5-5 7-10 7a10 10 0 0 1-3-.46M3 3l18 18"/><path d="M6 6c-1.5 1-2.7 2.3-3 4 .5 1.3 1.6 2.7 3 3.7"/></svg>);
    case 'sparkle': return (<svg {...props}><path d="M12 3v6M12 15v6M3 12h6M15 12h6M5 5l4 4M15 15l4 4M19 5l-4 4M9 15l-4 4"/></svg>);
    case 'search': return (<svg {...props}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>);
    case 'instagram': return (<svg {...props}><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r=".75" fill="currentColor"/></svg>);
    case 'facebook': return (<svg {...props}><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3V2Z"/></svg>);
    case 'youtube': return (<svg {...props}><rect x="2.5" y="6" width="19" height="12" rx="3"/><path d="m10 9 5 3-5 3V9Z" fill="currentColor"/></svg>);
    case 'x': return (<svg {...props}><path d="m4 4 16 16M20 4 4 20"/></svg>);
    default: return null;
  }
};

// ---------- Brand rosette (decorative — official master SVG flagged in media-manifest) ----------
const Rosette = ({ size = 28, color = 'currentColor' }) => (
  <svg width={size} height={size} viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <g fill="none" stroke={color} strokeWidth="1.4">
      <circle cx="32" cy="32" r="29"/>
      <circle cx="32" cy="32" r="22"/>
      {Array.from({ length: 16 }).map((_, i) => {
        const a = (i * Math.PI * 2) / 16;
        const x1 = 32 + Math.cos(a) * 22;
        const y1 = 32 + Math.sin(a) * 22;
        const x2 = 32 + Math.cos(a) * 29;
        const y2 = 32 + Math.sin(a) * 29;
        return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} />;
      })}
    </g>
    <g fill={color}>
      <circle cx="32" cy="32" r="3.4"/>
    </g>
    <text x="32" y="36" textAnchor="middle" fontFamily="serif" fontSize="9" fill={color} style={{ letterSpacing: '0.05em' }}>
      {''}
    </text>
  </svg>
);

// ---------- Lockup ----------
const BrandLockup = ({ inverse = false, compact = false }) => {
  const color = inverse ? '#FFFFFF' : 'var(--primary)';
  const gold = inverse ? 'var(--accent)' : 'var(--accent)';
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, color }}>
      <Rosette size={compact ? 28 : 36} color={gold} />
      <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
        <span style={{ fontFamily: 'var(--serif)', fontSize: compact ? 20 : 24, letterSpacing: '0.01em' }}>Enfield Royal</span>
        <span style={{ fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: '0.32em', textTransform: 'uppercase', color: inverse ? 'rgba(255,255,255,.7)' : 'var(--muted)', marginTop: 4 }}>
          Clinic · Dubai · Since 2011
        </span>
      </div>
    </div>
  );
};

// ---------- Compliance chip ----------
const ComplianceTag = ({ kind = 'verified', children, style }) => {
  const klass = 'chip ' + (kind === 'verified' ? 'chip-verified' : kind === 'warn' ? 'chip-warn' : '');
  return (
    <span className={klass} style={style}>
      <span className="dot" />
      {children}
    </span>
  );
};

// ---------- Image with placeholder fallback ----------
const Img = ({ src, alt, label, ...rest }) => {
  const [err, setErr] = useState(false);
  if (err || !src) {
    return <div className="img-placeholder" {...rest}>{label || alt || 'IMAGE'}</div>;
  }
  return <img src={src} alt={alt || ''} onError={() => setErr(true)} loading="lazy" {...rest} />;
};

// ---------- Router (hash) ----------
const RouterCtx = React.createContext({ path: '/', go: () => {} });
const useRouter = () => React.useContext(RouterCtx);

const RouterProvider = ({ children }) => {
  const [path, setPath] = useState(() => {
    const h = window.location.hash.replace(/^#/, '');
    return h && h.startsWith('/') ? h : '/';
  });
  useEffect(() => {
    const onHash = () => {
      const h = window.location.hash.replace(/^#/, '');
      setPath(h && h.startsWith('/') ? h : '/');
      window.scrollTo({ top: 0, behavior: 'instant' });
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  const go = useCallback((p) => {
    window.location.hash = p;
  }, []);
  return <RouterCtx.Provider value={{ path, go }}>{children}</RouterCtx.Provider>;
};

const Link = ({ to, children, className, style, onClick }) => {
  const { go } = useRouter();
  return (
    <a
      href={'#' + to}
      className={className}
      style={style}
      onClick={(e) => {
        e.preventDefault();
        if (onClick) onClick(e);
        go(to);
      }}
    >
      {children}
    </a>
  );
};

// ---------- Top promotional / compliance bar ----------
const TopBar = () => (
  <div style={{ background: 'var(--primary-deep)', color: '#FFFFFF', fontSize: 12, padding: '8px 0', borderBottom: '1px solid rgba(255,255,255,.08)' }}>
    <div className="container" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24, flexWrap: 'wrap', fontFamily: 'var(--mono)', letterSpacing: '0.04em', fontSize: 11 }}>
      <span style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <span className="dot" style={{ background: 'var(--accent)' }} />
        DHA-REGULATED · DUBAI &amp; ABU DHABI · MULTI-SPECIALTY MEDICAL GROUP
      </span>
      <span style={{ display: 'flex', alignItems: 'center', gap: 18, opacity: 0.85 }}>
        <a href={'tel:' + window.ERC_DATA.brand.phoneDubai.replace(/\s/g, '')} style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <Icon name="phone" size={12} stroke={1.8}/>{window.ERC_DATA.brand.phoneDubai}
        </a>
        <a href={'mailto:' + window.ERC_DATA.brand.email} style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <Icon name="mail" size={12} stroke={1.8}/>{window.ERC_DATA.brand.email}
        </a>
      </span>
    </div>
  </div>
);

// ---------- Mega-menu (Treatments dropdown) ----------
const MegaMenu = ({ open, onClose }) => {
  const areas = window.ERC_DATA.areas;
  return (
    <div
      style={{
        position: 'absolute',
        left: 0,
        right: 0,
        top: '100%',
        background: 'var(--surface)',
        borderTop: '1px solid var(--border)',
        borderBottom: '1px solid var(--border)',
        boxShadow: '0 24px 48px -28px rgba(20, 40, 63, 0.18)',
        opacity: open ? 1 : 0,
        pointerEvents: open ? 'auto' : 'none',
        transform: open ? 'translateY(0)' : 'translateY(-6px)',
        transition: 'opacity 200ms ease, transform 220ms cubic-bezier(.2,.7,.2,1)',
        zIndex: 50,
      }}
      onMouseLeave={onClose}
    >
      <div className="container" style={{ padding: '32px var(--pad-x) 40px', display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 48 }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 14 }}>Treatments by area</div>
          <h3 style={{ fontFamily: 'var(--serif)', fontSize: 32, color: 'var(--primary)', margin: '0 0 12px', lineHeight: 1.05 }}>
            Care planned around <em style={{ color: 'var(--accent)' }}>your candidacy</em>, not a price list.
          </h3>
          <p className="body-sm" style={{ maxWidth: '32ch', marginBottom: 24 }}>
            Every treatment begins with a doctor-led consultation. We don't publish prices — every plan is individual and quoted after review.
          </p>
          <Link to="/treatments" className="btn-link" onClick={onClose}>
            View all treatment areas <Icon name="arrow-right" size={14}/>
          </Link>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '4px 32px' }}>
          {areas.map((a) => (
            <Link key={a.slug} to={'/treatments/' + a.slug} onClick={onClose}
              style={{ display: 'flex', flexDirection: 'column', padding: '12px 0', borderBottom: '1px solid var(--border)', gap: 4 }}>
              <span className="eyebrow" style={{ fontSize: 10 }}>{a.eyebrow}</span>
              <span style={{ fontFamily: 'var(--serif)', fontSize: 19, color: 'var(--primary)' }}>{a.name}</span>
            </Link>
          ))}
        </div>
      </div>
    </div>
  );
};

// ---------- Navbar ----------
const Navbar = () => {
  const [menuOpen, setMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const { path } = useRouter();
  const isActive = (p) => (p === '/' ? path === '/' : path.startsWith(p));

  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 40 }}>
      <TopBar />
      <div style={{
        background: 'var(--surface)',
        borderBottom: '1px solid var(--border)',
        position: 'relative',
        boxShadow: scrolled ? '0 12px 36px -32px rgba(20,40,63,0.4)' : 'none',
        transition: 'box-shadow 200ms ease',
      }}>
        <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 84 }}>
          <Link to="/"><BrandLockup /></Link>
          <nav className="erc-nav-desktop" style={{ display: 'flex', alignItems: 'center', gap: 36 }}
               onMouseLeave={() => setMenuOpen(false)}>
            <button
              style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 14, color: isActive('/treatments') ? 'var(--accent)' : 'var(--primary)', fontWeight: 500 }}
              onMouseEnter={() => setMenuOpen(true)}
              onClick={() => { setMenuOpen(false); window.location.hash = '/treatments'; }}
            >
              Treatments <Icon name="chevron-down" size={14}/>
            </button>
            {[
              { to: '/doctors', label: 'Doctors' },
              { to: '/before-after', label: 'Before & After' },
              { to: '/about', label: 'About' },
              { to: '/locations', label: 'Locations' },
              { to: '/contact', label: 'Contact' },
            ].map((it) => (
              <Link key={it.to} to={it.to} style={{ fontSize: 14, fontWeight: 500, color: isActive(it.to) ? 'var(--accent)' : 'var(--primary)' }}>
                {it.label}
              </Link>
            ))}
            <span style={{ display: 'inline-flex', gap: 8, alignItems: 'center', fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--muted)', letterSpacing: '0.18em', textTransform: 'uppercase', borderInline: '1px solid var(--border)', padding: '0 12px' }}>
              EN · AR · RU · ZH
            </span>
            <Link to="/book" className="btn btn-primary btn-sm">
              Book a Consultation <Icon name="arrow-right" size={14}/>
            </Link>
          </nav>
          <button className="erc-nav-mobile-btn" aria-label="Open menu" onClick={() => setMobileOpen(true)} style={{ display: 'none', padding: 8 }}>
            <Icon name="menu" size={22}/>
          </button>
        </div>
        <MegaMenu open={menuOpen} onClose={() => setMenuOpen(false)} />
      </div>
      {mobileOpen && <MobileMenu onClose={() => setMobileOpen(false)} />}
      <style>{`
        @media (max-width: 960px) {
          .erc-nav-desktop { display: none !important; }
          .erc-nav-mobile-btn { display: inline-flex !important; }
        }
      `}</style>
    </header>
  );
};

const MobileMenu = ({ onClose }) => (
  <div style={{ position: 'fixed', inset: 0, zIndex: 100, background: 'var(--surface)' }}>
    <div className="container" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', height: 84 }}>
      <BrandLockup />
      <button onClick={onClose} aria-label="Close" style={{ padding: 8 }}><Icon name="close" size={24}/></button>
    </div>
    <div className="container" style={{ padding: '24px var(--pad-x) 56px', display: 'flex', flexDirection: 'column', gap: 4 }}>
      {[
        { to: '/treatments', label: 'Treatments' },
        { to: '/doctors', label: 'Doctors' },
        { to: '/before-after', label: 'Before & After' },
        { to: '/about', label: 'About' },
        { to: '/locations', label: 'Locations' },
        { to: '/contact', label: 'Contact' },
      ].map((i) => (
        <Link key={i.to} to={i.to} onClick={onClose} style={{ borderBottom: '1px solid var(--border)', padding: '20px 0', fontFamily: 'var(--serif)', fontSize: 28, color: 'var(--primary)' }}>
          {i.label}
        </Link>
      ))}
      <Link to="/book" onClick={onClose} className="btn btn-primary" style={{ marginTop: 32, justifyContent: 'center' }}>
        Book a Consultation <Icon name="arrow-right" size={16}/>
      </Link>
    </div>
  </div>
);

// ---------- Footer ----------
const Footer = () => {
  const D = window.ERC_DATA;
  return (
    <footer style={{ background: 'var(--primary-deep)', color: '#FFFFFF', paddingTop: 96 }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 32, alignItems: 'start' }}>
          <div style={{ gridColumn: 'span 5' }}>
            <BrandLockup inverse />
            <p style={{ fontFamily: 'var(--serif)', fontSize: 28, marginTop: 36, lineHeight: 1.15, maxWidth: '20ch' }}>
              Doctor-led care, <em style={{ color: 'var(--accent)' }}>since 2011</em>.
            </p>
            <p style={{ color: 'rgba(255,255,255,.7)', maxWidth: '36ch', marginTop: 12, fontSize: 14, lineHeight: 1.55 }}>
              All services regulated by the Dubai Health Authority (DHA). Brand stats and per-doctor licences are confirmed before publishing.
            </p>
            <div style={{ display: 'flex', gap: 14, marginTop: 28 }}>
              {['instagram','facebook','youtube','x'].map(s => (
                <a key={s} href="#" aria-label={s} style={{ width: 38, height: 38, border: '1px solid rgba(255,255,255,.18)', borderRadius: 100, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#fff' }}>
                  <Icon name={s} size={15}/>
                </a>
              ))}
            </div>
          </div>
          <FooterCol title="Treatments" links={D.areas.slice(0,8).map(a => ({ to: '/treatments/'+a.slug, label: a.name }))} />
          <FooterCol title="Clinic" links={[
            { to: '/doctors', label: 'Doctors' },
            { to: '/before-after', label: 'Before & After' },
            { to: '/about', label: 'About' },
            { to: '/locations', label: 'Locations' },
            { to: '/contact', label: 'Contact' },
            { to: '/book', label: 'Book a Consultation' },
          ]} />
          <div style={{ gridColumn: 'span 3' }}>
            <div className="eyebrow" style={{ color: 'rgba(255,255,255,.55)', marginBottom: 18 }}>Contact</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, fontSize: 14 }}>
              <a href={'tel:' + D.brand.phoneDubai.replace(/\s/g,'')} style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
                <Icon name="phone" size={14}/>{D.brand.phoneDubai} <span style={{ color: 'rgba(255,255,255,.5)', fontSize: 11 }}>(Dubai)</span>
              </a>
              <a href={'tel:' + D.brand.phoneAUH.replace(/\s/g,'')} style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
                <Icon name="phone" size={14}/>{D.brand.phoneAUH} <span style={{ color: 'rgba(255,255,255,.5)', fontSize: 11 }}>(Abu Dhabi)</span>
              </a>
              <a href={'https://wa.me/' + D.brand.whatsappRaw} target="_blank" rel="noreferrer" style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
                <Icon name="whatsapp" size={14}/>WhatsApp
              </a>
              <a href={'mailto:' + D.brand.email} style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
                <Icon name="mail" size={14}/>{D.brand.email}
              </a>
              <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start', color: 'rgba(255,255,255,.7)' }}>
                <Icon name="pin" size={14}/>
                <span style={{ fontSize: 13, lineHeight: 1.5 }}>{D.brand.addressDubai}</span>
              </div>
            </div>
          </div>
        </div>

        <div style={{ marginTop: 88, paddingTop: 28, borderTop: '1px solid rgba(255,255,255,.1)', display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'center', gap: 16, paddingBottom: 36 }}>
          <p style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.08em', color: 'rgba(255,255,255,.55)' }}>
            © {new Date().getFullYear()} ENFIELD ROYAL CLINIC · DHA-REGULATED · DUBAI &amp; ABU DHABI
          </p>
          <p style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.08em', color: 'rgba(255,255,255,.55)' }}>
            PRIVACY · TERMS · MEDICAL ADVERTISING NOTICE · DHA LICENCE — TO CONFIRM
          </p>
        </div>
      </div>
    </footer>
  );
};

const FooterCol = ({ title, links }) => (
  <div style={{ gridColumn: 'span 2' }}>
    <div className="eyebrow" style={{ color: 'rgba(255,255,255,.55)', marginBottom: 18 }}>{title}</div>
    <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
      {links.map(l => (
        <li key={l.to}>
          <Link to={l.to} style={{ fontSize: 13.5, color: 'rgba(255,255,255,.85)' }}>{l.label}</Link>
        </li>
      ))}
    </ul>
  </div>
);

// ---------- Mobile bottom action bar ----------
const MobileBottomBar = () => {
  const D = window.ERC_DATA;
  return (
    <div className="erc-mobile-bottom" style={{
      position: 'fixed', bottom: 0, left: 0, right: 0,
      background: 'var(--primary-deep)', color: '#fff',
      display: 'none', justifyContent: 'space-between',
      borderTop: '1px solid rgba(255,255,255,.12)',
      zIndex: 30,
    }}>
      <a href={'tel:' + D.brand.phoneDubai.replace(/\s/g,'')} style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, padding: '14px 0', fontSize: 13, borderRight: '1px solid rgba(255,255,255,.12)' }}>
        <Icon name="phone" size={14}/> Call
      </a>
      <a href={'https://wa.me/' + D.brand.whatsappRaw} style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, padding: '14px 0', fontSize: 13, borderRight: '1px solid rgba(255,255,255,.12)' }}>
        <Icon name="whatsapp" size={14}/> WhatsApp
      </a>
      <Link to="/book" style={{ flex: 1.4, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, padding: '14px 0', fontSize: 13, background: 'var(--accent)', color: 'var(--primary-deep)', fontWeight: 600 }}>
        Book <Icon name="arrow-right" size={14}/>
      </Link>
      <style>{`
        @media (max-width: 720px) {
          .erc-mobile-bottom { display: flex !important; }
          body { padding-bottom: 56px; }
        }
      `}</style>
    </div>
  );
};

// ---------- Eyebrow + dividers helper ----------
const SectionHead = ({ eyebrow, title, lede, align = 'left', children }) => (
  <div style={{ display: 'flex', flexDirection: 'column', alignItems: align === 'center' ? 'center' : 'flex-start', textAlign: align === 'center' ? 'center' : 'left', maxWidth: align === 'center' ? '40ch' : '52ch', margin: align === 'center' ? '0 auto' : 0 }}>
    {eyebrow && <span className="eyebrow" style={{ marginBottom: 18 }}>{eyebrow}</span>}
    {title && <h2 className="section" style={{ textWrap: 'balance' }}>{title}</h2>}
    {lede && <p className="lede" style={{ marginTop: 20 }}>{lede}</p>}
    {children}
  </div>
);

// Export to window
Object.assign(window, {
  Icon, Rosette, BrandLockup, ComplianceTag, Img,
  RouterProvider, useRouter, Link,
  Navbar, Footer, MobileBottomBar, SectionHead,
});