"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Shield, Heart, Zap, Smartphone, Rocket, Mail } from "lucide-react";

const navItems = [
  { name: "Home", id: "/" },
  { name: "About", id: "/about" },
  { name: "Services", id: "/services" },
  { name: "Portfolio", id: "/portfolio" },
  { name: "Pricing", id: "/pricing" },
];

export default function HomePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="smallMedium"
      sizing="large"
      background="circleGradient"
      cardStyle="glass-depth"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarStyleApple brandName="MDX" navItems={navItems} />
      </div>

      {/* Hero Section */}
      <div id="hero" data-section="hero">
        <HeroBillboardGallery
          title="Websites Built for the Modern Era."
          description="Modern Digital Xelence helps local businesses grow through clean, strategic, conversion-focused websites that build trust and drive real revenue."
          background={{ variant: "circleGradient" }}
          buttons={[
            { text: "Book a Strategy Call", href: "/booking" },
            { text: "Get Started", href: "/services" },
          ]}
          mediaItems={[
            {
              imageSrc: "http://img.b2bpic.net/free-vector/landing-page-template-with-color-year-2022_23-2149217369.jpg",
              imageAlt: "Modern website design",
            },
          ]}
          mediaAnimation="slide-up"
        />
      </div>

      {/* What We Do Section */}
      <div id="what-we-do" data-section="what-we-do">
        <FeatureCardThree
          title="What We Do"
          description="We build strategic, conversion-focused websites that establish credibility, generate leads, and drive measurable business growth for local companies."
          features={[
            {
              id: "01",
              title: "Strategic Website Design",
              description:
                "Custom-built websites tailored to your business goals, audience, and revenue objectives.",
              imageSrc:
                "http://img.b2bpic.net/free-photo/focus-concentrate-clarity-determine-inspiration-concept_53876-133862.jpg?_wi=1",
              imageAlt: "Strategic website design",
            },
            {
              id: "02",
              title: "Conversion Optimization",
              description:
                "Every element strategically placed to guide visitors toward meaningful actions and measurable results.",
              imageSrc:
                "http://img.b2bpic.net/free-photo/unrecognizable-colleagues-standing-table-looking-design-projects_1098-20475.jpg?_wi=1",
              imageAlt: "Conversion optimization",
            },
            {
              id: "03",
              title: "Lead Capture & Integration",
              description:
                "Built-in booking systems, contact forms, and integrations to capture and nurture potential customers.",
              imageSrc:
                "http://img.b2bpic.net/free-photo/business-scene-top-view_23-2147626514.jpg?_wi=1",
              imageAlt: "Lead capture integration",
            },
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      {/* Our Process Section */}
      <div id="our-process" data-section="our-process">
        <FeatureCardThree
          title="Our Process"
          description="A streamlined, strategic approach designed to deliver results fast and keep you informed every step of the way."
          features={[
            {
              id: "01",
              title: "Consult",
              description:
                "We deep-dive into your business, goals, and competition to build a strategic foundation for your website.",
              imageSrc:
                "http://img.b2bpic.net/free-photo/business-meeting-office_1268-21517.jpg?_wi=1",
              imageAlt: "Consultation phase",
            },
            {
              id: "02",
              title: "Build",
              description:
                "Our team designs and develops a custom website optimized for conversions, speed, and user experience.",
              imageSrc:
                "http://img.b2bpic.net/free-photo/programming-software-code-application-technology-concept_53876-123931.jpg?_wi=1",
              imageAlt: "Build phase",
            },
            {
              id: "03",
              title: "Launch",
              description:
                "We deploy your site, optimize performance, and provide full training so you own and control your digital presence.",
              imageSrc:
                "http://img.b2bpic.net/free-vector/rocket-with-computer-background_1223-27.jpg",
              imageAlt: "Launch phase",
            },
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      {/* Why It Matters Section */}
      <div id="why-matters" data-section="why-matters">
        <MetricCardThree
          title="Why It Matters"
          description="These core pillars separate thriving businesses from those stuck in the past."
          metrics={[
            {
              id: "1",
              icon: Shield,
              title: "Credibility",
              value: "First Impression",
            },
            {
              id: "2",
              icon: Heart,
              title: "Trust",
              value: "Client Confidence",
            },
            {
              id: "3",
              icon: Zap,
              title: "Lead Generation",
              value: "Real Revenue",
            },
            {
              id: "4",
              icon: Smartphone,
              title: "Mobile Optimization",
              value: "Every Device",
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      {/* Testimonials Section */}
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTen
          title="Trusted by Business Owners"
          description="See what our clients have to say about working with Modern Digital Xelence."
          testimonials={[
            {
              id: "1",
              title: "Transformed Our Online Presence",
              quote:
                "MDX completely redesigned our digital strategy. Our new website has brought in more qualified leads in 3 months than we had all last year.",
              name: "Sarah Mitchell",
              role: "Owner, Local Gym Fitness",
              imageSrc:
                "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
              imageAlt: "Sarah Mitchell",
            },
            {
              id: "2",
              title: "Professional Results, Professional Team",
              quote:
                "Working with Maddox and the team was seamless. They understood our business immediately and delivered a website that truly represents who we are.",
              name: "James Rodriguez",
              role: "Owner, Rodriguez Landscaping",
              imageSrc:
                "http://img.b2bpic.net/free-photo/smiling-middle-aged-business-leader-window_1262-5674.jpg?_wi=1",
              imageAlt: "James Rodriguez",
            },
            {
              id: "3",
              title: "Game Changer for Our Business",
              quote:
                "Our old website looked outdated. The new one is clean, fast, and actually converts visitors into customers. Best investment we made this year.",
              name: "Emily Chen",
              role: "Founder, Morning Brew Coffee",
              imageSrc:
                "http://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg",
              imageAlt: "Emily Chen",
            },
            {
              id: "4",
              title: "Strategic and Results-Oriented",
              quote:
                "MDX didn't just build a website—they built a business tool. The booking integration alone has cut our admin work in half.",
              name: "David Thompson",
              role: "General Manager, Digital Agency Partner",
              imageSrc:
                "http://img.b2bpic.net/free-photo/smiling-middle-aged-business-leader-window_1262-5674.jpg?_wi=2",
              imageAlt: "David Thompson",
            },
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      {/* Closing CTA Section */}
      <div id="closing-cta" data-section="closing-cta">
        <ContactCTA
          tag="Ready to Grow?"
          tagIcon={Rocket}
          title="Modernize Your Business Today."
          description="Stop leaving revenue on the table. Let's build a website that actually drives results."
          buttons={[
            { text: "Book a Strategy Call", href: "/booking" },
            { text: "View Portfolio", href: "/portfolio" },
          ]}
          background={{ variant: "circleGradient" }}
          useInvertedBackground={false}
        />
      </div>

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