"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardMetrics from '@/components/sections/hero/HeroBillboardMetrics';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import ProductCardFive from '@/components/sections/product/ProductCardFive';
import SplitAboutMetric from '@/components/sections/about/SplitAboutMetric';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Sparkles, Leaf, Image, Star } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="largeSizeMediumTitles"
      background="animatedAurora"
      cardStyle="gradient-subtle"
      primaryButtonStyle="layered-depth"
      secondaryButtonStyle="solid"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="MossArt"
          navItems={[
            { name: "About", id: "about" },
            { name: "Services", id: "services" },
            { name: "Works", id: "works" },
            { name: "Process", id: "process" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Request Consultation",            href: "#contact"
          }}
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroBillboardMetrics
          title="Floral Art That Transforms Spaces"
          description="We create custom floral installations, event decor, and one-of-a-kind botanical art pieces for moments that matter."
          tag="Bespoke Floral Design"
          tagIcon={Sparkles}
          buttons={[
            {
              text: "Request a Consultation",              href: "#contact"
            },
            {
              text: "View Our Work",              href: "#works"
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/variety-different-roses-other-beautiful-flowers-florist-shop_613910-17036.jpg"
          imageAlt="Luxury floral installation transforming an event space"
          frameStyle="card"
          metricsLabel="Trusted by event planners, brands, and private clients seeking bespoke botanical design"
          metrics={[
            {
              id: "1",              value: "200+",              label: "Projects Completed"
            },
            {
              id: "2",              value: "12+",              label: "Years Crafting Floral Art"
            },
            {
              id: "3",              value: "100%",              label: "Custom & Handmade"
            }
          ]}
        />
      </div>
      
      <div id="services" data-section="services">
        <FeatureCardThree
          title="What We Create"
          description="From event florals to sculptural installations, every piece is made to order with meticulous attention to emotion and aesthetics."
          textboxLayout="default"
          tag="Services"
          tagIcon={Leaf}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          features={[
            {
              id: "01",              title: "Event Floral Design",              description: "Weddings, corporate events, private celebrations—we design installations that create the perfect atmosphere for your moment.",              imageSrc: "https://img.b2bpic.net/free-photo/blooming-flowers-table-garden_1304-4038.jpg",              imageAlt: "Elegant floral arrangement for wedding event"
            },
            {
              id: "02",              title: "Interior & Space Decoration",              description: "Transform homes, offices, restaurants, and hotels with carefully curated floral installations that elevate every environment.",              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-dried-flowers-vase_23-2149591638.jpg",              imageAlt: "Modern interior space decorated with botanical elements"
            },
            {
              id: "03",              title: "Custom Floral Art Objects",              description: "One-of-a-kind flower paintings, moss panels, and sculptural pieces—handcrafted botanical art made exclusively for you.",              imageSrc: "https://img.b2bpic.net/free-photo/flower-with-psychedelic-painting_23-2149372263.jpg",              imageAlt: "Hand-painted floral artwork on canvas"
            }
          ]}
        />
      </div>
      
      <div id="works" data-section="works">
        <ProductCardFive
          title="Signature & Custom Works"
          description="Every piece is unique, handcrafted, and designed to bring natural beauty into your space. Made to order—no replicas."
          textboxLayout="default"
          tag="Gallery"
          tagIcon={Image}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          products={[
            {
              id: "1",              imageSrc: "https://img.b2bpic.net/free-photo/nutritious-food-texture-composition-close-up_23-2148964832.jpg",              imageAlt: "Living moss panel botanical installation art",              button: {
                text: "Inquire About This Piece"
              }
            },
            {
              id: "2",              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-watercolor-floral-arrangement_23-2151499574.jpg",              imageAlt: "Watercolor floral painting on premium canvas",              button: {
                text: "Commission a Painting"
              }
            },
            {
              id: "3",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-different-types-lettuce_1203-1973.jpg",              imageAlt: "Three-dimensional sculptural floral art installation",              button: {
                text: "Create Custom Installation"
              }
            },
            {
              id: "4",              imageSrc: "https://img.b2bpic.net/free-photo/vertical-closeup-shot-luxurious-bouquet-orange-brown-roses_181624-28580.jpg",              imageAlt: "Premium luxury floral arrangement with rare flowers",              button: {
                text: "Design Your Arrangement"
              }
            }
          ]}
        />
      </div>
      
      <div id="process" data-section="process">
        <SplitAboutMetric
          title="Our Process"
          description={[
            "Every MossArt creation begins with understanding your vision, mood, and space. We collaborate closely with you through concept development, material selection, and installation, ensuring every detail reflects your unique aesthetic and emotional intent."
          ]}
          useInvertedBackground="invertCard"
          showBorder={true}
          metrics={[
            {
              label: "Consultations",              value: "Personal"
            },
            {
              label: "Handcrafted",              value: "Always"
            }
          ]}
        />
      </div>
      
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="What Clients Say"
          description="Hear from event planners, interior designers, and private clients who've experienced the MossArt difference."
          textboxLayout="default"
          tag="Testimonials"
          tagIcon={Star}
          useInvertedBackground="noInvert"
          animationType="slide-up"
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell",              handle: "Event Planner, Luxe Events Co.",              testimonial: "MossArt completely transformed our vision for the spring gala. The space felt alive and emotional—exactly what we needed.",              imageSrc: "https://img.b2bpic.net/free-photo/front-view-business-woman-suit_23-2148603018.jpg",              imageAlt: "Sarah Mitchell, event planner"
            },
            {
              id: "2",              name: "Marcus Rivera",              handle: "Interior Designer",              testimonial: "The moss panels they created for our boutique hotel are absolutely stunning. Guests comment on them constantly.",              imageSrc: "https://img.b2bpic.net/free-photo/front-view-professional-business-woman-suit_23-2148603020.jpg",              imageAlt: "Marcus Rivera, interior designer"
            },
            {
              id: "3",              name: "Elena Rossi",              handle: "Owner, Modern Restaurant",              testimonial: "The floral installation elevated our dining experience entirely. It's become a defining feature of our brand.",              imageSrc: "https://img.b2bpic.net/free-photo/front-view-smiley-woman-work_23-2149622870.jpg",              imageAlt: "Elena Rossi, restaurant owner"
            },
            {
              id: "4",              name: "James Chen",              handle: "Corporate Event Manager",              testimonial: "For our product launch, MossArt created an atmosphere that perfectly matched our brand. The attention to detail is unmatched.",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-business-woman-office_1398-6.jpg",              imageAlt: "James Chen, corporate event manager"
            },
            {
              id: "5",              name: "Victoria Thornton",              handle: "Bride, Private Wedding",              testimonial: "The flower paintings they created as a keepsake are now among our most treasured possessions. Absolutely beautiful.",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-young-woman-with-long-brown-hair-black-t-shirt-white-jacket_613910-8245.jpg",              imageAlt: "Victoria Thornton, bride"
            },
            {
              id: "6",              name: "David Okonkwo",              handle: "Venue Director, Grand Hall",              testimonial: "Working with MossArt is a pleasure. Their installations are always on time, on budget, and absolutely magical.",              imageSrc: "https://img.b2bpic.net/free-photo/side-view-beautiful-woman-with-folded-arms-looking-camera_23-2147876783.jpg",              imageAlt: "David Okonkwo, venue director"
            }
          ]}
        />
      </div>
      
      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Start Your Project"
          description="Tell us about your vision. We'll respond within 24 hours with ideas, inspiration, and a path forward."
          inputs={[
            {
              name: "name",              type: "text",              placeholder: "Your Name",              required: true
            },
            {
              name: "email",              type: "email",              placeholder: "Email Address",              required: true
            },
            {
              name: "projectType",              type: "text",              placeholder: "Project Type (Event, Interior, Custom Art, etc.)",              required: true
            },
            {
              name: "phone",              type: "tel",              placeholder: "Phone Number",              required: false
            }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us about your vision, style, and any special details we should know...",            rows: 6,
            required: false
          }}
          useInvertedBackground="invertDefault"
          imageSrc="https://img.b2bpic.net/free-photo/closeup-shot-small-vases-with-beautiful-purple-hortensia-flower_181624-33208.jpg"
          imageAlt="Floral design workspace with botanical materials"
          mediaPosition="right"
          buttonText="Send Request"
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="MossArt"
          columns={[
            {
              title: "Services",              items: [
                {
                  label: "Event Floral Design",                  href: "#services"
                },
                {
                  label: "Interior Decoration",                  href: "#services"
                },
                {
                  label: "Custom Art Objects",                  href: "#services"
                },
                {
                  label: "Installations",                  href: "#services"
                }
              ]
            },
            {
              title: "Studio",              items: [
                {
                  label: "Our Process",                  href: "#process"
                },
                {
                  label: "View Works",                  href: "#works"
                },
                {
                  label: "Testimonials",                  href: "#testimonials"
                },
                {
                  label: "Get in Touch",                  href: "#contact"
                }
              ]
            },
            {
              title: "Connect",              items: [
                {
                  label: "Instagram",                  href: "https://instagram.com"
                },
                {
                  label: "Email",                  href: "mailto:hello@mossart.studio"
                },
                {
                  label: "Phone",                  href: "tel:+1-555-0123"
                }
              ]
            }
          ]}
          copyrightText="© 2025 MossArt. All pieces handmade with care."
        />
      </div>
    </ThemeProvider>
  );
}