"use client";

import { useState } from "react";
import Image from "next/image";
import {
  socialLinksData,
  footerLinksData,
  type SocialLink,
} from "@/data/footer";
import ScrollTopButton from "./ScrollToTop";

export default function Footer() {
  const [email, setEmail] = useState("");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setEmail("");
  };

  return (
    <footer className="footer-style1">
      <ScrollTopButton />

      <div className="widget-area">
        <div className="carousel-container">
          <div className="row">
            <div className="col-lg-4 col-md-6 col-sm-8">
              <div
                className="footer-widget about-widget"
                data-aos="fade-right"
                data-aos-duration="900"
                data-aos-delay="100"
              >
                <div className="footer-logo">
                  <Image
                    src="/assets/images/logo.svg"
                    alt="Sasico SaaS Footer Logo Light Version"
                    width={120}
                    height={40}
                    loading="eager"
                  />
                </div>
                <p>
                  SaaS platform is built to simplify your workflow, automate
                  everyday tasks help team
                </p>
                <ul className="social-links">
                  {socialLinksData.map((social: SocialLink, index) => (
                    <li key={index}>
                      <a href="#" title={social.name}>
                        <Image
                          src={social.icon}
                          alt={`${social.name} Icon`}
                          width={social.width}
                          height={social.height}
                          loading="eager"
                        />
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
            </div>

            <div className="col-lg-8">
              <div className="widget-info">
                <div className="row">
                  {Object.entries(footerLinksData).map(
                    ([category, links], categoryIndex) => (
                      <div
                        key={category}
                        className="col-lg-3 col-md-3 col-sm-4"
                      >
                        <div
                          className="footer-widget link-widgets"
                          data-aos="fade-right"
                          data-aos-duration="900"
                          data-aos-delay={200 + categoryIndex * 100}
                        >
                          <h2 className="link-title">{category}</h2>
                          <ul className="footer-links">
                            {links.map((link, linkIndex) => (
                              <li key={linkIndex}>
                                <a href="#" title="">
                                  {link}
                                </a>
                              </li>
                            ))}
                          </ul>
                        </div>
                      </div>
                    ),
                  )}
                </div>
              </div>
            </div>
          </div>

          <div className="row">
            <div className="col-lg-6">
              <div
                className="footer-content"
                data-aos="fade-up"
                data-aos-duration="900"
                data-aos-delay="300"
              >
                <h2 className="title">Ready to transform your business?</h2>
              </div>
            </div>
            <div className="col-lg-6">
              <form
                className="footer-form"
                data-aos="fade-up"
                data-aos-duration="900"
                data-aos-delay="400"
                onSubmit={handleSubmit}
              >
                <div className="form-group">
                  <input
                    type="text"
                    placeholder="your email address"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                  />
                  <button type="submit" className="btn-style1">
                    Subscribe
                    <span>
                      <Image
                        src="/assets/images/icon/arrow.svg"
                        alt="Arrow Icon"
                        width={16}
                        height={16}
                        loading="eager"
                      />
                    </span>
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>

      <div className="footer-box">
        <div className="carousel-container">
          <div
            className="footer-bottom"
            data-aos="fade-up"
            data-aos-duration="900"
            data-aos-delay="300"
          >
            <p>Sasico,{new Date().getFullYear()} © All rights reserved</p>
            <ul
              className="terms-list"
              data-aos="fade-up"
              data-aos-duration="900"
              data-aos-delay="400"
            >
              <li>
                <a href="#" title="">
                  Terms & Conditions
                </a>
              </li>
              <li>
                <a href="#" title="">
                  Privacy Policy
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </footer>
  );
}