import Link from "next/link";
import { BlogPost } from "@/content/blog";
import { ArrowRight, Calendar, Clock } from "lucide-react";
import { BlogCoverArt } from "./blog-cover-art";
import { LogoMark } from "@/components/logo";

interface BlogHeroFeaturedProps {
  post: BlogPost;
}

export function BlogHeroFeatured({ post }: BlogHeroFeaturedProps) {
  return (
    <div className="relative pt-2 pb-8">
      {/* 2-Column Hero Layout */}
      <div className="grid grid-cols-1 items-center gap-10 lg:grid-cols-12 lg:gap-12">
        {/* Left Column: Clean Editorial Article Details */}
        <div className="flex flex-col justify-between lg:col-span-7">
          <div className="space-y-4 sm:space-y-5">
            {/* Tag / Category Badge */}
            <div className="inline-flex items-center gap-2">
              <span className="rounded-full border border-border/80 bg-secondary/60 px-3.5 py-1 text-xs font-semibold uppercase tracking-wider text-foreground">
                {post.category}
              </span>
              <span className="flex items-center gap-1.5 rounded-full bg-[var(--accent-cyan-text)]/10 px-2.5 py-0.5 text-[11px] font-semibold text-[var(--accent-cyan-text)] border border-[var(--accent-cyan-text)]/30">
                <span className="size-1.5 rounded-full bg-[var(--accent-cyan-text)] shadow-[0_0_6px_rgba(8,145,178,0.8)] animate-pulse motion-reduce:animate-none" />
                Featured Guide
              </span>
            </div>

            {/* Giant Bold Headline */}
            <h1 className="text-3xl font-extrabold tracking-tight text-foreground sm:text-4xl lg:text-[2.65rem] leading-[1.15] text-balance">
              <Link
                href={`/blog/${post.slug}`}
                className="transition-colors duration-200 hover:text-[var(--accent-cyan-text)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-xs"
              >
                {post.title}
              </Link>
            </h1>

            {/* Sub-description Excerpt */}
            <p className="text-base sm:text-lg text-muted-foreground leading-relaxed max-w-xl text-pretty">
              {post.excerpt}
            </p>

            {/* Published Date & Reading Time */}
            <div className="flex items-center gap-3 text-xs text-muted-foreground font-medium pt-1">
              <span className="flex items-center gap-1">
                <Calendar className="size-3.5 text-muted-foreground/70" />
                Published on: {post.publishedDate}
              </span>
              <span>·</span>
              <span className="flex items-center gap-1">
                <Clock className="size-3.5 text-muted-foreground/70" />
                {post.readTime}
              </span>
            </div>
          </div>

          {/* Author Row & Read CTA Button */}
          <div className="mt-8 flex flex-wrap items-center justify-between gap-4 border-t border-border/60 pt-6">
            <div className="flex items-center gap-3.5">
              <div
                className={`flex size-11 shrink-0 items-center justify-center rounded-full bg-gradient-to-br ${post.author.avatarColor} text-background font-bold text-xs shadow-sm ring-2 ring-background`}
              >
                {post.author.avatarText}
              </div>
              <div className="flex flex-col">
                <span className="text-sm font-bold text-foreground">
                  {post.author.name}
                </span>
                <span className="text-xs text-muted-foreground">
                  {post.author.role}
                </span>
              </div>
            </div>

            <Link
              href={`/blog/${post.slug}`}
              className="inline-flex items-center gap-2 rounded-full bg-gradient-brand px-5 py-2.5 text-xs font-bold text-white shadow-sm glow-brand transition-all duration-200 hover:scale-105 hover:gap-2.5 motion-reduce:transition-none"
            >
              <span>Read article</span>
              <ArrowRight className="size-3.5 text-white" />
            </Link>
          </div>
        </div>

        {/* Right Column: Standard 16:9 Featured Banner Image (§Part 8) */}
        <div className="lg:col-span-5">
          <Link
            href={`/blog/${post.slug}`}
            className="group relative block overflow-hidden rounded-3xl border border-border/80 bg-card shadow-xl transition-all duration-300 hover:border-foreground/30 hover:shadow-2xl motion-reduce:transition-none"
          >
            {post.featuredImage ? (
              <div className="relative aspect-[16/9] w-full overflow-hidden bg-neutral-100 dark:bg-neutral-800">
                <img
                  src={post.featuredImage}
                  alt={post.featuredImageAlt || post.title}
                  className="size-full object-cover transition-transform duration-500 group-hover:scale-105"
                  loading="eager"
                />
              </div>
            ) : (
              <BlogCoverArt illustration={post.coverIllustration} variant="hero" />
            )}
          </Link>
        </div>
      </div>
    </div>
  );
}