"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import { Award, Building, Cog, Diamond, GraduationCap, Home, Leaf, ListChecks, Lock, ShieldCheck, Sparkles, Wrench } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="compact"
        sizing="mediumLargeSizeLargeTitles"
        background="aurora"
        cardStyle="gradient-bordered"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Home",          id: "#hero"},
        {
          name: "About",          id: "#about"},
        {
          name: "Services",          id: "#services"},
        {
          name: "Projects",          id: "#projects"},
        {
          name: "Testimonials",          id: "#testimonials"},
        {
          name: "FAQ",          id: "#faq"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3wvjrw"
      logoAlt="MDM Roofing LTD Logo"
      brandName="MDM Roofing LTD"
      button={{
        text: "Schedule Consultation",        href: "#contact"}}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardTestimonial
      useInvertedBackground={false}
      background={{
        variant: "downward-rays-static"}}
      title="Roofing Excellence Engineered for Luxury Homes"
      description="MDM Roofing LTD delivers premium roofing solutions in Surrey BC with meticulous craftsmanship and industry-leading warranties. Your roof is our masterpiece."
      testimonials={[
        {
          name: "Sarah J.",          handle: "@LuxuryHomeowner",          testimonial: "MDM Roofing transformed our property with a stunning new roof. The attention to detail was impeccable, and the team was incredibly professional.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/businessman-smiling-looking-camera_23-2148112827.jpg"},
        {
          name: "Michael C.",          handle: "@CommercialPM",          testimonial: "For our commercial complex, durability and aesthetics were key. MDM Roofing exceeded expectations, delivering a robust and visually impressive solution.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/compare-old-businesswoman-business-wondering_1194-7880.jpg"},
        {
          name: "Emily R.",          handle: "@DesignMaven",          testimonial: "As an architect, I'm highly particular about finishes. MDM's craftsmanship is truly superior, perfectly complementing our design vision.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/couple-with-sparklers-balcony_23-2147744511.jpg"},
        {
          name: "David K.",          handle: "@HighEndResidences",          testimonial: "We sought the best for our estate, and MDM Roofing delivered. Their service, quality, and post-installation support were top-tier.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/image-working-woman-office-digital-nomad-with-laptop-programmer-designing-web-page-computer_1258-195369.jpg"},
        {
          name: "Olivia M.",          handle: "@PropertyInvestor",          testimonial: "Investing in MDM Roofing was a smart decision. Their work not only enhanced our property's value but also provided peace of mind for decades to come.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/young-man-with-keys-just-bought-new-appartment_1303-28896.jpg"},
      ]}
      buttons={[
        {
          text: "Schedule Premium Consultation",          href: "#contact"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/concrete-building_1127-2031.jpg"
      imageAlt="Luxurious home with newly installed premium roof"
      avatars={[
        {
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3wvjrw",          alt: "Happy homeowner Sarah J."},
        {
          src: "http://img.b2bpic.net/free-photo/concrete-building_1127-2031.jpg",          alt: "Commercial Property Manager Michael C."},
        {
          src: "http://img.b2bpic.net/free-photo/businessman-smiling-looking-camera_23-2148112827.jpg",          alt: "Architect Emily R."},
        {
          src: "http://img.b2bpic.net/free-photo/compare-old-businesswoman-business-wondering_1194-7880.jpg",          alt: "High-End Resident David K."},
        {
          src: "http://img.b2bpic.net/free-photo/couple-with-sparklers-balcony_23-2147744511.jpg",          alt: "Property Investor Olivia M."},
      ]}
      avatarText="Trusted by over 1,000 discerning clients"
      marqueeItems={[
        {
          type: "text-icon",          text: "Quality Craftsmanship",          icon: Diamond,
        },
        {
          type: "text-icon",          text: "Sustainable Solutions",          icon: Leaf,
        },
        {
          type: "text-icon",          text: "Expert Installations",          icon: Wrench,
        },
        {
          type: "text-icon",          text: "Client Satisfaction",          icon: Award,
        },
        {
          type: "text-icon",          text: "Advanced Materials",          icon: ShieldCheck,
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <AboutMetric
      useInvertedBackground={true}
      title="Unmatched Expertise & Dedication"
      metrics={[
        {
          icon: Cog,
          label: "Years in Craft",          value: "30+"},
        {
          icon: Building,
          label: "Projects Completed",          value: "500+"},
        {
          icon: Award,
          label: "Industry Certifications",          value: "10+"},
        {
          icon: Award,
          label: "Client Satisfaction",          value: "99%"},
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureHoverPattern
      animationType="scale-rotate"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          icon: ListChecks,
          title: "Bespoke Design Consultation",          description: "Collaborate with our experts to select materials and styles that perfectly match your property's aesthetic and architectural integrity."},
        {
          icon: Diamond,
          title: "Luxury Material Selection",          description: "Access an exclusive palette of premium materials, including natural slate, sophisticated tile, and durable metal options, sourced globally."},
        {
          icon: Sparkles,
          title: "Meticulous Craftsmanship",          description: "Our highly skilled artisans ensure every installation is executed with precision, adhering to the highest standards of quality and detail."},
        {
          icon: ShieldCheck,
          title: "Industry-Leading Warranties",          description: "Benefit from comprehensive warranty programs that provide unmatched protection and peace of mind for your long-term investment."},
      ]}
      title="Our Premium Roofing Solutions"
      description="From traditional elegance to modern innovation, we offer a comprehensive suite of services tailored to your unique architectural vision and property demands."
    />
  </div>

  <div id="projects" data-section="projects">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={true}
      products={[
        {
          id: "p1",          name: "Commercial Plaza Re-roof",          price: "Project Cost: Inquire",          variant: "TPO Membrane",          imageSrc: "http://img.b2bpic.net/free-photo/hight-rise-condominium-office-buildings_1127-3044.jpg",          imageAlt: "Modern commercial building with a newly installed TPO membrane roof"},
        {
          id: "p2",          name: "Heritage Slate Estate",          price: "Project Cost: Inquire",          variant: "Natural Slate",          imageSrc: "http://img.b2bpic.net/free-photo/exterior-home_74190-4300.jpg",          imageAlt: "Elegant residential property with a traditional natural slate roof"},
        {
          id: "p3",          name: "Eco-Friendly Green Roof",          price: "Project Cost: Inquire",          variant: "Vegetated System",          imageSrc: "http://img.b2bpic.net/free-photo/low-angle-shot-beautiful-green-trees-inside-shed-daytime_181624-7366.jpg",          imageAlt: "Sustainable commercial building with a lush vegetated green roof"},
        {
          id: "p4",          name: "Modern Metal Residence",          price: "Project Cost: Inquire",          variant: "Standing Seam Metal",          imageSrc: "http://img.b2bpic.net/free-photo/modern-stadium_1127-110.jpg",          imageAlt: "Contemporary residential home featuring a sleek standing seam metal roof"},
        {
          id: "p5",          name: "Mediterranean Villa Redesign",          price: "Project Cost: Inquire",          variant: "Terracotta Tiles",          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-architecture-italy-style_1203-7263.jpg",          imageAlt: "Luxurious Mediterranean villa with classic terracotta tile roofing"},
        {
          id: "p6",          name: "Suburban Architectural Shingle",          price: "Project Cost: Inquire",          variant: "Designer Asphalt",          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-shot-white-building-hamilton-gardens-new-zealand-blue-sky_181624-13599.jpg",          imageAlt: "Charming suburban house with high-end designer asphalt shingles"},
      ]}
      title="Showcasing Exemplary Projects"
      description="Explore our portfolio of completed projects, demonstrating the precision, quality, and aesthetic appeal that define MDM Roofing's work."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardOne
      animationType="depth-3d"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",          value: "200+",          title: "Luxury Homes Serviced",          description: "Bringing unparalleled craftsmanship to high-value residential properties across the region.",          icon: Home,
        },
        {
          id: "m2",          value: "100%",          title: "Safety & Compliance",          description: "Adhering to the strictest safety standards for peace of mind on every project.",          icon: Lock,
        },
        {
          id: "m3",          value: "40+",          title: "Years of Combined Experience",          description: "Our team's expertise ensures superior results and lasting quality.",          icon: GraduationCap,
        },
      ]}
      title="Our Commitment to Excellence"
      description="Years of experience, countless satisfied clients, and a perfect safety record reflect our unwavering dedication to quality and service."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTen
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "t1",          title: "Exemplary Service and Unrivaled Quality",          quote: "MDM Roofing delivered an exemplary service from initial consultation to final inspection. Our new roof is a true masterpiece and has significantly enhanced our home's curb appeal and value. Their team was professional, efficient, and meticulous.",          name: "Eleanor Vance",          role: "Residential Client",          imageSrc: "http://img.b2bpic.net/free-photo/smiling-senior-businessman-touching-glass-screen_1262-1999.jpg",          imageAlt: "Portrait of Eleanor Vance"},
        {
          id: "t2",          title: "A Partner You Can Trust for Commercial Projects",          quote: "Managing large commercial properties demands partners who are reliable and deliver on their promises. MDM Roofing consistently exceeds our expectations, providing durable, high-performance roofing solutions with minimal disruption to our operations.",          name: "Jonathan Hayes",          role: "Commercial Property Developer",          imageSrc: "http://img.b2bpic.net/free-photo/thoughtful-businesswoman-with-laptop-looking_74855-5171.jpg",          imageAlt: "Portrait of Jonathan Hayes"},
        {
          id: "t3",          title: "Craftsmanship That Stands Apart",          quote: "As a custom home builder, I look for partners who share my commitment to excellence. MDM Roofing's craftsmanship is truly in a league of its own. They pay attention to every detail, ensuring the roofing perfectly complements the architectural vision.",          name: "Sofia Lombardi",          role: "Architect & Builder",          imageSrc: "http://img.b2bpic.net/free-photo/trans-couple-holding-each-other-being-affectionate-city-streets_23-2149304563.jpg",          imageAlt: "Portrait of Sofia Lombardi"},
        {
          id: "t4",          title: "Investment-Worthy Quality and Durability",          quote: "Choosing MDM Roofing was an investment in quality that has already paid dividends. Our roof is not only beautiful but engineered for longevity. The entire process was seamless, and the communication was excellent.",          name: "Richard Sterling",          role: "Affluent Homeowner",          imageSrc: "http://img.b2bpic.net/free-photo/business-young-entrepreneurs-concept-young-woman-video-chats-has-online-meeting-uses-wireless_1258-195293.jpg",          imageAlt: "Portrait of Richard Sterling"},
        {
          id: "t5",          title: "Luxury Service, Flawless Execution",          quote: "From the initial design phase to project completion, MDM Roofing provided a luxury service experience. The flawless execution and the stunning result speak volumes about their dedication to client satisfaction and roofing artistry.",          name: "Isabella Chen",          role: "Estate Manager",          imageSrc: "http://img.b2bpic.net/free-photo/horizontal-shot-pleasant-looking-busy-young-woman-studies-provision-taxation-holds-papers_273609-18377.jpg",          imageAlt: "Portrait of Isabella Chen"},
      ]}
      title="Voices of Our Valued Clients"
      description="Discover why homeowners and commercial partners trust MDM Roofing for unparalleled quality, reliability, and service."
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "GAF Certified Contractor",        "Owens Corning Preferred",        "CertainTeed Select ShingleMaster",        "Hydrostop Authorized Applicator",        "Master Elite Roofing",        "GuildQuality Member",        "BBB Accredited",        "Chamber of Commerce"]}
      title="Trusted by Industry Leaders"
      description="Our commitment to excellence has earned us recognition and partnerships with leading architects, builders, and material suppliers, ensuring top-tier results."
      showCard={false}
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={true}
      faqs={[
        {
          id: "q1",          title: "What types of roofing materials do you specialize in?",          content: "MDM Roofing specializes in a wide range of premium materials including natural slate, clay and concrete tiles, standing seam metal, high-end asphalt shingles, and advanced TPO/PVC for commercial properties. We cater to both traditional and modern architectural demands."},
        {
          id: "q2",          title: "Do you offer custom roofing solutions and design assistance?",          content: "Absolutely. We pride ourselves on offering bespoke roofing solutions. Our experts work closely with architects and homeowners to realize unique visions, providing comprehensive design consultations and material sourcing guidance."},
        {
          id: "q3",          title: "What kind of warranties do you provide?",          content: "MDM Roofing offers industry-leading warranties covering both materials and workmanship. The specifics vary by material and project, but our commitment is always to provide long-term peace of mind and protect your investment."},
        {
          id: "q4",          title: "How do I schedule a consultation and receive an estimate?",          content: "Scheduling a premium consultation is simple. You can fill out our online contact form, call us directly, or email us. We'll arrange a convenient time to visit your property, discuss your needs, and provide a detailed, transparent estimate."},
      ]}
      sideTitle="Frequently Asked Questions"
      sideDescription="Find quick answers to common inquiries about our services, premium materials, industry-leading warranties, and our meticulous project process."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Schedule Your Premium Consultation"
      description="Connect with MDM Roofing LTD today to discuss your project requirements and receive a personalized, detailed estimate from our expert team."
      inputs={[
        {
          name: "name",          type: "text",          placeholder: "Your Name",          required: true,
        },
        {
          name: "email",          type: "email",          placeholder: "Your Email",          required: true,
        },
        {
          name: "phone",          type: "tel",          placeholder: "Your Phone Number",          required: false,
        },
      ]}
      textarea={{
        name: "message",        placeholder: "Tell us about your roofing project...",        rows: 5,
        required: true,
      }}
      imageSrc="http://img.b2bpic.net/free-photo/medium-shot-architect-engineer-looking-plans_23-2148233709.jpg"
      imageAlt="Roofing professionals reviewing blueprints on a job site"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
      columns={[
        {
          title: "Services",          items: [
            {
              label: "Residential Roofing",              href: "#services"},
            {
              label: "Commercial Roofing",              href: "#services"},
            {
              label: "Roof Repairs",              href: "#services"},
            {
              label: "Material Selection",              href: "#services"},
          ],
        },
        {
          title: "Company",          items: [
            {
              label: "About Us",              href: "#about"},
            {
              label: "Our Projects",              href: "#projects"},
            {
              label: "Testimonials",              href: "#testimonials"},
            {
              label: "FAQ",              href: "#faq"},
          ],
        },
        {
          title: "Connect",          items: [
            {
              label: "Contact Us",              href: "#contact"},
            {
              label: "Schedule Consultation",              href: "#contact"},
            {
              label: "Careers",              href: "#"},
            {
              label: "Privacy Policy",              href: "#"},
          ],
        },
      ]}
      bottomLeftText="&copy; 2024 MDM Roofing LTD, Surrey BC. All rights reserved."
      bottomRightText="Built with excellence and precision."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
