"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import TextAbout from '@/components/sections/about/TextAbout';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import Link from 'next/link';
import { Heart, Zap, Clock, Star, Target, Rocket } from 'lucide-react';

export default function HomePage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Browse Items", id: "/browse" },
    { name: "Report Item", id: "/report" },
    { name: "How It Works", id: "/how-it-works" },
    { name: "Contact", id: "/contact" },
  ];

  const footerColumns = [
    {
      title: "Platform",
      items: [
        { label: "Browse Items", href: "/browse" },
        { label: "Report Item", href: "/report" },
        { label: "How It Works", href: "#how-it-works" },
        { label: "Dashboard", href: "/dashboard" },
      ],
    },
    {
      title: "Community",
      items: [
        { label: "Success Stories", href: "#testimonials" },
        { label: "Guidelines", href: "#" },
        { label: "Help Center", href: "#" },
        { label: "Contact Support", href: "#" },
      ],
    },
    {
      title: "Company",
      items: [
        { label: "About Us", href: "#" },
        { label: "Blog", href: "#" },
        { label: "Careers", href: "#" },
        { label: "Press", href: "#" },
      ],
    },
    {
      title: "Legal",
      items: [
        { label: "Privacy Policy", href: "#" },
        { label: "Terms of Service", href: "#" },
        { label: "Cookie Policy", href: "#" },
        { label: "Contact", href: "#" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="mediumSizeLargeTitles"
      background="floatingGradient"
      cardStyle="solid"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple brandName="FindIt" navItems={navItems} />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="Reunite with Your Lost Items"
          description="FindIt is a community-driven platform helping people report lost items, search for found belongings, and reconnect with their possessions. Simple. Fast. Effective."
          background={{ variant: "floatingGradient" }}
          kpis={[
            { value: "2,500+", label: "Items Successfully Recovered" },
            { value: "98%", label: "Match Accuracy Rate" },
            { value: "48hrs", label: "Average Recovery Time" },
          ]}
          enableKpiAnimation={true}
          tag="Trusted Community Platform"
          tagIcon={Heart}
          tagAnimation="blur-reveal"
          buttons={[
            { text: "Report Lost Item", href: "/report" },
            { text: "Browse Found Items", href: "/browse" },
          ]}
          buttonAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-photo/close-up-volunteer-teamwork-join-hands-environment-conservation-volunteering-world-environment-day_640221-254.jpg"
          imageAlt="Lost and Found Portal"
          mediaAnimation="opacity"
          imagePosition="right"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardNine
          features={[
            {
              id: 1,
              title: "Easy Item Reporting",
              description: "Report lost or found items in seconds. Upload photos, describe details, and specify location. Our intuitive form guides you through every step.",
              phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/man-reviewing-documents-phone_23-2151953951.jpg?_wi=1" },
              phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/man-reviewing-documents-phone_23-2151953951.jpg?_wi=2" },
            },
            {
              id: 2,
              title: "Smart Search & Filter",
              description: "Search by category, location, and keywords. Use our advanced filters to narrow down results and find exactly what you're looking for quickly.",
              phoneOne: { imageSrc: "http://img.b2bpic.net/free-vector/laptop-with-gps-navigation-software_24877-51522.jpg?_wi=1" },
              phoneTwo: { imageSrc: "http://img.b2bpic.net/free-vector/laptop-with-gps-navigation-software_24877-51522.jpg?_wi=2" },
            },
            {
              id: 3,
              title: "Intelligent Matching System",
              description: "Our AI-powered matching system automatically suggests possible matches between lost and found items. Get instant notifications when a match is found.",
              phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/conference-call-global-communication-connection-technology-concept_53876-125127.jpg?_wi=1" },
              phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/conference-call-global-communication-connection-technology-concept_53876-125127.jpg?_wi=2" },
            },
          ]}
          showStepNumbers={true}
          title="Powerful Features"
          description="Everything you need to find lost items or help others recover theirs"
          tag="How It Works"
          tagIcon={Zap}
          tagAnimation="blur-reveal"
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          tag="Our Mission"
          tagIcon={Target}
          tagAnimation="blur-reveal"
          title="We believe that every lost item deserves a chance to go home. FindIt connects communities to reunite people with their belongings through technology, compassion, and collective effort."
          useInvertedBackground={true}
          buttons={[
            { text: "Learn More About Us", href: "/" },
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="recent-items" data-section="recent-items">
        <ProductCardOne
          products={[
            {
              id: "1",
              name: "Blue Backpack",
              price: "Lost - $150 value",
              imageSrc: "http://img.b2bpic.net/free-photo/woman-leaning-her-car-beach_23-2148218377.jpg?_wi=1",
              imageAlt: "Blue backpack",
            },
            {
              id: "2",
              name: "Leather Wallet",
              price: "Found - Electronics Category",
              imageSrc: "http://img.b2bpic.net/free-photo/man-saving-money-energy-crisis_23-2150061852.jpg?_wi=1",
              imageAlt: "Brown leather wallet",
            },
            {
              id: "3",
              name: "iPhone 14",
              price: "Lost - Downtown Area",
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-adult-man-browsing-his-mobile-phone_23-2148531034.jpg?_wi=1",
              imageAlt: "iPhone 14 device",
            },
          ]}
          title="Recently Posted Items"
          description="Latest lost and found items in your community. Browse our catalog and help reunite people with their belongings."
          tag="Active Listings"
          tagIcon={Clock}
          tagAnimation="blur-reveal"
          buttons={[
            { text: "View All Items", href: "/browse" },
          ]}
          buttonAnimation="slide-up"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          testimonials={[
            {
              id: "1",
              name: "Sarah Johnson",
              role: "Recovered Lost Keys",
              company: "San Francisco, CA",
              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg",
              imageAlt: "Sarah Johnson",
            },
            {
              id: "2",
              name: "Michael Chen",
              role: "Found iPhone and Returned",
              company: "New York, NY",
              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/friends-going-shopping-antique-store_23-2149525736.jpg",
              imageAlt: "Michael Chen",
            },
            {
              id: "3",
              name: "Emily Rodriguez",
              role: "Helpful Community Member",
              company: "Austin, TX",
              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-people-working-together_23-2149181995.jpg",
              imageAlt: "Emily Rodriguez",
            },
            {
              id: "4",
              name: "David Kim",
              role: "Reunited with Lost Backpack",
              company: "Seattle, WA",
              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/trans-couple-sharing-tender-moments_23-2149445707.jpg",
              imageAlt: "David Kim",
            },
          ]}
          title="Success Stories from Our Community"
          description="Real people. Real reunions. See how FindIt is making a difference in bringing lost items back to their owners."
          tag="User Testimonials"
          tagIcon={Star}
          tagAnimation="blur-reveal"
          gridVariant="uniform-all-items-equal"
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Frequently Asked Questions"
          sideDescription="Everything you need to know about using FindIt to report and recover lost items."
          faqs={[
            {
              id: "1",
              title: "How do I report a lost item?",
              content: "Simply click 'Report Item' and fill out our quick form with item details, category, location lost, date, and photos. Your report will be visible to the community immediately, and our matching system will notify you if a match is found.",
            },
            {
              id: "2",
              title: "How do I report a found item?",
              content: "Found an item? Report it with the same process - select 'Found Item' in the form, provide details about where it was found, upload photos, and include how people can contact you. The owner might be searching for it!",
            },
            {
              id: "3",
              title: "Is FindIt free to use?",
              content: "Yes! FindIt is completely free. We believe in helping the community reunite with lost items without any barriers. No hidden charges or premium memberships required.",
            },
            {
              id: "4",
              title: "How does the matching system work?",
              content: "Our AI analyzes item descriptions, categories, locations, and dates to find potential matches between lost and found items. When a match is likely, both parties receive notifications so they can connect.",
            },
            {
              id: "5",
              title: "Can I delete or edit my post?",
              content: "Yes! Once an item is recovered or claimed, mark it as resolved. You can also edit your post details anytime. Only you can modify your own listings.",
            },
            {
              id: "6",
              title: "How do I stay safe using FindIt?",
              content: "Never share sensitive information like full addresses publicly. Use the platform's messaging system to coordinate handoffs. Always meet in safe, public locations when reuniting with items.",
            },
          ]}
          useInvertedBackground={false}
          faqsAnimation="blur-reveal"
          textPosition="left"
          animationType="smooth"
        />
      </div>

      <div id="cta" data-section="cta">
        <TextAbout
          tag="Start Now"
          tagIcon={Rocket}
          tagAnimation="blur-reveal"
          title="Don't Let Lost Items Stay Lost. Join the FindIt Community Today"
          useInvertedBackground={true}
          buttons={[
            { text: "Report an Item Now", href: "/report" },
            { text: "Browse Lost Items", href: "/browse" },
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="FindIt"
          columns={footerColumns}
          copyrightText="© 2025 FindIt. Helping communities reunite with lost items."
        />
      </div>
    </ThemeProvider>
  );
}