'use client';

import Link from 'next/link';
import { motion } from 'framer-motion';
import { useLocale } from '@/lib/i18n/locale-context';
import { SectionHeader } from '@/components/ui/SectionHeader';
import { cn } from '@/lib/utils';

const FA_DIGITS = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'] as const;
const toFa = (n: number) =>
  n.toString().replace(/\d/g, (d) => FA_DIGITS[Number(d)]);

const CATEGORY_COLOR: Record<string, string> = {
  LLM: 'text-magenta border-magenta/30 bg-magenta/5',
  Automation: 'text-violet border-violet/30 bg-violet/5',
  'Google Stack': 'text-cyan border-cyan/30 bg-cyan/5',
  Infra: 'text-emerald border-emerald/30 bg-emerald/5',
  Mobile: 'text-electric border-electric/30 bg-electric/5',
  Strategy: 'text-electric border-electric/30 bg-electric/5',
};

export function Blog() {
  const { t, locale } = useLocale();

  return (
    <section id="blog" className="relative px-5 py-28 sm:px-8">
      <div className="mx-auto max-w-7xl">
        <SectionHeader
          eyebrow={t.blog.eyebrow}
          title={t.blog.title}
          sub={t.blog.sub}
        />

        <div className="mt-14 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
          {t.blog.items.map((post, i) => (
            <motion.article
              key={post.slug}
              initial={{ opacity: 0, y: 24 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: '-60px' }}
              transition={{
                duration: 0.55,
                ease: [0.22, 1, 0.36, 1],
                delay: 0.04 * i,
              }}
              className="glass group relative flex flex-col p-6 transition-shadow duration-300 hover:shadow-glow-electric"
            >
              <div className="flex items-center justify-between">
                <span
                  className={cn(
                    'rounded-full border px-2.5 py-0.5 font-mono text-[0.65rem] uppercase tracking-wider',
                    CATEGORY_COLOR[post.category] ?? 'text-slate-300 border-white/10 bg-white/[0.03]',
                  )}
                >
                  {post.category}
                </span>
                <span className="font-mono text-[0.7rem] text-slate-500">
                  {locale === 'fa' ? toFa(post.readTime) : post.readTime}{' '}
                  {t.blog.readTimeSuffix}
                </span>
              </div>

              <h3
                className={cn(
                  'mt-5 font-display text-[1.05rem] font-semibold leading-snug text-white transition-colors group-hover:text-electric',
                  locale === 'fa' && 'font-fa',
                )}
              >
                <Link href={`/blog/${post.slug}`} className="after:absolute after:inset-0">
                  {post.title}
                </Link>
              </h3>

              <p className="mt-3 grow text-[0.92rem] leading-relaxed text-slate-400">
                {post.excerpt}
              </p>

              <span className="mt-5 inline-flex items-center gap-1.5 font-mono text-[0.72rem] uppercase tracking-wider text-electric">
                {t.blog.readMore}
                <Arrow locale={locale} />
              </span>
            </motion.article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Arrow({ locale }: { locale: 'fa' | 'en' }) {
  return (
    <svg
      viewBox="0 0 24 24"
      width="12"
      height="12"
      fill="none"
      stroke="currentColor"
      strokeWidth="2.4"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={locale === 'fa' ? 'rotate-180' : ''}
      aria-hidden
    >
      <path d="M5 12 H19" />
      <path d="M13 6 L19 12 L13 18" />
    </svg>
  );
}