"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import TextAbout from '@/components/sections/about/TextAbout';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Instagram, Phone, Mail, HelpCircle, Calendar, DollarSign } from "lucide-react";

export default function FaqPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="medium"
      sizing="mediumLarge"
      background="circleGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "/" },
            { name: "Shop", id: "/shop" },
            { name: "Sell With Us", id: "/sell-with-us" },
            { name: "Visit", id: "/visit" },
            { name: "FAQ", id: "/faq" },
            { name: "Contact", id: "/contact" }
          ]}
          brandName="La Loupe Vintage"
          bottomLeftText="San Diego, CA 92116"
          bottomRightText="619-578-2944"
        />
      </div>

      <div id="faq-intro" data-section="faq-intro">
        <TextAbout
          tag="Frequently Asked"
          title="Got questions? We've got answers. Here are the most common questions about shopping, selling, and visiting La Loupe Vintage."
          useInvertedBackground={false}
          buttons={[
            { text: "Still Have Questions?", href: "/contact" },
            { text: "Book Appointment", href: "tel:619-578-2944" }
          ]}
        />
      </div>

      <div id="common-questions" data-section="common-questions">
        <FeatureCardSeven
          title="Common Questions"
          description="Everything you need to know about our vintage shop, selling process, and policies."
          tag="FAQ"
          textboxLayout="default"
          animationType="blur-reveal"
          useInvertedBackground={true}
          features={[
            {
              id: 1,
              title: "What eras do you carry?",              description: "We specialize in late 1960s through 1990s vintage clothing and accessories—everything from groovy 60s to rad 90s vibes.",              imageSrc: "/placeholders/placeholder1.webp?_wi=1"
            },
            {
              id: 2,
              title: "Do you buy clothing every day?",              description: "We require appointments to buy—most are booked a week or more in advance. Check our Open Buy Day schedule for no-appointment options.",              imageSrc: "/placeholders/placeholder1.webp?_wi=2"
            },
            {
              id: 3,
              title: "Can I walk in to sell?",              description: "Not currently. We don't always have buyers on site. Book an appointment or come to Open Buy Day for selling opportunities.",              imageSrc: "/placeholders/placeholder1.webp?_wi=3"
            }
          ]}
        />
      </div>

      <div id="quick-facts" data-section="quick-facts">
        <MetricCardOne
          title="Quick Facts"
          description="Key information about our policies and processes at a glance."
          metrics={[
            {
              id: "1",              value: "40",              title: "Item Limit",              description: "Maximum items per Open Buy Day visit",              icon: Calendar
            },
            {
              id: "2",              value: "30",              title: "Cash Rate",              description: "Percentage of value paid in cash",              icon: DollarSign
            },
            {
              id: "3",              value: "50",              title: "Trade Rate",              description: "Percentage of value given in trade credit",              icon: HelpCircle
            }
          ]}
          gridVariant="uniform-all-items-equal"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="La Loupe Vintage"
          copyrightText="© 2025 La Loupe Vintage | Buy • Sell • Trade — Late 60s–90s Vintage"
          socialLinks={[
            { icon: Instagram, href: "https://www.instagram.com/laloupevintage/", ariaLabel: "Follow us on Instagram" },
            { icon: Phone, href: "tel:619-578-2944", ariaLabel: "Call us" },
            { icon: Mail, href: "mailto:info@laloupevintage.com", ariaLabel: "Email us" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}