"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import { CheckCircle, Globe, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-magnetic"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="mediumSmall"
        sizing="mediumLargeSizeLargeTitles"
        background="aurora"
        cardStyle="layered-gradient"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="layered"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "Home",          id: "hero"},
        {
          name: "Services",          id: "services"},
        {
          name: "Process",          id: "process"},
        {
          name: "Contact",          id: "contact"},
      ]}
      brandName="ARCVIZ"
      button={{ text: "Start Now", href: "#contact" }}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroLogoBillboard
      background={{
        variant: "sparkles-gradient"}}
      logoText="ARCVIZ STUDIOS"
      description="A creative studio delivering exceptional design, architectural solutions, and digital experiences."
      buttons={[
        {
          text: "Start a Project",          href: "#contact"},
        {
          text: "View Portfolio",          href: "#portfolio"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/panoramic-views-dubai-city-illuminated-neon-spectrum_23-2151305368.jpg"
      mediaAnimation="blur-reveal"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardNine
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          title: "Digital Design",          description: "3D renderings, architectural jury layouts, and visual presentations.",          phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CZqf4dj2i4cW5YGNwDr1n00fUI/uploaded-1776977480320-iypsmqkq.png" },
          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-vector/business-dashboard-user-panel_23-2148367849.jpg" },
        },
        {
          title: "Architectural Design",          description: "Concept development and precise working drawings.",          phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CZqf4dj2i4cW5YGNwDr1n00fUI/uploaded-1776977480320-d5x9gl0g.png" },
          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/architecture-plan-blueprint-layout-work-concept_53876-124263.jpg" },
        },
        {
          title: "Tech & Product",          description: "Full-stack development, UI/UX, and product experience design.",          phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/still-life-tech-device_23-2150722711.jpg" },
          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/3d-geometric-abstract-background_1048-17507.jpg" },
        },
      ]}
      showStepNumbers={false}
      title="Our Expertise"
      description="Bridging the gap between physical architecture and digital experience."
    />
  </div>

  <div id="values" data-section="values">
      <MetricCardOne
      textboxLayout="split"
      gridVariant="bento-grid"
      useInvertedBackground={false}
      animationType="slide-up"
      metrics={[
        {
          id: "m1",          value: "100%",          title: "Custom Solutions",          description: "Tailored to your needs.",          icon: CheckCircle,
        },
        {
          id: "m2",          value: "Fast",          title: "Turnaround",          description: "Professional workflow efficiency.",          icon: Zap,
        },
        {
          id: "m3",          value: "Global",          title: "Presence",          description: "Available for projects worldwide.",          icon: Globe,
        },
      ]}
      title="Why Work With Us"
      description="Precision and innovation at the core of everything."
    />
  </div>

  <div id="portfolio" data-section="portfolio">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="four-items-2x2-equal-grid"
      useInvertedBackground={true}
      products={[
        {
          id: "p1",          name: "Modern Residential",          price: "Architectural",          variant: "Featured",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CZqf4dj2i4cW5YGNwDr1n00fUI/uploaded-1776977480320-iypsmqkq.png"},
        {
          id: "p2",          name: "Urban Interface",          price: "Web App",          variant: "Featured",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CZqf4dj2i4cW5YGNwDr1n00fUI/uploaded-1776977480320-o75d8cjz.png"},
        {
          id: "p3",          name: "Luxury Retail",          price: "Interior",          variant: "Featured",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CZqf4dj2i4cW5YGNwDr1n00fUI/uploaded-1776977480320-d5x9gl0g.png"},
        {
          id: "p4",          name: "Tech Ecosystem",          price: "UI/UX",          variant: "Featured",          imageSrc: "http://img.b2bpic.net/free-photo/person-controlling-house-light-using-smart-home-application-touching-screen-turn-it-by-mobile_482257-2842.jpg"},
      ]}
      title="Selected Works"
      description="Architectural renders and digital products built for scale."
    />
  </div>

  <div id="process" data-section="process">
      <FeatureCardNine
      textboxLayout="default"
      useInvertedBackground={false}
      animationType="slide-up"
      features={[
        {
          title: "Discover",          description: "We listen and understand your goals.",          phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CZqf4dj2i4cW5YGNwDr1n00fUI/uploaded-1776977480320-iypsmqkq.png" },
          phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CZqf4dj2i4cW5YGNwDr1n00fUI/uploaded-1776977480320-o75d8cjz.png" },
        },
        {
          title: "Design",          description: "We craft tailored solutions that inspire.",          phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/panoramic-views-dubai-city-illuminated-neon-spectrum_23-2151305368.jpg" },
          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-vector/business-dashboard-user-panel_23-2148367849.jpg" },
        },
        {
          title: "Develop",          description: "We build with precision.",          phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/still-life-tech-device_23-2150722711.jpg" },
          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/3d-geometric-abstract-background_1048-17507.jpg" },
        },
      ]}
      showStepNumbers={true}
      title="Our Process"
      description="Discover, Design, Develop, Deliver."
    />
  </div>

  <div id="trust" data-section="trust">
      <SocialProofOne
      textboxLayout="split"
      useInvertedBackground={true}
      names={[
        "Aera Bureau",        "Koda",        "Plank",        "Yield",        "Ether",        "Kaze",        "Obsidian"]}
      title="Global Collaboration"
      description="Remote & on-site collaboration available."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Let's Build Iconic"
      description="Got a project in mind? Reach out today."
      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 vision...",        required: true,
      }}
      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CZqf4dj2i4cW5YGNwDr1n00fUI/uploaded-1776977480320-iypsmqkq.png"
      mediaPosition="right"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/3d-geometric-abstract-background_1048-17507.jpg"
      logoText="ARCVIZ"
      columns={[
        {
          title: "Services",          items: [
            {
              label: "Architecture",              href: "#"},
            {
              label: "Design",              href: "#"},
          ],
        },
        {
          title: "Company",          items: [
            {
              label: "About",              href: "#"},
            {
              label: "Portfolio",              href: "#"},
          ],
        },
      ]}
      copyrightText="© 2025 ArcViz Studios | Your vision. Our obsession."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}