"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterBase from '@/components/sections/footer/FooterBase';
import { ArrowRight, CheckCircle, HelpCircle, Phone, Sparkles, Star, TrendingUp } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="compact"
      sizing="mediumLargeSizeLargeTitles"
      background="noiseDiagonalGradient"
      cardStyle="glass-depth"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Draco Digital"
          navItems={[
            { name: "Services", id: "services" },
            { name: "Our Work", id: "work" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplit
          title="Transform Your Digital Vision Into Reality"
          description="We partner with ambitious brands to create stunning digital experiences that drive growth. From strategy to execution, we deliver proven results."
          tag="Award-Winning Agency"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
            { text: "Start Your Project", href: "contact" },
            { text: "View Our Work", href: "work" }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "glowing-orb" }}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQFKBKtzUE9UtHpu5cFGLuPTXL/a-modern-sleek-digital-agency-dashboard--1772516969990-f3574ef1.png"
          imageAlt="Draco Digital dashboard interface"
          imagePosition="right"
          mediaAnimation="slide-up"
          fixedMediaHeight={true}
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
          title="About Draco Digital"
          description={[
            "At Draco Digital, we believe exceptional design and strategic thinking are the foundation of digital success. Our multidisciplinary team combines creativity, technology, and business acumen to deliver transformative solutions.",            "With over a decade of experience, we've helped hundreds of brands across industries achieve their goals through intelligent digital strategy, beautiful design, and robust development. We're committed to understanding your unique challenges and crafting solutions that truly work.",            "Our approach is collaborative, transparent, and results-driven. We don't just build websites—we build partnerships that drive measurable business impact."
          ]}
          buttons={[{ text: "Learn More", href: "services" }]}
          showBorder={false}
          useInvertedBackground={false}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTwentySix
          title="Our Core Services"
          description="Comprehensive digital solutions tailored to your business needs"
          tag="Services"
          tagIcon={CheckCircle}
          tagAnimation="slide-up"
          features={[
            {
              title: "Digital Strategy",              description: "We develop comprehensive strategies that align your digital initiatives with business goals and market opportunities.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQFKBKtzUE9UtHpu5cFGLuPTXL/professional-business-strategy-meeting-w-1772516969668-b14816a5.png",              imageAlt: "Digital strategy consultation",              buttonIcon: ArrowRight,
              buttonHref: "contact"
            },
            {
              title: "Design & UX",              description: "Beautiful, intuitive interfaces that captivate users and drive engagement. We combine aesthetics with functionality.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQFKBKtzUE9UtHpu5cFGLuPTXL/creative-designer-working-on-digital-des-1772516968915-f5e75d16.png",              imageAlt: "Design and UX work",              buttonIcon: ArrowRight,
              buttonHref: "contact"
            },
            {
              title: "Web Development",              description: "Robust, scalable web applications built with the latest technologies. We create digital products that perform.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQFKBKtzUE9UtHpu5cFGLuPTXL/software-developer-coding-on-laptop-with-1772516970487-4bbf6fa6.png",              imageAlt: "Web development process",              buttonIcon: ArrowRight,
              buttonHref: "contact"
            },
            {
              title: "Digital Marketing",              description: "Data-driven marketing strategies that increase visibility, engagement, and conversions across all channels.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQFKBKtzUE9UtHpu5cFGLuPTXL/digital-marketing-professional-analyzing-1772516969140-e9b70f4b.png",              imageAlt: "Digital marketing analytics",              buttonIcon: ArrowRight,
              buttonHref: "contact"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardSeven
          title="Proven Results"
          description="Metrics that showcase our impact and your potential success"
          tag="Impact"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          metrics={[
            {
              id: "1",              value: "500+",              title: "Projects Delivered",              items: ["Across 50+ industries", "Global client base", "98% satisfaction rate"]
            },
            {
              id: "2",              value: "12+",              title: "Years of Excellence",              items: ["Award-winning team", "Industry leaders", "Continuous innovation"]
            },
            {
              id: "3",              value: "300%",              title: "Average Client Growth",              items: ["Revenue increase", "User engagement boost", "Market expansion"]
            },
            {
              id: "4",              value: "24/7",              title: "Dedicated Support",              items: ["Expert team ready", "Quick response time", "Long-term partnership"]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="What Our Clients Say"
          description="Real feedback from companies that have transformed their business with us"
          tag="Testimonials"
          tagIcon={Star}
          tagAnimation="slide-up"
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              role: "CEO",              company: "TechCorp Solutions",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQFKBKtzUE9UtHpu5cFGLuPTXL/professional-headshot-portrait-of-a-conf-1772516968192-101c758b.png",              imageAlt: "Sarah Johnson, CEO of TechCorp Solutions"
            },
            {
              id: "2",              name: "Emily Rodriguez",              role: "Marketing Director",              company: "GrowthBrand Inc",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQFKBKtzUE9UtHpu5cFGLuPTXL/professional-headshot-of-a-female-creati-1772516967981-78369388.png",              imageAlt: "Emily Rodriguez, Marketing Director"
            },
            {
              id: "3",              name: "Michael Chen",              role: "Founder",              company: "StartupXYZ",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQFKBKtzUE9UtHpu5cFGLuPTXL/professional-headshot-of-a-male-startup--1772516968001-4dbab2a8.png",              imageAlt: "Michael Chen, Founder of StartupXYZ"
            },
            {
              id: "4",              name: "Jessica Martinez",              role: "Product Manager",              company: "InnovateLab",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQFKBKtzUE9UtHpu5cFGLuPTXL/professional-headshot-of-a-female-market-1772516967402-1f387670.png",              imageAlt: "Jessica Martinez, Product Manager"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Find answers to common questions about our services and process"
          tag="FAQ"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          faqs={[
            {
              id: "1",              title: "What is your typical project timeline?",              content: "Project timelines vary based on complexity and scope. Most projects range from 4-16 weeks. We'll provide a detailed timeline during the discovery phase."
            },
            {
              id: "2",              title: "How do you handle ongoing support?",              content: "We offer flexible support packages including maintenance, updates, and optimization. We're committed to long-term partnerships beyond launch."
            },
            {
              id: "3",              title: "What industries do you specialize in?",              content: "We work across all industries from tech and finance to healthcare and retail. Our diverse experience allows us to bring fresh perspectives to any sector."
            },
            {
              id: "4",              title: "How do you measure project success?",              content: "Success is defined by your business goals. We establish clear KPIs upfront and provide regular reporting on metrics that matter to you."
            },
            {
              id: "5",              title: "Do you offer retainer services?",              content: "Yes, we offer flexible retainer packages for ongoing strategy, design, and development work tailored to your needs."
            }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQFKBKtzUE9UtHpu5cFGLuPTXL/professional-customer-support-team-worki-1772516970613-7862134b.png"
          imageAlt="Draco Digital support team"
          mediaAnimation="slide-up"
          mediaPosition="left"
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="smooth"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Ready to Transform Your Digital Presence?"
          ctaDescription="Let's discuss how Draco Digital can help you achieve your business goals through strategic digital solutions."
          ctaButton={{ text: "Schedule a Consultation", href: "https://calendly.com" }}
          ctaIcon={Phone}
          faqs={[
            {
              id: "1",              title: "What's the first step in working with you?",              content: "We start with a discovery call to understand your business, goals, and challenges. This helps us determine if we're the right fit and outline a tailored approach."
            },
            {
              id: "2",              title: "How do you price your services?",              content: "Pricing depends on project scope, complexity, and timeline. We provide transparent estimates after the discovery phase and can work within various budget ranges."
            },
            {
              id: "3",              title: "Can you work with our existing team?",              content: "Absolutely. We regularly collaborate with in-house teams and other agencies. We believe in seamless integration and open communication."
            }
          ]}
          useInvertedBackground={false}
          animationType="slide-up"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="Draco Digital"
          copyrightText="© 2025 Draco Digital. All rights reserved."
          columns={[
            {
              title: "Services",              items: [
                { label: "Digital Strategy", href: "#services" },
                { label: "Design & UX", href: "#services" },
                { label: "Web Development", href: "#services" },
                { label: "Digital Marketing", href: "#services" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Our Work", href: "#work" },
                { label: "Testimonials", href: "#testimonials" },
                { label: "Blog", href: "https://blog.dracodigital.com" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Contact Us", href: "#contact" },
                { label: "LinkedIn", href: "https://linkedin.com/company/draco-digital" },
                { label: "Twitter", href: "https://twitter.com/dracodigital" },
                { label: "Instagram", href: "https://instagram.com/dracodigital" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
