"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import { Copy, Mic, Search } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="compact"
        sizing="largeSmall"
        background="aurora"
        cardStyle="soft-shadow"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Home",
          id: "hero",
        },
        {
          name: "Categories",
          id: "features",
        },
        {
          name: "Pricing",
          id: "pricing",
        },
      ]}
      brandName="PodPrompt AI"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitTestimonial
      useInvertedBackground={false}
      background={{
        variant: "plain",
      }}
      title="Infinite ideas for your educational podcast with AI prompts"
      description="Unlock expert-crafted prompts to elevate your podcast episodes. Save hours of research and focus on what matters: great storytelling."
      testimonials={[
        {
          name: "Sarah Jenkins",
          handle: "@sarahpodcasts",
          testimonial: "The history prompts are incredibly detailed and accurate. A lifesaver for my show.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/messy-office-desk-still-life_23-2150155612.jpg",
        },
        {
          name: "Mark Thompson",
          handle: "@techbreakdown",
          testimonial: "Finally, I can focus on editing instead of spending hours researching complex tech topics.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/stylish-apartment-with-spacious-home-office-wooden-furniture_482257-126432.jpg",
        },
        {
          name: "Elena Rodriguez",
          handle: "@langlearning",
          testimonial: "Simple, effective, and deeply relevant. These prompts are a total game-changer for educational content creators.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/empty-architectural-workplace-with-building-model-3d-construction-layout-table-nobody-office-with-computer-tools-used-urban-development-architecture-design_482257-27896.jpg",
        },
        {
          name: "David Wu",
          handle: "@philo_talks",
          testimonial: "The philosophy prompts allow me to build deep, intellectual scripts in minutes.",
          rating: 4,
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-tidy-workspace-with-laptop_23-2148592296.jpg",
        },
        {
          name: "Jessica Lee",
          handle: "@growthpod",
          testimonial: "Fantastic variety and very easy to integrate into my workflow.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/empty-streaming-studio-booth-with-modern-professional-audio-equipment-podcast-broadcast-desk-having-recording-devices-gadgets-inside-office-workspace-with-nobody-it-studio-shot_482257-45837.jpg",
        },
      ]}
      buttons={[
        {
          text: "Explore free prompts",
          href: "#features",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/modern-office-space-with-futuristic-decor-furniture_23-2151797662.jpg"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/view-retro-microphone-technology-with-copy-space_23-2149506877.jpg",
          alt: "User 1",
        },
        {
          src: "http://img.b2bpic.net/free-photo/cup-coffee-with-headphones-keyboard-white-background_185193-163897.jpg",
          alt: "User 2",
        },
        {
          src: "http://img.b2bpic.net/free-photo/minimalist-office-laptop-smartphone_23-2148764168.jpg",
          alt: "User 3",
        },
        {
          src: "http://img.b2bpic.net/free-photo/internet-live-radio-talk-show-host-talking-audience-microphone-social-media-popular-creator-recording-podcast-interview-while-sitting-living-room-studio-close-up_482257-46528.jpg",
          alt: "User 4",
        },
        {
          src: "http://img.b2bpic.net/free-photo/microphone-with-stand-double-color-exposure-effect_53876-102002.jpg",
          alt: "User 5",
        },
      ]}
      marqueeItems={[
        {
          type: "text",
          text: "500+ Podcasters Joined",
        },
        {
          type: "text",
          text: "1000+ AI Prompts",
        },
        {
          type: "text",
          text: "Daily Updates",
        },
        {
          type: "text",
          text: "Professional Quality",
        },
        {
          type: "text",
          text: "Save Research Time",
        },
      ]}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyNine
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="four-items-2x2-equal-grid"
      useInvertedBackground={false}
      features={[
        {
          title: "History & Culture",
          description: "Explore ancient civilizations.",
          imageSrc: "http://img.b2bpic.net/free-photo/zoom-icon-front-side_187299-39698.jpg",
          titleImageSrc: "",
          buttonText: "View",
        },
        {
          title: "Science & Technology",
          description: "Demystify complex innovations.",
          imageSrc: "http://img.b2bpic.net/free-vector/search-result-icon_632498-3598.jpg",
          titleImageSrc: "",
          buttonText: "View",
        },
        {
          title: "Language Learning",
          description: "Master new vocab and grammar.",
          imageSrc: "http://img.b2bpic.net/free-vector/watercolor-infographic-banners-with-decorative-objects_23-2147604367.jpg",
          titleImageSrc: "",
          buttonText: "View",
        },
        {
          title: "Personal Development",
          description: "Insightful growth topics.",
          imageSrc: "http://img.b2bpic.net/free-vector/online-marketing-sticker-set_534985-34.jpg",
          titleImageSrc: "",
          buttonText: "View",
        },
        {
          title: "Philosophy & Critical Thinking",
          description: "Deep intellectual conversations.",
          imageSrc: "http://img.b2bpic.net/free-vector/flat-infographic-element-collection_23-2148057341.jpg",
          titleImageSrc: "",
          buttonText: "View",
        },
      ]}
      title="Explore Categories"
      description="Find the perfect prompt for every niche educational topic."
    />
  </div>

  <div id="featured" data-section="featured">
      <TextSplitAbout
      useInvertedBackground={false}
      title="Featured Prompt: Roman Empire Guide"
      description={[
        "Use this prompt to generate a 30-minute episode structure.",
        "Simply copy: 'Act as a history expert. Create an outline for an educational podcast episode about the Roman Empire's fall, including 5 key points and 3 interview questions.'",
        "Click the copy button and paste it into ChatGPT.",
      ]}
      buttons={[
        {
          text: "Copy Prompt",
        },
      ]}
    />
  </div>

  <div id="usage" data-section="usage">
      <MetricCardOne
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      metrics={[
        {
          id: "1",
          value: "1",
          title: "Browse",
          description: "Pick your desired category.",
          icon: Search,
        },
        {
          id: "2",
          value: "2",
          title: "Copy",
          description: "Copy our optimized AI prompt.",
          icon: Copy,
        },
        {
          id: "3",
          value: "3",
          title: "Create",
          description: "Paste into your AI tool.",
          icon: Mic,
        },
      ]}
      title="How to use these prompts"
      description="Get started in 3 simple steps."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardNine
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      plans={[
        {
          id: "free",
          title: "Free",
          price: "$0",
          period: "/month",
          features: [
            "5 prompts per month",
            "Access to basic topics",
          ],
          button: {
            text: "Get Started",
          },
          imageSrc: "http://img.b2bpic.net/free-vector/illustration-notepad_53876-18174.jpg",
          imageAlt: "copy to clipboard icon",
        },
        {
          id: "pro",
          title: "Pro",
          price: "$10",
          period: "/month",
          features: [
            "Unlimited prompts",
            "Full library access",
            "Community access",
          ],
          button: {
            text: "Upgrade",
          },
          imageSrc: "http://img.b2bpic.net/free-photo/modern-office-space-with-futuristic-decor-furniture_23-2151797662.jpg",
          imageAlt: "copy to clipboard icon",
        },
      ]}
      title="Choose your plan"
      description="Start free, upgrade to unlock the entire library."
    />
  </div>

  <div id="newsletter" data-section="newsletter">
      <ContactText
      useInvertedBackground={false}
      background={{
        variant: "plain",
      }}
      text="Get a new prompt every week. Join 500+ podcasters."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={false}
      background={{
        variant: "plain",
      }}
      text="Need help? Reach out at contact@podprompt.ai"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/high-angle-radio-microphone-laptop_23-2148808748.jpg"
      logoText="PodPrompt AI"
      columns={[
        {
          title: "Platform",
          items: [
            {
              label: "Categories",
              href: "#features",
            },
            {
              label: "Pricing",
              href: "#pricing",
            },
          ],
        },
        {
          title: "Support",
          items: [
            {
              label: "Contact",
              href: "#",
            },
            {
              label: "Privacy",
              href: "#",
            },
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
