import { Outlet, NavLink } from 'react-router-dom';
import { Clapperboard } from 'lucide-react';

export function TopNavFooter() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100dvh' }}>
      <header
        style={{
          height: 52,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          padding: '0 1.5rem',
          borderBottom: '1px solid var(--d-border)',
          background: 'rgba(10, 10, 10, 0.85)',
          backdropFilter: 'blur(8px)',
          position: 'sticky',
          top: 0,
          zIndex: 50,
        }}
      >
        <NavLink
          to="/"
          style={{
            display: 'inline-flex',
            alignItems: 'center',
            gap: '0.5rem',
            color: 'var(--d-text)',
            textDecoration: 'none',
            fontWeight: 700,
            fontSize: '0.9rem',
          }}
        >
          <Clapperboard size={18} style={{ color: 'var(--d-primary)' }} />
          <span style={{ fontFamily: "'Playfair Display', serif", letterSpacing: '0.04em' }}>AI Video Studio</span>
        </NavLink>
        <nav style={{ display: 'flex', alignItems: 'center', gap: '1.5rem', fontSize: '0.85rem' }}>
          <a href="#features" style={{ color: 'var(--d-text-muted)', textDecoration: 'none' }}>Features</a>
          <a href="#workflow" style={{ color: 'var(--d-text-muted)', textDecoration: 'none' }}>Workflow</a>
          <a href="#pricing" style={{ color: 'var(--d-text-muted)', textDecoration: 'none' }}>Pricing</a>
          <NavLink to="/login" className="d-interactive" data-variant="ghost" style={{ padding: '6px 12px', fontSize: '0.8rem' }}>
            Sign in
          </NavLink>
          <NavLink to="/register" className="d-interactive" data-variant="primary" style={{ padding: '6px 14px', fontSize: '0.8rem' }}>
            Start directing
          </NavLink>
        </nav>
      </header>
      <main style={{ flex: 1 }}>
        <Outlet />
      </main>
      <footer
        style={{
          borderTop: '1px solid var(--d-border)',
          padding: '2rem 1.5rem',
          display: 'flex',
          justifyContent: 'space-between',
          fontSize: '0.8rem',
          color: 'var(--d-text-muted)',
          fontFamily: "'JetBrains Mono', monospace",
          marginTop: 'auto',
        }}
      >
        <div>&copy; 2026 AI Video Studio &mdash; Direct the future of video</div>
        <div style={{ display: 'flex', gap: '1.25rem' }}>
          <a href="#docs" style={{ color: 'inherit', textDecoration: 'none' }}>Docs</a>
          <a href="#changelog" style={{ color: 'inherit', textDecoration: 'none' }}>Changelog</a>
          <a href="#status" style={{ color: 'inherit', textDecoration: 'none' }}>Status</a>
          <a href="#privacy" style={{ color: 'inherit', textDecoration: 'none' }}>Privacy</a>
        </div>
      </footer>
    </div>
  );
}
