'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import SEOHead from '../../../components/SEOHead';

// Category icons mapping
const categoryIcons = {
    company: (
        <svg
            className="w-5 h-5 text-white"
            fill="currentColor"
            viewBox="0 0 20 20"
            data-oid="p4p20db"
        >
            <path
                fillRule="evenodd"
                d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 110 2h-3a1 1 0 01-1-1v-6a1 1 0 00-1-1H9a1 1 0 00-1 1v6a1 1 0 01-1 1H4a1 1 0 110-2V4zm3 8a1 1 0 011-1h4a1 1 0 011 1v4H7v-4z"
                clipRule="evenodd"
                data-oid="-8xu.ng"
            />
        </svg>
    ),

    industry: (
        <svg
            className="w-5 h-5 text-white"
            fill="currentColor"
            viewBox="0 0 20 20"
            data-oid="yf6yye-"
        >
            <path
                d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z"
                data-oid=".jd6gm:"
            />
        </svg>
    ),

    technology: (
        <svg
            className="w-5 h-5 text-white"
            fill="currentColor"
            viewBox="0 0 20 20"
            data-oid="hp9tb30"
        >
            <path
                fillRule="evenodd"
                d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z"
                clipRule="evenodd"
                data-oid="dfobcve"
            />
        </svg>
    ),

    product: (
        <svg
            className="w-5 h-5 text-white"
            fill="currentColor"
            viewBox="0 0 20 20"
            data-oid="2gfajl6"
        >
            <path
                fillRule="evenodd"
                d="M10 2L3 7v11a1 1 0 001 1h12a1 1 0 001-1V7l-7-5zM6 9.5a.5.5 0 01.5-.5h7a.5.5 0 01.5.5v1a.5.5 0 01-.5.5h-7a.5.5 0 01-.5-.5v-1z"
                clipRule="evenodd"
                data-oid="x9ogiqk"
            />
        </svg>
    ),
};

// Helper function to convert article keys to slugs
const getSlugFromKey = (key: string) => {
    // If key is already a slug format, return as is
    if (key.includes('-')) {
        return key;
    }

    const slugMap: { [key: string]: string } = {
        article1: 'cloudtech-new-platform',
        article2: 'cloud-trends-2024',
        article3: 'optimize-cloud-server',
        article4: 'rds-new-features',
        article5: 'cloud-security-practices',
        article6: 'iso-27001-certification',
    };
    return slugMap[key] || key;
};

interface NewsPageProps {
    params: { locale: string };
}

export default function NewsPage({ params }: NewsPageProps) {
    const currentLang = params.locale || 'zh-CN';
    const [translations, setTranslations] = useState<any>({});
    const [commonTranslations, setCommonTranslations] = useState<any>({});
    const [loading, setLoading] = useState(true);
    const [selectedCategory, setSelectedCategory] = useState('all');
    const [isMenuOpen, setIsMenuOpen] = useState(false);
    const [searchTerm, setSearchTerm] = useState('');
    const [sortBy, setSortBy] = useState('date');

    useEffect(() => {
        const loadTranslations = async () => {
                    try {
            const [newsRes, commonRes] = await Promise.all([
                fetch(`/locales/${currentLang}/news.json`),
                fetch(`/locales/${currentLang}/common.json`),
            ]);

                const [newsData, commonData] = await Promise.all([
                    newsRes.json(),
                    commonRes.json(),
                ]);

                // Load markdown articles and extract frontmatter
                // 动态获取实际存在的文章列表
                const articlesApiRes = await fetch(`/api/articles/${currentLang}`);
                const articlesApiData = await articlesApiRes.json();
                const articleSlugs = articlesApiData.articles || [];
                
                const articlesData: any = {};
                for (const slug of articleSlugs) {
                    try {
                        const markdownRes = await fetch(`/docs/${currentLang}/news/${slug}.md`);
                        if (markdownRes.ok) {
                            const markdownContent = await markdownRes.text();
                            const { frontmatter } = parseMarkdown(markdownContent);
                            if (frontmatter.title) {
                                articlesData[slug] = frontmatter;
                            }
                        }
                    } catch (error) {
                        console.warn(`Failed to load article ${slug}:`, error);
                        // Fallback to JSON data if markdown is not available
                        const jsonKey = getJsonKeyFromSlug(slug);
                        if (newsData.articles && newsData.articles[jsonKey]) {
                            articlesData[slug] = newsData.articles[jsonKey];
                        }
                    }
                }

                // Merge markdown data with JSON translations
                const mergedNewsData = {
                    ...newsData,
                    articles: articlesData,
                };
                setTranslations(mergedNewsData);
                setCommonTranslations(commonData);
                setLoading(false);
            } catch (error) {
                console.error('Failed to load translations:', error);
                setLoading(false);
            }
        };

        loadTranslations();
    }, [currentLang]);

    // Helper function to parse markdown frontmatter
    const parseMarkdown = (markdown: string) => {
        // 更强健的正则表达式，处理各种换行符情况
        const frontmatterRegex = /^---\r?\n([\s\S]*?)\r?\n---\r?\n([\s\S]*)$/;
        const match = markdown.match(frontmatterRegex);
        
        if (!match) {
            return {
                frontmatter: {},
                content: markdown,
            };
        }

        const frontmatterText = match[1];
        const content = match[2];

        // Enhanced YAML parser for frontmatter
        const frontmatter: any = {};
        frontmatterText.split('\n').forEach((line) => {
            const colonIndex = line.indexOf(':');
            if (colonIndex === -1) return;

            const key = line.substring(0, colonIndex).trim();
            const value = line.substring(colonIndex + 1).trim();

            if (key && value) {
                if (key === 'tags') {
                    // Handle array format: [tag1, tag2, tag3]
                    if (value.startsWith('[') && value.endsWith(']')) {
                        frontmatter[key] = value
                            .slice(1, -1) // Remove brackets
                            .split(',')
                            .map((tag) => tag.trim().replace(/['"]/g, ''))
                            .filter((tag) => tag.length > 0);
                    } else {
                        frontmatter[key] = [value.replace(/['"]/g, '')];
                    }
                } else if (key === 'featured') {
                    // Handle boolean values
                    frontmatter[key] = value.toLowerCase() === 'true';
                } else {
                    // Handle string values
                    frontmatter[key] = value.replace(/^['"]|['"]$/g, '');
                }
            }
        });

        return { frontmatter, content };
    };

    // Helper function to map slugs to JSON keys for fallback
    const getJsonKeyFromSlug = (slug: string) => {
        const slugMap: { [key: string]: string } = {
            'cloudtech-new-platform': 'article1',
            'cloud-trends-2024': 'article2',
            'optimize-cloud-server': 'article3',
            'rds-new-features': 'article4',
            'cloud-security-practices': 'article5',
            'iso-27001-certification': 'article6',
        };
        return slugMap[slug] || slug;
    };

    if (loading) {
        return (
            <div
                className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-blue-50"
                data-oid="0dj0nbi"
            >
                <div className="text-center" data-oid="to:0fmd">
                    <div
                        className="w-16 h-16 border-4 border-green-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
                        data-oid="pu56bq0"
                    ></div>
                    <p className="text-gray-600" data-oid=".0lk70f">
                        Loading news...
                    </p>
                </div>
            </div>
        );
    }

    const t = translations;
    const common = commonTranslations;



    // Filter and sort articles
    let filteredArticles = Object.entries(t.articles || {});

    // Filter by category
    if (selectedCategory !== 'all') {
        filteredArticles = filteredArticles.filter(
            ([_, article]: [string, any]) => article.category === selectedCategory,
        );
    }

    // Filter by search term
    if (searchTerm) {
        filteredArticles = filteredArticles.filter(
            ([_, article]: [string, any]) =>
                article.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
                article.summary.toLowerCase().includes(searchTerm.toLowerCase()),
        );
    }

    // Sort articles
    filteredArticles.sort(([_, a]: [string, any], [__, b]: [string, any]) => {
        if (sortBy === 'date') {
            return new Date(b.date).getTime() - new Date(a.date).getTime();
        }
        return a.title.localeCompare(b.title);
    });

    // Get featured article (latest)
    const featuredArticle = Object.entries(t.articles || {})[0] as [string, any] | undefined;

    return (
        <>
            <SEOHead
                page="news"
                locale={currentLang as 'zh-CN' | 'zh-TW' | 'en'}
                canonicalUrl="/news"
                data-oid="qrex_t_"
            />

            <div
                className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50"
                data-oid="zcgakzm"
            >
                {/* Navigation */}
                <nav
                    className="bg-white/80 backdrop-blur-md border-b border-white/20 sticky top-0 z-50"
                    data-oid="1.rpndt"
                >
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="aqnqe:.">
                        <div className="flex justify-between items-center h-16" data-oid="-h51-3y">
                            {/* Logo */}
                            <Link
                                href={`/${currentLang}`}
                                className="flex items-center space-x-2"
                                data-oid="28eg86w"
                            >
                                <div
                                    className="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center"
                                    data-oid="2u8rbej"
                                >
                                    <svg
                                        className="w-5 h-5 text-white"
                                        fill="currentColor"
                                        viewBox="0 0 20 20"
                                        data-oid="bpni1aj"
                                    >
                                        <path
                                            d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"
                                            data-oid="iu3zy6-"
                                        />
                                    </svg>
                                </div>
                                <span
                                    className="text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent"
                                    data-oid="46-6k2a"
                                >
                                    CloudTech
                                </span>
                            </Link>

                            {/* Desktop Navigation */}
                            <div
                                className="hidden md:flex items-center space-x-8"
                                data-oid="90x5dtg"
                            >
                                <Link
                                    href={`/${currentLang}`}
                                    className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
                                    data-oid="2.br0ec"
                                >
                                    {common.nav?.home}
                                </Link>
                                <Link
                                    href={`/${currentLang}/products`}
                                    className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
                                    data-oid="7:bz0:8"
                                >
                                    {common.nav?.products}
                                </Link>
                                <Link
                                    href={`/${currentLang}/news`}
                                    className="text-blue-600 font-medium"
                                    data-oid="daeeyhx"
                                >
                                    {common.nav?.news}
                                </Link>
                                <Link
                                    href={`/${currentLang}/support`}
                                    className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
                                    data-oid="55yp61:"
                                >
                                    {common.nav?.support}
                                </Link>
                                <Link
                                    href={`/${currentLang}/about`}
                                    className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
                                    data-oid=".zs-b-e"
                                >
                                    {common.nav?.about}
                                </Link>
                            </div>

                            {/* Language Switcher & Mobile Menu */}
                            <div className="flex items-center space-x-4" data-oid="fe8f-ig">
                                <select
                                    value={currentLang}
                                    onChange={(e) => {
                                        const newLocale = e.target.value;
                                        const currentPath = window.location.pathname;
                                        const pathWithoutLocale = currentPath.replace(/^\/[^\/]+/, '');
                                        window.location.href = `/${newLocale}${pathWithoutLocale}`;
                                    }}
                                    className="bg-white/50 border border-white/30 rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                                    data-oid="31egcq5"
                                >
                                    <option value="zh-CN" data-oid="0a4o1pe">
                                        简体中文
                                    </option>
                                    <option value="zh-TW" data-oid="jl9_:ds">
                                        繁體中文
                                    </option>
                                    <option value="en" data-oid="ysb2u9a">
                                        English
                                    </option>
                                </select>

                                {/* Mobile menu button */}
                                <button
                                    onClick={() => setIsMenuOpen(!isMenuOpen)}
                                    className="md:hidden p-2 rounded-lg bg-white/50 border border-white/30"
                                    data-oid="ssvh5fw"
                                >
                                    <svg
                                        className="w-5 h-5"
                                        fill="none"
                                        stroke="currentColor"
                                        viewBox="0 0 24 24"
                                        data-oid="casc.-j"
                                    >
                                        <path
                                            strokeLinecap="round"
                                            strokeLinejoin="round"
                                            strokeWidth={2}
                                            d="M4 6h16M4 12h16M4 18h16"
                                            data-oid="laclma9"
                                        />
                                    </svg>
                                </button>
                            </div>
                        </div>

                        {/* Mobile Navigation */}
                        {isMenuOpen && (
                            <div
                                className="md:hidden py-4 border-t border-white/20"
                                data-oid="nnu3:j3"
                            >
                                <div className="flex flex-col space-y-2" data-oid="zmtv2wn">
                                    <Link
                                        href={`/${currentLang}`}
                                        className="px-4 py-2 text-gray-700 hover:bg-white/50 rounded-lg transition-colors"
                                        data-oid="7_wv5wn"
                                    >
                                        {common.nav?.home}
                                    </Link>
                                    <Link
                                        href={`/${currentLang}/products`}
                                        className="px-4 py-2 text-gray-700 hover:bg-white/50 rounded-lg transition-colors"
                                        data-oid="hhqy3vo"
                                    >
                                        {common.nav?.products}
                                    </Link>
                                    <Link
                                        href={`/${currentLang}/news`}
                                        className="px-4 py-2 text-blue-600 bg-blue-50 rounded-lg"
                                        data-oid="d093gl0"
                                    >
                                        {common.nav?.news}
                                    </Link>
                                    <Link
                                        href={`/${currentLang}/support`}
                                        className="px-4 py-2 text-gray-700 hover:bg-white/50 rounded-lg transition-colors"
                                        data-oid="enm36xg"
                                    >
                                        {common.nav?.support}
                                    </Link>
                                    <Link
                                        href={`/${currentLang}/about`}
                                        className="px-4 py-2 text-gray-700 hover:bg-white/50 rounded-lg transition-colors"
                                        data-oid="vwsedn7"
                                    >
                                        {common.nav?.about}
                                    </Link>
                                </div>
                            </div>
                        )}
                    </div>
                </nav>

                {/* Hero Section with Enhanced Design */}
                <div
                    className="relative bg-gradient-to-r from-green-500 to-blue-600 text-white py-24 overflow-hidden"
                    data-oid="3:71avh"
                >
                    {/* Background decorative elements */}
                    <div className="absolute inset-0 opacity-10" data-oid="8809o6-">
                        <div
                            className="absolute top-10 left-10 w-20 h-20 bg-white rounded-full"
                            data-oid="atlrb_c"
                        ></div>
                        <div
                            className="absolute top-32 right-20 w-16 h-16 bg-white rounded-full"
                            data-oid="q7-3krb"
                        ></div>
                        <div
                            className="absolute bottom-20 left-1/4 w-12 h-12 bg-white rounded-full"
                            data-oid="_ar2rio"
                        ></div>
                        <div
                            className="absolute bottom-32 right-1/3 w-24 h-24 bg-white rounded-full"
                            data-oid="7iea5k_"
                        ></div>
                    </div>

                    <div
                        className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"
                        data-oid="..ybu5p"
                    >
                        <h1
                            className="text-4xl md:text-6xl font-bold mb-6 drop-shadow-lg"
                            data-oid="a9v93ha"
                        >
                            {t.title}
                        </h1>
                        <p
                            className="text-xl md:text-2xl opacity-90 max-w-4xl mx-auto mb-8 drop-shadow-md"
                            data-oid="2hmzqi1"
                        >
                            {t.subtitle}
                        </p>

                        {/* Search Bar */}
                        <div className="max-w-2xl mx-auto" data-oid="lsbj0tl">
                            <div className="relative" data-oid="zkm4dg2">
                                <input
                                    type="text"
                                    placeholder={
                                        currentLang === 'en' ? 'Search news...' : '搜索新闻...'
                                    }
                                    value={searchTerm}
                                    onChange={(e) => setSearchTerm(e.target.value)}
                                    className="w-full px-6 py-4 pl-12 bg-white/20 backdrop-blur-sm border border-white/30 rounded-2xl text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50"
                                    data-oid="0y8rl1i"
                                />

                                <svg
                                    className="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-white/70"
                                    fill="none"
                                    stroke="currentColor"
                                    viewBox="0 0 24 24"
                                    data-oid=".mzfxl2"
                                >
                                    <path
                                        strokeLinecap="round"
                                        strokeLinejoin="round"
                                        strokeWidth={2}
                                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                                        data-oid="t1siteh"
                                    />
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>

                {/* Featured Article */}
                {featuredArticle && (
                    <div
                        className="py-16 bg-gradient-to-b from-white/50 to-transparent"
                        data-oid="mp_l9kp"
                    >
                        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="fmt.kky">
                            <div className="text-center mb-12" data-oid="wx685-3">
                                <h2
                                    className="text-3xl md:text-4xl font-bold text-gray-900 mb-4"
                                    data-oid="orcr6.x"
                                >
                                    {currentLang === 'en' ? 'Featured News' : '精选新闻'}
                                </h2>
                            </div>
                            <div
                                className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 shadow-2xl border border-white/20"
                                data-oid="ut4mrm2"
                            >
                                <div
                                    className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center"
                                    data-oid="5hww2m1"
                                >
                                    <div data-oid=".5byt:0">
                                        <div
                                            className="flex items-center space-x-4 mb-4"
                                            data-oid="5rk9si."
                                        >
                                            <span
                                                className="px-4 py-2 bg-gradient-to-r from-green-500 to-blue-600 text-white rounded-full text-sm font-medium"
                                                data-oid="b-fi4rp"
                                            >
                                                {t.categories?.[(featuredArticle[1] as any).category]}
                                            </span>
                                            <span className="text-gray-500" data-oid="8g5qf21">
                                                {(featuredArticle[1] as any).date}
                                            </span>
                                        </div>
                                        <h3
                                            className="text-3xl font-bold text-gray-900 mb-4"
                                            data-oid="e6v1vdp"
                                        >
                                            {(featuredArticle[1] as any).title}
                                        </h3>
                                        <p
                                            className="text-gray-600 text-lg leading-relaxed mb-6"
                                            data-oid="8ly_rst"
                                        >
                                            {(featuredArticle[1] as any).summary}
                                        </p>
                                        <div
                                            className="flex items-center justify-between"
                                            data-oid="8g8tt6r"
                                        >
                                            <span className="text-gray-500" data-oid="3i5szcl">
                                                {(featuredArticle[1] as any).author}
                                            </span>
                                            <Link
                                                href={`/${currentLang}/news/${getSlugFromKey(featuredArticle[0])}`}
                                                className="px-6 py-3 bg-gradient-to-r from-green-500 to-blue-600 text-white rounded-2xl font-semibold hover:shadow-lg transform hover:scale-105 transition-all duration-200"
                                                data-oid="rn-sfgm"
                                            >
                                                {common.hero?.learn || 'Read More'}
                                            </Link>
                                        </div>
                                    </div>
                                    <div className="relative" data-oid=":m5bc.5">
                                        <div
                                            className="w-full h-64 bg-gradient-to-r from-green-400 to-blue-500 rounded-2xl flex items-center justify-center"
                                            data-oid="6a-tum9"
                                        >
                                            <svg
                                                className="w-24 h-24 text-white/50"
                                                fill="currentColor"
                                                viewBox="0 0 20 20"
                                                data-oid="g7-snxu"
                                            >
                                                <path
                                                    fillRule="evenodd"
                                                    d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z"
                                                    clipRule="evenodd"
                                                    data-oid="ines3qn"
                                                />
                                            </svg>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                )}

                {/* Filter and Sort Controls */}
                <div className="py-8 bg-white/50" data-oid="_c0:eq2">
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="j2ng6g0">
                        <div
                            className="flex flex-col lg:flex-row justify-between items-center gap-6"
                            data-oid="j0mckh9"
                        >
                            {/* Category Filter */}
                            <div className="flex flex-wrap justify-center gap-3" data-oid="at2z3hl">
                                <button
                                    onClick={() => setSelectedCategory('all')}
                                    className={`px-6 py-3 rounded-full font-medium transition-all duration-200 ${
                                        selectedCategory === 'all'
                                            ? 'bg-green-500 text-white shadow-lg scale-105'
                                            : 'bg-white/80 text-gray-700 hover:bg-white hover:shadow-md'
                                    }`}
                                    data-oid="uf3rt6:"
                                >
                                    {currentLang === 'en' ? 'All News' : '全部新闻'}
                                </button>
                                {Object.entries(t.categories || {}).map(([key, category]: [string, any]) => (
                                    <button
                                        key={key}
                                        onClick={() => setSelectedCategory(key)}
                                        className={`flex items-center space-x-2 px-6 py-3 rounded-full font-medium transition-all duration-200 ${
                                            selectedCategory === key
                                                ? 'bg-green-500 text-white shadow-lg scale-105'
                                                : 'bg-white/80 text-gray-700 hover:bg-white hover:shadow-md'
                                        }`}
                                        data-oid="h.hwlix"
                                    >
                                        <div
                                            className={`w-6 h-6 rounded-full flex items-center justify-center ${
                                                selectedCategory === key
                                                    ? 'bg-white/20'
                                                    : 'bg-green-100'
                                            }`}
                                            data-oid="6kyq:1e"
                                        >
                                            {categoryIcons[key as keyof typeof categoryIcons]}
                                        </div>
                                        <span data-oid="lwejiem">{category}</span>
                                    </button>
                                ))}
                            </div>

                            {/* Sort Control */}
                            <div className="flex items-center space-x-4" data-oid="_due.g6">
                                <span className="text-gray-600 font-medium" data-oid=":kukyxk">
                                    {currentLang === 'en' ? 'Sort by:' : '排序：'}
                                </span>
                                <select
                                    value={sortBy}
                                    onChange={(e) => setSortBy(e.target.value)}
                                    className="bg-white/80 border border-white/30 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-green-500"
                                    data-oid="2ip8u3w"
                                >
                                    <option value="date" data-oid="-ab5uxp">
                                        {currentLang === 'en' ? 'Latest' : '最新'}
                                    </option>
                                    <option value="title" data-oid="r7lp-0g">
                                        {currentLang === 'en' ? 'Title' : '标题'}
                                    </option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                {/* Articles Grid */}
                <div className="py-20" data-oid="usmvglh">
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="5jm_dte">
                        {filteredArticles.length === 0 ? (
                            <div className="text-center py-16" data-oid="9iol0_9">
                                <svg
                                    className="w-24 h-24 text-gray-300 mx-auto mb-4"
                                    fill="none"
                                    stroke="currentColor"
                                    viewBox="0 0 24 24"
                                    data-oid=":w12prj"
                                >
                                    <path
                                        strokeLinecap="round"
                                        strokeLinejoin="round"
                                        strokeWidth={1}
                                        d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
                                        data-oid="15f_srz"
                                    />
                                </svg>
                                <h3
                                    className="text-xl font-semibold text-gray-600 mb-2"
                                    data-oid="qt7ybn3"
                                >
                                    {currentLang === 'en' ? 'No articles found' : '未找到相关文章'}
                                </h3>
                                <p className="text-gray-500" data-oid="b4vho3q">
                                    {currentLang === 'en'
                                        ? 'Try adjusting your search or filter criteria'
                                        : '请尝试调整搜索或筛选条件'}
                                </p>
                            </div>
                        ) : (
                            <>
                                <div className="text-center mb-12" data-oid="rtz3pg_">
                                    <h2
                                        className="text-3xl md:text-4xl font-bold text-gray-900 mb-4"
                                        data-oid="_ttoq0t"
                                    >
                                        {selectedCategory === 'all'
                                            ? currentLang === 'en'
                                                ? 'Latest News'
                                                : '最新资讯'
                                            : t.categories?.[selectedCategory]}
                                    </h2>
                                    <p className="text-xl text-gray-600" data-oid="_j0-ua0">
                                        {currentLang === 'en'
                                            ? `Found ${filteredArticles.length} articles`
                                            : `找到 ${filteredArticles.length} 篇文章`}
                                    </p>
                                </div>

                                <div
                                    className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
                                    data-oid="gy0brp-"
                                >
                                    {filteredArticles.map(
                                        ([key, article]: [string, any], index) => (
                                            <article
                                                key={key}
                                                className="group bg-white/80 backdrop-blur-sm rounded-3xl p-6 shadow-lg hover:shadow-2xl transition-all duration-300 border border-white/20 hover:scale-105"
                                                style={{ animationDelay: `${index * 100}ms` }}
                                                data-oid="k039gtk"
                                            >
                                                {/* Article Image Placeholder */}
                                                <div
                                                    className="w-full h-48 bg-gradient-to-r from-green-400 to-blue-500 rounded-2xl mb-6 flex items-center justify-center group-hover:scale-105 transition-transform duration-300"
                                                    data-oid="9nniwy7"
                                                >
                                                    <div
                                                        className="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center"
                                                        data-oid="qzw_tnf"
                                                    >
                                                        {
                                                            categoryIcons[
                                                                article.category as keyof typeof categoryIcons
                                                            ]
                                                        }
                                                    </div>
                                                </div>

                                                <div
                                                    className="flex items-center justify-between mb-4"
                                                    data-oid="_iyfqhu"
                                                >
                                                    <span
                                                        className="px-3 py-1 bg-green-100 text-green-600 rounded-full text-sm font-medium"
                                                        data-oid="szd.:ly"
                                                    >
                                                        {t.categories?.[article.category]}
                                                    </span>
                                                    <span
                                                        className="text-gray-500 text-sm"
                                                        data-oid=":jt7u.k"
                                                    >
                                                        {article.date}
                                                    </span>
                                                </div>

                                                <h3
                                                    className="text-xl font-bold text-gray-900 mb-3 line-clamp-2 group-hover:text-green-600 transition-colors"
                                                    data-oid="neb8oxq"
                                                >
                                                    {article.title}
                                                </h3>

                                                <p
                                                    className="text-gray-600 mb-6 line-clamp-3 leading-relaxed"
                                                    data-oid="p9q.m_z"
                                                >
                                                    {article.summary}
                                                </p>

                                                <div
                                                    className="flex items-center justify-between"
                                                    data-oid="gn9fqm-"
                                                >
                                                    <div
                                                        className="flex items-center space-x-2"
                                                        data-oid="3inb2j3"
                                                    >
                                                        <div
                                                            className="w-8 h-8 bg-gradient-to-r from-green-400 to-blue-500 rounded-full flex items-center justify-center"
                                                            data-oid="pb145b:"
                                                        >
                                                            <svg
                                                                className="w-4 h-4 text-white"
                                                                fill="currentColor"
                                                                viewBox="0 0 20 20"
                                                                data-oid=".--g4vf"
                                                            >
                                                                <path
                                                                    fillRule="evenodd"
                                                                    d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
                                                                    clipRule="evenodd"
                                                                    data-oid="9epd4kb"
                                                                />
                                                            </svg>
                                                        </div>
                                                        <span
                                                            className="text-sm text-gray-500 font-medium"
                                                            data-oid="q2.p4nu"
                                                        >
                                                            {article.author}
                                                        </span>
                                                    </div>
                                                    <Link
                                                        href={`/${currentLang}/news/${getSlugFromKey(key)}`}
                                                        className="px-4 py-2 bg-gradient-to-r from-green-500 to-blue-600 text-white rounded-lg font-medium hover:shadow-lg transform hover:scale-105 transition-all duration-200"
                                                        data-oid="x3qwm0n"
                                                    >
                                                        {common.hero?.learn || 'Read More'}
                                                    </Link>
                                                </div>
                                            </article>
                                        ),
                                    )}
                                </div>
                            </>
                        )}
                    </div>
                </div>

                {/* Newsletter Subscription */}
                <div
                    className="py-20 bg-gradient-to-r from-green-500 to-blue-600"
                    data-oid="lfym:.s"
                >
                    <div
                        className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"
                        data-oid="oncwycs"
                    >
                        <h2
                            className="text-3xl md:text-4xl font-bold text-white mb-6"
                            data-oid="5hnayt_"
                        >
                            {currentLang === 'en'
                                ? 'Stay Updated with Our Latest News'
                                : '订阅我们的最新资讯'}
                        </h2>
                        <p
                            className="text-xl text-white/90 mb-8 max-w-3xl mx-auto"
                            data-oid="aswdbad"
                        >
                            {currentLang === 'en'
                                ? 'Get the latest cloud computing insights, industry trends, and product updates delivered to your inbox.'
                                : '获取最新的云计算洞察、行业趋势和产品更新，直接发送到您的邮箱。'}
                        </p>
                        <div className="max-w-md mx-auto flex gap-4" data-oid="i8wsldj">
                            <input
                                type="email"
                                placeholder={
                                    currentLang === 'en' ? 'Enter your email' : '输入您的邮箱'
                                }
                                className="flex-1 px-6 py-4 bg-white/20 backdrop-blur-sm border border-white/30 rounded-2xl text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50"
                                data-oid="ci0gw-g"
                            />

                            <button
                                className="px-8 py-4 bg-white text-green-600 rounded-2xl font-semibold hover:shadow-lg transform hover:scale-105 transition-all duration-200"
                                data-oid="61h5zqz"
                            >
                                {currentLang === 'en' ? 'Subscribe' : '订阅'}
                            </button>
                        </div>
                    </div>
                </div>

                {/* Footer */}
                <footer className="bg-gray-900 text-white py-12" data-oid="y56hb0f">
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="6wal37m">
                        <div className="text-center" data-oid="0kn:47t">
                            <div
                                className="flex items-center justify-center space-x-2 mb-4"
                                data-oid="g0dewel"
                            >
                                <div
                                    className="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center"
                                    data-oid="v53cdrb"
                                >
                                    <svg
                                        className="w-5 h-5 text-white"
                                        fill="currentColor"
                                        viewBox="0 0 20 20"
                                        data-oid="zxgk_gd"
                                    >
                                        <path
                                            d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"
                                            data-oid="_th28vo"
                                        />
                                    </svg>
                                </div>
                                <span className="text-xl font-bold" data-oid="xiiixke">
                                    CloudTech
                                </span>
                            </div>
                            <p className="text-gray-400 mb-8 max-w-2xl mx-auto" data-oid="30y.qqe">
                                {common.footer?.company_desc}
                            </p>
                            <p className="text-gray-400" data-oid="1b74te3">
                                {common.footer?.copyright}
                            </p>
                        </div>
                    </div>
                </footer>
            </div>
        </>
    );
}
