"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
import AboutMetric from "@/components/sections/about/AboutMetric";
import BlogCardTwo from "@/components/sections/blog/BlogCardTwo";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import Link from "next/link";
import { Wallet, Handshake, MapPin, Activity, Building, HeartHandshake, Users } from "lucide-react";

export default function HomePage() {
  const navItems = [
    { label: "Home", href: "/" },
    { label: "Activities", href: "/activities" },
    { label: "Timetable", href: "/timetable" },
    { label: "Parties & Hire", href: "/hire" },
    { label: "Community", href: "/community" },
    { label: "About Us", href: "/about" },
    { label: "Contact", href: "/contact" }
  ];

  const footerNavItems = [
    { title: "Quick Links", items: [{ label: "Home", href: "/" }, { label: "About Us", href: "/about" }, { label: "Contact", href: "/contact" }] },
    { title: "Activities", items: [{ label: "View All Activities", href: "/activities" }, { label: "Timetable", href: "/timetable" }, { label: "Parties & Hire", href: "/hire" }] },
    { title: "Connect", items: [{ label: "Facebook", href: "https://www.facebook.com/" }, { label: "Instagram", href: "https://www.instagram.com/" }, { label: "YMCA Southport", href: "https://www.southportymca.org.uk/" }] }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="mediumLargeSizeLargeTitles"
      background="grid"
      cardStyle="subtle-shadow"
      primaryButtonStyle="flat"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Southport Community Sports"
          navItems={navItems.map(item => ({ name: item.label, id: item.href }))}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardScroll
          title="Sport, Activity, and Community in the Heart of Southport."
          description="Southport Community Sports at the YMCA building is a welcoming, non-profit venue offering affordable activities for all ages. Join us for climbing, roller skating, gym, squash, and a variety of kids' activities and community sessions."
          background={{ variant: "plain" }}
          buttons={[
            { text: "View Activities", href: "/activities" },
            { text: "Book / Enquire", href: "/contact" }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/medium-shot-friends-soccer-field_23-2150338668.jpg"
          imageAlt="People enjoying various sports activities in a community center"
          tagAnimation="slide-up"
          buttonAnimation="slide-up"
        />
      </div>

      <div id="activity-highlights" data-section="activity-highlights">
        <FeatureCardThree
          title="Discover Your Next Activity"
          description="From high-energy roller skating to challenging climbing walls, find your perfect way to play at Southport Community Sports. We offer something for every interest and age."
          features={[
            { title: "Climbing Walls", description: "Reach new heights with our indoor climbing and bouldering facilities, suitable for all skill levels.", imageSrc: "http://img.b2bpic.net/free-photo/company-is-young-woman-who-has-fun-with-soft-blocks-children-s-playground-trampoline-center_146671-15244.jpg", imageAlt: "Person climbing an indoor wall" },
            { title: "Roller Skating", description: "Glide into fun on our spacious roller rink, perfect for open sessions and themed events.", imageSrc: "http://img.b2bpic.net/free-photo/happy-girls-having-fun-amusement-park_23-2147918796.jpg", imageAlt: "People roller skating" },
            { title: "Gym Access", description: "Stay fit and active with our affordable and well-equipped gym, open to all community members.", imageSrc: "http://img.b2bpic.net/free-photo/woman-doing-exercise-simulator-gym_23-2147688152.jpg", imageAlt: "Gym equipment" },
            { title: "Squash Courts", description: "Challenge a friend or join a session on our dedicated squash courts.", imageSrc: "http://img.b2bpic.net/free-photo/active-young-people-playing-squash_329181-13257.jpg", imageAlt: "Squash player in action" },
            { title: "Kids' Clubs", description: "Engaging and fun activities for children, keeping them active and entertained.", imageSrc: "http://img.b2bpic.net/free-photo/girls-looking-somewhere_23-2148124844.jpg", imageAlt: "Group of children playing" },
            { title: "Parties & Events", description: "Host memorable birthdays and special occasions with our unique venue hire packages.", imageSrc: "http://img.b2bpic.net/free-photo/happy-friends-laughing-together-social-gathering_23-2152024827.jpg", imageAlt: "Party celebration" }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          gridVariant="threeColumn"
        />
      </div>

      <div id="why-us" data-section="why-us">
        <AboutMetric
          title="Why Choose Southport Community Sports?"
          metrics={[
            { icon: Wallet, label: "Affordable", value: "Activities for Everyone" },
            { icon: Handshake, label: "Friendly", value: "Local Community Hub" },
            { icon: Users, label: "Family-Friendly", value: "Sessions for All Ages" },
            { icon: MapPin, label: "Central Location", value: "At Southport YMCA" },
            { icon: Activity, label: "Variety", value: "Sports & Community Mix" }
          ]}
          metricsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="weekly-highlights" data-section="weekly-highlights">
        <BlogCardTwo
          title="What's On This Week"
          description="Check out our exciting schedule of classes, open sessions, and special events happening at the YMCA building. There's always something new to try!"
          blogs={[
            { id: "blog-1", category: "Class", title: "Community Yoga", excerpt: "Relax and rejuvenate with our weekly yoga session, open to all levels. Boost your flexibility and well-being.", imageSrc: "http://img.b2bpic.net/free-photo/group-people-performing-chakrasana-exercise-mat_1170-203.jpg", imageAlt: "People in a yoga class", authorName: "Southport Team", authorAvatar: "http://img.b2bpic.net/free-photo/closeup-portrait-creative-young-hispanic-guy-steeple-fingers-while-makingup-great-plan-joke-lo_1258-109483.jpg", date: "Mon, 6:00 PM" },
            { id: "blog-2", category: "Kids", title: "Junior Football Fun", excerpt: "Join our energetic football session for kids aged 5-10. Learn skills, teamwork, and have a blast!", imageSrc: "http://img.b2bpic.net/free-photo/kids-playing-football-supervised-by-football-trainer_23-2149684392.jpg", imageAlt: "Kids playing football", authorName: "Southport Team", authorAvatar: "http://img.b2bpic.net/free-photo/portrait-young-hipster-black-man-posing-isolated-white-studio-wall-background-stylish-outfit-funny-afro-hairstyle-confident-arms-crossed-chest-serious_285396-2953.jpg", date: "Wed, 4:30 PM" },
            { id: "blog-3", category: "Event", title: "Roller Disco Night", excerpt: "Lace up your skates for our popular Friday night roller disco! Music, lights, and fun for all ages.", imageSrc: "http://img.b2bpic.net/free-photo/people-taking-part-dance-therapy-class_23-2149346559.jpg", imageAlt: "People at a roller disco", authorName: "Southport Team", authorAvatar: "http://img.b2bpic.net/free-photo/lovely-lesbian-couple-listening-music-earphones_23-2149123917.jpg", date: "Fri, 7:00 PM" }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="venue-hire-promo" data-section="venue-hire-promo">
        <FeatureCardThree
          title="Host Your Next Event With Us"
          description="Looking for a unique venue for a birthday party, group booking, or community event? Southport Community Sports offers flexible spaces and activity packages at the YMCA building."
          features={[
            { title: "Birthday Parties", description: "Make your child's birthday unforgettable with our sports and activity themed party packages.", imageSrc: "http://img.b2bpic.net/free-photo/group-people-exercising-together-outdoors_23-2151061481.jpg", imageAlt: "Children at a birthday party" },
            { title: "Group Bookings", description: "Organise a fun and active outing for your club, school, or corporate team.", imageSrc: "http://img.b2bpic.net/free-photo/diverse-group-friends-sitting-table-while-watching-online-video-content-laptop-multiracial-friends-sitting-together-home-living-room-while-browsing-internet-enjoying-free-time_482257-49811.jpg", imageAlt: "Group activity" },
            { title: "Community Use", description: "Affordable spaces available for local groups, classes, and community initiatives.", imageSrc: "http://img.b2bpic.net/free-photo/back-cheerful-sexy-business-african-american-lady-with-afro-hair-wear-white-blouse-green-pants-posed-cafe_627829-1035.jpg", imageAlt: "Meeting room setup" },
            { title: "Private Hire", description: "Rent our facilities for private functions, training sessions, or events.", imageSrc: "http://img.b2bpic.net/free-photo/woman-looking-colleagues-discussing-draft_23-2147808073.jpg", imageAlt: "Empty sports hall" }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          gridVariant="threeColumn"
        />
      </div>

      <div id="about-venue" data-section="about-venue">
        <AboutMetric
          title="Our Community Home: The YMCA Building"
          metrics={[
            { icon: Building, label: "Historic Site", value: "Established YMCA Building" },
            { icon: HeartHandshake, label: "Community Focus", value: "Dedicated Public Space" },
            { icon: Users, label: "Serving Southport", value: "Local Activities & Support" }
          ]}
          metricsAnimation="slide-up"
          useInvertedBackground={true}
        />
      </div>

      <div id="find-us-home" data-section="find-us-home">
        <ContactCenter
          tag="Visit Us"
          title="Find Southport Community Sports"
          description="We're conveniently located in the heart of Southport at the YMCA building. Easily accessible by public transport and with nearby parking options. Find us at 81 Hoghton Street, Southport PR9 0PR or call us at 01704 538317."
          background={{ variant: "plain" }}
          useInvertedBackground={false}
          tagAnimation="slide-up"
          inputPlaceholder="Your Message"
          buttonText="Send Message"
          termsText="By sending a message, you agree to our privacy policy."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={footerNavItems}
          bottomLeftText="© 2024 Southport Community Sports. All rights reserved."
          bottomRightText="Built for the Community"
        />
      </div>
    </ThemeProvider>
  );
}
