"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import AboutMetric from '@/components/sections/about/AboutMetric';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Heart, MessageCircle, Star, TrendingUp, Users, Zap } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="smallMedium"
      sizing="largeSmallSizeLargeTitles"
      background="circleGradient"
      cardStyle="gradient-mesh"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Mkani"
          navItems={[
            { name: "Services", id: "services" },
            { name: "About", id: "about" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="Mkani"
          description="Empower your local business with a professional online presence. We help workshops, shops, and service providers grow their customer base through modern website design, Google Business Profile optimization, and strategic branding."
          buttons={[
            { text: "Get More Customers", href: "#contact" },
            { text: "Learn More", href: "#services" }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "plain" }}
          imageSrc="http://img.b2bpic.net/free-vector/flat-design-minimal-technology-landing-page_23-2149188470.jpg?_wi=1"
          imageAlt="Mkani Digital Agency Dashboard"
          mediaAnimation="opacity"
          frameStyle="browser"
          ariaLabel="Mkani Digital Agency Hero Section"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardNine
          title="Our Services"
          description="Comprehensive solutions designed to transform your business. From beautiful websites to strategic branding, we handle everything needed to establish and grow your online presence."
          tag="Local Business Solutions"
          tagIcon={Zap}
          tagAnimation="slide-up"
          buttons={[
            { text: "Start Now", href: "#contact" }
          ]}
          buttonAnimation="slide-up"
          features={[
            {
              id: 1,
              title: "Website Design",              description: "Modern, responsive websites built to convert visitors into customers. We create stunning digital storefronts that showcase your services and drive sales.",              buttons: [{ text: "Explore", href: "#" }],
              phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=cn3iof&_wi=1", imageAlt: "Website Design Service" },
              phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=cn3iof&_wi=2", imageAlt: "Website Design Portfolio" }
            },
            {
              id: 2,
              title: "Google Business Profile Optimization",              description: "Boost your local visibility with a fully optimized Google Business Profile. Get found by customers searching for services like yours in your area.",              buttons: [{ text: "Discover", href: "#" }],
              phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zau6s7&_wi=1", imageAlt: "Google Business Optimization" },
              phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zau6s7&_wi=2", imageAlt: "Local SEO Strategy" }
            },
            {
              id: 3,
              title: "Strategic Branding",              description: "Build a strong brand identity that resonates with your target audience. From logos to brand guidelines, we create cohesive visual identities that command attention.",              buttons: [{ text: "Learn More", href: "#" }],
              phoneOne: { imageSrc: "http://img.b2bpic.net/free-vector/flat-design-colored-alpha-logos_23-2148979936.jpg?_wi=1", imageAlt: "Branding Services" },
              phoneTwo: { imageSrc: "http://img.b2bpic.net/free-vector/flat-design-colored-alpha-logos_23-2148979936.jpg?_wi=2", imageAlt: "Brand Identity Design" }
            }
          ]}
          showStepNumbers={true}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          ariaLabel="Mkani Services Section"
        />
      </div>

      <div id="about" data-section="about">
        <AboutMetric
          title="Why Local Businesses Choose Mkani"
          metrics={[
            { icon: TrendingUp, label: "Average Growth", value: "250%" },
            { icon: Users, label: "Businesses Served", value: "500+" },
            { icon: Star, label: "Client Satisfaction", value: "98%" },
            { icon: Zap, label: "Faster Implementation", value: "2 Weeks" }
          ]}
          metricsAnimation="slide-up"
          useInvertedBackground={true}
          ariaLabel="About Mkani Metrics"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="Loved by Local Business Owners"
          description="See how Mkani has transformed businesses like yours. Real results from real entrepreneurs who trust us with their growth."
          tag="Success Stories"
          tagIcon={Heart}
          tagAnimation="slide-up"
          testimonials={[
            {
              id: "1",              name: "Ahmed Hassan",              handle: "Owner, Hassan's Auto Workshop",              testimonial: "Mkani transformed my small workshop into an online powerhouse. Within 3 months, we went from 5 to 20 online bookings weekly. Their team is professional, responsive, and truly invested in our success.",              imageSrc: "http://img.b2bpic.net/free-photo/confident-cheerful-businesswoman_1262-21021.jpg",              imageAlt: "Ahmed Hassan"
            },
            {
              id: "2",              name: "Layla Mansour",              handle: "Owner, Layla's Fashion Boutique",              testimonial: "I was skeptical about going digital, but Mkani made it so easy. My new website is beautiful, and my Google Business Profile is constantly bringing in new customers. Best investment I made this year!",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg",              imageAlt: "Layla Mansour"
            },
            {
              id: "3",              name: "Mohammed Ali",              handle: "Owner, Ali's Plumbing Services",              testimonial: "Mkani's team understood my business from day one. They created a website that actually converts. Now 40% of my jobs come from online inquiries. Highly recommended!",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-successful-middle-aged-business-leader_1262-5690.jpg",              imageAlt: "Mohammed Ali"
            },
            {
              id: "4",              name: "Fatima Al-Dosari",              handle: "Owner, Fatima's Beauty Salon",              testimonial: "The branding work Mkani did for my salon is stunning. My customers immediately noticed the professional look. The booking system on the website has cut my admin time in half.",              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-worker-workshop_23-2149103881.jpg",              imageAlt: "Fatima Al-Dosari"
            },
            {
              id: "5",              name: "Omar Hassan",              handle: "Manager, Hassan's Carpentry",              testimonial: "From website to Google profile optimization, Mkani handled everything perfectly. Their service is fast, affordable, and delivers real results. Our customer inquiries tripled!",              imageSrc: "http://img.b2bpic.net/free-photo/happy-bearded-man-standing-with-crossed-arms-near-desktop-office-with-loft-interior_613910-18715.jpg",              imageAlt: "Omar Hassan"
            },
            {
              id: "6",              name: "Noor Khalil",              handle: "Owner, Noor's Catering Service",              testimonial: "Mkani brought my catering business into the digital age. The website showcase makes my food look incredible, and the online ordering system has streamlined everything. Worth every penny!",              imageSrc: "http://img.b2bpic.net/free-photo/successful-senior-businessman-standing-window_1262-3120.jpg",              imageAlt: "Noor Khalil"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[
            { text: "Join Our Success Stories", href: "#contact" }
          ]}
          buttonAnimation="slide-up"
          speed={40}
          topMarqueeDirection="left"
          ariaLabel="Customer Testimonials"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Ready to Grow Your Business?"
          ctaDescription="Let's discuss how Mkani can help you reach more customers and build a stronger online presence."
          ctaButton={{ text: "Start Now", href: "#" }}
          ctaIcon={MessageCircle}
          useInvertedBackground={true}
          animationType="slide-up"
          accordionAnimationType="smooth"
          showCard={true}
          faqs={[
            {
              id: "1",              title: "How long does it take to build a website?",              content: "Most websites are completed within 2-3 weeks. We work efficiently without compromising quality, ensuring your business gets online quickly to start capturing customers."
            },
            {
              id: "2",              title: "What's included in your branding package?",              content: "Our branding package includes logo design, brand guidelines, color palette, typography selection, and brand voice documentation. Everything you need for a cohesive visual identity."
            },
            {
              id: "3",              title: "Do you offer ongoing support?",              content: "Absolutely! We provide ongoing maintenance, updates, and support packages. Your website and online presence remain optimized and fresh."
            },
            {
              id: "4",              title: "What are your pricing options?",              content: "We offer flexible packages for businesses of all sizes. Basic websites start at affordable rates, with premium options for those needing advanced features. Contact us for a custom quote."
            },
            {
              id: "5",              title: "Can you help with Google Business Profile optimization?",              content: "Yes! We specialize in complete Google Business Profile optimization including verification, detailed descriptions, photo management, and review strategy to maximize local visibility."
            },
            {
              id: "6",              title: "What if I already have a website?",              content: "We can redesign, optimize, and enhance your existing website. We also audit current sites to identify improvement opportunities and boost performance."
            }
          ]}
          ariaLabel="Contact and FAQ Section"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="http://img.b2bpic.net/free-vector/flat-design-minimal-technology-landing-page_23-2149188470.jpg?_wi=2"
          imageAlt="Mkani - Empowering Local Businesses"
          logoText="Mkani"
          copyrightText="© 2025 Mkani. All rights reserved."
          columns={[
            {
              title: "Services",              items: [
                { label: "Website Design", href: "#services" },
                { label: "Google Business Optimization", href: "#services" },
                { label: "Branding", href: "#services" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Testimonials", href: "#testimonials" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "Twitter", href: "https://twitter.com" },
                { label: "Instagram", href: "https://instagram.com" }
              ]
            }
          ]}
          ariaLabel="Site Footer"
        />
      </div>
    </ThemeProvider>
  );
}
