"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
import AboutMetric from '@/components/sections/about/AboutMetric';
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactText from '@/components/sections/contact/ContactText';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Award, Building2, CheckCircle, DollarSign, Rocket, Shield, Sparkles, Star, Zap } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="largeSmallSizeMediumTitles"
      background="aurora"
      cardStyle="gradient-mesh"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="K&K Digital"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Services", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "Testimonials", id: "testimonials" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
          bottomLeftText="Web Design & Development"
          bottomRightText="hello@kandkdigital.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitDoubleCarousel
          title="Websites That Grow Your Small Business"
          description="K&K Digital builds clean, fast, affordable websites for businesses ready to get online. No jargon. No surprises. Just results."
          tag="Get Started Today"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
            { text: "Get Your Free Website Demo", href: "#contact" },
            { text: "Learn More", href: "#features" }
          ]}
          buttonAnimation="slide-up"
          leftCarouselItems={[
            { imageSrc: "http://img.b2bpic.net/free-psd/plastic-surgery-clinic-landing-page-template_23-2150058052.jpg", imageAlt: "Modern website design showcase" },
            { imageSrc: "http://img.b2bpic.net/free-psd/marketing-strategy-landing-page_23-2150500915.jpg", imageAlt: "Professional web interface" },
            { imageSrc: "http://img.b2bpic.net/free-psd/smarphone-store-ad-banner-template_23-2148693761.jpg", imageAlt: "Responsive website example" }
          ]}
          rightCarouselItems={[
            { imageSrc: "http://img.b2bpic.net/free-psd/handmade-soap-shop-web-template_23-2149064705.jpg", imageAlt: "Web design portfolio display" },
            { imageSrc: "http://img.b2bpic.net/free-vector/professional-dashboard-user-panel_23-2148310538.jpg", imageAlt: "Agency website showcase" },
            { imageSrc: "http://img.b2bpic.net/free-psd/gradient-business-solutions-landing-page_23-2150027299.jpg", imageAlt: "Digital design example" }
          ]}
          carouselPosition="right"
          background={{ variant: "radial-gradient" }}
          ariaLabel="K&K Digital hero section"
        />
      </div>

      <div id="about" data-section="about">
        <AboutMetric
          title="Why Choose K&K Digital"
          metrics={[
            { icon: Zap, label: "Lightning Fast", value: "99.9% Uptime" },
            { icon: DollarSign, label: "Affordable Pricing", value: "No Hidden Fees" },
            { icon: Rocket, label: "Quick Launch", value: "2-4 Weeks" },
            { icon: Shield, label: "Secure & Safe", value: "SSL Included" }
          ]}
          metricsAnimation="slide-up"
          useInvertedBackground={false}
          ariaLabel="K&K Digital advantages metrics"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardMedia
          title="Our Services"
          description="Everything your small business needs to succeed online. Clean design, fast performance, and affordable pricing."
          tag="What We Offer"
          tagIcon={CheckCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          features={[
            {
              id: "feature-1",              title: "Clean, Modern Design",              description: "Professional websites that represent your business well. No outdated templates, just custom-built solutions tailored to your needs.",              tag: "Design",              imageSrc: "http://img.b2bpic.net/free-vector/flat-landing-page-template_23-2148978697.jpg",              imageAlt: "Clean modern website design"
            },
            {
              id: "feature-2",              title: "Lightning Fast Performance",              description: "Websites that load instantly on any device. We optimize every element so your customers have a smooth experience from first click.",              tag: "Speed",              imageSrc: "http://img.b2bpic.net/free-photo/financial-graph-stock-market-tablet_53876-98076.jpg",              imageAlt: "Fast loading website performance"
            },
            {
              id: "feature-3",              title: "Affordable & Transparent",              description: "No surprise costs. No confusing packages. We give you clear pricing upfront so you know exactly what you're getting.",              tag: "Pricing",              imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-woman-garage-sale_23-2150540717.jpg",              imageAlt: "Affordable pricing packages"
            }
          ]}
          animationType="slide-up"
          carouselMode="buttons"
          ariaLabel="K&K Digital services and features"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="What Our Clients Say"
          description="Real feedback from small business owners who transformed their online presence with K&K Digital."
          tag="Testimonials"
          tagIcon={Star}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          testimonials={[
            {
              id: "testimonial-1",              name: "Sarah Mitchell",              handle: "Boutique Owner",              testimonial: "K&K Digital completely transformed my retail shop's online presence. The website is beautiful, fast, and has brought in so many new customers. Highly recommend!",              imageSrc: "http://img.b2bpic.net/free-photo/glassblower-standing-with-arms-crossed-glassblowing-factory_107420-74235.jpg",              imageAlt: "Sarah Mitchell"
            },
            {
              id: "testimonial-2",              name: "James Chen",              handle: "Service Business Owner",              testimonial: "I was skeptical about investing in a website, but K&K Digital made the process simple and affordable. My phone has been ringing non-stop with inquiries.",              imageSrc: "http://img.b2bpic.net/free-photo/blond-business-woman-standing-with-crossed-arms_23-2148095774.jpg",              imageAlt: "James Chen"
            },
            {
              id: "testimonial-3",              name: "Maria Garcia",              handle: "Restaurant Manager",              testimonial: "From consultation to launch, the team was professional and responsive. Our new website looks incredible and is already bringing in online reservations.",              imageSrc: "http://img.b2bpic.net/free-photo/concentrated-young-lady-baker-standing-with-arms-crossed_171337-16097.jpg",              imageAlt: "Maria Garcia"
            },
            {
              id: "testimonial-4",              name: "David Thompson",              handle: "Contractor",              testimonial: "Best investment I've made for my contracting business. The website is polished, easy to navigate, and my clients find me instantly on Google now.",              imageSrc: "http://img.b2bpic.net/free-photo/blond-business-woman-standing-window_23-2148095696.jpg",              imageAlt: "David Thompson"
            },
            {
              id: "testimonial-5",              name: "Lisa Anderson",              handle: "Fitness Studio Owner",              testimonial: "The K&K Digital team listened to exactly what I needed and delivered beyond expectations. My website perfectly captures the vibe of my studio.",              imageSrc: "http://img.b2bpic.net/free-photo/happy-elegant-joyful-guy-grey-jacket-shirt-wears-glasses-gray_291650-1303.jpg",              imageAlt: "Lisa Anderson"
            },
            {
              id: "testimonial-6",              name: "Mark Williams",              handle: "Local Services",              testimonial: "Fast, affordable, and no hassle. K&K Digital showed me that getting a professional website doesn't have to be complicated or expensive.",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg",              imageAlt: "Mark Williams"
            }
          ]}
          speed={40}
          topMarqueeDirection="left"
          ariaLabel="Client testimonials and reviews"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardThree
          title="Simple, Transparent Pricing"
          description="Choose the plan that fits your business. All plans include hosting, SSL certificate, and basic maintenance."
          tag="Pricing Plans"
          tagIcon={DollarSign}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          animationType="slide-up"
          plans={[
            {
              id: "starter",              name: "Starter",              price: "$1,500",              badge: "Popular",              badgeIcon: Sparkles,
              buttons: [{ text: "Get Started", href: "#contact" }],
              features: [
                "Up to 5 pages",                "Mobile responsive design",                "Contact form",                "SSL certificate included",                "Basic SEO setup",                "1 month free support"
              ]
            },
            {
              id: "professional",              name: "Professional",              price: "$3,500",              badge: "Best Value",              badgeIcon: Award,
              buttons: [{ text: "Get Started", href: "#contact" }],
              features: [
                "Up to 15 pages",                "Advanced mobile optimization",                "Contact form + lead capture",                "SSL certificate included",                "Full SEO optimization",                "3 months free support",                "Blog setup",                "Social media integration"
              ]
            },
            {
              id: "enterprise",              name: "Custom",              price: "Custom Quote",              buttons: [{ text: "Contact Us", href: "#contact" }],
              features: [
                "Unlimited pages",                "E-commerce integration",                "Advanced analytics",                "Priority support",                "Custom features",                "Ongoing optimization",                "API integration",                "Dedicated account manager"
              ]
            }
          ]}
          carouselMode="buttons"
          ariaLabel="K&K Digital pricing plans"
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          title="Trusted by Small Businesses Across Industries"
          description="From retail to services, restaurants to trades, K&K Digital has helped hundreds of small business owners get online and grow."
          tag="Our Clients"
          tagIcon={Building2}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          names={[
            "Local Retail Shops",            "Home Services",            "Restaurants & Cafes",            "Contractors & Trades",            "Health & Wellness",            "Beauty & Salons",            "Fitness Studios",            "Real Estate Agents"
          ]}
          logos={[
            "http://img.b2bpic.net/free-vector/flat-design-cyber-monday-super-sale-banner_23-2148339251.jpg",            "http://img.b2bpic.net/free-vector/logo-car-insurance_1057-2559.jpg",            "http://img.b2bpic.net/free-vector/diferent-restaurant-logo-templates_23-2147539219.jpg",            "http://img.b2bpic.net/free-vector/gradient-construction-company-logo_23-2150056500.jpg",            "http://img.b2bpic.net/free-vector/health-clinic-logo-template_1057-390.jpg",            "http://img.b2bpic.net/free-vector/letter-n-feet-acupuncture-logo-business-card-branding-template-designs-inspiration-isolated-white-background_384344-1511.jpg",            "http://img.b2bpic.net/free-vector/physiotherapy-logo-template-collection_23-2149015257.jpg",            "http://img.b2bpic.net/free-vector/house-home-care-logo-business-card-branding-template-designs-inspiration-isolated-white-background_384344-1475.jpg"
          ]}
          speed={40}
          showCard={true}
          ariaLabel="K&K Digital client logos and industries"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Frequently Asked Questions"
          sideDescription="Everything you need to know about our website services and process. Can't find your answer? Contact us directly."
          buttons={[{ text: "Still Have Questions?", href: "#contact" }]}
          buttonAnimation="slide-up"
          textPosition="left"
          useInvertedBackground={true}
          animationType="smooth"
          showCard={true}
          faqs={[
            {
              id: "faq-1",              title: "How long does it take to build my website?",              content: "Most websites are completed in 2-4 weeks, depending on complexity and the amount of content you provide. We work quickly without compromising quality."
            },
            {
              id: "faq-2",              title: "Do you offer hosting and support?",              content: "Yes! All our packages include reliable hosting and SSL security. Basic plans include 1 month of free support, and professional plans include 3 months."
            },
            {
              id: "faq-3",              title: "Can I update my website myself?",              content: "Absolutely. We build your site using easy-to-use platforms so you can make basic updates anytime. We also offer ongoing support if you need help."
            },
            {
              id: "faq-4",              title: "Will my website appear on Google?",              content: "Yes. We include basic SEO setup with all websites to help you rank on Google. Professional and custom packages include full SEO optimization."
            },
            {
              id: "faq-5",              title: "What if I need a custom feature?",              content: "We can build almost anything! Our custom plans are designed for unique requirements. Let's discuss your vision in a consultation."
            },
            {
              id: "faq-6",              title: "Do you offer mobile design?",              content: "Yes. All K&K Digital websites are mobile-first responsive, meaning they look perfect on phones, tablets, and desktops."
            }
          ]}
          faqsAnimation="slide-up"
          ariaLabel="Frequently asked questions about K&K Digital"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to Get Your Website Online?"
          animationType="entrance-slide"
          buttons={[
            { text: "Start Your Free Demo Today", href: "mailto:hello@kandkdigital.com" },
            { text: "Schedule a Consultation", href: "tel:+1234567890" }
          ]}
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={true}
          ariaLabel="K&K Digital contact and call to action"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="http://img.b2bpic.net/free-photo/cherful-positive-young-colleagues-using-laptop-computer_171337-760.jpg"
          imageAlt="K&K Digital team collaboration"
          logoText="K&K Digital"
          copyrightText="© 2025 K&K Digital. All rights reserved."
          columns={[
            {
              title: "Services",              items: [
                { label: "Web Design", href: "#features" },
                { label: "Web Development", href: "#features" },
                { label: "Maintenance", href: "#features" },
                { label: "SEO Optimization", href: "#features" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Testimonials", href: "#testimonials" },
                { label: "Pricing", href: "#pricing" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" },
                { label: "Disclaimer", href: "#" }
              ]
            }
          ]}
          ariaLabel="K&K Digital footer"
        />
      </div>
    </ThemeProvider>
  );
}
