import { Box, Container, HStack, Link, Stack, Text, VStack } from "@chakra-ui/react";
import { Mail, MapPin, Phone } from "lucide-react";
import { mailHref, telHref, whatsappHref, type Settings } from "../../data/content";
import { WhatsAppIcon } from "./icons";

export function Footer({ settings }: { settings: Settings }) {
  const name = settings.company_name || "盈豐太陽能工程有限公司";
  const shortName = settings.company_short_name || settings.company_name || "盈豐太陽能";
  const year = new Date().getFullYear();

  return (
    <Box as="footer" bg="ink" color="white" borderTopWidth="1px" borderColor="whiteAlpha.200" pt={{ base: 12, md: 16 }} pb="8">
      <Container maxW="1200px" px={{ base: 5, md: 8 }}>
        <Stack
          direction={{ base: "column", md: "row" }}
          justify="space-between"
          gap={{ base: 10, md: 16 }}
        >
          <VStack align="flex-start" gap="4" maxW="sm">
            <Text fontFamily="heading" fontWeight="900" fontSize="xl" letterSpacing="0.02em">
              {shortName}
            </Text>
            <Text color="whiteAlpha.600" fontSize="sm" lineHeight="1.8">
              專營香港村屋太陽能系統，由評估、設計、申請到安裝驗收，一站式為你善用天台，賺取發電回報。
            </Text>
            <Text color="whiteAlpha.500" fontSize="xs" letterSpacing="0.08em">
              {settings.license_no}
            </Text>
          </VStack>

          <HStack gap={{ base: 10, md: 16 }} align="flex-start">
            <VStack align="flex-start" gap="3">
              <Text fontWeight="700" fontSize="xs" letterSpacing="0.15em" color="whiteAlpha.500">
                快速連結
              </Text>
              {[
                { label: "服務範圍", href: "#services" },
                { label: "完成案例", href: "#cases" },
                { label: "服務流程", href: "#process" },
                { label: "常見問題", href: "#faq" },
                { label: "Blog", href: "/blog" },
              ].map((l) => (
                <Link
                  key={l.href}
                  href={l.href}
                  fontSize="sm"
                  color="whiteAlpha.700"
                  _hover={{ color: "white", textDecoration: "none" }}
                >
                  {l.label}
                </Link>
              ))}
            </VStack>

            <VStack align="flex-start" gap="3">
              <Text fontWeight="700" fontSize="xs" letterSpacing="0.15em" color="whiteAlpha.500">
                聯絡我哋
              </Text>
              <HStack gap="2" color="whiteAlpha.700" fontSize="sm">
                <Phone size={16} />
                <Link href={telHref(settings)} color="whiteAlpha.700" _hover={{ color: "white", textDecoration: "none" }}>
                  {settings.phone}
                </Link>
              </HStack>
              <HStack gap="2" color="whiteAlpha.700" fontSize="sm">
                <WhatsAppIcon style={{ width: 16, height: 16 }} />
                <Link href={whatsappHref(settings)} target="_blank" rel="noopener" color="whiteAlpha.700" _hover={{ color: "white", textDecoration: "none" }}>
                  WhatsApp
                </Link>
              </HStack>
              <HStack gap="2" color="whiteAlpha.700" fontSize="sm">
                <Mail size={16} />
                <Link href={mailHref(settings)} color="whiteAlpha.700" _hover={{ color: "white", textDecoration: "none" }}>
                  {settings.email}
                </Link>
              </HStack>
              <HStack gap="2" color="whiteAlpha.700" fontSize="sm" align="flex-start">
                <MapPin size={16} style={{ marginTop: 3 }} />
                <Text>{settings.address}</Text>
              </HStack>
            </VStack>
          </HStack>
        </Stack>

        <Box borderTopWidth="1px" borderColor="whiteAlpha.200" mt="12" pt="6">
          <HStack justify="space-between" flexWrap="wrap" gap="2">
            <Text fontSize="xs" color="whiteAlpha.500">
              © {year} {name} All rights reserved.
            </Text>
            <Link href="/admin" fontSize="xs" color="whiteAlpha.500" _hover={{ color: "whiteAlpha.900", textDecoration: "none" }}>
              管理後台
            </Link>
          </HStack>
        </Box>
      </Container>
    </Box>
  );
}