"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import HeroBillboardTestimonial from "@/components/sections/hero/HeroBillboardTestimonial";
import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
import FooterCard from "@/components/sections/footer/FooterCard";
import { Phone, Mail, MapPin, Star, Award, ThumbsUp } from "lucide-react";

export default function ServicesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="large"
      background="circleGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Esilos Print & Design"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Services", id: "/services" },
            { name: "Portfolio", id: "/#website-examples" },
            { name: "Contact", id: "/#cta-section" },
          ]}
        />
      </div>

      <div id="services-hero" data-section="services-hero">
        <HeroBillboardTestimonial
          title="Web Design Services Built for Local Business Growth"
          description="Our comprehensive web design services are tailored specifically for local service businesses looking to attract more customers online and establish a professional digital presence."
          tag="Our Services"
          background={{ variant: "glowing-orb" }}
          imageSrc="http://img.b2bpic.net/free-vector/admin-dashboard-panel-template_23-2147900458.jpg?_wi=2"
          imageAlt="Web design services showcase"
          mediaAnimation="slide-up"
          useInvertedBackground={false}
          testimonials={[
            {
              name: "Maria Gonzalez",
              handle: "Restaurant Owner",
              testimonial: "Esilos transformed our online presence. We're getting 3x more customer calls every week!",
              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-professional-business-woman-smiling-outdoor_1391-4.jpg?_wi=3",
            },
            {
              name: "James Mitchell",
              handle: "Contractor",
              testimonial: "Professional, fast, and affordable. This is exactly what my business needed to grow.",
              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1628.jpg?_wi=3",
            },
            {
              name: "Sarah Chen",
              handle: "Hair Salon Owner",
              testimonial: "The team understood our business. Our new website gets bookings from day one.",
              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-smiling-korean-barista-pouring-filter-coffee-prepare-batch-brew-client-cafe_1258-203378.jpg?_wi=3",
            },
          ]}
          buttons={[
            {
              text: "Start Your Project",
              href: "tel:519-792-3115",
            },
            {
              text: "Learn More",
              href: "#service-details",
            },
          ]}
        />
      </div>

      <div id="service-details" data-section="service-details">
        <FeatureCardSeven
          title="Our Web Design Services"
          description="Complete solutions for your local business online success"
          tag="What We Offer"
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          features={[
            {
              id: 1,
              title: "Custom Website Design",
              description: "Professionally designed websites tailored to your business needs. We create unique, modern designs that reflect your brand and appeal to your target customers.",
              imageSrc: "http://img.b2bpic.net/free-photo/presentation-contract_1098-15816.jpg?_wi=2",
            },
            {
              id: 2,
              title: "Mobile Optimization",
              description: "Every website we build is optimized for mobile devices. Since most customers search on their phones, we ensure your site looks perfect and functions flawlessly on all devices.",
              imageSrc: "http://img.b2bpic.net/free-photo/people-around-computer_23-2149370613.jpg?_wi=2",
            },
            {
              id: 3,
              title: "Lead Generation & SEO",
              description: "We build websites designed to convert visitors into customers. Our SEO strategies help local customers find you when they search for your services online.",
              imageSrc: "http://img.b2bpic.net/free-vector/dashboard-user-panel-template-infographic_23-2148368929.jpg?_wi=2",
            },
          ]}
        />
      </div>

      <div id="services-testimonials" data-section="services-testimonials">
        <TestimonialCardTwo
          title="Why Local Businesses Choose Our Services"
          description="Proven results and dedicated support for your success"
          tag="Client Success"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          testimonials={[
            {
              id: "1",
              name: "Maria Gonzalez",
              role: "Restaurant Owner",
              testimonial: "We went from no website to getting 15+ customer calls per week. The best investment we made for our restaurant this year.",
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-professional-business-woman-smiling-outdoor_1391-4.jpg?_wi=4",
              icon: Star,
            },
            {
              id: "2",
              name: "James Mitchell",
              role: "Painting Contractor",
              testimonial: "Professional, fast turnaround, and the support team was incredible. Our new website is generating quality leads consistently.",
              imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1628.jpg?_wi=4",
              icon: Award,
            },
            {
              id: "3",
              name: "Sarah Chen",
              role: "Hair Salon Owner",
              testimonial: "The team understood our business perfectly. They built exactly what we needed. Highly recommend to any local business.",
              imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-smiling-korean-barista-pouring-filter-coffee-prepare-batch-brew-client-cafe_1258-203378.jpg?_wi=4",
              icon: ThumbsUp,
            },
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Esilos"
          copyrightText="© 2025 Esilos Print & Design. All rights reserved. | Local Web Design for Ontario Businesses"
          socialLinks={[
            {
              icon: Phone,
              href: "tel:519-792-3115",
              ariaLabel: "Call us at 519-792-3115",
            },
            {
              icon: Mail,
              href: "mailto:esilosprint@gmail.com",
              ariaLabel: "Email us at esilosprint@gmail.com",
            },
            {
              icon: MapPin,
              href: "#",
              ariaLabel: "Visit us in Ontario",
            },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}