"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import Link from 'next/link';
import { Clock } from 'lucide-react';

export default function BrowseItemsPage() {
  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: "#" },
      ],
    },
  ];

  const allItems = [
    {
      id: "1",      name: "Blue Backpack",      price: "Lost - $150 value",      imageSrc: "http://img.b2bpic.net/free-photo/woman-leaning-her-car-beach_23-2148218377.jpg",      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",      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",      imageAlt: "iPhone 14 device"},
    {
      id: "4",      name: "Vintage Watch",      price: "Found - Jewelry Category",      imageSrc: "http://img.b2bpic.net/free-photo/woman-leaning-her-car-beach_23-2148218377.jpg",      imageAlt: "Vintage watch"},
    {
      id: "5",      name: "Prescription Glasses",      price: "Lost - Last seen at Cafe",      imageSrc: "http://img.b2bpic.net/free-photo/close-up-adult-man-browsing-his-mobile-phone_23-2148531034.jpg",      imageAlt: "Prescription glasses"},
    {
      id: "6",      name: "Gold Ring",      price: "Found - Wedding Band",      imageSrc: "http://img.b2bpic.net/free-photo/man-saving-money-energy-crisis_23-2150061852.jpg",      imageAlt: "Gold ring"},
  ];

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

      <div id="browse-items" data-section="browse-items">
        <ProductCardOne
          products={allItems}
          title="Browse All Lost and Found Items"
          description="Explore our complete catalog of lost and found items reported by community members. Use filters to narrow down by category, location, and date."
          tag="Complete Directory"
          tagIcon={Clock}
          tagAnimation="blur-reveal"
          buttons={[
            { text: "Report an Item", href: "/report" },
          ]}
          buttonAnimation="slide-up"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="browse-faq" data-section="browse-faq">
        <FaqSplitText
          sideTitle="Searching for Your Lost Item?"
          sideDescription="Find answers to common questions about browsing and searching for lost and found items on FindIt."
          faqs={[
            {
              id: "1",              title: "How do I search for my lost item?",              content: "Use our search bar to enter keywords about your item. You can also filter by category (electronics, jewelry, documents, etc.), location, and date range. Our smart search will help you find matching items quickly."},
            {
              id: "2",              title: "Can I get notifications for new matching items?",              content: "Yes! After you report a lost item, enable notifications in your dashboard. We'll alert you instantly when a potential match is found by our AI matching system."},
            {
              id: "3",              title: "How do I contact someone who found my item?",              content: "Click on an item listing to view details and the finder's contact information. Use our secure messaging system to reach out. We recommend verifying ownership details before arranging a meetup."},
            {
              id: "4",              title: "What if I can't find my item?",              content: "If your item isn't currently listed, submit a report anyway. Community members are actively adding items, and your report might match with something posted later."},
          ]}
          useInvertedBackground={true}
          faqsAnimation="blur-reveal"
          textPosition="right"
          animationType="smooth"
        />
      </div>

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