"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FooterCard from '@/components/sections/footer/FooterCard';
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, Mail, Phone, MapPin, Download } 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: "Contact", id: "contact" },
      ]}
      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?_wi=1"
      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 },
        { title: "Instant PDF Export", description: "Download your resume in high-quality PDF format instantly.", bentoComponent: "reveal-icon", icon: FileText },
        { title: "Dashboard Analytics", description: "Track resume views and performance easily.", bentoComponent: "reveal-icon", icon: BarChart },
        { title: "Template Customization", description: "Easily switch between professional, modern, and creative templates.", bentoComponent: "reveal-icon", icon: Download },
      ]}
      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"},
        {
          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?_wi=2"},
      ]}
      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" },
      ]}
      title="Trusted by Thousands"
      description="Hear what our successful users have to say."
    />
  </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 free." },
        { id: "f2", title: "Can I export to PDF?", content: "Yes, high-resolution PDF exports are included." },
      ]}
      title="Common Questions"
      description="Everything you need to know."
      faqsAnimation="slide-up"
      imageSrc="http://img.b2bpic.net/free-photo/person-typing-into-ai-chatbot-system-automate-her-workflow-home-office_482257-122978.jpg"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
        title="Get in Touch"
        description="We're here to help you succeed. Have questions about our templates or PDF exports? Contact our support team."
        inputs={[
          { name: "name", type: "text", placeholder: "Full Name" },
          { name: "email", type: "email", placeholder: "Email Address" }
        ]}
        textarea={{ name: "message", placeholder: "How can we help?" }}
        buttonText="Send Message"
        useInvertedBackground={false}
      />
  </div>

  <div id="footer" data-section="footer">
      <FooterCard
      logoText="ResumeAI"
      socialLinks={[
        { icon: Mail, href: "mailto:support@resumeai.com", ariaLabel: "Email" },
        { icon: Phone, href: "tel:+15550123456", ariaLabel: "Phone" },
        { icon: MapPin, href: "#", ariaLabel: "Address" }
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
