"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import MediaAbout from '@/components/sections/about/MediaAbout';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import FaqBase from '@/components/sections/faq/FaqBase';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { CheckCircle, DollarSign, HelpCircle } from 'lucide-react';
import Link from 'next/link';

export default function PricingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="mediumLarge"
      background="blurBottom"
      cardStyle="inset"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="bold"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "/" },
            { name: "Services", id: "/services" },
            { name: "Portfolio", id: "/portfolio" },
            { name: "Pricing", id: "/pricing" },
            { name: "Contact", id: "/contact" },
          ]}
          brandName="WebVitrina"
          bottomLeftText="Strategic Web Design"
          bottomRightText="hello@webvitrina.it"
        />
      </div>

      {/* Pricing Intro */}
      <div id="pricing-intro" data-section="pricing-intro" className="mx-auto px-4 md:px-6">
        <MediaAbout
          title="Transparent Pricing for Local Business Websites"
          description="No hidden fees, no surprises. Choose the package that fits your business size, goals, and budget. Each tier is designed to deliver maximum ROI. All prices include 3-12 months of support and optimization based on your package."
          tag="Pricing"
          tagIcon={CheckCircle}
          tagAnimation="slide-up"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/bold-hero-image-for-open-graph-professio-1772481393337-7766bc5e.png"
          imageAlt="WebVitrina transparent pricing"
          buttons={[
            { text: "Get Started Today", href: "/contact" }
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      {/* Pricing Plans */}
      <div id="pricing-plans" data-section="pricing-plans" className="mx-auto px-4 md:px-6">
        <PricingCardNine
          plans={[
            {
              id: "starter",
              title: "Starter",
              price: "€1,500",
              period: "one-time",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/starter-package-benefits-visualization-s-1772481392661-61b7e697.png",
              imageAlt: "Starter plan",
              button: {
                text: "Choose Plan",
                href: "/contact"
              },
              features: [
                "5-page professional website",
                "Mobile responsive design",
                "Basic SEO optimization",
                "Contact form setup",
                "Google Analytics integration",
                "3 months of free support"
              ]
            },
            {
              id: "professional",
              title: "Professional",
              price: "€3,000",
              period: "one-time",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/professional-package-benefits-advanced-w-1772481393626-f777eaf4.png",
              imageAlt: "Professional plan",
              button: {
                text: "Choose Plan",
                href: "/contact"
              },
              features: [
                "10-page custom website",
                "Advanced mobile optimization",
                "Full local SEO setup",
                "Call tracking & conversion setup",
                "Blog/news section",
                "E-commerce capabilities",
                "6 months of support",
                "Monthly performance reports"
              ]
            },
            {
              id: "premium",
              title: "Premium",
              price: "€5,500",
              period: "one-time",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/premium-package-showcase-full-featured-w-1772481392601-eb43ccfb.png",
              imageAlt: "Premium plan",
              button: {
                text: "Choose Plan",
                href: "/contact"
              },
              features: [
                "Unlimited pages & custom design",
                "Full e-commerce platform",
                "Advanced SEO & content strategy",
                "CRM integration",
                "Multi-location support",
                "Appointment booking system",
                "12 months of premium support",
                "Weekly optimization meetings",
                "Email marketing integration"
              ]
            }
          ]}
          animationType="slide-up"
          title="Our Website Packages"
          description="Choose the right plan for your local business"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      {/* Pricing FAQ */}
      <div id="pricing-faq" data-section="pricing-faq" className="mx-auto px-4 md:px-6">
        <FaqBase
          faqs={[
            {
              id: "1",
              title: "What's included in the support period?",
              content: "Support includes bug fixes, security updates, minor content changes, performance optimization, and technical troubleshooting. Major redesigns or additional features beyond the scope are handled separately. You'll know exactly what's covered upfront."
            },
            {
              id: "2",
              title: "Can I upgrade from Starter to Professional later?",
              content: "Absolutely. If you start with Starter and want to expand, we can upgrade to Professional and apply your initial investment toward the difference. We design websites to grow with your business."
            },
            {
              id: "3",
              title: "Do you offer payment plans?",
              content: "Yes, we can discuss payment arrangements on a case-by-case basis. Contact us to discuss a plan that works for your business. We want to make professional web design accessible to local businesses."
            },
            {
              id: "4",
              title: "What happens after the support period ends?",
              content: "After your included support period, we offer affordable monthly retainer packages (typically €200-500/month) for ongoing optimization, updates, and maintenance. Many clients stay with us long-term to keep their sites competitive."
            },
            {
              id: "5",
              title: "Are there additional costs for hosting and domain?",
              content: "Domain and hosting are typically €120-200/year depending on your needs. We help you set this up and it's separate from the website design cost. We use reliable, optimized hosting that supports your SEO and performance goals."
            },
            {
              id: "6",
              title: "What if I need more pages or features?",
              content: "Any additional pages, features, or customizations beyond your package can be added. We provide transparent pricing for extras. Most clients find their initial package covers their needs with room to grow."
            },
            {
              id: "7",
              title: "Is there a contract or long-term commitment?",
              content: "Our website design is a one-time project with no long-term contract. The support period is included in your package price. After that, ongoing support is optional and month-to-month with no lock-in."
            },
            {
              id: "8",
              title: "Do you offer discounts for multiple websites?",
              content: "Yes. If you have multiple locations or business concepts, we offer package discounts. Contact us to discuss your specific situation and we'll create a custom quote."
            }
          ]}
          title="Pricing Questions"
          description="Clear answers to common pricing questions"
          tag="FAQ"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
          animationType="smooth"
        />
      </div>

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