"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import TextAbout from '@/components/sections/about/TextAbout';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Coffee, MapPin } from "lucide-react";
import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';

export default function CafeMadridPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="smallMedium"
      sizing="mediumSizeLargeTitles"
      background="none"
      cardStyle="gradient-bordered"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Café Madrid"
          navItems={[
            { name: "Menu", id: "features" },
            { name: "About", id: "about" },
            { name: "Community", id: "testimonials" },
            { name: "Visit", id: "contact" }
          ]}
          button={{
            text: "Find Your Spot",            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitDualMedia
          tag="Welcome to Café Madrid"
          tagIcon={Coffee}
          title="Sip the Madrid Moment"
          description="A cozy corner in the heart of the city, where coffee meets calm. Join us for quality espresso, comfortable seating, and the perfect atmosphere to work, meet friends, or simply unwind."
          mediaItems={[
            {
              imageSrc: "https://img.b2bpic.net/free-photo/attractive-young-blond-dreamy-digital-nomad-sitting-drink-coffee-cafe-urban-co-working-space-look-outside-window-smiling-dreamy-thoughtful-enjoy-break-working-project-freelance-gig-economy-concept_197531-22195.jpg",              imageAlt: "Modern café workspace with coffee"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/blurred-businessman-working-cafe_23-2147689247.jpg",              imageAlt: "Specialty latte art at Café Madrid"
            }
          ]}
          rating={5}
          ratingText="Loved by Madrid's young professionals"
          buttons={[
            {
              text: "Find Your Spot",              href: "#contact"
            }
          ]}
          background={{ variant: "plain" }}
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          tag="Our Story"
          title="More Than Coffee—It's a Meeting Place"
          useInvertedBackground="noInvert"
          buttons={[
            {
              text: "Learn More",              href: "#features"
            }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentyOne
          tag="What We Offer"
          title="Everything You Need for the Perfect Café Experience"
          description="From specialty coffee crafted by skilled baristas to comfortable seating perfect for work or socializing, we've designed every detail with you in mind."
          imageSrc="https://img.b2bpic.net/free-photo/woman-works-cafe-evening_1153-3549.jpg"
          imageAlt="Café Madrid interior ambiance"
          mediaPosition="left"
          useInvertedBackground="invertDefault"
          accordionItems={[
            {
              id: "1",              title: "Specialty Coffee & Craftsmanship",              content: "Our baristas prepare each drink with precision and passion. From single-origin espresso to creamy cappuccinos, every cup is a moment of perfection."
            },
            {
              id: "2",              title: "Comfortable Workspace",              content: "High-speed WiFi, plenty of seating, and natural lighting make it ideal for working professionals and digital nomads seeking an inspiring environment."
            },
            {
              id: "3",              title: "Community & Connection",              content: "A welcoming space where professionals network, friends meet, and tourists discover authentic Madrid vibes. Your second home awaits."
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          title="Our Impact in Madrid"
          description="Growing daily as the go-to café for quality coffee and community"
          tag="Community Metrics"
          metrics={[
            {
              id: "1",              value: "500+",              title: "Daily Visitors",              description: "Professionals and tourists choosing Café Madrid",              imageSrc: "https://img.b2bpic.net/free-photo/best-friends-are-chatting-laughing-with-tasty-snacks-terrace_8353-10306.jpg",              imageAlt: "Busy café with happy customers"
            },
            {
              id: "2",              value: "2K+",              title: "Monthly Guests",              description: "Building a vibrant community around quality coffee",              imageSrc: "https://img.b2bpic.net/free-photo/sincere-laugh-showing-picture-smartphone-casual-meeting-with-best-friends-restaurant-terrace_8353-10272.jpg",              imageAlt: "Community members enjoying café"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="What Our Community Says"
          description="Real voices from professionals and travelers who've made Café Madrid part of their Madrid experience"
          tag="Testimonials"
          testimonials={[
            {
              id: "1",              name: "Sofia Martínez",              role: "Marketing Manager",              company: "Tech Startup",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/young-smiling-woman-cafe-drinking-coffee-date-looking-camera_197531-22708.jpg",              imageAlt: "Sofia Martínez testimonial"
            },
            {
              id: "2",              name: "Carlos López",              role: "Freelance Designer",              company: "Creative Agency",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/young-beautiful-smiling-stylish-woman-coat-joyfully-looking-camera-walking-through-city-street_574295-2122.jpg",              imageAlt: "Carlos López testimonial"
            },
            {
              id: "3",              name: "Emma Thompson",              role: "Travel Blogger",              company: "Global Wanderer",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/closeup-attractive-woman-motion-with-takeaway-coffee-business-building-portrait-blonde-girl-holding-paper-cup-with-hot-drink-outdoor_158595-6701.jpg",              imageAlt: "Emma Thompson testimonial"
            },
            {
              id: "4",              name: "Miguel Fernández",              role: "Business Consultant",              company: "Independent",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/woman-standing-clean-urban-space_23-2149015676.jpg",              imageAlt: "Miguel Fernández testimonial"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          carouselMode="buttons"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Everything you need to know about visiting Café Madrid"
          tag="Help & Info"
          imageSrc="https://img.b2bpic.net/free-photo/unrecognizable-young-woman-sitting-table-cafe-working-laptop_1098-20175.jpg"
          imageAlt="Café Madrid community atmosphere"
          mediaPosition="right"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "What are your opening hours?",              content: "We're open Monday to Friday from 7:00 AM to 8:00 PM, and Saturday-Sunday from 9:00 AM to 10:00 PM. Perfect for morning coffee, lunch breaks, or evening gatherings."
            },
            {
              id: "2",              title: "Do you have WiFi for remote work?",              content: "Absolutely! High-speed WiFi is complimentary for all guests. We have ample seating, outlets, and a quiet zone for focused work sessions."
            },
            {
              id: "3",              title: "What payment methods do you accept?",              content: "We accept cash, card payments, and all major mobile payment options including Apple Pay and Google Pay. Quick and convenient for everyone."
            },
            {
              id: "4",              title: "Can I host a private event?",              content: "Yes! We offer semi-private spaces for small gatherings, team meetings, or celebrations. Contact us for details and availability."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Ready to Visit?"
          tagIcon={MapPin}
          title="Find Your Spot at Café Madrid"
          description="Located in the heart of Madrid. Drop by for a coffee, bring your laptop, or just enjoy the moment. We're waiting for you."
          buttons={[
            {
              text: "Get Directions",              href: "https://maps.google.com/?q=Café+Madrid"
            },
            {
              text: "Contact Us",              href: "mailto:info@cafemadrid.es"
            }
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="ecommerce" data-section="ecommerce">
        <ProductCatalog
            layout="section"
            products={[
                {
                    id: "1",
                    name: "Espresso",
                    price: 2.5,
                    imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
                    imageAlt: "Espresso",
                    rating: 4.8,
                    reviewCount: 120,
                    category: "Coffee",
                    onProductClick: () => {}
                },
                {
                    id: "2",
                    name: "Café Latte",
                    price: 3.5,
                    imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
                    imageAlt: "Café Latte",
                    rating: 4.7,
                    reviewCount: 95,
                    category: "Coffee",
                    onProductClick: () => {}
                },
                {
                    id: "3",
                    name: "Churros",
                    price: 4.0,
                    imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
                    imageAlt: "Churros",
                    rating: 4.9,
                    reviewCount: 150,
                    category: "Dessert",
                    onProductClick: () => {}
                }
            ]}
            searchPlaceholder="Search our menu..."
            emptyMessage="No items found"
            className="mt-10"
            gridClassName="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6"
            cardClassName="bg-white rounded-lg shadow-md overflow-hidden"
            imageClassName="w-full h-48 object-cover"
            searchClassName="mb-4"
            filterClassName="mb-4"
            toolbarClassName="mb-4"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Navigate",              items: [
                { label: "Menu", href: "#features" },
                { label: "About", href: "#about" },
                { label: "Community", href: "#testimonials" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Instagram", href: "https://instagram.com/cafemadrid" },
                { label: "Contact", href: "mailto:info@cafemadrid.es" },
                { label: "Location", href: "https://maps.google.com" }
              ]
            },
            {
              title: "Info",              items: [
                { label: "Hours", href: "#faq" },
                { label: "Privacy", href: "#" },
                { label: "Terms", href: "#" }
              ]
            }
          ]}
          bottomLeftText="© 2025 Café Madrid. All rights reserved."
          bottomRightText="Quality coffee, where Madrid meets calm."
        />
      </div>
    </ThemeProvider>
  );
}