"use client";

import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import HeroBillboardTestimonial from "@/components/sections/hero/HeroBillboardTestimonial";
import SplitAbout from "@/components/sections/about/SplitAbout";
import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import FooterBase from "@/components/sections/footer/FooterBase";
import { Shield, Wrench, Search, HelpCircle, ClipboardCheck, Phone, HardHat, CheckCircle, Clock, Users, Award, ThumbsUp, Star } from "lucide-react";

export default function RoofingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="medium"
      sizing="medium"
      background="circleGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleApple
            brandName="Ndou Building & Engineering"
            navItems={[
              { name: "About", id: "about" },
              { name: "Services", id: "services" },
              { name: "Testimonials", id: "testimonials" },
              { name: "FAQ", id: "faq" },
              { name: "Contact", id: "contact" },
            ]}
            button={{ text: "WhatsApp Us", href: "https://wa.me/27637540110" }}
          />
        </div>

        <div id="hero" data-section="hero">
          <HeroBillboardTestimonial
            background={{ variant: "plain" }}
            avatars={[
              { src: "http://img.b2bpic.net/free-photo/close-up-portrait-construction-engineer-looking-camera_23-2148233714.jpg", alt: "Lead Engineer" },
              { src: "http://img.b2bpic.net/free-photo/worker-building-roof-house_23-2148748850.jpg", alt: "Expert Roofer" },
              { src: "http://img.b2bpic.net/free-photo/architect-office-checking-project_23-2148242950.jpg", alt: "Site Supervisor" },
            ]}
            avatarText="Premier Engineering & Roofing"
            avatarGroupClassName="[&_div.overflow-hidden]:h-10 [&_div.overflow-hidden]:aspect-square [&>p]:whitespace-nowrap"
            title="Engineering Excellence, Roofing Perfection."
            description="Luxury roofing solutions for modern homes. At Ndou Building & Engineering, we combine structural integrity with sophisticated design to protect your investment."
            buttons={[
              { text: "Get Consultation", href: "#contact" },
              { text: "Our Expertise", href: "#services" },
            ]}
            buttonAnimation="slide-up"
            imageSrc="http://img.b2bpic.net/free-photo/low-angle-view-couple-standing-balcony_23-2147923064.jpg"
            imageAlt="Modern luxury home with high-end roofing"
            mediaAnimation="slide-up"
            marqueeItems={[
              { type: "text-icon", text: "Premium Materials", icon: Award },
              { type: "text-icon", text: "Precision Craftsmanship", icon: Shield },
              { type: "text-icon", text: "Certified Experts", icon: HardHat },
              { type: "text-icon", text: "Reliable Service", icon: ThumbsUp },
              { type: "text-icon", text: "Engineered Durability", icon: Star },
            ]}
            testimonials={[
              {
                name: "Thabo M.",                handle: "Homeowner",                testimonial: "Unmatched precision and professionalism. The team transformed our property with a roof that defines luxury.",                rating: 5,
                imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-home-with-heater_23-2149339547.jpg"},
              {
                name: "Sarah L.",                handle: "Developer",                testimonial: "Ndou Building & Engineering brought the technical expertise we needed for our high-end residential project.",                rating: 5,
                imageSrc: "http://img.b2bpic.net/free-photo/successful-architect-with-safety-helmet_23-2148242912.jpg"},
            ]}
          />
        </div>

        <div id="about" data-section="about">
          <SplitAbout
            title="Sophistication in Every Detail"
            description="We don't just build roofs; we construct lasting legacies. Our team approaches every project with the precision of civil engineering and the aesthetics of luxury architecture."
            bulletPoints={[
              { title: "Advanced Structural Analysis", description: "Ensuring optimal load distribution and longevity.", icon: Shield },
              { title: "High-End Finishes", description: "Exclusive materials tailored to your home's aesthetic.", icon: Wrench },
              { title: "Full Site Oversight", description: "Rigorous quality control from start to finish.", icon: ClipboardCheck },
            ]}
            imageSrc="http://img.b2bpic.net/free-photo/flat-lay-arrangement-with-safety-equipment_23-2148921437.jpg"
            imageAlt="Luxury roofing project oversight"
            mediaAnimation="slide-up"
            textboxLayout="default"
          />
        </div>

        <div id="services" data-section="services">
          <FeatureCardThree
            title="Premium Roofing Services"
            description="Specialized services for discerning homeowners."
            features={[
              { title: "Architectural Shingle Systems", description: "High-performance shingles designed for durability and elegance.", imageSrc: "http://img.b2bpic.net/free-photo/3d-geometric-weave-abstract-wallpaper-background_1048-8671.jpg" },
              { title: "Structural Repairs", description: "Expert engineering solutions for complex roof integrity issues.", imageSrc: "http://img.b2bpic.net/free-photo/laborer-building-roof-house_23-2148748844.jpg" },
              { title: "Modern Flat Roofing", description: "Seamless, waterproof systems for contemporary residential designs.", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-with-helmet-sitting-roof_23-2149343713.jpg" },
              { title: "Custom Metal Work", description: "Bespoke roofing features crafted by skilled tradesmen.", imageSrc: "http://img.b2bpic.net/free-photo/photo-metal-texture-pattern_58702-13917.jpg" },
            ]}
            gridVariant="uniform-all-items-equal"
            animationType="slide-up"
            textboxLayout="default"
          />
        </div>

        <div id="metrics" data-section="metrics">
          <MetricCardEleven
            title="Proven Engineering Prowess"
            description="Commitment to excellence measurable in every project we undertake."
            metrics={[
              { id: "1", value: "100%", title: "Quality Compliance", description: "Strict adherence to modern building codes.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-business-man-reading-from-clipboard_23-2148763830.jpg" },
              { id: "2", value: "50+", title: "Luxury Projects", description: "Successful high-end residential installations.", imageSrc: "http://img.b2bpic.net/free-photo/architect-finishing-home-schematics-after-collaborating-with-engineers-ensure-designs-meet-client_482257-133033.jpg" },
              { id: "3", value: "24hr", title: "Response Time", description: "Rapid support for your urgent requests.", imageSrc: "http://img.b2bpic.net/free-photo/learning-wall-digital-bargain-arm_1134-1314.jpg" },
            ]}
            animationType="slide-up"
            textboxLayout="default"
          />
        </div>

        <div id="process" data-section="process">
          <FeatureCardTen
            title="The Ndou Process"
            description="Engineering excellence requires a systematic, transparent approach."
            features={[
              {
                title: "Engineering Assessment",                description: "Our team analyzes your roof's integrity with precision instruments.",                media: { imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-holding-tablet_23-2148751965.jpg" },
                items: [{ icon: Search, text: "Structural integrity audit" }, { icon: ClipboardCheck, text: "Detailed project roadmap" }],
                reverse: false,
              },
              {
                title: "Craftsmanship Execution",                description: "Expert tradespeople execute the plan with perfection.",                media: { imageSrc: "http://img.b2bpic.net/free-photo/man-working-roof-with-drill_23-2148748774.jpg" },
                items: [{ icon: HardHat, text: "Site safety standards" }, { icon: Wrench, text: "Precision material install" }],
                reverse: true,
              },
            ]}
            animationType="slide-up"
            textboxLayout="default"
          />
        </div>

        <div id="testimonials" data-section="testimonials">
          <TestimonialCardOne
            title="Client Endorsements"
            description="Hear why industry leaders and homeowners trust our work."
            testimonials={[
              { id: "1", name: "Linda K.", role: "Real Estate Developer", company: "Luxury Estates", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-business-woman_329181-13486.jpg" },
              { id: "2", name: "Marcus B.", role: "Architect", company: "Urban Design", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/female-architect-with-helmet-construction-site_23-2147702481.jpg" },
            ]}
            gridVariant="uniform-all-items-equal"
            animationType="slide-up"
            textboxLayout="default"
          />
        </div>

        <div id="faq" data-section="faq">
          <FaqDouble
            title="Frequently Asked Questions"
            description="Clear answers about our processes and standards."
            faqs={[
              { id: "1", title: "What materials do you recommend?", content: "We focus on high-performance materials like architectural shingles and premium-grade metal alloys for durability and style." },
              { id: "2", title: "How is your engineering different?", content: "We apply structural engineering principles to every roof, ensuring weight distribution and thermal efficiency are maximized." },
            ]}
            faqsAnimation="slide-up"
            textboxLayout="default"
          />
        </div>

        <div id="contact" data-section="contact">
          <ContactSplitForm
            title="Start Your Project"
            description="Connect with us directly for a professional consultation."
            inputs={[
              { name: "name", type: "text", placeholder: "Full Name", required: true },
              { name: "email", type: "email", placeholder: "Email Address", required: true },
              { name: "phone", type: "tel", placeholder: "WhatsApp Phone Number" },
            ]}
            textarea={{ name: "message", placeholder: "Describe your project requirements...", rows: 5, required: true }}
            buttonText="Send Request"
            imageSrc="http://img.b2bpic.net/free-photo/people-repairing-computer-chips_23-2150880938.jpg"
            mediaPosition="right"
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterBase
            logoText="Ndou Building & Engineering"
            columns={[
              { title: "Navigation", items: [{ label: "About", href: "#about" }, { label: "Services", href: "#services" }] },
              { title: "Contact", items: [{ label: "+27 63 754 0110", href: "tel:+27637540110" }, { label: "WhatsApp", href: "https://wa.me/27637540110" }] },
            ]}
            copyrightText="© 2025 Ndou Building & Engineering"
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
