"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import { Award, BarChart, Clock, Home, TrendingUp, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="mediumLarge"
        sizing="largeSmall"
        background="aurora"
        cardStyle="gradient-mesh"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        { name: "Features", id: "features" },
        { name: "How it Works", id: "about" },
        { name: "Testimonials", id: "testimonials" },
        { name: "FAQ", id: "faq" },
      ]}
      brandName="PropGen AI"
      button={{
        text: "Get Started",        href: "#contact"}}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitDualMedia
      background={{
        variant: "sparkles-gradient"}}
      title="Turn Every Listing into a Masterpiece with AI"
      description="Generate high-converting real estate descriptions in seconds. Our AI analyzes your property data to craft compelling, SEO-optimized listings that sell faster."
      tag="PropGen AI - Elevate your Listings"
      buttons={[
        {
          text: "Start Generating",          href: "#contact"},
      ]}
      mediaItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-activating-robot-cleaner_23-2148994180.jpg",          imageAlt: "real estate agent tablet property"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-freelancer-works-from-home-looks-her-digital-tablet-reads-through-documents-online_1258-200126.jpg",          imageAlt: "modern dashboard ai real estate"}
      ]}
      mediaAnimation="slide-up"
      rating={5}
      ratingText="Trusted by 500+ Top Realtors"
    />
  </div>

  <div id="about" data-section="about">
      <AboutMetric
      useInvertedBackground={false}
      title="Why Real Estate Pros Choose Us"
      metrics={[
        { icon: Zap, label: "Listings Generated", value: "15,000+" },
        { icon: Home, label: "Properties Covered", value: "450+" },
        { icon: TrendingUp, label: "Conversion Boost", value: "35%" },
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardSixteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      negativeCard={{
        items: [
          "No manual copywriting",          "No repetitive drafts",          "Zero wasted time"],
      }}
      positiveCard={{
        items: [
          "SEO-optimized keywords",          "Buyer-targeted tone",          "Automated feature highlight"],
      }}
      title="AI-Powered Listing Excellence"
      description="Stop staring at blank documents. Our engine writes professional descriptions tailored to your buyer persona."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        { id: "m1", icon: Clock, title: "Time Saved", value: "10h/week" },
        { id: "m2", icon: BarChart, title: "Lead Rate", value: "40% inc." },
        { id: "m3", icon: Award, title: "Satisfaction", value: "99%" },
      ]}
      title="Performance at a Glance"
      description="Measure the impact of your automated marketing strategy."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwelve
      useInvertedBackground={false}
      testimonials={[
        { id: "1", name: "\"PropGen AI saved me hours every week. My listing views have doubled since I started using it.\" - Sarah Jenkins", imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-hispanic-woman-business-worker-smiling-pointing-camera-office_839833-26359.jpg" },
        { id: "2", name: "\"The AI captures the unique vibe of every property perfectly. It's like having a dedicated copywriter on call 24/7.\" - Michael Reed", imageSrc: "http://img.b2bpic.net/free-photo/man-standing-front-building-holding-mobile-phone-hand-talking-loudspeaker_23-2147972812.jpg" },
        { id: "3", name: "\"Fast, professional, and SEO-ready. My listings rank higher and close faster than ever before.\" - Emily Chen", imageSrc: "http://img.b2bpic.net/free-photo/portrait-pretty-businesswoman-holding-coffee-cup_23-2148187126.jpg" },
        { id: "4", name: "\"Finally, an automated tool that actually understands the real estate market. An absolute game-changer for my business.\" - David West", imageSrc: "http://img.b2bpic.net/free-photo/carefree-couple-dancing-while-relocating-their-new-apartment_637285-12444.jpg" },
        { id: "5", name: "\"The conversion rates on my listings went up by over 30% within the first month. Highly recommended for any agent.\" - Lisa O'Brien", imageSrc: "http://img.b2bpic.net/free-photo/executive-woman-manager-speaking-phone-while-checking-financial-notes-late-night_482257-5203.jpg" },
      ]}
      cardTitle="What Realtors are saying"
      cardTag="Success Stories"
      cardAnimation="slide-up"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        { id: "f1", title: "Is the content original?", content: "Absolutely. Every listing description is generated uniquely for your property." },
        { id: "f2", title: "How do I start?", content: "Simply input your property details and select a style, we'll do the rest." },
        { id: "f3", title: "Is there a free trial?", content: "Yes, start your 14-day free trial today without any commitment." },
      ]}
      title="Frequently Asked Questions"
      description="Have questions about our AI? We've got answers."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={false}
      background={{ variant: "plain" }}
      tag="Ready to Scale?"
      title="Automate Your Listings Today"
      description="Join 500+ successful realtors and start generating high-impact listings in minutes."
      buttons={[{ text: "Contact Sales", href: "#contact" }]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      columns={[
        { items: [{ label: "Product", href: "#" }, { label: "Pricing", href: "#" }] },
        { items: [{ label: "About", href: "#" }, { label: "Support", href: "#" }] },
      ]}
      logoText="PropGen AI"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
