/**
 * BlogHero - Editorial-style hero section for blog listing page
 *
 * Displays the blog title, subtitle, and key statistics
 * with a subtle grid pattern background.
 */

import { BLOG_COLORS, BLOG_STYLES, SECTION_NUMBERS } from "@/lib/blog.config";

export interface BlogHeroProps {
  /** Language for localization */
  lang: "ar" | "en";
  /** Total number of blog posts */
  totalPosts: number;
  /** Translations for display text */
  translations: {
    blog: string;
    blogTitle: string;
    blogSubtitle: string;
    articles: string;
    arabicEnglish: string;
    weeklyUpdates: string;
  };
}

export default function BlogHero({
  lang,
  totalPosts,
  translations,
}: BlogHeroProps) {
  const stats = [
    { label: `${totalPosts} ${translations.articles}` },
    { label: translations.arabicEnglish },
    { label: translations.weeklyUpdates },
  ];

  return (
    <section
      className="relative py-24 md:py-32 bg-gradient-to-b from-white via-[#FAFAFA] to-white overflow-hidden"
      aria-labelledby="blog-hero-title"
    >
      {/* Subtle grid pattern */}
      <div
        className="pointer-events-none absolute inset-0 opacity-[0.02]"
        aria-hidden="true"
        style={{
          backgroundImage: `
            linear-gradient(to right, ${BLOG_COLORS.heading} 1px, transparent 1px),
            linear-gradient(to bottom, ${BLOG_COLORS.heading} 1px, transparent 1px)
          `,
          backgroundSize: "80px 80px",
        }}
      />

      <div className="relative z-10 mx-auto max-w-7xl px-6">
        <div className="max-w-4xl">
          {/* Section marker */}
          <div className="flex items-center gap-3 mb-8">
            <span className={BLOG_STYLES.sectionMarker} dir="ltr">
              {SECTION_NUMBERS.hero}
            </span>
            <div className={BLOG_STYLES.dividerLine} />
            <span
              className="text-sm font-medium uppercase tracking-wider"
              style={{ color: BLOG_COLORS.primary }}
            >
              {translations.blog}
            </span>
          </div>

          {/* Headline */}
          <h1
            id="blog-hero-title"
            className="text-5xl md:text-6xl lg:text-7xl font-bold leading-[1.1] tracking-tight mb-8"
            style={{ color: BLOG_COLORS.heading }}
          >
            {translations.blogTitle}
          </h1>

          {/* Subhead */}
          <p
            className="text-xl md:text-2xl leading-relaxed max-w-3xl mb-12"
            style={{ color: BLOG_COLORS.body }}
          >
            {translations.blogSubtitle}
          </p>

          {/* Stats row */}
          <div className="flex flex-wrap gap-8">
            {stats.map((stat, index) => (
              <div key={index} className="flex items-center gap-3">
                <div className={BLOG_STYLES.dotIndicator} />
                <span
                  className="font-medium"
                  style={{ color: BLOG_COLORS.heading }}
                >
                  {stat.label}
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}