'use client';

import { motion } from 'framer-motion';
import Image from 'next/image';

export function Footer() {
  return (
    <footer className="bg-gradient-to-r from-slate-900 via-blue-900 to-slate-900 mt-16 relative overflow-hidden">
      <div className="absolute inset-0 bg-[url('data:image/svg+xml,%3csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='none' fill-rule='evenodd'%3e%3cg fill='%23ffffff' fill-opacity='0.03'%3e%3cpath d='m36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e')] opacity-20"></div>
      <div className="relative max-w-7xl mx-auto px-4 py-12 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
          >
            <div className="flex items-center space-x-3 mb-4">
              <Image
                src="/puffinOffset.webp"
                alt="Puffin Offset Logo"
                width={32}
                height={32}
                className="h-8 w-auto"
              />
              <h3 className="text-xl font-bold text-white">Puffin Offset</h3>
            </div>
            <p className="text-slate-300 leading-relaxed">
              The world&apos;s most exclusive carbon offsetting platform for superyacht owners and operators.
            </p>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            viewport={{ once: true }}
            className="text-center md:text-left"
          >
            <h4 className="text-lg font-semibold text-white mb-4">Services</h4>
            <ul className="space-y-2 text-slate-300">
              <li className="hover:text-yellow-400 transition-colors cursor-pointer">Carbon Calculator</li>
              <li className="hover:text-yellow-400 transition-colors cursor-pointer">Offset Portfolio</li>
              <li className="hover:text-yellow-400 transition-colors cursor-pointer">Fleet Management</li>
              <li className="hover:text-yellow-400 transition-colors cursor-pointer">Custom Solutions</li>
            </ul>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.4 }}
            viewport={{ once: true }}
            className="text-center md:text-left"
          >
            <h4 className="text-lg font-semibold text-white mb-4">Sustainability Partners</h4>
            <p className="text-slate-300 mb-4">
              Powered by verified carbon offset projects through Wren Climate
            </p>
            <div className="text-xs text-slate-400">
              All projects are verified to international standards
            </div>
          </motion.div>
        </div>

        <motion.div
          className="border-t border-slate-700 pt-8 text-center"
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          transition={{ duration: 0.6, delay: 0.6 }}
          viewport={{ once: true }}
        >
          <p className="text-slate-400">
            © 2024 Puffin Offset. Luxury meets sustainability.
          </p>
        </motion.div>
      </div>
    </footer>
  );
}