/* global React */
/* ============================================================
   Chrome — Nav, Footer, lightweight ecosystem rail
   ============================================================ */
const { useEffect: cEffect, useState: cState } = React;

const NAV_ITEMS = [
  { label: 'Philosophy', href: '/#philosophy' },
  { label: 'The Audit',  href: '/audit' },
  { label: 'Engagements', href: '/#engagements' },
  { label: 'Field Notes', href: '/insights' },
  { label: 'Speaking',  href: '/speaking' },
];

function Nav() {
  const { path, go } = useRouter();
  const [scrolled, setScrolled] = cState(false);
  const [drawerOpen, setDrawerOpen] = cState(false);

  cEffect(() => {
    const f = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', f, { passive: true });
    f();
    return () => window.removeEventListener('scroll', f);
  }, []);

  // close drawer on route change
  cEffect(() => { setDrawerOpen(false); }, [path]);

  // lock body scroll when drawer open
  cEffect(() => {
    document.body.style.overflow = drawerOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [drawerOpen]);

  // escape closes drawer
  cEffect(() => {
    if (!drawerOpen) return;
    const onKey = (e) => { if (e.key === 'Escape') setDrawerOpen(false); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [drawerOpen]);

  const onNavClick = (e, href) => {
    e.preventDefault();
    if (href.includes('#') && path === '/') {
      // smooth in-page scroll, no router push
      const id = href.split('#')[1];
      const el = document.getElementById(id);
      if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
      return;
    }
    if (href.includes('#')) {
      go(href.split('#')[0]);
      // wait a tick then scroll
      setTimeout(() => {
        const id = href.split('#')[1];
        const el = document.getElementById(id);
        if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }, 80);
      return;
    }
    go(href);
  };

  return (
    <>
    <header style={{
      position: 'fixed',
      top: 0, left: 0, right: 0,
      zIndex: 50,
      padding: scrolled ? '14px 0' : '22px 0',
      background: scrolled ? 'rgba(10,25,57,0.78)' : 'transparent',
      backdropFilter: scrolled ? 'blur(16px) saturate(140%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(16px) saturate(140%)' : 'none',
      borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
      transition: 'all 380ms var(--ease-out)',
    }}>
      <div className="container" style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        gap: 32,
      }}>
        <a href="/" onClick={(e) => { e.preventDefault(); go('/'); }}
           style={{
             display: 'flex',
             alignItems: 'center',
             gap: 14,
             textDecoration: 'none',
             borderBottom: 'none',
           }}>
          <img src="assets/logos/daniel-pledger-on-navy.jpg"
               alt="" aria-hidden
               style={{
                 width: 34, height: 34,
                 objectFit: 'contain',
                 mixBlendMode: 'screen',
               }} />
          <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
            <span style={{
              fontSize: 11,
              letterSpacing: '0.28em',
              textTransform: 'uppercase',
              color: 'var(--c-steel-100)',
              fontWeight: 500,
            }}>The Daniel Pledger</span>
            <span style={{
              fontSize: 9,
              letterSpacing: '0.22em',
              textTransform: 'uppercase',
              color: 'var(--c-slate-ocean)',
              fontWeight: 400,
              marginTop: 5,
            }}>Executive Authority Advisory</span>
          </div>
        </a>

        <nav className="hide-mobile" style={{ display: 'flex', gap: 30 }}>
          {NAV_ITEMS.map(item => (
            <a key={item.label}
               href={item.href}
               onClick={(e) => onNavClick(e, item.href)}
               style={{
                 fontSize: 12,
                 letterSpacing: '0.14em',
                 color: 'var(--c-steel-300)',
                 textTransform: 'uppercase',
                 fontWeight: 500,
                 textDecoration: 'none',
                 borderBottom: '1px solid transparent',
                 paddingBottom: 4,
                 transition: 'color 220ms var(--ease-out), border-color 220ms var(--ease-out)',
               }}
               onMouseEnter={(e) => {
                 e.currentTarget.style.color = '#fff';
                 e.currentTarget.style.borderBottomColor = 'var(--accent)';
               }}
               onMouseLeave={(e) => {
                 e.currentTarget.style.color = 'var(--c-steel-300)';
                 e.currentTarget.style.borderBottomColor = 'transparent';
               }}
            >{item.label}</a>
          ))}
        </nav>

        <div className="hide-mobile">
          <Button variant="ghost" size="sm" icon="arrow-right" href="/conversation">Request conversation</Button>
        </div>

        <button
          type="button"
          className="hamburger"
          aria-label="Open menu"
          aria-expanded={drawerOpen}
          aria-controls="tdp-mobile-drawer"
          onClick={() => setDrawerOpen(true)}>
          <i data-lucide="menu" style={{ width: 18, height: 18 }}></i>
        </button>
      </div>
    </header>

    <div
      className={'drawer-scrim' + (drawerOpen ? ' open' : '')}
      aria-hidden={!drawerOpen}
      onClick={() => setDrawerOpen(false)}
    />
    <aside
      id="tdp-mobile-drawer"
      className={'drawer' + (drawerOpen ? ' open' : '')}
      aria-hidden={!drawerOpen}
      aria-label="Site navigation">
      <div className="drawer-header">
        <span style={{
          fontSize: 10,
          letterSpacing: '0.28em',
          textTransform: 'uppercase',
          color: 'var(--c-steel-300)',
          fontWeight: 500,
        }}>The Daniel Pledger</span>
        <button
          type="button"
          onClick={() => setDrawerOpen(false)}
          aria-label="Close menu"
          style={{
            width: 36, height: 36,
            display: 'inline-flex',
            alignItems: 'center',
            justifyContent: 'center',
            border: '1px solid var(--line)',
            borderRadius: 2,
            color: 'var(--c-steel-100)',
            cursor: 'pointer',
          }}>
          <i data-lucide="x" style={{ width: 16, height: 16 }}></i>
        </button>
      </div>
      <ul className="drawer-nav">
        {NAV_ITEMS.map((item) => (
          <li key={item.label}>
            <a href={item.href} onClick={(e) => onNavClick(e, item.href)}>{item.label}</a>
          </li>
        ))}
        <li>
          <a href="/conversation" onClick={(e) => { e.preventDefault(); go('/conversation'); }}
             style={{ color: 'var(--c-glow-200)' }}>Request conversation</a>
        </li>
      </ul>
      <div className="drawer-cta">
        <Button variant="primary" href="/audit" size="md">Take the audit</Button>
      </div>
      <div className="drawer-meta">
        Bangalore · Engagements worldwide
      </div>
    </aside>
    </>
  );
}

/* ============================================================
   Footer — quiet, with restrained ecosystem rail
   ============================================================ */
function Footer() {
  const { go } = useRouter();
  return (
    <footer style={{
      borderTop: '1px solid var(--line)',
      paddingTop: 80,
      paddingBottom: 36,
      marginTop: 96,
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* very subtle beam — bottom-right origin */}
      <div aria-hidden style={{
        position: 'absolute',
        right: '-10%', bottom: '-40%',
        width: '60%', height: '160%',
        background: 'linear-gradient(290deg, rgba(212,169,66,0.16) 0%, rgba(212,169,66,0) 60%)',
        transform: 'rotate(8deg)',
        pointerEvents: 'none',
        mixBlendMode: 'screen',
        filter: 'blur(2px)',
      }} />

      <div className="container" style={{ position: 'relative' }}>
        <div className="footer-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(240px, 1.6fr) 1fr 1fr 1fr',
          gap: 56,
          marginBottom: 72,
        }}>
          <div>
            <img src="assets/logos/daniel-pledger-on-navy.jpg" alt=""
                 style={{ width: 48, height: 48, objectFit: 'contain', mixBlendMode: 'screen', marginBottom: 22 }} />
            <p style={{
              fontSize: 15,
              lineHeight: 1.6,
              maxWidth: '36ch',
              color: 'var(--c-steel-300)',
              fontWeight: 300,
              marginBottom: 28,
            }}>
              Private executive coaching for leaders who do not perform roles, but embody identity.
            </p>
            <p style={{
              fontSize: 11,
              letterSpacing: '0.22em',
              textTransform: 'uppercase',
              color: 'var(--c-slate-ocean)',
              fontWeight: 500,
              margin: 0,
            }}>
              Bangalore · Engagements worldwide
            </p>
          </div>

          <FooterCol title="Practice" items={[
            { label: 'Philosophy', href: '/#philosophy' },
            { label: 'Engagements', href: '/#engagements' },
            { label: 'The audit', href: '/audit' },
            { label: 'Conversation', href: '/conversation' },
          ]} />
          <FooterCol title="Read" items={[
            { label: 'Field notes', href: '/insights' },
            { label: 'On record', href: '/perspective' },
            { label: 'Speaking', href: '/speaking' },
          ]} />
          <FooterCol title="Ecosystem" accent items={[
            { label: 'The Distinctive Leader', href: '#', meta: 'Enterprise · In development', disabled: true },
            { label: 'PledgerSpeaks', href: '#', meta: 'Workplace · In development', disabled: true },
          ]} />
        </div>

        <div style={{ height: 1, background: 'var(--line)', margin: '0 0 28px' }} />

        <div className="footer-bottom" style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          fontSize: 11,
          letterSpacing: '0.16em',
          textTransform: 'uppercase',
          color: 'var(--c-steel-300)',
          gap: 16,
          flexWrap: 'wrap',
        }}>
          <span>© Daniel Pledger · 2026</span>
          <span style={{ display: 'flex', gap: 24 }}>
            <a href="/privacy" onClick={(e) => { e.preventDefault(); go('/privacy'); }}
               style={{ color: 'inherit', borderBottom: '1px solid transparent', textDecoration: 'none', transition: 'border-color 220ms var(--ease-out)' }}
               onMouseEnter={(e) => e.currentTarget.style.borderBottomColor = 'var(--accent)'}
               onMouseLeave={(e) => e.currentTarget.style.borderBottomColor = 'transparent'}>Privacy</a>
            <a href="/terms" onClick={(e) => { e.preventDefault(); go('/terms'); }}
               style={{ color: 'inherit', borderBottom: '1px solid transparent', textDecoration: 'none', transition: 'border-color 220ms var(--ease-out)' }}
               onMouseEnter={(e) => e.currentTarget.style.borderBottomColor = 'var(--accent)'}
               onMouseLeave={(e) => e.currentTarget.style.borderBottomColor = 'transparent'}>Terms</a>
            <a href="/conversation" onClick={(e) => { e.preventDefault(); go('/conversation'); }}
               style={{ color: 'inherit', borderBottom: '1px solid transparent', textDecoration: 'none', transition: 'border-color 220ms var(--ease-out)' }}
               onMouseEnter={(e) => e.currentTarget.style.borderBottomColor = 'var(--accent)'}
               onMouseLeave={(e) => e.currentTarget.style.borderBottomColor = 'transparent'}>Inquiries</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, items, accent }) {
  const { go } = useRouter();
  return (
    <div>
      <div style={{
        fontSize: 10,
        letterSpacing: '0.26em',
        textTransform: 'uppercase',
        color: 'var(--c-glow-500)',
        fontWeight: 500,
        marginBottom: 18,
      }}>{title}</div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
        {items.map(i => (
          <li key={i.label}>
            <a
              href={i.href}
              aria-disabled={i.disabled ? 'true' : undefined}
              tabIndex={i.disabled ? -1 : undefined}
              onClick={(e) => {
                if (i.disabled) { e.preventDefault(); return; }
                if (i.href.startsWith('/')) { e.preventDefault(); go(i.href.split('#')[0]); }
              }}
              style={{
                color: i.disabled
                  ? 'var(--c-steel-300)'
                  : (accent ? 'var(--c-steel-100)' : 'var(--c-steel-300)'),
                fontSize: 14,
                fontWeight: accent ? 500 : 400,
                textDecoration: 'none',
                borderBottom: '1px solid transparent',
                transition: 'border-color 220ms var(--ease-out), color 220ms var(--ease-out)',
                display: 'inline-flex', flexDirection: 'column', gap: 4,
                cursor: i.disabled ? 'default' : 'pointer',
                opacity: i.disabled ? 0.78 : 1,
              }}
              onMouseEnter={(e) => {
                if (i.disabled) return;
                e.currentTarget.style.borderBottomColor = 'var(--accent)';
                e.currentTarget.style.color = '#fff';
              }}
              onMouseLeave={(e) => {
                if (i.disabled) return;
                e.currentTarget.style.borderBottomColor = 'transparent';
                e.currentTarget.style.color = accent ? 'var(--c-steel-100)' : 'var(--c-steel-300)';
              }}>
              {i.label}
              {i.meta && (
                <span style={{
                  fontSize: 10,
                  letterSpacing: '0.22em',
                  textTransform: 'uppercase',
                  color: 'var(--c-steel-300)',
                  fontWeight: 400,
                }}>{i.meta}</span>
              )}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}

Object.assign(window, { Nav, Footer });