"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 FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="medium"
        sizing="mediumLargeSizeLargeTitles"
        background="none"
        cardStyle="glass-elevated"
        primaryButtonStyle="flat"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Home",
          id: "hero",
        },
        {
          name: "Our Approach",
          id: "about",
        },
        {
          name: "Services",
          id: "features",
        },
        {
          name: "Projects",
          id: "products",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="ABC Sunrooms"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardGallery
      background={{
        variant: "gradient-bars",
      }}
      title="Bring The Outdoors Into Everyday Living"
      description="Custom sunrooms, screen rooms, and windows designed with expert precision and a customer experience homeowners rave about. From consultation to installation, we treat you like family."
      buttons={[
        {
          text: "Schedule Your Free Consultation",
          href: "#contact",
        },
      ]}
      mediaItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/photorealistic-wooden-house-interior-with-timber-decor-furnishings_23-2151263567.jpg?_wi=1",
          imageAlt: "Luxury sunroom",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/neoclassical-style-interior-design-with-decor-furnishings_23-2151199423.jpg?_wi=1",
          imageAlt: "Custom screen room",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/male-walking-near-tall-trees-inside-building_181624-42133.jpg?_wi=1",
          imageAlt: "Conservatory space",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/girl-standing-office-with-folder_1157-34495.jpg",
          imageAlt: "Window wall architecture",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/dinner-set-sushi-rolls-salads-cocktails-hookah-side-view_141793-3100.jpg",
          imageAlt: "Patio dining",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/interior-modern-office_23-2147668767.jpg",
          imageAlt: "Seamless transition",
        },
      ]}
      mediaAnimation="blur-reveal"
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={false}
      title="Crafting Architectural Lifestyle Upgrades"
      description="We specialize in high-end transformations that blend indoor comfort with the beauty of nature. Our focus is on precision, communication, and creating a seamless customer experience."
      metrics={[
        {
          value: "20+",
          title: "Years of Precision",
        },
        {
          value: "1.5K",
          title: "Homes Transformed",
        },
        {
          value: "99%",
          title: "Client Satisfaction",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/side-view-family-sitting-table_23-2150231683.jpg"
      imageAlt="Designing custom home upgrades"
      mediaAnimation="slide-up"
      metricsAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardNine
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          title: "Custom Architectural Design",
          description: "Tailored plans that fit your unique lifestyle and existing home structure.",
          phoneOne: {
            imageSrc: "http://img.b2bpic.net/free-photo/creative-artisan-job-workshop_23-2148970787.jpg",
            imageAlt: "Luxury window detail",
          },
          phoneTwo: {
            imageSrc: "http://img.b2bpic.net/free-photo/relax-sofa-window_1150-12924.jpg",
            imageAlt: "Modern luxury sunroom interior",
          },
          imageSrc: "http://img.b2bpic.net/free-photo/photorealistic-wooden-house-interior-with-timber-decor-furnishings_23-2151263567.jpg?_wi=2",
          imageAlt: "luxury window detail",
        },
        {
          title: "Stress-Free Installation",
          description: "Our experts ensure the process is transparent and efficient from start to finish.",
          phoneOne: {
            imageSrc: "http://img.b2bpic.net/free-photo/white-metallic-bars-white-concrete-wall_250224-194.jpg",
            imageAlt: "Luxury window detail",
          },
          phoneTwo: {
            imageSrc: "http://img.b2bpic.net/free-photo/full-shot-happy-partners-meeting_23-2149338600.jpg",
            imageAlt: "Modern luxury sunroom interior",
          },
          imageSrc: "http://img.b2bpic.net/free-photo/neoclassical-style-interior-design-with-decor-furnishings_23-2151199423.jpg?_wi=2",
          imageAlt: "luxury window detail",
        },
        {
          title: "Year-Round Living",
          description: "High-efficiency windows and insulation for total four-season comfort.",
          phoneOne: {
            imageSrc: "http://img.b2bpic.net/free-photo/new-york-city-ny-usa-october-20-2020-vessel-hudson-yards-staircase-designed-by-architect-thomas-heatherwick-midtown-manhattan-west_1321-2483.jpg",
            imageAlt: "Luxury window detail",
          },
          phoneTwo: {
            imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-wooden-house_23-2151264474.jpg",
            imageAlt: "Modern luxury sunroom interior",
          },
          imageSrc: "http://img.b2bpic.net/free-photo/male-walking-near-tall-trees-inside-building_181624-42133.jpg?_wi=2",
          imageAlt: "luxury window detail",
        },
      ]}
      showStepNumbers={true}
      title="The ABC Advantage"
      description="Precision engineering meets unparalleled design for your perfect living space."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      products={[
        {
          id: "p1",
          brand: "ABC Custom",
          name: "Four-Season Conservatory",
          price: "Custom Pricing",
          rating: 5,
          reviewCount: "12",
          imageSrc: "http://img.b2bpic.net/free-photo/luxurious-dining-room-with-garden-view_23-2152008199.jpg",
          imageAlt: "vaulted ceiling sunroom",
        },
        {
          id: "p2",
          brand: "ABC Custom",
          name: "Expansive Window Wall",
          price: "Custom Pricing",
          rating: 5,
          reviewCount: "25",
          imageSrc: "http://img.b2bpic.net/free-photo/minimalist-architecture-space_23-2151912533.jpg",
          imageAlt: "floor to ceiling windows",
        },
        {
          id: "p3",
          brand: "ABC Custom",
          name: "Luxury Screen Enclosure",
          price: "Custom Pricing",
          rating: 5,
          reviewCount: "18",
          imageSrc: "http://img.b2bpic.net/free-photo/rural-patio-with-furniture-vegetation_23-2150698418.jpg",
          imageAlt: "custom patio design",
        },
        {
          id: "p4",
          brand: "ABC Custom",
          name: "Garden Sunroom",
          price: "Custom Pricing",
          rating: 5,
          reviewCount: "9",
          imageSrc: "http://img.b2bpic.net/free-photo/photorealistic-timber-house-interior-with-wooden-decor-furnishings_23-2151263627.jpg",
          imageAlt: "white frame conservatory",
        },
        {
          id: "p5",
          brand: "ABC Custom",
          name: "Architectural Windows",
          price: "Custom Pricing",
          rating: 5,
          reviewCount: "32",
          imageSrc: "http://img.b2bpic.net/free-photo/light-lamp-decoration-interior_74190-6673.jpg",
          imageAlt: "modern dark frame windows",
        },
        {
          id: "p6",
          brand: "ABC Custom",
          name: "Custom Fireside Room",
          price: "Custom Pricing",
          rating: 5,
          reviewCount: "15",
          imageSrc: "http://img.b2bpic.net/free-photo/full-length-portrait-young-blonde-woman-bright-room-with-nice-modern-interior-floor-lamp-fake-fireplace-shelving-with-figurines-books-wearing-stylish-black-dress-shoes_197531-2842.jpg",
          imageAlt: "luxury sunroom fireplace",
        },
      ]}
      title="Our Signature Creations"
      description="Explore our portfolio of curated architectural upgrades designed for lasting beauty."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardSeven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      metrics={[
        {
          id: "m1",
          value: "100%",
          title: "Customer Satisfaction",
          items: [
            "Communication",
            "Transparency",
            "Integrity",
          ],
        },
        {
          id: "m2",
          value: "4",
          title: "Season Comfort",
          items: [
            "Heating",
            "Cooling",
            "Isolation",
          ],
        },
        {
          id: "m3",
          value: "50+",
          title: "Architectural Awards",
          items: [
            "Design",
            "Quality",
            "Innovation",
          ],
        },
      ]}
      title="Proven Quality Metrics"
      description="Quality assurance and architectural standards that define our work."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwelve
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",
          name: "Sarah & John Miller",
          imageSrc: "http://img.b2bpic.net/free-photo/lower-angle-portrait-young-strong-man-with-muscles-tries-close-his-suitcase-full-clothes-pressing-bag-with-effort_1258-314717.jpg",
          imageAlt: "homeowner portrait sunroom",
        },
        {
          id: "2",
          name: "Elena & Marc Rivera",
          imageSrc: "http://img.b2bpic.net/free-photo/people-practicing-social-integration-workspace_23-2149405355.jpg",
          imageAlt: "affluent couple home",
        },
        {
          id: "3",
          name: "Jennifer Thompson",
          imageSrc: "http://img.b2bpic.net/free-photo/cheerful-blonde-curly-lady-trendy-silk-black-home-suit-smiles-widely-looks-into-camera-holds-l_197531-33672.jpg",
          imageAlt: "modern homeowner portrait",
        },
        {
          id: "4",
          name: "David Anderson",
          imageSrc: "http://img.b2bpic.net/free-photo/couple-watching-movie-streaming-service_23-2149026157.jpg",
          imageAlt: "client portrait renovation",
        },
        {
          id: "5",
          name: "The Hendersons",
          imageSrc: "http://img.b2bpic.net/free-photo/happy-family-posing_1328-3228.jpg",
          imageAlt: "family outdoor porch luxury",
        },
        {
          id: "6",
          name: "Grace Peterson",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-blonde-young-woman-eating-sandwich-caf_23-2147974636.jpg",
          imageAlt: "woman relaxing conservatory",
        },
      ]}
      cardTitle="What Families Say"
      cardTag="Testimonials"
      cardAnimation="slide-up"
    />
  </div>

  <div id="socialProof" data-section="socialProof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={true}
      names={[
        "Design Excellence",
        "Quality Build",
        "Safety First",
        "Architectural Merit",
        "Premium Standards",
        "Construction Elite",
        "Modern Standards",
      ]}
      title="Recognized Excellence"
      description="Trusted and certified in architectural home transformations."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "f1",
          title: "Do you offer financing?",
          content: "Yes, we offer various flexible financing options to make your dream project accessible.",
        },
        {
          id: "f2",
          title: "What areas do you serve?",
          content: "We serve the greater metropolitan area. Please reach out with your zip code to confirm.",
        },
        {
          id: "f3",
          title: "How long does a typical build take?",
          content: "Timelines vary by design complexity, but we prioritize efficient and clean installation.",
        },
      ]}
      title="Common Questions"
      description="Everything you need to know about starting your project."
      faqsAnimation="slide-up"
      imageSrc="http://img.b2bpic.net/free-photo/interior-design-neoclassical-style-with-furnishings-decor_23-2151199318.jpg"
      imageAlt="Interior design in neoclassical style with furnishings and decor"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={true}
      background={{
        variant: "gradient-bars",
      }}
      tag="Get Started"
      title="Ready to Transform Your Home?"
      description="Schedule a consultation with our design team today."
      imageSrc="http://img.b2bpic.net/free-photo/modern-office-space-with-futuristic-decor-furniture_23-2151797626.jpg"
      imageAlt="luxury design office"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseReveal
      logoText="ABC Sunrooms"
      columns={[
        {
          title: "Services",
          items: [
            {
              label: "Sunrooms",
              href: "#products",
            },
            {
              label: "Screen Rooms",
              href: "#products",
            },
            {
              label: "Windows",
              href: "#products",
            },
          ],
        },
        {
          title: "Company",
          items: [
            {
              label: "About Us",
              href: "#about",
            },
            {
              label: "Contact",
              href: "#contact",
            },
            {
              label: "Careers",
              href: "#",
            },
          ],
        },
        {
          title: "Legal",
          items: [
            {
              label: "Privacy Policy",
              href: "#",
            },
            {
              label: "Terms of Service",
              href: "#",
            },
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
