"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import { Award, Calendar, Linkedin, Search, Shield, ShieldCheck, Twitter, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-magnetic"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="mediumSmall"
        sizing="mediumSizeLargeTitles"
        background="noiseDiagonalGradient"
        cardStyle="outline"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="glass"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Home",
          id: "hero",
        },
        {
          name: "About",
          id: "about",
        },
        {
          name: "Services",
          id: "features",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="Nimmadhi"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroOverlay
      title="Managing Your Assets with Precision"
      description="Nimmadhi offers tech-driven property management solutions that simplify ownership and maximize value, blending traditional care with modern innovation."
      buttons={[
        {
          text: "Get Started",
          href: "#contact",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/3d-rendering-isometric-house_23-2150728074.jpg"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/business-woman-green-suit-using-phone-outside-street_1303-29546.jpg",
          alt: "Client Portrait 1",
        },
        {
          src: "http://img.b2bpic.net/free-photo/mature-woman-smiling_1149-601.jpg",
          alt: "Client Portrait 2",
        },
        {
          src: "http://img.b2bpic.net/free-photo/portrait-happy-young-businesswoman-talking-mobile-phone_1262-16443.jpg",
          alt: "Client Portrait 3",
        },
        {
          src: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-looking-camera_23-2148317302.jpg",
          alt: "Client Portrait 4",
        },
        {
          src: "http://img.b2bpic.net/free-photo/studio-portrait-blond-female-dressed-white-shirt-red-eyeglasses_613910-3571.jpg",
          alt: "Client Portrait 5",
        },
      ]}
      avatarText="Trusted by 500+ Property Owners"
    />
  </div>

  <div id="about" data-section="about">
      <InlineImageSplitTextAbout
      useInvertedBackground={false}
      heading={[
        {
          type: "text",
          content: "Technology Meets Property Management",
        },
        {
          type: "image",
          src: "http://img.b2bpic.net/free-photo/isometric-view-3d-rendering-neon-city_23-2150901059.jpg",
          alt: "3D Tech Visualization",
        },
      ]}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureHoverPattern
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          icon: Shield,
          title: "Secure Documentation",
          description: "Digital contract storage and verified compliance auditing.",
        },
        {
          icon: Calendar,
          title: "Maintenance Tracking",
          description: "Automated service scheduling with real-time updates.",
        },
        {
          icon: Search,
          title: "Transparency Audits",
          description: "Regular inspections with comprehensive photo-backed reports.",
        },
      ]}
      title="Comprehensive Management Services"
      description="Our suite of services ensures your property is always under expert care, from maintenance to tenant relations."
    />
  </div>

  <div id="services" data-section="services">
      <FeatureHoverPattern
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          icon: Award,
          title: "Expert Knowledge",
          description: "Decades of experience in local property regulations.",
        },
        {
          icon: Zap,
          title: "Instant Response",
          description: "Priority handling for urgent maintenance requests.",
        },
        {
          icon: ShieldCheck,
          title: "Transparent Pricing",
          description: "No hidden fees, simple flat-rate management models.",
        },
      ]}
      title="Why Nimmadhi?"
      description="Why homeowners trust us for their most valuable assets."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardSeven
      animationType="depth-3d"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",
          value: "500+",
          title: "Properties Managed",
          items: [
            "Residential",
            "Commercial",
          ],
        },
        {
          id: "m2",
          value: "98%",
          title: "Owner Satisfaction",
          items: [
            "Retainment Rate",
          ],
        },
        {
          id: "m3",
          value: "24h",
          title: "Average Response",
          items: [
            "Support SLA",
          ],
        },
      ]}
      title="Impact by Numbers"
      description="Proven results for owners globally."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSix
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",
          name: "Sarah Miller",
          handle: "@sarahm",
          testimonial: "Nimmadhi turned property management from a headache into a hands-off experience.",
          imageSrc: "http://img.b2bpic.net/free-photo/happy-beautiful-blonde-woman-wearing-white-shirt-standing-co-working-space-leaning-desk_74855-15151.jpg",
        },
        {
          id: "2",
          name: "David Chen",
          handle: "@dchen",
          testimonial: "The digital dashboard makes everything transparent and easy to track. Excellent service.",
          imageSrc: "http://img.b2bpic.net/free-photo/successful-businessman-imagines-great-career_1163-5478.jpg",
        },
        {
          id: "3",
          name: "Elena Rossi",
          handle: "@erossi",
          testimonial: "Finally, a company that treats my property like their own. Very professional.",
          imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-female-dark-jacket-pink-background_179666-14313.jpg",
        },
        {
          id: "4",
          name: "James Bond",
          handle: "@jbond",
          testimonial: "Highly efficient response times when I needed critical maintenance last year.",
          imageSrc: "http://img.b2bpic.net/free-photo/happy-couple-against-real-estate_1398-1733.jpg",
        },
        {
          id: "5",
          name: "Linda Wu",
          handle: "@lwu",
          testimonial: "Nimmadhi's transparency is a game-changer for overseas landlords like me.",
          imageSrc: "http://img.b2bpic.net/free-photo/businesswoman_23-2148103937.jpg",
        },
      ]}
      title="Client Success Stories"
      description="Hear from the owners who trust Nimmadhi with their peace of mind."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="split"
      useInvertedBackground={false}
      faqs={[
        {
          id: "q1",
          title: "How is maintenance billed?",
          content: "We bill at actual cost with zero markup on vendor labor.",
        },
        {
          id: "q2",
          title: "Can I check my property updates remotely?",
          content: "Yes, our dashboard provides real-time updates and photos.",
        },
        {
          id: "q3",
          title: "Do you handle tenant vetting?",
          content: "We perform comprehensive credit, criminal, and rental history background checks.",
        },
      ]}
      title="Frequently Asked Questions"
      description="Common inquiries about our management philosophy and services."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={false}
      background={{
        variant: "sparkles-gradient",
      }}
      tag="Ready to get started?"
      title="Simplify Your Property Management Today"
      description="Contact our team for a personalized strategy session."
      buttons={[
        {
          text: "Schedule Consultation",
          href: "#",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterCard
      logoText="Nimmadhi"
      copyrightText="© 2025 Nimmadhi Property Management"
      socialLinks={[
        {
          icon: Twitter,
          href: "#",
          ariaLabel: "Twitter",
        },
        {
          icon: Linkedin,
          href: "#",
          ariaLabel: "LinkedIn",
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
