import React from "react";
import { View, Text, TouchableOpacity, StyleSheet, Platform, ScrollView } from "react-native";
import { useRouter, type Href } from "expo-router";
import Colors from "@/constants/colors";

const LINKS: { label: string; href: Href }[] = [
  { label: "About Us", href: "/about-us" },
  { label: "Contact Us", href: "/contact-us" },
  { label: "FAQs", href: "/faqs" },
  { label: "Support Tickets", href: "/support-tickets" },
  { label: "Order Zendo Card", href: "/order-zendo-card" },
  { label: "Terms & Conditions", href: "/terms-and-conditions" },
  { label: "Privacy Policy", href: "/privacy-policy" },
  { label: "Help", href: "/help-support" },
];

interface AppSiteFooterProps {
  compact?: boolean;
}

export function AppSiteFooter({ compact }: AppSiteFooterProps) {
  const router = useRouter();

  return (
    <View style={[styles.wrap, compact && styles.wrapCompact]}>
      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={Platform.OS === "web"}
        nestedScrollEnabled
        contentContainerStyle={styles.linkRow}
      >
        {LINKS.map((link) => (
          <TouchableOpacity key={link.href as string} onPress={() => router.push(link.href)} hitSlop={8}>
            <Text style={styles.link}>{link.label}</Text>
          </TouchableOpacity>
        ))}
      </ScrollView>
      <Text style={styles.disclaimer}>
        Disputes & support tickets: Zendo responds within up to 7 business days.
      </Text>
      <Text style={styles.copy}>© {new Date().getFullYear()} Zendo · All rights reserved</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  wrap: {
    borderTopWidth: 1,
    borderTopColor: Colors.dark.border,
    backgroundColor: Colors.dark.background,
    paddingVertical: 20,
    paddingHorizontal: 16,
    marginTop: 24,
  },
  wrapCompact: {
    paddingVertical: 14,
    marginTop: 12,
  },
  linkRow: {
    flexDirection: "row",
    flexWrap: "wrap",
    gap: 12,
    paddingBottom: 12,
    alignItems: "center",
  },
  link: {
    color: Colors.dark.textSecondary,
    fontSize: 13,
    fontWeight: "600",
    textDecorationLine: Platform.OS === "web" ? "underline" : "none",
  },
  disclaimer: {
    color: Colors.dark.textTertiary,
    fontSize: 11,
    lineHeight: 16,
    marginBottom: 6,
  },
  copy: {
    color: Colors.dark.textTertiary,
    fontSize: 11,
  },
});