310d2575-e313-4d83-938f-d0bd20b4c81c/src/app/page.tsx

"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroSplitTestimonial from "@/components/sections/hero/HeroSplitTestimonial";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import { MapPin, CheckCircle, Star, Bell, Smartphone } from "lucide-react";
import Link from "next/link";

export default function HomePage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Features", id: "#features" },
    { name: "Privacy", id: "/privacy" },
    { name: "Terms", id: "/terms" },
    { name: "Download", id: "https://apps.apple.com" },
  ];

  const testimonials = [
    {
      name: "Alex M.",
      handle: "Urban Explorer",
      testimonial: "Finally a way to discover events without algorithm fatigue. Civil is exactly what I needed.",
      rating: 5,
      imageSrc: "/placeholders/placeholder1.webp?_wi=1",
      imageAlt: "Alex M. avatar",
    },
    {
      name: "Jordan L.",
      handle: "Social Butterfly",
      testimonial: "No more missing out on local happenings. The realtime alerts are game-changing.",
      rating: 5,
      imageSrc: "/placeholders/placeholder1.webp?_wi=2",
      imageAlt: "Jordan L. avatar",
    },
    {
      name: "Casey R.",
      handle: "Community First",
      testimonial: "Civil connects me with my neighborhood like never before.",
      rating: 5,
      imageSrc: "/placeholders/placeholder1.webp?_wi=3",
      imageAlt: "Casey R. avatar",
    },
    {
      name: "Morgan T.",
      handle: "Night Owl",
      testimonial: "Curated events that actually match my interests. Obsessed.",
      rating: 5,
      imageSrc: "/placeholders/placeholder1.webp?_wi=4",
      imageAlt: "Morgan T. avatar",
    },
  ];

  const features = [
    {
      title: "Explore Local Events",
      description: "Browse curated events happening around you with a single tap.",
      bentoComponent: "reveal-icon",
      icon: MapPin,
    },
    {
      title: "RSVP Instantly",
      description: "Confirm attendance in seconds. No friction, no complicated forms.",
      bentoComponent: "reveal-icon",
      icon: CheckCircle,
    },
    {
      title: "Curated For You",
      description: "Smart recommendations based on your interests and location.",
      bentoComponent: "reveal-icon",
      icon: Star,
    },
    {
      title: "Realtime Alerts",
      description: "Never miss a moment. Get instant notifications for events you care about.",
      bentoComponent: "reveal-icon",
      icon: Bell,
    },
  ];

  const footerColumns = [
    {
      title: "Product",
      items: [
        { label: "Features", href: "#features" },
        { label: "Download", href: "https://apps.apple.com" },
      ],
    },
    {
      title: "Company",
      items: [
        { label: "About", href: "/" },
        { label: "Contact", href: "mailto:hello@tryCivil.app" },
      ],
    },
    {
      title: "Legal",
      items: [
        { label: "Privacy", href: "/privacy" },
        { label: "Terms", href: "/terms" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="compact"
      sizing="mediumLargeSizeLargeTitles"
      background="noise"
      cardStyle="gradient-radial"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={navItems}
          brandName="Civil"
          bottomLeftText="Discover. Connect. Attend."
          bottomRightText="hello@tryCivil.app"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitTestimonial
          title="Discover what's happening around you"
          description="Civil brings local events to your fingertips—curated, realtime, and ready to join. Explore, RSVP, and never miss a moment."
          background={{ variant: "plain" }}
          tag="Now on iOS"
          tagIcon={Smartphone}
          tagAnimation="blur-reveal"
          buttons={[
            { text: "Download on App Store", href: "https://apps.apple.com" },
            { text: "Learn More", href: "#features" },
          ]}
          buttonAnimation="blur-reveal"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APttOxJC5nQhjbDKeuAuqNkFHV/uploaded-1772506302794-2p37ieqf.png?_wi=1"
          imageAlt="Civil iOS app interface showing event discovery map with featured events"
          imagePosition="right"
          mediaAnimation="slide-up"
          testimonials={testimonials}
          testimonialRotationInterval={5000}
          useInvertedBackground={false}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureBento
          title="Four Essential Features"
          description="Everything you need for effortless event discovery and connection."
          tag="Features"
          tagIcon={Star}
          tagAnimation="blur-reveal"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={true}
          features={features}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APttOxJC5nQhjbDKeuAuqNkFHV/uploaded-1772506302794-2p37ieqf.png?_wi=2"
          imageAlt="Civil app interface"
          columns={footerColumns}
          logoText="Civil"
          copyrightText="© 2025 Civil. Event discovery, reimagined."
        />
      </div>
    </ThemeProvider>
  );
}