"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroLogo from "@/components/sections/hero/HeroLogo";
import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
import SplitAbout from "@/components/sections/about/SplitAbout";
import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
import TeamCardFive from "@/components/sections/team/TeamCardFive";
import ContactText from "@/components/sections/contact/ContactText";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import { Star } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="mediumLarge"
      background="noise"
      cardStyle="inset"
      primaryButtonStyle="flat"
      secondaryButtonStyle="layered"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="THE BARBERSHOP"
          navItems={[
            { name: "אודות", id: "about" },
            { name: "שירותים", id: "features" },
            { name: "הצוות", id: "team" },
            { name: "ביקורות", id: "testimonials" },
            { name: "יצירת קשר", id: "contact" }
          ]}
          button={{
            text: "קבע תור עכשיו",            href: "https://wa.me/972554557689"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo
          logoText="מספרת גברים ברמה אחרת"
          description="תספורות מדויקות, יחס אישי וחוויית פרימיום — יוצאים חדים כל פעם מחדש. קביעת תור מהירה — מקומות מתמלאים כל יום"
          imageSrc="http://img.b2bpic.net/free-photo/handsome-hipster-bearded-male-sitting-armchair-barber-shop-while-hairdresser-shaves-his-beard-with-dangerous-razor_613910-18437.jpg"
          imageAlt="Premium barbershop interior"
          buttons={[
            { text: "קבע תור עכשיו", href: "https://wa.me/972554557689" },
            { text: "WhatsApp", href: "https://wa.me/972554557689" },
            { text: "התקשר: 0554557689", href: "tel:0554557689" }
          ]}
          buttonAnimation="slide-up"
          showDimOverlay={true}
        />
      </div>

      <div id="trust" data-section="trust">
        <MetricCardTwo
          title="מדוע לבחור בנו"
          description="מאות לקוחות מרוצים חוזרים כל חודש"
          metrics={[
            { id: "rating", value: "⭐⭐⭐⭐⭐", description: "מאות לקוחות מרוצים" },
            { id: "location", value: "📍", description: "רמת גן" },
            { id: "speed", value: "⏱", description: "שירות מהיר ומדויק" },
            { id: "personal", value: "💬", description: "יחס אישי לכל לקוח" }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="about" data-section="about">
        <SplitAbout
          title="לא עוד מספרה. חוויה."
          description="מספרה בהשראת שנות ה-20 עם ירידה לפרטים הקטנים. צוות מקצועי שמקשיב, מתאים ומדייק — עד שאתה מרוצה בול. אצלנו לא רק מסתפרים — יוצאים עם ביטחון."
          imageSrc="http://img.b2bpic.net/free-photo/man-with-beard-hairdresser-with-client-man-with-comb-scissors_1157-43546.jpg"
          imageAlt="Luxury vintage barber chair"
          mediaAnimation="blur-reveal"
          imagePosition="right"
          textboxLayout="default"
          useInvertedBackground={false}
          bulletPoints={[
            {
              title: "דיוק מטורף",              description: "כל תספורה מעוצבת בזהירות עם תשומת לב לפרטים הקטנים"
            },
            {
              title: "חוויה מלאה",              description: "קפה, מוזיקה ואווירה מדויקת לחוויה זוכרת"
            },
            {
              title: "יחס אישי",              description: "אנו קשובים לכל צורך וההתאמה מושלמת"
            }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentySeven
          title="למה אנחנו שונים"
          description="שירותים מקצועיים בתקן בינלאומי"
          gridVariant="two-columns-alternating-heights"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          features={[
            {
              id: "precision",              title: "דיוק מטורף",              descriptions: [
                "התאמה אישית לכל סוג שיער וסגנון",                "כל תספורה מעוצבת עם דיוק מיוחד"
              ],
              imageSrc: "http://img.b2bpic.net/free-photo/female-hairdresser-arranging-her-tools_23-2150771258.jpg"
            },
            {
              id: "experience",              title: "חוויה מלאה",              descriptions: [
                "קפה, מוזיקה ואווירה מדויקת",                "כל ביקור הוא חוויה לא רק תספורת"
              ],
              imageSrc: "http://img.b2bpic.net/free-photo/pov-tourist-waves-videocall_482257-76727.jpg"
            },
            {
              id: "personal",              title: "יחס אישי",              descriptions: [
                "תקשורת תוך כדי — עד שהתוצאה מושלמת",                "אנו קשובים לכל דרישה והערה שלך"
              ],
              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-senior-man-getting-groomed_23-2149220555.jpg"
            },
            {
              id: "professional",              title: "מקצוענות",              descriptions: [
                "צוות מנוסה עם סטנדרט גבוה",                "שנים של ניסיון וקידום מקצועי מתמיד"
              ],
              imageSrc: "http://img.b2bpic.net/free-photo/mid-section-view-barber-s-hand-with-shaving-brush_23-2147839815.jpg"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="מה הלקוחות שלנו אומרים"
          description="מאות לקוחות חוזרים כל חודש כי הם יודעים שהם יצאו מבוהקים"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          testimonials={[
            {
              id: "1",              name: "דוד כהן",              handle: "לקוח רגיל",              testimonial: "יצאתי מבסוט כל פעם מחדש — הפך למקום הקבוע שלי",              imageSrc: "http://img.b2bpic.net/free-photo/young-male-doing-selfcare-routine_23-2149291830.jpg",              icon: Star
            },
            {
              id: "2",              name: "ישראל לוי",              handle: "לקוח רגיל",              testimonial: "תספורת 10/10, שירות ברמה הכי גבוהה שיש",              imageSrc: "http://img.b2bpic.net/free-photo/man-getting-his-hair-cut-barber-shop4_23-2149186459.jpg",              icon: Star
            },
            {
              id: "3",              name: "רון דרור",              handle: "לקוח רגיל",              testimonial: "מקום מטורף עם אווירה אש ויחס אישי",              imageSrc: "http://img.b2bpic.net/free-photo/women-kissing-dog-close-up_23-2148977446.jpg",              icon: Star
            },
            {
              id: "4",              name: "אריק ממן",              handle: "לקוח רגיל",              testimonial: "הכי מדויק בארץ, תמיד יוצא מושלם",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-handsome-man-holding-her-girlfriend-s-hand_23-2147891265.jpg",              icon: Star
            }
          ]}
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardFive
          title="צוות ספרים מקצועי"
          description="צוות ספרים מנוסה עם ניסיון והתאמה אישית לכל לקוח"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          team={[
            {
              id: "ofir",              name: "אופיר",              role: "ספר ראשי",              imageSrc: "http://img.b2bpic.net/free-photo/attractive-barber-shaving-hair-client_23-2147778750.jpg",              imageAlt: "Ofir - Head Barber"
            },
            {
              id: "yuval",              name: "יובל",              role: "ספר מנוסה",              imageSrc: "http://img.b2bpic.net/free-photo/female-doctor-white-uniform-collecting-her-ponytail_114579-14346.jpg",              imageAlt: "Yuval - Expert Barber"
            },
            {
              id: "amir",              name: "אמיר",              role: "ספר מקצועי",              imageSrc: "http://img.b2bpic.net/free-photo/male-chef-sharpening-his-knives_23-2148763170.jpg",              imageAlt: "Amir - Professional Barber"
            }
          ]}
        />
      </div>

      <div id="process" data-section="process">
        <FeatureCardTwentySeven
          title="איך זה עובד"
          description="תהליך קל וישיר לקביעת התור שלך"
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          features={[
            {
              id: "step1",              title: "1. קובעים תור בלחיצה",              descriptions: [
                "בחר זמן מתאים לך",                "הזמנה מידית דרך הטלפון או WhatsApp"
              ]
            },
            {
              id: "step2",              title: "2. מגיעים ומקבלים ייעוץ קצר",              descriptions: [
                "קבלה חמה וברוכה בביקור",                "דיון קצר על הסגנון הרצוי"
              ]
            },
            {
              id: "step3",              title: "3. תספורת מדויקת עם יחס אישי",              descriptions: [
                "עבודה מדוקדקת וקשמנית",                "תקשורת מלאה לאורך כל הדרך"
              ]
            },
            {
              id: "step4",              title: "4. יוצאים חדים 🔥",              descriptions: [
                "תוצאה מושלמת שמוציאה ביטחון",                "הערות סיום וטיפוח לשיער בבית"
              ]
            }
          ]}
        />
      </div>

      <div id="cta-strong" data-section="cta-strong">
        <ContactText
          text="מוכן להיראות ברמה אחרת? תן לנו לדאוג ללוק שלך — אתה רק קובע תור"
          animationType="entrance-slide"
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
          buttons={[
            { text: "קבע תור עכשיו", href: "https://wa.me/972554557689" },
            { text: "WhatsApp", href: "https://wa.me/972554557689" },
            { text: "התקשר", href: "tel:0554557689" }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="http://img.b2bpic.net/free-photo/handsome-hipster-bearded-male-sitting-armchair-barber-shop-while-hairdresser-shaves-his-beard-with-dangerous-razor_613910-18437.jpg"
          imageAlt="Premium barbershop"
          logoText="THE BARBERSHOP"
          copyrightText="© 2026 THE BARBERSHOP | כל הזכויות שמורות"
          columns={[
            {
              title: "שירותים",              items: [
                { label: "תספורות", href: "#features" },
                { label: "עיצוב זקן", href: "#features" },
                { label: "ספא ספרים", href: "#features" }
              ]
            },
            {
              title: "קישורים",              items: [
                { label: "אודות", href: "#about" },
                { label: "הצוות", href: "#team" },
                { label: "ביקורות", href: "#testimonials" }
              ]
            },
            {
              title: "יצירת קשר",              items: [
                { label: "טלפון: 0554557689", href: "tel:0554557689" },
                { label: "WhatsApp", href: "https://wa.me/972554557689" },
                { label: "כתובת: רח׳ מנחם בגין 14, רמת גן", href: "#" }
              ]
            },
            {
              title: "שעות פתיחה",              items: [
                { label: "ראשון-חמישי: 9:00-19:00", href: "#" },
                { label: "שישי: 9:00-13:00", href: "#" },
                { label: "שבת: סגור", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}