"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import ContactFaq from "@/components/sections/contact/ContactFaq";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import { Zap, Phone } from "lucide-react";

export default function FAQPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "How It Works", id: "how-it-works" },
    { name: "Leagues", id: "leagues" },
    { name: "Stats", id: "stats" },
  ];

  const footerColumns = [
    {
      items: [
        { label: "Home", href: "/" },
        { label: "How It Works", href: "/how-it-works" },
        { label: "Pricing", href: "/pricing" },
        { label: "Leagues", href: "/leagues" },
      ],
    },
    {
      items: [
        { label: "About Us", href: "#" },
        { label: "Blog", href: "#" },
        { label: "Community", href: "#" },
        { label: "Careers", href: "#" },
      ],
    },
    {
      items: [
        { label: "Contact", href: "#" },
        { label: "Support", href: "#" },
        { label: "Privacy Policy", href: "#" },
        { label: "Terms of Service", href: "#" },
      ],
    },
    {
      items: [
        { label: "Twitter", href: "https://twitter.com" },
        { label: "Facebook", href: "https://facebook.com" },
        { label: "Instagram", href: "https://instagram.com" },
        { label: "Discord", href: "https://discord.com" },
      ],
    },
  ];

  const faqItems = [
    {
      id: "1",
      title: "What's the salary cap and how does it work?",
      content: "Each season, you have a total budget (typically £50M) to draft your 15-player squad. Players are priced based on form, position scarcity, and historical performance. Your squad's total salary must not exceed the cap. You manage wages week-to-week via transfers, and prices fluctuate based on market demand and player performance.",
    },
    {
      id: "2",
      title: "How are points calculated during live matches?",
      content: "Points are awarded in real-time as events occur: Tries = 5 pts, Conversions = 2 pts, Penalties = 1 pt, Tackles = 0.5 pts, Assists = 1 pt, Turnovers Won = 0.5 pts, Clean Sheets (defenders) = 1 pt. Bonus points are awarded for man-of-the-match and high performance thresholds. Full scoring rules are available in your league settings.",
    },
    {
      id: "3",
      title: "Can I create a private league with my friends?",
      content: "Absolutely! Both Free and Pro users can create private leagues. Free users get 1 private league slot, Pro users get 5, and Elite users get unlimited. You can set custom league names, scoring rules, entry fees (optional), and manage members directly. Invite links make it easy to add friends.",
    },
    {
      id: "4",
      title: "When can I make transfers and are there limits?",
      content: "Transfers are open each matchweek until the first game kicks off. Free users can make unlimited transfers with no penalty. Pro and Elite users get early transfer windows (24 hours before the free tier) and advanced recommendations. You can swap out entire squads or make surgical changes—it's your choice.",
    },
    {
      id: "5",
      title: "What leagues are included—Championship or Premiership only?",
      content: "We support both Championship and Premiership squads. You can draft players from either or mix both in your squad (within salary cap). Matches from both leagues score simultaneously, and you can create single-league or multi-league competitions depending on your preference.",
    },
    {
      id: "6",
      title: "Is there a mobile app or just web?",
      content: "Currently, FantasyRugby is web-first with full mobile responsiveness. You can manage your squad, check live scores, and trade on your phone via any browser. A native iOS and Android app is on our roadmap for Q2 2024. All features work identically on mobile.",
    },
  ];

  const contactFaqItems = [
    {
      id: "faq-contact-1",
      title: "How do I reset my password?",
      content: "Click 'Forgot Password' on the login page, enter your email, and we'll send a reset link within 2 minutes. If you don't see it, check your spam folder or contact support.",
    },
    {
      id: "faq-contact-2",
      title: "Can I cancel my Pro subscription anytime?",
      content: "Yes, absolutely. Cancel anytime from your account settings—no cancellation fees or long-term commitments. Your access continues until the end of your current billing cycle.",
    },
    {
      id: "faq-contact-3",
      title: "How often are player prices updated?",
      content: "Player prices update weekly after each matchweek concludes (typically Monday morning). Prices reflect performance, injury news, and transfer market demand. Price changes are notified in real-time.",
    },
    {
      id: "faq-contact-4",
      title: "What happens if a player gets injured?",
      content: "Injured players are flagged immediately in the app and on leaderboards. You can swap them out during the open transfer window without penalty. If a player misses a match, they score no points that week.",
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="compact"
      sizing="largeSmallSizeLargeTitles"
      background="aurora"
      cardStyle="inset"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          navItems={navItems}
          brandName="FantasyRugby"
          button={{
            text: "Start Your Squad",
            href: "#cta",
          }}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Everything you need to know about building squads, managing transfers, live scoring, and competing in leagues."
          tag="Support"
          tagAnimation="slide-up"
          faqs={faqItems}
          faqsAnimation="blur-reveal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          ariaLabel="Frequently asked questions about fantasy rugby"
        />
      </div>

      <div id="contact-faq" data-section="contact-faq">
        <ContactFaq
          ctaTitle="Ready to Build Your Squad?"
          ctaDescription="Join thousands of players competing in real-time. Start your fantasy rugby journey today—whether you're a casual fan or a competitive strategist, there's a place for you."
          ctaButton={{
            text: "Start Your Squad Now",
            href: "#cta",
          }}
          ctaIcon={Zap}
          faqs={contactFaqItems}
          animationType="slide-up"
          showCard={true}
          ariaLabel="Contact and support FAQ section"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="FantasyRugby"
          columns={footerColumns}
          ariaLabel="Site footer"
        />
      </div>
    </ThemeProvider>
  );
}