// components/Footer.tsx
"use client";

import {
  Box,
  Flex,
  Text,
  Link as ChakraLink,
  useColorModeValue
} from "@chakra-ui/react";
import { motion } from "framer-motion";
import NextLink from "next/link";

// We'll animate the footer slightly on load, consistent with the site style
const MotionBox = motion(Box);

export default function Footer() {
  // Reuse the same gradient approach for background
  const gradientBg = useColorModeValue(
    "linear(to-r, brand.50, brand.100)",
    "linear(to-r, brand.900, brand.700)"
  );
  const textColor = useColorModeValue("gray.800", "gray.100");

  return (
    <MotionBox
      as="footer"
      bgGradient={gradientBg}
      color={textColor}
      // Subtle fade-in
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.8 }}
    >
      <Flex
        direction={{ base: "column", md: "row" }}
        align="center"
        justify="space-between"
        px={8}
        py={4}
      >
        {/* Left side: copyright or brand text */}
        <Text fontSize="sm" mb={{ base: 2, md: 0 }}>
          © {new Date().getFullYear()} No Worry Business Solutions. All rights reserved.
        </Text>

        {/* Right side: links (social, privacy, etc.) */}
        <Flex gap={4} fontSize="sm" wrap="wrap">
          <ChakraLink as={NextLink} href="/about" _hover={{ textDecoration: "underline" }}>
            About
          </ChakraLink>
          <ChakraLink as={NextLink} href="/services" _hover={{ textDecoration: "underline" }}>
            Services
          </ChakraLink>
          <ChakraLink as={NextLink} href="/contact" _hover={{ textDecoration: "underline" }}>
            Contact
          </ChakraLink>
          {/* If you have a privacy or terms page, link them here */}
          <ChakraLink as={NextLink} href="/privacy" _hover={{ textDecoration: "underline" }}>
            Privacy
          </ChakraLink>
          <ChakraLink as={NextLink} href="/terms" _hover={{ textDecoration: "underline" }}>
            Terms & Conditions
          </ChakraLink>
        </Flex>
      </Flex>
    </MotionBox>
  );
}