"use client";
import React from 'react';
import { motion } from 'framer-motion';

const companyLinks = [
  { text: "About", url: "/about" },
  { text: "Careers", url: "/careers" },
  { text: "Blogs", url: "/blogs" },
  { text: "Status", url: "/status" },
  { text: "Privacy", url: "/privacy" },
  { text: "Partner with us", url: "/partner" }
];

const communicationLinks = [
  { text: "Book Discovery Call", url: "/book-call" },
  { text: "Science Behind Everything", url: "/science" }
];

const communityLinks = [
  { text: "Customer Stories", url: "/customer-stories" },
  { text: "Community", url: "/community" },
  { text: "Support", url: "/support" },
  { text: "Reports", url: "/reports" }
];

const learnLinks = [
  { text: "Webinars", url: "/webinars" },
  { text: "Leadership", url: "/leadership" },
  { text: "Demo", url: "/demo" },
  { text: "Videos", url: "/videos" },
  { text: "Guides", url: "/guides" },
  { text: "Articles", url: "/articles" },
  { text: "eBooks", url: "/ebooks" },
  { text: "Quick Reads", url: "/quick-reads" }
];

const solutionsLinks = [
  { text: "Popular Solutions", url: "/solutions/popular" },
  { text: "Marketing", url: "/solutions/marketing" },
  { text: "Product", url: "/solutions/product" },
  { text: "Human Resources", url: "/solutions/hr" },
  { text: "Sales", url: "/solutions/sales" },
  { text: "Operations", url: "/solutions/operations" },
  { text: "Finance", url: "/solutions/finance" },
  { text: "Content", url: "/solutions/content" }
];

export default function Footer() {
  return (
    <div>
      {/* Top Section */}
      <div className='bg-black text-white px-10 md:px-40 py-10 md:py-20 flex items-center justify-between'>
        <h1 className='text-5xl'>Let's get Started</h1>
        <button className='px-6 py-4 rounded-2xl border hover:bg-white hover:text-black'>
          Get 14 Days Free
        </button>
      </div>

      {/* Middle Section with Lists */}
      <div className='px-10 md:px-40 pt-20'>
        <div className='grid grid-cols-1 md:grid-cols-5 gap-10'>
          {/* Company List */}
          <div className='space-y-5'>
            <h3 className='text-lg mb-2 text-white'>Company</h3>
            <ul className='text-gray-200 space-y-4'>
              {companyLinks.map((link, index) => (
                <li key={index}>
                  <a href={link.url} className="hover:text-violet-500">{link.text}</a>
                </li>
              ))}
            </ul>
          </div>

          {/* Communication List */}
          <div className='space-y-5'>
            <h3 className='text-lg mb-2 text-white'>Communication</h3>
            <ul className='text-gray-200 space-y-4'>
              {communicationLinks.map((link, index) => (
                <li key={index}>
                  <a href={link.url} className="hover:text-violet-500">{link.text}</a>
                </li>
              ))}
            </ul>
          </div>

          {/* Community List */}
          <div className='space-y-5'>
            <h3 className='text-lg mb-2 text-white'>Community</h3>
            <ul className='text-gray-200 space-y-4'>
              {communityLinks.map((link, index) => (
                <li key={index}>
                  <a href={link.url} className="hover:text-violet-500">{link.text}</a>
                </li>
              ))}
            </ul>
          </div>

          {/* Learn List */}
          <div className='space-y-5'>
            <h3 className='text-lg mb-2 text-white'>Learn</h3>
            <ul className='text-gray-200 space-y-4'>
              {learnLinks.map((link, index) => (
                <li key={index}>
                  <a href={link.url} className="hover:text-violet-500">{link.text}</a>
                </li>
              ))}
            </ul>
          </div>

          {/* Solutions List */}
          <div className='space-y-5'>
            <h3 className='text-lg mb-2 text-white'>Solutions</h3>
            <ul className='text-gray-200 space-y-4'>
              {solutionsLinks.map((link, index) => (
                <li key={index}>
                  <a href={link.url} className="hover:text-violet-500">{link.text}</a>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>

      {/* Bottom Section with Animated Image */}
      <div className='text-gray-400 px-10 md:px-40 py-20 pt-5 md:pt-10 flex flex-col md:flex-row items-center justify-between'>
        {/* Animated Logo Image */}
        <motion.img
          className="h-20"
          src="https://res.cloudinary.com/dezd109fz/image/upload/v1737306774/Screenshot_2025-01-16_150353_fwgdmz.png"
          alt="Logo"
          initial={{ y: -400, opacity: 0 }} // Start above view and invisible
          whileInView={{
            y: [-200, 0, -50, 0, -20, 0], // Drop and bounce effect
            opacity: 1, // Fade in
          }}
          transition={{
            duration: 1.5,
            ease: "easeInOut",
          }}
        />
        {/* Description Text */}
        <p className='w-full md:w-1/3 text-xs text-center md:text-right'>
          In the new era of technology, we look to the future with certainty and pride for our company and business.
        </p>
      </div>
    </div>
  );
}