"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Bot, LineChart, TestTube } from "lucide-react";

export default function RetentionHookGeneratorPage() {
  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={[
              { name: "Home", id: "#home" },
              { name: "Features", id: "#discovery" },
              { name: "Retention Hook Generator", id: "/retention-hook-generator" },
              { name: "Scripting Engine", id: "/scripting-engine" },
              { name: "SEO Asset Optimizer", id: "/seo-asset-optimizer" },
              { name: "Insights", id: "#insights" },
              { name: "FAQ", id: "#faq" },
            ]}
            brandName="Yt Mugi"
            button={{ text: "Reset / Change API Key", href: "#" }}
          />
        </div>

        <div id="retention-hook-generator" data-section="retention-hook-generator">
          <FeatureCardThree
            animationType="slide-up"
            textboxLayout="default"
            gridVariant="uniform-all-items-equal"
            useInvertedBackground={true}
            title="Retention Hook Generator"
            description="Craft irresistible intros that captivate your audience and keep them watching. Our AI analyzes top-performing hooks to generate bespoke suggestions for your content."
            features={[
              {
                title: "AI-Powered Hook Suggestions",                description: "Generate unique and engaging hooks tailored to your video topic and target audience.",                imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-flat-design-gathering-data-business-concept_23-2149149294.jpg",                imageAlt: "AI-powered suggestions icon"
              },
              {
                title: "Engagement Analytics Integration",                description: "See how generated hooks are predicted to perform based on historical data and audience behavior.",                imageSrc: "http://img.b2bpic.net/free-photo/diverse-team-people-analyzing-data-charts-report-digital-tablet-using-online-networking-information-plan-business-project-colelagues-looking-diagrams-infographics-close-up_482257-50696.jpg",                imageAlt: "Analytics dashboard icon"
              },
              {
                title: "A/B Testing Support",                description: "Test different hooks to find what resonates most with your viewers for maximum retention.",                imageSrc: "http://img.b2bpic.net/free-photo/high-angle-laptop-desk-post-its_23-2149386365.jpg",                imageAlt: "A/B testing icon"
              }
            ]}
          />
        </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>
  );
}