"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Home",
          id: "home",
        },
        {
          name: "About",
          id: "about",
        },
        {
          name: "Services",
          id: "services",
        },
        {
          name: "Portfolio",
          id: "portfolio",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="Elysian"
    />
  </div>

  <div id="home" data-section="home">
      <HeroBillboard
      background={{
        variant: "gradient-bars",
      }}
      title="Excellence in Every Detail"
      description="We craft premium business solutions that bridge the gap between vision and reality, using design that speaks to sophistication."
      buttons={[
        {
          text: "Get Started",
          href: "#contact",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/abstract-waves-background_474888-7283.jpg"
      imageAlt="Luxurious dark background"
      mediaAnimation="blur-reveal"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/confident-business-leader-sitting-table_1262-4870.jpg",
          alt: "Business leader one",
        },
        {
          src: "http://img.b2bpic.net/free-photo/content-senior-businessman-with-arms-crossed_1262-1790.jpg",
          alt: "Business leader two",
        },
        {
          src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
          alt: "Business leader three",
        },
        {
          src: "http://img.b2bpic.net/free-photo/successful-businessman-imagines-great-career_1163-5478.jpg",
          alt: "Business leader four",
        },
        {
          src: "http://img.b2bpic.net/free-photo/portrait-businessman-with-folded-arms-looking-camera_23-2147955314.jpg",
          alt: "Business leader five",
        },
      ]}
      avatarText="Trusted by 500+ global leaders"
      marqueeItems={[
        {
          type: "text",
          text: "Innovation",
        },
        {
          type: "text",
          text: "Excellence",
        },
        {
          type: "text",
          text: "Sophistication",
        },
        {
          type: "text",
          text: "Precision",
        },
        {
          type: "text",
          text: "Permanence",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <TextSplitAbout
      useInvertedBackground={false}
      title="About Our Heritage"
      description={[
        "Founded on the principles of precision and innovation, we have spent years refining our craft to serve those who value quality above all.",
        "Our mission is to translate complex business challenges into elegant, impactful solutions that stand the test of time.",
        "We believe in the power of minimalism to create clarity, and in the strength of luxury to define a brand's permanence.",
      ]}
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardTwentyNine
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      features={[
        {
          title: "Strategic Consulting",
          description: "Defining your future with clarity and insight.",
          imageSrc: "http://img.b2bpic.net/free-photo/christianity-symbol-cross-necklace-shines-gold-generated-by-ai_188544-10060.jpg",
          titleImageSrc: "http://img.b2bpic.net/free-vector/vector-ui-illustration-mixed-business-education-concept_53876-8158.jpg",
          buttonText: "Read More",
        },
        {
          title: "Design Innovation",
          description: "Creating aesthetics that inspire confidence.",
          imageSrc: "http://img.b2bpic.net/free-photo/luxury-waiter-counting-one_1368-1368.jpg",
          titleImageSrc: "http://img.b2bpic.net/free-vector/set-gold-leaf-logo-design-inspiration-vector_361591-1193.jpg",
          buttonText: "Read More",
        },
        {
          title: "Performance Growth",
          description: "Driving outcomes through precision and execution.",
          imageSrc: "http://img.b2bpic.net/free-vector/environmental-logo-vector-with-ecology-text_53876-112052.jpg",
          titleImageSrc: "http://img.b2bpic.net/free-photo/star-icon-symbol-success-ranking-element-icon-concept-cartoon-illustration-3d-rendering_56104-1235.jpg",
          buttonText: "Read More",
        },
      ]}
      title="Our Expertise"
      description="Comprehensive services tailored for premium brands and organizations seeking exceptional performance."
    />
  </div>

  <div id="portfolio" data-section="portfolio">
      <ProductCardThree
      animationType="scale-rotate"
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={false}
      products={[
        {
          id: "1",
          name: "Luxury Retail Concept",
          price: "Featured",
          imageSrc: "http://img.b2bpic.net/free-photo/senior-tailor-teaching-trainee-skills-create-modern-fashion-clothing-line-tailoring-handcraft-process-beginner-experienced-designer-looking-outlines-sketches-handheld-shot_482257-67829.jpg",
        },
        {
          id: "2",
          name: "Corporate Identity Refresh",
          price: "Featured",
          imageSrc: "http://img.b2bpic.net/free-photo/three-grey-credit-cards-white-platforms_187299-48079.jpg",
        },
        {
          id: "3",
          name: "Architectural Design Suite",
          price: "Featured",
          imageSrc: "http://img.b2bpic.net/free-photo/detail-shot-skyscrapers_1359-398.jpg",
        },
        {
          id: "4",
          name: "High-End Marketing Kit",
          price: "Featured",
          imageSrc: "http://img.b2bpic.net/free-photo/blank-stationery-set-corporate-identity-template_93675-130793.jpg",
        },
        {
          id: "5",
          name: "Product Branding",
          price: "Featured",
          imageSrc: "http://img.b2bpic.net/free-photo/colorful-overloaded-bullet-journal_23-2150248182.jpg",
        },
        {
          id: "6",
          name: "Digital Transformation",
          price: "Featured",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-shopping-bags-with-copy-space_23-2148316150.jpg",
        },
      ]}
      title="Selected Works"
      description="A collection of projects defined by sophistication and strategic impact."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardTwo
      animationType="depth-3d"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      metrics={[
        {
          id: "1",
          value: "150+",
          description: "Projects Delivered",
        },
        {
          id: "2",
          value: "98%",
          description: "Client Satisfaction",
        },
        {
          id: "3",
          value: "12",
          description: "Industry Awards",
        },
      ]}
      title="By The Numbers"
      description="Measurable impact behind our elegant design approach."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardOne
      textboxLayout="split"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",
          name: "Sarah Jenkins",
          role: "CEO",
          company: "Vertex",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/middle-age-businessman-smiling-happy-standing-city_839833-25759.jpg",
        },
        {
          id: "2",
          name: "Mark Stevens",
          role: "Director",
          company: "Nexus",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/business-woman-working-computer-office_1303-31838.jpg",
        },
        {
          id: "3",
          name: "Elena Rodriguez",
          role: "Partner",
          company: "Studio",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-sexy-handsome-fashion-businessman-model-dressed-elegant-blue-suit-posing-street-background-metrosexual_158538-10528.jpg",
        },
        {
          id: "4",
          name: "David Thorne",
          role: "Founder",
          company: "Thorne",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/senior-businessman-outside-modern-office-building_1139-1076.jpg",
        },
        {
          id: "5",
          name: "Chloe Miller",
          role: "COO",
          company: "Miller",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/attractive-blond-business-woman-white-shirt-eyeglasses-crossed-arms-grey-background_613910-13618.jpg",
        },
      ]}
      title="What They Say"
      description="Stories of success and growth from our valued clients."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Begin Your Journey"
      description="We are ready to listen and refine your vision. Reach out to start the conversation."
      inputs={[
        {
          name: "name",
          type: "text",
          placeholder: "Your Name",
          required: true,
        },
        {
          name: "email",
          type: "email",
          placeholder: "Your Email",
          required: true,
        },
      ]}
      textarea={{
        name: "message",
        placeholder: "Tell us about your project...",
        rows: 4,
        required: true,
      }}
      imageSrc="http://img.b2bpic.net/free-photo/industrial-designers-working-3d-model_23-2149370123.jpg"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      columns={[
        {
          title: "Company",
          items: [
            {
              label: "About",
              href: "#about",
            },
            {
              label: "Portfolio",
              href: "#portfolio",
            },
          ],
        },
        {
          title: "Services",
          items: [
            {
              label: "Consulting",
              href: "#services",
            },
            {
              label: "Design",
              href: "#services",
            },
          ],
        },
        {
          title: "Connect",
          items: [
            {
              label: "LinkedIn",
              href: "#",
            },
            {
              label: "Twitter",
              href: "#",
            },
          ],
        },
      ]}
      logoText="Elysian"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
