"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import ProductCardThree from "@/components/sections/product/ProductCardThree";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import Link from "next/link";

export default function TemplatesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="mediumSizeLargeTitles"
      background="fluid"
      cardStyle="glass-elevated"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="ANLY"
          navItems={[
            { name: "Templates", id: "templates" },
            { name: "Features", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "FAQ", id: "faq" },
          ]}
          button={{
            text: "Browse Templates",
            href: "/templates",
          }}
          animateOnLoad={true}
        />
      </div>

      <div id="templates" data-section="templates">
        <ProductCardThree
          title="Browse Professional Templates"
          description="Explore our curated collection of professionally designed website templates ready to customize"
          tag="Template Gallery"
          textboxLayout="default"
          useInvertedBackground={false}
          gridVariant="bento-grid"
          animationType="slide-up"
          products={[
            {
              id: "portfolio-minimal",
              name: "Minimal Portfolio Pro",
              price: "$79",
              imageSrc: "http://img.b2bpic.net/free-vector/general-business-landing-page-template_23-2148960842.jpg",
              imageAlt: "Minimal portfolio template",
              initialQuantity: 1,
            },
            {
              id: "portfolio-creative",
              name: "Creative Showcase",
              price: "$89",
              imageSrc: "http://img.b2bpic.net/free-vector/landing-page-template-with-color-year-2022_23-2149217369.jpg",
              imageAlt: "Creative showcase template",
              initialQuantity: 1,
            },
            {
              id: "business-corporate",
              name: "Corporate Business",
              price: "$99",
              imageSrc: "http://img.b2bpic.net/free-vector/business-landing-page-with-group-photo_23-2148274072.jpg",
              imageAlt: "Corporate business template",
              initialQuantity: 1,
            },
            {
              id: "restaurant-modern",
              name: "Restaurant Digital",
              price: "$85",
              imageSrc: "http://img.b2bpic.net/free-psd/restaurant-promo-landing-page-template_23-2148642164.jpg",
              imageAlt: "Modern restaurant template",
              initialQuantity: 1,
            },
            {
              id: "agency-studio",
              name: "Agency Studio",
              price: "$109",
              imageSrc: "http://img.b2bpic.net/free-vector/business-landing-page-with-photo_52683-22734.jpg",
              imageAlt: "Agency studio template",
              initialQuantity: 1,
            },
            {
              id: "shop-ecommerce",
              name: "E-Commerce Shop",
              price: "$119",
              imageSrc: "http://img.b2bpic.net/free-psd/flat-design-black-friday-sale-landing-page_23-2150829125.jpg",
              imageAlt: "E-commerce shop template",
              initialQuantity: 1,
            },
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Template Questions"
          description="Find answers to questions about our professional templates"
          tag="Help & Support"
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="entrance-slide"
          faqs={[
            {
              id: "1",
              title: "Which template is best for my business type?",
              content:
                "We categorize templates by industry: Portfolio for creative professionals, Corporate for businesses, Restaurant for food & beverage, Agency for design services, and E-Commerce for online retail. Browse by category or use our filter to match your needs.",
            },
            {
              id: "2",
              title: "Can I see a live demo of templates?",
              content:
                "Yes! Each template card includes a preview button. Click to see a full interactive demo of the template before purchasing. This gives you a complete view of all features and layouts.",
            },
            {
              id: "3",
              title: "What technical support do templates include?",
              content:
                "All templates include basic documentation and setup guides. Premium subscribers get priority email support and access to our knowledge base. Custom development requests are available through our services team.",
            },
            {
              id: "4",
              title: "Are there seasonal or specialty templates?",
              content:
                "We regularly update our template library with seasonal designs and industry-specific templates. New releases are announced to subscribers, and old templates can be archived to keep your library current.",
            },
            {
              id: "5",
              title: "Can I combine features from multiple templates?",
              content:
                "Premium subscribers can request custom combinations. Our design team can merge elements from multiple templates or create variations. Contact our services team for custom arrangement options.",
            },
            {
              id: "6",
              title: "How often are templates updated?",
              content:
                "We update templates monthly with bug fixes, performance improvements, and new features. All updates are free for current users. New template releases happen quarterly with fresh designs and technologies.",
            },
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get Started"
          title="Ready to Choose Your Template?"
          description="Select from our 50+ professional templates, customize to match your brand, and launch your website in minutes."
          background={{ variant: "rotated-rays-animated-grid" }}
          useInvertedBackground={false}
          inputPlaceholder="Enter your email"
          buttonText="Start Browsing"
          termsText="By signing up, you agree to our Terms and Conditions. We respect your privacy and will only send template updates and special offers."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="ANLY"
          leftLink={{ text: "Privacy Policy", href: "#" }}
          rightLink={{ text: "Terms of Service", href: "#" }}
        />
      </div>
    </ThemeProvider>
  );
}