// components/layout.jsx — Nav + Footer

const NAV_LINKS = [
  { label: 'Features',     to: '/features'     },
  { label: 'Integrations', to: '/integrations' },
  { label: 'Docs',         to: '/docs'         },
  { label: 'Blog',         to: '/blog'         },
];

function Logo() {
  return (
    <a href="/" style={{ display: 'flex', alignItems: 'center', gap: '6px', textDecoration: 'none' }}
       onClick={(e) => { e.preventDefault(); navigate('/'); }}>
      <svg width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true">
        <path d="M11 1 C11 1 12 7.5 14.5 11 C12 14.5 11 21 11 21 C11 21 10 14.5 7.5 11 C10 7.5 11 1 11 1Z" fill="var(--color-brand-400)" />
        <path d="M1 11 C1 11 7.5 10 11 7.5 C14.5 10 21 11 21 11 C21 11 14.5 12 11 14.5 C7.5 12 1 11 1 11Z" fill="var(--color-brand-500)" opacity="0.7" />
      </svg>
      <span style={{ color: '#fff', fontWeight: 800, fontSize: '1.125rem', letterSpacing: '-0.03em', fontFamily: 'var(--font-sans)' }}>Vela</span>
    </a>
  );
}

function Nav() {
  const route = usePathRoute();
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  const { user, signIn, signOut } = window.useAuth ? window.useAuth() : { user: null };

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

  React.useEffect(() => {
    setMobileOpen(false);
  }, [route]);

  const isActive = (to) => route === to || (to === '/' && route === '/');

  return (
    <>
      <nav style={{
        position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
        height: '64px', display: 'flex', alignItems: 'center',
        transition: 'background 0.2s, border-color 0.2s',
        ...(scrolled ? {
          background: 'rgba(10,10,15,0.88)',
          backdropFilter: 'blur(14px)',
          WebkitBackdropFilter: 'blur(14px)',
          borderBottom: '1px solid var(--color-border)',
        } : {
          background: 'transparent',
          borderBottom: '1px solid transparent',
        })
      }}>
        <div className="container" style={{ display: 'flex', alignItems: 'center', gap: '2rem', height: '100%' }}>
          <Logo />

          {/* Desktop nav links */}
          <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', flex: 1 }} className="hide-mobile">
            {NAV_LINKS.map(({ label, to }) => (
              <a key={to} href={to}
                onClick={(e) => { e.preventDefault(); navigate(to); }}
                style={{
                  padding: '0.375rem 0.75rem',
                  fontSize: '0.875rem',
                  fontWeight: isActive(to) ? 500 : 400,
                  color: isActive(to) ? 'var(--color-brand-400)' : 'var(--color-muted)',
                  borderRadius: 'var(--radius-sm)',
                  transition: 'color 0.12s',
                  textDecoration: 'none',
                  whiteSpace: 'nowrap',
                }}
                onMouseEnter={e => { if (!isActive(to)) e.target.style.color = 'var(--color-text)'; }}
                onMouseLeave={e => { if (!isActive(to)) e.target.style.color = 'var(--color-muted)'; }}
              >
                {label}
              </a>
            ))}
          </div>

          {/* Right side */}
          <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginLeft: 'auto' }} className="hide-mobile">
            <a href="https://github.com/karnati-praveen/VELA" target="_blank" rel="noopener noreferrer"
              style={{
                display: 'flex', alignItems: 'center', gap: '0.4rem',
                fontSize: '0.8125rem', color: 'var(--color-muted)',
                border: '1px solid var(--color-border)', borderRadius: 'var(--radius-full)',
                padding: '0.3rem 0.75rem',
                transition: 'color 0.12s, border-color 0.12s', textDecoration: 'none',
              }}
              onMouseEnter={e => { e.currentTarget.style.color = 'var(--color-text)'; e.currentTarget.style.borderColor = 'var(--color-border-hover)'; }}
              onMouseLeave={e => { e.currentTarget.style.color = 'var(--color-muted)'; e.currentTarget.style.borderColor = 'var(--color-border)'; }}
            >
              <IcoGithub size={14} />
              <span>★ 1.2k</span>
            </a>
            <Btn variant="ghost" size="sm" to="/docs">Docs</Btn>
            {user ? (
              <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginLeft: '0.25rem' }}>
                {user.photoURL && <img src={user.photoURL} alt="Avatar" style={{ width: 28, height: 28, borderRadius: '50%', border: '1px solid var(--color-border)' }} />}
                <button onClick={signOut} style={{ background: 'none', border: 'none', color: 'var(--color-muted)', cursor: 'pointer', fontSize: '0.875rem', padding: 0 }}>Log out</button>
              </div>
            ) : (
              <button onClick={signIn} className="btn btn-primary btn-sm" style={{ cursor: 'pointer' }}>Log in</button>
            )}
          </div>

          {/* Mobile hamburger */}
          <button className="hide-desktop" onClick={() => setMobileOpen(true)}
            style={{ marginLeft: 'auto', background: 'none', border: 'none', color: 'var(--color-muted)', cursor: 'pointer', padding: '0.25rem' }}
            aria-label="Open menu">
            <IcoMenu size={22} />
          </button>
        </div>
      </nav>

      {/* Mobile drawer */}
      {mobileOpen && (
        <div style={{
          position: 'fixed', inset: 0, zIndex: 100,
          background: 'rgba(10,10,15,0.97)',
          backdropFilter: 'blur(16px)',
          display: 'flex', flexDirection: 'column', padding: '1.5rem',
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2rem' }}>
            <Logo />
            <button onClick={() => setMobileOpen(false)}
              style={{ background: 'none', border: 'none', color: 'var(--color-muted)', cursor: 'pointer' }}
              aria-label="Close menu">
              <IcoX size={22} />
            </button>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
            {NAV_LINKS.map(({ label, to }) => (
              <a key={to} href={to}
                onClick={(e) => { e.preventDefault(); navigate(to); setMobileOpen(false); }}
                style={{
                  padding: '0.875rem 1rem', fontSize: '1.125rem', fontWeight: 500,
                  color: isActive(to) ? 'var(--color-brand-400)' : 'var(--color-text)',
                  borderRadius: 'var(--radius-md)', textDecoration: 'none',
                  borderBottom: '1px solid var(--color-border)',
                }}
              >
                {label}
              </a>
            ))}
          </div>
          <div style={{ marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
            <Btn variant="secondary" size="lg" href="https://github.com/karnati-praveen/VELA">
              <IcoGithub size={16} /> View on GitHub
            </Btn>
            {user ? (
              <button onClick={() => { signOut(); setMobileOpen(false); }} className="btn btn-primary btn-lg" style={{ cursor: 'pointer' }}>Log out ({user.displayName || 'User'})</button>
            ) : (
              <button onClick={() => { signIn(); setMobileOpen(false); }} className="btn btn-primary btn-lg" style={{ cursor: 'pointer' }}>Log in</button>
            )}
          </div>
        </div>
      )}
    </>
  );
}

const FOOTER_COLS = [
  {
    heading: 'Product',
    links: [
      { label: 'Features',     to: '/features' },
      { label: 'Integrations', to: '/integrations' },
      { label: 'Changelog',    to: '/blog' },
      { label: 'Security',     to: '/security' },
    ],
  },
  {
    heading: 'Developers',
    links: [
      { label: 'Documentation', to: '/docs' },
      { label: 'GitHub',        href: 'https://github.com/karnati-praveen/VELA' },
      { label: 'PyPI (vela-agent)', href: 'https://pypi.org/project/vela-agent' },
      { label: 'crates.io',     href: 'https://crates.io/crates/vela-engine' },
    ],
  },
  {
    heading: 'Company',
    links: [
      { label: 'About',         to: '/about' },
      { label: 'Blog',          to: '/blog' },
      { label: 'Privacy Policy', to: '/privacy' },
      { label: 'Terms',          to: '/terms' },
      { label: 'Contact',       href: 'mailto:team@getvela.io' },
    ],
  },
];

function Footer() {
  return (
    <footer style={{
      borderTop: '1px solid var(--color-border)',
      background: 'var(--color-surface)',
      padding: '4rem 0 2rem',
      marginTop: '0',
    }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: '3rem', marginBottom: '3rem' }}>
          {/* Brand col */}
          <div style={{ gridColumn: 'span 1' }}>
            <Logo />
            <p style={{ color: 'var(--color-muted)', fontSize: '0.875rem', marginTop: '0.75rem', lineHeight: '1.6', maxWidth: '200px' }}>
              The execution layer every AI agent deserves.
            </p>
            <div style={{ display: 'flex', gap: '0.75rem', marginTop: '1rem' }}>
              {[
                { icon: <IcoGithub size={16} />, href: 'https://github.com/karnati-praveen/VELA', label: 'GitHub' },
                { icon: <IcoGlobe size={16} />, href: 'https://twitter.com/getvelaio', label: 'Twitter' },
              ].map(({ icon, href, label }) => (
                <a key={label} href={href} target="_blank" rel="noopener noreferrer"
                  aria-label={label}
                  style={{
                    width: '32px', height: '32px', display: 'flex', alignItems: 'center', justifyContent: 'center',
                    borderRadius: 'var(--radius-sm)', border: '1px solid var(--color-border)',
                    color: 'var(--color-muted)', transition: 'color 0.12s, border-color 0.12s',
                  }}
                  onMouseEnter={e => { e.currentTarget.style.color = 'var(--color-text)'; e.currentTarget.style.borderColor = 'var(--color-border-hover)'; }}
                  onMouseLeave={e => { e.currentTarget.style.color = 'var(--color-muted)'; e.currentTarget.style.borderColor = 'var(--color-border)'; }}
                >
                  {icon}
                </a>
              ))}
            </div>
            <div style={{ marginTop: '1rem' }}>
              <span className="badge badge-muted" style={{ fontSize: '0.7rem' }}>MIT License</span>
            </div>
          </div>

          {/* Link cols */}
          {FOOTER_COLS.map(({ heading, links }) => (
            <div key={heading}>
              <div style={{ fontSize: '0.75rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.07em', color: 'var(--color-text)', marginBottom: '1rem' }}>
                {heading}
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
                {links.map(({ label, to, href }) => (
                  to ? (
                    <a key={label} href={to}
                      onClick={(e) => { e.preventDefault(); navigate(to); }}
                      style={{ fontSize: '0.875rem', color: 'var(--color-muted)', textDecoration: 'none', transition: 'color 0.12s' }}
                      onMouseEnter={e => e.target.style.color = 'var(--color-text)'}
                      onMouseLeave={e => e.target.style.color = 'var(--color-muted)'}
                    >{label}</a>
                  ) : (
                    <a key={label} href={href} target={href?.startsWith('http') ? '_blank' : undefined}
                      rel="noopener noreferrer"
                      style={{ fontSize: '0.875rem', color: 'var(--color-muted)', textDecoration: 'none', transition: 'color 0.12s' }}
                      onMouseEnter={e => e.target.style.color = 'var(--color-text)'}
                      onMouseLeave={e => e.target.style.color = 'var(--color-muted)'}
                    >{label}</a>
                  )
                ))}
              </div>
            </div>
          ))}
        </div>

        <Divider />
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: '1.5rem', flexWrap: 'wrap', gap: '0.5rem' }}>
          <span style={{ fontSize: '0.8125rem', color: 'var(--color-muted)' }}>© 2026 Vela. Open source under MIT License.</span>
          <span style={{ fontSize: '0.8125rem', color: 'var(--color-muted)' }}>Built with Rust 🦀</span>
        </div>
      </div>
    </footer>
  );
}

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