"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import TextAbout from '@/components/sections/about/TextAbout';
import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="small"
        sizing="largeSizeMediumTitles"
        background="blurBottom"
        cardStyle="gradient-mesh"
        primaryButtonStyle="flat"
        secondaryButtonStyle="solid"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        { name: "Home", id: "hero" },
        { name: "Visualize", id: "visualization" },
        { name: "About", id: "about" },
        { name: "Projects", id: "products" },
        { name: "Contact", id: "contact" },
      ]}
      brandName="Symbol Interior"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardCarousel
      background={{ variant: "gradient-bars" }}
      title="Symbol Interior: Defining Luxury Living"
      description="Ahmedabad’s premier interior design firm, bringing your vision to life through innovative, sustainable, and luxurious living spaces tailored to your lifestyle."
      mediaItems={[
        { imageSrc: "http://img.b2bpic.net/free-photo/minimalist-office-interior-design_23-2151826251.jpg", imageAlt: "Luxurious Showroom" },
        { imageSrc: "http://img.b2bpic.net/free-photo/abstract-blur-furniture-shop-store-interior_1203-8583.jpg", imageAlt: "Master Bedroom" },
        { imageSrc: "http://img.b2bpic.net/free-photo/beautiful-kitchen-interior-design_23-2150976543.jpg", imageAlt: "Luxury Kitchen" },
      ]}
      buttons={[{ text: "Start Your Project", href: "#contact" }]}
    />
  </div>

  <div id="visualization" data-section="visualization">
      <ProductCatalog
        layout="section"
        products={[
          { id: "viz1", name: "3D Layout Simulator", price: "Interactive", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/house-sign-draft_23-2147785570.jpg" },
          { id: "viz2", name: "4D Walkthrough Engine", price: "Advanced", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/employee-working-project-side-view_23-2149721889.jpg" }
        ]}
      />
  </div>

  <div id="about" data-section="about">
      <TextAbout
      useInvertedBackground={true}
      title="Crafting Future-Ready Living Experiences"
      buttons={[{ text: "Our Design Philosophy", href: "#services" }]}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardEight
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        { title: "Bespoke 3D Design", description: "High-detail 3D renders that allow you to walk through your design virtually before we build.", imageSrc: "http://img.b2bpic.net/free-photo/employee-working-project-side-view_23-2149721889.jpg" },
        { title: "Precision Space Planning", description: "Optimizing floor plans to maximize efficiency, aesthetic appeal, and comfort for modern living.", imageSrc: "http://img.b2bpic.net/free-photo/house-sign-draft_23-2147785570.jpg" },
        { title: "Innovative Lighting Solutions", description: "Setting the mood with bespoke smart lighting designs tailored for every room.", imageSrc: "http://img.b2bpic.net/free-photo/view-lighting-device-with-futuristic-design_23-2151037511.jpg" },
      ]}
      title="Our Core Services"
      description="We blend luxury, functionality, and future-ready aesthetics to transform your space into a reflection of your personality."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="asymmetric-60-wide-40-narrow"
      useInvertedBackground={true}
      products={[
        { id: "p1", name: "Modern Living Suite", price: "Custom Project", imageSrc: "http://img.b2bpic.net/free-photo/interior-decor-furniture-inspired-by-fruits-vegetables_23-2151361904.jpg" },
        { id: "p2", name: "Bespoke Bedroom Sanctuary", price: "Custom Project", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-modern-luxury-pastel-bedroom-with-marble-carpet-decor-deluxe-hotel_105762-2290.jpg" },
        { id: "p3", name: "Contemporary Executive Office", price: "Custom Project", imageSrc: "http://img.b2bpic.net/free-photo/modern-office-space-with-futuristic-decor-furniture_23-2151797675.jpg" },
      ]}
      title="Our Portfolio Highlights"
      description="A curated collection of our recent luxury projects in and around Ahmedabad."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardEight
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      plans={[
        { id: "basic", badge: "Essential", price: "Consultation", subtitle: "Perfect for minor renovations", buttons: [{ text: "Inquire", href: "#contact" }], features: ["Room Layout", "Color Palette", "Shopping List"] },
        { id: "pro", badge: "Luxury", price: "Bespoke", subtitle: "For custom home renovations", buttons: [{ text: "Inquire", href: "#contact" }], features: ["Full 3D Design", "Lighting Plan", "Project Oversight"] },
      ]}
      title="Design Packages"
      description="Transparent pricing for high-end interior solutions, ensuring luxury is accessible."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardEleven
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      metrics={[
        { id: "m1", value: "150+", title: "Projects Completed", description: "Unique residential and commercial interiors.", imageSrc: "http://img.b2bpic.net/free-photo/still-life-home-decor-cozy-home_169016-5797.jpg" },
        { id: "m2", value: "98%", title: "Client Satisfaction", description: "Consistently high delivery success rates.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-holding-plans_23-2148819836.jpg" },
      ]}
      title="Symbol Interior at a Glance"
      description="Proven results for discerning clients in Ahmedabad."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwelve
      useInvertedBackground={false}
      testimonials={[
        { id: "t1", name: "Ananya Shah", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-construction-workers-posing_23-2149366628.jpg" },
        { id: "t2", name: "Vikram Patel", imageSrc: "http://img.b2bpic.net/free-photo/scenery-designers-work_23-2149741791.jpg" },
      ]}
      cardTitle="What Our Clients Say"
      cardTag="Testimonials"
      cardAnimation="slide-up"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={true}
      faqs={[
        { id: "faq1", title: "Do you design for commercial spaces?", content: "Yes, we specialize in both premium residential and sophisticated commercial interiors." },
        { id: "faq2", title: "How do we get started?", content: "Book an initial consultation through our contact form, and we will guide you through our process." },
      ]}
      sideTitle="Frequently Asked Questions"
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={false}
      background={{ variant: "gradient-bars" }}
      text="Ready to design your luxurious dream space? Contact us today for an initial consultation."
      buttons={[{ text: "Contact Us", href: "mailto:info@symbolinterior.com" }]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/scenery-designers-work_23-2149741805.jpg"
      logoText="Symbol Interior ®"
      columns={[
        { title: "Company", items: [{ label: "About", href: "#about" }, { label: "Projects", href: "#products" }] },
        { title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}