import { useState } from 'react';
import { cn } from '@/lib/utils';

interface HeaderProps {
  isScrolled: boolean;
}

export default function Header({ isScrolled }: HeaderProps) {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  
  return (
    <header 
      className={cn(
        "fixed w-full z-50 transition-all duration-300",
        isScrolled 
          ? "bg-white shadow-md py-3" 
          : "bg-transparent py-5"
      )}
    >
      <div className="container mx-auto px-4 md:px-8">
        <div className="flex justify-between items-center">
          {/* ロゴ */}
          <div className="flex items-center space-x-2">
            <div className="w-8 h-8 bg-gradient-to-r from-blue-500 to-indigo-500 rounded-lg flex items-center justify-center">
              <span className="text-white font-bold text-sm">A</span>
            </div>
            <h1 className="text-xl font-bold text-blue-600">AliSurvey</h1>
            <span className="pt-1 text-gray-500 text-xs">アンケートシステム</span>
          </div>
          
          {/* デスクトップナビゲーション */}
          <nav className="hidden md:flex items-center space-x-8">
            <a href="#features" className="text-gray-700 hover:text-blue-600 transition-colors">特徴</a>
            <a href="#details" className="text-gray-700 hover:text-blue-600 transition-colors">機能</a>
            {/* <a href="#pricing" className="text-gray-700 hover:text-blue-600 transition-colors">価格</a>
            <a href="#testimonials" className="text-gray-700 hover:text-blue-600 transition-colors">顧客の声</a> */}
            <a href="/contact/?subject=AliSurvey-%E3%82%A2%E3%83%B3%E3%82%B1%E3%83%BC%E3%83%88%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0" className="text-gray-700 hover:text-blue-600 transition-colors">お問い合わせ</a>
            <a href="https://alisurvey.alicorns.co.jp" target='_blank' className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition-colors">
              無料で始める
            </a>
          </nav>
          
          {/* モバイルメニューボタン */}
          <button 
            className="md:hidden text-gray-700"
            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
          >
            <i className="fa-solid fa-bars text-xl"></i>
          </button>
        </div>
      </div>
      
      {/* モバイルメニュー */}
      {mobileMenuOpen && (
        <div className="md:hidden bg-white shadow-lg absolute w-full">
          <div className="container mx-auto px-4 py-4 flex flex-col space-y-4">
            <a 
              href="#features" 
              className="text-gray-700 hover:text-blue-600 py-2 transition-colors"
              onClick={() => setMobileMenuOpen(false)}
            >
              特徴
            </a>
            <a 
              href="#details" 
              className="text-gray-700 hover:text-blue-600 py-2 transition-colors"
              onClick={() => setMobileMenuOpen(false)}
            >
              機能
            </a>
            {/* <a 
              href="#pricing" 
              className="text-gray-700 hover:text-blue-600 py-2 transition-colors"
              onClick={() => setMobileMenuOpen(false)}
            >
              価格
            </a>
            <a 
              href="#testimonials" 
              className="text-gray-700 hover:text-blue-600 py-2 transition-colors"
              onClick={() => setMobileMenuOpen(false)}
            >
              顧客の声
            </a> */}
            <a 
              href="/contact/?subject=AliSurvey-%E3%82%A2%E3%83%B3%E3%82%B1%E3%83%BC%E3%83%88%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0" 
              className="text-gray-700 hover:text-blue-600 py-2 transition-colors"
              onClick={() => setMobileMenuOpen(false)}
            >
              お問い合わせ
            </a>
            <a href="https://alisurvey.alicorns.co.jp" target='_blank' className="text-center bg-blue-600 hover:bg-blue-700  text-white px-6 py-2 rounded-lg transition-colors">
              無料で始める
            </a>
          </div>
        </div>
      )}
    </header>
  );
}