"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import Link from "next/link";

export default function ContactPage() {
  const navItems = [
    { name: "Contact", id: "/contact" }
  ];

  const footerColumns = [
    {
      items: [
        { label: "Contact", href: "/contact" }
      ]
    },
    {
      items: [
        { label: "Instagram", href: "https://instagram.com" },
        { label: "Facebook", href: "https://facebook.com" },
        { label: "Directions", href: "https://maps.google.com" }
      ]
    }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="largeSmallSizeLargeTitles"
      background="blurBottom"
      cardStyle="soft-shadow"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          navItems={navItems}
          brandName="Ginger and Baker"
          button={{ text: "Reserve Table" }}
        />
      </div>

      <div id="what-to-expect" data-section="what-to-expect">
        <FaqSplitMedia
          title="Designed for Different Moments"
          description="Each of our distinct spaces offers a unique ambiance. Find the perfect fit for your visit."
          faqs={[
            {
              id: "quick-coffee",              title: "Quick Coffee & Bakery",              content: "Our bustling front counter and bakery offer a delightful selection for those on the go. Grab a fresh pastry, a gourmet coffee, or a handmade pie to enjoy in our cozy nooks or to take with you."
            },
            {
              id: "casual-lunch",              title: "Casual Lunch",              content: "The main floor dining area provides a relaxed atmosphere for a casual lunch. Enjoy our seasonal menu with friends or colleagues in a vibrant, welcoming setting."
            },
            {
              id: "full-dining",              title: "Full Dining Experience (Upstairs)",              content: "For a more intimate and elevated meal, venture upstairs to our full-service restaurant. Experience chef-driven dishes, craft cocktails, and impeccable service in an elegant setting."
            },
            {
              id: "private-events",              title: "Private Events",              content: "Our dedicated event spaces are perfect for celebrating life's milestones. From weddings to corporate gatherings, our team will ensure every detail is exquisite. Ask us to guide you to the perfect fit."
            }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=c9elbr&_wi=3"
          imageAlt="Multiple restaurant spaces and dining areas"
          mediaPosition="right"
          textboxLayout="default"
          faqsAnimation="slide-up"
          mediaAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="final-cta" data-section="final-cta">
        <TextSplitAbout
          title="Come Experience It For Yourself"
          description={[
            "Sunlight through windows. The smell of fresh bread. Conversations that linger. Ready to create your next beautiful memory? Whether it's a casual coffee, an elegant dinner, or a landmark event, we invite you to discover the magic."
          ]}
          buttons={[
            { text: "Reserve Now", href: "#" },
            { text: "Plan an Event", href: "#" }
          ]}
          showBorder={false}
          useInvertedBackground={false}
          buttonAnimation="entrance-slide"
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          title="What Our Guests Say"
          description="Authentic feedback from our community, celebrating the warmth and quality of Ginger and Baker."
          names={[
            "“Amazing venue… 10/10 would love to work here again.”",            "“Super nice building, outdoor patios, bakery, cocktails—everything.”",            "“Cozy atmosphere with standout dishes like biscuits & chai.”",            "“A truly special place for beautiful food and meaningful moments.”",            "“The pies are a must-try – absolutely delicious!”",            "“Perfect for any occasion, from casual coffee to elegant dinners.”",            "“Exceptional service and unforgettable ambiance.”"
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          speed={40}
          showCard={true}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Ginger and Baker"
          columns={footerColumns}
        />
      </div>
    </ThemeProvider>
  );
}