"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactText from '@/components/sections/contact/ContactText';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Sparkles, Zap, Gift, DollarSign, TrendingUp, Heart, Users, HelpCircle, Rocket, Star } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="small"
      sizing="mediumSizeLargeTitles"
      background="floatingGradient"
      cardStyle="gradient-mesh"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: 'Features', id: 'features' },
            { name: 'Pricing', id: 'pricing' },
            { name: 'Testimonials', id: 'testimonials' },
            { name: 'FAQ', id: 'faq' },
            { name: 'Contact', id: 'contact' }
          ]}
          brandName="LoyalHub"
          bottomLeftText="Shopify Loyalty Platform"
          bottomRightText="hello@loyalhub.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitDoubleCarousel
          title="Build Customer Loyalty That Drives Growth"
          description="Transform customer engagement with LoyalHub, the most intuitive Shopify loyalty app. Create powerful reward programs, track customer lifetime value, and automate retention—all without coding."
          tag="Shopify Loyalty Platform"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          background={{ variant: 'glowing-orb' }}
          leftCarouselItems={[
            { imageSrc: 'http://img.b2bpic.net/free-photo/promotion-fare-deal-sale-special-offer_53876-124939.jpg', imageAlt: 'Loyalty dashboard interface' },
            { imageSrc: 'http://img.b2bpic.net/free-vector/course-application_23-2148676845.jpg', imageAlt: 'Points and rewards system' },
            { imageSrc: 'http://img.b2bpic.net/free-vector/dashboard-user-panel-template_23-2148370476.jpg', imageAlt: 'Customer analytics dashboard' },
            { imageSrc: 'http://img.b2bpic.net/free-vector/purchase-online-app-concept-pack_23-2148650966.jpg', imageAlt: 'Shopify app integration' }
          ]}
          rightCarouselItems={[
            { imageSrc: 'http://img.b2bpic.net/free-vector/purchase-online-onboarding-app-screens_23-2148393184.jpg', imageAlt: 'Rewards redemption interface' },
            { imageSrc: 'http://img.b2bpic.net/free-photo/side-view-adult-paying-with-card_23-2150347020.jpg', imageAlt: 'Mobile loyalty app' },
            { imageSrc: 'http://img.b2bpic.net/free-photo/young-woman-analysing-charts-laptop-start-up-business-meeting-room_482257-5026.jpg', imageAlt: 'Business analytics reporting' },
            { imageSrc: 'http://img.b2bpic.net/free-vector/purchase-online-concept-app_23-2148651948.jpg', imageAlt: 'Shopify app store listing' }
          ]}
          buttons={[
            { text: 'Start Free Trial', href: 'https://apps.shopify.com/loyalhub' },
            { text: 'Watch Demo', href: '#' }
          ]}
          buttonAnimation="slide-up"
          carouselPosition="right"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentyOne
          title="Powerful Features Built for Modern Stores"
          description="Everything you need to create and manage a world-class loyalty program. Flexible, easy to use, and built to scale with your business."
          tag="Core Features"
          tagIcon={Zap}
          tagAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-vector/fitness-mobile-app-infographic-template-flat-style_23-2148219823.jpg"
          imageAlt="LoyalHub feature dashboard"
          mediaAnimation="slide-up"
          accordionItems={[
            {
              id: '1',
              title: 'Customizable Point Systems',
              content: 'Create flexible reward structures that match your business model. Set point values, earning rules, bonus multipliers, and redemption options without touching code.'
            },
            {
              id: '2',
              title: 'Automated Tier Management',
              content: 'Design tiered loyalty programs where customers unlock benefits as they spend. Automatically move customers between tiers with customizable thresholds and exclusive perks.'
            },
            {
              id: '3',
              title: 'Real-Time Analytics & Insights',
              content: 'Track customer engagement, redemption rates, and program ROI in real-time. Get actionable insights to optimize your loyalty strategy and maximize lifetime value.'
            },
            {
              id: '4',
              title: 'Seamless Shopify Integration',
              content: 'One-click installation with automatic data sync. Works with all Shopify themes and doesn\'t require manual configuration or technical setup.'
            },
            {
              id: '5',
              title: 'Mobile App & Widget',
              content: 'Give customers easy access to their points and rewards through a dedicated mobile app or embeddable store widget for maximum engagement.'
            },
            {
              id: '6',
              title: 'Advanced Automation Rules',
              content: 'Set up sophisticated automation for point allocation, bonus campaigns, anniversary rewards, and VIP status changes based on customer behavior.'
            }
          ]}
          buttons={[
            { text: 'Explore Features', href: '#pricing' }
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
          mediaPosition="left"
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardTwo
          title="Loyalty Program Plans for Every Business"
          description="Choose the perfect plan to grow your customer base and increase retention rates."
          tag="Program Options"
          tagIcon={Gift}
          tagAnimation="slide-up"
          products={[
            {
              id: '1',
              brand: 'LoyalHub',
              name: 'Standard Point System',
              price: '$99/month',
              rating: 5,
              reviewCount: '1.2k',
              imageSrc: 'http://img.b2bpic.net/free-photo/medium-shot-women-scanning-qr-code_23-2149303396.jpg',
              imageAlt: 'Standard loyalty program'
            },
            {
              id: '2',
              brand: 'LoyalHub',
              name: 'Premium Tier Program',
              price: '$199/month',
              rating: 5,
              reviewCount: '2.8k',
              imageSrc: 'http://img.b2bpic.net/free-photo/medium-shot-women-scanning-qr-code_23-2149303396.jpg',
              imageAlt: 'Premium tier loyalty program'
            },
            {
              id: '3',
              brand: 'LoyalHub',
              name: 'Enterprise Solutions',
              price: 'Custom',
              rating: 5,
              reviewCount: '890',
              imageSrc: 'http://img.b2bpic.net/free-photo/medium-shot-women-scanning-qr-code_23-2149303396.jpg',
              imageAlt: 'Enterprise loyalty solutions'
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          buttons={[
            { text: 'View Plans', href: '#pricing' }
          ]}
          buttonAnimation="slide-up"
          gridVariant="three-columns-all-equal-width"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardEight
          title="Simple, Transparent Pricing"
          description="No setup fees. No hidden charges. Pay only for what you use. Cancel anytime."
          tag="Pricing"
          tagIcon={DollarSign}
          tagAnimation="slide-up"
          plans={[
            {
              id: 'startup',
              badge: 'Best for Startups',
              badgeIcon: Rocket,
              price: '$99/month',
              subtitle: 'Perfect for growing brands',
              buttons: [
                { text: 'Start Free Trial', href: 'https://apps.shopify.com/loyalhub' }
              ],
              features: [
                'Up to 5,000 customers',
                'Unlimited transactions',
                'Basic analytics dashboard',
                'Email support',
                'Mobile app access',
                '1 month free trial'
              ]
            },
            {
              id: 'business',
              badge: 'Most Popular',
              badgeIcon: Star,
              price: '$299/month',
              subtitle: 'For established e-commerce stores',
              buttons: [
                { text: 'Start Free Trial', href: 'https://apps.shopify.com/loyalhub' }
              ],
              features: [
                'Up to 50,000 customers',
                'Tier management system',
                'Advanced analytics',
                'Priority support',
                'API access',
                'Custom branding',
                'Automation workflows'
              ]
            },
            {
              id: 'enterprise',
              badge: 'For Scale',
              badgeIcon: Zap,
              price: 'Custom Pricing',
              subtitle: 'Unlimited growth for large enterprises',
              buttons: [
                { text: 'Contact Sales', href: '#contact' }
              ],
              features: [
                'Unlimited customers',
                'Multi-program support',
                'Dedicated account manager',
                '24/7 phone support',
                'Custom integrations',
                'White-label options',
                'SLA guarantee'
              ]
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          buttons={[
            { text: 'Compare Plans', href: '#' }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          title="Results That Speak for Themselves"
          description="See the measurable impact LoyalHub delivers for thousands of merchants worldwide."
          tag="Impact"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          metrics={[
            {
              id: '1',
              value: '35%',
              title: 'Repeat Purchase Increase',
              description: 'Average uplift in customer repeat purchases within 3 months',
              imageSrc: 'http://img.b2bpic.net/free-photo/close-up-digital-tablet-with-bar-graph_1098-3523.jpg',
              imageAlt: 'Business growth metrics'
            },
            {
              id: '2',
              value: '2.8x',
              title: 'Higher AOV',
              description: 'Loyalty members spend 2.8x more per transaction than non-members',
              imageSrc: 'http://img.b2bpic.net/free-photo/happy-female-office-workers-thumbing-up-smiling-two-cheerful-professional-businesswomen-standing-together-posing-meeting-room-teamwork-business-success-cooperation-concept_74855-7378.jpg',
              imageAlt: 'Customer satisfaction metrics'
            },
            {
              id: '3',
              value: '42%',
              title: 'Reduced Churn',
              description: 'Lower customer churn rate compared to stores without loyalty programs',
              imageSrc: 'http://img.b2bpic.net/free-photo/close-up-digital-tablet-with-bar-graph_1098-3523.jpg',
              imageAlt: 'Retention improvement'
            },
            {
              id: '4',
              value: '5M+',
              title: 'Rewards Redeemed',
              description: 'Total rewards successfully redeemed across our platform',
              imageSrc: 'http://img.b2bpic.net/free-photo/happy-female-office-workers-thumbing-up-smiling-two-cheerful-professional-businesswomen-standing-together-posing-meeting-room-teamwork-business-success-cooperation-concept_74855-7378.jpg',
              imageAlt: 'Rewards redemption volume'
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwo
          title="Loved by Top E-Commerce Brands"
          description="Join thousands of Shopify stores using LoyalHub to build lasting customer relationships."
          tag="Success Stories"
          tagIcon={Heart}
          tagAnimation="slide-up"
          testimonials={[
            {
              id: '1',
              name: 'Sarah Chen',
              role: 'Founder & CEO',
              testimonial: 'LoyalHub transformed how we engage customers. Our repeat purchase rate jumped 40% in just 3 months. The analytics dashboard alone saves us countless hours.',
              imageSrc: 'http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg',
              imageAlt: 'Sarah Chen portrait'
            },
            {
              id: '2',
              name: 'Michael Torres',
              role: 'E-commerce Manager',
              testimonial: 'The setup was seamless. Within days, we had our loyalty program running. The customer support team is fantastic and always available when we need help.',
              imageSrc: 'http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg',
              imageAlt: 'Michael Torres portrait'
            },
            {
              id: '3',
              name: 'Jessica Palmer',
              role: 'Store Owner',
              testimonial: 'Best decision we made for our store. LoyalHub\'s tier system keeps customers engaged and coming back. The ROI speaks for itself.',
              imageSrc: 'http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg',
              imageAlt: 'Jessica Palmer portrait'
            },
            {
              id: '4',
              name: 'David Nakamura',
              role: 'Marketing Director',
              testimonial: 'The automation features save us hours every week. We can focus on strategy while LoyalHub handles the complex loyalty logistics.',
              imageSrc: 'http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg',
              imageAlt: 'David Nakamura portrait'
            },
            {
              id: '5',
              name: 'Emma Robinson',
              role: 'Retail Entrepreneur',
              testimonial: 'I was skeptical at first, but the data showed immediate improvement in customer retention. Highly recommend to any Shopify store owner.',
              imageSrc: 'http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg',
              imageAlt: 'Emma Robinson portrait'
            },
            {
              id: '6',
              name: 'James Wilson',
              role: 'Operations Lead',
              testimonial: 'The level of customization is incredible. We built exactly the program our customers wanted without needing developers. Outstanding platform.',
              imageSrc: 'http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg',
              imageAlt: 'James Wilson portrait'
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          buttons={[
            { text: 'Read More Stories', href: '#' }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="socialproof" data-section="socialproof">
        <SocialProofOne
          title="Trusted by Thousands of Merchants"
          description="LoyalHub powers loyalty programs for e-commerce stores of all sizes."
          tag="Partnerships"
          tagIcon={Users}
          tagAnimation="slide-up"
          names={['Shopify', 'Stripe', 'Amazon', 'Apple', 'Google', 'Microsoft', 'PayPal', 'Square']}
          logos={[
            'http://img.b2bpic.net/free-vector/gradient-mobile-store-logo-design_23-2149699536.jpg',
            'http://img.b2bpic.net/free-vector/creative-data-logo-template_23-2149213542.jpg',
            'http://img.b2bpic.net/free-vector/green-background-cyber-monday-flat-style_23-2147575816.jpg',
            'http://img.b2bpic.net/free-photo/tablet-smartphones-watches_23-2147791601.jpg',
            'http://img.b2bpic.net/free-photo/automation-modern-technology-machine-concept_53876-120607.jpg',
            'http://img.b2bpic.net/free-vector/logo-with-blue-orange-cloud_1071-109.jpg',
            'http://img.b2bpic.net/free-vector/logo-with-letter-p-white-background_698780-979.jpg',
            'http://img.b2bpic.net/free-vector/logo-template-design_1156-837.jpg'
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          speed={40}
          showCard={true}
          buttons={[
            { text: 'Join Thousands', href: '#pricing' }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Everything you need to know about LoyalHub and how it can transform your store."
          tag="Help & Support"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          faqs={[
            {
              id: '1',
              title: 'How long does it take to set up LoyalHub?',
              content: 'Setup takes less than 5 minutes. Simply install from the Shopify App Store, configure your reward structure, and you\'re ready to go. No coding required. Most merchants have their program live within hours.'
            },
            {
              id: '2',
              title: 'Can I customize the loyalty program to match my brand?',
              content: 'Absolutely. LoyalHub offers extensive customization options including branded mobile apps, custom colors, messaging, reward names, and tier structures. Enterprise customers can even white-label the entire solution.'
            },
            {
              id: '3',
              title: 'How does LoyalHub handle customer data and privacy?',
              content: 'We take privacy seriously. LoyalHub is fully GDPR compliant, PCI DSS Level 1 certified, and follows SOC 2 standards. All customer data is encrypted and stored securely. You maintain complete control over customer information.'
            },
            {
              id: '4',
              title: 'Does LoyalHub work with my existing apps?',
              content: 'Yes. LoyalHub integrates seamlessly with most popular Shopify apps including email marketing platforms, SMS tools, CRM systems, and accounting software. We also offer a full API for custom integrations.'
            },
            {
              id: '5',
              title: 'What analytics and reporting features are included?',
              content: 'Our dashboard provides real-time analytics including program performance, customer engagement metrics, redemption rates, customer lifetime value, cohort analysis, and detailed reporting. Export reports in multiple formats.'
            },
            {
              id: '6',
              title: 'Is there a free trial? What if I want to cancel?',
              content: 'Yes, we offer a 30-day free trial with full access to all features. No credit card required. You can cancel anytime without penalties. Your customer data is always yours to export.'
            }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/sales-assistant-being-employed-customer-care-support-job-working-telemarketing-call-center-helpdesk-female-receptionist-with-helpline-service-helping-clients-remote-communication_482257-43021.jpg"
          imageAlt="Customer support illustration"
          mediaAnimation="slide-up"
          mediaPosition="left"
          textboxLayout="default"
          faqsAnimation="slide-up"
          useInvertedBackground={false}
          buttons={[
            { text: 'Contact Support', href: '#contact' }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to transform your customer loyalty? Join thousands of successful merchants using LoyalHub to drive growth and retention."
          animationType="entrance-slide"
          buttons={[
            { text: 'Start Free Trial', href: 'https://apps.shopify.com/loyalhub' },
            { text: 'Schedule Demo', href: '#' }
          ]}
          background={{ variant: 'glowing-orb' }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="http://img.b2bpic.net/free-photo/corporate-woman-employee-receiving-food-delivery-her-desk_482257-122580.jpg"
          imageAlt="Team collaborating at modern office"
          columns={[
            {
              title: 'Product',
              items: [
                { label: 'Features', href: '#features' },
                { label: 'Pricing', href: '#pricing' },
                { label: 'Security', href: '#' },
                { label: 'Updates', href: '#' }
              ]
            },
            {
              title: 'Company',
              items: [
                { label: 'About Us', href: '#' },
                { label: 'Blog', href: '#' },
                { label: 'Careers', href: '#' },
                { label: 'Press', href: '#' }
              ]
            },
            {
              title: 'Support',
              items: [
                { label: 'Help Center', href: '#' },
                { label: 'Contact Us', href: '#contact' },
                { label: 'Status Page', href: '#' },
                { label: 'Documentation', href: '#' }
              ]
            }
          ]}
          logoText="LoyalHub"
          copyrightText="© 2025 LoyalHub. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}
