"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import { Award, CheckCircle, Linkedin, Shield, Smile, Twitter } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-magnetic"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="compact"
        sizing="largeSmallSizeMediumTitles"
        background="fluid"
        cardStyle="outline"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="layered"
        headingFontWeight="normal"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingInline
            navItems={[
              { name: "About", id: "about" },
              { name: "Services", id: "features" },
              { name: "Projects", id: "products" },
              { name: "FAQ", id: "faq" },
            ]}
            brandName="Commercial Roofers Inc"
            button={{ text: "Get Quote", href: "#contact" }}
          />
        </div>

        <div id="hero" data-section="hero">
          <HeroSplit
            background={{ variant: "gradient-bars" }}
            title="Professional Commercial Roofing Services"
            description="Protect your assets with industry-leading commercial roofing solutions. From installations to emergency repairs, we have you covered."
            buttons={[{ text: "Get a Free Quote", href: "#contact" }]}
            imageSrc="http://img.b2bpic.net/free-photo/skateboard-rink-view_23-2148937901.jpg"
            mediaAnimation="slide-up"
            avatars={[
              { src: "http://img.b2bpic.net/free-photo/asian-couple-standing-together-against-new-modern-building-look-sky_627829-1322.jpg", alt: "Asian couple standing together against new modern building" },
              { src: "http://img.b2bpic.net/free-photo/modern-brick-building-skyline_23-2148252768.jpg", alt: "Modern brick building skyline" },
              { src: "http://img.b2bpic.net/free-photo/view-stone-building-with-large-windows_23-2148252828.jpg", alt: "View of stone building with large windows" },
              { src: "http://img.b2bpic.net/free-photo/low-angle-artistic-architectural-design_23-2148252774.jpg", alt: "Low angle artistic architectural design" },
              { src: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg", alt: "Smiling businessman standing at airport" },
            ]}
            marqueeItems={[
              { type: "text", text: "Certified Expertise" },
              { type: "text", text: "24/7 Emergency Support" },
              { type: "text", text: "Safety First Protocol" },
              { type: "text", text: "Quality Guaranteed" },
              { type: "text", text: "Sustainable Solutions" },
            ]}
          />
        </div>

        <div id="about" data-section="about">
          <TestimonialAboutCard
            useInvertedBackground={true}
            tag="Our Commitment"
            title="Decades of Roofing Excellence"
            description="Commercial Roofers Inc has been delivering top-tier roofing services for over 20 years, ensuring durability and performance for every project we undertake."
            subdescription="We treat every roof as our own, maintaining strict safety and quality standards at every site."
            icon={Shield}
            imageSrc="http://img.b2bpic.net/free-photo/conversation-engineers_1098-15478.jpg"
            mediaAnimation="blur-reveal"
          />
        </div>

        <div id="features" data-section="features">
          <FeatureCardEight
            textboxLayout="default"
            useInvertedBackground={false}
            features={[
              { title: "Expert Installation", description: "Highly trained crew focused on precision and speed.", imageSrc: "http://img.b2bpic.net/free-photo/modern-stadium_1127-110.jpg" },
              { title: "Durable Materials", description: "Using industry-grade roofing components for long-lasting results.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-men-working-roof-together_23-2149343670.jpg" },
              { title: "Routine Maintenance", description: "Preventive services to extend your roof lifespan significantly.", imageSrc: "http://img.b2bpic.net/free-photo/south-asian-agronomist-farmer-looking-diagram-papers-farm-agriculture-production-concept_627829-7300.jpg" },
            ]}
            title="Why Choose Us?"
            description="We offer comprehensive services tailored to your commercial infrastructure needs."
          />
        </div>

        <div id="products" data-section="products">
          <ProductCardThree
            animationType="slide-up"
            textboxLayout="default"
            gridVariant="four-items-2x2-equal-grid"
            useInvertedBackground={true}
            products={[
              { id: "p1", name: "Office Complex Roof", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/man-with-helmet-working-roof-full-shot_23-2149343662.jpg" },
              { id: "p2", name: "Warehouse Retrofit", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/man-working-roof-front-view_23-2148748780.jpg" },
              { id: "p3", name: "Industrial Park Site", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/hand-woven-geometric-denim-area-rug-wooden-floor_169016-48743.jpg" },
              { id: "p4", name: "Commercial Plaza", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/engineer-working-with-airplane_1098-12552.jpg" },
              { id: "p5", name: "Distribution Center", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/building-with-metallic-bars-wooden-ceiling_250224-285.jpg" },
              { id: "p6", name: "Retail Storefront", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/gray-brown-concrete-modern-building-shot-from-low-angle_181624-3502.jpg" },
            ]}
            title="Project Portfolio"
            description="Recent installations and renovations demonstrating our commitment to quality."
          />
        </div>

        <div id="metrics" data-section="metrics">
          <MetricCardThree
            animationType="depth-3d"
            textboxLayout="default"
            useInvertedBackground={false}
            metrics={[
              { id: "m1", icon: Award, title: "Years Experience", value: "20+" },
              { id: "m2", icon: CheckCircle, title: "Projects Completed", value: "500+" },
              { id: "m3", icon: Smile, title: "Happy Clients", value: "450+" },
            ]}
            title="Our Impact"
            description="Numbers speak to our commitment and reliability in the roofing industry."
          />
        </div>

        <div id="testimonials" data-section="testimonials">
          <TestimonialCardTwelve
            useInvertedBackground={true}
            testimonials={[
              { id: "1", name: "John Doe", imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg" },
              { id: "2", name: "Jane Smith", imageSrc: "http://img.b2bpic.net/free-photo/successful-man-pointing-camera-with-finger_1262-3118.jpg" },
              { id: "3", name: "Mark Wilson", imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg" },
              { id: "4", name: "Lisa Brown", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-waitress_107420-12324.jpg" },
              { id: "5", name: "Alex Taylor", imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-black-auto-mechanic-workshop_637285-9406.jpg" },
            ]}
            cardTitle="Client Feedback"
            cardTag="Reliable Service"
            cardAnimation="slide-up"
          />
        </div>

        <div id="faq" data-section="faq">
          <FaqDouble
            textboxLayout="default"
            useInvertedBackground={false}
            faqs={[
              { id: "f1", title: "Do you provide warranties?", content: "Yes, all our roofing projects come with comprehensive material and workmanship warranties." },
              { id: "f2", title: "How long does a roof install take?", content: "Timeline varies by scope, but we maintain efficient schedules for minimal business disruption." },
              { id: "f3", title: "Can I get an emergency repair?", content: "We offer 24/7 support for urgent commercial roofing needs to protect your interior assets." },
            ]}
            title="Frequently Asked Questions"
            description="Have questions about our roofing solutions? Find answers below."
            faqsAnimation="blur-reveal"
          />
        </div>

        <div id="contact" data-section="contact">
          <ContactText
            useInvertedBackground={true}
            background={{ variant: "rotated-rays-animated" }}
            text="Ready to secure your commercial roof? Contact us today for a free consultation."
            buttons={[{ text: "Contact Us Now", href: "mailto:info@commercialroofers.com" }]}
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterCard
            logoText="Commercial Roofers Inc"
            copyrightText="© 2025 Commercial Roofers Inc. All rights reserved."
            socialLinks={[
              { icon: Twitter, href: "#", ariaLabel: "Twitter" },
              { icon: Linkedin, href: "#", ariaLabel: "LinkedIn" },
            ]}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
