"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import { Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="smallMedium"
        sizing="mediumLargeSizeLargeTitles"
        background="circleGradient"
        cardStyle="subtle-shadow"
        primaryButtonStyle="flat"
        secondaryButtonStyle="glass"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "Home",
          id: "/",
        },
        {
          name: "About Us",
          id: "#about",
        },
        {
          name: "Services",
          id: "#services",
        },
        {
          name: "Projects",
          id: "#projects",
        },
        {
          name: "Pricing",
          id: "#pricing",
        },
        {
          name: "FAQ",
          id: "#faq",
        },
        {
          name: "Contact",
          id: "#contact",
        },
      ]}
      logoAlt="Apex Roofing Logo"
      brandName="Apex Roofing"
      button={{
        text: "Get a Free Quote",
        href: "#contact",
      }}
      animateOnLoad={true}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplit
      background={{
        variant: "radial-gradient",
      }}
      imagePosition="right"
      title="Your Trusted Partner for Superior Roofing Solutions"
      description="Apex Roofing delivers unparalleled quality and craftsmanship, ensuring your home is protected with a durable, beautiful roof. Experience the difference of dedicated experts committed to excellence."
      buttons={[
        {
          text: "Get a Free Estimate",
          href: "#contact",
        },
        {
          text: "View Our Services",
          href: "#services",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/lviv-from-bird-s-eye-view-city-from-lviv-view-city-from-tower-colored-roofs_1321-4656.jpg"
      imageAlt="Modern house with a newly installed roof at sunset, showcasing quality workmanship"
      mediaAnimation="slide-up"
      fixedMediaHeight={true}
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/pretty-attractive-young-mixed-race-model-with-large-afro-wearing-navy-jacket-her-naked-body-shorts_633478-1216.jpg",
          alt: "Happy Client 1",
        },
        {
          src: "http://img.b2bpic.net/free-photo/business-people-working-office-with-digital-tablet_1301-6633.jpg",
          alt: "Happy Client 2",
        },
        {
          src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
          alt: "Happy Client 3",
        },
        {
          src: "http://img.b2bpic.net/free-photo/smiling-senior-businessman-pointing-with-finger_1262-3108.jpg",
          alt: "Happy Client 4",
        },
        {
          src: "http://img.b2bpic.net/free-photo/blond-businessman-surprised-expression_1194-3809.jpg",
          alt: "Happy Client 5",
        },
      ]}
      avatarText="Join 500+ satisfied homeowners"
      marqueeItems={[
        {
          type: "image",
          src: "http://img.b2bpic.net/free-photo/abstract-geometric-background-shapes-texture_1194-306805.jpg",
          alt: "Abstract geometric background shapes or texture.",
        },
        {
          type: "image",
          src: "http://img.b2bpic.net/free-photo/closeup-shot-blue-lines-perfect-using-as-background_181624-15180.jpg",
          alt: "Closeup shot of blue lines perfect for using as a background",
        },
        {
          type: "image",
          src: "http://img.b2bpic.net/free-photo/3d-geometric-abstract-twist-background_1048-17253.jpg",
          alt: "3D Geometric Abstract Twist Background",
        },
        {
          type: "image",
          src: "http://img.b2bpic.net/free-photo/contrasting-outdoor-texture-design_23-2149756581.jpg",
          alt: "Contrasting outdoor texture design",
        },
        {
          type: "image",
          src: "http://img.b2bpic.net/free-photo/management-executives-talk-about-factory-automation-strategies_482257-120537.jpg",
          alt: "Management executives talk about factory automation strategies",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={true}
      title="Crafting Excellence, One Roof at a Time"
      description="At Apex Roofing, we combine years of expertise with a passion for perfection. Our certified professionals use only the highest quality materials and innovative techniques to deliver lasting protection and aesthetic appeal for your home. We're dedicated to customer satisfaction and superior results."
      metrics={[
        {
          value: "20+",
          title: "Years of Experience",
        },
        {
          value: "500+",
          title: "Successful Projects",
        },
        {
          value: "98%",
          title: "Client Satisfaction",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/three-factory-workers-safety-hats-discussing-manufacture-plan_1303-30650.jpg"
      imageAlt="Roofing team discussing project plans on a sunny day"
      mediaAnimation="slide-up"
      metricsAnimation="slide-up"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardSeven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Roof Repair & Maintenance",
          description: "Prompt and reliable repair for leaks, storm damage, and wear. Regular maintenance to extend your roof's lifespan.",
          imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-working-roof-with-drill_23-2148748775.jpg",
          imageAlt: "Professional inspecting roof damage for repair",
        },
        {
          title: "New Roof Installation",
          description: "Expert installation of various roofing materials, including asphalt shingles, metal, tile, and flat roofs for new constructions.",
          imageSrc: "http://img.b2bpic.net/free-photo/man-working-roof-with-drill-low-view_23-2148748772.jpg",
          imageAlt: "Workers installing new shingles on a residential roof",
        },
        {
          title: "Roof Replacement",
          description: "Complete removal of old roofing and installation of a new, durable system with minimal disruption to your daily life.",
          imageSrc: "http://img.b2bpic.net/free-photo/oil-inspector-protective-overalls-orange-helmet-making-notes-transformer_651396-1818.jpg",
          imageAlt: "Drone view inspecting a residential roof",
        },
      ]}
      title="Comprehensive Roofing Services You Can Trust"
      description="From minor repairs to complete installations, our team handles every project with precision and care. Explore our range of services designed to meet your specific roofing needs."
    />
  </div>

  <div id="projects" data-section="projects">
      <MetricCardSeven
      animationType="scale-rotate"
      textboxLayout="default"
      useInvertedBackground={true}
      metrics={[
        {
          id: "m1",
          value: "100%",
          title: "Guaranteed Satisfaction",
          items: [
            "Every project completed to perfection.",
            "Dedicated support for peace of mind.",
          ],
        },
        {
          id: "m2",
          value: "A+",
          title: "BBB Rated",
          items: [
            "Highest rating for business reliability.",
            "Trusted by local homeowners.",
          ],
        },
        {
          id: "m3",
          value: "24/7",
          title: "Emergency Service",
          items: [
            "Rapid response for urgent repairs.",
            "Protecting your home anytime.",
          ],
        },
        {
          id: "m4",
          value: "10-Year",
          title: "Workmanship Warranty",
          items: [
            "Long-term assurance on our labor.",
            "Invest in quality, guaranteed.",
          ],
        },
      ]}
      title="Our Commitment to Quality and Client Success"
      description="We believe in transparent service and delivering exceptional value. Our metrics reflect our unwavering dedication to quality craftsmanship and client satisfaction."
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Certified Pro",
        "Quality Rated",
        "Eco-Friendly",
        "Licensed & Insured",
        "Top Local Choice",
        "Material Brand A",
        "Material Brand B",
      ]}
      title="Trusted by Homeowners, Backed by Industry Leaders"
      description="We partner with leading manufacturers and hold top industry certifications to ensure you receive the best products and service."
      showCard={true}
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFifteen
      useInvertedBackground={true}
      testimonial="Apex Roofing transformed our home! The team was incredibly professional, efficient, and the new roof looks absolutely stunning. Their attention to detail and commitment to quality is truly unmatched. Highly recommend!"
      rating={5}
      author="Sarah M."
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/aged-middle-expression-calling-business_1262-2838.jpg",
          alt: "Sarah M. - Happy Client",
        },
        {
          src: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",
          alt: "John D. - Satisfied Homeowner",
        },
        {
          src: "http://img.b2bpic.net/free-photo/closeup-smiling-goodlooking-man-showing-thumbs-up-praising-good-job-recommending-company-standing_1258-159836.jpg",
          alt: "Emily R. - Business Owner",
        },
        {
          src: "http://img.b2bpic.net/free-photo/business-man-working-late-office_23-2148991380.jpg",
          alt: "Michael B. - Property Manager",
        },
        {
          src: "http://img.b2bpic.net/free-photo/interracial-mixed-race-relationships-love-friendship-partnership-concept-portrait-happy-confident-young-european-woman-with-broad-smile-posing-with-her-african-male-coworker_343059-1527.jpg",
          alt: "Jessica L. - New Homeowner",
        },
      ]}
      ratingAnimation="blur-reveal"
      avatarsAnimation="blur-reveal"
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardNine
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "basic",
          title: "Essential Care",
          price: "$XXX",
          period: "starting at",
          features: [
            "Detailed Roof Inspection",
            "Minor Leak Repair",
            "Gutter Cleaning",
            "Preventative Maintenance Report",
          ],
          button: {
            text: "Get Started",
            href: "#contact",
          },
          imageSrc: "http://img.b2bpic.net/free-photo/aerial-shot-private-houses-weymouth-dorset-uk_181624-20411.jpg",
          imageAlt: "Basic roof inspection tools",
        },
        {
          id: "standard",
          title: "Standard Repair",
          price: "$XXXX",
          period: "starting at",
          features: [
            "Comprehensive Damage Assessment",
            "Shingle Replacement (up to 200 sq ft)",
            "Flashing Repair",
            "Storm Damage Patching",
          ],
          button: {
            text: "Choose Plan",
            href: "#contact",
          },
          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-roofer-working-with-helmet_23-2149343710.jpg",
          imageAlt: "Roofer repairing a section of shingles",
        },
        {
          id: "premium",
          title: "Premium Replacement",
          price: "$XXXXX",
          period: "starting at",
          features: [
            "Full Roof Tear-Off & Replacement",
            "Premium Material Options",
            "Enhanced Ventilation System",
            "Extended Workmanship Warranty",
          ],
          button: {
            text: "Get Custom Quote",
            href: "#contact",
          },
          imageSrc: "http://img.b2bpic.net/free-photo/panorama-chisinau-arena-filmed-drone-sunset-moldova_1268-16014.jpg",
          imageAlt: "New roof installation on a modern home",
        },
      ]}
      title="Transparent Pricing for Every Roofing Need"
      description="Choose from our flexible service plans designed to provide the best value and protection for your home. Get a clear estimate tailored to your project."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "faq1",
          title: "How often should I have my roof inspected?",
          content: "We recommend a professional roof inspection at least once a year, or after any major storm, to identify and address potential issues early.",
        },
        {
          id: "faq2",
          title: "What are the signs I need a new roof?",
          content: "Common signs include missing or damaged shingles, leaks, sagging areas, granular loss, and an age of 20+ years. A professional inspection can confirm if replacement is necessary.",
        },
        {
          id: "faq3",
          title: "How long does a roof replacement take?",
          content: "The duration depends on your roof's size, complexity, and weather conditions, but most residential roof replacements are completed within 1-3 days.",
        },
        {
          id: "faq4",
          title: "Do you offer financing options?",
          content: "Yes, we understand that a new roof is a significant investment. We offer flexible financing options to help make your project affordable. Contact us for details.",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/young-coworkers-with-blueprint_23-2147727682.jpg"
      imageAlt="Roofing contractor explaining details to a homeowner"
      mediaAnimation="slide-up"
      mediaPosition="left"
      title="Common Questions About Your Roof"
      description="Find answers to the most frequently asked questions about roofing services, maintenance, and estimates."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={false}
      background={{
        variant: "radial-gradient",
      }}
      tag="Get a Free Estimate"
      title="Ready for a Stronger Roof?"
      description="Contact Apex Roofing today for a complimentary consultation and a detailed, no-obligation estimate. We're here to answer all your questions and provide the best solution for your home."
      tagIcon={Sparkles}
      imageSrc="http://img.b2bpic.net/free-photo/designers-team-working-3d-model_23-2149371886.jpg"
      imageAlt="Friendly roofing consultant talking with a client"
      mediaAnimation="slide-up"
      mediaPosition="right"
      inputPlaceholder="Enter your email"
      buttonText="Request a Quote"
      termsText="By clicking 'Request a Quote' you're confirming that you agree with our Terms and Conditions."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseReveal
      logoText="Apex Roofing"
      columns={[
        {
          title: "Services",
          items: [
            {
              label: "Roof Repair",
              href: "#services",
            },
            {
              label: "Installation",
              href: "#services",
            },
            {
              label: "Replacement",
              href: "#services",
            },
            {
              label: "Maintenance",
              href: "#services",
            },
          ],
        },
        {
          title: "Company",
          items: [
            {
              label: "About Us",
              href: "#about",
            },
            {
              label: "Our Work",
              href: "#projects",
            },
            {
              label: "Testimonials",
              href: "#testimonials",
            },
            {
              label: "Contact Us",
              href: "#contact",
            },
          ],
        },
        {
          title: "Resources",
          items: [
            {
              label: "FAQ",
              href: "#faq",
            },
            {
              label: "Pricing",
              href: "#pricing",
            },
            {
              label: "Blog",
              href: "#",
            },
            {
              label: "Support",
              href: "#",
            },
          ],
        },
      ]}
      copyrightText="© 2024 Apex Roofing. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
