"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import TextAbout from '@/components/sections/about/TextAbout';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Instagram, Phone, Mail, MapPin, Clock } from "lucide-react";

export default function VisitPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="medium"
      sizing="mediumLarge"
      background="circleGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "/" },
            { name: "Shop", id: "/shop" },
            { name: "Sell With Us", id: "/sell-with-us" },
            { name: "Visit", id: "/visit" },
            { name: "FAQ", id: "/faq" },
            { name: "Contact", id: "/contact" }
          ]}
          brandName="La Loupe Vintage"
          bottomLeftText="San Diego, CA 92116"
          bottomRightText="619-578-2944"
        />
      </div>

      <div id="visit-intro" data-section="visit-intro">
        <TextAbout
          tag="Visit Our Shop"
          title="Come browse our curated vintage collection in the heart of Normal Heights on Adams Avenue. Open daily with street parking available."
          useInvertedBackground={false}
          buttons={[
            { text: "Get Directions", href: "https://maps.google.com?q=3337+Adams+Avenue,+San+Diego,+CA+92116" },
            { text: "Call Ahead", href: "tel:619-578-2944" }
          ]}
        />
      </div>

      <div id="store-info" data-section="store-info">
        <FeatureBento
          title="Store Information"
          description="Everything you need to know for your visit to La Loupe Vintage."
          tag="Visit Details"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={true}
          carouselMode="buttons"
          features={[
            {
              title: "Location & Parking",              description: "3337 Adams Avenue in Normal Heights. Street and nearby lot parking available.",              bentoComponent: "orbiting-icons",              centerIcon: MapPin,
              items: [
                { icon: Clock, ring: 1 },
                { icon: Phone, ring: 2 }
              ]
            },
            {
              title: "Store Hours",              description: "Open daily 12:00 PM - 7:00 PM. Consistent hours every day of the week.",              bentoComponent: "globe"
            },
            {
              title: "Contact Info",              description: "Call us at 619-578-2944 or email info@laloupevintage.com",              bentoComponent: "globe"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Questions?"
          tagIcon={Mail}
          title="Get in Touch Before Your Visit"
          description="Have questions about specific items, sizing, or want to know what's new? Drop us a line and we'll help you make the most of your visit."
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
          imageSrc="https://img.b2bpic.net/free-photo/summer-objects_23-2147647062.jpg?_wi=1"
          mediaAnimation="slide-up"
          mediaPosition="right"
          inputPlaceholder="your.email@example.com"
          buttonText="Send Message"
          termsText="We'll get back to you within 24 hours. No spam, just vintage love."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="La Loupe Vintage"
          copyrightText="© 2025 La Loupe Vintage | Buy • Sell • Trade — Late 60s–90s Vintage"
          socialLinks={[
            { icon: Instagram, href: "https://www.instagram.com/laloupevintage/", ariaLabel: "Follow us on Instagram" },
            { icon: Phone, href: "tel:619-578-2944", ariaLabel: "Call us" },
            { icon: Mail, href: "mailto:info@laloupevintage.com", ariaLabel: "Email us" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}