"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",          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",          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",          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",          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",          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"
      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"},
          ]
        },
        {
          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"},
          ]
        },
        {
          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"},
          ]
        },
        {
          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"},
          ]
        },
        {
          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"},
          ]
        },
        {
          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"},
          ]
        }
      ]}
      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>
  );
}
