"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Building2, Globe, Sparkles, Star, TrendingUp, Users, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="largeSmallSizeLargeTitles"
      background="floatingGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Features", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" },
            { name: "Docs", id: "https://docs.example.com" }
          ]}
          brandName="CloudFlow"
          bottomLeftText="Global SaaS Platform"
          bottomRightText="hello@cloudflow.io"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="CloudFlow"
          description="Streamline your entire workflow with our intelligent SaaS platform. Automate tasks, gain insights, and collaborate seamlessly—all in one powerful tool."
          background={{ variant: "radial-gradient" }}
          buttons={[
            { text: "Start Free Trial", href: "#pricing" },
            { text: "Watch Demo", href: "#" }
          ]}
          layoutOrder="default"
          imageSrc="https://img.b2bpic.net/free-vector/dashboard-admin-panel-template_23-2148372587.jpg"
          imageAlt="CloudFlow dashboard interface"
          frameStyle="browser"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardOne
          title="Powerful Features"
          description="Everything you need to transform your business operations and drive growth"
          tag="Capabilities"
          tagIcon={Sparkles}
          textboxLayout="default"
          features={[
            {
              title: "Smart Automation",              description: "Eliminate repetitive tasks with intelligent workflow automation that learns from your patterns.",              imageSrc: "https://img.b2bpic.net/free-vector/professional-infographic-with-photo_23-2148331611.jpg",              imageAlt: "Automation workflow visualization"
            },
            {
              title: "Advanced Analytics",              description: "Get real-time insights with comprehensive dashboards that help you make data-driven decisions.",              imageSrc: "https://img.b2bpic.net/free-photo/business-concept-with-progress-close-up_23-2149151161.jpg",              imageAlt: "Analytics dashboard with charts"
            },
            {
              title: "Seamless Integration",              description: "Connect with 500+ tools and platforms. API-first architecture ensures smooth integration.",              imageSrc: "https://img.b2bpic.net/free-photo/programming-background-with-html_23-2150038862.jpg",              imageAlt: "Integration connections diagram"
            },
            {
              title: "Enterprise Security",              description: "Bank-level encryption and compliance with GDPR, SOC 2, and ISO 27001 standards.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-data-center-computer-scientist-using-tablet-deploying-servers-network-hardware-it_482257-135612.jpg",              imageAlt: "Security shield protection"
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Trusted by Industry Leaders"
          description="Join thousands of companies that are transforming their operations with CloudFlow"
          tag="Impact"
          tagIcon={TrendingUp}
          textboxLayout="default"
          metrics={[
            {
              id: "1",              icon: Users,
              title: "Active Users",              value: "50K+"
            },
            {
              id: "2",              icon: Building2,
              title: "Companies",              value: "8,000+"
            },
            {
              id: "3",              icon: Zap,
              title: "Tasks Automated",              value: "100M+"
            },
            {
              id: "4",              icon: Globe,
              title: "Countries",              value: "180+"
            }
          ]
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardFive
          title="Simple, Transparent Pricing"
          description="Choose the perfect plan for your team. Always flexible to scale as you grow."
          tag="Pricing"
          tagIcon={Zap}
          textboxLayout="default"
          animationType="slide-up"
          plans={[
            {
              id: "starter",              tag: "Starter Plan",              price: "$29",              period: "/month",              description: "Perfect for small teams getting started with automation",              button: {
                text: "Start Free Trial",                href: "#"
              },
              featuresTitle: "What's Included:",              features: [
                "Up to 10,000 monthly tasks",                "5 team members",                "Basic integrations",                "Email support",                "Core automation features"
              ]
            },
            {
              id: "professional",              tag: "Professional Plan",              tagIcon: Star,
              price: "$99",              period: "/month",              description: "Ideal for growing teams who need advanced features",              button: {
                text: "Start Free Trial",                href: "#"
              },
              featuresTitle: "Everything in Starter, plus:",              features: [
                "Up to 100,000 monthly tasks",                "Unlimited team members",                "Advanced analytics",                "Priority support",                "Custom integrations",                "Workflow templates"
              ]
            },
            {
              id: "enterprise",              tag: "Enterprise Plan",              price: "Custom",              period: "/month",              description: "For large organizations with specific requirements",              button: {
                text: "Schedule Demo",                href: "#"
              },
              featuresTitle: "Everything in Professional, plus:",              features: [
                "Unlimited monthly tasks",                "Dedicated account manager",                "Custom workflows",                "Advanced security features",                "SLA guarantee",                "On-premise deployment option"
              ]
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="Loved by Teams Everywhere"
          description="See what our customers have to say about transforming their workflow"
          tag="Testimonials"
          showRating={true}
          textboxLayout="default"
          animationType="slide-up"
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              handle: "@sarahjohnson",              testimonial: "CloudFlow reduced our task processing time by 70%. The automation features are intuitive and powerful. Highly recommend!",              rating: 5,
              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: "@mchen_tech",              testimonial: "The analytics dashboard gives us insights we never had before. Best investment our team has made this year.",              rating: 5,
              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",              name: "Emily Rodriguez",              handle: "@emilyrodriguez",              testimonial: "Integration was seamless and support was outstanding. CloudFlow has become essential to our daily operations.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",              imageAlt: "Emily Rodriguez"
            },
            {
              id: "4",              name: "David Kim",              handle: "@davidkim_io",              testimonial: "We scaled from 5 to 50 team members without any issues. CloudFlow scales with us perfectly.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg",              imageAlt: "David Kim"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Everything you need to know about CloudFlow"
          tag="Help"
          textboxLayout="default"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "How does the free trial work?",              content: "Our 14-day free trial gives you full access to all features. No credit card required. After the trial, you can choose a plan or cancel anytime."
            },
            {
              id: "2",              title: "Can I change plans anytime?",              content: "Absolutely! You can upgrade, downgrade, or cancel your plan at any time. Changes take effect immediately."
            },
            {
              id: "3",              title: "What integrations are available?",              content: "We support 500+ integrations including Slack, Zapier, Google Workspace, Salesforce, HubSpot, and many more. Custom APIs are also available."
            },
            {
              id: "4",              title: "Is my data secure?",              content: "Yes. We use bank-level encryption (AES-256), comply with GDPR, SOC 2 Type II, and ISO 27001. All data is encrypted in transit and at rest."
            },
            {
              id: "5",              title: "What's your support availability?",              content: "Starter plans get email support (24-48 hours). Professional plans get priority support (4 hours). Enterprise plans include dedicated account managers."
            },
            {
              id: "6",              title: "Can I export my data?",              content: "Yes. You can export all your data at any time in multiple formats (CSV, JSON, API). There are no export fees or limits."
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Ready to Get Started?"
          description="Join thousands of teams already using CloudFlow. Our onboarding specialist will help you set up in minutes."
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-vector/web-contact-form-template_23-2147608998.jpg"
          imageAlt="Contact form illustration"
          mediaPosition="right"
          buttonText="Send Message"
          inputs={[
            {
              name: "name",              type: "text",              placeholder: "Your Name",              required: true
            },
            {
              name: "email",              type: "email",              placeholder: "your@email.com",              required: true
            },
            {
              name: "company",              type: "text",              placeholder: "Company Name",              required: false
            },
            {
              name: "phone",              type: "tel",              placeholder: "+1 (555) 000-0000",              required: false
            }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us about your workflow and challenges...",            rows: 5,
            required: true
          }}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-vector/abstract-halftone-dots-background_1048-8194.jpg"
          imageAlt="Footer background"
          logoText="CloudFlow"
          copyrightText="© 2025 CloudFlow. All rights reserved."
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "#features" },
                { label: "Pricing", href: "#pricing" },
                { label: "Security", href: "#" },
                { label: "Roadmap", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About", href: "#" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Documentation", href: "#" },
                { label: "API Reference", href: "#" },
                { label: "Community", href: "#" },
                { label: "Support", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}