"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import TextAbout from '@/components/sections/about/TextAbout';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBase from '@/components/sections/footer/FooterBase';
import { ArrowRight, CheckCircle, Sparkles, Star, TrendingUp, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="medium"
      sizing="largeSizeMediumTitles"
      background="floatingGradient"
      cardStyle="inset"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={[
            { name: "Hero", id: "hero-section" },
            { name: "About", id: "about-section" },
            { name: "Feature", id: "features-section" },
            { name: "Testimonial", id: "testimonials-section" },
            { name: "Pricing", id: "pricing-section" },
            { name: "Contact", id: "contact-section" }
          ]}
          button={{
            text: "Get Started",            href: "#pricing-section"
          }}
          brandName="NoteAI Pro"
        />
      </div>

      <div id="hero-section" data-section="hero-section">
        <HeroBillboard
          title="Transform Your Workflow with AI-Powered Notes"
          description="Intelligent note-taking that adapts to your thinking. Capture ideas, organize insights, and collaborate seamlessly—all with the power of artificial intelligence."
          background={{ variant: "radial-gradient" }}
          tag="Trusted by Industry Leaders"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
            { text: "Start Free Trial", href: "#pricing-section" },
            { text: "Watch Demo", href: "#features-section" }
          ]}
          buttonAnimation="slide-up"
          avatars={[
            { src: "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", alt: "Sarah Johnson, Product Manager" },
            { src: "https://img.b2bpic.net/free-photo/team-diverse-coworkers-modern-office-discuss-their-project-together_93675-133516.jpg", alt: "Michael Chen, Data Scientist" },
            { src: "https://img.b2bpic.net/free-photo/man-visits-city-night_482257-90837.jpg", alt: "Elena Rodriguez, Marketing Director" }
          ]}
          avatarText="Join 10,000+ professionals"
          imageSrc="https://img.b2bpic.net/free-vector/digital-grid-technology-background-purple-tone_53876-117505.jpg"
          imageAlt="Dashboard showing AI-powered note organization interface"
          mediaAnimation="slide-up"
          marqueeItems={[
            { type: "text", text: "Organize Ideas Instantly" },
            { type: "text", text: "Collaborate in Real-Time" },
            { type: "text", text: "AI-Powered Insights" }
          ]}
          marqueeSpeed={30}
          showMarqueeCard={true}
          ariaLabel="Hero section introducing AI note-taking solution"
        />
      </div>

      <div id="about-section" data-section="about-section">
        <TextAbout
          tag="ABOUT US"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          title="Revolutionizing Professional Note-Taking with AI"
          buttons={[
            { text: "Explore Features", href: "#features-section" },
            { text: "View Testimonials", href: "#testimonials-section" }
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="features-section" data-section="features-section">
        <FeatureCardSix
          title="Powerful Features for Modern Teams"
          description="Designed to elevate your productivity with intelligent tools that adapt to your workflow. Capture, organize, and collaborate seamlessly across platforms."
          tag="AI-Powered"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          textboxLayout="split-description"
          useInvertedBackground={false}
          features={[
            {
              id: 1,
              title: "Smart Note Organization",              description: "Automatically categorize and tag notes using AI-powered insights. Never lose track of important information again.",              imageSrc: "https://img.b2bpic.net/free-photo/employee-putting-sticky-notes-laptop-screen-as-work-reminder-company-office-manager-using-adhesive-post-it-paper-display-remember-business-schedule-presentation-close-up_482257-33914.jpg",              imageAlt: "Smart note organization interface"
            },
            {
              id: 2,
              title: "Real-time Collaboration",              description: "Work together seamlessly with team members. Edit, comment, and share notes instantly across devices.",              imageSrc: "https://img.b2bpic.net/free-photo/presentation-information_1098-13117.jpg",              imageAlt: "Team collaboration interface"
            },
            {
              id: 3,
              title: "Cross-Platform Sync",              description: "Access your notes anywhere, anytime. Sync effortlessly between desktop, mobile, and web applications.",              imageSrc: "https://img.b2bpic.net/free-vector/connected-isometric-electronic-devices_23-2147646178.jpg",              imageAlt: "Cross-platform synchronization"
            }
          ]}
          buttons={[
            { text: "See All Features", href: "#features-section" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="testimonials-section" data-section="testimonials-section">
        <TestimonialCardOne
          testimonials={[
            {
              id: "testimonial-1",              name: "Sarah Chen",              role: "Product Manager",              company: "TechFlow Inc.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/friendly-successful-business-woman-posing-with-arms-crossed_74855-2813.jpg",              imageAlt: "Sarah Chen, Product Manager at TechFlow Inc."
            },
            {
              id: "testimonial-2",              name: "Michael Rodriguez",              role: "CTO",              company: "Nexus Solutions",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/blond-businessman-happy-expression_1194-3797.jpg",              imageAlt: "Michael Rodriguez, CTO at Nexus Solutions"
            },
            {
              id: "testimonial-3",              name: "Elena Petrov",              role: "Team Lead",              company: "InnovateLab",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/american-african-black-beautiful-business_1303-1344.jpg",              imageAlt: "Elena Petrov, Team Lead at InnovateLab"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          title="Trusted by Industry Leaders"
          description="Join thousands of professionals who have transformed their workflow with our AI-powered note-taking solution."
          tag="Real Results"
          tagIcon={CheckCircle}
          tagAnimation="blur-reveal"
          buttons={[
            { text: "View Case Studies", href: "#about-section" }
          ]}
          buttonAnimation="opacity"
          textboxLayout="inline-image"
          useInvertedBackground={false}
          ariaLabel="Testimonials section featuring user reviews and success stories"
          gridClassName="gap-6 md:gap-8"
          textBoxClassName="bg-black/50 backdrop-blur-sm border border-purple-500/20 rounded-xl p-6 transition-all duration-300 hover:border-purple-500/40"
        />
      </div>

      <div id="pricing-section" data-section="pricing-section">
        <PricingCardOne
          plans={[
            {
              id: "starter",              badge: "Best Value",              badgeIcon: Star,
              price: "$12",              subtitle: "per user/month",              features: [
                "Unlimited notes & meetings",                "AI-powered summarization",                "Basic collaboration tools",                "5GB cloud storage",                "Email support"
              ]
            },
            {
              id: "professional",              badge: "Most Popular",              badgeIcon: TrendingUp,
              price: "$24",              subtitle: "per user/month",              features: [
                "All Starter features",                "Advanced AI insights",                "Real-time collaboration",                "50GB cloud storage",                "Priority support",                "Custom templates"
              ]
            },
            {
              id: "enterprise",              badge: "For Teams",              badgeIcon: Users,
              price: "$48",              subtitle: "per user/month",              features: [
                "All Professional features",                "Enterprise security",                "Single sign-on (SSO)",                "Unlimited storage",                "Dedicated account manager",                "API access",                "Custom integrations"
              ]
            }
          ]}
          carouselMode="buttons"
          animationType="slide-up"
          title="Simple, transparent pricing"
          description="Choose the plan that fits your team's needs. All plans include our core AI-powered note-taking features."
          textboxLayout="inline-image"
          useInvertedBackground={false}
          buttons={[
            { text: "Start Free Trial", href: "#contact-section" },
            { text: "Contact Sales", href: "#contact-section" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="contact-section" data-section="contact-section">
        <ContactCenter
          tag="Get Started"
          title="Transform Your Workflow Today"
          description="Join thousands of professionals who have revolutionized their note-taking process with our AI-powered platform. Start your free trial now."
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
          inputPlaceholder="Enter your work email"
          buttonText="Start Free Trial"
          termsText="By clicking Start Free Trial you're confirming that you agree with our Terms and Conditions and Privacy Policy."
          ariaLabel="Contact section for AI note-taking app"
          className="py-20"
          containerClassName="max-w-4xl mx-auto px-4"
          contentClassName="text-center"
          tagClassName="text-purple-400"
          titleClassName="text-4xl font-bold text-white mb-6"
          descriptionClassName="text-lg text-gray-300 mb-10"
          formWrapperClassName="bg-gray-900/50 backdrop-blur-sm rounded-xl p-8 border border-gray-800"
          formClassName="flex flex-col sm:flex-row gap-4 max-w-md mx-auto"
          inputClassName="flex-grow px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500"
          buttonClassName="px-6 py-3 bg-purple-600 hover:bg-purple-700 rounded-lg font-medium transition-colors duration-200 flex items-center justify-center gap-2"
          buttonTextClassName="font-semibold"
          termsClassName="text-xs text-gray-400 mt-4"
        />
      </div>

      <div id="footer-section" data-section="footer-section">
        <FooterBase
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "#features-section" },
                { label: "Pricing", href: "#pricing-section" },
                { label: "Integrations", href: "#about-section" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Documentation", href: "#about-section" },
                { label: "Blog", href: "#testimonials-section" },
                { label: "Support", href: "#contact-section" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about-section" },
                { label: "Careers", href: "#testimonials-section" },
                { label: "Contact", href: "#contact-section" }
              ]
            }
          ]}
          logoText="NoteFlow AI"
          copyrightText="© 2025 NoteFlow AI. All rights reserved."
          ariaLabel="Site footer"
        />
      </div>
    </ThemeProvider>
  );
}