"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="mediumSmall"
        sizing="mediumLargeSizeLargeTitles"
        background="fluid"
        cardStyle="soft-shadow"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="solid"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Home",
          id: "#home",
        },
        {
          name: "About Us",
          id: "#about",
        },
        {
          name: "Features",
          id: "#features",
        },
        {
          name: "Units",
          id: "#units",
        },
        {
          name: "Pricing",
          id: "#pricing",
        },
        {
          name: "Reviews",
          id: "#testimonials",
        },
        {
          name: "FAQs",
          id: "#faq",
        },
        {
          name: "Contact",
          id: "#contact",
        },
      ]}
      brandName="Public Storage"
    />
  </div>

  <div id="home" data-section="home">
      <HeroCarouselLogo
      logoText="Public Storage"
      description="Your Trusted Partner for Secure, Affordable Self-Storage Solutions. Find the perfect space to store your belongings with ease."
      buttons={[
        {
          text: "Find a Unit",
          href: "#units",
        },
        {
          text: "Get a Quote",
          href: "#contact",
        },
      ]}
      slides={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/photo-metal-texture-pattern_58702-16090.jpg?_wi=1",
          imageAlt: "Modern Public Storage facility exterior",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/storage-units-logistic-center_23-2148943354.jpg?_wi=1",
          imageAlt: "Clean interior hallway of storage units",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/front-view-couple-reading-magazines_23-2148273332.jpg",
          imageAlt: "Woman loading boxes into a storage unit",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/using-initial-preventive-techniques-against-covid_114579-34031.jpg",
          imageAlt: "Interior of a climate-controlled storage unit",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/business-owner-working-home-office_1150-11768.jpg",
          imageAlt: "Friendly staff assisting a customer at the front desk",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-new-cars-parking-port-automobile-factory_335224-734.jpg",
          imageAlt: "Aerial view of a well-organized storage facility",
        },
      ]}
      autoplayDelay={4000}
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={false}
      title="Committed to Your Storage Needs"
      description="For over 50 years, Public Storage has provided convenient and secure self-storage options for individuals and businesses across the nation. We pride ourselves on exceptional customer service, clean, well-maintained facilities, and flexible rental terms designed to meet your unique requirements."
      metrics={[
        {
          value: "4.5/5",
          title: "Average Rating",
        },
        {
          value: "330+",
          title: "Customer Reviews",
        },
        {
          value: "1000+",
          title: "Locations Served",
        },
      ]}
      tag="About Us"
      imageSrc="http://img.b2bpic.net/free-photo/logistic-center-with-storage-units-low-angle_23-2148943351.jpg"
      imageAlt="Exterior of a Public Storage facility with a vibrant green backdrop"
      mediaAnimation="slide-up"
      metricsAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          id: "secure",
          title: "Secure Facilities",
          tags: [
            "24/7 Surveillance",
            "Gated Access",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-uses-intercom_1398-1601.jpg",
          imageAlt: "Security camera monitoring a storage unit corridor",
        },
        {
          id: "flexible",
          title: "Flexible Rentals",
          tags: [
            "Month-to-Month",
            "No Long-Term Contracts",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-packing-items_23-2149662454.jpg",
          imageAlt: "Calendar with flexible rental dates highlighted",
        },
        {
          id: "climate",
          title: "Climate Controlled Units",
          tags: [
            "Protect Valuables",
            "Stable Environment",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/plastic-storage-case_1339-5894.jpg",
          imageAlt: "Thermometer inside a climate controlled storage unit",
        },
      ]}
      title="Why Choose Public Storage?"
      description="Experience unparalleled peace of mind with our state-of-the-art facilities and a customer-first approach, ensuring your valuables are safe and accessible whenever you need them."
      tag="Our Advantages"
    />
  </div>

  <div id="units" data-section="units">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="two-columns-alternating-heights"
      useInvertedBackground={false}
      products={[
        {
          id: "1",
          name: "5x5 Storage Unit",
          price: "Starting at $50/month",
          variant: "Small Locker",
          imageSrc: "http://img.b2bpic.net/free-photo/storehouse-interior-with-stacked-cardboard-boxes-tall-metal-racks-goods-cardboard-boxes-shelves-ready-transportration-industrial-warehouse-building-with-nobody-inside_482257-61011.jpg",
          imageAlt: "Empty 5x5 storage unit",
        },
        {
          id: "2",
          name: "5x10 Storage Unit",
          price: "Starting at $75/month",
          variant: "Walk-in Closet",
          imageSrc: "http://img.b2bpic.net/free-photo/boxes-packaged-moving-new-home_23-2149162242.jpg",
          imageAlt: "Empty 5x10 storage unit",
        },
        {
          id: "3",
          name: "10x10 Storage Unit",
          price: "Starting at $120/month",
          variant: "Average Bedroom",
          imageSrc: "http://img.b2bpic.net/free-photo/assisting-needy-with-food-aid_482257-80503.jpg",
          imageAlt: "Empty 10x10 storage unit",
        },
        {
          id: "4",
          name: "10x20 Storage Unit",
          price: "Starting at $180/month",
          variant: "Single Car Garage",
          imageSrc: "http://img.b2bpic.net/free-photo/wiew-through-window-christmas-tree-background-winter-holiday-concept_493343-30105.jpg",
          imageAlt: "Empty 10x20 storage unit",
        },
        {
          id: "5",
          name: "Vehicle Storage",
          price: "Starting at $150/month",
          variant: "Car, Boat, RV",
          imageSrc: "http://img.b2bpic.net/free-photo/bike-creation-workshop_23-2148866659.jpg",
          imageAlt: "Car parked inside a vehicle storage unit",
        },
        {
          id: "6",
          name: "Climate Controlled",
          price: "Varies by Size",
          variant: "Temperature & Humidity Controlled",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-ventilation-system_23-2149388962.jpg",
          imageAlt: "Interior of a climate-controlled storage unit",
        },
      ]}
      title="Find Your Perfect Storage Solution"
      description="Whether you're storing a few boxes or an entire household, we have a unit size that perfectly fits your needs and budget."
      tag="Our Units"
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardNine
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "basic",
          title: "Basic Storage",
          price: "$50",
          period: "month",
          features: [
            "Standard Unit Access",
            "24/7 Security Monitoring",
            "Month-to-Month Lease",
            "Online Account Management",
          ],
          button: {
            text: "View 5x5 Units",
            href: "#units",
          },
          imageSrc: "http://img.b2bpic.net/free-photo/crop-woman-signing-clipboard-parcel_23-2147787847.jpg",
          imageAlt: "storage unit keys on a clipboard",
        },
        {
          id: "premium",
          title: "Premium Climate",
          price: "$120",
          period: "month",
          features: [
            "Climate Controlled Unit",
            "Enhanced Security Features",
            "Flexible Lease Terms",
            "Priority Customer Support",
          ],
          button: {
            text: "View 10x10 Climate",
            href: "#units",
          },
          imageSrc: "http://img.b2bpic.net/free-photo/photo-metal-texture-pattern_58702-16090.jpg?_wi=2",
          imageAlt: "storage unit keys on a clipboard",
        },
        {
          id: "vehicle",
          title: "Vehicle Storage",
          price: "$150",
          period: "month",
          features: [
            "Dedicated Vehicle Bay",
            "Secure Gated Access",
            "Indoor or Outdoor Options",
            "Long-Term Protection",
          ],
          button: {
            text: "Explore Vehicle Options",
            href: "#units",
          },
          imageSrc: "http://img.b2bpic.net/free-photo/storage-units-logistic-center_23-2148943354.jpg?_wi=2",
          imageAlt: "storage unit keys on a clipboard",
        },
      ]}
      title="Affordable Storage for Every Budget"
      description="Discover transparent pricing with flexible month-to-month terms. Select the ideal plan that aligns perfectly with your personal or business storage requirements."
      tag="Pricing"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwelve
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",
          name: "J. K.",
          imageSrc: "http://img.b2bpic.net/free-photo/confident-businessman-smiling_107420-84733.jpg",
          imageAlt: "Customer J. K.",
        },
        {
          id: "2",
          name: "Victor",
          imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",
          imageAlt: "Customer Victor",
        },
        {
          id: "3",
          name: "La shaun Taylor",
          imageSrc: "http://img.b2bpic.net/free-photo/ambitious-senior-woman-pointing-fingers-center-showing-logo-smiling-standing-white-backg_1258-156982.jpg",
          imageAlt: "Customer La shaun Taylor",
        },
        {
          id: "4",
          name: "Sarah J.",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-young-businesswoman_23-2149153829.jpg",
          imageAlt: "Customer Sarah J.",
        },
        {
          id: "5",
          name: "Michael C.",
          imageSrc: "http://img.b2bpic.net/free-photo/black-businessman-happy-expression_1194-2623.jpg",
          imageAlt: "Customer Michael C.",
        },
      ]}
      cardTitle="What Our Valued Customers Say"
      cardTag="Trusted by hundreds"
      buttons={[
        {
          text: "Read All 330 Reviews",
          href: "https://www.google.com/search?q=Public+Storage+3+Curie+Ave,+Wallington,+NJ+07057,+United+States&rlz=1C5CHFA_enUS1006US1006&oq=Public+Storage+3+Curie+Ave,+Wallington,+NJ+07057,+United+States&gs_lcrp=EgZjaHJvbWUyBxAjGOgCGCeIASABwAEB&sourceid=chrome&ie=UTF-8#lrd=0x89c255745e69e02d:0x39a039750b377f0a,1,,,,,",
        },
      ]}
      cardAnimation="slide-up"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "q1",
          title: "What unit sizes are available?",
          content: "We offer a wide range of unit sizes, from small 5x5 lockers perfect for a few boxes to large 10x30 units suitable for entire households or vehicles. Please check our 'Units' section for more details.",
        },
        {
          id: "q2",
          title: "Are your facilities secure?",
          content: "Yes, security is our top priority. Our facilities feature 24/7 surveillance, gated access with personalized entry codes, and well-lit areas to ensure your belongings are safe and protected.",
        },
        {
          id: "q3",
          title: "Do you offer climate-controlled units?",
          content: "Absolutely. Many of our locations provide climate-controlled units to protect sensitive items like electronics, furniture, and documents from extreme temperatures and humidity fluctuations.",
        },
        {
          id: "q4",
          title: "What are your rental terms?",
          content: "We offer flexible month-to-month leases, allowing you to rent a unit for as long as you need without long-term contracts. You can easily manage your account and payments online.",
        },
      ]}
      title="Frequently Asked Questions"
      description="Find quick answers to common questions about our storage units, rental process, security measures, and more."
      tag="Help Center"
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={false}
      background={{
        variant: "radial-gradient",
      }}
      tag="Ready to Store?"
      title="Get Your Free Quote Today!"
      description="Our friendly and knowledgeable team is ready to help you find the perfect storage unit for your needs. Call us, visit our website, or stop by a location near you for personalized assistance."
      buttons={[
        {
          text: "Call Us Now",
          href: "tel:+12017659560",
        },
        {
          text: "Visit Our Website",
          href: "https://www.publicstorage.com",
        },
      ]}
      buttonAnimation="slide-up"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      columns={[
        {
          items: [
            {
              label: "About Us",
              href: "#about",
            },
            {
              label: "Careers",
              href: "https://www.publicstorage.com/careers",
            },
            {
              label: "Investor Relations",
              href: "https://www.publicstorage.com/investor-relations",
            },
          ],
        },
        {
          items: [
            {
              label: "Storage Units",
              href: "#units",
            },
            {
              label: "Vehicle Storage",
              href: "#units",
            },
            {
              label: "Climate Controlled",
              href: "#units",
            },
          ],
        },
        {
          items: [
            {
              label: "FAQs",
              href: "#faq",
            },
            {
              label: "Contact Us",
              href: "#contact",
            },
            {
              label: "Privacy Policy",
              href: "https://www.publicstorage.com/privacy-policy",
            },
          ],
        },
      ]}
      logoText="Public Storage"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
