"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import { BarChart, FileText, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="elastic-effect"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="medium"
        sizing="large"
        background="none"
        cardStyle="gradient-bordered"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="solid"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Features",
          id: "features",
        },
        {
          name: "Pricing",
          id: "pricing",
        },
        {
          name: "Login",
          id: "login",
        },
      ]}
      brandName="ResumeAI"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroLogoBillboard
      background={{
        variant: "gradient-bars",
      }}
      logoText="ResumeAI"
      description="Craft professional, AI-powered resumes in seconds. Your career journey starts with a perfect document."
      buttons={[
        {
          text: "Start Building",
          href: "#",
        },
        {
          text: "View Pricing",
          href: "#pricing",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/resume-application-employment-form-concept_53876-125148.jpg"
      imageAlt="AI Resume Dashboard Preview"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureBento
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "AI Content Generation",
          description: "Write compelling job descriptions and bios automatically.",
          bentoComponent: "reveal-icon",
          icon: Zap,
          imageSrc: "http://img.b2bpic.net/free-vector/artificial-intelligence-elements-collection_23-2147876467.jpg",
          imageAlt: "ai digital interface icon",
        },
        {
          title: "Instant PDF Export",
          description: "Download your resume in high-quality PDF format instantly.",
          bentoComponent: "reveal-icon",
          icon: FileText,
          imageSrc: "http://img.b2bpic.net/free-photo/resume-application-employment-form-concept_53876-125148.jpg",
          imageAlt: "ai digital interface icon",
        },
        {
          title: "Dashboard Analytics",
          description: "Track resume views and performance easily.",
          bentoComponent: "reveal-icon",
          icon: BarChart,
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-sitting-desk-with-laptop_23-2149130557.jpg",
          imageAlt: "ai digital interface icon",
        },
      ]}
      title="Smart Features for Professionals"
      description="Built for modern job seekers who value efficiency and design."
    />
  </div>

  <div id="about" data-section="about">
      <MediaAbout
      useInvertedBackground={true}
      title="Designed for Success"
      description="ResumeAI uses advanced NLP technology to help you stand out. We provide templates that pass ATS scanners and look beautiful on any screen."
      imageSrc="http://img.b2bpic.net/free-photo/medium-shot-man-sitting-desk-with-laptop_23-2149130557.jpg"
      imageAlt="Professional working on laptop in a dark office"
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardFourteen
      useInvertedBackground={false}
      title="Milestones We Help Achieve"
      tag="Impact"
      metrics={[
        {
          id: "1",
          value: "50k+",
          description: "Resumes Generated",
        },
        {
          id: "2",
          value: "98%",
          description: "User Satisfaction",
        },
        {
          id: "3",
          value: "12k+",
          description: "Hired Users",
        },
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardNine
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      plans={[
        {
          id: "free",
          title: "Basic",
          price: "$0",
          period: "/mo",
          features: [
            "1 Resume Template",
            "Basic AI Drafts",
            "PDF Export",
          ],
          button: {
            text: "Get Started",
            href: "#",
          },
          imageSrc: "http://img.b2bpic.net/free-photo/document-front-side-with-white-background_187299-39839.jpg",
          imageAlt: "pdf export document icon",
        },
        {
          id: "pro",
          title: "Pro",
          price: "$19",
          period: "/mo",
          features: [
            "Unlimited Resumes",
            "AI Resume Optimization",
            "Advanced Analytics",
            "Custom Templates",
          ],
          button: {
            text: "Upgrade Pro",
            href: "#",
          },
          imageSrc: "http://img.b2bpic.net/free-photo/resume-application-employment-form-concept_53876-125148.jpg",
          imageAlt: "pdf export document icon",
        },
      ]}
      title="Transparent Pricing"
      description="Start for free or upgrade for advanced features."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTen
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",
          title: "Career Switcher",
          quote: "Finally, a resume builder that actually works.",
          name: "Alice Wong",
          role: "Marketing",
          imageSrc: "http://img.b2bpic.net/free-photo/closeup-serious-middle-aged-business-leader_1262-4838.jpg",
        },
        {
          id: "2",
          title: "Software Dev",
          quote: "My new resume got me 5 interviews in 2 weeks.",
          name: "Bob Smith",
          role: "Engineer",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-blonde-businesswoman-formal-dressed-isolated-dark-textured-background_613910-5399.jpg",
        },
        {
          id: "3",
          title: "Grad Student",
          quote: "Simplest way to create a professional resume.",
          name: "Charlie Day",
          role: "Designer",
          imageSrc: "http://img.b2bpic.net/free-photo/man-with-laptop-posing-coworker_23-2148746260.jpg",
        },
        {
          id: "4",
          title: "Management",
          quote: "The AI tool provided insights I hadn't thought of.",
          name: "Dana White",
          role: "Manager",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-brutal-bearded-macho-male-dressed-suit-dark-grey-background_613910-9486.jpg",
        },
        {
          id: "5",
          title: "Creative",
          quote: "Loved the design templates available here.",
          name: "Eve Adams",
          role: "Creator",
          imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-suit-posing-black-white_23-2149411392.jpg",
        },
      ]}
      title="Trusted by Thousands"
      description="Hear what our successful users have to say about their experience."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "f1",
          title: "Is it free to start?",
          content: "Yes, our basic plan is completely free.",
        },
        {
          id: "f2",
          title: "Can I export to PDF?",
          content: "Yes, we support high-resolution PDF exports on all plans.",
        },
        {
          id: "f3",
          title: "Is my data secure?",
          content: "We prioritize user privacy and use industry-standard encryption.",
        },
      ]}
      title="Common Questions"
      description="Answers to everything you need to know about our SaaS."
      faqsAnimation="slide-up"
      imageSrc="http://img.b2bpic.net/free-photo/person-typing-into-ai-chatbot-system-automate-her-workflow-home-office_482257-122978.jpg"
      imageAlt="Person using AI tool"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={false}
      background={{
        variant: "gradient-bars",
      }}
      text="Ready to land your dream job? Start building your resume with AI today."
      buttons={[
        {
          text: "Contact Support",
          href: "#",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoReveal
      logoText="ResumeAI"
      leftLink={{
        text: "Privacy Policy",
        href: "#",
      }}
      rightLink={{
        text: "Terms of Service",
        href: "#",
      }}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
