"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroSplit from "@/components/sections/hero/HeroSplit";
import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import SplitAbout from "@/components/sections/about/SplitAbout";
import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
import PricingCardOne from "@/components/sections/pricing/PricingCardOne";
import ContactFaq from "@/components/sections/contact/ContactFaq";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import {
  Sparkles,
  Zap,
  Camera,
  Heart,
  Star,
  Wallet,
  Phone,
  Globe,
  RefreshCw,
  ShoppingCart,
  Palette,
  Award,
  Share2,
  Users,
  Lightbulb,
  Shield,
  Crown,
} from "lucide-react";

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

export default function HomePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="mediumLarge"
      background="aurora"
      cardStyle="layered-gradient"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={navItems}
          brandName="DesignFlow"
          bottomLeftText="Based in Digital Hub"
          bottomRightText="hello@designflow.agency"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplit
          title="We Design Websites That Grow Your Business"
          description="Transform your vision into stunning digital experiences. Our team specializes in creating modern websites and compelling brand designs that captivate your audience and drive measurable results."
          tag="Creative Solutions"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          background={{ variant: "glowing-orb" }}
          buttons={[
            {
              text: "Get a Free Quote",
              href: "contact",
            },
            {
              text: "View Our Work",
              href: "portfolio",
            },
          ]}
          buttonAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-photo/messy-office-workplace-workplace-workspace-concept_185193-108718.jpg"
          imageAlt="Modern web design dashboard"
          mediaAnimation="slide-up"
          imagePosition="right"
          fixedMediaHeight={true}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTwentyFive
          title="Our Services"
          description="Comprehensive digital design solutions tailored to elevate your brand and engage your audience."
          tag="What We Offer"
          tagIcon={Zap}
          tagAnimation="slide-up"
          features={[
            {
              title: "Website Design",
              description:
                "Custom, responsive websites that showcase your brand and convert visitors into customers.",
              icon: Globe,
              mediaItems: [
                {
                  imageSrc:
                    "http://img.b2bpic.net/free-vector/flat-gym-landing-page_23-2149655998.jpg?_wi=1",
                  imageAlt: "Website design showcase",
                },
                {
                  imageSrc:
                    "http://img.b2bpic.net/free-photo/african-american-customer-putting-credit-card-pos-terminal-paying-fashionable-clothes-counter-desk-modern-boutique-woman-shopper-buying-trendy-merchandise-clothing-store_482257-72466.jpg?_wi=1",
                  imageAlt: "Web design example",
                },
              ],
            },
            {
              title: "Website Redesign",
              description:
                "Modernize your existing website with fresh designs, improved functionality, and better user experience.",
              icon: RefreshCw,
              mediaItems: [
                {
                  imageSrc:
                    "http://img.b2bpic.net/free-psd/flat-design-business-strategy-landing-page_23-2150699868.jpg?_wi=1",
                  imageAlt: "Redesign before and after",
                },
                {
                  imageSrc:
                    "http://img.b2bpic.net/free-vector/flat-gym-landing-page_23-2149655998.jpg?_wi=2",
                  imageAlt: "Modern redesign",
                },
              ],
            },
            {
              title: "E-commerce Solutions",
              description:
                "Build powerful online stores with seamless checkout experiences, inventory management, and payment integration.",
              icon: ShoppingCart,
              mediaItems: [
                {
                  imageSrc:
                    "http://img.b2bpic.net/free-photo/african-american-customer-putting-credit-card-pos-terminal-paying-fashionable-clothes-counter-desk-modern-boutique-woman-shopper-buying-trendy-merchandise-clothing-store_482257-72466.jpg?_wi=2",
                  imageAlt: "E-commerce website",
                },
                {
                  imageSrc:
                    "http://img.b2bpic.net/free-psd/minimalist-design-week-template_23-2149955887.jpg?_wi=1",
                  imageAlt: "Product showcase",
                },
              ],
            },
            {
              title: "Graphic Design",
              description:
                "Create memorable visual identities, marketing materials, and brand guidelines that resonate with your audience.",
              icon: Palette,
              mediaItems: [
                {
                  imageSrc:
                    "http://img.b2bpic.net/free-psd/minimalist-design-week-template_23-2149955887.jpg?_wi=2",
                  imageAlt: "Graphic design portfolio",
                },
                {
                  imageSrc:
                    "http://img.b2bpic.net/free-vector/gradient-artificial-intelligence-landing-page_23-2150330595.jpg?_wi=1",
                  imageAlt: "Brand design work",
                },
              ],
            },
            {
              title: "Logo & Branding",
              description:
                "Distinctive logos and complete branding packages that establish your unique market presence.",
              icon: Award,
              mediaItems: [
                {
                  imageSrc:
                    "http://img.b2bpic.net/free-psd/minimalist-design-week-template_23-2149955887.jpg?_wi=3",
                  imageAlt: "Logo design showcase",
                },
                {
                  imageSrc:
                    "http://img.b2bpic.net/free-psd/flat-design-business-strategy-landing-page_23-2150699868.jpg?_wi=2",
                  imageAlt: "Brand identity",
                },
              ],
            },
            {
              title: "Social Media Graphics",
              description:
                "Eye-catching graphics, templates, and content designs optimized for all social media platforms.",
              icon: Share2,
              mediaItems: [
                {
                  imageSrc:
                    "http://img.b2bpic.net/free-psd/minimalist-design-week-template_23-2149955887.jpg?_wi=4",
                  imageAlt: "Social media designs",
                },
                {
                  imageSrc:
                    "http://img.b2bpic.net/free-photo/african-american-customer-putting-credit-card-pos-terminal-paying-fashionable-clothes-counter-desk-modern-boutique-woman-shopper-buying-trendy-merchandise-clothing-store_482257-72466.jpg?_wi=3",
                  imageAlt: "Social content",
                },
              ],
            },
          ]}
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[
            {
              text: "Explore All Services",
              href: "services",
            },
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="portfolio" data-section="portfolio">
        <ProductCardOne
          title="Portfolio Showcase"
          description="Explore our latest website designs and graphic design projects that have transformed businesses."
          tag="Our Work"
          tagIcon={Camera}
          tagAnimation="slide-up"
          products={[
            {
              id: "1",
              name: "E-Commerce Platform Redesign",
              price: "Startup Success",
              imageSrc:
                "http://img.b2bpic.net/free-photo/african-american-customer-putting-credit-card-pos-terminal-paying-fashionable-clothes-counter-desk-modern-boutique-woman-shopper-buying-trendy-merchandise-clothing-store_482257-72466.jpg?_wi=4",
              imageAlt: "Ecommerce redesign project",
            },
            {
              id: "2",
              name: "Corporate Website Launch",
              price: "Enterprise Growth",
              imageSrc:
                "http://img.b2bpic.net/free-psd/flat-design-business-strategy-landing-page_23-2150699868.jpg?_wi=3",
              imageAlt: "Corporate website project",
            },
            {
              id: "3",
              name: "SaaS Landing Page",
              price: "Tech Innovation",
              imageSrc:
                "http://img.b2bpic.net/free-vector/gradient-artificial-intelligence-landing-page_23-2150330595.jpg?_wi=2",
              imageAlt: "SaaS landing page project",
            },
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[
            {
              text: "View Full Portfolio",
              href: "portfolio",
            },
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="What Our Clients Say"
          description="Real feedback from businesses we've worked with and transformed through design."
          tag="Testimonials"
          tagIcon={Star}
          tagAnimation="slide-up"
          testimonials={[
            {
              id: "1",
              name: "Sarah Anderson",
              handle: "@sarahbiz",
              testimonial:
                "DesignFlow completely transformed our online presence. Our new website has increased conversions by 45% and we couldn't be happier with the results.",
              rating: 5,
              imageSrc:
                "http://img.b2bpic.net/free-photo/adult-serious-businessman-looking-camera_23-2148113003.jpg?_wi=1",
              imageAlt: "Sarah Anderson",
            },
            {
              id: "2",
              name: "Michael Chen",
              handle: "@miketech",
              testimonial:
                "Professional, creative, and responsive. The team understood our vision from day one and delivered beyond expectations. Highly recommended!",
              rating: 5,
              imageSrc:
                "http://img.b2bpic.net/free-photo/confident-businessman-smiling_107420-84734.jpg?_wi=1",
              imageAlt: "Michael Chen",
            },
            {
              id: "3",
              name: "Emily Rodriguez",
              handle: "@emilydesigns",
              testimonial:
                "Working with DesignFlow was a game-changer for our startup. Our branding is now cohesive, professional, and truly represents who we are.",
              rating: 5,
              imageSrc:
                "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg?_wi=1",
              imageAlt: "Emily Rodriguez",
            },
            {
              id: "4",
              name: "David Kim",
              handle: "@davidkimseo",
              testimonial:
                "Great communication throughout the project. They delivered everything on time and the website is fast, responsive, and looks stunning.",
              rating: 5,
              imageSrc:
                "http://img.b2bpic.net/free-photo/front-view-smiley-man-with-backpack_23-2149915917.jpg?_wi=1",
              imageAlt: "David Kim",
            },
            {
              id: "5",
              name: "Jessica Palmer",
              handle: "@jessicapalmer",
              testimonial:
                "The level of attention to detail is incredible. Every pixel is perfect. They made the entire process smooth and enjoyable.",
              rating: 5,
              imageSrc:
                "http://img.b2bpic.net/free-photo/blond-business-woman-blue-shirt_23-2148095792.jpg?_wi=1",
              imageAlt: "Jessica Palmer",
            },
            {
              id: "6",
              name: "Robert Jackson",
              handle: "@robertjackson",
              testimonial:
                "Best investment we made for our business. The ROI has been phenomenal and our customers love the new design.",
              rating: 5,
              imageSrc:
                "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1",
              imageAlt: "Robert Jackson",
            },
          ]}
          showRating={true}
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          buttons={[
            {
              text: "Get Started",
              href: "contact",
            },
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardOne
          title="Simple, Transparent Pricing"
          description="Choose the perfect package for your project. All plans include free consultation and ongoing support."
          tag="Pricing Plans"
          tagIcon={Wallet}
          tagAnimation="slide-up"
          plans={[
            {
              id: "1",
              badge: "Starter",
              badgeIcon: Zap,
              price: "$1,500",
              subtitle: "Perfect for small businesses launching online",
              features: [
                "5-page website",
                "Mobile responsive design",
                "Basic SEO optimization",
                "3 rounds of revisions",
                "1 month of free support",
              ],
            },
            {
              id: "2",
              badge: "Professional",
              badgeIcon: Award,
              price: "$3,500",
              subtitle: "Ideal for growing businesses with complex needs",
              features: [
                "Up to 15-page website",
                "E-commerce functionality",
                "Advanced SEO optimization",
                "Unlimited revisions",
                "3 months of support included",
                "Blog setup and training",
              ],
            },
            {
              id: "3",
              badge: "Enterprise",
              badgeIcon: Crown,
              price: "Custom",
              subtitle: "Full-service solution for large-scale projects",
              features: [
                "Unlimited pages",
                "Complete e-commerce platform",
                "Custom integrations",
                "Performance optimization",
                "6 months of premium support",
                "Monthly strategy sessions",
              ],
            },
          ]}
          animationType="depth-3d"
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[
            {
              text: "Get Quote",
              href: "contact",
            },
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="cta" data-section="cta">
        <ContactFaq
          ctaTitle="Ready to Transform Your Online Presence?"
          ctaDescription="Let's discuss your project and create a custom solution tailored to your business goals."
          ctaButton={{
            text: "Book Your Free Consultation",
            href: "contact",
          }}
          ctaIcon={Phone}
          faqs={[
            {
              id: "1",
              title: "How long does a website design project take?",
              content:
                "Most website projects take 4-8 weeks depending on complexity and scope. We provide detailed timelines during the initial consultation.",
            },
            {
              id: "2",
              title: "Do you provide website maintenance?",
              content:
                "Yes! We offer ongoing maintenance, updates, and support packages to keep your website secure and running smoothly.",
            },
            {
              id: "3",
              title: "Can you help with content creation?",
              content:
                "Absolutely. We can help with copywriting, photography, and content strategy to make your website more engaging and effective.",
            },
            {
              id: "4",
              title: "What if I need revisions?",
              content:
                "We include revision rounds in all our packages. We work closely with you until you're completely satisfied with the result.",
            },
          ]}
          useInvertedBackground={false}
          animationType="blur-reveal"
        />
      </div>

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