"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactCenterForm from '@/components/sections/contact/ContactCenterForm';
import FooterSocial from '@/components/sections/footer/FooterSocial';
import { Award, Github, Instagram, Linkedin, Sparkles, Star, TrendingUp, Twitter, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="small"
      sizing="large"
      background="radialGradient"
      cardStyle="glass-depth"
      primaryButtonStyle="outline"
      secondaryButtonStyle="outline"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Webild"
          navItems={[
            { name: "Portfolio", id: "portfolio" },
            { name: "Services", id: "services" },
            { name: "About", id: "about" },
            { name: "Pricing", id: "pricing" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardCarousel
          title="Digital Design & Development"
          description="Transform your vision into stunning digital experiences with our award-winning creative team"
          tag="Portfolio"
          tagIcon={Sparkles}
          buttons={[
            { text: "View Our Work", href: "portfolio" },
            { text: "Get Started", href: "contact" }
          ]}
          mediaItems={[
            { imageSrc: "https://img.b2bpic.net/free-photo/business-team-working-busy-workplace-concept_53876-137638.jpg", imageAlt: "Digital design project showcase" },
            { imageSrc: "https://img.b2bpic.net/free-photo/idea-editing-program-application-interface-concept_53876-120366.jpg", imageAlt: "UI design interface" },
            { imageSrc: "https://img.b2bpic.net/free-vector/design-process-landing-page-concept_52683-26992.jpg", imageAlt: "Brand identity design" },
            { imageSrc: "https://img.b2bpic.net/free-photo/high-angle-modern-devices-mock-up_23-2148339331.jpg", imageAlt: "Web design layout" },
            { imageSrc: "https://img.b2bpic.net/free-photo/anonymous-woman-showing-laptop-colleagues_23-2147787544.jpg", imageAlt: "Creative project work" },
            { imageSrc: "https://img.b2bpic.net/free-photo/top-view-man-working-desk_23-2149930935.jpg", imageAlt: "Portfolio showcase" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MediaSplitTabsAbout
          title="Why Choose Webild"
          description="We combine strategic thinking with creative excellence to deliver transformative digital solutions"
          tabs={[
            {
              id: "expertise",              label: "Expertise",              description: "Our team brings decades of combined experience in digital design, development, and strategy across diverse industries and markets."
            },
            {
              id: "collaboration",              label: "Collaboration",              description: "We work as an extension of your team, ensuring open communication and shared accountability throughout the entire project lifecycle."
            },
            {
              id: "innovation",              label: "Innovation",              description: "We stay ahead of industry trends and leverage cutting-edge technologies to create solutions that set your brand apart."
            },
            {
              id: "results",              label: "Results",              description: "Every project is focused on delivering measurable outcomes that drive business growth and exceed expectations."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/close-up-young-colleagues-having-meeting_23-2149060239.jpg"
          imageAlt="Team collaboration and office workspace"
          imagePosition="right"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardThree
          title="Our Services"
          description="Comprehensive digital solutions tailored to your unique business needs and goals"
          tag="What We Offer"
          tagIcon={Zap}
          textboxLayout="default"
          animationType="slide-up"
          gridVariant="four-items-2x2-equal-grid"
          useInvertedBackground="invertDefault"
          features={[
            {
              id: "01",              title: "UI/UX Design",              description: "Creating beautiful, intuitive interfaces that users love and businesses trust",              imageSrc: "https://img.b2bpic.net/free-vector/creative-process-landing-page_23-2148156387.jpg",              imageAlt: "UI design interface mockup"
            },
            {
              id: "02",              title: "Web Development",              description: "Building fast, scalable, and secure web applications with modern technologies",              imageSrc: "https://img.b2bpic.net/free-photo/aerial-view-hands-working-computer-white-table-office_53876-147927.jpg",              imageAlt: "Web development code"
            },
            {
              id: "03",              title: "Brand Strategy",              description: "Developing comprehensive brand strategies that resonate with your target audience",              imageSrc: "https://img.b2bpic.net/free-photo/business-team-working-busy-workplace-concept_53876-137638.jpg",              imageAlt: "Brand strategy planning"
            },
            {
              id: "04",              title: "Visual Identity",              description: "Crafting distinctive visual identities that tell your brand story compellingly",              imageSrc: "https://img.b2bpic.net/free-photo/examining-moleculat-model_1098-19569.jpg",              imageAlt: "Visual brand identity design"
            }
          ]}
        />
      </div>

      <div id="portfolio" data-section="portfolio">
        <ProductCardOne
          title="Featured Projects"
          description="Explore our selection of award-winning projects that showcase our expertise and creativity"
          tag="Portfolio"
          tagIcon={Award}
          textboxLayout="default"
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          useInvertedBackground="noInvert"
          products={[
            {
              id: "1",              name: "E-Commerce Platform",              price: "Digital Experience",              imageSrc: "https://img.b2bpic.net/free-photo/still-life-device-table_23-2150994346.jpg",              imageAlt: "E-commerce platform design"
            },
            {
              id: "2",              name: "Mobile App Redesign",              price: "User Experience",              imageSrc: "https://img.b2bpic.net/free-photo/modern-wireless-earphones-with-case-displayed-round-podium-with-soft-shadows_23-2150808016.jpg",              imageAlt: "Mobile app interface"
            },
            {
              id: "3",              name: "Brand Identity System",              price: "Visual Identity",              imageSrc: "https://img.b2bpic.net/free-photo/computer-mouse-surrounded-by-office-stuff_23-2148225483.jpg",              imageAlt: "Brand identity mockup"
            },
            {
              id: "4",              name: "SaaS Dashboard",              price: "Product Design",              imageSrc: "https://img.b2bpic.net/free-photo/modern-stationary-collection-arrangement_23-2149309645.jpg",              imageAlt: "SaaS dashboard interface"
            }
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardFive
          title="Simple, Transparent Pricing"
          description="Choose the engagement model that fits your project scope and business goals"
          tag="Pricing"
          tagIcon={Sparkles}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          plans={[
            {
              id: "project-based",              tag: "Project-Based",              tagIcon: Zap,
              price: "Custom",              period: "per project",              description: "Perfect for one-time projects, campaigns, or specific deliverables with defined scope",              button: { text: "Get Quote", href: "contact" },
              featuresTitle: "Includes:",              features: [
                "Custom design & development",                "Unlimited revisions",                "Post-launch support",                "Project management included"
              ]
            },
            {
              id: "retainer",              tag: "Monthly Retainer",              tagIcon: Sparkles,
              price: "$4,500",              period: "/month",              description: "Ongoing partnership for continuous design, development, and strategy support",              button: { text: "Start Retainer", href: "contact" },
              featuresTitle: "Includes:",              features: [
                "40 hours/month of work",                "Priority support",                "Strategic guidance",                "Flexible deliverables",                "Quarterly planning sessions"
              ]
            },
            {
              id: "enterprise",              tag: "Enterprise",              tagIcon: Award,
              price: "Custom",              period: "enterprise",              description: "Comprehensive solutions for large-scale projects with dedicated team and resources",              button: { text: "Schedule Call", href: "contact" },
              featuresTitle: "Includes:",              features: [
                "Dedicated team",                "Custom resources",                "24/7 support",                "Strategic partnership",                "Custom SLA"
              ]
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          title="Our Impact"
          description="Proven results that demonstrate the value we bring to our partners"
          tag="Results"
          tagIcon={TrendingUp}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          metrics={[
            {
              id: "1",              value: "150+",              title: "Projects Completed",              description: "Successful digital solutions delivered across industries",              imageSrc: "https://img.b2bpic.net/free-photo/three-cheerful-businesspeople-giving-five-smiling-confident-happy-colleagues-celebrating-successful-deal-together-standing-outdoors-rising-hand-up-teamwork-partnership-concept_74855-7845.jpg",              imageAlt: "Project completion achievement"
            },
            {
              id: "2",              value: "98%",              title: "Client Satisfaction",              description: "Consistently exceeding expectations on quality and delivery",              imageSrc: "https://img.b2bpic.net/free-photo/successful-happy-business-team_53876-15146.jpg",              imageAlt: "Client satisfaction metrics"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="Client Testimonials"
          description="See what our partners have to say about working with Webild"
          tag="Reviews"
          tagIcon={Star}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          speed={30}
          topMarqueeDirection="left"
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              handle: "CEO, TechCorp",              testimonial: "Webild transformed our digital presence completely. Their strategic approach combined with exceptional design made all the difference in our market positioning.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Sarah Johnson"
            },
            {
              id: "2",              name: "Michael Chen",              handle: "Founder, StartupXYZ",              testimonial: "Working with Webild was a game-changer. They understood our vision and delivered a product that exceeded our expectations in every way.",              imageSrc: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",              imageAlt: "Michael Chen"
            },
            {
              id: "3",              name: "Emily Rodriguez",              handle: "Product Manager, InnovateLab",              testimonial: "The team at Webild brings together creative excellence and technical expertise. They're true partners, not just vendors.",              imageSrc: "https://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg",              imageAlt: "Emily Rodriguez"
            },
            {
              id: "4",              name: "David Kim",              handle: "CMO, GrowthCo",              testimonial: "Best investment we made for our rebrand. The design system they created has become central to our entire digital strategy.",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiley-business-man_23-2148514859.jpg",              imageAlt: "David Kim"
            },
            {
              id: "5",              name: "Jessica Thompson",              handle: "VP Design, DesignStudio",              testimonial: "Exceptional attention to detail and commitment to excellence. Every interaction with Webild has been professional and collaborative.",              imageSrc: "https://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg",              imageAlt: "Jessica Thompson"
            },
            {
              id: "6",              name: "Robert Martinez",              handle: "Director, BrandWorks",              testimonial: "Their ability to blend strategy with creativity is unmatched. Highly recommend for any brand looking to make a digital impact.",              imageSrc: "https://img.b2bpic.net/free-photo/serene-businessman-with-glasses_1098-719.jpg",              imageAlt: "Robert Martinez"
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Frequently Asked Questions"
          sideDescription="Everything you need to know about working with Webild"
          textPosition="left"
          useInvertedBackground="noInvert"
          animationType="smooth"
          showCard={true}
          faqs={[
            {
              id: "1",              title: "How do you approach new projects?",              content: "We start with a comprehensive discovery phase to understand your business, target audience, and goals. We then develop a strategic roadmap before moving into design and development."
            },
            {
              id: "2",              title: "What is your typical project timeline?",              content: "Timelines vary based on project scope. Small projects typically take 4-8 weeks, while larger engagements can take 3-6 months. We provide detailed timelines during the initial consultation."
            },
            {
              id: "3",              title: "Do you offer post-launch support?",              content: "Yes, all projects include a 30-day post-launch support period. Beyond that, we offer maintenance and support packages tailored to your needs."
            },
            {
              id: "4",              title: "Can you work with existing brands?",              content: "Absolutely. We excel at refreshing and enhancing existing brand identities while maintaining brand equity and recognition in the market."
            },
            {
              id: "5",              title: "What's your revision policy?",              content: "Project-based engagements include unlimited revisions during the design phase. Retainer clients enjoy priority revisions as part of their monthly allocation."
            },
            {
              id: "6",              title: "How do you handle ongoing updates?",              content: "We provide clear documentation and handover materials. For ongoing needs, we recommend our retainer model which includes continued support and updates."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenterForm
          title="Let's Work Together"
          description="Ready to bring your vision to life? Get in touch with us today and let's discuss how we can help transform your digital presence."
          useInvertedBackground="invertDefault"
          buttonText="Send Message"
          inputs={[
            {
              id: "name",              label: "Full Name",              type: "text",              placeholder: "Your name",              required: true
            },
            {
              id: "email",              label: "Email Address",              type: "email",              placeholder: "your@email.com",              required: true
            },
            {
              id: "company",              label: "Company",              type: "text",              placeholder: "Your company name",              required: false
            },
            {
              id: "phone",              label: "Phone Number",              type: "tel",              placeholder: "+1 (555) 000-0000",              required: false
            }
          ]}
          textarea={{
            id: "message",            label: "Tell us about your project",            placeholder: "Describe your project, goals, and timeline...",            required: true
          }}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSocial
          logoText="Webild"
          copyrightText="© Webild, Inc. 2025. All rights reserved."
          columns={[
            {
              title: "Company",              items: [
                { label: "About Us", href: "about" },
                { label: "Services", href: "services" },
                { label: "Portfolio", href: "portfolio" },
                { label: "Careers", href: "#" }
              ]
            },
            {
              title: "Services",              items: [
                { label: "UI/UX Design", href: "#" },
                { label: "Web Development", href: "#" },
                { label: "Brand Strategy", href: "#" },
                { label: "Visual Identity", href: "#" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Blog", href: "#" },
                { label: "Case Studies", href: "#" },
                { label: "FAQ", href: "faq" },
                { label: "Contact", href: "contact" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" }
              ]
            }
          ]}
          socialLinks={[
            { icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" },
            { icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
            { icon: Instagram, href: "https://instagram.com", ariaLabel: "Instagram" },
            { icon: Github, href: "https://github.com", ariaLabel: "GitHub" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}