'use client';

import Link from 'next/link';
import { useState } from 'react';

export default function Footer() {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [email, setEmail] = useState('');

  const handleNewsletterSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // Handle newsletter signup
    console.log('Newsletter signup:', { firstName, lastName, email });
  };

  return (
    <footer className="bg-white">
      {/* Newsletter Section */}
      <div className="bg-gray-50 py-16">
        <div className="container mx-auto px-4">
          <div className="max-w-2xl mx-auto text-center">
            <h3 className="text-2xl md:text-3xl font-tomato font-bold text-rise-dark mb-4">
              Weekly newsletter
            </h3>
            <p className="text-gray-600 font-work mb-8">
              Sign up for our weekly newsletter for fun, finance and more
            </p>

            <form onSubmit={handleNewsletterSubmit} className="space-y-4 max-w-lg mx-auto">
              <div className="grid grid-cols-2 gap-4">
                <input
                  type="text"
                  placeholder="First name"
                  value={firstName}
                  onChange={(e) => setFirstName(e.target.value)}
                  className="px-4 py-3 border border-gray-200 rounded-lg font-work"
                />
                <input
                  type="text"
                  placeholder="Last name"
                  value={lastName}
                  onChange={(e) => setLastName(e.target.value)}
                  className="px-4 py-3 border border-gray-200 rounded-lg font-work"
                />
              </div>
              <div className="flex gap-2">
                <input
                  type="email"
                  placeholder="Email address"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className="flex-1 px-4 py-3 border border-gray-200 rounded-lg font-work"
                />
                <button
                  type="submit"
                  className="bg-rise-teal text-white px-6 py-3 rounded-lg hover:bg-foreground transition-colors font-work font-medium"
                >
                  →
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>

      {/* Main Footer */}
      <div className="py-16">
        <div className="container mx-auto px-4">
          <div className="grid md:grid-cols-4 gap-8 mb-12">
            {/* Company */}
            <div>
              <h4 className="text-lg font-tomato font-bold text-rise-dark mb-4 uppercase">
                company
              </h4>
              <ul className="space-y-3">
                <li>
                  <Link href="/about" className="text-gray-600 hover:text-rise-teal font-work text-sm">
                    About Us
                  </Link>
                </li>
                <li>
                  <Link href="/faq" className="text-gray-600 hover:text-rise-teal font-work text-sm">
                    FAQs
                  </Link>
                </li>
              </ul>
            </div>

            {/* Explore */}
            <div>
              <h4 className="text-lg font-tomato font-bold text-rise-dark mb-4 uppercase">
                explore
              </h4>
              <ul className="space-y-3">
                <li>
                  <Link href="/why-euphoria" className="text-gray-600 hover:text-rise-teal font-work text-sm">
                    Why Euphoria 5
                  </Link>
                </li>
                
                <li>
                  <Link href="/reviews.html" className="text-gray-600 hover:text-rise-teal font-work text-sm">
                    Reviews
                  </Link>
                </li>
                
               
              </ul>
            </div>

            {/* Legal */}
            {/* <div>
              <h4 className="text-lg font-tomato font-bold text-rise-dark mb-4 uppercase">
                legal
              </h4>
              <ul className="space-y-3">
                <li>
                  <Link href="/privacy-policy" className="text-gray-600 hover:text-rise-teal font-work text-sm">
                    Privacy Policy
                  </Link>
                </li>
                <li>
                  <Link href="/terms-of-use" className="text-gray-600 hover:text-rise-teal font-work text-sm">
                    Terms & Conditions
                  </Link>
                </li>
                <li>
                  <Link href="/disclosure" className="text-gray-600 hover:text-rise-teal font-work text-sm">
                    Disclosure
                  </Link>
                </li>
              </ul>
            </div> */}

            {/* Contact */}
            <div>
              <h4 className="text-lg font-tomato font-bold text-rise-dark mb-4 uppercase">
                contact us
              </h4>
              <ul className="space-y-3">
                {/* <li>
                  <Link href="tel:070022557473" className="text-gray-600 hover:text-rise-teal font-work text-sm">
                    0700 2255 7473
                  </Link>
                </li> */}
                <li>
                  <Link href="mailto:support@euphoria5.com" className="text-gray-600 hover:text-rise-teal font-work text-sm">
                    support@euphoria5.com
                  </Link>
                </li>
              </ul>
            </div>
          </div>

          {/* Bottom Section */}
          <div className="border-t border-gray-200 pt-8">
            <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
              {/* Left Side */}
              <div className="flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-8">
                <div className="text-center md:text-left">
                  <p className="text-lg font-tomato font-bold text-rise-dark mb-2">
                    Global dollar investments made simple.
                  </p>
                  <div className="flex items-center space-x-4">
                    <Link href="#">
                      <img
                        src="/gdpr.png"
                        alt="NDPR Compliant"
                        className="h-8"
                      />
                    </Link>
                    <span className="text-sm text-gray-500 font-work">
                      GDPR Data Compliant, 2025.
                    </span>
                  </div>
                </div>

                <Link
                  href="/register"
                  className="bg-rise-teal text-white px-6 py-3 rounded-lg hover:bg-foreground transition-colors font-work text-sm font-medium"
                >
                  Start Investing
                </Link>
              </div>

              {/* Right Side - Social Links */}
              <div className="flex items-center space-x-4">
                <Link href="https://linkedin.com/" className="text-gray-400 hover:text-rise-teal">
                  <span className="sr-only">LinkedIn</span>
                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z" clipRule="evenodd" />
                  </svg>
                </Link>
                <Link href="https://twitter.com/" className="text-gray-400 hover:text-rise-teal">
                  <span className="sr-only">Twitter</span>
                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84" />
                  </svg>
                </Link>
                <Link href="https://instagram.com/" className="text-gray-400 hover:text-rise-teal">
                  <span className="sr-only">Instagram</span>
                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clipRule="evenodd" />
                  </svg>
                </Link>
              </div>
            </div>

            <div className="text-center mt-8">
              <p className="text-sm text-gray-500 font-work">
                2025 Euphoria 5. All rights reserved.
              </p>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}
