"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Award, DollarSign, MessageCircle, Sparkles, Star, TrendingUp, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="mediumSizeLargeTitles"
      background="circleGradient"
      cardStyle="glass-depth"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="SaaSFlow"
          navItems={[
            { name: "Features", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardRotatedCarousel
          title="The Platform for Modern Teams"
          description="Streamline your workflow, boost productivity, and collaborate seamlessly with intelligent automation and real-time insights."
          tag="Launch Your Potential"
          tagIcon={Sparkles}
          background={{ variant: "circleGradient" }}
          buttons={[
            { text: "Start Free Trial", href: "#" },
            { text: "Watch Demo", href: "#" }
          ]}
          carouselItems={[
            {
              id: "1",              imageSrc: "https://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg",              imageAlt: "Dashboard Overview"
            },
            {
              id: "2",              imageSrc: "https://img.b2bpic.net/free-photo/business-leader-trader-searching-new-investment-solution_482257-116895.jpg",              imageAlt: "User Interface"
            },
            {
              id: "3",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-modern-laptop-with-rate-charts-display-while-man-woman-working-business-project-design-computer-screen-with-data-chart-information-finance-analysis-desk_482257-40065.jpg",              imageAlt: "Analytics Dashboard"
            },
            {
              id: "4",              imageSrc: "https://img.b2bpic.net/free-photo/goal-oriented-entrepreneur-luxurious-corporate-office-plans-strategy_482257-128191.jpg",              imageAlt: "Team Collaboration"
            },
            {
              id: "5",              imageSrc: "https://img.b2bpic.net/free-photo/business-analyst-meeting-with-coworker-review-financial-report_482257-123652.jpg",              imageAlt: "Productivity Tools"
            },
            {
              id: "6",              imageSrc: "https://img.b2bpic.net/free-photo/ambitious-leader-works-office-infographics-reports-setting-objectives_482257-116840.jpg",              imageAlt: "Workflow Automation"
            }
          ]}
          autoPlay={true}
          autoPlayInterval={4000}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentyOne
          title="Powerful Features Built for Scale"
          description="Everything you need to transform your workflow and drive business growth."
          tag="Features"
          tagIcon={Zap}
          imageSrc="https://img.b2bpic.net/free-photo/standard-quality-control-collage-concept_23-2149595844.jpg"
          imageAlt="Feature showcase"
          useInvertedBackground="noInvert"
          mediaPosition="left"
          accordionItems={[
            {
              id: "1",              title: "Intelligent Automation",              content: "Automate repetitive tasks and complex workflows with AI-powered suggestions. Reduce manual work by up to 80% and focus on what matters most."
            },
            {
              id: "2",              title: "Seamless Integration",              content: "Connect with 500+ tools and platforms through native integrations and open APIs. Build custom workflows without leaving your workspace."
            },
            {
              id: "3",              title: "Real-time Collaboration",              content: "Work together in real-time with live editing, comments, and mentions. Keep your team in sync across time zones and departments."
            },
            {
              id: "4",              title: "Advanced Security",              content: "Enterprise-grade encryption, SSO, and compliance with GDPR, SOC 2, and ISO 27001. Your data is always protected and audited."
            }
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardThree
          title="Simple, Transparent Pricing"
          description="Choose the perfect plan for your team. All plans include a 14-day free trial, no credit card required."
          tag="Pricing"
          tagIcon={DollarSign}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          plans={[
            {
              id: "1",              price: "$29/mo",              name: "Starter",              buttons: [
                { text: "Get Started", href: "#" },
                { text: "Contact Sales", href: "#" }
              ],
              features: [
                "Up to 5 team members",                "Basic automation",                "50 GB storage",                "Email support",                "Integrations with 50+ tools"
              ]
            },
            {
              id: "2",              badge: "Most Popular",              badgeIcon: Star,
              price: "$99/mo",              name: "Professional",              buttons: [
                { text: "Get Started", href: "#" },
                { text: "Contact Sales", href: "#" }
              ],
              features: [
                "Up to 25 team members",                "Advanced automation",                "500 GB storage",                "Priority support",                "All integrations + API access",                "Custom workflows",                "Advanced analytics"
              ]
            },
            {
              id: "3",              price: "$299/mo",              name: "Enterprise",              buttons: [
                { text: "Contact Sales", href: "#" },
                { text: "Schedule Demo", href: "#" }
              ],
              features: [
                "Unlimited team members",                "AI-powered automation",                "Unlimited storage",                "24/7 phone + email support",                "Dedicated account manager",                "Custom integrations",                "SSO & advanced security",                "SLA guarantee"
              ]
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="About Us"
          tagIcon={Award}
          title="Built by Teams, for Teams"
          description="We started SaaSFlow because we knew there had to be a better way. Founded in 2020, our mission is to empower teams with intelligent tools that eliminate friction and unlock productivity. Today, we serve thousands of companies across 50+ countries."
          metrics={[
            { value: "50K+", title: "Active Users" },
            { value: "99.9%", title: "Uptime Guarantee" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/team-diverse-coworkers-modern-office-discuss-their-project-together_93675-133516.jpg"
          imageAlt="Our team at work"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTen
          title="Loved by Industry Leaders"
          description="See how companies are transforming their operations with SaaSFlow."
          tag="Testimonials"
          tagIcon={MessageCircle}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",              title: "Productivity Increased by 60%",              quote: "SaaSFlow transformed how our team works. The automation features alone saved us hundreds of hours every month. We couldn't imagine going back.",              name: "Sarah Johnson",              role: "CEO, TechVentures Inc",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Sarah Johnson"
            },
            {
              id: "2",              title: "Seamless Integration with Our Stack",              quote: "The API integrations are incredibly powerful. We connected SaaSFlow to all our existing tools in minutes. The support team was fantastic throughout.",              name: "Michael Chen",              role: "CTO, DataFlow Analytics",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg",              imageAlt: "Michael Chen"
            },
            {
              id: "3",              title: "Perfect for Remote Teams",              quote: "Real-time collaboration features keep our distributed team connected and aligned. The transparency and visibility we gained has been game-changing.",              name: "Emily Rodriguez",              role: "VP Operations, Global Solutions",              imageSrc: "https://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg",              imageAlt: "Emily Rodriguez"
            },
            {
              id: "4",              title: "Security You Can Trust",              quote: "Enterprise-grade security was a must for us. SaaSFlow's compliance certifications and audit trails gave us instant confidence in the platform.",              name: "David Kim",              role: "Head of Security, FinanceHub",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",              imageAlt: "David Kim"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="Why Teams Choose SaaSFlow"
          description="Proven results from thousands of companies worldwide"
          tag="Impact"
          tagIcon={TrendingUp}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
          metrics={[
            {
              id: "1",              value: "14 hours",              description: "Time saved per team member per week"
            },
            {
              id: "2",              value: "4.9/5",              description: "Average customer satisfaction rating"
            },
            {
              id: "3",              value: "80%",              description: "Faster project completion"
            },
            {
              id: "4",              value: "3M+",              description: "Tasks automated daily"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Get in Touch"
          description="Have questions? Our team is ready to help you succeed. Reach out for a personalized demo, pricing inquiry, or partnership opportunity."
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/man-executive-instructing-diverse-employees-new-modern-company-office-room-before-business-meeting-with-partners-analysing-reports-tablet_482257-5242.jpg"
          imageAlt="Contact us"
          mediaPosition="right"
          inputs={[
            {
              name: "name",              type: "text",              placeholder: "Your Name",              required: true
            },
            {
              name: "email",              type: "email",              placeholder: "Email Address",              required: true
            },
            {
              name: "company",              type: "text",              placeholder: "Company Name",              required: false
            }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us about your project or question...",            rows: 5,
            required: true
          }}
          buttonText="Send Message"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="SaaSFlow"
          columns={[
            {
              items: [
                { label: "Product", href: "#features" },
                { label: "Features", href: "#features" },
                { label: "Pricing", href: "#pricing" },
                { label: "Security", href: "#" }
              ]
            },
            {
              items: [
                { label: "Company", href: "#" },
                { label: "About", href: "#about" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" }
              ]
            },
            {
              items: [
                { label: "Support", href: "#" },
                { label: "Help Center", href: "#" },
                { label: "Contact", href: "#contact" },
                { label: "Status", href: "#" }
              ]
            },
            {
              items: [
                { label: "Legal", href: "#" },
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Compliance", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}