"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import { Cloud, FileText, Home, ListChecks, Search, Wrench } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="directional-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="small"
        sizing="largeSmallSizeMediumTitles"
        background="circleGradient"
        cardStyle="subtle-shadow"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Home",
          id: "#home",
        },
        {
          name: "Services",
          id: "#services",
        },
        {
          name: "Gallery",
          id: "#before-after",
        },
        {
          name: "Why Choose Us",
          id: "#why-choose-telge",
        },
        {
          name: "Reviews",
          id: "#reviews",
        },
        {
          name: "FAQ",
          id: "#faq",
        },
        {
          name: "Contact",
          id: "#contact",
        },
      ]}
      logoSrc="http://img.b2bpic.net/free-photo/dark-kitchen-cabinets-with-gold-hardware-details-elegant-interior-with-wooden-counter-plant_169016-72764.jpg"
      logoAlt="Telge Roofing Logo"
      brandName="Telge Roofing"
      button={{
        text: "GET FREE INSPECTION",
        href: "#contact",
      }}
    />
  </div>

  <div id="home" data-section="home">
      <HeroOverlayTestimonial
      title="Your Roof Should Add Value. Not Stress."
      description="Whether you’re dealing with storm damage, an aging roof, or planning a complete exterior transformation, Telge Roofing delivers premium roofing solutions backed by nearly 700 five-star reviews. With free roof inspections, insurance claim assistance, premium roofing systems, and being family-owned since 2009 with background-checked & Google-verified professionals, we ensure peace of mind."
      testimonials={[
        {
          name: "Trusted by Homeowners",
          handle: "Nearly 700 Reviews",
          testimonial: "4.8 Stars from Nearly 700 Homeowners",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/beauty-style-fashion-femininity-concept-positive-beautiful-young-european-woman-blue-shirt-looking-camera-with-broad-happy-smile-being-good-mood-kitchen-interior-background_343059-2087.jpg?_wi=1",
          imageAlt: "professional male portrait smiling",
        },
        {
          name: "Exceptional Service",
          handle: "Quality Focused",
          testimonial: "Effortless customer experience from start to finish.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/dark-kitchen-cabinets-with-gold-hardware-details-elegant-interior-with-wooden-counter-plant_169016-72764.jpg?_wi=1",
          imageAlt: "professional male portrait smiling",
        },
        {
          name: "Premium Protection",
          handle: "Lifetime Peace of Mind",
          testimonial: "Protecting homes with premium roofing systems for 17+ years.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/iceland-landscape-beautiful-church_23-2149099948.jpg?_wi=1",
          imageAlt: "professional male portrait smiling",
        },
        {
          name: "Expert Restoration",
          handle: "Storm Ready",
          testimonial: "Expert storm restoration ensures your home is safe.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-african-american-woman-cafe_273609-5073.jpg?_wi=1",
          imageAlt: "professional male portrait smiling",
        },
        {
          name: "Highly Recommended",
          handle: "Client Success",
          testimonial: "Professionalism, quality, and communication were outstanding. Truly a five-star experience with Telge Roofing.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/experienced-senior-female-executive-eyeglasses_1262-5027.jpg?_wi=1",
          imageAlt: "professional male portrait smiling",
        },
      ]}
      buttons={[
        {
          text: "GET FREE INSPECTION",
          href: "#contact",
        },
        {
          text: "VIEW OUR WORK",
          href: "#before-after",
        },
      ]}
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/dark-kitchen-cabinets-with-gold-hardware-details-elegant-interior-with-wooden-counter-plant_169016-72764.jpg",
          alt: "Customer 1",
        },
        {
          src: "http://img.b2bpic.net/free-photo/beautiful-african-american-woman-cafe_273609-5073.jpg",
          alt: "Customer 2",
        },
        {
          src: "http://img.b2bpic.net/free-photo/experienced-senior-female-executive-eyeglasses_1262-5027.jpg",
          alt: "Customer 3",
        },
        {
          src: "http://img.b2bpic.net/free-photo/portrait-man-smiling-camera_23-2148238839.jpg",
          alt: "Customer 4",
        },
        {
          src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-work_23-2149304143.jpg",
          alt: "Happy homeowner",
        },
      ]}
      avatarText="4.8 Stars from Nearly 700 Homeowners"
      imageSrc="http://img.b2bpic.net/free-photo/iceland-landscape-beautiful-church_23-2149099948.jpg?_wi=2"
      videoSrc="http://img.b2bpic.net/free-photo/palace-china_1127-4075.jpg"
      imageAlt="Drone footage of luxury homes"
      showDimOverlay={true}
      showBlur={true}
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      metrics={[
        {
          id: "1",
          value: "4.8/5",
          description: "Rating",
        },
        {
          id: "2",
          value: "693+",
          description: "Reviews",
        },
        {
          id: "3",
          value: "17+",
          description: "Years Serving Houston",
        },
        {
          id: "4",
          value: "Google",
          description: "Verified",
        },
        {
          id: "5",
          value: "Background",
          description: "Checked",
        },
        {
          id: "6",
          value: "Family",
          description: "Owned",
        },
      ]}
      title="Our Unmatched Track Record"
      description="The numbers speak for themselves — a testament to our commitment to excellence and customer satisfaction."
    />
  </div>

  <div id="why-choose-telge" data-section="why-choose-telge">
      <MetricSplitMediaAbout
      useInvertedBackground={false}
      title="The Roofing Experience Houston Homeowners Deserve"
      description="At Telge Roofing, we redefine what it means to work with a contractor. Our commitment to luxury craftsmanship, transparent service, and lifetime peace of mind ensures an effortless journey from your first inspection to project completion."
      metrics={[
        {
          value: "Premium Consultation",
          title: "No pressure. No gimmicks. Just honest recommendations from experienced roofing professionals.",
        },
        {
          value: "White-Glove Project Management",
          title: "One dedicated project manager from inspection through completion.",
        },
        {
          value: "Superior Installation",
          title: "We use premium roofing systems designed for Texas heat, storms, and hurricanes.",
        },
        {
          value: "Transparent Communication",
          title: "You’ll always know what’s happening with your project.",
        },
        {
          value: "Insurance Expertise",
          title: "We help homeowners navigate claims and maximize eligible coverage.",
        },
        {
          value: "Industry-Leading Warranties",
          title: "Protection long after installation is complete.",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/engineer-writing-condenser-values_482257-90848.jpg"
      imageAlt="Roofing expert discussing with homeowner"
      mediaAnimation="opacity"
      metricsAnimation="slide-up"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardTwentyFive
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          title: "Residential Roof Replacement",
          description: "Complete roofing systems engineered for long-term protection and beauty.",
          icon: Home,
          mediaItems: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/long-shot-roofer-working-with-helmet_23-2149343709.jpg",
              imageAlt: "New luxury architectural roof installation",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/man-walking-roof_1321-1041.jpg",
              imageAlt: "Side view of a new asphalt shingle roof",
            },
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/dark-kitchen-cabinets-with-gold-hardware-details-elegant-interior-with-wooden-counter-plant_169016-72764.jpg?_wi=2",
          imageAlt: "new luxury architectural roof installation",
        },
        {
          title: "Storm Damage Restoration",
          description: "Fast inspections and expert repairs following hail and wind events.",
          icon: Cloud,
          mediaItems: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/boy-red-coat-looks-busy-talking-phone_8353-1103.jpg",
              imageAlt: "Damaged roof after storm before repair",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/tile-roof-texture_23-2148164702.jpg",
              imageAlt: "Repaired roof after storm restoration",
            },
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/iceland-landscape-beautiful-church_23-2149099948.jpg?_wi=3",
          imageAlt: "new luxury architectural roof installation",
        },
        {
          title: "Roof Repairs",
          description: "Leak detection, emergency repairs, and preventative maintenance.",
          icon: Wrench,
          mediaItems: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/man-with-helmet-sitting-roof-full-shot_23-2149343712.jpg",
              imageAlt: "Leak detection on old roof interior",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/man-working-outdoors-full-shot_23-2149714278.jpg",
              imageAlt: "Roof repair professional fixing shingles",
            },
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/beauty-style-fashion-femininity-concept-positive-beautiful-young-european-woman-blue-shirt-looking-camera-with-broad-happy-smile-being-good-mood-kitchen-interior-background_343059-2087.jpg?_wi=2",
          imageAlt: "new luxury architectural roof installation",
        },
        {
          title: "Insurance Claim Assistance",
          description: "We work directly with insurance carriers to simplify the process and maximize your eligible coverage.",
          icon: FileText,
          mediaItems: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/mid-adult-couple-reaching-agreement-with-real-estate-agent-office-women-are-handshaking_637285-1732.jpg",
              imageAlt: "Homeowner talking to insurance agent roof",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/paper-credit-request-with-green-stamp_23-2147764209.jpg",
              imageAlt: "Insurance check for roof repair",
            },
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-african-american-woman-cafe_273609-5073.jpg?_wi=2",
          imageAlt: "new luxury architectural roof installation",
        },
        {
          title: "Roof Inspections",
          description: "Detailed assessments with photo documentation to give you a clear understanding of your roof’s condition.",
          icon: Search,
          mediaItems: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-hummer-tools-stairs-house-construction_181624-28753.jpg",
              imageAlt: "Roofer performing detailed roof inspection",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/side-view-old-man-looking-tablet_23-2148269414.jpg",
              imageAlt: "Detailed roof inspection report on tablet",
            },
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/experienced-senior-female-executive-eyeglasses_1262-5027.jpg?_wi=2",
          imageAlt: "new luxury architectural roof installation",
        },
        {
          title: "Exterior Improvements",
          description: "Enhance your home’s functionality and aesthetics with gutters, ventilation systems, and other exterior upgrades.",
          icon: ListChecks,
          mediaItems: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/painting-red_1385-599.jpg",
              imageAlt: "New gutter installation luxury home",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/detail-urban-stairs_23-2148107136.jpg",
              imageAlt: "Close-up of new seamless gutters",
            },
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-smiling-camera_23-2148238839.jpg",
          imageAlt: "new luxury architectural roof installation",
        },
      ]}
      title="Our Services"
      description="Telge Roofing offers a comprehensive suite of luxury roofing solutions, ensuring your home is protected with beauty and durability."
    />
  </div>

  <div id="before-after" data-section="before-after">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      products={[
        {
          id: "1",
          name: "Aging Roof",
          price: "",
          variant: "Before",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-wood-texture-background_23-2148935976.jpg",
          imageAlt: "Aging roof with missing shingles",
        },
        {
          id: "2",
          name: "Storm Damage",
          price: "",
          variant: "Before",
          imageSrc: "http://img.b2bpic.net/free-photo/roof-building-covered-snow-against-cloudy-sky_181624-37509.jpg",
          imageAlt: "Storm damaged roof",
        },
        {
          id: "3",
          name: "Missing Shingles",
          price: "",
          variant: "Before",
          imageSrc: "http://img.b2bpic.net/free-photo/view-abandoned-decaying-house-nature_23-2150166582.jpg",
          imageAlt: "Old roof with missing shingles",
        },
        {
          id: "4",
          name: "Luxury Architectural Roofing",
          price: "",
          variant: "After",
          imageSrc: "http://img.b2bpic.net/free-photo/concrete-building-with-mirror-windows-clear-sky_181624-6780.jpg",
          imageAlt: "Newly installed luxury architectural roof",
        },
        {
          id: "5",
          name: "Storm Restoration",
          price: "",
          variant: "After",
          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-roofer-working-with-helmet_23-2149343710.jpg",
          imageAlt: "Restored roof after storm damage",
        },
        {
          id: "6",
          name: "Complete Exterior Renovation",
          price: "",
          variant: "After",
          imageSrc: "http://img.b2bpic.net/free-photo/view-stone-building-with-large-windows_23-2148252828.jpg",
          imageAlt: "Home with new roof after complete exterior renovation",
        },
      ]}
      title="Real Homes. Real Transformations."
      description="Every roof we install enhances curb appeal, increases property value, and protects what matters most. See the dramatic difference Telge Roofing brings."
    />
  </div>

  <div id="reviews" data-section="reviews">
      <TestimonialCardFifteen
      useInvertedBackground={true}
      testimonial="“The entire process was seamless. Professional, honest, and responsive from start to finish. Our roof looks incredible and the team handled everything.”"
      rating={5}
      author="Sarah Johnson, CEO, TechCorp"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/portrait-young-man-white-background_641386-889.jpg",
          alt: "Sarah Johnson",
        },
        {
          src: "http://img.b2bpic.net/free-photo/business-woman-green-suit-using-phone-outside-street_1303-29546.jpg",
          alt: "Michael Chen",
        },
        {
          src: "http://img.b2bpic.net/free-photo/handsome-business-man-wearing-suit-looking-camera-smiling-broadly-with-happy-face-standing-white-background_141793-54115.jpg",
          alt: "Emily Rodriguez",
        },
        {
          src: "http://img.b2bpic.net/free-photo/smiling-blonde-woman-white_181624-25676.jpg",
          alt: "David Kim",
        },
        {
          src: "http://img.b2bpic.net/free-photo/man-posing-with-helmet-medium-shot_23-2148920603.jpg",
          alt: "Satisfied customer",
        },
      ]}
      ratingAnimation="opacity"
      avatarsAnimation="opacity"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "1",
          title: "How much does a roof replacement cost?",
          content: "Every home is different, and costs vary based on materials, size, and complexity. We provide detailed inspections and transparent, no-obligation estimates tailored to your specific needs.",
        },
        {
          id: "2",
          title: "Do you help with insurance claims?",
          content: "Absolutely. We specialize in storm damage restoration and work directly with insurance carriers to assist homeowners throughout the claims process, maximizing your eligible coverage and simplifying paperwork.",
        },
        {
          id: "3",
          title: "How long does a roof replacement take?",
          content: "Most residential roof replacement projects are completed efficiently, typically within 1–2 days, weather permitting. Our dedicated project managers ensure a smooth and timely process.",
        },
        {
          id: "4",
          title: "Do you offer financing?",
          content: "Yes, we understand that a new roof is a significant investment. Flexible financing options are available to help make your premium roofing project more affordable. Contact us to learn more.",
        },
        {
          id: "5",
          title: "Is the inspection really free?",
          content: "Yes, our roof inspections are completely free, with no obligation. We provide a thorough assessment of your roof's condition, complete with photo documentation and honest recommendations.",
        },
      ]}
      title="Frequently Asked Questions"
      description="Get quick answers to common questions about Telge Roofing services, pricing, and process."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={true}
      background={{
        variant: "radial-gradient",
      }}
      text="Get Your Free Roof Inspection. Protect your home before minor issues become major expenses. Fill out the form below to schedule your complimentary assessment. (Note: Actual form fields for Name, Phone, Email, Address, Service Needed, Insurance Claim? (Yes/No) will be rendered here by the form component.)"
      buttons={[
        {
          text: "GET MY FREE INSPECTION",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoReveal
      logoSrc="http://img.b2bpic.net/free-photo/dark-kitchen-cabinets-with-gold-hardware-details-elegant-interior-with-wooden-counter-plant_169016-72764.jpg"
      logoAlt="Telge Roofing Logo"
      logoText="Telge Roofing"
      leftLink={{
        text: "Privacy Policy",
        href: "#",
      }}
      rightLink={{
        text: "Terms of Service",
        href: "#",
      }}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}