"use client";

import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import MediaSplitAbout from '@/components/sections/about/MediaSplitAbout';
import FeatureCardTwenty from '@/components/sections/feature/FeatureCardTwenty';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import ProductCardSeven from '@/components/sections/product/ProductCardSeven';
import TeamCardTen from '@/components/sections/team/TeamCardTen';
import TestimonialCardNine from '@/components/sections/testimonial/TestimonialCardNine';
import MetricCardEight from '@/components/sections/metrics/MetricCardEight';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Award, CheckCircle, CreditCard, Package, Sparkles, Star } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="smallMedium"
      sizing="large"
      background="dotGrid"
      cardStyle="solid"
      primaryButtonStyle="layered-depth"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered 
          navItems={[
            {name: 'Home', id: 'home'},
            {name: 'About', id: 'about'},
            {name: 'Features', id: 'features'},
            {name: 'Pricing', id: 'pricing'},
            {name: 'Contact', id: 'contact'}
          ]}
          button={{text: 'Get Started', href: 'contact'}}
          brandName="Webild"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardGallery
          title="Experience Innovation Redefined"
          description="Discover cutting-edge solutions designed to transform your digital presence and elevate your business to new heights."
          tag="Featured Collection"
          tagIcon={Sparkles}
          buttons={[
            {text: 'Explore Products', href: 'products'},
            {text: 'Learn More', href: 'about'}
          ]}
          mediaItems={[
            {imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707497778-10ztjsiu.jpg', imageAlt: 'Premium product showcase'},
            {imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707498598-kdej2xga.jpg', imageAlt: 'Technology innovation display'},
            {imageSrc: 'https://img.b2bpic.net/free-photo/businessman-hand-holding-lightbulb-with-glowing-light-creative-smart-thinking-inspiration-innovation-with-network-concept_616485-63.jpg', imageAlt: 'Professional business solution'},
            {imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707500047-lp6iojye.jpg', imageAlt: 'Modern design excellence'},
            {imageSrc: 'https://img.b2bpic.net/free-photo/funny-stylish-sexy-smiling-beautiful-young-hippy-woman-model-summer-white-fresh-hipster-clothes-street_158538-11050.jpg', imageAlt: 'Innovative product range'}
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MediaSplitAbout
          title="Redefining Excellence Since Day One"
          description="We are a global team of visionaries, designers, and engineers dedicated to creating transformative solutions. Our commitment to innovation and quality drives every decision we make, ensuring our customers receive the best technology and service available in the market."
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707509802-bcv7fbkv.jpg"
          imageAlt="Our talented diverse team collaborating"
          imagePosition="right"
          useInvertedBackground="noInvert"
          buttons={[
            {text: 'Our Story', href: 'about'},
            {text: 'Get in Touch', href: 'contact'}
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwenty
          title="Powerful Features Built for Performance"
          description="Unlock the full potential of our platform with industry-leading features designed to streamline your workflow, enhance productivity, and deliver measurable results."
          tag="Key Advantages"
          tagIcon={CheckCircle}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          images={[
            {id: 1, imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707501774-83zcgdup.jpg', imageAlt: 'Feature demonstration one'},
            {id: 2, imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707502494-uh8pvlr9.jpg', imageAlt: 'Feature demonstration two'},
            {id: 3, imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707503261-qyybcdrz.jpg', imageAlt: 'Feature demonstration three'},
            {id: 4, imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707504093-i2nuh0w6.jpg', imageAlt: 'Feature demonstration four'}
          ]}
          buttons={[
            {text: 'Discover Features', href: 'features'}
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardFive
          title="Flexible Pricing for Every Business"
          description="Choose the perfect plan tailored to your needs. Transparent pricing with no hidden fees."
          tag="Pricing Plans"
          tagIcon={CreditCard}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          plans={[
            {
              id: 'starter',
              tag: 'Starter Plan',
              price: '$99',
              period: '/month',
              description: 'Perfect for small businesses and startups just getting started',
              button: {text: 'Choose Plan', href: 'contact'},
              featuresTitle: "What's Included:",
              features: ['Up to 5 projects', 'Core features access', 'Email support', 'Basic analytics', 'Monthly updates']
            },
            {
              id: 'professional',
              tag: 'Professional Plan',
              tagIcon: Star,
              price: '$299',
              period: '/month',
              description: 'Ideal for growing teams needing advanced capabilities',
              button: {text: 'Choose Plan', href: 'contact'},
              featuresTitle: "What's Included:",
              features: ['Unlimited projects', 'All advanced features', 'Priority email & chat support', 'Advanced analytics & reports', 'API access', 'Team collaboration tools', 'Weekly updates']
            },
            {
              id: 'enterprise',
              tag: 'Enterprise Plan',
              price: 'Custom',
              period: '/quote',
              description: 'For organizations requiring custom solutions and dedicated support',
              button: {text: 'Request Demo', href: 'contact'},
              featuresTitle: "What's Included:",
              features: ['Custom integrations', 'Dedicated account manager', '24/7 premium support', 'Custom analytics & AI insights', 'Security & compliance certifications', 'White-label options', 'Real-time updates & priority features']
            }
          ]}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardSeven
          title="Featured Products"
          description="Explore our curated selection of premium products designed to deliver exceptional value and performance."
          tag="Our Collection"
          tagIcon={Package}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          gridVariant="uniform-all-items-equal"
          products={[
            {
              id: '1',
              name: 'Pro Solution Suite',
              price: '$1,299',
              imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707505444-yu789aah.jpg',
              imageAlt: 'Pro Solution Suite product'
            },
            {
              id: '2',
              name: 'Essential Toolkit',
              price: '$799',
              imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707506108-ey4rtrdz.jpg',
              imageAlt: 'Essential Toolkit product'
            },
            {
              id: '3',
              name: 'Advanced Platform',
              price: '$1,599',
              imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707507067-q7h5qjy2.jpg',
              imageAlt: 'Advanced Platform product'
            },
            {
              id: '4',
              name: 'Starter Package',
              price: '$499',
              imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707508026-rzl6fs94.jpg',
              imageAlt: 'Starter Package product'
            }
          ]}
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardTen
          title="Meet Our Exceptional Team"
          tag="Leadership"
          memberVariant="card"
          useInvertedBackground="noInvert"
          members={[
            {
              id: '1',
              name: 'Alexandra Chen',
              imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707516015-fkvr74wb.jpg',
              imageAlt: 'Alexandra Chen, Founder & CEO'
            },
            {
              id: '2',
              name: 'Marcus Rodriguez',
              imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707516587-6e5udn4d.jpg',
              imageAlt: 'Marcus Rodriguez, Chief Technology Officer'
            },
            {
              id: '3',
              name: 'Emma Thompson',
              imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707517310-bmormdcr.jpg',
              imageAlt: 'Emma Thompson, Head of Design'
            },
            {
              id: '4',
              name: 'James Park',
              imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707518288-rwqzte6l.jpg',
              imageAlt: 'James Park, VP of Business Development'
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardNine
          title="Trusted by Industry Leaders"
          description="Discover what our satisfied customers have to say about their experience with our solutions."
          tag="Customer Success"
          tagIcon={Award}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: '1',
              quote: 'This solution transformed our entire operation. The results exceeded our expectations in just the first month. Exceptional quality and support.',
              name: 'Sarah Johnson',
              role: 'CEO at TechVision Inc.',
              imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707511590-ys5q268i.jpg',
              imageAlt: 'Sarah Johnson headshot'
            },
            {
              id: '2',
              quote: 'Outstanding platform with incredible features. The team\'s dedication to customer success is unmatched. Highly recommended for any growing business.',
              name: 'Michael Chen',
              role: 'Product Manager at InnovateLab',
              imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707512375-5uxmzsjq.jpg',
              imageAlt: 'Michael Chen headshot'
            },
            {
              id: '3',
              quote: 'Professional, reliable, and packed with powerful features. This has become an essential tool for our daily operations. Best investment we made.',
              name: 'Emily Rodriguez',
              role: 'Operations Director at GrowthCo',
              imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707513341-no1hcfqx.jpg',
              imageAlt: 'Emily Rodriguez headshot'
            },
            {
              id: '4',
              quote: 'The implementation was seamless and the ROI was immediate. The platform\'s flexibility allows us to scale effortlessly as we grow our business.',
              name: 'David Kim',
              role: 'Founder at StartupXYZ',
              imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707513887-mw7rlupn.jpg',
              imageAlt: 'David Kim headshot'
            },
            {
              id: '5',
              quote: 'Excellent support team and intuitive interface. They truly understand our business needs and continue to innovate with features we actually use.',
              name: 'Jessica Martinez',
              role: 'Chief Operating Officer at Enterprise Solutions',
              imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707514660-4p7l6a6w.jpg',
              imageAlt: 'Jessica Martinez headshot'
            },
            {
              id: '6',
              quote: 'A game-changer for our industry. The quality is exceptional, and the pricing is fair. We\'ve recommended it to several partners already.',
              name: 'Robert Williams',
              role: 'Executive at Global Innovations',
              imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707515360-zek3jvis.jpg',
              imageAlt: 'Robert Williams headshot'
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardEight
          title="Proven Track Record of Excellence and Innovation"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707525130-4nqyq516.jpg"
          imageAlt="Success metrics and achievements"
          useInvertedBackground="noInvert"
          metrics={[
            {
              id: '1',
              value: '10K+',
              title: 'Active Customers Worldwide'
            },
            {
              id: '2',
              value: '99.9%',
              title: 'Uptime Guarantee'
            },
            {
              id: '3',
              value: '50M+',
              title: 'Transactions Processed'
            },
            {
              id: '4',
              value: '150+',
              title: 'Countries Served'
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Get in Touch with Our Team"
          description="Have questions or ready to transform your business? Reach out to us today and let's start a conversation about your success."
          useInvertedBackground="noInvert"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707510736-xns3qnwx.jpg"
          imageAlt="Professional contact support"
          mediaPosition="right"
          buttonText="Send Message"
          inputs={[
            {name: 'fullName', type: 'text', placeholder: 'Full Name', required: true},
            {name: 'email', type: 'email', placeholder: 'Email Address', required: true},
            {name: 'company', type: 'text', placeholder: 'Company Name', required: false},
            {name: 'phone', type: 'tel', placeholder: 'Phone Number', required: false}
          ]}
          textarea={{
            name: 'message',
            placeholder: 'Tell us about your needs and how we can help...',
            required: true
          }}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Webild"
        />
      </div>
    </ThemeProvider>
  );
}
