"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import MediaAbout from '@/components/sections/about/MediaAbout';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Calendar, Droplet, Heart, Shield, Sparkles, Star, Sun, Zap } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="medium"
      sizing="mediumLargeSizeLargeTitles"
      background="noiseDiagonalGradient"
      cardStyle="gradient-mesh"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Radiance Beauty"
          navItems={[
            { name: "גלריה", id: "#gallery" },
            { name: "שירותים", id: "#services" },
            { name: "תור", id: "/appointments" },
            { name: "יצירת קשר", id: "#appointment" }
          ]}
          button={{ text: "הזמן תור", href: "/booking" }}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="יופי קוסמטיקה וזה"
          description="חווה טיפולי יופי פרימיום ומותאמים אישית. גלה את הקולקציה המקורטת שלנו של מוצרי טיפול עור יוקרתיים ודברי קוסמטיקה, המעוצבים בקולחין לשיפור הגמל הטבעי שלך."
          background={{ variant: "radial-gradient" }}
          tag="יופי פרימיום"
          tagIcon={Sparkles}
          buttons={[
            { text: "הזמן עכשיו", href: "/booking" },
            { text: "בחן גלריה", href: "#gallery" }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/flat-lay-frame-with-facial-beauty-products_23-2148299559.jpg"
          imageAlt="אוסף קוסמטיקה יוקרתית"
          mediaAnimation="slide-up"
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="יעדך בטיפול היופי"
          description="בסטודיו הגמל רדיאנס, אנחנו מאמינים שכל לקוח ראוי להתעדינות אישית ומוצרים פרימיום. צוות מומחי הטיפול היפים המסומך שלנו משלב טכניקות מסורתיות עם טיפולים חדישים להביא תוצאות חריגות. מייעוץ לטיפול עור להנחת איפור, אנחנו מתחייבים לעזור לך להראות ולהרגיש הטוב ביותר."
          tag="אודותינו"
          buttons={[
            { text: "למד עוד", href: "#services" }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/beautician-styling-clients-hair_107420-94677.jpg?_wi=1"
          imageAlt="פנים סטודיו הגמל רדיאנס"
          useInvertedBackground={false}
        />
      </div>

      <div id="gallery" data-section="gallery">
        <ProductCardThree
          title="קולקציית פרימיום שלנו"
          description="קוסמטיקה יוקרתית ומוצרי טיפול עור מקורטים עבור חובבי יופי מעוניינים"
          products={[
            {
              id: "1",              name: "Radiance Foundation Pro",              price: "$48.00",              imageSrc: "http://img.b2bpic.net/free-photo/arrangement-with-foundation-bottle-plant_23-2149030339.jpg",              imageAlt: "Radiance Foundation Pro",              initialQuantity: 1
            },
            {
              id: "2",              name: "Glow Boost Facial Serum",              price: "$65.00",              imageSrc: "http://img.b2bpic.net/free-photo/healthy-jojoba-oil-arrangement_23-2149047719.jpg",              imageAlt: "Glow Boost Facial Serum",              initialQuantity: 1
            },
            {
              id: "3",              name: "Velvet Matte Lipstick",              price: "$32.00",              imageSrc: "http://img.b2bpic.net/free-photo/top-view-lipsticks-red-silk_23-2148978202.jpg",              imageAlt: "Velvet Matte Lipstick",              initialQuantity: 1
            },
            {
              id: "4",              name: "Hydra Luxe Face Mask",              price: "$52.00",              imageSrc: "http://img.b2bpic.net/free-photo/woman-with-blue-heart-shape-face_633478-2552.jpg",              imageAlt: "Hydra Luxe Face Mask",              initialQuantity: 1
            }
          ]}
          gridVariant="two-columns-alternating-heights"
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureBento
          title="השירותים החתומים שלנו"
          description="גלה טיפולי יופי משנים שעשויים לשפר את הגמל הטבעי שלך"
          tag="שירותים"
          tagIcon={Star}
          features={[
            {
              title: "ניתוח עור ופנייה",              description: "הערכת עור מקצועית עם המלצות מוצר מותאמות אישית",              bentoComponent: "icon-info-cards",              items: [
                { icon: Zap, label: "תוצאות מיידיות", value: "זוהר גלוי ב 24 שעות" },
                { icon: Shield, label: "בטוח וטבעי", value: "בדוק על ידי דרמטולוג" }
              ]
            },
            {
              title: "הנחת איפור",              description: "ארטיזריית איפור של אומן לכל אירוע, מחתונה לנוסח יומיומי",              bentoComponent: "reveal-icon",              icon: Sparkles
            },
            {
              title: "פנים פרימיום",              description: "טיפולי פנים יוקרתיים תוך שימוש בטכנולוגיית טיפול עור ברמה גבוהה",              bentoComponent: "3d-stack-cards",              items: [
                { icon: Droplet, title: "הידרציה", subtitle: "לחות עמוקה", detail: "טיפול הידרציה אינטנסיבי" },
                { icon: Sun, title: "הבהרה", subtitle: "זוהר זוהר", detail: "תרפיה משפרת זוהר" },
                { icon: Heart, title: "נגד הזקנה", subtitle: "חידוש", detail: "טרפיה פנים מעודכנת" }
              ]
            },
            {
              title: "טיפולי יופי",              description: "עיצוב גבה, שיפור ריסים, וטיפולי יופי מתמחים",              bentoComponent: "marquee",              centerIcon: Heart,
              variant: "text",              texts: ["עיצוב גבה", "הרחבת ריסים", "ציור ציפורניים", "הדרכת יופי"]
            }
          ]}
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="appointment" data-section="appointment">
        <ContactSplit
          tag="לוח זמנים"
          tagIcon={Calendar}
          title="הזמן את מושב היופי שלך"
          description="שמור על התור שלך עם מומחי היופי שלנו. בחר את השירות המועדף שלך וזמן כניסה. הצוות שלנו יאשר את ההזמנה שלך תוך 24 שעות."
          background={{ variant: "cell-wave" }}
          useInvertedBackground={true}
          imageSrc="http://img.b2bpic.net/free-photo/beautician-styling-clients-hair_107420-94677.jpg?_wi=2"
          imageAlt="הזמן את התור שלך"
          mediaAnimation="slide-up"
          mediaPosition="right"
          inputPlaceholder="הכנס את הדוא&quot;ל שלך"
          buttonText="תור לוח זמנים"
          termsText="אנחנו מכבדים את הפרטיות שלך. פרטי הפגישה שלך יישמרו בסודיות ויהיו בשימוש רק לצורך לוח זמנים."
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",              name: "שרה ג'ונסון",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-studio-portrait-smiling-blonde-female-pink-jacket_613910-12467.jpg",              imageAlt: "שרה ג'ונסון"
            },
            {
              id: "2",              name: "אמילי דייוויס",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-middle-aged-businesswoman_23-2148204386.jpg",              imageAlt: "אמילי דייוויס"
            },
            {
              id: "3",              name: "ג'סיקה מרטינז",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-business-woman_158595-975.jpg",              imageAlt: "ג'סיקה מרטינז"
            },
            {
              id: "4",              name: "אמנדה וילסון",              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-corporate-woman-looks-dreamy-smiles-stands-outside-street-leans-her-head-hands_1258-193991.jpg",              imageAlt: "אמנדה וילסון"
            }
          ]}
          cardTitle="יותר מ 2,000 לקוחות שמחים סומכים על סטודיו הגמל רדיאנס"
          cardTag="ראה מה הם אומרים"
          cardTagIcon={Heart}
          cardAnimation="blur-reveal"
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Radiance Beauty"
          leftLink={{ text: "מדיניות פרטיות", href: "#" }}
          rightLink={{ text: "תנאים ותביעות", href: "#" }}
        />
      </div>
    </ThemeProvider>
  );
}