"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Sparkles, Coffee, Skull, Mail, Zap } from "lucide-react";

export default function BlackHousePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="largeSmall"
      background="noise"
      cardStyle="outline"
      primaryButtonStyle="flat"
      secondaryButtonStyle="solid"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Black House"
          navItems={[
            { name: "Menu", id: "signature-sips" },
            { name: "About", id: "atmosphere" },
            { name: "Location", id: "https://maps.google.com" },
            { name: "Order Ahead", id: "https://www.example.com/order" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitDualMedia
          title="Black House Cafe"
          description="Halloween all year. Espresso done right. Signature lattes with names you'll remember, flaky almond croissants you'll crave, and a vibe that hits every time."
          tag="Fountain Square's Spookiest Coffee"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          background={{ variant: "plain" }}
          buttons={[
            { text: "Order Ahead", href: "https://www.example.com/order" },
            { text: "View Signature Menu", href: "#signature-sips" }
          ]}
          buttonAnimation="slide-up"
          mediaItems={[
            {
              imageSrc: "https://img.b2bpic.net/free-photo/woman-pouring-milk-into-her-coffee_1153-545.jpg",              imageAlt: "Premium espresso with perfect acidity"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/top-view-raw-vegan-rolls-hazelnuts-white-pink-flowers-grunge-purple-surface_181624-39372.jpg",              imageAlt: "Flaky almond croissant pastry"
            }
          ]}
          mediaAnimation="slide-up"
          rating={5}
          ratingText="⭐️⭐️⭐️⭐️⭐️ Local favorite • Unique menu • Barista-approved • Worth the trip"
        />
      </div>

      <div id="signature-sips" data-section="signature-sips">
        <FeatureCardOne
          title="Signature Sips"
          description="Named drinks designed to pull you out of your usual. Rotates often — check weekly specials."
          tag="Fan Favorites"
          tagIcon={Coffee}
          tagAnimation="slide-up"
          features={[
            {
              title: "You'll Never Sleep Again!",              description: "Bold, rich iced latte with perfectly pulled espresso. The name says it all.",              imageSrc: "https://img.b2bpic.net/free-photo/blue-cup-with-spicy-pumpkin-latte-wooden-board-with-sweater_501050-327.jpg",              imageAlt: "latte art specialty coffee drink photography spooky aesthetic",              button: { text: "Order Now" }
            },
            {
              title: "No You Hang Up!",              description: "Creamy smoothie blend for those who skip coffee but want the vibe. Refreshing and smooth.",              imageSrc: "https://img.b2bpic.net/free-photo/delicious-smoothie-glass-with-straw_23-2148922344.jpg",              imageAlt: "smoothie non-coffee drink colorful beverage creative",              button: { text: "Order Now" }
            },
            {
              title: "Seasonal Haunt",              description: "Limited edition rotating special. What's brewing this week? Always something new to discover.",              imageSrc: "https://img.b2bpic.net/free-photo/cold-chocolate-table_140725-6592.jpg",              imageAlt: "seasonal drink limited edition special coffee atmosphere",              button: { text: "Check This Week" }
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="fan-favorites" data-section="fan-favorites">
        <TextSplitAbout
          title="The Almond Croissant That Haunts Your Thoughts"
          description={[
            "Always on point. Flaky, rich, and gone fast. This is the pastry that built our reputation.",            "Empanadas that actually slap. Savory, satisfying, and the perfect pairing with any of our signature sips. These aren't your typical cafe pastries—they're crafted with care."
          ]}
          buttons={[
            { text: "Reserve with Order Ahead", href: "https://www.example.com/order" }
          ]}
          buttonAnimation="slide-up"
          showBorder={true}
          useInvertedBackground={false}
        />
      </div>

      <div id="atmosphere" data-section="atmosphere">
        <MetricCardEleven
          title="Fountain Square's Spookiest Coffee Ritual"
          description="If you like death and scary stuff… you found your place. Limited seating makes every visit feel exclusive—order ahead for the smoothest experience."
          tag="Atmosphere"
          tagIcon={Skull}
          tagAnimation="slide-up"
          metrics={[
            {
              id: "1",              value: "Year-Round",              title: "Halloween Aesthetic",              description: "Every day feels like October 31st",              imageSrc: "https://img.b2bpic.net/free-photo/young-attractive-woman-striped-trench-coat-happily-talking-cellphone-sitting-near-big-window-while-spending-time-modern-cafe_574295-4851.jpg?_wi=1",              imageAlt: "cafe interior dark aesthetic gothic decor cozy seating"
            },
            {
              id: "2",              value: "Limited",              title: "Cozy Seating",              description: "Tight, exclusive space—order ahead for faster pickup",              imageSrc: "https://img.b2bpic.net/free-photo/young-attractive-woman-striped-trench-coat-happily-talking-cellphone-sitting-near-big-window-while-spending-time-modern-cafe_574295-4851.jpg?_wi=2",              imageAlt: "cafe interior dark aesthetic gothic decor cozy seating"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[
            { text: "Get Directions", href: "https://maps.google.com" }
          ]}
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          title="Loved by Coffee Enthusiasts & Locals"
          description="Join hundreds of regular customers who've made Black House their second home."
          tag="Trusted Local"
          textboxLayout="default"
          useInvertedBackground={false}
          names={[
            "Coffee Lovers",            "Halloween Fans",            "Pastry Enthusiasts",            "Espresso Nerds",            "Fountain Square Community",            "Local Artists",            "Remote Workers"
          ]}
          speed={40}
          showCard={true}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSixteen
          title="What Our Customers Say"
          description="Authentic voices from people who love Black House Cafe."
          tag="Reviews"
          textboxLayout="default"
          useInvertedBackground={false}
          testimonials={[
            {
              id: "1",              name: "Maya Rodriguez",              role: "Coffee Enthusiast",              company: "Local Regular",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/woman-holding-coffee-cup-work-medium-shot_23-2149308464.jpg",              imageAlt: "professional headshot person portrait coffee enthusiast"
            },
            {
              id: "2",              name: "Jordan Smith",              role: "Designer",              company: "Fountain Square",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg",              imageAlt: "customer portrait person photo professional headshot"
            },
            {
              id: "3",              name: "Alex Chen",              role: "Espresso Connoisseur",              company: "Coffee Community",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiley-business-man_23-2148514859.jpg",              imageAlt: "professional avatar customer photo person portrait"
            },
            {
              id: "4",              name: "Sam Wilson",              role: "Pastry Lover",              company: "Local Foodie",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-bearded-man-white-shirt-jacket-posing-camera-with-broad-smile-isolated-gray_171337-629.jpg",              imageAlt: "profile picture person headshot professional photo"
            }
          ]}
          kpiItems={[
            { value: "180+", label: "Weekly Regulars" },
            { value: "96%", label: "Would Recommend" },
            { value: "5★", label: "Average Rating" }
          ]}
          animationType="slide-up"
        />
      </div>

      <div id="email-capture" data-section="email-capture">
        <ContactCTA
          tag="Join the Black List"
          tagIcon={Mail}
          tagAnimation="slide-up"
          title="Get Weekly Specials & Drink Drops"
          description="Join our mailing list for early access to new signature sips, seasonal specials, and exclusive event nights. Plus: 10% off your first order ahead."
          buttons={[
            { text: "Sign Up Now", href: "https://www.example.com/signup" }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "plain" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="final-cta" data-section="final-cta">
        <ContactCTA
          tag="Ready to Join?"
          tagIcon={Zap}
          tagAnimation="slide-up"
          title="Skip the Line. Pick Up in Minutes."
          description="Order ahead now and save time. Most pickups ready in 10–15 minutes. Limited seating means order ahead is your best friend."
          buttons={[
            { text: "Order Ahead Now", href: "https://www.example.com/order" },
            { text: "View Full Menu", href: "#signature-sips" }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "plain" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Black House"
          columns={[
            {
              title: "Menu",              items: [
                { label: "Signature Sips", href: "#signature-sips" },
                { label: "Pastries", href: "#fan-favorites" },
                { label: "Savory", href: "#fan-favorites" }
              ]
            },
            {
              title: "Visit Us",              items: [
                { label: "Location & Hours", href: "https://maps.google.com" },
                { label: "Order Ahead", href: "https://www.example.com/order" },
                { label: "Gift Cards", href: "https://www.example.com/gift" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Instagram", href: "https://instagram.com" },
                { label: "Facebook", href: "https://facebook.com" },
                { label: "TikTok", href: "https://tiktok.com" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#atmosphere" },
                { label: "Contact", href: "https://www.example.com/contact" },
                { label: "Careers", href: "https://www.example.com/careers" }
              ]
            }
          ]}
          copyrightText="© 2025 Black House Cafe | Halloween all year."
        />
      </div>
    </ThemeProvider>
  );
}