"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Rocket } from "lucide-react";

export default function ContactPage() {
  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="features" data-section="features">
        <FeatureCardSeven
          title="How ANLY Works"
          description="Three simple steps to launch your professional website"
          tag="Easy Process"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="blur-reveal"
          features={[
            {
              id: 1,
              title: "Choose Your Template",
              description:
                "Browse 50+ professionally designed templates across portfolio, business, restaurant, and agency categories. Filter by style, industry, and features to find your perfect match.",
              imageSrc:
                "http://img.b2bpic.net/free-psd/flat-design-landing-page-gardening-template_23-2149357558.jpg?_wi=2",
            },
            {
              id: 2,
              title: "Select Your Service Level",
              description:
                "Pick from Template Only, Template + Setup, or Customized Template options. Choose your editing subscription tier based on your customization needs.",
              imageSrc:
                "http://img.b2bpic.net/free-vector/flat-business-infographic-with-photo_23-2148228064.jpg?_wi=2",
            },
            {
              id: 3,
              title: "Launch & Customize",
              description:
                "Get instant access to your template with our editing tools. Use our subscription service for ongoing customizations or manage edits yourself through our intuitive interface.",
              imageSrc:
                "http://img.b2bpic.net/free-vector/content-management-system-home-page_23-2148811885.jpg?_wi=2",
            },
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSixteen
          title="What Our Users Say"
          description="Real feedback from creators, agencies, and business owners who've launched with ANLY"
          tag="Testimonials"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          testimonials={[
            {
              id: "1",
              name: "Sarah Johnson",
              role: "Freelance Designer",
              company: "Creative Collective",
              rating: 5,
              imageSrc:
                "http://img.b2bpic.net/free-photo/front-view-professional-business-woman-suit_23-2148603020.jpg?_wi=2",
            },
            {
              id: "2",
              name: "Michael Chen",
              role: "Agency Owner",
              company: "TechFlow Designs",
              rating: 5,
              imageSrc:
                "http://img.b2bpic.net/free-photo/smiling-man-suit-looking-camera_23-2148112202.jpg?_wi=2",
            },
            {
              id: "3",
              name: "Emily Rodriguez",
              role: "Restaurant Owner",
              company: "Modern Bistro Group",
              rating: 5,
              imageSrc:
                "http://img.b2bpic.net/free-photo/happy-young-businesswoman-holding-diary-looking-camera-workplace_23-2148187204.jpg?_wi=2",
            },
            {
              id: "4",
              name: "David Kim",
              role: "Small Business Owner",
              company: "StartUp Ventures",
              rating: 5,
              imageSrc:
                "http://img.b2bpic.net/free-photo/portrait-young-confident-businessman-wearing-glasses_158595-5353.jpg?_wi=2",
            },
          ]}
          kpiItems={[
            {
              value: "2500+",
              label: "Active Users",
            },
            {
              value: "98%",
              label: "Satisfaction Rate",
            },
            {
              value: "50+",
              label: "Template Library",
            },
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get Started"
          title="Ready to Launch Your Professional Website?"
          description="Join thousands of freelancers, agencies, and businesses already using ANLY templates. Browse templates, customize with ease, and launch today."
          tagIcon={Rocket}
          background={{
            variant: "rotated-rays-animated-grid",
          }}
          useInvertedBackground={false}
          inputPlaceholder="Enter your email"
          buttonText="Browse Templates"
          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>
  );
}