"use client";

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

export default function ServicesPage() {
  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>

      {/* Services Overview */}
      <div id="services-overview" data-section="services-overview" className="mx-auto px-4 md:px-6">
        <MediaAbout
          title="Our Website Services for Local Businesses"
          description="We provide end-to-end web design services specifically tailored for local businesses. From strategic discovery and custom design to local SEO optimization and ongoing support, we handle every aspect of your online presence to drive real results."
          tag="Services"
          tagIcon={CheckCircle}
          tagAnimation="slide-up"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/a-professional-web-design-team-working-c-1772481393010-20c338ee.png"
          imageAlt="WebVitrina professional services team"
          buttons={[
            { text: "Book Free Consultation", href: "/contact" }
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      {/* Detailed Process */}
      <div id="services-process" data-section="services-process" className="mx-auto px-4 md:px-6">
        <FeatureCardTwentySix
          features={[
            {
              title: "Discovery & Strategy",
              description: "In-depth market analysis, competitor research, and customer persona development to create a winning strategy.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/strategic-business-analysis-and-market-r-1772481393424-7eaef511.png",
              imageAlt: "Strategic discovery phase",
              buttonIcon: ArrowRight,
              buttonHref: "/contact"
            },
            {
              title: "Design & Development",
              description: "Custom, mobile-first website design and development optimized for conversions and local search visibility.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/web-development-workspace-showing-multip-1772481393234-05497ef7.png",
              imageAlt: "Web development",
              buttonIcon: ArrowRight,
              buttonHref: "/contact"
            },
            {
              title: "Local SEO Setup",
              description: "Full local SEO optimization including Google My Business, schema markup, local keywords, and technical SEO.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/seo-optimization-dashboard-showing-ranki-1772481393537-b0ddb69c.png",
              imageAlt: "Local SEO optimization",
              buttonIcon: ArrowRight,
              buttonHref: "/contact"
            },
            {
              title: "Analytics & Tracking",
              description: "Complete setup of call tracking, lead form monitoring, Google Analytics, and conversion tracking.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/comprehensive-analytics-dashboard-displa-1772481393885-8549e572.png",
              imageAlt: "Analytics dashboard",
              buttonIcon: ArrowRight,
              buttonHref: "/contact"
            },
            {
              title: "Support & Optimization",
              description: "Ongoing support, monthly optimization based on performance data, and continuous improvement.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/ongoing-website-support-and-optimization-1772481392699-fa7a26fc.png",
              imageAlt: "Ongoing support",
              buttonIcon: ArrowRight,
              buttonHref: "/contact"
            },
            {
              title: "Client Training",
              description: "Complete training on managing your website content independently with easy-to-use CMS tools.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/business-owner-training-session-on-websi-1772481394531-aff2fd41.png",
              imageAlt: "Client training",
              buttonIcon: ArrowRight,
              buttonHref: "/contact"
            }
          ]}
          title="Complete Service Breakdown"
          description="Every step of our process is designed to maximize your success"
          tag="How We Work"
          tagIcon={Zap}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttonAnimation="slide-up"
        />
      </div>

      {/* FAQ Section */}
      <div id="services-faq" data-section="services-faq" className="mx-auto px-4 md:px-6">
        <FaqBase
          faqs={[
            {
              id: "1",
              title: "What makes your service different from DIY website builders?",
              content: "We provide strategic expertise, custom design for conversions, local SEO optimization, and ongoing support. DIY builders lack the business strategy and local SEO foundation that drives real leads. We treat your website as a lead generation machine, not just a digital brochure."
            },
            {
              id: "2",
              title: "Can you optimize an existing website?",
              content: "Yes, absolutely. If you already have a website that's not performing, we can audit it, identify conversion issues, improve SEO, add analytics tracking, and optimize for better results. Many clients have seen immediate improvements after optimization."
            },
            {
              id: "3",
              title: "Do you offer e-commerce integration?",
              content: "Yes. Our Professional and Premium packages include e-commerce capabilities if your business needs to sell online. We integrate payment processing, inventory management, and order tracking."
            },
            {
              id: "4",
              title: "How long does the complete process take?",
              content: "Starter websites: 3-4 weeks. Professional: 5-7 weeks. Premium: 6-8 weeks. This includes discovery, design, development, your feedback rounds, and launch. We provide a detailed timeline upfront so you know exactly what to expect."
            },
            {
              id: "5",
              title: "What if I need changes after the website launches?",
              content: "All packages include post-launch support: Starter (3 months), Professional (6 months), Premium (12 months). After the included period, we offer affordable monthly maintenance packages for ongoing updates and optimization."
            },
            {
              id: "6",
              title: "Do you handle website hosting and domain?",
              content: "We can help you set up hosting and domain, or integrate with your existing setup. Our websites are built on reliable, scalable hosting optimized for speed and SEO performance."
            },
            {
              id: "7",
              title: "Can you integrate my existing business tools?",
              content: "Yes. We can integrate CRM systems, email marketing platforms, appointment booking systems, POS systems, and other business tools you rely on. Integration depends on your specific needs."
            },
            {
              id: "8",
              title: "What about ongoing content updates and maintenance?",
              content: "You can manage basic content updates yourself using our easy CMS. For larger changes, design updates, or ongoing optimization, we offer monthly retainer packages. Most clients stay with us long-term for continuous improvement."
            }
          ]}
          title="Services FAQ"
          description="Common questions about our web design services"
          tag="Questions"
          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>
  );
}