"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-magnetic"
        defaultTextAnimation="reveal-blur"
        borderRadius="soft"
        contentWidth="compact"
        sizing="largeSizeMediumTitles"
        background="grid"
        cardStyle="soft-shadow"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Home",
          id: "hero",
        },
        {
          name: "About",
          id: "about",
        },
        {
          name: "Services",
          id: "features",
        },
        {
          name: "Testimonials",
          id: "testimonials",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="Denver Roofers"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroOverlay
      title="Denver's Trusted Roofing Professionals"
      description="Expert roof repairs, replacements, and installations for Colorado homes. Reliable, durable, and local."
      buttons={[
        {
          text: "Get a Free Quote",
          href: "#contact",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/new-brick-house-with-modular-chimney-stone-coated-metal-roof-tile-plastic-windows-rain-gutter_1253-1543.jpg"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/never-ending-happiness-our-new-home_329181-9763.jpg",
          alt: "happy homeowner",
        },
        {
          src: "http://img.b2bpic.net/free-photo/stylish-woman-wearing-yellow-bandana_273609-13337.jpg",
          alt: "satisfied customer",
        },
        {
          src: "http://img.b2bpic.net/free-photo/middle-age-greyhaired-woman-smiling-confident-drinking-coffee-new-home_839833-34774.jpg",
          alt: "happy homeowner",
        },
        {
          src: "http://img.b2bpic.net/free-photo/man-talking-phone-kitchen_23-2148254569.jpg",
          alt: "satisfied homeowner",
        },
        {
          src: "http://img.b2bpic.net/free-photo/man-riding-scooter-outside_23-2149019498.jpg",
          alt: "satisfied customer",
        },
      ]}
      avatarText="Trusted by 2,000+ local homeowners"
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={true}
      title="Decades of Local Roofing Expertise"
      description="We specialize in protecting Denver homes from the elements. Our team combines premium materials with master craftsmanship to deliver roofs built to last through every Colorado season."
      metrics={[
        {
          value: "15+",
          title: "Years Experience",
        },
        {
          value: "2k+",
          title: "Roofs Repaired",
        },
        {
          value: "100%",
          title: "Satisfied Clients",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/couple-painting-walls-their-new-home-together_23-2149086833.jpg"
      mediaAnimation="slide-up"
      metricsAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardNineteen
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          tag: "Repair",
          title: "Storm Damage Repair",
          subtitle: "Fast Response",
          description: "Quick restoration after hail or storm damage.",
          imageSrc: "http://img.b2bpic.net/free-vector/bundle-engineering-set-icons_24877-57318.jpg",
          imageAlt: "construction industry certification icon",
        },
        {
          tag: "Installation",
          title: "Roof Replacement",
          subtitle: "Quality Materials",
          description: "Long-lasting replacements with modern shingles.",
          imageSrc: "http://img.b2bpic.net/free-photo/new-brick-house-with-modular-chimney-stone-coated-metal-roof-tile-plastic-windows-rain-gutter_1253-1543.jpg",
          imageAlt: "construction industry certification icon",
        },
        {
          tag: "Inspection",
          title: "Roof Inspections",
          subtitle: "Detailed Reporting",
          description: "Comprehensive checkups to ensure your roof is structurally sound.",
          imageSrc: "http://img.b2bpic.net/free-photo/couple-painting-walls-their-new-home-together_23-2149086833.jpg",
          imageAlt: "construction industry certification icon",
        },
      ]}
      title="Our Roofing Services"
      description="We provide comprehensive solutions tailored to your unique roofing needs."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={true}
      metrics={[
        {
          id: "m1",
          value: "24/7",
          description: "Emergency Support",
        },
        {
          id: "m2",
          value: "Lifetime",
          description: "Material Warranty",
        },
        {
          id: "m3",
          value: "Fast",
          description: "Permit Approval",
        },
      ]}
      title="Quality You Can Measure"
      description="We stand by our work with industry-leading standards."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSixteen
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",
          name: "Sarah Miller",
          role: "Homeowner",
          company: "Denver",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-good-looking-thick-skinned-student-woman-with-curly-hair-casual-fashionable-clothes-looking-aside-smiling-brightfully-friend-outside-waiting-her-order-coffee-shop-life_176420-12327.jpg",
        },
        {
          id: "2",
          name: "James Wilson",
          role: "Homeowner",
          company: "Boulder",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-young-man-pointing-camera_1262-3266.jpg",
        },
        {
          id: "3",
          name: "Emily Davis",
          role: "Homeowner",
          company: "Aurora",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/happily-smiling-latino-dark-skinned-man-wears-blank-heather-grey-clothing-pose-near-wooden-ladder-white-wall-side-view_346278-1041.jpg",
        },
        {
          id: "4",
          name: "Robert Brown",
          role: "Homeowner",
          company: "Littleton",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-using-tablet-celebrating-success-outdoor-cafe_1262-18867.jpg",
        },
        {
          id: "5",
          name: "Linda White",
          role: "Homeowner",
          company: "Centennial",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/man-carrying-girlfriend-back_23-2147744872.jpg",
        },
      ]}
      kpiItems={[
        {
          value: "4.9",
          label: "Avg Rating",
        },
        {
          value: "500+",
          label: "Reviews",
        },
        {
          value: "100%",
          label: "Referral Rate",
        },
      ]}
      title="Voices of Our Clients"
      description="See why Denver homeowners choose us for their roofing projects."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="split"
      useInvertedBackground={true}
      faqs={[
        {
          id: "f1",
          title: "How often should I inspect my roof?",
          content: "We recommend professional inspections every 2-3 years, or after any severe hail storm.",
        },
        {
          id: "f2",
          title: "How long does a roof replacement take?",
          content: "Most residential roof replacements take 2-3 days, depending on weather and complexity.",
        },
        {
          id: "f3",
          title: "Do you offer financing?",
          content: "Yes, we work with multiple financing partners to make your roofing project affordable.",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/closeup-roof-house-made-wooden-tiles_169016-25417.jpg"
      title="Frequently Asked Questions"
      description="Answers to common roofing questions."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Roofing Guild",
        "Contractor Alliance",
        "Local Business Hub",
        "Material Quality Seal",
        "Denver Service Trust",
        "Home Improvement Net",
        "Safety Standards Org",
      ]}
      title="Certified Excellence"
      description="We are proud members of leading industry organizations."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={true}
      background={{
        variant: "gradient-bars",
      }}
      text="Ready to protect your home? Get your free professional roofing consultation today."
      buttons={[
        {
          text: "Call (303) 555-0101",
          href: "tel:3035550101",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/medium-shot-men-working-roof_23-2149343671.jpg"
      logoText="Denver Roofers"
      columns={[
        {
          title: "Quick Links",
          items: [
            {
              label: "About",
              href: "#about",
            },
            {
              label: "Services",
              href: "#features",
            },
            {
              label: "Contact",
              href: "#contact",
            },
          ],
        },
        {
          title: "Support",
          items: [
            {
              label: "FAQ",
              href: "#faq",
            },
            {
              label: "Terms of Use",
              href: "#",
            },
            {
              label: "Privacy Policy",
              href: "#",
            },
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
