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

export default function Footer() {
  return (
    <footer className="bg-gray-900 text-gray-300 pt-16 pb-8">
      <div className="container mx-auto px-4 md:px-6">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 mb-12">
          <div className="lg:col-span-2">
            <h3 className="text-2xl font-bold text-white mb-4">AliSurvey</h3>
            <p className="text-gray-400 mb-6 max-w-md">
              ドラッグ＆ドロップで簡単にアンケートを作成。リアルタイムで結果を分析できる<b>無料</b>SaaSプラットフォームです。
            </p>
            <div className="flex space-x-4">
              <a target='_blank' href="https://x.com/AlicornsC54803" className="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-blue-600 transition-colors">
                <i className="fa-brands fa-x-twitter"></i>
              </a>
              <a href="#" className="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-blue-700 transition-colors">
                <i className="fa-brands fa-facebook"></i>
              </a>
              <a href="#" className="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-pink-600 transition-colors">
                <i className="fa-brands fa-instagram"></i>
              </a>
              <a href="#" className="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-gray-700 transition-colors">
                <i className="fa-brands fa-linkedin"></i>
              </a>
            </div>
          </div>
          <div>
            <h4 className="text-lg font-semibold text-white mb-4">製品</h4>
            <ul className="space-y-2">
              <li><a href="/alisurvey#features" className="text-gray-400 hover:text-white transition-colors">特徴</a></li>
              {/* <li><span className="text-gray-400 hover:text-white transition-colors">価格</span></li>
              <li><span className="text-gray-400 hover:text-white transition-colors">更新履歴</span></li> */}
            </ul>
          </div>
          <div>
            <h4 className="text-lg font-semibold text-white mb-4">サポート</h4>
            <ul className="space-y-2">
              {/* <li><span className="text-gray-400 hover:text-white transition-colors">ヘルプセンター</span></li>
              <li><span className="text-gray-400 hover:text-white transition-colors">チュートリアル</span></li> */}
              <li><a href="/contact/?subject=-%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-400 hover:text-white transition-colors">お問い合わせ</a></li>
            </ul>
          </div>
          <div>
            <h4 className="text-lg font-semibold text-white mb-4">会社</h4>
            <ul className="space-y-2">
              <li><a href="/" className="text-gray-400 hover:text-white transition-colors">会社概要</a></li>
              <li><a href="/privacy-policy" className="text-gray-400 hover:text-white transition-colors">プライバシーポリシー</a></li>
              {/* <li><span href="#" className="text-gray-400 hover:text-white transition-colors">利用規約</span></li> */}
            </ul>
          </div>
        </div>

        <div className="border-t border-gray-800 pt-8">
          <div className="flex flex-col md:flex-row justify-between items-center">
            <p className="text-gray-500 text-sm mb-4 md:mb-0">
              &copy; 2025 Alicorn Co., Ltd. 全著作権所有.
            </p>

            {/* <div className="flex gap-6">
              <span href="#" className="text-gray-500 hover:text-gray-300 text-sm">利用規約</span>
              <a href="/privacy-policy" className="text-gray-500 hover:text-gray-300 text-sm">プライバシーポリシー</a>
              <a href="#" className="text-gray-500 hover:text-gray-300 text-sm">Cookie設定</a>
              <a href="#" className="text-gray-500 hover:text-gray-300 text-sm">サポート</a>
            </div> */}
          </div>
        </div>
      </div>
    </footer>
  );
}