// Nav + Footer shared by every page. Accepts a `current` prop that's one of
// 'home' | 'browse' | 'quote'. Uses real <a> hrefs so navigation works
// across the multi-file prototype.

const CCNav = ({ current = 'home' }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);

  // Sticky nav stays pinned to the top of the viewport on scroll. The
  // `scrolled` flag flips on past 20px so we can swap to the blurred
  // background — keeps the nav legible over photo-heavy sections.
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { k: 'home',   l: 'Home',         href: '/' },
    { k: 'browse', l: 'Browse',       href: '/browse' },
    { k: 'how',    l: 'How it works', href: '/how-it-works' },
    { k: 'haulers',l: 'For haulers',  href: '/for-haulers' },
  ];

  return (
    <>
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50, height: 76,
      display: 'flex', alignItems: 'center', padding: '0 clamp(20px, 5vw, 64px)',
      background: scrolled ? 'rgba(17, 38, 32, 0.85)' : 'transparent',
      borderBottom: `1px solid ${scrolled ? CC_BORDER : 'transparent'}`,
      backdropFilter: scrolled ? 'blur(12px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(12px)' : 'none',
      transition: 'background 220ms ease, border-color 220ms ease, backdrop-filter 220ms ease',
    }}>
      <CCLogo size={38} />
      <div className="cc-nav-links" style={{ display: 'flex', gap: 28, marginLeft: 56, flex: 1 }}>
        {links.map(l => (
          <a key={l.k} href={l.href}
            style={{
              font: '550 15px Inter, system-ui, sans-serif',
              letterSpacing: 0.2,
              color: current === l.k ? '#fff' : CC_T_SECONDARY,
              textDecoration: 'none',
              padding: '6px 0',
              borderBottom: current === l.k ? `2px solid ${CC_SAGE}` : '2px solid transparent',
              transition: 'color 160ms ease',
            }}
            onMouseEnter={(e) => e.currentTarget.style.color = '#fff'}
            onMouseLeave={(e) => e.currentTarget.style.color = current === l.k ? '#fff' : CC_T_SECONDARY}
          >{l.l}</a>
        ))}
      </div>
      <div className="cc-nav-cta" style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
        <a href="/partner-login" className="cc-nav-signin" style={{ color: CC_T_SECONDARY, fontSize: 14, textDecoration: 'none', fontWeight: 550 }}>Sign in</a>
        <CCButtonAmber href="/quote" size="sm" arrow={false}>Get a Quote</CCButtonAmber>
      </div>
      <button
        className="cc-nav-burger"
        onClick={() => setMobileOpen(!mobileOpen)}
        aria-label="menu"
        style={{
          display: 'none', background: 'transparent', border: 0, color: '#fff',
          cursor: 'pointer', marginLeft: 'auto',
        }}
      >
        {mobileOpen ? CCIcon.x({ size: 26 }) : (
          <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
            <path d="M3 6h18M3 12h18M3 18h18"/>
          </svg>
        )}
      </button>
    </nav>

    {mobileOpen && (
      <div style={{
        position: 'fixed', top: 76, left: 0, right: 0, zIndex: 49,
        background: CC_ELEV, borderBottom: `1px solid ${CC_BORDER}`,
        padding: '20px 24px 28px', display: 'flex', flexDirection: 'column', gap: 4,
      }}>
        {links.map(l => (
          <a key={l.k} href={l.href} style={{
            color: current === l.k ? '#fff' : CC_T_SECONDARY,
            textDecoration: 'none', padding: '14px 0',
            borderBottom: `1px solid ${CC_BORDER}`,
            font: '550 16px Inter, system-ui, sans-serif',
          }}>{l.l}</a>
        ))}
        <a href="/partner-login" style={{
          color: CC_T_SECONDARY, textDecoration: 'none', padding: '14px 0',
          font: '550 16px Inter, system-ui, sans-serif',
        }}>Sign in</a>
      </div>
    )}
    </>
  );
};

const CCFooter = () => {
  const cols = [
    ['Customers', [
      ['Browse haulers',   '/browse'],
      ['Get a free quote', '/quote'],
      ['Container sizes',  '/#sizes'],
      ['Service areas',    '/#service-areas'],
    ]],
    ['For haulers', [
      ['List your company', '/list-company'],
      ['Partner login',     '/partner-login'],
      ['Pricing',           '/for-haulers#pricing'],
      ['Hauler resources',  '/for-haulers'],
    ]],
    ['Company', [
      ['About',   '/about'],
      ['Press',   '#'],
      ['Careers', '#'],
      ['Contact', '/contact'],
    ]],
    ['Legal', [
      ['Terms of service', '/terms'],
      ['Privacy policy',   '/privacy'],
      ['Cookie policy',    '#'],
      ['Accessibility',    '#'],
    ]],
  ];
  return (
    <footer style={{
      background: CC_BASE, borderTop: `1px solid ${CC_BORDER}`,
      padding: 'clamp(48px, 8vw, 80px) clamp(24px, 5vw, 64px) 36px',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div className="cc-footer-grid" style={{
          display: 'grid',
          gridTemplateColumns: '1.5fr 1fr 1fr 1fr 1fr',
          gap: 48, marginBottom: 56,
        }}>
          <div>
            <CCLogo size={40} />
            <p style={{
              font: '450 14px/1.6 Inter, system-ui, sans-serif',
              color: CC_T_SECONDARY, marginTop: 20, maxWidth: 300,
            }}>
              The dumpster rental marketplace. Vetted haulers, real rates, no brokers.
            </p>
            <div style={{ display: 'flex', gap: 10, marginTop: 24 }}>
              {['M', 'I', 'X', 'Y'].map((s, i) => (
                <a key={i} href="#" style={{
                  width: 36, height: 36, borderRadius: 9999,
                  background: CC_CARD, border: `1px solid ${CC_BORDER}`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: CC_T_SECONDARY, textDecoration: 'none',
                  font: '600 13px Inter, system-ui, sans-serif',
                }}>{s}</a>
              ))}
            </div>
          </div>
          {cols.map(([t, items]) => (
            <div key={t}>
              <div style={{
                font: '600 12px Inter, system-ui, sans-serif',
                letterSpacing: 1.6, textTransform: 'uppercase',
                color: CC_T_TERTIARY, marginBottom: 20,
              }}>{t}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {items.map(([l, href]) => (
                  <a key={l} href={href} style={{
                    color: CC_T_SECONDARY, fontSize: 14,
                    textDecoration: 'none', transition: 'color 160ms ease',
                  }}
                  onMouseEnter={e => e.currentTarget.style.color = '#fff'}
                  onMouseLeave={e => e.currentTarget.style.color = CC_T_SECONDARY}
                  >{l}</a>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div style={{
          borderTop: `1px solid ${CC_BORDER}`, paddingTop: 28,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          gap: 16, flexWrap: 'wrap',
          color: CC_T_DISABLED, fontSize: 12, letterSpacing: 0.4,
        }}>
          <div>© 2026 Container Connect, Inc. · All rights reserved.</div>
          <div>Made for the operators who show up.</div>
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, { CCNav, CCFooter });