'use client';

import React from 'react';
import { Layout, Row, Col, Space, Typography, Divider, Button as AntButton } from 'antd';
import { motion } from 'framer-motion';
import { 
  TwitterIcon, 
  LinkedinIcon, 
  GithubIcon, 
  MailIcon,
  ArrowUpIcon 
} from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { fadeInUp, staggerContainer } from '@/utils/animations';

const { Footer: AntFooter } = Layout;
const { Title, Text, Link } = Typography;

interface FooterSection {
  title: string;
  links: Array<{
    label: string;
    href: string;
    external?: boolean;
  }>;
}

const footerSections: FooterSection[] = [
  {
    title: 'Platform',
    links: [
      { label: 'WHOOSH', href: '/components/whoosh' },
      { label: 'BZZZ', href: '/components/bzzz' },
      { label: 'SLURP', href: '/components/slurp' },
      { label: 'COOEE + Monitoring', href: '/components/cooee' },
    ],
  },
  {
    title: 'Solutions',
    links: [
      { label: 'Enterprise', href: '/solutions/enterprise' },
      { label: 'Startups', href: '/solutions/startups' },
      { label: 'Developers', href: '/solutions/developers' },
      { label: 'Integration', href: '/solutions/integration' },
    ],
  },
  {
    title: 'Resources',
    links: [
      { label: 'Documentation', href: '/docs' },
      { label: 'API Reference', href: '/docs/api' },
      { label: 'Tutorials', href: '/tutorials' },
      { label: 'Community', href: '/community' },
    ],
  },
  {
    title: 'Company',
    links: [
      { label: 'About', href: '/about' },
      { label: 'Blog', href: '/blog' },
      { label: 'Careers', href: '/careers' },
      { label: 'Contact', href: '/contact' },
    ],
  },
];

const socialLinks = [
  { icon: TwitterIcon, href: 'https://twitter.com/chorusservices', label: 'Twitter' },
  { icon: LinkedinIcon, href: 'https://linkedin.com/company/chorusservices', label: 'LinkedIn' },
  { icon: GithubIcon, href: 'https://github.com/chorusservices', label: 'GitHub' },
  { icon: MailIcon, href: 'mailto:hello@chorus.services', label: 'Email' },
];

export const Footer: React.FC = () => {
  const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  return (
    <AntFooter className="bg-chorus-charcoal-dark border-t border-gray-800 py-16">
      <div className="max-w-7xl mx-auto px-6">
        <motion.div
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-100px" }}
          variants={staggerContainer}
        >
          {/* Main Footer Content */}
          <Row gutter={[48, 48]} className="mb-12">
            {/* Brand Section */}
            <Col xs={24} lg={8}>
              <motion.div variants={fadeInUp}>
                <Space direction="vertical" size="large" className="w-full">
                  {/* Logo */}
                  <div className="flex items-center space-x-3">
                    <div className="w-12 h-12 bg-gradient-chorus rounded-xl flex items-center justify-center">
                      <span className="text-white font-bold text-xl">C</span>
                    </div>
                    <Title level={3} className="text-white mb-0">
                      <span className="exo-logotype">CHORUS</span> Services
                    </Title>
                  </div>
                  
                  {/* Description */}
                  <Text className="text-gray-300 text-base leading-relaxed">
                    Orchestrate the future with distributed AI. 
                    CHORUS Services provides intelligent automation 
                    through seamless component integration.
                  </Text>
                  
                  {/* Social Links */}
                  <Space size="middle">
                    {socialLinks.map((social, index) => (
                      <motion.a
                        key={social.label}
                        href={social.href}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="p-2 text-gray-400 hover:text-chorus-blue transition-colors duration-200 rounded-lg hover:bg-white/5"
                        whileHover={{ scale: 1.1 }}
                        whileTap={{ scale: 0.95 }}
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ delay: 0.6 + index * 0.1 }}
                      >
                        <social.icon size={20} />
                        <span className="sr-only">{social.label}</span>
                      </motion.a>
                    ))}
                  </Space>
                </Space>
              </motion.div>
            </Col>

            {/* Footer Links */}
            {footerSections.map((section, sectionIndex) => (
              <Col xs={12} sm={6} lg={4} key={section.title}>
                <motion.div
                  variants={fadeInUp}
                  custom={sectionIndex}
                >
                  <Space direction="vertical" size="middle" className="w-full">
                    <Title level={5} className="text-white mb-0">
                      {section.title}
                    </Title>
                    <div className="space-y-3">
                      {section.links.map((link) => (
                        <div key={link.label}>
                          <Link
                            href={link.href}
                            target={link.external ? '_blank' : undefined}
                            rel={link.external ? 'noopener noreferrer' : undefined}
                            className="text-gray-400 hover:text-chorus-blue transition-colors duration-200 text-sm block"
                          >
                            {link.label}
                          </Link>
                        </div>
                      ))}
                    </div>
                  </Space>
                </motion.div>
              </Col>
            ))}
          </Row>

          {/* Newsletter Signup */}
          <motion.div variants={fadeInUp} className="mb-12">
            <div className="glass-effect rounded-2xl p-8">
              <Row gutter={[24, 24]} align="middle">
                <Col xs={24} md={16}>
                  <Space direction="vertical" size="small">
                    <Title level={4} className="text-white mb-0">
                      Stay Updated
                    </Title>
                    <Text className="text-gray-300">
                      Get the latest updates on CHORUS Services and AI orchestration.
                    </Text>
                  </Space>
                </Col>
                <Col xs={24} md={8}>
                  <Space.Compact className="w-full">
                    <input
                      type="email"
                      placeholder="Enter your email"
                      className="flex-1 px-4 py-3 bg-chorus-charcoal border border-gray-700 rounded-l-lg text-white placeholder-gray-400 focus:outline-none focus:border-chorus-blue transition-colors"
                    />
                    <AntButton type="primary" className="rounded-l-none">
                      Subscribe
                    </AntButton>
                  </Space.Compact>
                </Col>
              </Row>
            </div>
          </motion.div>

          <Divider className="border-gray-800" />

          {/* Bottom Footer */}
          <motion.div variants={fadeInUp}>
            <Row justify="space-between" align="middle" className="flex-wrap">
              <Col xs={24} md={12} className="text-center md:text-left mb-4 md:mb-0">
                <Text className="text-gray-400 text-sm">
                  © {new Date().getFullYear()} CHORUS Services. All rights reserved.
                </Text>
              </Col>
              <Col xs={24} md={12} className="text-center md:text-right">
                <Space split={<span className="text-gray-600">•</span>} size="middle">
                  <Link href="/privacy" className="text-gray-400 hover:text-white text-sm">
                    Privacy Policy
                  </Link>
                  <Link href="/terms" className="text-gray-400 hover:text-white text-sm">
                    Terms of Service
                  </Link>
                  <Link href="/cookies" className="text-gray-400 hover:text-white text-sm">
                    Cookies
                  </Link>
                </Space>
              </Col>
            </Row>
          </motion.div>
        </motion.div>

        {/* Scroll to Top Button */}
        <motion.div
          className="fixed bottom-8 right-8 z-40"
          initial={{ opacity: 0, scale: 0 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ delay: 1 }}
        >
          <AntButton
            type="primary"
            shape="circle"
            size="large"
            icon={<ArrowUpIcon size={20} />}
            onClick={scrollToTop}
            className="shadow-lg hover:shadow-xl"
          />
        </motion.div>
      </div>
    </AntFooter>
  );
};

export default Footer;