"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import { Award, Building, Cog, FileText, Grid, MapPin, ShieldCheck, Sparkles, Star } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="mediumLarge"
        sizing="largeSmall"
        background="aurora"
        cardStyle="subtle-shadow"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Home",          id: "#home"},
        {
          name: "About Us",          id: "#about"},
        {
          name: "Services",          id: "#services"},
        {
          name: "Portfolio",          id: "#portfolio"},
        {
          name: "Testimonials",          id: "#testimonials"},
        {
          name: "FAQ",          id: "#faq"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      button={{
        text: "Get a Quote",        href: "#contact"}}
      brandName="Henry's Fence Inc"
    />
  </div>

  <div id="home" data-section="home">
      <HeroSplitTestimonial
      useInvertedBackground={true}
      background={{
        variant: "downward-rays-static"}}
      imagePosition="right"
      title="Quality Fences for Every Home"
      description="Henry's Fence Inc offers expert installation of durable and beautiful fences tailored to your needs. Enhance your property's security and curb appeal with our trusted craftsmanship."
      testimonials={[
        {
          name: "John D.",          handle: "@HappyHomeowner",          testimonial: "Henry's Fence Inc did an incredible job with our new privacy fence. The team was professional, efficient, and the quality is outstanding!",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-showing-double-thumbs-up-blouse-cardigan-looking-merry-front-view_176474-109580.jpg",          imageAlt: "John D."},
        {
          name: "Sarah K.",          handle: "@GardenLover",          testimonial: "Our garden fence is exactly what we envisioned. It's sturdy, beautiful, and was installed with minimal disruption. Highly recommend!",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/young-female-with-pinkish-hair-posing_344912-846.jpg",          imageAlt: "Sarah K."},
        {
          name: "Michael R.",          handle: "@PropertyManager",          testimonial: "For our commercial property, Henry's Fence Inc delivered on time and within budget. Their iron fence work is top-notch.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/happy-couple-standing-front-camper-van_23-2148653441.jpg",          imageAlt: "Michael R."},
        {
          name: "Emily S.",          handle: "@NewHomeowner",          testimonial: "We absolutely love our new vinyl fence! It transformed our backyard and the process was smooth from start to finish.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-satisfied-happy-young-man-glasses-working-cafe-sitting-coworking-space-with-laptop-showing-thumbs-up-like-approve-smth-good-chatting-giving-online-lessons_1258-314620.jpg",          imageAlt: "Emily S."},
        {
          name: "David W.",          handle: "@SecurityFirst",          testimonial: "The security fence installed by Henry's Fence Inc gives us great peace of mind. Exceptional service and a very robust product.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/smiling-successful-businesspeople-showing-thumb-up-sign-office_23-2147923403.jpg",          imageAlt: "David W."},
      ]}
      testimonialRotationInterval={6000}
      tag="Trusted Craftsmanship"
      buttons={[
        {
          text: "View Our Portfolio",          href: "#portfolio"},
        {
          text: "Get a Free Estimate",          href: "#contact"},
      ]}
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/alone-specialist-handsome-daydreaming-collar_1262-870.jpg",          alt: "Customer John"},
        {
          src: "http://img.b2bpic.net/free-photo/smilling-woman-with-long-black-hair-posing-studio-underwear_613910-14799.jpg",          alt: "Customer Sarah"},
        {
          src: "http://img.b2bpic.net/free-photo/black-businessman-happy-expression_1194-2610.jpg",          alt: "Customer Michael"},
        {
          src: "http://img.b2bpic.net/free-photo/old-woman-confronting-alzheimer-disease_23-2149043724.jpg",          alt: "Customer Emily"},
        {
          src: "http://img.b2bpic.net/free-photo/portrait-beautiful-brunette-female-wearing-red-dress-sitting-sofa-home_613910-21092.jpg",          alt: "Happy Customer"},
      ]}
      avatarText="Join 1000+ satisfied clients!"
      imageSrc="http://img.b2bpic.net/free-photo/workers-having-little-chat-while-having-cup-coffee_329181-15634.jpg"
      imageAlt="Newly installed wooden fence in a suburban backyard"
      mediaAnimation="slide-up"
      fixedMediaHeight={true}
      marqueeItems={[
        {
          type: "text-icon",          text: "Durable Materials",          icon: Cog,
        },
        {
          type: "text-icon",          text: "Expert Installation",          icon: Building,
        },
        {
          type: "text-icon",          text: "Customer Satisfaction",          icon: Star,
        },
        {
          type: "text-icon",          text: "Free Estimates",          icon: FileText,
        },
        {
          type: "text-icon",          text: "Local & Trusted",          icon: MapPin,
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <AboutMetric
      useInvertedBackground={false}
      title="Fence Solutions You Can Trust"
      metrics={[
        {
          icon: Award,
          label: "Years in Business",          value: "25+"},
        {
          icon: Building,
          label: "Fences Installed",          value: "5000+"},
        {
          icon: Sparkles,
          label: "Customer Satisfaction",          value: "98%"},
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureBento
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          title: "Wood Fence Installation",          description: "Timeless beauty and natural charm. We build custom wood fences for privacy, security, and aesthetic enhancement.",          bentoComponent: "media-stack",          items: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/wooden-fence-garden-full-trees_181624-27357.jpg",              imageAlt: "Wood fence installation"},
            {
              imageSrc: "http://img.b2bpic.net/free-photo/japanese-house-entrance-with-nature_23-2149301042.jpg",              imageAlt: "Vinyl fence installation"},
            {
              imageSrc: "http://img.b2bpic.net/free-photo/rich-african-man-stylish-traditional-clothes-hat-posed-outdoor-background-his-mansion_627829-3365.jpg",              imageAlt: "Iron fence installation"},
          ],
          imageAlt: "wood fence installation backyard"
        },
        {
          title: "Vinyl Fence Solutions",          description: "Low maintenance and long-lasting. Our vinyl fences offer a modern look with superior durability against weather and wear.",          bentoComponent: "reveal-icon",          icon: Grid,
          imageAlt: "wood fence installation backyard"
        },
        {
          title: "Iron & Metal Fencing",          description: "Elegant design and robust security. Ideal for ornamental appeal and strong perimeter protection.",          bentoComponent: "reveal-icon",          icon: ShieldCheck,
          imageAlt: "wood fence installation backyard"
        },
      ]}
      title="Our Specialized Fence Services"
      description="We offer a comprehensive range of fencing solutions, from classic wood to modern vinyl, ensuring durability and aesthetic appeal for every property."
    />
  </div>

  <div id="portfolio" data-section="portfolio">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      products={[
        {
          id: "1",          name: "Classic Picket Fence",          price: "Custom Quote",          imageSrc: "http://img.b2bpic.net/free-photo/lighthouse-farm-countryside-near-coast_285396-1335.jpg",          imageAlt: "Classic Picket Fence"},
        {
          id: "2",          name: "Modern Privacy Fence",          price: "Custom Quote",          imageSrc: "http://img.b2bpic.net/free-photo/friends-having-fun-together_23-2149290157.jpg",          imageAlt: "Modern Privacy Fence"},
        {
          id: "3",          name: "White Vinyl Fence",          price: "Custom Quote",          imageSrc: "http://img.b2bpic.net/free-photo/woman-warming-up-shoulder-muscles_23-2147755379.jpg",          imageAlt: "White Vinyl Fence"},
        {
          id: "4",          name: "Ornamental Iron Fence",          price: "Custom Quote",          imageSrc: "http://img.b2bpic.net/free-photo/dark-metallic-diamond-grid-texture-with-industrial-feel_84443-73832.jpg",          imageAlt: "Ornamental Iron Fence"},
        {
          id: "5",          name: "Galvanized Chain Link",          price: "Custom Quote",          imageSrc: "http://img.b2bpic.net/free-photo/runway-stadium_1417-1666.jpg",          imageAlt: "Galvanized Chain Link"},
        {
          id: "6",          name: "Composite Wood Fence",          price: "Custom Quote",          imageSrc: "http://img.b2bpic.net/free-photo/old-embankment-along-seashore-sky-with-wisps-cloud-natural-concept-awaiting-winter-storm-season_166373-8779.jpg",          imageAlt: "Composite Wood Fence"},
      ]}
      title="Our Fence Portfolio"
      description="Explore a selection of our recent projects, showcasing the diversity and quality of our fence installations."
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={true}
      names={[
        "Local Builders Alliance",        "Green Spaces Landscaping",        "Community Property Group",        "Residential Developers Inc.",        "Home Security Solutions",        "Urban Design Collective",        "Estate Management Co."]}
      title="Trusted by Local Communities & Businesses"
      description="We partner with leading organizations and serve numerous satisfied clients across the region, building fences that last."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",          name: "Robert A.",          role: "Homeowner",          company: "Maplewood Dr.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/expressive-young-woman-posing-studio_176474-29258.jpg",          imageAlt: "Robert A."},
        {
          id: "2",          name: "Linda M.",          role: "Gardener",          company: "Willow Creek Estates",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/rear-view-couple-standing-balcony-looking-away_23-2147891175.jpg",          imageAlt: "Linda M."},
        {
          id: "3",          name: "The Chen Family",          role: "Property Owners",          company: "Oakwood Residential",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-happy-couple-posing_23-2149042149.jpg",          imageAlt: "The Chen Family"},
        {
          id: "4",          name: "William H.",          role: "Retiree",          company: "Sunset Retirement",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-young-man-working-cafe-sitting-with-laptop-coffee-hand-has-remote-job_1258-314168.jpg",          imageAlt: "William H."},
        {
          id: "5",          name: "Maria B.",          role: "Business Owner",          company: "Downtown Cafe",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/manager-sitting-his-workplace_1098-22016.jpg",          imageAlt: "Maria B."},
        {
          id: "6",          name: "Alex & Chloe",          role: "Young Couple",          company: "Pine Street Home",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/old-couple-laughing-together-front-laptop_23-2148293899.jpg",          imageAlt: "Alex & Chloe"},
      ]}
      title="Hear From Our Happy Clients"
      description="Our customers consistently praise our quality workmanship, reliability, and excellent service."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={true}
      faqs={[
        {
          id: "q1",          title: "What types of fences do you install?",          content: "We specialize in installing a wide variety of fences including wood, vinyl, ornamental iron, chain link, and composite fences. We offer options for privacy, security, and decorative purposes."},
        {
          id: "q2",          title: "How long does a typical fence installation take?",          content: "The duration of installation depends on the size and complexity of the project. A standard residential fence can often be completed within 1-3 days, while larger or more custom projects may take longer. We'll provide an estimated timeline with your quote."},
        {
          id: "q3",          title: "Do you offer free estimates?",          content: "Yes, we offer free, no-obligation estimates for all our fence installation services. Contact us today to schedule an appointment with one of our fencing experts."},
        {
          id: "q4",          title: "Are your fences guaranteed?",          content: "Absolutely. We stand behind the quality of our workmanship and materials. All our installations come with a warranty to ensure your complete satisfaction and peace of mind."},
        {
          id: "q5",          title: "Do I need a permit for a new fence?",          content: "Permit requirements vary by location and fence type. We can assist you in understanding the local regulations and guide you through the permitting process if necessary."},
      ]}
      sideTitle="Common Questions"
      sideDescription="Find answers to the most frequently asked questions about our fencing services and processes."
      faqsAnimation="slide-up"
      textPosition="left"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={false}
      background={{
        variant: "downward-rays-static"}}
      tag="Get in Touch"
      title="Request a Free Estimate"
      description="Ready to enhance your property with a beautiful and durable fence? Fill out the form below and our team will get back to you shortly."
      inputPlaceholder="Enter your email"
      buttonText="Send Request"
      termsText="By clicking Send Request you're confirming that you agree with our Terms and Conditions."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoReveal
      logoText="Henry's Fence Inc"
      leftLink={{
        text: "Privacy Policy",        href: "#"}}
      rightLink={{
        text: "Terms of Service",        href: "#"}}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
