'use client';
import React, { useState } from 'react';
import { ArrowRight } from 'lucide-react';
import { useTranslation } from '@client/contexts/LanguageContext';

export default function BlogPage() {
  const { t } = useTranslation();
  const [activeCategory, setActiveCategory] = useState('All');

  const categories = [
    t('landing.blog.categories.all', 'All'),
    t('landing.blog.categories.ai_tech', 'AI & Technology'),
    t('landing.blog.categories.ops', 'Restaurant Operations'),
    t('landing.blog.categories.cx', 'Customer Experience'),
    t('landing.blog.categories.case_studies', 'Case Studies'),
    t('landing.blog.categories.updates', 'Product Updates')
  ];

  const posts = [
    {
      title: t('landing.blog.post1.title', 'How Bella Napoli Reduced Missed Orders by 100% with AI Voice'),
      excerpt: t('landing.blog.post1.excerpt', "A single-location pizzeria in Munich was losing 30% of phone orders during Friday dinner rush. Here's how they fixed it in one afternoon."),
      category: t('landing.blog.categories.case_studies', 'Case Studies'),
      date: t('landing.blog.post1.date', 'Mar 10, 2026'),
      readTime: t('landing.blog.post1.readTime', '6 min read'),
      author: { name: 'Yuki Tanaka', initials: 'YT', gradient: 'from-purple-400 to-pink-500' },
      featured: true,
      tag: t('landing.blog.tags.case_study', 'Case Study'),
    },
    {
      title: t('landing.blog.post2.title', "The Real Cost of a Missed Phone Order (It's More Than You Think)"),
      excerpt: t('landing.blog.post2.excerpt', 'We analyzed 50,000 missed calls across 500 restaurants. The average restaurant loses $2,400/month to unanswered phones.'),
      category: t('landing.blog.categories.ops', 'Restaurant Operations'),
      date: t('landing.blog.post2.date', 'Mar 5, 2026'),
      readTime: t('landing.blog.post2.readTime', '8 min read'),
      author: { name: 'Carlos Vega', initials: 'CV', gradient: 'from-teal-400 to-teal-600' },
      featured: false,
      tag: t('landing.blog.tags.research', 'Research'),
    },
    {
      title: t('landing.blog.post3.title', 'Why Multilingual AI is Non-Negotiable for Modern Restaurants'),
      excerpt: t('landing.blog.post3.excerpt', "In cities like London, Toronto, and Singapore, 40% of restaurant customers prefer to order in their native language. Here's how to serve them."),
      category: t('landing.blog.categories.cx', 'Customer Experience'),
      date: t('landing.blog.post3.date', 'Feb 28, 2026'),
      readTime: t('landing.blog.post3.readTime', '5 min read'),
      author: { name: 'Amara Osei', initials: 'AO', gradient: 'from-amber-400 to-orange-500' },
      featured: false,
      tag: t('landing.blog.tags.insights', 'Insights'),
    },
    {
      title: t('landing.blog.post4.title', 'RestroAgent 3.0: Introducing Real-Time Sentiment Analysis'),
      excerpt: t('landing.blog.post4.excerpt', 'Our biggest product update yet. The AI now detects customer frustration in real-time and escalates before the situation escalates.'),
      category: t('landing.blog.categories.updates', 'Product Updates'),
      date: t('landing.blog.post4.date', 'Feb 20, 2026'),
      readTime: t('landing.blog.post4.readTime', '4 min read'),
      author: { name: 'Lena Fischer', initials: 'LF', gradient: 'from-blue-400 to-indigo-500' },
      featured: false,
      tag: t('landing.blog.tags.product', 'Product'),
    },
    {
      title: t('landing.blog.post5.title', 'How to Train Your AI Agent to Sound Like Your Restaurant'),
      excerpt: t('landing.blog.post5.excerpt', "A step-by-step guide to customizing your AI's personality, tone, and responses to match your brand voice perfectly."),
      category: t('landing.blog.categories.ai_tech', 'AI & Technology'),
      date: t('landing.blog.post5.date', 'Feb 14, 2026'),
      readTime: t('landing.blog.post5.readTime', '7 min read'),
      author: { name: 'Sophie Laurent', initials: 'SL', gradient: 'from-rose-400 to-pink-500' },
      featured: false,
      tag: t('landing.blog.tags.guide', 'Guide'),
    },
    {
      title: t('landing.blog.post6.title', "Spice Garden's Journey: From 1 to 8 Locations with One Dashboard"),
      excerpt: t('landing.blog.post6.excerpt', 'How a family-owned Indian restaurant group scaled to 8 locations without adding a single admin staff member.'),
      category: t('landing.blog.categories.case_studies', 'Case Studies'),
      date: t('landing.blog.post6.date', 'Feb 7, 2026'),
      readTime: t('landing.blog.post6.readTime', '9 min read'),
      author: { name: 'Yuki Tanaka', initials: 'YT', gradient: 'from-purple-400 to-pink-500' },
      featured: false,
      tag: t('landing.blog.tags.case_study', 'Case Study'),
    },
    {
      title: t('landing.blog.post7.title', 'The Future of Restaurant Ordering: Voice, Chat, or Both?'),
      excerpt: t('landing.blog.post7.excerpt', 'Data from 2,400 restaurants shows that restaurants offering both voice and chat AI see 34% higher order volume than single-channel operators.'),
      category: t('landing.blog.categories.ai_tech', 'AI & Technology'),
      date: t('landing.blog.post7.date', 'Jan 30, 2026'),
      readTime: t('landing.blog.post7.readTime', '6 min read'),
      author: { name: 'Arjun Mehta', initials: 'AM', gradient: 'from-orange-400 to-orange-600' },
      featured: false,
      tag: t('landing.blog.tags.research', 'Research'),
    },
    {
      title: t('landing.blog.post8.title', 'Table Booking Abandonment: Why 60% of Reservations Never Complete'),
      excerpt: t('landing.blog.post8.excerpt', "Most restaurant booking flows have 3-5 unnecessary steps. Here's how AI reduces abandonment by 60%."),
      category: t('landing.blog.categories.cx', 'Customer Experience'),
      date: t('landing.blog.post8.date', 'Jan 22, 2026'),
      readTime: t('landing.blog.post8.readTime', '5 min read'),
      author: { name: 'Carlos Vega', initials: 'CV', gradient: 'from-teal-400 to-teal-600' },
      featured: false,
      tag: t('landing.blog.tags.insights', 'Insights'),
    },
  ];

  const tagColors: Record<string, string> = {
    [t('landing.blog.tags.case_study', 'Case Study')]: 'bg-purple-50 dark:bg-purple-950/30 text-purple-600 dark:text-purple-400',
    [t('landing.blog.tags.research', 'Research')]: 'bg-blue-50 dark:bg-blue-950/30 text-blue-600 dark:text-blue-400',
    [t('landing.blog.tags.insights', 'Insights')]: 'bg-teal-50 dark:bg-teal-950/30 text-teal-600 dark:text-teal-400',
    [t('landing.blog.tags.product', 'Product')]: 'bg-green-50 dark:bg-green-950/30 text-green-600 dark:text-green-400',
    [t('landing.blog.tags.guide', 'Guide')]: 'bg-orange-50 dark:bg-orange-950/30 text-orange-600 dark:text-orange-400',
  };

  const filtered = activeCategory === t('landing.blog.categories.all', 'All') ? posts : posts.filter(p => p.category === activeCategory);
  const featured = filtered.find(p => p.featured);
  const rest = filtered.filter(p => !p.featured);

  return (
    <>
      {/* Hero */}
      <section className="py-20 sm:py-24 text-center relative overflow-hidden">
        <div className="absolute inset-0 -z-10">
          <div className="absolute top-0 right-1/4 w-64 sm:w-80 h-64 sm:h-80 bg-orange-400/15 dark:bg-orange-500/8 rounded-full blur-3xl" />
          <div className="absolute bottom-0 left-1/4 w-48 sm:w-64 h-48 sm:h-64 bg-teal-400/10 dark:bg-teal-500/6 rounded-full blur-3xl" />
        </div>
        <div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
          <p className="text-xs font-semibold text-orange-500 uppercase tracking-widest mb-4">{t('landing.blog.hero.subtitle', 'The RestroAgent Blog')}</p>
          <h1 className="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mb-4">{t('landing.blog.hero.title', 'Insights for restaurant operators')}</h1>
          <p className="text-lg sm:text-xl text-gray-500 dark:text-gray-400">{t('landing.blog.hero.description', 'Research, case studies, and practical guides for restaurants using AI.')}</p>
        </div>
      </section>

      <section className="pb-20 sm:pb-24 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Category Filter */}
        <div className="flex flex-wrap gap-2 mb-10 sm:mb-12 justify-center">
          {categories.map(cat => (
            <button key={cat} onClick={() => setActiveCategory(cat)}
              className={`px-3 sm:px-4 py-1.5 sm:py-2 rounded-full text-xs sm:text-sm font-medium transition-all duration-200 hover:-translate-y-0.5 ${activeCategory === cat ? 'bg-orange-500 text-white shadow-sm shadow-orange-500/25 hover:bg-orange-600' : 'bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:border-orange-200 dark:hover:border-orange-800 hover:text-orange-500 hover:shadow-sm'}`}>
              {cat}
            </button>
          ))}
        </div>

        {/* Featured Post */}
        {featured && (
          <div className="mb-8 sm:mb-10 p-6 sm:p-8 rounded-2xl bg-gradient-to-br from-gray-900 to-gray-800 dark:from-gray-950 dark:to-gray-900 border border-gray-700 relative overflow-hidden group hover:shadow-2xl hover:-translate-y-1 transition-all duration-300">
            <div className="absolute top-0 right-0 w-48 sm:w-64 h-48 sm:h-64 bg-orange-500/10 rounded-full blur-3xl" />
            <div className="relative">
              <div className="flex items-center gap-3 mb-4">
                <span className="px-2.5 py-1 rounded-full bg-orange-500 text-white text-xs font-bold">{t('landing.blog.featured.badge', 'Featured')}</span>
                <span className={`px-2.5 py-1 rounded-full text-xs font-semibold ${tagColors[featured.tag] || ''}`}>{featured.tag}</span>
              </div>
              <h2 className="text-xl sm:text-2xl lg:text-3xl font-bold text-white mb-3 group-hover:text-orange-300 transition-colors duration-200">{featured.title}</h2>
              <p className="text-gray-400 leading-relaxed mb-5 sm:mb-6 max-w-2xl text-sm sm:text-base">{featured.excerpt}</p>
              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                <div className="flex items-center gap-3">
                  <div className={`w-8 h-8 rounded-full bg-gradient-to-br ${featured.author.gradient} flex items-center justify-center text-white text-xs font-bold`}>{featured.author.initials}</div>
                  <div>
                    <p className="text-sm font-semibold text-white">{featured.author.name}</p>
                    <p className="text-xs text-gray-500">{featured.date} · {featured.readTime}</p>
                  </div>
                </div>
                <button className="flex items-center gap-2 text-orange-400 hover:text-orange-300 text-sm font-semibold transition-colors duration-200 group/btn">
                  {t('landing.blog.read_article', 'Read article')}
                  <ArrowRight size={14} strokeWidth={2.5} className="group-hover/btn:translate-x-0.5 transition-transform duration-200" />
                </button>
              </div>
            </div>
          </div>
        )}

        {/* Grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 sm:gap-6">
          {rest.map((post, i) => (
            <article key={i} className="group p-5 sm:p-6 rounded-2xl bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 hover:shadow-xl hover:shadow-black/5 dark:hover:shadow-black/20 hover:-translate-y-1.5 transition-all duration-300 flex flex-col cursor-pointer">
              <div className="flex items-center gap-2 mb-3 sm:mb-4">
                <span className={`px-2.5 py-1 rounded-full text-xs font-semibold ${tagColors[post.tag] || 'bg-gray-100 text-gray-500'}`}>{post.tag}</span>
                <span className="text-xs text-gray-400">{post.readTime}</span>
              </div>
              <h3 className="font-bold text-gray-900 dark:text-white mb-2 leading-snug group-hover:text-orange-500 dark:group-hover:text-orange-400 transition-colors duration-200 flex-1 text-sm sm:text-base">{post.title}</h3>
              <p className="text-sm text-gray-500 dark:text-gray-400 leading-relaxed mb-4 sm:mb-5 line-clamp-3">{post.excerpt}</p>
              <div className="flex items-center gap-3 mt-auto pt-3 sm:pt-4 border-t border-gray-50 dark:border-gray-800">
                <div className={`w-7 h-7 rounded-full bg-gradient-to-br ${post.author.gradient} flex items-center justify-center text-white text-xs font-bold flex-shrink-0`}>{post.author.initials}</div>
                <div className="flex-1 min-w-0">
                  <p className="text-xs font-semibold text-gray-700 dark:text-gray-300 truncate">{post.author.name}</p>
                  <p className="text-xs text-gray-400">{post.date}</p>
                </div>
                <ArrowRight size={14} strokeWidth={2} className="text-gray-300 dark:text-gray-600 group-hover:text-orange-400 group-hover:translate-x-0.5 transition-all duration-200 flex-shrink-0" />
              </div>
            </article>
          ))}
        </div>

        {/* Load more */}
        <div className="text-center mt-10 sm:mt-12">
          <button className="px-6 py-3 rounded-xl border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 font-semibold text-sm hover:border-orange-200 dark:hover:border-orange-800 hover:text-orange-500 hover:-translate-y-0.5 hover:shadow-sm transition-all duration-200">
            {t('landing.blog.load_more', 'Load more articles')}
          </button>
        </div>
      </section>
    </>
  );
}
