"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 FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="directional-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="medium"
        sizing="largeSmallSizeLargeTitles"
        background="noiseDiagonalGradient"
        cardStyle="layered-gradient"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="glass"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Home",
          id: "#hero",
        },
        {
          name: "About Us",
          id: "#about",
        },
        {
          name: "Structures",
          id: "#products",
        },
        {
          name: "Testimonials",
          id: "#testimonials",
        },
        {
          name: "FAQs",
          id: "#faqs",
        },
        {
          name: "Contact",
          id: "#contact",
        },
      ]}
      brandName="Canadian Steel Builders"
      button={{
        text: "Get a Quote",
        href: "#contact",
      }}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplit
      background={{
        variant: "downward-rays-static-grid",
      }}
      imagePosition="right"
      title="Custom Steel Buildings Built Your Way"
      description="From concept to completion, we engineer and manufacture bespoke metal structures tailored to your exact specifications. Fast timelines, Premium quality, Canadian-made."
      buttons={[
        {
          text: "Get Your Free Quote",
          href: "#contact",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/glass-ceiling-with-interesting-patterns-inside-building_181624-7315.jpg"
      imageAlt="Modern custom steel building exterior"
      mediaAnimation="opacity"
      fixedMediaHeight={true}
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/front-view-smiley-young-man-with-helmet_23-2148269289.jpg",
          alt: "Smiling construction client",
        },
        {
          src: "http://img.b2bpic.net/free-photo/front-view-smiley-architect-looking-camera_23-2148242889.jpg",
          alt: "Happy architect",
        },
        {
          src: "http://img.b2bpic.net/free-photo/architect-smiling-safety-equipment_23-2148242954.jpg",
          alt: "Satisfied project manager",
        },
        {
          src: "http://img.b2bpic.net/free-photo/building-construction-worker-site_23-2149124259.jpg",
          alt: "Confident builder",
        },
        {
          src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-showing-approval_23-2148269355.jpg",
          alt: "Experienced engineer",
        },
      ]}
      avatarText="Trusted by 500+ clients"
      marqueeItems={[
        {
          type: "text",
          text: "Custom Engineered Solutions",
        },
        {
          type: "text",
          text: "Uncompromising Canadian Quality",
        },
        {
          type: "text",
          text: "Fast & Efficient Construction",
        },
        {
          type: "text",
          text: "Residential, Commercial, Agricultural",
        },
        {
          type: "text",
          text: "Durable & Sustainable Structures",
        },
      ]}
      marqueeSpeed={30}
      showMarqueeCard={true}
    />
  </div>

  <div id="about" data-section="about">
      <MediaAbout
      useInvertedBackground={true}
      title="Canada's Trusted Steel Building Manufacturer"
      description="With decades of expertise, we are dedicated to engineering high-quality, durable, and customizable steel structures. Our Canadian-made buildings stand as a testament to precision, innovation, and unwavering commitment to client success. We pride ourselves on working closely with residential, commercial, and agricultural clients to bring their vision to life, adhering to strict timelines and regulatory standards."
      buttons={[
        {
          text: "Learn More About Us",
          href: "#",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/eyeglasses-paper-plan-table_23-2148039940.jpg"
      imageAlt="Architectural blueprint of a steel structure"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyNine
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="two-columns-alternating-heights"
      useInvertedBackground={false}
      features={[
        {
          title: "Custom Design Flexibility",
          description: "Tailor every aspect of your steel building, from dimensions and aesthetics to specialized functionalities. Our expert team works with you to create a structure that perfectly fits your operational and design requirements.",
          imageSrc: "http://img.b2bpic.net/free-photo/measuring-tape-wooden-cubes-with-text-measure_176474-9335.jpg",
          imageAlt: "Customization gears icon",
          titleImageSrc: "http://img.b2bpic.net/free-photo/top-view-measuring-tools-still-life_23-2150440971.jpg",
          buttonText: "Explore Custom Options",
        },
        {
          title: "Unrivaled Durability",
          description: "Constructed from premium Canadian steel, our buildings are designed to withstand extreme weather, resist corrosion, and ensure structural integrity for decades, providing peace of mind and minimal maintenance.",
          imageSrc: "http://img.b2bpic.net/free-photo/builder-clothes-worker-uniform-wooden-background-flat-lay_169016-24608.jpg",
          imageAlt: "Durable steel beam icon",
          titleImageSrc: "http://img.b2bpic.net/free-photo/waibaidu-bridge-shanghai_1359-928.jpg",
          buttonText: "View Quality Standards",
        },
        {
          title: "Cost & Time Efficiency",
          description: "Benefit from streamlined manufacturing processes and quicker construction times. Steel buildings offer significant cost savings over their lifespan due to reduced material waste and faster erection on-site.",
          imageSrc: "http://img.b2bpic.net/free-photo/smart-photovoltaics-factory-expert-gathering-system-performance-metrics-with-ai_482257-125992.jpg",
          imageAlt: "Cost efficiency icon",
          titleImageSrc: "http://img.b2bpic.net/free-photo/factory-experts-uses-mockup-tablet-present-research-development-insights_482257-126499.jpg",
          buttonText: "Get a Cost Estimate",
        },
      ]}
      title="Engineered for Excellence, Built for Life"
      description="Our steel buildings offer unmatched versatility and long-term value, designed to meet the rigorous demands of the Canadian climate and diverse client needs."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardFour
      animationType="scale-rotate"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      products={[
        {
          id: "p1",
          name: "Residential Garages & Shops",
          price: "Custom Quote",
          variant: "Home & Hobby",
          imageSrc: "http://img.b2bpic.net/free-photo/wooden-building-with-modern-roof_23-2149343650.jpg",
          imageAlt: "Modern residential steel garage",
        },
        {
          id: "p2",
          name: "Agricultural Buildings",
          price: "Custom Quote",
          variant: "Barns & Storage",
          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-shot-store-building-from-wood-stones-west-bloomfield-mi_181624-60264.jpg",
          imageAlt: "Large agricultural steel barn",
        },
        {
          id: "p3",
          name: "Commercial Warehouses",
          price: "Custom Quote",
          variant: "Storage & Logistics",
          imageSrc: "http://img.b2bpic.net/free-photo/blue-metal-cubical-structures-blue-sky_181624-6449.jpg",
          imageAlt: "Spacious commercial steel warehouse",
        },
        {
          id: "p4",
          name: "Industrial Complexes",
          price: "Custom Quote",
          variant: "Manufacturing & Operations",
          imageSrc: "http://img.b2bpic.net/free-photo/factory-workshop-interior-machines-glass-industry-background-process-production_645730-545.jpg",
          imageAlt: "Modern industrial steel facility",
        },
        {
          id: "p5",
          name: "Specialty Structures",
          price: "Custom Quote",
          variant: "Unique Projects",
          imageSrc: "http://img.b2bpic.net/free-photo/vertical-low-angle-shot-metal-wooden-building-blue-sky_181624-6170.jpg",
          imageAlt: "Architecturally unique steel specialty building",
        },
        {
          id: "p6",
          name: "Recreational Facilities",
          price: "Custom Quote",
          variant: "Sports & Community",
          imageSrc: "http://img.b2bpic.net/free-photo/female-tennis-player-green-court-grass_72229-125.jpg",
          imageAlt: "Steel frame recreational sports arena",
        },
      ]}
      title="Our Versatile Steel Building Solutions"
      description="We specialize in a wide array of custom steel buildings, engineered for diverse applications across residential, agricultural, and commercial sectors."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",
          value: "30+",
          description: "Years of Industry Experience",
        },
        {
          id: "m2",
          value: "500+",
          description: "Successful Projects Completed",
        },
        {
          id: "m3",
          value: "100%",
          description: "Canadian-Made Quality",
        },
      ]}
      title="Our Impact in Numbers"
      description="Proudly building the future of Canadian infrastructure with dedication and expertise."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwo
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "t1",
          name: "Sarah J.",
          role: "Residential Homeowner",
          testimonial: "The team delivered an amazing custom garage. The quality is exceptional, and the entire process was seamless from design to installation.",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-architect-close-up_23-2148243014.jpg",
          imageAlt: "Portrait of Sarah J.",
        },
        {
          id: "t2",
          name: "Michael R.",
          role: "Commercial Developer",
          testimonial: "For our new industrial warehouse, their expertise in large-scale steel structures was invaluable. They met every deadline and exceeded our expectations.",
          imageSrc: "http://img.b2bpic.net/free-photo/front-view-rejoicing-male-engineer-sitting-his-working-place-writing-notes-document-plan-business-contractor-agenda-corporate-job-property-builder_140725-155596.jpg",
          imageAlt: "Portrait of Michael R.",
        },
        {
          id: "t3",
          name: "Emily C.",
          role: "Agricultural Farmer",
          testimonial: "Our new steel barn is robust and perfectly suited for our needs. It was built efficiently and designed with our specific farming operations in mind.",
          imageSrc: "http://img.b2bpic.net/free-photo/businessmen-work_1098-85.jpg",
          imageAlt: "Portrait of Emily C.",
        },
        {
          id: "t4",
          name: "David K.",
          role: "Architect & Partner",
          testimonial: "Working with them is always a pleasure. Their technical knowledge and commitment to quality ensure our designs are fabricated to perfection.",
          imageSrc: "http://img.b2bpic.net/free-photo/friendly-businesswoman-with-plan-level_23-2147702538.jpg",
          imageAlt: "Portrait of David K.",
        },
        {
          id: "t5",
          name: "Jessica L.",
          role: "Property Manager",
          testimonial: "The new commercial units are outstanding. Durable, aesthetically pleasing, and delivered on budget. A truly professional and reliable partner.",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-bearded-hipster-male-blue-fleece-shirt-jeans-holds-cup-morning-coffee-while-sitting-wooden-stool-studio-with-loft-interior-looking-camera_613910-6740.jpg",
          imageAlt: "Portrait of Jessica L.",
        },
      ]}
      title="What Our Clients Say"
      description="Hear directly from homeowners, developers, and contractors who have trusted us with their steel building projects."
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Asset Management Co.",
        "Industrial Solutions Inc.",
        "Maple Leaf Developers",
        "Northern Agribusiness",
        "Peak Construction Group",
        "Urban Modern Design",
        "Canadian Logistics Partners",
      ]}
      title="Trusted by Leading Industries Across Canada"
      description="Our commitment to quality and reliable partnerships extends across various sectors, building trust and delivering excellence."
    />
  </div>

  <div id="faqs" data-section="faqs">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "faq1",
          title: "What types of steel buildings do you specialize in?",
          content: "We specialize in a wide range of custom steel buildings, including residential garages, agricultural barns, commercial warehouses, industrial complexes, and specialty structures tailored to unique client specifications.",
        },
        {
          id: "faq2",
          title: "Are your steel buildings suitable for Canadian weather conditions?",
          content: "Absolutely. All our steel buildings are engineered and manufactured in Canada to meet stringent local building codes and withstand extreme Canadian weather, ensuring durability and safety year-round.",
        },
        {
          id: "faq3",
          title: "Can I customize the design of my steel building?",
          content: "Yes, customization is at the core of our service. From dimensions and insulation to exterior finishes and interior layouts, we work closely with you to design a building that precisely meets your aesthetic and functional requirements.",
        },
        {
          id: "faq4",
          title: "What is the typical timeline for a custom steel building project?",
          content: "Project timelines vary depending on complexity and size, but our efficient processes ensure faster delivery compared to traditional construction. We provide a detailed timeline with your free quote.",
        },
        {
          id: "faq5",
          title: "How do I get a quote for a steel building?",
          content: "Getting a free quote is easy! Simply fill out our online inquiry form, or contact us directly by phone or email. Our team will promptly review your needs and provide a comprehensive proposal.",
        },
      ]}
      title="Frequently Asked Questions"
      description="Find answers to common questions about our custom steel buildings, design process, and services."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={false}
      background={{
        variant: "radial-gradient",
      }}
      text="Ready to Build Your Custom Steel Structure?"
      buttons={[
        {
          text: "Get Your Free Quote Now",
          href: "#",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoReveal
      logoText="Canadian Steel Builders"
      leftLink={{
        text: "Privacy Policy",
        href: "#",
      }}
      rightLink={{
        text: "Terms of Service",
        href: "#",
      }}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
