"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import AboutPhoneTimeline from '@/components/sections/about/AboutPhoneTimeline';
import FeatureCardEleven from '@/components/sections/feature/FeatureCardEleven';
import PricingCardSeven from '@/components/sections/pricing/PricingCardSeven';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBaseSocial from '@/components/sections/footer/FooterBaseSocial';
import { Sparkles, Zap, DollarSign, Heart, HelpCircle, Twitter, Linkedin, Github, Globe } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="largeSmallSizeLargeTitles"
      background="floatingGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="outline"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="SaaS Platform"
          navItems={[
            { name: "Features", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "About", id: "about" },
            { name: "Testimonials", id: "testimonials" },
            { name: "FAQ", id: "faq" }
          ]}
          button={{ text: "Get Started", href: "contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardRotatedCarousel
          title="Empower Your Workflow with Intelligent Automation"
          description="Transform how your team works. Our SaaS platform combines powerful automation, real-time collaboration, and enterprise-grade security to accelerate productivity and drive growth."
          tag="Trusted by 5000+ Companies"
          tagIcon={Sparkles}
          buttons={[
            { text: "Start Free Trial", href: "contact" },
            { text: "View Demo", onClick: () => {} }
          ]}
          carouselItems={[
            {
              id: "1",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766735978956-mbp7zxok.jpg",
              imageAlt: "Analytics Dashboard"
            },
            {
              id: "2",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850772701-1dk6gvyf.jpg",
              imageAlt: "Data Visualization"
            },
            {
              id: "3",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850774067-2ykbdnfh.jpg",
              imageAlt: "Team Collaboration"
            },
            {
              id: "4",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766400733690-y49703av.jpg",
              imageAlt: "Workflow Automation"
            },
            {
              id: "5",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766320177542-9om9tyxf.jpg",
              imageAlt: "API Integration"
            },
            {
              id: "6",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850774926-yvdgf8eg.jpg",
              imageAlt: "Enterprise Security"
            }
          ]}
          autoPlay={true}
          autoPlayInterval={4000}
        />
      </div>

      <div id="about" data-section="about">
        <AboutPhoneTimeline
          tag="What We Do"
          title="Built for Modern Teams"
          description="Our platform streamlines complex workflows, eliminates bottlenecks, and enables teams to focus on what matters most. With intuitive design and powerful automation, you'll see productivity gains from day one."
          phoneOne={{
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850776076-u0aa01wz.jpg",
            imageAlt: "Mobile app dashboard view"
          }}
          phoneTwo={{
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766347536220-k0f3hjlf.jpg",
            imageAlt: "Mobile app collaboration features"
          }}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          buttons={[{ text: "Learn More", href: "#" }]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardEleven
          title="Powerful Features, Simple Interface"
          description="Everything you need to build, automate, and scale your operations in one unified platform."
          tag="Key Capabilities"
          tagIcon={Zap}
          features={[
            {
              id: 1,
              title: "Intelligent Automation",
              description: "Automate repetitive tasks and workflows with AI-powered rules. Save your team hundreds of hours per month with smart automation that learns from your patterns.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766400733690-y49703av.jpg"
            },
            {
              id: 2,
              title: "Real-Time Collaboration",
              description: "Keep your entire team in sync with live updates, comments, and activity feeds. Work together seamlessly regardless of location or time zone.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850774067-2ykbdnfh.jpg"
            },
            {
              id: 3,
              title: "Advanced Analytics",
              description: "Gain deep insights into your operations with customizable dashboards and real-time reporting. Make data-driven decisions with confidence.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766735978956-mbp7zxok.jpg"
            }
          ]}
          animationType="opacity"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          usePrimaryButtonImage={false}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardSeven
          title="Simple, Transparent Pricing"
          description="Choose the plan that fits your needs. Always know what you're paying with no hidden fees."
          tag="Plans"
          tagIcon={DollarSign}
          plans={[
            {
              id: "starter",
              tag: "STARTER",
              pricingOptions: [
                { value: "monthly", label: "Monthly", price: "$99", subtitle: "Per Month" },
                { value: "yearly", label: "Yearly", price: "$990", subtitle: "Per Year" }
              ],
              defaultOption: "yearly",
              selectorNote: "Save 17% with yearly",
              description: "Perfect for small teams getting started. Includes core features and up to 3 team members.",
              buttons: [{ text: "Start Free Trial", href: "contact" }]
            },
            {
              id: "pro",
              tag: "MOST POPULAR",
              pricingOptions: [
                { value: "monthly", label: "Monthly", price: "$299", subtitle: "Per Month" },
                { value: "yearly", label: "Yearly", price: "$2990", subtitle: "Per Year" }
              ],
              defaultOption: "yearly",
              selectorNote: "Save 17% with yearly",
              description: "For growing teams. Advanced automation, unlimited team members, and priority support.",
              buttons: [{ text: "Start Free Trial", href: "contact" }]
            },
            {
              id: "enterprise",
              tag: "ENTERPRISE",
              pricingOptions: [
                { value: "monthly", label: "Monthly", price: "Custom", subtitle: "Contact Sales" },
                { value: "yearly", label: "Yearly", price: "Custom", subtitle: "Contact Sales" }
              ],
              defaultOption: "monthly",
              description: "For large organizations. Custom solutions, dedicated support, and enterprise security.",
              buttons: [{ text: "Contact Sales", href: "contact" }]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTen
          title="Loved by Teams Worldwide"
          description="See how industry leaders are transforming their operations with our platform."
          tag="Testimonials"
          tagIcon={Heart}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",
              title: "Increased Productivity by 40%",
              quote: "Since implementing this platform, our team has been able to focus on strategic initiatives instead of manual tasks. The automation features alone have saved us thousands of hours.",
              name: "Sarah Mitchell",
              role: "CEO",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850777333-gk776zjh.jpg",
              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",
              title: "Game Changer for Remote Teams",
              quote: "The collaboration features are intuitive and seamless. Our distributed team now feels more connected than ever. It's like having everyone in the same office.",
              name: "Michael Chen",
              role: "CTO",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140101670-ttp7xdlv.jpg",
              imageAlt: "Michael Chen"
            },
            {
              id: "3",
              title: "Enterprise Grade, Startup Friendly",
              quote: "We needed enterprise security without the enterprise complexity. This platform delivered exactly that. Implementation was smooth and support was exceptional.",
              name: "Emily Rodriguez",
              role: "Operations Director",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184707769-zzdny5qa.jpg",
              imageAlt: "Emily Rodriguez"
            },
            {
              id: "4",
              title: "ROI Within First Month",
              quote: "The investment paid for itself within the first month through improved efficiency. The analytics dashboard gives us visibility we never had before.",
              name: "David Kim",
              role: "Product Manager",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766320178642-9c2nk7ji.jpg",
              imageAlt: "David Kim"
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Everything you need to know about our platform and pricing."
          tag="Help"
          tagIcon={HelpCircle}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",
              title: "How quickly can we get started?",
              content: "You can be up and running in minutes. Our onboarding wizard walks you through setup, and our customer success team is available to help with implementation. Most teams are productive within their first day."
            },
            {
              id: "2",
              title: "What integrations do you support?",
              content: "We integrate with 500+ popular applications including Slack, Microsoft Teams, Salesforce, HubSpot, Zapier, and more. We also offer a comprehensive REST API for custom integrations."
            },
            {
              id: "3",
              title: "Is my data secure?",
              content: "Yes. We use enterprise-grade encryption, SOC 2 Type II compliance, and regular security audits. All data is encrypted in transit and at rest. We never access your data without permission."
            },
            {
              id: "4",
              title: "Can I try before buying?",
              content: "Absolutely. All plans come with a 14-day free trial requiring no credit card. You get access to all features so you can test everything before committing."
            },
            {
              id: "5",
              title: "What's your uptime guarantee?",
              content: "We guarantee 99.9% uptime with our SLA. Our infrastructure is built on enterprise-grade cloud providers with automatic failover and redundancy."
            },
            {
              id: "6",
              title: "Do you offer dedicated support?",
              content: "Yes. Pro and Enterprise plans include priority email support with 4-hour response time. Enterprise customers receive dedicated account managers and 24/7 phone support."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Get Started Today"
          description="Join thousands of teams already transforming their workflow. Start your free 14-day trial with no credit card required."
          inputs={[
            { name: "name", type: "text", placeholder: "Your Name", required: true },
            { name: "email", type: "email", placeholder: "your@email.com", required: true }
          ]}
          textarea={{
            name: "message",
            placeholder: "Tell us about your team and goals...",
            rows: 5,
            required: false
          }}
          useInvertedBackground="noInvert"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766735976207-aze9gss7.jpg"
          mediaPosition="right"
          buttonText="Start Free Trial"
          onSubmit={() => {}}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseSocial
          description="The intelligent platform for modern teams. Automate workflows, collaborate seamlessly, and scale with confidence."
          logoText="SaaS Platform"
          copyrightText="© 2025 SaaS Platform. All rights reserved."
          columns={[
            {
              title: "Product",
              items: [
                { label: "Features", href: "features" },
                { label: "Pricing", href: "pricing" },
                { label: "Security", href: "#" },
                { label: "Status", href: "https://status.example.com" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About", href: "about" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Contact", href: "contact" }
              ]
            },
            {
              title: "Legal",
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" }
              ]
            }
          ]}
          socialLinks={[
            { icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
            { icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" },
            { icon: Github, href: "https://github.com", ariaLabel: "GitHub" },
            { icon: Globe, href: "https://example.com", ariaLabel: "Website" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}