"use client";
import { useEffect, useState } from 'react';

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import SplitAbout from '@/components/sections/about/SplitAbout';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { CheckCircle, Flower2, Leaf, Palette, Sparkles, MessageCircle } from "lucide-react";
import ContactFaq from "@/components/sections/contact/ContactFaq";
import ContactForm from "@/components/form/ContactForm";

const handleImageClick = (imageUrl) => {
  window.open(imageUrl, '_blank', 'width=80%');
};
export default function LandingPage() {
  const [isLoading, setIsLoading] = useState(false);
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="smallMedium"
      sizing="mediumLarge"
      background="aurora"
      cardStyle="outline"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="MossArt"
          navItems={[
            { name: "Services", id: "services" },
            { name: "Work", id: "process" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCarouselLogo
          logoText="MOSSART"
          description="Bespoke floral design for moments that matter — events, interiors, and one-of-a-kind botanical art. Trusted by 250+ events and discerning clients."
          buttons={[
            { text: "Request Consultation", href: "contact" },
            { text: "Explore Work", href: "process" }
          ]}
          slides={[
            {
              imageSrc: "https://img.b2bpic.net/free-photo/vertical-closeup-shot-beautiful-wedding-bouquet-with-gorgeous-white-roses_181624-15923.jpg",              imageAlt: "Luxurious floral event design"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/luxury-wedding-catering-banquet-outdoor_624325-1790.jpg",              imageAlt: "Modern moss panel installation"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/closeup-shot-beautiful-wedding-bouquet-with-gorgeous-white-roses_181624-27325.jpg",              imageAlt: "Handcrafted flower painting"
            }
          ]}
          autoplayDelay={4000}
          showDimOverlay={true}
          logoLineHeight={1}
          ariaLabel="MossArt hero section with carousel"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardEight
          title="What We Create" className="underline"
          description="Handcrafted floral experiences tailored to elevate your space and celebrate your moments"
          tag="Our Services"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          features={[
            {
              id: 1,
              title: "Event Floral Design",              description: "Weddings, corporate events, and private celebrations transformed with bespoke floral installations that set the emotional tone and atmosphere",              imageSrc: "https://img.b2bpic.net/free-photo/luxury-wedding-catering-banquet-outdoor_624325-1790.jpg",              imageAlt: "Event floral design showcase"
            },
            {
              id: 2,
              title: "Interior & Space Decoration",              description: "Luxury homes, offices, restaurants, and hotels enhanced with thoughtfully placed floral arrangements that elevate the aesthetic and storytelling",              imageSrc: "https://img.b2bpic.net/free-photo/high-angle-beautiful-flowers-arrangement_23-2149591558.jpg",              imageAlt: "Interior floral decoration"
            },
            {
              id: 3,
              title: "Custom Floral Art Objects",              description: "One-of-a-kind botanical pieces: flower paintings, moss panels, and sculptural installations made exclusively for your vision",              imageSrc: "https://img.b2bpic.net/free-photo/high-angle-shot-bouquet-with-evergreen-leaves-white-roses-lights_181624-27606.jpg",              imageAlt: "Custom moss panel art"
            }
          ]}
          buttons={[
            { text: "Discuss Your Project", href: "contact" }
          ]}
        />
      </div>

      <div id="process" data-section="process">
        <FeatureCardEight
          title="The MossArt Process"
          description="A personal, collaborative journey from concept to creation — ensuring every detail reflects your vision"
          tag="How We Work"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          features={[
            {
              id: 1,
              title: "Consultation & Mood",              description: "We listen deeply to understand your vision, aesthetic, and the emotional atmosphere you want to create. This foundation guides everything.",              imageSrc: "https://img.b2bpic.net/free-photo/concentrated-woman-with-students-table_23-2147656374.jpg",              imageAlt: "Design consultation meeting"
            },
            {
              id: 2,
              title: "Concept & Materials",              description: "Our team sketches your concept, selects the finest natural materials, and refines every detail with you until it's perfect.",              imageSrc: "https://img.b2bpic.net/free-photo/people-working-together-medium-shot_23-2149831293.jpg",              imageAlt: "Floral design creation process"
            },
            {
              id: 3,
              title: "Handcrafted Creation",              description: "We meticulously craft your piece using premium flowers, moss, botanicals, and sustainable materials with deep attention to detail.",              imageSrc: "https://img.b2bpic.net/free-photo/high-angle-shot-bouquet-with-evergreen-leaves-white-roses-lights_181624-27606.jpg",              imageAlt: "Handcrafted floral artistry"
            },
            {
              id: 4,
              title: "Installation & Delivery",              description: "Professional installation brings your piece to life in its intended space, perfectly positioned to create the desired atmosphere and impact.",              imageSrc: "https://img.b2bpic.net/free-photo/luxury-wedding-catering-banquet-outdoor_624325-1790.jpg",              imageAlt: "Installation and setup"
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <SplitAbout
          tag="About MossArt"
          title="Art Before Commerce"
          description="We believe floral design is art. Every project is a unique expression — never replicated, always handcrafted, made specifically for you. We collaborate with event planners, interior designers, and private collectors who demand authenticity and excellence."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          imagePosition="right"
          imageSrc="https://img.b2bpic.net/free-photo/closeup-shot-beautiful-wedding-bouquet-with-gorgeous-white-roses_181624-27325.jpg"
          imageAlt="Botanical artwork and natural materials"
          bulletPoints={[
            {
              title: "Uniqueness",              description: "No mass production. Every piece is bespoke, handmade, and one-of-a-kind",              icon: Sparkles
            },
            {
              title: "Natural Materials",              description: "We source the finest flowers, moss, botanicals, and sustainable materials",              icon: Leaf
            },
            {
              title: "Artistic Vision",              description: "Collaboration over transactions. We treat every project as a creative partnership",              icon: Palette
            },
            {
              title: "Premium Craftsmanship",              description: "Meticulous attention to detail in every arrangement, installation, and finishing touch",              icon: CheckCircle
            }
          ]}
        />
      </div>

      <div id="about-new" data-section="about-new">
        <ContactForm
          title="Your Title Here"
          description="Add your description here."
          tag="Sample tag"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTen
          title="Loved by Designers, Planners & Clients"
          description="Stories from those who've trusted us with their most important moments"
          tag="Social Proof"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",              title: "The Ceremony Transformed",              quote: "MossArt didn't just decorate our wedding — they created an atmosphere. Guests couldn't stop talking about how the space made them feel.",              name: "Emma Laurent",              role: "Bride & Event Host",              imageSrc: "https://img.b2bpic.net/free-photo/alone-specialist-handsome-daydreaming-collar_1262-870.jpg",              imageAlt: "Emma Laurent"
            },
            {
              id: "2",              title: "Exactly What We Envisioned",              quote: "Working with the team was effortless. They understood our design vision and elevated it beyond what we imagined.",              name: "James Mitchell",              role: "Interior Designer",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg",              imageAlt: "James Mitchell"
            },
            {
              id: "3",              title: "Art That Lives",              quote: "The moss panel in our office became a conversation piece. It's truly a work of art, not just decoration.",              name: "Sofia Rossi",              role: "CEO & Art Collector",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-man-black-suit_23-2148401442.jpg",              imageAlt: "Sofia Rossi"
            },
            {
              id: "4",              title: "The Difference Is Clear",              quote: "You can feel the difference between mass-produced flowers and handcrafted botanical art. MossArt gets it.",              name: "David Chen",              role: "Event Planner",              imageSrc: "https://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",              imageAlt: "David Chen"
            }
          ]}
          buttons={[
            { text: "Request Consultation", href: "contact" }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardFourteen
          title="MossArt in Numbers"
          tag="Our Impact"
          useInvertedBackground="noInvert"
          metrics={[
            {
              id: "1",              value: "250+",              description: "Projects completed for events, interiors, and private collections"
            },
            {
              id: "2",              value: "8+ Years",              description: "Crafting bespoke floral art with the same passion and precision"
            },
            {
              id: "3",              value: "98%",              description: "Client satisfaction rate; nearly every project leads to repeat work or referrals"
            },
            {
              id: "4",              value: "12",              description: "Cities where our installations have transformed spaces and celebrated moments"
            }
          ]}
        />
      </div>
      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="MossArt"
          columns={[
            {
              items: [
                { label: "Services", href: "services" },
                { label: "Our Process", href: "process" },
                { label: "About", href: "about" }
              ]
            },
            {
              items: [
                { label: "Contact", href: "contact" },
                { label: "Inquiries", href: "contact" },
                { label: "Collaborations", href: "contact" }
              ]
            },
            {
              items: [
                { label: "Instagram", href: "https://instagram.com" },
                { label: "Email", href: "mailto:hello@mossart.studio" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );

}