"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import FeatureProcessSteps from '@/components/sections/feature/FeatureProcessSteps';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Coffee, Sparkles, Flame, Heart, MessageCircle } from "lucide-react";

export default function BrewHavenPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="medium"
      sizing="medium"
      background="floatingGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Brew Haven"
          navItems={[
            { name: "About", id: "about" },
            { name: "Menu", id: "products" },
            { name: "How We Work", id: "feature" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Reserve Table",            href: "#contact"
          }}
          className="rounded-full backdrop-blur-md bg-opacity-90"
          navItemClassName="text-sm font-medium transition-colors"
          buttonClassName="px-6 py-2 rounded-full font-semibold"
          buttonTextClassName="font-bold"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardRotatedCarousel
          title="Craft Coffee, Crafted With Care"
          description="Experience the finest specialty coffee in an intimate, welcoming space. From bean selection to the perfect pour, every detail matters."
          tag="Specialty Coffee"
          tagIcon={Coffee}
          buttons={[
            { text: "Explore Menu", href: "#products" },
            { text: "Visit Us", href: "#contact" }
          ]}
          carouselItems={[
            {
              id: "1",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-cup-coffee-with-wooden-background_23-2148251640.jpg",              imageAlt: "Fresh espresso shot"
            },
            {
              id: "2",              imageSrc: "https://img.b2bpic.net/free-photo/cup-coffee-with-white-saucer_114579-16848.jpg",              imageAlt: "Smooth cappuccino"
            },
            {
              id: "3",              imageSrc: "https://img.b2bpic.net/free-photo/yellow-cup-with-beverage-near-coffee-beans_23-2148180237.jpg",              imageAlt: "Specialty latte"
            },
            {
              id: "4",              imageSrc: "https://img.b2bpic.net/free-photo/coffee-cup_74190-2687.jpg",              imageAlt: "Barista crafting espresso"
            },
            {
              id: "5",              imageSrc: "https://img.b2bpic.net/free-photo/top-view-cup-coffee-half-empty-inside-black-cup-brown-wooden-table-drink-coffee-liquid_140725-27964.jpg",              imageAlt: "Latte art creation"
            },
            {
              id: "6",              imageSrc: "https://img.b2bpic.net/free-photo/closeup-shot-cup-coffee-white-saucer-with-metal-spoon_181624-27779.jpg",              imageAlt: "Premium coffee beans"
            }
          ]}
          autoPlay={true}
          autoPlayInterval={4000}
          className="w-full"
          containerClassName="relative"
          titleClassName="text-4xl md:text-5xl font-bold"
          descriptionClassName="text-base md:text-lg text-opacity-90"
          buttonClassName="px-6 py-2 rounded-full font-semibold"
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "Where passion for" },
            {
              type: "image",              src: "https://img.b2bpic.net/free-photo/empty-wood-chair-restaurant_1339-5949.jpg",              alt: "Our cozy cafe"
            },
            { type: "text", content: "meets exceptional quality" }
          ]}
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Learn Our Story", href: "#feature" }
          ]}
          className="w-full"
          containerClassName="py-12 md:py-20"
          headingClassName="text-3xl md:text-4xl font-bold"
          imageWrapperClassName="mx-2"
          imageClassName="rounded-lg shadow-lg"
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardFour
          title="Our Signature Menu"
          description="Hand-crafted beverages made with premium, ethically-sourced coffee beans"
          tag="Popular Drinks"
          tagIcon={Sparkles}
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          products={[
            {
              id: "1",              name: "Classic Espresso",              price: "$3.50",              variant: "Rich, Bold, Single Shot",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-aromatic-coffee-plate_23-2148349623.jpg",              imageAlt: "Espresso shot"
            },
            {
              id: "2",              name: "Velvety Cappuccino",              price: "$4.75",              variant: "Creamy, Balanced, Milk Foam",              imageSrc: "https://img.b2bpic.net/free-photo/double-espresso-coffee-mug-with-cinnamon-sticks-coffee-beans-wooden-board_181624-57625.jpg",              imageAlt: "Cappuccino with latte art"
            },
            {
              id: "3",              name: "Smooth Americano",              price: "$3.75",              variant: "Mellow, Aromatic, Water-Diluted",              imageSrc: "https://img.b2bpic.net/free-photo/delicious-quality-coffee-cup_23-2150691441.jpg",              imageAlt: "Americano in ceramic cup"
            }
          ]}
          className="w-full"
          containerClassName="py-12 md:py-20"
        />
      </div>

      <div id="feature" data-section="feature">
        <FeatureProcessSteps
          title="Our Coffee Craftsmanship"
          description="From sourcing premium beans to the perfect cup, every step in our process is deliberate, thoughtful, and designed to bring out the best flavors."
          tag="The Art of Coffee"
          tagIcon={Flame}
          steps={[
            {
              number: "01",              title: "Premium Bean Selection",              description: "We source ethically-grown, single-origin coffee beans from sustainable farms around the world, selecting only the highest quality lots.",              tag: "Foundation"
            },
            {
              number: "02",              title: "Expert Roasting",              description: "Our master roasters carefully develop each batch to perfection, bringing out unique flavor profiles and ensuring consistent quality with every roast.",              tag: "Precision"
            },
            {
              number: "03",              title: "Fresh Grinding & Brewing",              description: "Beans are ground moments before brewing to preserve aroma and flavor. Each cup is crafted by our trained baristas with meticulous attention to detail.",              tag: "Craft"
            }
          ]}
          useInvertedBackground="noInvert"
          className="w-full"
          containerClassName="py-12 md:py-20"
          titleClassName="text-3xl md:text-4xl font-bold"
          descriptionClassName="text-base md:text-lg"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          title="Our Impact"
          description="Building a thriving community of coffee enthusiasts and supporting sustainable practices"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          metrics={[
            {
              id: "1",              value: "5,000+",              title: "Daily Cups Served",              description: "Crafted with care every single day",              imageSrc: "https://img.b2bpic.net/free-photo/group-friends-ordering-restaurant_23-2150520068.jpg",              imageAlt: "Busy cafe with customers"
            },
            {
              id: "2",              value: "15 Years",              title: "Of Excellence",              description: "Perfecting our craft and serving our community",              imageSrc: "https://img.b2bpic.net/free-photo/tattooed-barista-hand-holds-raw-green-coffee-beans-from-white-plastic-basket-cotton-bags-europalet-warehouse_346278-886.jpg",              imageAlt: "Premium coffee quality"
            }
          ]}
          className="w-full"
          containerClassName="py-12 md:py-20"
          titleClassName="text-3xl md:text-4xl font-bold"
          descriptionClassName="text-base md:text-lg"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          cardTitle="Loved by thousands of coffee enthusiasts around the world"
          cardTag="Customer Love"
          cardTagIcon={Heart}
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell",              imageSrc: "https://img.b2bpic.net/free-photo/confident-middle-aged-businesswoman_1262-20882.jpg",              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",              name: "James Rodriguez",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "James Rodriguez"
            },
            {
              id: "3",              name: "Emma Chen",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-businessman-with-tie_1098-2867.jpg",              imageAlt: "Emma Chen"
            },
            {
              id: "4",              name: "Michael Thompson",              imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-woman-work-portrait_23-2149304144.jpg",              imageAlt: "Michael Thompson"
            },
            {
              id: "5",              name: "Lisa Anderson",              imageSrc: "https://img.b2bpic.net/free-photo/man-portrait-posing-loft-modern-space_158595-5367.jpg",              imageAlt: "Lisa Anderson"
            }
          ]}
          className="w-full"
          containerClassName="py-12 md:py-20"
          cardTitleClassName="text-2xl md:text-3xl font-bold"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Find answers to common questions about our coffee, hours, and services"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "What makes your coffee special?",              content: "We source single-origin, ethically-grown beans from premium farms worldwide. Each batch is roasted in-house to perfection, and every cup is crafted fresh by our trained baristas using precise brewing techniques."
            },
            {
              id: "2",              title: "Do you offer alternative milks?",              content: "Yes! We offer almond milk, oat milk, coconut milk, and soy milk for all our espresso-based drinks. Ask our baristas for recommendations based on your preference."
            },
            {
              id: "3",              title: "Can I book a private event?",              content: "Absolutely. We host private tastings, team meetings, and special events. Please contact us at events@brewhaven.com or call our location directly to discuss your needs."
            },
            {
              id: "4",              title: "Do you sell whole beans to take home?",              content: "Yes, we offer whole bean coffee in 1lb and 5lb bags. Our selection rotates based on seasonal roasts and single-origin offerings. Staff can help you find the perfect beans for your taste preferences."
            },
            {
              id: "5",              title: "What are your operating hours?",              content: "We're open Monday-Friday 6:30 AM - 7:00 PM, Saturday 8:00 AM - 6:00 PM, and Sunday 8:00 AM - 5:00 PM. We're closed on major holidays."
            },
            {
              id: "6",              title: "Do you offer training or coffee workshops?",              content: "Yes! We offer barista training, home brewing courses, and coffee tasting workshops. Check our website for upcoming dates or contact us to schedule a private session."
            }
          ]}
          className="w-full"
          containerClassName="py-12 md:py-20"
          titleClassName="text-3xl md:text-4xl font-bold"
          descriptionClassName="text-base md:text-lg"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Get In Touch"
          ctaDescription="Have questions? Want to reserve a table or learn about our private events? Reach out to our team."
          ctaButton={{
            text: "Send Message",            href: "mailto:hello@brewhaven.com"
          }}
          ctaIcon={MessageCircle}
          useInvertedBackground="noInvert"
          animationType="slide-up"
          accordionAnimationType="smooth"
          faqs={[
            {
              id: "1",              title: "What's the best way to contact you?",              content: "You can reach us via email at hello@brewhaven.com, call us at (555) 123-4567, or visit us in person at 123 Main Street. We're also responsive on social media @brewhaven."
            },
            {
              id: "2",              title: "How quickly do you respond to messages?",              content: "We aim to respond to all messages within 2 business hours during operating hours. For after-hours inquiries, we'll get back to you the next morning."
            },
            {
              id: "3",              title: "Can I gift cards to friends?",              content: "Absolutely! Gift cards are available in denominations from $10 to $100. Purchase them in-store or contact us for digital delivery options."
            }
          ]}
          className="w-full"
          containerClassName="py-12 md:py-20"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-photo/table-set-dinning-table_1339-3441.jpg"
          imageAlt="Brew Haven storefront"
          logoText="Brew Haven"
          copyrightText="© 2025 Brew Haven. All rights reserved."
          columns={[
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Our Story", href: "#feature" },
                { label: "Careers", href: "#" }
              ]
            },
            {
              title: "Menu",              items: [
                { label: "Coffee", href: "#products" },
                { label: "Pastries", href: "#products" },
                { label: "Drinks", href: "#products" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Instagram", href: "https://instagram.com" },
                { label: "Contact Us", href: "#contact" },
                { label: "Gift Cards", href: "#contact" }
              ]
            }
          ]}
          className="w-full"
          containerClassName="relative"
          mediaWrapperClassName="h-64 md:h-96 overflow-hidden"
          logoTextClassName="text-2xl md:text-3xl font-bold"
          columnsClassName="grid grid-cols-1 md:grid-cols-3 gap-8"
          columnTitleClassName="font-bold text-lg mb-4"
        />
      </div>
    </ThemeProvider>
  );
}