import type { Metadata } from "next";
import Link from "next/link";
import { 
  BookOpen, Clock, Calendar, ArrowRight, Sparkles, 
  PlaySquare, DollarSign, Search, Shield, Zap, TrendingUp,
  Award, Layers, CheckCircle2, Flame
} from "lucide-react";
import { blogPosts } from "@/lib/blog-data";

export const metadata: Metadata = {
  title: "YouTube Creator Academy & Blog (2026) | Growth, SEO & Monetization Guides",
  description: "Master YouTube growth, SEO ranking, 4000 watch hours, CPM monetization, thumbnail design, and algorithm secrets with deep creator masterclasses from YTToolkits.",
  keywords: "youtube blog 2026, youtube creator academy, youtube monetization guide, youtube seo guide, how to grow youtube channel 2026, youtube algorithm secrets, youtube cpm guide 2026, youtube watch hours guide, youtube thumbnail design tips, youtube shorts monetization, youtube shadowban check, youtube free creator tools, youtube earnings calculator, video rank tracker, youtube tags guide, make money on youtube, youtube tips and tricks, youtube channel growth strategies, video marketing 2026, youtube creator guides, youtube strategy, youtube revenue breakdown, youtube fair use guide, youtube copyright strikes guide, youtube video optimization, advanced youtube tips",
  alternates: {
    canonical: "https://yttoolkits.site/blog",
  },
  openGraph: {
    title: "YouTube Creator Academy & Blog | YTToolkits",
    description: "Deep, data-backed masterclasses and strategies to boost your RPM, gain subscribers, optimize video SEO, and scale your YouTube business.",
    url: "https://yttoolkits.site/blog",
    siteName: "YTToolkits",
    locale: "en_US",
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: "YouTube Creator Academy & Blog | YTToolkits",
    description: "Master YouTube growth, SEO, monetization, and algorithm secrets with free expert guides.",
  },
};

const categoryColors: Record<string, { bg: string; text: string; border: string }> = {
  "Monetization": { bg: "bg-emerald-500/10", text: "text-emerald-400", border: "border-emerald-500/20" },
  "Creator Guides": { bg: "bg-blue-500/10", text: "text-blue-400", border: "border-blue-500/20" },
  "YouTube SEO": { bg: "bg-amber-500/10", text: "text-amber-400", border: "border-amber-500/20" },
  "Algorithm Secrets": { bg: "bg-purple-500/10", text: "text-purple-400", border: "border-purple-500/20" },
  "Video Tips": { bg: "bg-rose-500/10", text: "text-rose-400", border: "border-rose-500/20" },
};

export default function BlogIndexPage() {
  const featuredPost = blogPosts[0];
  const gridPosts = blogPosts.slice(1);

  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "CollectionPage",
    "name": "YTToolkits Creator Academy & Blog",
    "description": "Comprehensive, deeply researched guides for YouTube creators on SEO, monetization, algorithm mechanics, and channel growth.",
    "url": "https://yttoolkits.site/blog",
    "mainEntity": {
      "@type": "ItemList",
      "itemListElement": blogPosts.map((post, idx) => ({
        "@type": "ListItem",
        "position": idx + 1,
        "url": `https://yttoolkits.site/blog/${post.slug}`,
        "name": post.title,
        "description": post.excerpt,
      })),
    },
  };

  return (
    <div className="min-h-screen bg-zinc-950 text-zinc-100">
      {/* JSON-LD Schema */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />

      {/* Hero Section */}
      <div className="relative border-b border-zinc-800 bg-gradient-to-b from-zinc-900/60 via-zinc-950 to-zinc-950 pt-12 pb-16 sm:pt-16 sm:pb-20 overflow-hidden">
        {/* Glow ambient background elements */}
        <div className="absolute top-1/4 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-red-600/10 rounded-full blur-3xl pointer-events-none" />
        <div className="absolute top-1/3 left-1/4 w-64 h-64 bg-amber-600/10 rounded-full blur-3xl pointer-events-none" />

        <div className="container mx-auto px-4 max-w-6xl relative z-10 text-center">
          <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-red-500/10 border border-red-500/20 text-xs sm:text-sm text-red-400 font-medium mb-5 shadow-inner">
            <Sparkles className="w-4 h-4 text-red-400 animate-pulse" />
            <span>YTToolkits Creator Academy & Strategic Guides</span>
          </div>

          <h1 className="text-3xl sm:text-5xl md:text-6xl font-extrabold tracking-tight mb-5 text-white max-w-4xl mx-auto leading-tight">
            Master the YouTube Algorithm &amp;{" "}
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-red-500 via-orange-400 to-amber-400">
              Monetization in 2026
            </span>
          </h1>

          <p className="text-base sm:text-xl text-zinc-400 max-w-2xl mx-auto mb-8 leading-relaxed">
            Data-backed masterclasses, algorithmic reverse-engineering, and monetization blueprints researched by seasoned YouTube strategists to help you scale your channel faster.
          </p>

          {/* Quick Metrics Bar */}
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 max-w-3xl mx-auto">
            <div className="p-3.5 bg-zinc-900/60 border border-zinc-800/80 rounded-xl">
              <div className="text-xl sm:text-2xl font-bold text-white flex items-center justify-center gap-1.5">
                <BookOpen className="w-5 h-5 text-red-400" />
                10 Guides
              </div>
              <p className="text-xs text-zinc-500 mt-0.5">Deep Research</p>
            </div>
            <div className="p-3.5 bg-zinc-900/60 border border-zinc-800/80 rounded-xl">
              <div className="text-xl sm:text-2xl font-bold text-emerald-400 flex items-center justify-center gap-1.5">
                <DollarSign className="w-5 h-5 text-emerald-400" />
                20+ Niches
              </div>
              <p className="text-xs text-zinc-500 mt-0.5">Real CPM/RPM Data</p>
            </div>
            <div className="p-3.5 bg-zinc-900/60 border border-zinc-800/80 rounded-xl">
              <div className="text-xl sm:text-2xl font-bold text-blue-400 flex items-center justify-center gap-1.5">
                <Zap className="w-5 h-5 text-blue-400" />
                22,000+
              </div>
              <p className="text-xs text-zinc-500 mt-0.5">Words of Content</p>
            </div>
            <div className="p-3.5 bg-zinc-900/60 border border-zinc-800/80 rounded-xl">
              <div className="text-xl sm:text-2xl font-bold text-amber-400 flex items-center justify-center gap-1.5">
                <Award className="w-5 h-5 text-amber-400" />
                100% Free
              </div>
              <p className="text-xs text-zinc-500 mt-0.5">Actionable & Open</p>
            </div>
          </div>
        </div>
      </div>

      <div className="container mx-auto px-4 py-12 max-w-6xl">
        {/* Featured Article Card */}
        <div className="mb-14">
          <div className="flex items-center gap-2 mb-4">
            <Flame className="w-5 h-5 text-red-500" />
            <h2 className="text-lg font-bold text-zinc-200 uppercase tracking-wider text-xs">
              Featured Masterclass
            </h2>
          </div>

          <div className="relative group bg-zinc-900/70 hover:bg-zinc-900 border border-zinc-800 hover:border-zinc-700 rounded-2xl p-6 sm:p-8 transition-all duration-300 shadow-xl overflow-hidden">
            <div className="absolute top-0 right-0 w-80 h-80 bg-red-600/5 rounded-full blur-3xl group-hover:bg-red-600/10 transition-colors pointer-events-none" />

            <div className="flex flex-wrap items-center gap-3 mb-4">
              <span className={`text-xs font-semibold px-3 py-1 rounded-full border ${categoryColors[featuredPost.category]?.bg} ${categoryColors[featuredPost.category]?.text} ${categoryColors[featuredPost.category]?.border}`}>
                {featuredPost.category}
              </span>
              <div className="flex items-center gap-1.5 text-xs text-zinc-400">
                <Clock className="w-3.5 h-3.5" />
                <span>{featuredPost.readTime}</span>
              </div>
              <div className="flex items-center gap-1.5 text-xs text-zinc-400">
                <Calendar className="w-3.5 h-3.5" />
                <span>{featuredPost.publishedAt}</span>
              </div>
            </div>

            <Link href={`/blog/${featuredPost.slug}`}>
              <h3 className="text-2xl sm:text-3xl md:text-4xl font-bold text-zinc-100 group-hover:text-red-400 transition-colors mb-4 leading-tight">
                {featuredPost.title}
              </h3>
            </Link>

            <p className="text-zinc-400 text-sm sm:text-base leading-relaxed mb-6 max-w-3xl">
              {featuredPost.excerpt}
            </p>

            <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 pt-4 border-t border-zinc-800/80">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-full bg-red-600/20 border border-red-500/30 flex items-center justify-center font-bold text-red-400 text-sm">
                  AR
                </div>
                <div>
                  <div className="text-sm font-semibold text-zinc-200">{featuredPost.author.name}</div>
                  <div className="text-xs text-zinc-500">{featuredPost.author.role}</div>
                </div>
              </div>

              <Link
                href={`/blog/${featuredPost.slug}`}
                className="inline-flex items-center gap-2 bg-red-600 hover:bg-red-700 text-white font-medium text-sm px-5 py-2.5 rounded-xl transition-all shadow-md group-hover:translate-x-0.5"
              >
                Read Masterclass
                <ArrowRight className="w-4 h-4" />
              </Link>
            </div>
          </div>
        </div>

        {/* All Articles Section */}
        <div className="mb-16">
          <div className="flex items-center justify-between mb-8 border-b border-zinc-800 pb-4">
            <div>
              <h2 className="text-2xl font-bold text-white flex items-center gap-2.5">
                <PlaySquare className="w-6 h-6 text-red-500" />
                All Creator Guides &amp; Masterclasses
              </h2>
              <p className="text-xs sm:text-sm text-zinc-400 mt-1">
                Explore in-depth strategies designed to grow your YouTube channel sustainably
              </p>
            </div>
            <span className="text-xs font-semibold bg-zinc-900 text-zinc-400 px-3 py-1.5 rounded-full border border-zinc-800 hidden sm:inline-block">
              {blogPosts.length} Articles
            </span>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {gridPosts.map((post) => {
              const color = categoryColors[post.category] || categoryColors["Creator Guides"];
              return (
                <article
                  key={post.slug}
                  className="flex flex-col bg-zinc-900/50 hover:bg-zinc-900 border border-zinc-800 hover:border-zinc-700 rounded-2xl p-6 transition-all duration-200 group relative"
                >
                  <div className="flex items-center justify-between gap-2 mb-3">
                    <span className={`text-[11px] font-semibold px-2.5 py-0.5 rounded-full border ${color.bg} ${color.text} ${color.border}`}>
                      {post.category}
                    </span>
                    <div className="flex items-center gap-1 text-[11px] text-zinc-400">
                      <Clock className="w-3 h-3" />
                      <span>{post.readTime}</span>
                    </div>
                  </div>

                  <Link href={`/blog/${post.slug}`} className="block flex-1">
                    <h3 className="font-bold text-zinc-100 group-hover:text-red-400 transition-colors text-lg mb-2.5 line-clamp-2 leading-snug">
                      {post.title}
                    </h3>
                    <p className="text-zinc-400 text-xs sm:text-sm leading-relaxed mb-4 line-clamp-3">
                      {post.excerpt}
                    </p>
                  </Link>

                  <div className="pt-4 border-t border-zinc-800/80 flex items-center justify-between mt-auto">
                    <div className="text-[11px] text-zinc-400">
                      <span>{post.author.name}</span>
                      <span className="mx-1.5 text-zinc-600">&bull;</span>
                      <span>{post.publishedAt}</span>
                    </div>
                    <Link
                      href={`/blog/${post.slug}`}
                      className="text-xs font-semibold text-red-400 hover:text-red-300 flex items-center gap-1 transition-colors"
                      aria-label={`Read ${post.title}`}
                    >
                      Read
                      <ArrowRight className="w-3.5 h-3.5 group-hover:translate-x-1 transition-transform" />
                    </Link>
                  </div>
                </article>
              );
            })}
          </div>
        </div>

        {/* Free YouTube Tools Section */}
        <div className="mb-20 p-8 sm:p-10 bg-gradient-to-br from-zinc-900/90 via-zinc-900/50 to-zinc-950 border border-zinc-800 rounded-3xl">
          <div className="text-center max-w-2xl mx-auto mb-8">
            <span className="text-xs font-bold text-red-400 uppercase tracking-widest bg-red-500/10 px-3 py-1 rounded-full border border-red-500/20 inline-block mb-3">
              Power Your Growth
            </span>
            <h2 className="text-2xl sm:text-3xl font-extrabold text-white">
              Complimentary YouTube Tools for Creators
            </h2>
            <p className="text-zinc-400 text-sm mt-2">
              Every tool on YTToolkits is 100% free with no registration, no browser extensions, and no hidden fees.
            </p>
          </div>

          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
            {[
              { name: "Tag Extractor", href: "/tag-extractor", icon: <Search className="w-4 h-4 text-blue-400" /> },
              { name: "Earnings Calc", href: "/earnings-calculator", icon: <DollarSign className="w-4 h-4 text-emerald-400" /> },
              { name: "Watch Time Calc", href: "/watch-time-calculator", icon: <Clock className="w-4 h-4 text-cyan-400" /> },
              { name: "Monetization Check", href: "/monetization-checker", icon: <TrendingUp className="w-4 h-4 text-green-400" /> },
              { name: "Rank Checker", href: "/rank-checker", icon: <Layers className="w-4 h-4 text-amber-400" /> },
              { name: "Shadowban Check", href: "/shadowban-detector", icon: <Shield className="w-4 h-4 text-purple-400" /> },
            ].map((tool, i) => (
              <Link
                key={i}
                href={tool.href}
                className="flex flex-col items-center justify-center p-3.5 bg-zinc-950/80 hover:bg-zinc-800/80 border border-zinc-800/80 hover:border-zinc-700 rounded-xl transition-all text-center group"
              >
                <div className="p-2 rounded-lg bg-zinc-900 border border-zinc-800 group-hover:scale-110 transition-transform mb-2">
                  {tool.icon}
                </div>
                <span className="text-xs font-medium text-zinc-300 group-hover:text-white">
                  {tool.name}
                </span>
              </Link>
            ))}
          </div>

          <div className="text-center mt-6">
            <Link
              href="/tools"
              className="text-xs font-semibold text-red-400 hover:text-red-300 transition-colors inline-flex items-center gap-1.5"
            >
              Browse All 33 Creator Tools <ArrowRight className="w-3.5 h-3.5" />
            </Link>
          </div>
        </div>

        {/* Deep Authority Educational SEO Content Section */}
        <section className="border-t border-zinc-800/80 pt-12 space-y-10 text-zinc-300">
          <div>
            <h2 className="text-2xl sm:text-3xl font-extrabold text-zinc-100 mb-4">
              Why Creator Strategy &amp; Algorithmic Literacy Dictate Success in 2026
            </h2>
            <p className="text-zinc-400 text-sm sm:text-base leading-relaxed mb-4">
              Over 500 hours of video are uploaded to YouTube every single minute. In this hyper-competitive creator landscape, guessing what works is no longer a viable growth model. The YouTube recommendation engine has evolved from a primitive keyword-matching database into one of the most sophisticated multimodal artificial intelligence networks on the planet.
            </p>
            <p className="text-zinc-400 text-sm sm:text-base leading-relaxed mb-4">
              At YTToolkits, we believe every creator deserves transparent, data-driven insights without paying exorbitant monthly fees to software vendors. Our Creator Academy masterclasses combine empirical reverse-engineering of YouTube&apos;s neural network with practical, field-tested playbooks to give independent creators an unfair advantage in organic search, homepage browse distribution, and sustainable monetization.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="p-5 bg-zinc-900/40 border border-zinc-800 rounded-2xl">
              <div className="flex items-center gap-2 font-bold text-zinc-100 mb-2 text-base">
                <CheckCircle2 className="w-5 h-5 text-emerald-400" />
                Algorithmic Clarity
              </div>
              <p className="text-zinc-400 text-xs sm:text-sm leading-relaxed">
                Understand exactly how Click-Through Rate (CTR), Average Percentage Viewed (APV), and session duration determine whether your video explodes or dies in obscurity.
              </p>
            </div>

            <div className="p-5 bg-zinc-900/40 border border-zinc-800 rounded-2xl">
              <div className="flex items-center gap-2 font-bold text-zinc-100 mb-2 text-base">
                <CheckCircle2 className="w-5 h-5 text-blue-400" />
                Monetization Mastery
              </div>
              <p className="text-zinc-400 text-xs sm:text-sm leading-relaxed">
                Explore real CPM and RPM figures across 20+ industries. Learn how to place mid-rolls, target high-intent Tier 1 audiences, and diversify beyond volatile AdSense checks.
              </p>
            </div>

            <div className="p-5 bg-zinc-900/40 border border-zinc-800 rounded-2xl">
              <div className="flex items-center gap-2 font-bold text-zinc-100 mb-2 text-base">
                <CheckCircle2 className="w-5 h-5 text-amber-400" />
                Evergreen SEO Systems
              </div>
              <p className="text-zinc-400 text-xs sm:text-sm leading-relaxed">
                Build reliable search assets that compound daily views for years to come. Master AI transcript indexing, chapter rich snippets, and keyword tag footprints.
              </p>
            </div>
          </div>

          <div>
            <h3 className="text-xl font-bold text-zinc-100 mb-3">
              How to Leverage the YTToolkits Ecosystem for Channel Growth
            </h3>
            <p className="text-zinc-400 text-sm sm:text-base leading-relaxed mb-4">
              To maximize the value of these resources, adopt a cyclical workflow: start by reading our in-depth guides to formulate your content strategy, use our free tools to execute keyword and competitor research, and return to our diagnostic calculators to evaluate your channel&apos;s monetization velocity.
            </p>
            <div className="flex flex-wrap gap-2 text-xs text-zinc-400 pt-2">
              <span className="font-semibold text-zinc-300">Popular Guides:</span>
              <Link href="/blog/how-much-does-youtube-pay-per-1000-views-2026" className="text-red-400 hover:underline">YouTube Pay Per 1,000 Views</Link>
              <span>&bull;</span>
              <Link href="/blog/how-to-get-4000-watch-hours-on-youtube-fast" className="text-red-400 hover:underline">4,000 Watch Hours Guide</Link>
              <span>&bull;</span>
              <Link href="/blog/youtube-seo-guide-how-to-rank-videos-number-1" className="text-red-400 hover:underline">YouTube SEO Masterclass</Link>
              <span>&bull;</span>
              <Link href="/blog/youtube-thumbnail-size-and-design-best-practices" className="text-red-400 hover:underline">Thumbnail Design Psychology</Link>
              <span>&bull;</span>
              <Link href="/blog/youtube-shorts-monetization-how-much-do-shorts-pay" className="text-red-400 hover:underline">Shorts Monetization Reality</Link>
            </div>
          </div>
        </section>
      </div>
    </div>
  );
}