"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Castle, Flame, Heart, Leaf, Quote, UtensilsCrossed, X } from "lucide-react";
import { useState } from "react";

export default function KazkovyyDimPage() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [formData, setFormData] = useState({
    name: "",    email: "",    phone: "",    eventDate: "",    guestCount: "",    message: ""
  });

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log("Booking form submitted:", formData);
    setFormData({
      name: "",      email: "",      phone: "",      eventDate: "",      guestCount: "",      message: ""
    });
    setIsModalOpen(false);
  };

  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="small"
      sizing="mediumLargeSizeMediumTitles"
      background="floatingGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Kazkovyy Dim"
          navItems={[
            { name: "Philosophy", id: "philosophy" },
            { name: "Menu", id: "menu" },
            { name: "Banquets", id: "banquets" },
            { name: "Delivery", id: "delivery" },
            { name: "Blog", id: "/blog" },
            { name: "Shop", id: "/shop" },
            { name: "Contacts", id: "contacts" }
          ]}
          button={{
            text: "Book a Table",            onClick: () => setIsModalOpen(true)
          }}
          navItemClassName="text-sm font-medium hover:text-primary-cta transition-colors"
          buttonClassName="bg-primary-cta hover:bg-accent text-white px-6 py-2 rounded-soft transition-all"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitDualMedia
          tag="Welcome to Kazkovyy Dim"
          tagIcon={Flame}
          title="Authentic Ukrainian Banquets & Family Dining"
          description="Experience warmth, tradition, and ethno-cultural heritage in our beautifully designed banquet complex. From intimate family gatherings to grand celebrations, we create unforgettable moments around the fire."
          background={{ variant: "plain" }}
          mediaItems={[
            {
              imageSrc: "https://img.b2bpic.net/free-photo/full-shot-woman-getting-warmer-by-fire_23-2149172517.jpg",              imageAlt: "Warm fireplace in traditional Ukrainian interior"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/traditional-house-interior-design_23-2151050931.jpg",              imageAlt: "Authentic wooden interior with ethno decoration"
            }
          ]}
          rating={5}
          ratingText="Loved by families and event organizers"
          buttons={[{
            text: "Book a Table",            onClick: () => setIsModalOpen(true)
          }]}
          tagAnimation="slide-up"
          buttonAnimation="slide-up"
          mediaAnimation="slide-up"
          className="py-20 lg:py-32"
          containerClassName="max-w-7xl"
          titleClassName="text-4xl md:text-6xl font-bold text-foreground"
          descriptionClassName="text-lg text-foreground/80"
          buttonClassName="bg-primary-cta hover:bg-accent text-white"
          mediaWrapperClassName="rounded-soft overflow-hidden"
        />
      </div>

      <div id="philosophy" data-section="philosophy">
        <TestimonialAboutCard
          tag="Our Heritage"
          tagIcon={Leaf}
          title="A Family Tradition of Ukrainian Hospitality"
          description="Kazkovyy Dim embodies the essence of authentic Ukrainian culture, warmth, and familial bonds."
          subdescription="Every detail from custom-designed interiors to carefully curated menus reflects our commitment to preserving ethno-cultural traditions."
          icon={Heart}
          imageSrc="https://img.b2bpic.net/free-photo/traditional-house-interior-design_23-2151050931.jpg"
          imageAlt="Ukrainian traditional interior with wooden elements and ethno decoration"
          mediaAnimation="slide-up"
          useInvertedBackground={true}
          tagAnimation="slide-up"
          className="py-16 lg:py-24"
          containerClassName="max-w-7xl"
          titleClassName="text-4xl md:text-5xl font-bold text-foreground"
          descriptionClassName="text-lg text-foreground/80"
          iconClassName="w-8 h-8 text-primary-cta"
        />
      </div>

      <div id="banquets" data-section="banquets">
        <FeatureCardNineteen
          tag="Banquet Spaces"
          tagIcon={Castle}
          title="Discover Our Versatile Venues"
          description="Each space is uniquely designed to celebrate your special moments with authentic charm and comfort."
          textboxLayout="default"
          useInvertedBackground={false}
          tagAnimation="slide-up"
          buttonAnimation="slide-up"
          buttons={[{
            text: "Inquire About Events",            onClick: () => setIsModalOpen(true)
          }]}
          features={[
            {
              id: 1,
              tag: "Grand Hall",              title: "Main Banquet Hall",              subtitle: "80+ Guests",              description: "Our flagship venue features a stage for performances, a magnificent fireplace, and elegant decorations that blend tradition with contemporary comfort. Perfect for weddings, anniversaries, and large celebrations.",              imageSrc: "https://img.b2bpic.net/free-photo/stylish-interior-modern-luxurious-banquet-hall-decorated-white-illuminated-by-crystal-chandeliers-with-round-tables-served-with-plates-glasses-background-stage-performance_639032-2605.jpg",              imageAlt: "Main banquet hall with stage and fireplace"
            },
            {
              id: 2,
              tag: "Relaxation",              title: "Lounge Zone",              subtitle: "Intimate Setting",              description: "A cozy retreat with hookah lounge and terrace access. Ideal for informal gatherings, business meetings, or pre-banquet receptions where guests can unwind in comfort.",              imageSrc: "https://img.b2bpic.net/free-photo/wedding-reception-hall-with-elegant-table-setting-with-candles_181624-15206.jpg",              imageAlt: "Lounge zone with comfortable seating and hookah"
            },
            {
              id: 3,
              tag: "Exclusive",              title: "VIP Private Room",              subtitle: "Premium Experience",              description: "Intimate and luxurious, our VIP room accommodates select groups seeking privacy and personalized service. Custom menus and dedicated staff ensure an unforgettable experience.",              imageSrc: "https://img.b2bpic.net/free-photo/wedding-reception-hall-with-elegant-table-setting-with-candles_181624-9932.jpg",              imageAlt: "VIP private dining room with elegant decor"
            },
            {
              id: 4,
              tag: "Family",              title: "Kids' Room",              subtitle: "Family-Friendly",              description: "A dedicated, safe space for children with entertainment and activities. Allows parents to celebrate while children enjoy supervised, age-appropriate fun.",              imageSrc: "https://img.b2bpic.net/free-photo/beautifully-decorated-venue-interior-wedding_181624-58530.jpg",              imageAlt: "Colorful kids room with entertainment activities"
            },
            {
              id: 5,
              tag: "Spacious",              title: "Second Floor Hall",              subtitle: "Large Events",              description: "Our expansive second-floor venue provides ample space for major celebrations. Flexible layout accommodates various table arrangements and entertainment setups.",              imageSrc: "https://img.b2bpic.net/free-photo/wedding-reception-hall-with-elegant-table-setting-with-candles_181624-16776.jpg",              imageAlt: "Spacious second floor banquet hall"
            },
            {
              id: 6,
              tag: "Outdoor",              title: "Terrace",              subtitle: "Seasonal Dining",              description: "Beautiful outdoor terrace perfect for spring through autumn celebrations. Natural surroundings combined with authentic decor create magical evening events.",              imageSrc: "https://img.b2bpic.net/free-photo/classic-restaurant-witn-red-curtains-stage_140725-9392.jpg",              imageAlt: "Outdoor terrace with garden atmosphere"
            }
          ]}
          className="py-16 lg:py-24"
          containerClassName="max-w-7xl"
          textBoxTitleClassName="text-4xl md:text-5xl font-bold text-foreground"
          textBoxDescriptionClassName="text-lg text-foreground/80"
          cardTitleClassName="text-2xl font-bold text-foreground"
        />
      </div>

      <div id="menu" data-section="menu">
        <ProductCardThree
          title="Our Culinary Offerings"
          description="Explore traditional Ukrainian cuisine and modern interpretations prepared with authentic ingredients and family recipes."
          tag="Menu"
          tagIcon={UtensilsCrossed}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          animationType="slide-up"
          gridVariant="four-items-2x2-equal-grid"
          products={[
            {
              id: "1",              name: "Traditional Kitchen Menu",              price: "View PDF",              imageSrc: "https://img.b2bpic.net/free-photo/side-view-roasted-meat-pieces-wooden-board_141793-1393.jpg",              imageAlt: "Traditional Ukrainian dishes"
            },
            {
              id: "2",              name: "Bar & Beverage Selection",              price: "View PDF",              imageSrc: "https://img.b2bpic.net/free-photo/side-view-lamb-kebab-grilled-lamb-ribs-with-lettuce-tomato-greens-red-onion-grilled-corn-dried-barberry-glass-red-wine-table_141793-4982.jpg",              imageAlt: "Premium bar selections"
            },
            {
              id: "3",              name: "Wine List",              price: "View PDF",              imageSrc: "https://img.b2bpic.net/free-photo/wedding-reception-hall-with-elegant-table-setting-with-candles_181624-15206.jpg",              imageAlt: "Curated wine collection"
            },
            {
              id: "4",              name: "Takeaway Options",              price: "View PDF",              imageSrc: "https://img.b2bpic.net/free-photo/kebab-served-with-chopped-onion-piece-lemon-red-wine_140725-4164.jpg",              imageAlt: "Takeaway prepared dishes"
            }
          ]}
          className="py-16 lg:py-24"
          containerClassName="max-w-7xl"
          textBoxTitleClassName="text-4xl md:text-5xl font-bold text-foreground"
          textBoxDescriptionClassName="text-lg text-foreground/80"
        />
      </div>

      <div id="delivery" data-section="delivery">
        <ProductCardThree
          title="From the Fire Delivery Service"
          description="Experience our authentic fire-roasted meats and traditional Ukrainian dishes delivered to your doorstep."
          tag="Catering"
          tagIcon={Flame}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          products={[
            {
              id: "1",              name: "Grilled Pork Ribs",              price: "$45/kg",              imageSrc: "https://img.b2bpic.net/free-photo/side-view-roasted-meat-pieces-wooden-board_141793-1393.jpg",              imageAlt: "Fire-roasted pork ribs",              initialQuantity: 1
            },
            {
              id: "2",              name: "Smoked Chicken Feast",              price: "$38/kg",              imageSrc: "https://img.b2bpic.net/free-photo/side-view-lamb-kebab-grilled-lamb-ribs-with-lettuce-tomato-greens-red-onion-grilled-corn-dried-barberry-glass-red-wine-table_141793-4982.jpg",              imageAlt: "Smoked chicken portions",              initialQuantity: 1
            },
            {
              id: "3",              name: "Traditional Kebab Mix",              price: "$52/kg",              imageSrc: "https://img.b2bpic.net/free-photo/kebab-served-with-chopped-onion-piece-lemon-red-wine_140725-4164.jpg",              imageAlt: "Assorted fire-roasted kebabs",              initialQuantity: 1
            }
          ]}
          className="py-16 lg:py-24"
          containerClassName="max-w-7xl"
          textBoxTitleClassName="text-4xl md:text-5xl font-bold text-foreground"
          textBoxDescriptionClassName="text-lg text-foreground/80"
          buttons={[{
            text: "Order Now",            onClick: () => setIsModalOpen(true)
          }]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwo
          title="Voices of Our Guests"
          description="Hear from families and event organizers who have celebrated with us."
          tag="Testimonials"
          tagIcon={Quote}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          animationType="slide-up"
          testimonials={[
            {
              id: "1",              name: "Oksana Kovalenko",              role: "Wedding Host",              testimonial: "Kazkovyy Dim transformed our wedding dreams into reality. The authentic atmosphere, delicious food, and warmth of the staff made our day truly magical. Our guests still talk about it!",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-senior-businessman-sitting-stairs_1262-3109.jpg",              imageAlt: "Oksana Kovalenko"
            },
            {
              id: "2",              name: "Dmitri Petrov",              role: "Corporate Event Organizer",              testimonial: "The versatile spaces and professional service made our company celebration perfect. From the main hall setup to the catering, everything exceeded expectations. Highly recommended!",              imageSrc: "https://img.b2bpic.net/free-photo/black-businessman-happy-expression_1194-2533.jpg",              imageAlt: "Dmitri Petrov"
            },
            {
              id: "3",              name: "Maria Shevchenko",              role: "Family Celebration Planner",              testimonial: "Three generations celebrated our family anniversary here. The kids loved the dedicated space, adults enjoyed the relaxed lounge, and everyone appreciated the home-like comfort. Simply wonderful!",              imageSrc: "https://img.b2bpic.net/free-photo/attractive-blond-business-woman-white-shirt-eyeglasses-crossed-arms-grey-background_613910-11786.jpg",              imageAlt: "Maria Shevchenko"
            },
            {
              id: "4",              name: "Ivan Zelensky",              role: "Regular Guest",              testimonial: "We've hosted countless events here over the years. The consistency in quality, warmth, and authenticity keeps us coming back. This is where real Ukrainian hospitality lives.",              imageSrc: "https://img.b2bpic.net/free-photo/successful-senior-businessman-standing-window_1262-3120.jpg",              imageAlt: "Ivan Zelensky"
            }
          ]}
          className="py-16 lg:py-24"
          containerClassName="max-w-7xl"
          textBoxTitleClassName="text-4xl md:text-5xl font-bold text-foreground"
          textBoxDescriptionClassName="text-lg text-foreground/80"
        />
      </div>

      <div id="contacts" data-section="contacts">
        <ContactSplitForm
          title="Get in Touch With Us"
          description="Ready to celebrate your special moment at Kazkovyy Dim? Reach out to our team to discuss your event, ask questions, or make a reservation. We're here to make your gathering unforgettable."
          inputs={[
            {
              name: "name",              type: "text",              placeholder: "Your Full Name",              required: true
            },
            {
              name: "email",              type: "email",              placeholder: "your@email.com",              required: true
            },
            {
              name: "phone",              type: "tel",              placeholder: "+380 (XX) XXXX-XXXX",              required: true
            },
            {
              name: "eventDate",              type: "date",              placeholder: "Preferred Event Date",              required: false
            }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us about your event, venue preference, and any special requests...",            rows: 5,
            required: true
          }}
          useInvertedBackground={false}
          imageSrc="https://img.b2bpic.net/free-photo/christmas-interior-decorated-with-christmas-wreath-made-fir-branches-two-armchairs-genuine-animal-fur-floor-front-electric-fireplace_132075-6151.jpg"
          imageAlt="Warm gathering at Kazkovyy Dim"
          mediaAnimation="slide-up"
          mediaPosition="right"
          buttonText="Send Inquiry"
          className="py-16 lg:py-24"
          containerClassName="max-w-7xl"
          titleClassName="text-4xl md:text-5xl font-bold text-foreground"
          descriptionClassName="text-lg text-foreground/80"
          buttonClassName="bg-primary-cta hover:bg-accent text-white w-full"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-photo/young-woman-burning-fireplace-with-matchstick-home_23-2147904496.jpg"
          imageAlt="Natural wooden texture background"
          logoText="Kazkovyy Dim"
          copyrightText="© 2025 Kazkovyy Dim. All rights reserved. | Authentic Ukrainian Hospitality Since Tradition."
          columns={[
            {
              title: "Locations",              items: [
                { label: "Main Hall", href: "#banquets" },
                { label: "VIP Room", href: "#banquets" },
                { label: "Lounge Zone", href: "#banquets" },
                { label: "Terrace", href: "#banquets" }
              ]
            },
            {
              title: "Services",              items: [
                { label: "Banquet Planning", href: "#banquets" },
                { label: "Catering & Delivery", href: "#delivery" },
                { label: "Menu", href: "#menu" },
                { label: "Reservation", href: "#contacts" }
              ]
            },
            {
              title: "Contact",              items: [
                { label: "Phone: +380 (44) 123-4567", href: "tel:+380441234567" },
                { label: "Email: info@kazkovyydim.ua", href: "mailto:info@kazkovyydim.ua" },
                { label: "Hours: Daily 12:00 - 23:00", href: "#" },
                { label: "Address: Kyiv, Ukraine", href: "#" }
              ]
            }
          ]}
          className="bg-foreground text-background"
          containerClassName="max-w-7xl"
          logoTextClassName="text-2xl font-bold text-background"
          copyrightTextClassName="text-background/70 text-sm"
        />
      </div>

      {isModalOpen && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-card rounded-soft w-full max-w-md relative p-8">
            <button
              onClick={() => setIsModalOpen(false)}
              className="absolute top-4 right-4 p-2 hover:bg-background rounded-soft transition-colors"
              aria-label="Close modal"
            >
              <X className="w-6 h-6 text-foreground" />
            </button>

            <h2 className="text-2xl md:text-3xl font-bold text-foreground mb-2">Book a Table</h2>
            <p className="text-foreground/70 text-sm mb-6">Reserve your special moment at Kazkovyy Dim</p>

            <form onSubmit={handleSubmit} className="space-y-4">
              <div>
                <label htmlFor="modal-name" className="block text-sm font-medium text-foreground mb-2">
                  Full Name *
                </label>
                <input
                  id="modal-name"
                  type="text"
                  name="name"
                  placeholder="Your Full Name"
                  value={formData.name}
                  onChange={handleInputChange}
                  required
                  className="w-full px-4 py-2 rounded-soft bg-background border border-accent/20 text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta transition-colors"
                />
              </div>

              <div>
                <label htmlFor="modal-email" className="block text-sm font-medium text-foreground mb-2">
                  Email Address *
                </label>
                <input
                  id="modal-email"
                  type="email"
                  name="email"
                  placeholder="your@email.com"
                  value={formData.email}
                  onChange={handleInputChange}
                  required
                  className="w-full px-4 py-2 rounded-soft bg-background border border-accent/20 text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta transition-colors"
                />
              </div>

              <div>
                <label htmlFor="modal-phone" className="block text-sm font-medium text-foreground mb-2">
                  Phone Number *
                </label>
                <input
                  id="modal-phone"
                  type="tel"
                  name="phone"
                  placeholder="+380 (XX) XXXX-XXXX"
                  value={formData.phone}
                  onChange={handleInputChange}
                  required
                  className="w-full px-4 py-2 rounded-soft bg-background border border-accent/20 text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta transition-colors"
                />
              </div>

              <div>
                <label htmlFor="modal-date" className="block text-sm font-medium text-foreground mb-2">
                  Preferred Event Date
                </label>
                <input
                  id="modal-date"
                  type="date"
                  name="eventDate"
                  value={formData.eventDate}
                  onChange={handleInputChange}
                  className="w-full px-4 py-2 rounded-soft bg-background border border-accent/20 text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta transition-colors"
                />
              </div>

              <div>
                <label htmlFor="modal-guests" className="block text-sm font-medium text-foreground mb-2">
                  Number of Guests
                </label>
                <input
                  id="modal-guests"
                  type="number"
                  name="guestCount"
                  placeholder="Expected number of guests"
                  value={formData.guestCount}
                  onChange={handleInputChange}
                  className="w-full px-4 py-2 rounded-soft bg-background border border-accent/20 text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta transition-colors"
                />
              </div>

              <div>
                <label htmlFor="modal-message" className="block text-sm font-medium text-foreground mb-2">
                  Additional Details
                </label>
                <textarea
                  id="modal-message"
                  name="message"
                  placeholder="Tell us about your event, venue preference, and any special requests..."
                  value={formData.message}
                  onChange={handleInputChange}
                  rows={4}
                  className="w-full px-4 py-2 rounded-soft bg-background border border-accent/20 text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta transition-colors resize-none"
                />
              </div>

              <div className="flex gap-3 pt-4">
                <button
                  type="button"
                  onClick={() => setIsModalOpen(false)}
                  className="flex-1 px-4 py-2 rounded-soft bg-background border border-accent/20 text-foreground hover:bg-accent/10 transition-colors"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  className="flex-1 px-4 py-2 rounded-soft bg-primary-cta hover:bg-accent text-white font-medium transition-colors"
                >
                  Send Booking
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </ThemeProvider>
  );
}