mintel.me/apps/web/src/components/blog/BlogPostHeader.tsx

"use client";

import * as React from "react";
import Link from "next/link";
import { Reveal } from "../Reveal";
import { Clock, Calendar, ArrowLeft } from "lucide-react";

interface BlogPostHeaderProps {
  title: string;
  description: string;
  date: string;
  readingTime: number;
  slug: string;
  thumbnail?: string;
}

export const BlogPostHeader: React.FC<BlogPostHeaderProps> = ({
  title,
  description,
  date,
  readingTime,
  slug,
  thumbnail,
}) => {
  return (
    <header className="pt-32 pb-8 md:pt-40 md:pb-12 max-w-4xl mx-auto px-5 md:px-0">
      <div className="space-y-8 md:space-y-10">
        <Reveal>
          <Link
            href="/blog"
            className="inline-flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-slate-400 hover:text-slate-900 transition-colors mb-8 group"
          >
            <ArrowLeft className="w-3 h-3 group-hover:-translate-x-1 transition-transform" />
            Zurück zur Übersicht
          </Link>
          <div className="space-y-6">
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-black text-slate-900 tracking-tighter leading-[1.1]">
              {title}
            </h1>
            <p className="font-serif italic text-slate-500 text-xl md:text-2xl leading-relaxed max-w-2xl">
              {description}
            </p>
          </div>
        </Reveal>

        {thumbnail && (
          <Reveal delay={0.1}>
            <div className="relative group my-12 md:my-16">
              {/* Architectural Border/Frame */}
              <div className="absolute -inset-4 border border-slate-100 rounded-[2.5rem] -z-10 group-hover:scale-[1.01] transition-transform duration-700" />
              <div className="absolute -inset-2 border border-slate-200/50 rounded-[2.2rem] -z-10 group-hover:scale-[1.005] transition-transform duration-500" />

              <div className="relative aspect-[21/9] w-full overflow-hidden rounded-3xl border border-slate-200 bg-slate-50 shadow-2xl shadow-slate-200/50">
                <img
                  src={thumbnail}
                  alt={title}
                  className="w-full h-full object-cover grayscale-[0.2] group-hover:grayscale-0 group-hover:scale-105 transition-all duration-1000"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-slate-900/20 to-transparent mix-blend-multiply" />
              </div>

              {/* Technical label */}
              <div className="absolute top-4 right-4 px-3 py-1 bg-white/90 backdrop-blur-sm border border-slate-200 rounded text-[8px] font-mono text-slate-500 uppercase tracking-widest">
                Visual_Blueprint_Ref: {slug?.substring(0, 8).toUpperCase()}
              </div>
            </div>
          </Reveal>
        )}

        <Reveal delay={0.2}>
          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 py-6 border-y border-slate-100">
            <div className="flex items-center gap-6 text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em]">
              <div className="flex items-center gap-2">
                <Calendar className="w-3 h-3 text-slate-300" />
                <time dateTime={date}>{date}</time>
              </div>
              <div className="flex items-center gap-2">
                <Clock className="w-3 h-3 text-slate-300" />
                <span>{readingTime} min Lesezeit</span>
              </div>
            </div>

            <div className="flex items-center gap-4">
              <span className="text-[8px] font-mono text-slate-300 uppercase tracking-[0.5em]">
                {slug?.substring(0, 4).toUpperCase() || "BLOG"}-
                {slug
                  ? slug
                    .split("")
                    .reduce((acc, char) => acc + char.charCodeAt(0), 0)
                    .toString(16)
                    .toUpperCase()
                    .padStart(4, "0")
                  : "0000"}
              </span>
              <span
                className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse"
                title="System Live"
              />
            </div>
          </div>
        </Reveal>
      </div>
    </header>
  );
};