'use client'

import Link from 'next/link'
import { useState, useEffect } from 'react'
import ThreeLogo from './ThreeLogo'
import ThemeToggle from './ThemeToggle'

export default function BlogHeader() {
  const [isScrolled, setIsScrolled] = useState(false)

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 0)
    }

    window.addEventListener('scroll', handleScroll)
    return () => window.removeEventListener('scroll', handleScroll)
  }, [])

  return (
    <header className={`sticky top-0 z-50 transition-all duration-300 ${
      isScrolled 
        ? 'bg-white/80 dark:bg-mulberry-950/80 backdrop-blur-md border-b border-carbon-200/50 dark:border-carbon-800/50' 
        : 'bg-white/20 dark:bg-mulberry-950/20 backdrop-blur-sm'
    }`}>
      <nav className="blog-container py-chorus-lg">
        {/* Traditional Newspaper Masthead Layout */}
        <div className="flex flex-col items-center space-y-4">
          {/* Logo Group - Centered */}
          <Link href="/" className="flex items-center space-x-4 group">
            <div className="w-16 h-16 group-hover:scale-110 transition-transform">
              <ThreeLogo className="w-full h-full" />
            </div>
            <div className="flex flex-col">
              <span className="font-logo font-thin text-3xl leading-none text-carbon-900 dark:text-carbon-100 text-center">CHORUS</span>
              <span className="text-carbon-600 dark:text-carbon-500 text-sm font-bold tracking-wider text-left">PING!</span>
            </div>
          </Link>

          {/* Navigation Bar - Below Logo */}
          <div className="flex items-center justify-center space-x-8 border-t border-b border-carbon-200 dark:border-carbon-800 py-3 w-full max-w-2xl">
            <Link 
              href="https://chorus.services" 
              className="text-carbon-600 dark:text-carbon-300 hover:text-carbon-900 dark:hover:text-carbon-100 transition-colors font-medium text-sm uppercase tracking-wide"
            >
              Home
            </Link>
            <span className="text-carbon-300 dark:text-carbon-700">•</span>
            <Link 
              href="/" 
              className="text-carbon-600 dark:text-carbon-300 hover:text-carbon-900 dark:hover:text-carbon-100 transition-colors font-medium text-sm uppercase tracking-wide"
            >
              All Posts
            </Link>
            <span className="text-carbon-300 dark:text-carbon-700">•</span>
            <div className="flex items-center space-x-4">
              
              <Link
                href="https://chorus.services"
                className="px-3 py-1 bg-carbon-900 dark:bg-mulberry-700 hover:bg-carbon-800 dark:hover:bg-mulberry-600 text-white dark:text-mulberry-100 rounded font-medium transition-colors text-xs uppercase tracking-wide"
              >
                Join Waitlist
              </Link>
              <ThemeToggle />
            </div>
          </div>
        </div>
      </nav>
    </header>
  )
}