"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 { Book, Globe, LayoutTemplate } from "lucide-react";

export default function ScriptingEnginePage() {
  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="scripting-engine" data-section="scripting-engine">
          <FeatureCardThree
            animationType="slide-up"
            textboxLayout="default"
            gridVariant="uniform-all-items-equal"
            useInvertedBackground={true}
            title="Scripting Engine"
            description="Generate full video scripts, outlines, and talking points in minutes. Our AI assists in structuring your narrative, optimizing for flow and viewer retention."
            features={[
              {
                title: "Automated Script Generation",                description: "Input your topic and key points, and our AI will draft a complete video script for you.",                imageSrc: "http://img.b2bpic.net/free-photo/website-design-content-layout-graphic_53876-13764.jpg",                imageAlt: "Script generation icon"
              },
              {
                title: "Storytelling Frameworks",                description: "Utilize proven narrative structures to keep your audience engaged from start to finish.",                imageSrc: "http://img.b2bpic.net/free-vector/marketing-content-stickers-part-3_534985-182.jpg",                imageAlt: "Storytelling icon"
              },
              {
                title: "Multi-language Support",                description: "Create scripts in various languages to reach a global audience effortlessly.",                imageSrc: "http://img.b2bpic.net/free-photo/zoom-out-right-side_187299-45685.jpg",                imageAlt: "Multi-language 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>
  );
}