"use client";

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

export default function ReportItemPage() {
  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="report-intro" data-section="report-intro">
        <TextAbout
          tag="Report Lost or Found Item"
          tagIcon={Heart}
          tagAnimation="blur-reveal"
          title="Help reconnect people with their lost belongings. Whether you've lost something precious or found an item, report it to FindIt and our community will help."
          useInvertedBackground={false}
          buttons={[
            { text: "Start Reporting", href: "/report" },
            { text: "Browse Existing Items", href: "/browse" },
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="report-faq" data-section="report-faq">
        <FaqSplitText
          sideTitle="How to Report an Item"
          sideDescription="Get step-by-step guidance on reporting lost or found items effectively to maximize the chances of recovery or return."
          faqs={[
            {
              id: "1",
              title: "What information do I need to provide when reporting?",
              content: "Provide a clear description of the item, category (electronics, jewelry, documents, etc.), color, distinguishing features, and where/when it was lost or found. High-quality photos are essential - they help our matching system work better and increase the likelihood of recovery.",
            },
            {
              id: "2",
              title: "Can I report multiple items at once?",
              content: "Yes! Each item should be reported separately for better organization and searchability. You can report as many items as needed. If you lost several items at the same location, mention this in the description.",
            },
            {
              id: "3",
              title: "How long will my report stay visible?",
              content: "Lost item reports stay active for 90 days. Found items remain visible for 60 days before being archived. You can extend or renew your reports anytime from your dashboard if the item hasn't been recovered.",
            },
            {
              id: "4",
              title: "What happens after I report an item?",
              content: "Your item will be added to our searchable database and visible to the entire community. Our AI matching system will automatically search for matches. You'll receive notifications if potential matches are found, and other users can contact you through our secure messaging system.",
            },
          ]}
          useInvertedBackground={true}
          faqsAnimation="blur-reveal"
          textPosition="left"
          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>
  );
}