"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="mediumSmall"
        sizing="mediumSizeLargeTitles"
        background="aurora"
        cardStyle="inset"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        { name: "Home", id: "hero" },
        { name: "Services", id: "services" },
        { name: "Projects", id: "projects" },
        { name: "Contact", id: "contact" },
      ]}
      brandName="Sanajaya Home"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardGallery
      background={{ variant: "plain" }}
      title="Membangun Rumah Impian Anda"
      description="Sanajaya Home hadir sebagai mitra terpercaya dalam jasa kontraktor, renovasi, dan pembangunan rumah berkualitas dengan standar ketelitian tinggi."
      mediaItems={[
        { imageSrc: "http://img.b2bpic.net/free-photo/construction-site-thoughtful-man-safety-helmet-plaid-shirt-with-tablet-standing-looking-camera-workers-carrying-pipe-construction-site_259150-57632.jpg?_wi=1", imageAlt: "Konstruksi Profesional" },
        { imageSrc: "http://img.b2bpic.net/free-photo/modern-interior-with-wood-paneling-large-windows_23-2152016398.jpg?_wi=1", imageAlt: "Interior Mewah" },
        { imageSrc: "http://img.b2bpic.net/free-photo/lush-tropical-garden_1385-762.jpg?_wi=1", imageAlt: "Eksterior Modern" },
      ]}
      mediaAnimation="slide-up"
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={false}
      title="Komitmen Kualitas Terbaik"
      description="Sanajaya Home memiliki dedikasi penuh untuk menghadirkan hunian yang fungsional, estetis, dan tahan lama."
      metrics={[
        { value: "100+", title: "Proyek Selesai" },
        { value: "10th", title: "Tahun Pengalaman" },
        { value: "98%", title: "Klien Puas" },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/portrait-architect-thinking-about-his-project_1149-1746.jpg?_wi=1"
      imageAlt="Profil Perusahaan"
      mediaAnimation="slide-up"
      metricsAnimation="slide-up"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardNineteen
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        { tag: "Layanan 1", title: "Pembangunan Rumah", subtitle: "Dari nol hingga kunci", description: "Layanan pembangunan rumah menyeluruh.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-modern-building-modern-architecture_181624-21692.jpg" },
        { tag: "Layanan 2", title: "Renovasi Hunian", subtitle: "Transformasi ruang lama", description: "Ubah rumah lama Anda.", imageSrc: "http://img.b2bpic.net/free-photo/home-repair-renovation-interior-design-concept_53876-125419.jpg" },
      ]}
      title="Layanan Kontraktor Kami"
      description="Berbagai solusi pembangunan rumah."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={false}
      metrics={[
        { id: "m1", value: "500", description: "Material Berkualitas" },
        { id: "m2", value: "24/7", description: "Konsultasi Teknis" },
      ]}
      title="Pencapaian Kami"
      description="Kepercayaan klien adalah landasan kesuksesan."
    />
  </div>

  <div id="projects" data-section="projects">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      title="Portofolio Proyek"
      description="Intip hasil karya terbaik kami."
      products={[
        { id: "p1", name: "Modern Minimalist Home", price: "Selesai", imageSrc: "http://img.b2bpic.net/free-photo/modern-building-clear-blue-sky_250224-204.jpg" },
        { id: "p2", name: "Renovasi Rumah Mewah", price: "Selesai", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-kitchen-interior-design_23-2150976526.jpg" },
        { id: "p3", name: "Renovasi Hunian Asri", price: "Selesai", imageSrc: "http://img.b2bpic.net/free-photo/home-renovation-concept_53876-125419.jpg" },
      ]}
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFive
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        { id: "1", name: "Budi Setiawan", date: "2023-01", title: "Renovasi", quote: "Sangat puas!", tag: "Puas", avatarSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-man-posing_23-2148563421.jpg" },
      ]}
      title="Apa Kata Klien"
      description="Kepuasan klien adalah prioritas."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        { id: "f1", title: "Durasi Proyek?", content: "Tergantung skala."},
      ]}
      title="Pertanyaan Umum"
      description="Temukan jawaban atas pertanyaan seputar jasa kami."
      faqsAnimation="slide-up"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={false}
      background={{ variant: "plain" }}
      tag="Hubungi Kami"
      title="Siap Mewujudkan Hunian?"
      description="Diskusikan rencana proyek Anda."
      buttons={[{ text: "WhatsApp", href: "#" }]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      logoText="Sanajaya Home"
      columns={[{ items: [{ label: "Home", href: "#nav" }] }]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}