"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import TextBox from '@/components/Textbox';
import Textarea from '@/components/form/Textarea';
import ButtonHoverMagnetic from '@/components/button/ButtonHoverMagnetic/ButtonHoverMagnetic';
import { useState } from 'react';
import { Search } from "lucide-react";

export default function NicheAnalyzerPage() {
  const [nicheInput, setNicheInput] = useState('');
  const handleAnalyze = () => {
    console.log("Analyzing niche:", nicheInput);
    // Placeholder for API call or data processing
  };

  const navItems = [
    { name: "Home", id: "/" },
    { name: "Features", id: "#features" },
    { name: "Niche Analyzer", id: "/niche-analyzer" },
    { name: "Low Competition Topics", id: "/low-competition-topics" },
    { name: "Insights", id: "#insights" },
    { name: "FAQ", id: "#faq" },
  ];

  return (
    <ThemeProvider
        defaultButtonVariant="hover-magnetic"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="largeSmall"
        background="aurora"
        cardStyle="solid"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="glass"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingOverlay
            navItems={navItems}
            brandName="Yt Mugi"
            button={{ text: "Reset / Change API Key", href: "#" }}
          />
        </div>

        <div className="min-h-screen flex flex-col justify-center items-center py-20 px-4">
          <div className="max-w-3xl w-full text-center">
            <TextBox
              title="Niche Analyzer"
              description="Enter a broad topic or keyword, and our AI will identify profitable and underserved niches within it, complete with competition analysis and audience potential."
              textboxLayout="default"
              tag="AI-Powered Discovery"
              tagIcon={Search}
            />
            <div className="mt-8 flex flex-col items-center gap-4">
              <Textarea
                value={nicheInput}
                onChange={setNicheInput}
                placeholder="e.g., 'gaming', 'cooking', 'finance for beginners'"
                rows={5}
                className="w-full max-w-lg"
              />
              <ButtonHoverMagnetic
                text="Analyze Niche"
                onClick={handleAnalyze}
                className="mt-4"
              />
            </div>
            <div className="mt-12 p-6 bg-card rounded-lg shadow-lg">
              <h3 className="text-2xl font-semibold mb-4">Analysis Results (Placeholder)</h3>
              <p className="text-foreground/80">
                Detailed insights on market demand, competition levels, and potential content angles will appear here after analysis.
              </p>
            </div>
          </div>
        </div>

        <div id="footer" data-section="footer">
          <FooterMedia
            imageSrc="http://img.b2bpic.net/free-photo/3d-network-data-communications-background-with-plexus-design_1048-17880.jpg"
            imageAlt="Abstract tech background"
            logoText="Yt Mugi"
            columns={[
              { title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }, { label: "Integrations", href: "#" }] },
              { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Careers", href: "#" }, { label: "Contact", href: "#" }] },
              { title: "Resources", items: [{ label: "Blog", href: "#blog" }, { label: "Support", href: "#" }, { label: "Help Center", href: "#faq" }] },
              { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
            ]}
            copyrightText="© 2025 | Yt Mugi. All rights reserved."
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}