/* ============================================================
   Rainbow Group — shared-chrome.jsx
   SharedNav and SharedFooter for sub-pages.
   Per DESIGN-SYSTEM.md §6.
   ============================================================ */

const { useState: useStateSC, useEffect: useEffectSC } = React;

const SUB_LINKS = [
  { en: 'Work',     ar: 'أعمال',    href: 'Projects.html' },
  { en: 'Heritage', ar: 'الإرث',    href: 'Rainbow Group.html#heritage' },
  { en: 'Services', ar: 'الخدمات',  href: 'Rainbow Group.html#services' },
  { en: 'About',    ar: 'عن الشركة', href: 'About.html' },
  { en: 'Contact',  ar: 'تواصل',    href: 'Contact.html' },
];

function SharedNav({ currentPath }) {
  const [scrolled, setScrolled] = useStateSC(false);
  const [mobileOpen, setMobileOpen] = useStateSC(false);

  useEffectSC(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  useEffectSC(() => {
    document.body.classList.toggle('mobile-menu-open', mobileOpen);
    return () => document.body.classList.remove('mobile-menu-open');
  }, [mobileOpen]);

  const isActive = (href) => {
    if (!currentPath) return false;
    return href.split('#')[0] === currentPath;
  };

  return (
    <nav className={`nav-root nav-root--sub-initial ${scrolled ? 'nav-root--scrolled' : ''}`} aria-label="Primary">
      <div className="wrap nav-wrap">
        <a className="nav-brand" href="Rainbow Group.html" data-cursor-label="Home">
          <img src="assets/logo-icon.png" alt="" />
          <span className="nav-brand__text">
            <span className="nav-brand__name">Rainbow Group Contracting Company</span>
            <span className="nav-brand__meta">RGCC W.L.L · Est. 2017</span>
          </span>
        </a>
        <div className="nav-links">
          {SUB_LINKS.map((l) => (
            <a key={l.en} href={l.href} className={isActive(l.href) ? 'active' : ''} data-cursor-label={l.en}>
              <span>{l.en}</span>
              <span className="ar">{l.ar}</span>
            </a>
          ))}
        </div>
        <div className="nav-right">
          <a href="Contact.html" className="btn" data-cursor-label="Write">Commence <span className="arrow">→</span></a>
        </div>
        <button
          className="nav-hamburger"
          aria-label={mobileOpen ? 'Close menu' : 'Open menu'}
          aria-expanded={mobileOpen}
          aria-controls="mobile-menu-sub"
          onClick={() => setMobileOpen((o) => !o)}
        >
          <span className="nav-hamburger__bars" aria-hidden="true">
            <span /><span /><span />
          </span>
        </button>
      </div>
      <div id="mobile-menu-sub" className={`nav-mobile-menu ${mobileOpen ? 'open' : ''}`}>
        {SUB_LINKS.map((l) => (
          <a key={l.en} href={l.href} onClick={() => setMobileOpen(false)}>
            <span>{l.en}</span>
            <span className="ar">{l.ar}</span>
          </a>
        ))}
        <a href="Contact.html" className="nav-mobile-menu__cta" onClick={() => setMobileOpen(false)}>
          <span>Commence</span><span>→</span>
        </a>
      </div>
    </nav>
  );
}

function FooterCol({ title, items }) {
  return (
    <div>
      <div className="mono" style={{ color: 'rgba(243,237,226,0.5)', marginBottom: 18 }}>{title}</div>
      <ul style={{ display: 'flex', flexDirection: 'column', gap: 8, fontSize: 13 }}>
        {items.map((it) => (
          <li key={it.label}>
            {it.href
              ? <a href={it.href} style={{ color: 'rgba(243,237,226,0.8)', transition: 'color 0.3s ease' }}>{it.label}</a>
              : <span style={{ color: 'rgba(243,237,226,0.8)' }}>{it.label}</span>}
          </li>
        ))}
      </ul>
    </div>
  );
}

function SharedFooter() {
  return (
    <footer style={{ background: 'var(--ink)', color: '#f3ede2', padding: '80px 0 40px', position: 'relative' }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 40, paddingBottom: 56 }} data-mobile-stack>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <img src="assets/logo-icon.png" alt="Rainbow Group" style={{ height: 44, width: 'auto' }} />
              <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1, gap: 3 }}>
                <span className="display" style={{ fontSize: 20 }}>Rainbow Group Contracting Company W.L.L</span>
                <span className="mono" style={{ color: 'rgba(243,237,226,0.5)', fontSize: 9 }}>RGCC · A Heritage of Excellence · Est. 2017</span>
              </div>
            </div>
            <p style={{ fontSize: 13, color: 'rgba(243,237,226,0.75)', lineHeight: 1.65, maxWidth: '40ch', margin: 0 }}>
              Kuwaiti interior contractor delivering the finishing layer of buildings since 2017, with a 25-year craft lineage.
            </p>
            <div style={{ marginTop: 18, color: 'rgba(243,237,226,0.85)' }}>
              <SocialIcons variant="dark" />
            </div>
          </div>
          <FooterCol title="Navigate" items={[
            { label: 'Work',     href: 'Projects.html' },
            { label: 'Heritage', href: 'Rainbow Group.html#heritage' },
            { label: 'Services', href: 'Rainbow Group.html#services' },
            { label: 'About',    href: 'About.html' },
            { label: 'Clients',  href: 'Rainbow Group.html#clients' },
            { label: 'Contact',  href: 'Contact.html' },
          ]} />
          <FooterCol title="Practice" items={[
            { label: 'Leadership', href: 'About.html#leadership' },
            { label: 'Ethos', href: 'About.html#ethos' },
            { label: 'Press', href: 'mailto:press@rainbowgroup-kwt.com' },
          ]} />
          <FooterCol title="Legal" items={[
            { label: 'Privacy', href: '#' },
            { label: 'Terms', href: '#' },
            { label: 'CR No. — Kuwait' },
            { label: '© 2026 RGCC' },
          ]} />
        </div>
        <div className="footer-legal" style={{ marginTop: 0, display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16, paddingTop: 32, borderTop: '1px solid rgba(243,237,226,0.15)' }}>
          <span className="mono" style={{ color: 'rgba(243,237,226,0.45)' }}>N 29.3759° · E 47.9774°</span>
          <span className="mono" style={{ color: 'rgba(243,237,226,0.45)' }}>Drawn in Kuwait City</span>
        </div>
      </div>
      <div className="rainbow-hair" style={{ position: 'absolute', inset: 'auto 0 0 0' }} />
    </footer>
  );
}

Object.assign(window, { SharedNav, SharedFooter, FooterCol });