"use client";

import React from "react";
import { usePathname } from "next/navigation";
import Link from "next/link";
import { motion } from "framer-motion";
import {
  Container,
  Row,
  Col,
  Form,
  Nav,
  Button,
  Stack,
  Spinner,
} from "react-bootstrap";
import { useForm } from "react-hook-form";
import { useToast } from "@/context/ToastContext";
import { useRecaptcha } from "@/hooks/useRecaptcha";
import { LEAD_PAGES } from "@/lib/leadPages";

type FormData = { email: string };

export default function Footer() {
  const { getToken } = useRecaptcha();
  const pathname = usePathname();
  const isLeadPage = LEAD_PAGES.includes(pathname);
  const { showToast } = useToast();
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
    reset,
  } = useForm<FormData>();
  const onSubmit = async (data: FormData) => {
    const recaptchaToken = await getToken("subscribe_form");
    const payload = { ...data, recaptchaToken };
    const res = await fetch("/api/subscribe", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload),
    });

    const result = await res.json();
    if (res.ok) {
      showToast(result.message, "success");
      reset();
    } else {
      showToast(
        result.error || "Something went wrong, Please try again later",
        "danger",
      );
    }
  };

  return (
    <footer className="py-3 py-md-5 position-relative">
      <Container>
        {isLeadPage ? (
          <Row className="align-items-center g-3">
            <Col md={12}>
              <motion.hr
                className="border-2"
                whileInView={{ width: ["0%", "100%"] }}
                transition={{ duration: 1 }}
                viewport={{ once: true, amount: 0.5 }}
              />
            </Col>
            <Col
              md={12}
              className="text-center"
              style={{ paddingBottom: "5rem" }}
            >
              <motion.span
                whileInView={{ scale: [0.5, 2, 1] }}
                transition={{ duration: 1 }}
                viewport={{ once: true, amount: 0.5 }}
              >
                <small>
                  © {new Date().getFullYear()} Vensysco Technologies Limited.
                  All Rights Reserved.
                </small>
              </motion.span>
            </Col>
          </Row>
        ) : (
          <Row className="align-items-center g-3">
            <Col md={6} className="text-center text-md-start">
              <motion.h3>Stay Ahead with Vensysco</motion.h3>
              <motion.p>Get Expert Insights Straight to Your Inbox!</motion.p>
            </Col>
            <Col md={6}>
              <Form
                className="d-flex align-items-center"
                noValidate
                onSubmit={handleSubmit(onSubmit)}
              >
                <motion.div
                  className="flex-fill"
                  whileInView={{ x: [-50, 0] }}
                  transition={{ duration: 1.6 }}
                  viewport={{ once: true, amount: 0.5 }}
                >
                  <Form.Control
                    type="email"
                    placeholder="Email"
                    className="w-100 rounded-pill"
                    {...register("email", {
                      required: "Email is required",
                      pattern: {
                        value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
                        message: "Invalid email format",
                      },
                    })}
                    isInvalid={!!errors.email}
                    aria-label="Email address"
                    aria-describedby="subscribe-description"
                  />
                  <Form.Control.Feedback type="invalid">
                    {errors.email?.message}
                  </Form.Control.Feedback>
                  <small id="subscribe-description" className="visually-hidden">
                    Enter your email address to subscribe to Vensysco updates
                  </small>
                </motion.div>
                <motion.div
                  whileInView={{ scale: [1.5, 1] }}
                  transition={{ duration: 1.8 }}
                  viewport={{ once: true, amount: 0.5 }}
                >
                  <Button
                    type="submit"
                    variant="outline-danger"
                    className="rounded-pill ms-3"
                    disabled={isSubmitting}
                    aria-label="Submit email to subscribe to Vensysco"
                  >
                    {isSubmitting ? (
                      <Stack gap={2} direction="horizontal">
                        <Spinner animation="grow" size="sm" variant="danger" />
                        <Spinner animation="grow" size="sm" variant="primary" />
                        <Spinner animation="grow" size="sm" variant="success" />
                        <span>Subscribing...</span>
                      </Stack>
                    ) : (
                      "Submit"
                    )}
                  </Button>
                </motion.div>
              </Form>
            </Col>
            <Col md={12}>
              <motion.hr
                className="border-2"
                whileInView={{ width: ["0%", "100%"] }}
                transition={{ duration: 2 }}
                viewport={{ once: true, amount: 0.5 }}
              />
            </Col>
            <Col md={3} sm={6} xs={12} className="align-self-start h-100">
              <a href="/">
                <motion.img
                  src="https://media.vensysco.com/logo.webp"
                  alt="vensysco technologies limited company logo"
                  title="vensysco technologies limited company logo"
                  width={497}
                  height={123}
                  className="img-fluid"
                  style={{ maxHeight: "50px", cursor: "pointer" }}
                  whileInView={{ scale: [0.4, 1] }}
                  transition={{ duration: 2 }}
                  viewport={{ once: true, amount: 0.5 }}
                />
              </a>
              <motion.p className="lead my-4">
                Pioneering towards implementation of cutting-edge future
                technologies.
              </motion.p>
              <Stack gap={2} direction="horizontal">
                <motion.a
                  className="icon-box btn btn-outline-danger bg-danger-subtle p-0"
                  href="https://www.linkedin.com/company/vensyscotechnologieslimited/"
                  target="_blank"
                  rel="noopener noreferrer"
                  whileInView={{ x: [50, 0] }}
                  transition={{ duration: 1.4 }}
                  viewport={{ once: true, amount: 0.5 }}
                  aria-label="Visit Vensysco Technologies on Linkedin"
                >
                  <i className="bi bi-linkedin"></i>
                </motion.a>
                <motion.a
                  className="icon-box btn btn-outline-danger bg-danger-subtle p-0"
                  href="https://www.facebook.com/vensyscotechnologieslimited"
                  target="_blank"
                  rel="noopener noreferrer"
                  whileInView={{ x: [60, 0] }}
                  transition={{ duration: 1.5 }}
                  viewport={{ once: true, amount: 0.5 }}
                  aria-label="Visit Vensysco Technologies on Facebook"
                >
                  <i className="bi bi-facebook"></i>
                </motion.a>
                <motion.a
                  className="icon-box btn btn-outline-danger bg-danger-subtle p-0"
                  href="https://x.com/vensysco"
                  target="_blank"
                  rel="noopener noreferrer"
                  whileInView={{ x: [70, 0] }}
                  transition={{ duration: 1.6 }}
                  viewport={{ once: true, amount: 0.5 }}
                  aria-label="Visit Vensysco Technologies on X (Twitter)"
                >
                  <i className="bi bi-twitter-x"></i>
                </motion.a>
                <motion.a
                  className="icon-box btn btn-outline-danger bg-danger-subtle p-0"
                  href="https://www.youtube.com/@vensyscotechnologieslimited"
                  target="_blank"
                  rel="noopener noreferrer"
                  whileInView={{ x: [80, 0] }}
                  transition={{ duration: 1.7 }}
                  viewport={{ once: true, amount: 0.5 }}
                  aria-label="Visit Vensysco Technologies on YouTube"
                >
                  <i className="bi bi-youtube"></i>
                </motion.a>
              </Stack>
            </Col>
            <Col md={3} sm={6} xs={6} className="align-self-start">
              <motion.h3 style={{ fontSize: 25 }}>Quick Links</motion.h3>
              <Nav className="flex-column">
                <Nav.Link
                  as={Link}
                  href="/"
                  active={pathname === "/" || pathname === ""}
                  aria-label="Navigate to Home"
                >
                  Home
                </Nav.Link>
                <Nav.Link
                  as={Link}
                  href="/about"
                  active={pathname === "/about"}
                  aria-label="Navigate to About Us"
                >
                  About Us
                </Nav.Link>
                <Nav.Link
                  as={Link}
                  href="/achievements"
                  active={pathname === "/achievements"}
                  aria-label="Navigate to Achievements"
                >
                  Achievements
                </Nav.Link>
                <Nav.Link
                  as={Link}
                  href="/blog"
                  active={pathname === "/blog"}
                  aria-label="Navigate to Blogs"
                >
                  Blogs
                </Nav.Link>
                <Nav.Link
                  as={Link}
                  href="/career"
                  active={pathname === "/career"}
                  aria-label="Navigate to Career"
                >
                  Career
                </Nav.Link>
                <Nav.Link
                  as={Link}
                  href="/contact-us"
                  active={pathname === "/contact-us"}
                  aria-label="Navigate to Contact Us"
                >
                  Contact Us
                </Nav.Link>
                <Nav.Link
                  as={Link}
                  href="/terms-conditions"
                  active={pathname === "/terms-conditions"}
                  aria-label="Navigate to Terms & Conditions"
                >
                  Terms & Conditions
                </Nav.Link>
                <Nav.Link
                  as={Link}
                  href="/privacy-policy"
                  active={pathname === "/privacy-policy"}
                  aria-label="Navigate to Privacy Policy"
                >
                  Privacy Policy
                </Nav.Link>
              </Nav>
            </Col>
            <Col md={3} sm={6} xs={6} className="align-self-start">
              <motion.h3 style={{ fontSize: 25 }}>Our Services</motion.h3>
              <Nav className="flex-column justify-content-start align-items-start">
                <Nav.Link
                  as={Link}
                  href="/services/ai-services"
                  active={pathname === "/services/ai-services"}
                  aria-label="Navigate to AI Services"
                >
                  AI Services
                </Nav.Link>
                <Nav.Link
                  as={Link}
                  href="/services/data-center"
                  active={pathname === "/services/data-center"}
                  aria-label="Navigate to Data Center"
                >
                  Data Center
                </Nav.Link>
                <Nav.Link
                  as={Link}
                  href="/services/cloud-solutions"
                  active={pathname === "/services/cloud-solutions"}
                  aria-label="Navigate to Cloud Solutions"
                >
                  Cloud Solutions
                </Nav.Link>
                <Nav.Link
                  as={Link}
                  href="/services/system-integration"
                  active={pathname === "/services/system-integration"}
                  aria-label="Navigate to System Integration"
                >
                  System Integration
                </Nav.Link>
                <Nav.Link
                  as={Link}
                  href="/services/system-integration/software-solutions"
                  active={
                    pathname ===
                    "/services/system-integration/software-solutions"
                  }
                  aria-label="Navigate to Software Solutions"
                >
                  Software Solutions
                </Nav.Link>
                <Nav.Link
                  as={Link}
                  href="/services/streaming-solutions"
                  active={pathname === "/services/streaming-solutions"}
                  aria-label="Navigate to Streaming Solutions"
                >
                  Streaming Solutions
                </Nav.Link>
                <Nav.Link
                  as={Link}
                  href="/services/ai-surveillance"
                  active={pathname === "/services/ai-surveillance"}
                  aria-label="Navigate to AI Surveillance"
                >
                  AI Surveillance
                </Nav.Link>
                {/* <Nav.Link as={Link} href="/services/aviation-security-safety" active={pathname === "/services/aviation-security-safety"} aria-label="Navigate to Aviation security & Safety">Aviation Security & Safety</Nav.Link> */}
                <Nav.Link
                  as={Link}
                  href="/services/examination"
                  active={pathname === "/services/examination"}
                  aria-label="Navigate to Examination"
                >
                  Examination
                </Nav.Link>
              </Nav>
            </Col>
            <Col md={3} sm={6} xs={12} className="align-self-start">
              <motion.h3 style={{ fontSize: 25 }}>
                You&apos;ve question?
              </motion.h3>
              <div className="d-flex align-items-start my-3">
                <motion.span
                  className="icon-box bg-secondary-subtle"
                  whileInView={{ rotate: [0, 360] }}
                  transition={{ duration: 1.4 }}
                >
                  <i className="bi bi-telephone-fill"></i>
                </motion.span>
                <div className="ms-2">
                  <motion.div className="text-danger">Contact Us</motion.div>
                  {/* <motion.div>
                    <a href="tel:+9311054862">+91-93110 54862</a>
                  </motion.div> */}
                  <motion.div>
                    <a href="tel:+919311079499">+91-93110 79499</a>
                  </motion.div>
                  <motion.div>
                    <a href="tel:0120-699 3128">0120-699 3128</a>
                  </motion.div>
                </div>
              </div>
              <div className="d-flex align-items-start my-3">
                <motion.span
                  className="icon-box bg-secondary-subtle"
                  whileInView={{ rotate: [0, 360] }}
                  transition={{ duration: 1.4 }}
                >
                  <i className="bi bi-envelope-paper-fill"></i>
                </motion.span>
                <div className="ms-2">
                  <motion.div className="text-danger">Our Email</motion.div>
                  <motion.div>
                    <a href="mailto:info@vensysco.in">info@vensysco.in</a>
                  </motion.div>
                </div>
              </div>
              <div className="d-flex align-items-start my-3">
                <motion.span
                  className="icon-box bg-secondary-subtle"
                  whileInView={{ rotate: [0, 360] }}
                  transition={{ duration: 1.4 }}
                >
                  <i className="bi bi-geo-alt-fill"></i>
                </motion.span>
                <div className="ms-2">
                  <motion.div className="text-danger">
                    VTL Headquarters
                  </motion.div>
                  <motion.div>
                    Bhutani Alphathum, Tower B, 7th Floor, Sector 90, Noida
                    201305
                  </motion.div>
                </div>
              </div>
            </Col>
            <Col md={12}>
              <motion.hr
                className="border-2"
                whileInView={{ width: ["0%", "100%"] }}
                transition={{ duration: 1 }}
                viewport={{ once: true, amount: 0.5 }}
              />
            </Col>
            <Col
              md={12}
              className="text-center"
              style={{ paddingBottom: "5rem" }}
            >
              <motion.span
                whileInView={{ scale: [0.5, 2, 1] }}
                transition={{ duration: 1 }}
                viewport={{ once: true, amount: 0.5 }}
              >
                <small>
                  © {new Date().getFullYear()} Vensysco Technologies Limited.
                  All Rights Reserved.
                </small>
              </motion.span>
            </Col>
          </Row>
        )}
      </Container>
    </footer>
  );
}