// var-nav.jsx — LOCKED navigation per spec.
// Utility bar · Primary nav · CTA always visible
// Sticky, transparent over hero; deep navy (#152545) + shadow on scroll.

const LOCK_NAV_LINKS = [
{ name: 'Solutions', href: '#solutions' },
{ name: 'Industries', href: '#industries' },
{ name: 'Projects', href: '/projects/' },
{ name: 'Resources', href: '#resources' },
{ name: 'About', href: '#about' }];


const LOCK_UTILITY_LEFT = { label: 'Community & Partners', href: '/community-and-partners/', icon: 'users' };
const LOCK_UTILITY_RIGHT = { label: 'Solar Calculator', href: '/solar-calculator/', icon: 'calculator' };

const LOCK_DROPDOWNS = {
  Solutions: [
  'Energy Audits',
  'Commercial Solar',
  'Battery Storage',
  'EV Charging',
  'LED Lighting',
  'Solar Maintenance'],

  Industries: [
  'Manufacturing',
  'Warehousing & Logistics',
  'Food & Beverage',
  'Agriculture',
  'REITs & Property',
  'Government & Institutional'],

  Resources: [
  'Insights',
  'Rebates & Incentives'
  // 'Payment plans'
  ],

  About: [
  'Our Story',
  'Partners',
  'Careers',
  'Contact']
};

const LOCK_DROPDOWN_HREFS = {
  Solutions: {
    'Energy Audits': '/solutions/energy-audits/',
    'Commercial Solar': '/solutions/commercial-solar/',
    'Battery Storage': '/solutions/battery-storage/',
    'EV Charging': '/solutions/ev-charging/',
    'LED Lighting': '/solutions/led-lighting/',
    'Solar Maintenance': '/solutions/solar-maintenance/'
  },
  Industries: {
    'Manufacturing': '/industries/manufacturing/',
    'Warehousing & Logistics': '/industries/warehousing/',
    'Food & Beverage': '/industries/food-and-beverage/',
    'Agriculture': '/industries/agriculture/',
    'REITs & Property': '/industries/real-estate/',
    'Government & Institutional': '/industries/government/',
  },
  Resources: {
    'Insights': '/resources/insights/',
    'Rebates & Incentives': '/resources/rebates-and-incentives/',
    'Payment plans': '/resources/payment-plans/'
  },
  About: {
    'Our Story': '/about/our-story/',
    'Partners': '/about/partners/',
    'Careers': '/about/careers/',
    'Contact': '/about/contact/'
  }
};

// ============================================================
// LockedNavBar — to use on all variation hero mockups.
// onHero controls whether it's over-hero (transparent/white) or scrolled (#152545).
// activeLink: optional string matching a primary link — shows active underline.
// openDropdown: optional string — forces a dropdown open for preview.
// ============================================================
const LockedNavBar = ({ onHero = true, activeLink = null, activeDropdownItem = null, openDropdown = null }) => {
  const [hover, setHover] = React.useState(null);
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const [mobileExpanded, setMobileExpanded] = React.useState(null);
  const [isMobile, setIsMobile] = React.useState(
    () => typeof window !== 'undefined' && window.matchMedia('(max-width: 1024px)').matches
  );
  const shown = hover || openDropdown;

  // Lock body scroll when mobile menu open
  React.useEffect(() => {
    if (mobileOpen) {
      const prev = document.body.style.overflow;
      document.body.style.overflow = 'hidden';
      return () => {document.body.style.overflow = prev;};
    }
  }, [mobileOpen]);

  // Track the mobile/tablet breakpoint so the bar and the menu panel share one
  // compact scale (logo + padding) — keeps the open/close transition seamless.
  React.useEffect(() => {
    const mq = window.matchMedia('(max-width: 1024px)');
    const update = () => { setIsMobile(mq.matches); if (!mq.matches) setMobileOpen(false); };
    update();
    mq.addEventListener('change', update);
    return () => mq.removeEventListener('change', update);
  }, []);

  const barBg = onHero ? 'transparent' : 'var(--gi-wise-blue)';
  const barShadow = onHero ? 'none' : '0 1px 0 rgba(255,255,255,0.05), 0 2px 12px rgba(15,33,51,0.10)';
  const primaryLinkColor = onHero ? 'rgba(255,255,255,0.88)' : 'rgba(255,255,255,0.88)';
  const utilityLinkColor = onHero ? 'rgba(255,255,255,0.62)' : 'rgba(255,255,255,0.62)';
  const utilityBarBorder = onHero ? 'rgba(255,255,255,0.14)' : 'rgba(255,255,255,0.10)';

  return (
    <header data-gi-resp="nav" style={{
      position: 'sticky', top: 0, zIndex: 200,
      background: barBg,
      boxShadow: barShadow,
      transition: 'background 240ms cubic-bezier(.2,0,0,1), box-shadow 240ms ease'
    }}>
      {/* Utility bar */}
      <div data-gi-resp="nav-utility" style={{
        borderBottom: `1px solid ${utilityBarBorder}`
      }}>
        <div data-gi-resp="container" style={{
          maxWidth: 1440, margin: '0 auto', padding: '10px 48px',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24,
          flexWrap: 'wrap'
        }}>
          {[LOCK_UTILITY_LEFT, LOCK_UTILITY_RIGHT].map((u) =>
          <a key={u.label} href={u.href} style={{
            fontFamily: 'var(--ff-sans)', fontWeight: 400,
            color: utilityLinkColor,
            textDecoration: 'none', border: 'none',
            letterSpacing: '-0.003em',
            display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 12.5, lineHeight: '20px', height: "10px"
          }}>
              <i data-lucide={u.icon} style={{ width: 13, height: 13, strokeWidth: 1.5 }} />
              {u.label}
            </a>
          )}
        </div>
      </div>

      {/* Primary bar */}
      <div data-gi-resp="nav-primary" style={{
        maxWidth: 1440, margin: '0 auto', padding: isMobile ? '14px 24px' : '16px 48px',
        display: 'grid', gridTemplateColumns: '220px 1fr auto', alignItems: 'center', gap: 40
      }}>
        <a href="/" style={{ display: 'inline-flex', alignItems: 'center', border: 'none' }}>
          <img src={`${window.GI_BASE}assets/logos/alternate-reversed.svg`} alt="Green Integrations" style={{ width: isMobile ? 'auto' : "200px", objectFit: "contain", height: isMobile ? "32px" : "62px" }} />
        </a>

        <nav
          data-gi-resp="nav-primary-links"
          onMouseLeave={() => setHover(null)}
          style={{ display: 'flex', justifyContent: 'center', gap: 4, position: 'relative' }}>
          
          {LOCK_NAV_LINKS.map((l) => {
            const hasDrop = !!LOCK_DROPDOWNS[l.name];
            const isActive = activeLink === l.name;
            const isOpen = shown === l.name && hasDrop;
            return (
              <div
                key={l.name}
                onMouseEnter={() => hasDrop && setHover(l.name)}
                style={{ position: 'relative' }}>
                
                <a href={l.href} style={{
                  fontFamily: 'var(--ff-sans)', fontSize: 14, fontWeight: 500,
                  color: primaryLinkColor,
                  textDecoration: 'none', border: 'none',
                  letterSpacing: '-0.003em',
                  padding: '10px 16px',
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                  borderBottom: isActive ?
                  '2px solid var(--gi-sage-accent)' :
                  '2px solid transparent',
                  paddingBottom: 8
                }}>
                  {l.name}
                  {hasDrop && <i data-lucide="chevron-down" style={{ width: 12, height: 12, strokeWidth: 1.5, opacity: 0.7 }} />}
                </a>

                {isOpen &&
                <div style={{
                  position: 'absolute', top: '100%', left: 0,
                  paddingTop: 12,
                  background: 'transparent',
                  minWidth: 260
                }}>
                    <div style={{
                    background: 'var(--gi-wise-blue)',
                    border: '1px solid rgba(255,255,255,0.10)',
                    padding: '10px 0',
                    boxShadow: '0 24px 40px -12px rgba(0,0,0,0.35)'
                  }}>
                    {LOCK_DROPDOWNS[l.name].map((item, idx) => {
                      const isItemActive = activeDropdownItem === item;
                      const itemHref = LOCK_DROPDOWN_HREFS[l.name]?.[item] || '#';
                      return (
                        <a key={item} href={itemHref} style={{
                          display: 'block',
                          padding: '10px 20px',
                          fontFamily: 'var(--ff-sans)', fontSize: 13.5, fontWeight: isItemActive ? 500 : 400,
                          color: isItemActive ? '#fff' : 'rgba(255,255,255,0.88)',
                          textDecoration: 'none', border: 'none',
                          letterSpacing: '-0.003em',
                          position: 'relative',
                          background: isItemActive ? 'rgba(212,162,76,0.10)' : 'transparent'
                        }}>
                        {isItemActive &&
                          <span style={{
                            position: 'absolute', left: 0, top: '50%',
                            transform: 'translateY(-50%)',
                            width: 3, height: 20,
                            background: '#D4A24C'
                          }} />
                          }
                        {item}
                      </a>);

                    })}
                  </div>
                  </div>
                }
              </div>);

          })}
        </nav>

        <div data-gi-resp="nav-cta" style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
          <Button variant={onHero ? 'onDark' : 'primary'} size="sm" href="/about/contact/" gtm={{ location: 'nav' }}>Start your assessment</Button>
          <button
            data-gi-resp="nav-hamburger"
            aria-label={mobileOpen ? 'Close menu' : 'Open menu'}
            aria-expanded={mobileOpen}
            onClick={() => setMobileOpen((o) => !o)}
            style={{
              display: 'none',
              background: 'transparent', border: '1px solid rgba(255,255,255,0.28)',
              color: '#fff', width: 42, height: 42, cursor: 'pointer',
              alignItems: 'center', justifyContent: 'center', padding: 0
            }}>
            <i data-lucide={mobileOpen ? 'x' : 'menu'} style={{ width: 18, height: 18, strokeWidth: 1.75 }} />
          </button>
        </div>
      </div>

      {/* Mobile menu overlay — always mounted so it can fade in/out smoothly.
          Its header mirrors the bar's mobile scale (logo + padding) so opening
          is a seamless cross-fade rather than a jump. */}
      <div data-gi-resp="nav-mobile-panel" aria-hidden={!mobileOpen} style={{
        position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
        background: 'var(--gi-wise-blue)', zIndex: 300,
        display: 'flex', flexDirection: 'column',
        overflowY: 'auto',
        opacity: mobileOpen ? 1 : 0,
        visibility: mobileOpen ? 'visible' : 'hidden',
        pointerEvents: mobileOpen ? 'auto' : 'none',
        transition: mobileOpen
          ? 'opacity 260ms cubic-bezier(.2,0,0,1), visibility 0s'
          : 'opacity 220ms cubic-bezier(.2,0,0,1), visibility 0s linear 220ms'
      }}>
          <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          padding: '14px 24px'
        }}>
            <img src={`${window.GI_BASE}assets/logos/alternate-reversed.svg`} alt="Green Integrations" style={{ height: 32, width: 'auto' }} />
            <button
            aria-label="Close menu"
            onClick={() => setMobileOpen(false)}
            style={{
              background: 'transparent', border: '1px solid rgba(255,255,255,0.28)',
              color: '#fff', width: 42, height: 42, cursor: 'pointer',
              display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 0
            }}>
              <i data-lucide="x" style={{ width: 18, height: 18, strokeWidth: 1.75 }} />
            </button>
          </div>

          <nav style={{ flex: 1, padding: '12px 0' }}>
            {LOCK_NAV_LINKS.map((l) => {
            const hasDrop = !!LOCK_DROPDOWNS[l.name];
            const isExpanded = mobileExpanded === l.name;
            return (
              <div key={l.name} style={{ borderBottom: '1px solid rgba(255,255,255,0.10)' }}>
                  <button
                  onClick={() => hasDrop ?
                  setMobileExpanded(isExpanded ? null : l.name) : (
                  setMobileOpen(false), window.location.href = l.href)}
                  style={{
                    width: '100%', background: 'transparent', border: 'none',
                    padding: '20px 24px', cursor: 'pointer',
                    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                    color: '#fff',
                    fontFamily: 'var(--ff-sans)', fontSize: 18, fontWeight: 500,
                    textAlign: 'left'
                  }}>
                    <span>{l.name}</span>
                    {hasDrop && <i data-lucide={isExpanded ? 'chevron-up' : 'chevron-down'} style={{ width: 18, height: 18, strokeWidth: 1.5, opacity: 0.7 }} />}
                  </button>
                  {hasDrop &&
                <div style={{
                  maxHeight: isExpanded ? '400px' : '0',
                  overflow: 'hidden',
                  opacity: isExpanded ? 1 : 0,
                  transition: 'max-height 280ms ease, opacity 200ms ease'
                }}>
                    <div style={{ padding: '4px 24px 20px' }}>
                      {LOCK_DROPDOWNS[l.name].map((item) =>
                  <a key={item} href={LOCK_DROPDOWN_HREFS[l.name]?.[item] || '#'} onClick={() => setMobileOpen(false)} style={{
                    display: 'block', padding: '12px 0',
                    fontFamily: 'var(--ff-sans)', fontSize: 15, fontWeight: 400,
                    color: 'rgba(255,255,255,0.82)',
                    textDecoration: 'none', border: 'none'
                  }}>{item}</a>
                  )}
                    </div>
                  </div>
                }
                </div>);

          })}

            {/* Utility links in mobile */}
            <div style={{ padding: '24px', display: 'flex', flexDirection: 'column', gap: 16 }}>
              {[LOCK_UTILITY_LEFT].map((u) =>
            <a key={u.label} href={u.href} onClick={() => setMobileOpen(false)} style={{
              fontFamily: 'var(--ff-sans)', fontSize: 14, fontWeight: 400,
              color: 'rgba(255,255,255,0.70)',
              textDecoration: 'none', border: 'none',
              display: 'inline-flex', alignItems: 'center', gap: 10
            }}>
                  <i data-lucide={u.icon} style={{ width: 14, height: 14, strokeWidth: 1.5 }} />
                  {u.label}
                </a>
            )}
            </div>
          </nav>

          <div style={{ padding: '20px 24px 32px', borderTop: '1px solid rgba(255,255,255,0.14)' }}>
            <Button data-gi-resp="nav-mobile-cta" variant="onDark" size="md" href="/about/contact/" gtm={{ location: 'nav' }}>Start your assessment</Button>
          </div>
        </div>
    </header>);

};

Object.assign(window, { LockedNavBar, LOCK_NAV_LINKS, LOCK_DROPDOWNS, LOCK_UTILITY_LEFT, LOCK_UTILITY_RIGHT });