"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import { Activity, Award, Building, Building2, Diamond, Headphones, Home, Search, Shield, Star, UserCheck, Users, Wallet, Wrench, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="elastic-effect"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="mediumLarge"
        sizing="mediumLargeSizeLargeTitles"
        background="noiseDiagonalGradient"
        cardStyle="glass-elevated"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "Home",
          id: "#hero",
        },
        {
          name: "Services",
          id: "#services",
        },
        {
          name: "Gallery",
          id: "#gallery",
        },
        {
          name: "Why Us",
          id: "#why-choose-us",
        },
        {
          name: "Testimonials",
          id: "#testimonials",
        },
        {
          name: "About Us",
          id: "#about",
        },
        {
          name: "Contact",
          id: "#contact",
        },
      ]}
      brandName="JM Roofing 3rd Generation"
      button={{
        text: "Get Free Estimate",
        href: "#contact",
      }}
      animateOnLoad={true}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardTestimonial
      useInvertedBackground={false}
      background={{
        variant: "radial-gradient",
      }}
      title="3rd Generation Roofing Experts You Can Trust"
      description="Professional Residential & Commercial Roofing Services, delivering unparalleled quality and durability for over three generations."
      testimonials={[
        {
          name: "Emily R.",
          handle: "@emilyreviews",
          testimonial: "JM Roofing transformed our home! The quality and service were exceptional. Truly experts.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/black-businessman-sad-expression_1194-2739.jpg",
        },
        {
          name: "Michael S.",
          handle: "@mikesroof",
          testimonial: "Professional, efficient, and reliable. Our new commercial roof looks fantastic.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-successful-entrepreneur_1098-3855.jpg",
        },
        {
          name: "Sarah J.",
          handle: "@sarah_home",
          testimonial: "Couldn't be happier with the roof repair. Fast and high quality work!",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/smiley-architect-wearing-his-safety-equipment_23-2148242918.jpg",
        },
        {
          name: "David L.",
          handle: "@dl_builds",
          testimonial: "They live up to their reputation. A trustworthy family business.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/young-successful-businesswoman-sunglasses-catching-car-business-centre_176420-5670.jpg",
        },
        {
          name: "Jessica M.",
          handle: "@jessicaprojects",
          testimonial: "From estimate to completion, the process was smooth. Highly recommend!",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/happy-bearded-builder-man-construction-uniform-safety-helmet-taking-selfie-happy-cheerful-smiling-broadly-standing-purple-background_141793-110865.jpg",
        },
      ]}
      testimonialRotationInterval={5000}
      buttons={[
        {
          text: "Get Free Estimate",
          href: "#contact",
        },
        {
          text: "Call Now",
          href: "tel:+1-555-ROOF",
        },
      ]}
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/close-up-portrait-smiling-construction-worker_23-2148233742.jpg",
          alt: "Customer testimonial avatar 1",
        },
        {
          src: "http://img.b2bpic.net/free-photo/close-up-positive-executive-work_1098-519.jpg",
          alt: "Customer testimonial avatar 2",
        },
        {
          src: "http://img.b2bpic.net/free-photo/senior-businessman-architect-hard-hat_1303-18991.jpg",
          alt: "Customer testimonial avatar 3",
        },
        {
          src: "http://img.b2bpic.net/free-photo/cheerful-workman-white-wall_23-2147772246.jpg",
          alt: "Customer testimonial avatar 4",
        },
        {
          src: "http://img.b2bpic.net/free-photo/serious-afroamerican-businessman-front-view_23-2148508922.jpg",
          alt: "Professional male portrait smiling",
        },
      ]}
      avatarText="Trusted by 56+ verified clients."
      imageSrc="http://img.b2bpic.net/free-photo/closeup-roof-house-made-wooden-tiles_169016-24747.jpg"
      imageAlt="Cinematic view of a modern luxury roof with dark tiles."
      mediaAnimation="slide-up"
      marqueeItems={[
        {
          type: "text",
          text: "Quality Craftsmanship",
        },
        {
          type: "text",
          text: "Family Owned & Operated",
        },
        {
          type: "text",
          text: "Residential & Commercial",
        },
        {
          type: "text",
          text: "Free Estimates Available",
        },
        {
          type: "text",
          text: "Customer Satisfaction Guaranteed",
        },
      ]}
    />
  </div>

  <div id="trust" data-section="trust">
      <MetricCardThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      metrics={[
        {
          id: "m1",
          icon: Star,
          title: "5-Star Rating",
          value: "Across All Platforms",
        },
        {
          id: "m2",
          icon: UserCheck,
          title: "56+ Verified Reviews",
          value: "From Satisfied Clients",
        },
        {
          id: "m3",
          icon: Award,
          title: "Licensed & Insured",
          value: "For Your Peace of Mind",
        },
        {
          id: "m4",
          icon: Home,
          title: "Family Owned",
          value: "Since 3 Generations",
        },
      ]}
      title="Our Legacy of Trust & Excellence"
      description="Building on generations of expertise and a commitment to customer satisfaction."
    />
  </div>

  <div id="services" data-section="services">
      <FeatureBento
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Metal Roofing",
          description: "Durable, energy-efficient, and stylish metal roofing installations for modern homes and businesses.",
          bentoComponent: "reveal-icon",
          icon: Shield,
          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-silver-stars-background_23-2150160746.jpg",
          imageAlt: "star rating icon gold",
        },
        {
          title: "Roof Repair",
          description: "Expert repair services for all types of roofs, addressing leaks, storm damage, and wear with lasting solutions.",
          bentoComponent: "reveal-icon",
          icon: Wrench,
          imageSrc: "http://img.b2bpic.net/free-photo/closeup-roof-house-made-wooden-tiles_169016-24747.jpg",
          imageAlt: "star rating icon gold",
        },
        {
          title: "Roof Installation",
          description: "New roof installations using premium materials and proven techniques for superior performance and longevity.",
          bentoComponent: "reveal-icon",
          icon: Home,
          imageSrc: "http://img.b2bpic.net/free-photo/black-businessman-sad-expression_1194-2739.jpg",
          imageAlt: "star rating icon gold",
        },
        {
          title: "Commercial Roofing",
          description: "Specialized roofing services for commercial properties, ensuring minimal disruption and maximum protection.",
          bentoComponent: "reveal-icon",
          icon: Building,
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-successful-entrepreneur_1098-3855.jpg",
          imageAlt: "star rating icon gold",
        },
        {
          title: "Roof Inspection",
          description: "Thorough roof inspections to identify potential issues and recommend proactive maintenance or repairs.",
          bentoComponent: "reveal-icon",
          icon: Search,
          imageSrc: "http://img.b2bpic.net/free-photo/smiley-architect-wearing-his-safety-equipment_23-2148242918.jpg",
          imageAlt: "star rating icon gold",
        },
        {
          title: "Emergency Roofing",
          description: "Rapid response for urgent roofing needs, providing immediate protection against further damage.",
          bentoComponent: "reveal-icon",
          icon: Zap,
          imageSrc: "http://img.b2bpic.net/free-photo/young-successful-businesswoman-sunglasses-catching-car-business-centre_176420-5670.jpg",
          imageAlt: "star rating icon gold",
        },
      ]}
      title="Comprehensive Roofing Solutions"
      description="From initial inspection to flawless installation, we cover all your roofing needs with precision and care."
    />
  </div>

  <div id="gallery" data-section="gallery">
      <ProductCardTwo
      animationType="scale-rotate"
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={true}
      products={[
        {
          id: "proj1",
          brand: "Residential",
          name: "Shingle Roof Replacement",
          price: "View Project",
          rating: 5,
          reviewCount: "New Build",
          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-roofer-working-with-helmet_23-2149343710.jpg",
          imageAlt: "Newly installed dark shingle roof on a modern residential home.",
        },
        {
          id: "proj2",
          brand: "Commercial",
          name: "Flat Roof Resurfacing",
          price: "View Project",
          rating: 5,
          reviewCount: "Renovation",
          imageSrc: "http://img.b2bpic.net/free-photo/factory_23-2148098549.jpg",
          imageAlt: "Smooth, new flat roof on a commercial building after resurfacing.",
        },
        {
          id: "proj3",
          brand: "Residential",
          name: "Tile Roof Restoration",
          price: "View Project",
          rating: 5,
          reviewCount: "Restoration",
          imageSrc: "http://img.b2bpic.net/free-photo/tile-roof-texture_23-2148164702.jpg",
          imageAlt: "Restored red clay tile roof on a traditional home, vibrant and clean.",
        },
        {
          id: "proj4",
          brand: "Industrial",
          name: "Metal Roof Coating",
          price: "View Project",
          rating: 5,
          reviewCount: "Maintenance",
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-men-working-roof-together_23-2149343670.jpg",
          imageAlt: "Clean, coated metal roof on an industrial building, shiny and protected.",
        },
        {
          id: "proj5",
          brand: "Residential",
          name: "Full Roof Overhaul",
          price: "View Project",
          rating: 5,
          reviewCount: "Full Replacement",
          imageSrc: "http://img.b2bpic.net/free-photo/front-view-symmetrical-old-brick-building_23-2148252746.jpg",
          imageAlt: "Complete roof replacement on a suburban home, showcasing new shingles.",
        },
        {
          id: "proj6",
          brand: "Commercial",
          name: "Flat Roof Sealant",
          price: "View Project",
          rating: 5,
          reviewCount: "Upgrade",
          imageSrc: "http://img.b2bpic.net/free-photo/teenagers-roof_23-2147678119.jpg",
          imageAlt: "Sealed and maintained flat roof on a commercial property, looking fresh.",
        },
      ]}
      title="Transformations You Can See"
      description="Explore our portfolio of completed projects, showcasing the quality and craftsmanship we bring to every roof."
    />
  </div>

  <div id="why-choose-us" data-section="why-choose-us">
      <MetricCardThree
      animationType="depth-3d"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "w1",
          icon: Users,
          title: "Experienced Team",
          value: "Certified & Skilled Professionals",
        },
        {
          id: "w2",
          icon: Activity,
          title: "Fast Service",
          value: "Efficient & Timely Project Completion",
        },
        {
          id: "w3",
          icon: Wallet,
          title: "Affordable Pricing",
          value: "Competitive Rates & Transparent Quotes",
        },
        {
          id: "w4",
          icon: Diamond,
          title: "Premium Quality Materials",
          value: "Durable & Long-Lasting Solutions",
        },
        {
          id: "w5",
          icon: Headphones,
          title: "24/7 Support",
          value: "Always Here When You Need Us",
        },
      ]}
      title="The JM Roofing Advantage"
      description="Why generations of clients trust us for their most important roofing projects."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwelve
      useInvertedBackground={true}
      testimonials={[
        {
          id: "t1",
          name: "Robert D.",
          imageSrc: "http://img.b2bpic.net/free-photo/country-music-interpret-singing-outdoors_23-2149498451.jpg",
        },
        {
          id: "t2",
          name: "Samantha K.",
          imageSrc: "http://img.b2bpic.net/free-photo/positive-shaved-head-male-dressed-grey-suit-dark-grey-background_613910-11352.jpg",
        },
        {
          id: "t3",
          name: "James L.",
          imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-woman-outdoors_23-2149901729.jpg",
        },
        {
          id: "t4",
          name: "Olivia P.",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-photogenic-blonde-woman-wearing-headphones_23-2148397120.jpg",
        },
        {
          id: "t5",
          name: "William B.",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-jolly-man-home-feeling-happy-grateful-life_482257-123005.jpg",
        },
        {
          id: "t6",
          name: "Sophia G.",
          imageSrc: "http://img.b2bpic.net/free-photo/cheerful-happy-hr-manager-talking-female-candidate-cafe_1262-16890.jpg",
        },
      ]}
      cardTitle="Hear From Our Valued Clients"
      cardTag="Customer Stories"
      cardAnimation="slide-up"
    />
  </div>

  <div id="about" data-section="about">
      <TestimonialAboutCard
      useInvertedBackground={false}
      tag="Our Story"
      title="Built on a Legacy of Craftsmanship"
      description="JM Roofing 3rd Generation stands as a testament to enduring quality and trust, passed down through a proud family heritage."
      subdescription="For over three generations, our family has dedicated itself to mastering the art and science of roofing. We uphold a tradition of excellence, combining time-honored techniques with cutting-edge solutions to protect and enhance homes and businesses across the region. Every project is a personal commitment to the legacy of our name, ensuring superior durability, beauty, and reliability."
      icon={Building2}
      imageSrc="http://img.b2bpic.net/free-photo/medium-shot-men-wearing-helmet_23-2148921379.jpg"
      imageAlt="Three generations of roofing experts discussing a project blueprint."
      mediaAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={true}
      background={{
        variant: "radial-gradient",
      }}
      tag="Connect With Us"
      title="Get Your Free Roofing Estimate Today!"
      description="Ready to start your roofing project? Fill out the form below, and our team will get in touch to provide a no-obligation quote and expert consultation. We serve a wide area, ensuring top-tier service wherever you are."
      inputPlaceholder="Your Email Address"
      buttonText="Request a Free Estimate"
      termsText="By clicking Request a Free Estimate, you're confirming that you agree with our Terms and Conditions."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/abstract-ferromagnetic-mirrored-metal-with-blurred-elements_23-2148253535.jpg"
      imageAlt="Stylish roof background texture for footer"
      logoText="JM Roofing 3rd Generation"
      columns={[
        {
          title: "Services",
          items: [
            {
              label: "Metal Roofing",
              href: "#services",
            },
            {
              label: "Roof Repair",
              href: "#services",
            },
            {
              label: "Roof Installation",
              href: "#services",
            },
            {
              label: "Commercial Roofing",
              href: "#services",
            },
          ],
        },
        {
          title: "Company",
          items: [
            {
              label: "About Us",
              href: "#about",
            },
            {
              label: "Why Choose Us",
              href: "#why-choose-us",
            },
            {
              label: "Testimonials",
              href: "#testimonials",
            },
            {
              label: "Project Gallery",
              href: "#gallery",
            },
          ],
        },
        {
          title: "Contact",
          items: [
            {
              label: "Get Free Estimate",
              href: "#contact",
            },
            {
              label: "Call Us",
              href: "tel:+1-555-ROOF",
            },
            {
              label: "Email Us",
              href: "mailto:info@jmroofing.com",
            },
          ],
        },
      ]}
      copyrightText="© 2024 JM Roofing 3rd Generation. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
