"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import { Award, Building, Building2 } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="mediumLarge"
        sizing="largeSmallSizeMediumTitles"
        background="none"
        cardStyle="outline"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="glass"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Home",          id: "#home"},
        {
          name: "About",          id: "#about"},
        {
          name: "Services",          id: "#services"},
        {
          name: "Projects",          id: "#projects"},
        {
          name: "Testimonials",          id: "#testimonials"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      brandName="Graybeale Construction Inc"
    />
  </div>

  <div id="home" data-section="home">
      <HeroBillboardTestimonial
      useInvertedBackground={false}
      background={{
        variant: "plain"}}
      title="Quality Construction Built to Last"
      description="Graybeale Construction delivers professional general contracting services with proven expertise and attention to detail. From concept to completion, we build projects that exceed expectations."
      testimonials={[
        {
          name: "Sarah Chen",          handle: "@homeowner_nj",          testimonial: "Graybeale transformed our old home into a modern masterpiece. Their team was professional, transparent, and delivered beyond our dreams.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg",          imageAlt: "Sarah Chen avatar"},
        {
          name: "Mark Johnson",          handle: "@property_mgmt",          testimonial: "As a property manager, I need reliable contractors. Graybeale consistently delivers high-quality work on time and within budget.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-empowered-business-woman-office_23-2149333043.jpg",          imageAlt: "Mark Johnson avatar"},
        {
          name: "Emily Davis",          handle: "@arch_designs",          testimonial: "Partnering with Graybeale is always a pleasure. Their attention to detail and commitment to architectural integrity is unmatched.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/cheerful-african-american-businessman_1262-20994.jpg",          imageAlt: "Emily Davis avatar"},
        {
          name: "David Lee",          handle: "@developer_corp",          testimonial: "Their commercial team handled our large-scale project with exceptional efficiency. Highly recommended for complex builds.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/cheerful-woman-with-laptop-office_23-2147787651.jpg",          imageAlt: "David Lee avatar"},
        {
          name: "Jessica White",          handle: "@biz_owner",          testimonial: "Our new retail space was completed flawlessly. Graybeale's expertise made the entire process smooth and stress-free.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/low-angle-shot-man-looking-away_23-2148230181.jpg",          imageAlt: "Jessica White avatar"},
      ]}
      buttons={[
        {
          text: "View Our Work",          href: "#projects"},
      ]}
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/sleepy-mixed-race-man-portrait-deep-blue-background_633478-2106.jpg",          alt: "Sarah Chen"},
        {
          src: "http://img.b2bpic.net/free-photo/business-woman-with-laptop-looking-away_23-2148317298.jpg",          alt: "Mark Johnson"},
        {
          src: "http://img.b2bpic.net/free-photo/businessman-front-building_23-2147985136.jpg",          alt: "Emily Davis"},
        {
          src: "http://img.b2bpic.net/free-photo/young-painter-white-shirt-striped-t-shirt-sitting-floor-thoughtfully-looking-camera-while-drawing-by-watercolor-with-paint-tools-near-home_574295-3776.jpg",          alt: "David Lee"},
        {
          src: "http://img.b2bpic.net/free-photo/mature-woman-blue-t-shirt-pretending-hold-show-something-looking-merry_176474-32604.jpg",          alt: "Jessica White"},
      ]}
      avatarText="Trusted by leading clients"
      imageSrc="http://img.b2bpic.net/free-photo/house-construction-petrovac-montenegro_1268-14788.jpg"
      imageAlt="Construction site with modern building under construction"
      mediaAnimation="slide-up"
      buttonAnimation="blur-reveal"
      marqueeItems={[
        {
          type: "image",          src: "http://img.b2bpic.net/free-photo/crane-building-construction-exterior_74190-7518.jpg",          alt: "Crane building under construction exterior"},
        {
          type: "image",          src: "http://img.b2bpic.net/free-photo/tall-office-modern-buildings_23-2148836835.jpg",          alt: "Tall office modern buildings"},
        {
          type: "image",          src: "http://img.b2bpic.net/free-photo/street-reflection-glass-steel-building-facade_1153-3596.jpg",          alt: "Street reflection on glass steel building facade"},
        {
          type: "image",          src: "http://img.b2bpic.net/free-photo/giant-glass-buildings_1127-2023.jpg",          alt: "Giant glass buildings"},
        {
          type: "image",          src: "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-2499.jpg",          alt: "Modern building development"},
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <AboutMetric
      useInvertedBackground={true}
      title="Building Dreams into Reality Since 1995"
      metrics={[
        {
          icon: Building,
          label: "Years in Business",          value: "28+"},
        {
          icon: Building2,
          label: "Projects Completed",          value: "500+"},
        {
          icon: Award,
          label: "Satisfied Clients",          value: "98%"},
      ]}
      metricsAnimation="entrance-slide"
    />
  </div>

  <div id="team" data-section="team">
      <TeamCardEleven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      groups={[
        {
          id: "leadership",          groupTitle: "Leadership",          members: [
            {
              id: "1",              title: "John Graybeale",              subtitle: "Founder & CEO",              detail: "Over 30 years of experience in general contracting, specializing in large-scale commercial and residential developments. John founded Graybeale Construction with a vision for quality and integrity.",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-cheerful-man-sitting-desk_329181-15290.jpg",              imageAlt: "John Graybeale"},
            {
              id: "2",              title: "Maria Rodriguez",              subtitle: "Chief Operations Officer",              detail: "Maria oversees all project operations, ensuring efficiency, safety, and timely completion. Her expertise in logistics and team management is critical to our success.",              imageSrc: "http://img.b2bpic.net/free-photo/senior-businessman-architect-hard-hat_1303-18998.jpg",              imageAlt: "Maria Rodriguez"},
            {
              id: "3",              title: "David Kim",              subtitle: "Head of Project Development",              detail: "David leads our project acquisition and client relations, identifying new opportunities and fostering strong partnerships. His strategic vision drives our growth.",              imageSrc: "http://img.b2bpic.net/free-photo/happy-people-with-sketch-tablet_23-2148269344.jpg",              imageAlt: "David Kim"},
            {
              id: "4",              title: "Jessica Lee",              subtitle: "Lead Architect & Designer",              detail: "Jessica brings innovative design solutions and a keen eye for detail to every project, ensuring aesthetic appeal and functional excellence for our clients.",              imageSrc: "http://img.b2bpic.net/free-photo/three-architects-with-plans_23-2147702498.jpg",              imageAlt: "Jessica Lee"},
          ]
        }
      ]}
      title="Meet Our Dedicated Leadership Team"
      description="Our experienced team is committed to delivering exceptional craftsmanship and unparalleled service on every project."
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardThree
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      features={[
        {
          title: "Residential Renovations",          description: "Transform your home with our expert renovation services, including kitchen and bathroom remodels, additions, and whole-house makeovers. We bring your vision to life.",          imageSrc: "http://img.b2bpic.net/free-photo/abstract-city-building-shadows_23-2149283249.jpg",          imageAlt: "Modern residential kitchen renovation"},
        {
          title: "Commercial Construction",          description: "Specializing in new commercial builds, office fit-outs, and retail space construction. We deliver functional and aesthetically pleasing environments for your business.",          imageSrc: "http://img.b2bpic.net/free-photo/modern-hotel-lobby-with-hallway-office-lounge-room_1262-12372.jpg",          imageAlt: "Modern commercial building exterior"},
        {
          title: "Project Management",          description: "Our experienced project managers ensure seamless execution from concept to completion. We handle all aspects, including budgeting, scheduling, and subcontractor coordination.",          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-builder-looking-clipboard-high-quality-photo_114579-61056.jpg",          imageAlt: "Construction project manager reviewing blueprints"},
      ]}
      title="Our Comprehensive Construction Services"
      description="From residential remodels to large-scale commercial builds, Graybeale Construction offers a full spectrum of general contracting solutions tailored to your needs."
    />
  </div>

  <div id="projects" data-section="projects">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      products={[
        {
          id: "1",          name: "The Grand Plaza Retail",          price: "Commercial Retail",          imageSrc: "http://img.b2bpic.net/free-photo/atelier-shop-full-sartorial-outfits_482257-90452.jpg",          imageAlt: "Interior of a modern retail store"},
        {
          id: "2",          name: "Skyline Corporate HQ",          price: "Office Building",          imageSrc: "http://img.b2bpic.net/free-photo/low-angle-view-business-buildings_1359-1085.jpg",          imageAlt: "Modern corporate office space interior"},
        {
          id: "3",          name: "Coastal Haven Residence",          price: "Luxury Residential",          imageSrc: "http://img.b2bpic.net/free-photo/swimming-pool-beach-luxury-hotel-type-entertainment-complex-amara-dolce-vita-luxury-hotel-resort-tekirova-kemer-turkey_146671-18719.jpg",          imageAlt: "Exterior of a luxury modern home"},
        {
          id: "4",          name: "Urban Living Apartments",          price: "Multi-Family Residential",          imageSrc: "http://img.b2bpic.net/free-photo/aerial-shot-ski-resort-covered-snow-alps_181624-30150.jpg",          imageAlt: "Exterior of a modern apartment complex"},
        {
          id: "5",          name: "The Beacon Hotel & Spa",          price: "Hospitality",          imageSrc: "http://img.b2bpic.net/free-photo/silhouette-young-business-woman-beige-suit-walking-city-center-posing-near-office-buildings_1258-194036.jpg",          imageAlt: "Luxurious hotel lobby interior"},
        {
          id: "6",          name: "Precision Manufacturing Facility",          price: "Industrial",          imageSrc: "http://img.b2bpic.net/free-photo/warehouse-workers-checking-inventory-goods-distribution-large-storehouse_342744-1482.jpg",          imageAlt: "Clean and modern industrial manufacturing facility"},
      ]}
      title="Showcasing Our Past Work"
      description="Explore a selection of our recently completed projects, demonstrating our commitment to quality, innovative design, and client satisfaction."
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={true}
      names={[
        "Asset Group",        "Urban Developers",        "Property Solutions Inc.",        "Architectural Visionaries",        "Prime Estates Group",        "EcoBuild Innovations",        "Hospitality Ventures"]}
      title="Trusted by Industry Leaders"
      description="We partner with top-tier clients and collaborate with leading industry experts to deliver exceptional results."
      showCard={false}
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwelve
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",          name: "Sarah J.",          imageSrc: "http://img.b2bpic.net/free-photo/modern-skyscrapers-business-district_23-2148836789.jpg",          imageAlt: "Modern office building"},
        {
          id: "2",          name: "Michael L.",          imageSrc: "http://img.b2bpic.net/free-photo/modern-dining-room-with-outdoor-patio-pool_23-2152008246.jpg",          imageAlt: "Luxury home interior"},
        {
          id: "3",          name: "Emily R.",          imageSrc: "http://img.b2bpic.net/free-photo/elegant-women-with-shopping-bags-city_1157-26764.jpg",          imageAlt: "Retail store front"},
        {
          id: "4",          name: "David K.",          imageSrc: "http://img.b2bpic.net/free-photo/daylight-analog-city-landscape-with-buildings_23-2149661407.jpg",          imageAlt: "Modern apartment building"},
        {
          id: "5",          name: "Jessica A.",          imageSrc: "http://img.b2bpic.net/free-photo/clean-organized-pharmaceutical-plant-where-steel-pipelines-valves-are-part-sterile-environment_73899-44052.jpg",          imageAlt: "Industrial warehouse interior"},
      ]}
      cardTitle="What Our Clients Say"
      cardTag="Success Stories"
      buttons={[
        {
          text: "Read All Reviews",          href: "#testimonials"}
      ]}
      cardAnimation="blur-reveal"
      buttonAnimation="blur-reveal"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={true}
      faqs={[
        {
          id: "1",          title: "What types of projects does Graybeale Construction handle?",          content: "We specialize in both residential and commercial general contracting, including new construction, renovations, remodels, and large-scale build-outs for various industries."},
        {
          id: "2",          title: "How do you ensure project quality and timely completion?",          content: "Our experienced project managers follow a rigorous process including detailed planning, regular site inspections, transparent communication, and strict adherence to timelines and budgets. We use only high-quality materials and trusted subcontractors."},
        {
          id: "3",          title: "Can I see examples of your previous work?",          content: "Absolutely! Our 'Projects' section showcases a diverse portfolio of our completed residential and commercial projects. We can also provide case studies and references upon request."},
        {
          id: "4",          title: "How do I get started with a project proposal?",          content: "Simply reach out to us through our 'Contact' form or call us directly. We'll schedule an initial consultation to discuss your vision, requirements, and provide a tailored proposal."},
      ]}
      sideTitle="Frequently Asked Questions"
      sideDescription="Find answers to common questions about our services, process, and commitment to quality."
      faqsAnimation="entrance-slide"
      textPosition="left"
      buttonAnimation="blur-reveal"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Let's Build Something Great Together"
      description="Ready to start your next construction project? Get in touch with Graybeale Construction Inc. for a consultation and estimate."
      inputs={[
        {
          name: "name",          type: "text",          placeholder: "Your Name",          required: true,
        },
        {
          name: "email",          type: "email",          placeholder: "Your Email",          required: true,
        },
        {
          name: "phone",          type: "tel",          placeholder: "Your Phone (Optional)"},
      ]}
      textarea={{
        name: "message",        placeholder: "Tell us about your project...",        rows: 5,
        required: true,
      }}
      imageSrc="http://img.b2bpic.net/free-photo/man-standing-rooftop-with-phone-hand_23-2148269876.jpg"
      imageAlt="Construction blueprints and hard hat on a table"
      mediaAnimation="entrance-slide"
      mediaPosition="right"
      buttonText="Send Message"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseReveal
      logoText="Graybeale Construction Inc"
      columns={[
        {
          title: "Services",          items: [
            {
              label: "Residential",              href: "#services"},
            {
              label: "Commercial",              href: "#services"},
            {
              label: "Project Management",              href: "#services"},
            {
              label: "Consultation",              href: "#"},
          ],
        },
        {
          title: "Company",          items: [
            {
              label: "About Us",              href: "#about"},
            {
              label: "Our Team",              href: "#team"},
            {
              label: "Projects",              href: "#projects"},
            {
              label: "Testimonials",              href: "#testimonials"},
          ],
        },
        {
          title: "Connect",          items: [
            {
              label: "Contact Us",              href: "#contact"},
            {
              label: "Careers",              href: "#"},
            {
              label: "FAQs",              href: "#faq"},
            {
              label: "LinkedIn",              href: "https://linkedin.com/graybeale"},
          ],
        },
      ]}
      copyrightText="© 2024 Graybeale Construction Inc. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
