'use client';

import { motion } from 'framer-motion';

export default function Header() {
  return (
    <motion.header
      className="fixed top-0 left-0 right-0 z-50 bg-gray-900/80 backdrop-blur-md border-b border-gray-800"
      initial={{ y: -100 }}
      animate={{ y: 0 }}
      transition={{ duration: 0.5 }}
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
        <motion.div
          className="flex flex-col items-start sm:items-center"
          whileHover={{ scale: 1.03 }}
        >
          <span className="text-xl sm:text-2xl font-bold gradient-text">
            新日本テクノソリューションズ株式会社
          </span>
          <span className="text-base sm:text-lg font-semibold text-gray-300 mt-1">
            New Japan Techno Solutions Inc.
          </span>
        </motion.div>
        <nav className="hidden md:flex gap-8">
          <a href="#about" className="text-gray-300 hover:text-white transition-colors">
            について
          </a>
          <a href="#expertise" className="text-gray-300 hover:text-white transition-colors">
            実績
          </a>
          <a href="#technology" className="text-gray-300 hover:text-white transition-colors">
            技術
          </a>
          <a href="#contact" className="text-gray-300 hover:text-white transition-colors">
            お問い合わせ
          </a>
        </nav>
        <button className="px-6 py-2 bg-blue-500 hover:bg-blue-600 rounded-lg font-semibold transition-colors text-sm">
          Contact
        </button>
      </div>
    </motion.header>
  );
}