import { useEffect, useRef, useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import {
  DollarSign, Rocket, Handshake, ClipboardCheck, Share2, TrendingUp,
  Lock, CheckCircle2, ArrowRight, ChevronDown, ExternalLink,
  Star, Crown, Award, Users, Mail, Phone, Globe, Building2, MessageSquare
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Checkbox } from "@/components/ui/checkbox";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import {
  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
} from "@/components/ui/select";
import {
  Form, FormControl, FormField, FormItem, FormLabel, FormMessage,
} from "@/components/ui/form";
import { Link } from "react-router-dom";
import { getPartnerCode } from "@/hooks/use-partner-code";

/* ── Zod schema ─────────────────────────────────────────── */
const partnerSchema = z.object({
  firstName: z.string().trim().min(1, "First name is required").max(50),
  lastName: z.string().trim().min(1, "Last name is required").max(50),
  email: z.string().trim().email("Enter a valid email").max(255),
  company: z.string().trim().min(1, "Company name is required").max(100),
  website: z.string().trim().url("Enter a valid URL").max(255),
  phone: z.string().trim().max(30).optional().or(z.literal("")),
  clientCount: z.string().min(1, "Please select an option"),
  platforms: z.array(z.string()).min(1, "Select at least one platform"),
  clientTypes: z.string().trim().min(1, "Please describe your client types").max(1000),
  heardFrom: z.string().min(1, "Please select an option"),
  additionalInfo: z.string().trim().max(1000).optional().or(z.literal("")),
  agreeTerms: z.literal(true, {
    errorMap: () => ({ message: "You must agree to the terms" }),
  }),
});

type PartnerFormValues = z.infer<typeof partnerSchema>;

/* ── Intersection Observer hook ─────────────────────────── */
function useAnimateOnScroll() {
  const ref = useRef<HTMLDivElement>(null);
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) { setVisible(true); obs.disconnect(); } },
      { threshold: 0.15 }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return { ref, visible };
}

function AnimatedSection({ children, className = "", delay = 0 }: { children: React.ReactNode; className?: string; delay?: number }) {
  const { ref, visible } = useAnimateOnScroll();
  return (
    <div
      ref={ref}
      className={`transition-all duration-700 ${visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"} ${className}`}
      style={{ transitionDelay: `${delay}ms` }}
    >
      {children}
    </div>
  );
}

/* ── Platform checkbox options ──────────────────────────── */
const platformOptions = [
  "Magento", "Shopify", "WooCommerce", "BigCommerce", "Custom", "Other",
];

/* ── Partner Tiers data ─────────────────────────────────── */
const tiers = [
  {
    name: "Referral Partner",
    icon: Star,
    accent: "border-[#21262D]",
    badgeBg: "",
    shadow: "",
    features: [
      "Revenue-generating from your very first referral",
      "Co-marketing materials included",
      "Partner portal access",
      "Email support",
    ],
    bestFor: "Agencies sending occasional referrals",
  },
  {
    name: "Preferred Partner",
    icon: Award,
    accent: "border-[#00C9A7]",
    badgeBg: "bg-[#00C9A7] text-[#0D1117]",
    badge: "Most Popular",
    shadow: "shadow-[0_0_20px_rgba(0,201,167,0.15)]",
    features: [
      "Recurring revenue tied to client activity",
      "Priority onboarding support",
      "Co-branded sales collateral",
      "Dedicated partner manager",
      "Quarterly business reviews",
    ],
    bestFor: "Agencies actively selling ChatSKU to clients",
  },
  {
    name: "Strategic Partner",
    icon: Crown,
    accent: "border-[#21262D]",
    badgeBg: "bg-[#F0A500]/10 text-[#F0A500]",
    badge: "Strategic",
    shadow: "",
    features: [
      "Custom revenue arrangement",
      "White-label options available",
      "Joint go-to-market planning",
      "Technical integration support",
      "Deep platform collaboration",
    ],
    bestFor: "Large agencies building ChatSKU into their core service offering",
  },
];

/* ══════════════════════════════════════════════════════════
   MAIN COMPONENT
   ══════════════════════════════════════════════════════════ */
export default function Partners() {
  const formRef = useRef<HTMLDivElement>(null);
  const [submitted, setSubmitted] = useState(false);

  const form = useForm<PartnerFormValues>({
    resolver: zodResolver(partnerSchema),
    defaultValues: {
      firstName: "", lastName: "", email: "", company: "", website: "",
      phone: "", clientCount: "", platforms: [], clientTypes: "",
      heardFrom: "", additionalInfo: "", agreeTerms: false as unknown as true,
    },
  });

  function onSubmit(data: PartnerFormValues) {
    const payload = { ...data, partnerCode: getPartnerCode() };
    console.log("Partner application submitted:", payload);
    setSubmitted(true);
  }

  function scrollToForm() {
    formRef.current?.scrollIntoView({ behavior: "smooth" });
  }

  return (
    <div className="min-h-screen bg-[#0D1117] text-[#E2E8F0]" style={{ fontFamily: "'Inter', system-ui, sans-serif" }}>
      {/* ── STICKY NAV ─────────────────────────────────── */}
      <nav className="fixed top-0 inset-x-0 z-50 bg-[#0D1117]/95 backdrop-blur-md border-b border-[#21262D]">
        <div className="max-w-6xl mx-auto flex items-center justify-between px-4 sm:px-6 h-14">
          <Link to="/" className="flex items-center gap-2">
            <MessageSquare className="w-6 h-6 text-[#00C9A7]" />
            <span className="text-lg font-bold text-white tracking-tight">
              Chat<span className="text-[#00C9A7]">SKU</span>
            </span>
          </Link>
          <a href="/login" className="text-sm text-[#94A3B8] hover:text-white transition-colors flex items-center gap-1">
            Already a partner? Sign in <ExternalLink className="w-3 h-3" />
          </a>
        </div>
      </nav>

      {/* ── HERO ───────────────────────────────────────── */}
      <section className="relative pt-14 overflow-hidden">
        {/* background */}
        <div className="absolute inset-0 bg-gradient-to-br from-[#0D1117] via-[#111820] to-[#0D1117]" />
        <div className="absolute inset-0 opacity-[0.05]" style={{ backgroundImage: "radial-gradient(circle, #fff 1px, transparent 1px)", backgroundSize: "28px 28px" }} />

        <div className="relative max-w-4xl mx-auto px-4 sm:px-6 py-24 sm:py-32 text-center">
          <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-white leading-tight mb-5">
            Partner With ChatSKU.{" "}
            <span className="text-[#00C9A7]">Add a New Revenue Stream</span> to Your Agency.
          </h1>
          <p className="text-base sm:text-lg text-[#94A3B8] max-w-2xl mx-auto mb-8">
            Refer your B2B clients and get rewarded every time ChatSKU delivers results. No extra overhead. No complex builds. Just growth.
          </p>
          <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
            <Button
              onClick={scrollToForm}
              className="bg-[#00C9A7] hover:bg-[#00b396] text-[#0D1117] font-semibold px-8 py-3 h-auto rounded-lg text-base shadow-lg shadow-[#00C9A7]/30"
            >
              Apply to Become a Partner <ArrowRight className="w-4 h-4 ml-1" />
            </Button>
            <button
              onClick={scrollToForm}
              className="text-[#94A3B8] hover:text-white text-sm flex items-center gap-1 transition-colors"
            >
              Learn how it works <ChevronDown className="w-4 h-4" />
            </button>
          </div>
        </div>
      </section>

      {/* ── WHY PARTNER ────────────────────────────────── */}
      <section className="py-16 sm:py-20 bg-[#0D1117]">
        <div className="max-w-6xl mx-auto px-4 sm:px-6">
          <h2 className="text-2xl sm:text-3xl font-bold text-white text-center mb-12">Why Partner With ChatSKU?</h2>
          <div className="grid md:grid-cols-3 gap-6">
            {[
              { icon: DollarSign, title: "A Genuine Revenue Opportunity", body: "The ChatSKU Partner Program is built to be revenue-generating for your agency — not just a referral badge. When your clients win, you win." },
              { icon: Rocket, title: "Easy to Recommend", body: "ChatSKU installs with a single line of code. No complex builds. No disruption to your client's existing site. It's one of the easiest solutions you'll ever bring to a client." },
              { icon: Handshake, title: "Backed by Real Support", body: "Your dedicated partner manager will help you onboard clients, prepare for sales conversations, and make sure your partnership is producing results." },
            ].map((c, i) => (
              <AnimatedSection key={i} delay={i * 120}>
                <Card className="bg-[#161B22] border border-[#21262D] shadow-sm hover:shadow-md hover:shadow-[#00C9A7]/5 transition-shadow rounded-xl h-full">
                  <CardHeader className="pb-2">
                    <div className="w-11 h-11 rounded-lg bg-[#00C9A7]/10 flex items-center justify-center mb-3">
                      <c.icon className="w-5 h-5 text-[#00C9A7]" />
                    </div>
                    <CardTitle className="text-lg font-bold text-white">{c.title}</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm text-[#94A3B8] leading-relaxed">{c.body}</p>
                  </CardContent>
                </Card>
              </AnimatedSection>
            ))}
          </div>
        </div>
      </section>

      {/* ── HOW IT WORKS ───────────────────────────────── */}
      <section className="py-16 sm:py-20 bg-[#161B22]">
        <div className="max-w-5xl mx-auto px-4 sm:px-6">
          <h2 className="text-2xl sm:text-3xl font-bold text-white text-center mb-12">How It Works</h2>
          <div className="grid md:grid-cols-3 gap-8 relative">
            {/* connecting line (desktop) */}
            <div className="hidden md:block absolute top-10 left-[16.66%] right-[16.66%] h-0.5 bg-[#00C9A7]/20" />
            {[
              { icon: ClipboardCheck, step: "1", title: "Apply", body: "Fill out the form below. We'll review your agency profile and reach out within 2 business days." },
              { icon: Share2, step: "2", title: "Refer", body: "Share ChatSKU with your B2B clients who rely on static catalogs, manual quoting, or outdated buying processes." },
              { icon: TrendingUp, step: "3", title: "Earn", body: "Generate ongoing revenue as long as your referred clients stay active on the platform." },
            ].map((s, i) => (
              <AnimatedSection key={i} delay={i * 150} className="text-center">
                <div className="relative inline-flex items-center justify-center w-20 h-20 rounded-full bg-[#00C9A7]/10 border-2 border-[#00C9A7]/30 mb-4">
                  <s.icon className="w-7 h-7 text-[#00C9A7]" />
                  <span className="absolute -top-1 -right-1 w-6 h-6 rounded-full bg-[#00C9A7] text-[#0D1117] text-xs font-bold flex items-center justify-center">{s.step}</span>
                </div>
                <h3 className="text-lg font-bold text-white mb-2">{s.title}</h3>
                <p className="text-sm text-[#94A3B8] leading-relaxed max-w-xs mx-auto">{s.body}</p>
              </AnimatedSection>
            ))}
          </div>
        </div>
      </section>

      {/* ── PARTNER TIERS ──────────────────────────────── */}
      <section className="py-16 sm:py-20 bg-[#0D1117]">
        <div className="max-w-6xl mx-auto px-4 sm:px-6">
          <h2 className="text-2xl sm:text-3xl font-bold text-white text-center mb-4">Partner Tiers</h2>
          <p className="text-center text-[#94A3B8] mb-12 max-w-xl mx-auto">Choose the tier that matches your agency's goals. You can always upgrade as your partnership grows.</p>
          <div className="grid md:grid-cols-3 gap-6">
            {tiers.map((t, i) => (
              <AnimatedSection key={i} delay={i * 120}>
                <Card className={`relative bg-[#161B22] rounded-xl transition-shadow h-full border-2 ${t.accent} ${t.shadow}`}>
                  {t.badge && (
                    <div className="absolute -top-3 left-1/2 -translate-x-1/2">
                      <span className={`px-3 py-1 rounded-full text-xs font-semibold ${t.badgeBg}`}>{t.badge}</span>
                    </div>
                  )}
                  <CardHeader className="pb-3 pt-6">
                    <div className="flex items-center gap-2 mb-1">
                      <t.icon className="w-5 h-5 text-[#00C9A7]" />
                      <CardTitle className="text-lg font-bold text-white">{t.name}</CardTitle>
                    </div>
                  </CardHeader>
                  <CardContent className="space-y-3">
                    <ul className="space-y-2">
                      {t.features.map((f, fi) => (
                        <li key={fi} className="flex items-start gap-2 text-sm text-[#CBD5E1]">
                          <CheckCircle2 className="w-4 h-4 text-[#00C9A7] mt-0.5 shrink-0" />
                          {f}
                        </li>
                      ))}
                    </ul>
                    <div className="pt-3 border-t border-[#21262D]">
                      <p className="text-xs text-[#94A3B8]"><span className="font-semibold text-white">Best for:</span> {t.bestFor}</p>
                    </div>
                  </CardContent>
                </Card>
              </AnimatedSection>
            ))}
          </div>
        </div>
      </section>

      {/* ── SIGNUP FORM ────────────────────────────────── */}
      <section className="py-16 sm:py-20 bg-[#161B22]" ref={formRef}>
        <div className="max-w-2xl mx-auto px-4 sm:px-6">
          {submitted ? (
            <AnimatedSection>
              <Card className="bg-[#161B22] rounded-xl shadow-md border border-[#21262D] text-center py-16 px-6">
                <div className="w-16 h-16 rounded-full bg-[#00C9A7]/20 flex items-center justify-center mx-auto mb-5">
                  <CheckCircle2 className="w-8 h-8 text-[#00C9A7]" />
                </div>
                <h3 className="text-2xl font-bold text-white mb-2">🎉 Application received!</h3>
                <p className="text-[#94A3B8]">We'll be in touch within 2 business days.</p>
              </Card>
            </AnimatedSection>
          ) : (
            <Card className="bg-[#161B22] rounded-xl shadow-md border border-[#21262D]">
              <CardHeader>
                <CardTitle className="text-xl font-bold text-white">Apply to Join the ChatSKU Partner Program</CardTitle>
                <CardDescription className="text-[#94A3B8]">We review all applications within 2 business days.</CardDescription>
              </CardHeader>
              <CardContent>
                <Form {...form}>
                  <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-5">
                    {/* Name row */}
                    <div className="grid sm:grid-cols-2 gap-4">
                      <FormField control={form.control} name="firstName" render={({ field }) => (
                        <FormItem>
                          <FormLabel className="text-[#E2E8F0] font-medium block">First Name *</FormLabel>
                          <FormControl><Input placeholder="Jane" className="bg-[#1C2128] border-[#30363D] text-white placeholder:text-[#6E7681] focus-visible:ring-[#00C9A7] focus-visible:ring-2" {...field} /></FormControl>
                          <FormMessage className="text-[#F87171]" />
                        </FormItem>
                      )} />
                      <FormField control={form.control} name="lastName" render={({ field }) => (
                        <FormItem>
                          <FormLabel className="text-[#E2E8F0] font-medium block">Last Name *</FormLabel>
                          <FormControl><Input placeholder="Smith" className="bg-[#1C2128] border-[#30363D] text-white placeholder:text-[#6E7681] focus-visible:ring-[#00C9A7] focus-visible:ring-2" {...field} /></FormControl>
                          <FormMessage className="text-[#F87171]" />
                        </FormItem>
                      )} />
                    </div>

                    <FormField control={form.control} name="email" render={({ field }) => (
                      <FormItem>
                        <FormLabel className="text-[#E2E8F0] font-medium block">Work Email *</FormLabel>
                        <FormControl><Input type="email" placeholder="jane@agency.com" className="bg-[#1C2128] border-[#30363D] text-white placeholder:text-[#6E7681] focus-visible:ring-[#00C9A7] focus-visible:ring-2" {...field} /></FormControl>
                        <FormMessage className="text-[#F87171]" />
                      </FormItem>
                    )} />

                    <div className="grid sm:grid-cols-2 gap-4">
                      <FormField control={form.control} name="company" render={({ field }) => (
                        <FormItem>
                          <FormLabel className="text-[#E2E8F0] font-medium block">Agency / Company Name *</FormLabel>
                          <FormControl><Input placeholder="Acme Digital" className="bg-[#1C2128] border-[#30363D] text-white placeholder:text-[#6E7681] focus-visible:ring-[#00C9A7] focus-visible:ring-2" {...field} /></FormControl>
                          <FormMessage className="text-[#F87171]" />
                        </FormItem>
                      )} />
                      <FormField control={form.control} name="website" render={({ field }) => (
                        <FormItem>
                          <FormLabel className="text-[#E2E8F0] font-medium block">Website URL *</FormLabel>
                          <FormControl><Input placeholder="https://acmedigital.com" className="bg-[#1C2128] border-[#30363D] text-white placeholder:text-[#6E7681] focus-visible:ring-[#00C9A7] focus-visible:ring-2" {...field} /></FormControl>
                          <FormMessage className="text-[#F87171]" />
                        </FormItem>
                      )} />
                    </div>

                    <FormField control={form.control} name="phone" render={({ field }) => (
                      <FormItem>
                        <FormLabel className="text-[#E2E8F0] font-medium block">Phone Number</FormLabel>
                        <FormControl><Input placeholder="+1 555-0123" className="bg-[#1C2128] border-[#30363D] text-white placeholder:text-[#6E7681] focus-visible:ring-[#00C9A7] focus-visible:ring-2" {...field} /></FormControl>
                        <FormMessage className="text-[#F87171]" />
                      </FormItem>
                    )} />

                    <FormField control={form.control} name="clientCount" render={({ field }) => (
                      <FormItem>
                        <FormLabel className="text-[#E2E8F0] font-medium block">How many B2B clients does your agency work with? *</FormLabel>
                        <Select onValueChange={field.onChange} defaultValue={field.value}>
                          <FormControl>
                            <SelectTrigger className="bg-[#1C2128] border-[#30363D] text-white focus:ring-[#00C9A7] focus:ring-2"><SelectValue placeholder="Select range" /></SelectTrigger>
                          </FormControl>
                          <SelectContent className="bg-[#1C2128] border-[#30363D] text-white">
                            <SelectItem value="1-10">1–10</SelectItem>
                            <SelectItem value="11-50">11–50</SelectItem>
                            <SelectItem value="51-200">51–200</SelectItem>
                            <SelectItem value="200+">200+</SelectItem>
                          </SelectContent>
                        </Select>
                        <FormMessage className="text-[#F87171]" />
                      </FormItem>
                    )} />

                    {/* Platforms multi-select */}
                    <FormField control={form.control} name="platforms" render={() => (
                      <FormItem>
                        <FormLabel className="text-[#E2E8F0] font-medium block">What platforms do your clients typically use? *</FormLabel>
                        <div className="grid grid-cols-2 sm:grid-cols-3 gap-3 pt-1">
                          {platformOptions.map((p) => (
                            <FormField key={p} control={form.control} name="platforms" render={({ field }) => (
                              <FormItem className="flex items-center gap-2 space-y-0">
                                <FormControl>
                                  <Checkbox
                                    checked={field.value?.includes(p)}
                                    onCheckedChange={(checked) => {
                                      const updated = checked
                                        ? [...(field.value || []), p]
                                        : (field.value || []).filter((v: string) => v !== p);
                                      field.onChange(updated);
                                    }}
                                    className="border-[#30363D] data-[state=checked]:bg-[#00C9A7] data-[state=checked]:border-[#00C9A7]"
                                  />
                                </FormControl>
                                <Label className="text-sm font-normal cursor-pointer text-[#E2E8F0]">{p}</Label>
                              </FormItem>
                            )} />
                          ))}
                        </div>
                        <FormMessage className="text-[#F87171]" />
                      </FormItem>
                    )} />

                    <FormField control={form.control} name="clientTypes" render={({ field }) => (
                      <FormItem>
                        <FormLabel className="text-[#E2E8F0] font-medium block">What types of clients would you refer to ChatSKU? *</FormLabel>
                        <FormControl>
                          <Textarea placeholder="e.g. manufacturers, distributors, industrial suppliers..." className="resize-none bg-[#1C2128] border-[#30363D] text-white placeholder:text-[#6E7681] focus-visible:ring-[#00C9A7] focus-visible:ring-2" rows={3} {...field} />
                        </FormControl>
                        <FormMessage className="text-[#F87171]" />
                      </FormItem>
                    )} />

                    <FormField control={form.control} name="heardFrom" render={({ field }) => (
                      <FormItem>
                        <FormLabel className="text-[#E2E8F0] font-medium block">How did you hear about ChatSKU? *</FormLabel>
                        <Select onValueChange={field.onChange} defaultValue={field.value}>
                          <FormControl>
                            <SelectTrigger className="bg-[#1C2128] border-[#30363D] text-white focus:ring-[#00C9A7] focus:ring-2"><SelectValue placeholder="Select option" /></SelectTrigger>
                          </FormControl>
                          <SelectContent className="bg-[#1C2128] border-[#30363D] text-white">
                            <SelectItem value="colleague">Referred by a colleague</SelectItem>
                            <SelectItem value="linkedin">LinkedIn</SelectItem>
                            <SelectItem value="search">Search</SelectItem>
                            <SelectItem value="sindri-virtina">Sindri / Virtina</SelectItem>
                            <SelectItem value="conference">Conference or event</SelectItem>
                            <SelectItem value="other">Other</SelectItem>
                          </SelectContent>
                        </Select>
                        <FormMessage className="text-[#F87171]" />
                      </FormItem>
                    )} />

                    <FormField control={form.control} name="additionalInfo" render={({ field }) => (
                      <FormItem>
                        <FormLabel className="text-[#E2E8F0] font-medium block">Anything else you'd like us to know?</FormLabel>
                        <FormControl>
                          <Textarea placeholder="Optional" className="resize-none bg-[#1C2128] border-[#30363D] text-white placeholder:text-[#6E7681] focus-visible:ring-[#00C9A7] focus-visible:ring-2" rows={3} {...field} />
                        </FormControl>
                        <FormMessage className="text-[#F87171]" />
                      </FormItem>
                    )} />

                    {/* Terms */}
                    <FormField control={form.control} name="agreeTerms" render={({ field }) => (
                      <FormItem className="flex items-start gap-2 space-y-0">
                        <FormControl>
                          <Checkbox checked={field.value} onCheckedChange={field.onChange} className="border-[#30363D] data-[state=checked]:bg-[#00C9A7] data-[state=checked]:border-[#00C9A7]" />
                        </FormControl>
                        <div className="leading-none">
                          <Label className="text-sm font-normal cursor-pointer text-[#E2E8F0]">
                            I agree to the{" "}
                            <Link to="/terms" className="text-[#00C9A7] underline underline-offset-2" target="_blank">
                              ChatSKU Partner Program Terms &amp; Conditions
                            </Link>
                          </Label>
                          <FormMessage className="text-[#F87171]" />
                        </div>
                      </FormItem>
                    )} />

                    <Button
                      type="submit"
                      className="w-full bg-[#00C9A7] hover:bg-[#00b396] text-[#0D1117] font-semibold h-12 rounded-lg text-base"
                    >
                      Submit My Application <ArrowRight className="w-4 h-4 ml-1" />
                    </Button>

                    <p className="text-center text-xs text-[#94A3B8] flex items-center justify-center gap-1">
                      <Lock className="w-3 h-3" /> Your information is never shared or sold.
                    </p>
                  </form>
                </Form>
              </CardContent>
            </Card>
          )}
        </div>
      </section>

      {/* ── FOOTER ─────────────────────────────────────── */}
      <footer className="bg-[#0D1117] border-t border-[#21262D] text-[#94A3B8] py-10">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 text-center space-y-3">
          <p className="text-sm italic text-[#94A3B8]">"Turning catalogs into conversations."</p>
          <div className="flex items-center justify-center gap-4 text-xs">
            <Link to="/privacy" className="hover:text-white transition-colors">Privacy Policy</Link>
            <span className="text-[#21262D]">|</span>
            <Link to="/terms" className="hover:text-white transition-colors">Terms</Link>
            <span className="text-[#21262D]">|</span>
            <Link to="/contact" className="hover:text-white transition-colors">Contact Us</Link>
          </div>
          <p className="text-xs text-[#94A3B8]/60">© 2025 ChatSKU. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
}
