365devnet/src/pages/[lang]/focusedyoutube.astro

---
export const prerender = true;

import Layout from '~/layouts/PageLayout.astro';
import { getFocusedYouTubeTranslation, focusedYouTubeSupportedLanguages } from '~/i18n/translations.youtube';

export async function getStaticPaths() {
  return focusedYouTubeSupportedLanguages.map((lang) => ({
    params: { lang },
  }));
}

const { lang } = Astro.params;
if (!focusedYouTubeSupportedLanguages.includes(lang)) {
  return Astro.redirect('/en/focusedyoutube');
}

const t = getFocusedYouTubeTranslation(lang);

const metadata = {
  title: t.title,
  description: t.summary,
};
---

<Layout metadata={metadata}>
  <div class="max-w-4xl mx-auto px-4 py-8">
    <!-- Hero Section -->
    <div class="text-center mb-12 backdrop-blur-sm bg-gradient-to-br from-red-50/80 to-orange-50/80 dark:from-slate-800/80 dark:to-slate-900/80 rounded-2xl p-8 shadow-lg">
      <div class="text-6xl mb-4">🎬</div>
      <h1 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-red-600 to-orange-600 bg-clip-text text-transparent">
        {t.title}
      </h1>
      <p class="text-xl text-gray-600 dark:text-slate-300 mb-6 max-w-2xl mx-auto">
        {t.summary}
      </p>
      <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <a 
          href="https://greasyfork.org/en/scripts/000000-focused-youtube" 
          target="_blank" 
          rel="noopener noreferrer"
          class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-red-600 to-orange-600 text-white rounded-lg font-semibold hover:from-red-700 hover:to-orange-700 transition-all shadow-lg"
        >
          <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
          </svg>
          {t.viewOnGreasyFork}
        </a>
        <a 
          href="https://github.com/yourusername/focusedyoutube" 
          target="_blank" 
          rel="noopener noreferrer"
          class="inline-flex items-center px-6 py-3 bg-white text-red-600 hover:bg-gray-100 rounded-lg font-semibold transition-colors"
        >
          <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
          </svg>
          GitHub
        </a>
      </div>
    </div>

    <!-- Description -->
    <div class="backdrop-blur-sm bg-white/70 dark:bg-slate-900/70 rounded-xl shadow p-8 mb-12">
      <p class="text-lg text-gray-700 dark:text-slate-200 leading-relaxed text-center">
        {t.summary}
      </p>
    </div>

    <!-- Features Grid -->
    <div class="mb-12">
      <h2 class="text-3xl font-bold text-center mb-8">{t.features.title}</h2>
      <div class="grid md:grid-cols-2 gap-6">
        {t.features.items.map((item, i) => (
          <div class="backdrop-blur-sm bg-white/70 dark:bg-slate-900/70 rounded-xl shadow p-6 hover:shadow-lg transition-shadow">
            <div class="flex items-start">
              <div class="text-2xl mr-4 mt-1">
                {i === 0 ? '🚫' : 
                 i === 1 ? '🙈' : 
                 i === 2 ? '🔁' : 
                 i === 3 ? '⏩' : 
                 i === 4 ? '💬' : 
                 i === 5 ? '🎥' : 
                 i === 6 ? '🌐' : 
                 i === 7 ? '⚙️' : 
                 i === 8 ? '📱' : 
                 i === 9 ? '🔓' : '🔧'}
              </div>
              <div>
                <p class="text-gray-700 dark:text-slate-200">{item}</p>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>

    <!-- Installation Guide -->
    <div class="backdrop-blur-sm bg-gradient-to-r from-blue-50/80 to-purple-50/80 dark:from-slate-800/80 dark:to-slate-900/80 rounded-xl shadow p-8 mb-12">
      <div class="text-center mb-6">
        <div class="text-4xl mb-4">📦</div>
        <h2 class="text-2xl font-bold mb-4">{t.howToInstall}</h2>
      </div>
      <div class="max-w-2xl mx-auto">
        <ol class="space-y-4">
          <li class="flex items-start">
            <div class="flex-shrink-0 w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold text-sm mr-4 mt-1">1</div>
            <p class="text-gray-700 dark:text-slate-200">{t.step1}</p>
          </li>
          <li class="flex items-start">
            <div class="flex-shrink-0 w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold text-sm mr-4 mt-1">2</div>
            <p class="text-gray-700 dark:text-slate-200">{t.step2}</p>
          </li>
          <li class="flex items-start">
            <div class="flex-shrink-0 w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold text-sm mr-4 mt-1">3</div>
            <p class="text-gray-700 dark:text-slate-200">{t.step3}</p>
          </li>
          <li class="flex items-start">
            <div class="flex-shrink-0 w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold text-sm mr-4 mt-1">4</div>
            <p class="text-gray-700 dark:text-slate-200">{t.step4}</p>
          </li>
        </ol>
      </div>
    </div>

    <!-- Important Notes -->
    <div class="backdrop-blur-sm bg-white/70 dark:bg-slate-900/70 rounded-xl shadow p-8 mb-12">
      <div class="flex items-center mb-6">
        <div class="text-3xl mr-4">⚠️</div>
        <h2 class="text-2xl font-bold">{t.notes.title}</h2>
      </div>
      <div class="grid md:grid-cols-1 gap-4">
        {t.notes.items.map((item, index) => (
          <div class="flex items-start p-4 bg-yellow-50/50 dark:bg-yellow-900/20 rounded-lg border-l-4 border-yellow-500">
            <div class="text-yellow-600 dark:text-yellow-400 mr-3 mt-1">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
              </svg>
            </div>
            <p class="text-gray-700 dark:text-slate-200">{item}</p>
          </div>
        ))}
      </div>
    </div>

    <!-- Target Audience & More Info -->
    <div class="grid md:grid-cols-2 gap-6">
      <div class="backdrop-blur-sm bg-gradient-to-br from-green-50/80 to-blue-50/80 dark:from-slate-800/80 dark:to-slate-900/80 rounded-xl shadow p-6">
        <div class="text-center mb-4">
          <div class="text-3xl mb-2">👥</div>
          <h3 class="text-xl font-bold">Who Is This For?</h3>
        </div>
        <p class="text-gray-700 dark:text-slate-200 italic text-center">
          {t.targetAudience}
        </p>
      </div>
      <div class="backdrop-blur-sm bg-gradient-to-br from-purple-50/80 to-pink-50/80 dark:from-slate-800/80 dark:to-slate-900/80 rounded-xl shadow p-6">
        <div class="text-center mb-4">
          <div class="text-3xl mb-2">📚</div>
          <h3 class="text-xl font-bold">Learn More</h3>
        </div>
        <p class="text-gray-700 dark:text-slate-200 text-center">
          {t.moreDetails}
        </p>
      </div>
    </div>
  </div>
</Layout>