import { Link } from 'react-router-dom'
import { Button } from '@/components/ui/button'
import Logo from '@/components/ui/Logo'

const LandingNavigation = () => {
  return (
    <nav className="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-200">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16">
          <Link to="/" className="flex items-center">
            <Logo variant="dark" size="lg" />
          </Link>

          <div className="flex items-center space-x-6">
            <Link
              to="/tyndale"
              className="text-brand-slate hover:text-brand-navy transition-colors font-medium"
            >
              About Tyndale
            </Link>
            <Link to="/chat">
              <Button className="bg-brand-coral hover:bg-brand-coral/90 text-white rounded-xl">
                Start
              </Button>
            </Link>
          </div>
        </div>
      </div>
    </nav>
  )
}

export default LandingNavigation