einfach-produktiv/app/components/Blog.tsx

import Link from "next/link";

const featured = {
  thumbnail: "/blog-featured.jpg",
  category: "Fokus",
  readTime: "5 Min",
  title: "Der Feierabend-Knopf",
  excerpt:
    "So schaffst du deinen Tag wirklich im Feierabend und nicht, wenn der Laptop zu ist. Feierabend, wenn du ihn lebst",
  href: "/blog/feierabend-knopf",
};

const secondary = [
  {
    thumbnail: "/blog-post-1.jpg",
    category: "Methoden",
    readTime: "6 Min",
    title: "Die 2-Minuten-Regel richtig anwenden",
    excerpt:
      "Warum sie wirklich funktioniert – und wie du sie in deinem Alltag clever nutzt.",
    href: "/blog/2-minuten-regel",
  },
  {
    thumbnail: "/blog-post-2.jpg",
    category: "Tools",
    readTime: "4 Min",
    title: "Die Promodoro-Technik für deinen Alltag",
    excerpt:
      "Effektives Zeitmanagement in vier kleinen Schritten, die dir helfen, fokussiert und mit mehr Energie zu arbeiten.",
    href: "/blog/promodoro-technik",
  },
];

export function Blog() {
  return (
    <div id="blog" className="flex flex-col gap-8 lg:gap-[3rem] items-start pb-10 lg:pb-[4rem] w-full bg-[#f5f0e8]">

      {/* Section header */}
      <div className="flex flex-col gap-2 items-start px-4 md:px-8 lg:px-[5rem] w-full">
        <p className="font-bold text-[#f6a701] text-[1.25rem]">
          Neue Impulse
        </p>
        <p
          className="font-semibold text-[#222221] leading-normal"
          style={{ fontFamily: "var(--font-lora)", fontSize: "clamp(1.375rem, 2.5vw, 1.75rem)" }}
        >
          Gedanken, Methoden &amp; Impulse
        </p>
      </div>

      {/* Posts grid */}
      <div className="flex flex-col gap-4 lg:gap-[2.5rem] items-start px-4 md:px-8 lg:px-[5rem] w-full">

        {/* Featured post: stacked on mobile, side-by-side on lg+ */}
        <div className="w-full border border-[#d9d9d9] rounded-xl overflow-hidden flex flex-col lg:flex-row lg:gap-3">
          <div className="relative h-[200px] md:h-[240px] lg:h-[220px] w-full lg:w-[60%] lg:shrink-0">
            <img
              alt=""
              src={featured.thumbnail}
              className="absolute inset-0 w-full h-full object-cover pointer-events-none"
            />
          </div>
          <div className="flex flex-1 flex-col justify-between p-4 lg:py-4 lg:pr-4 lg:pl-0 min-w-0">
            <div className="flex flex-col gap-3">
              <div className="flex gap-2 items-center font-semibold text-[#777] text-[0.875rem] uppercase whitespace-nowrap">
                <span>{featured.category}</span>
                <span>•</span>
                <span>{featured.readTime}</span>
              </div>
              <div className="flex flex-col gap-3 text-[#222221]">
                <p
                  className="font-semibold leading-normal"
                  style={{ fontFamily: "var(--font-lora)", fontSize: "clamp(1.25rem, 2vw, 1.75rem)" }}
                >
                  {featured.title}
                </p>
                <p className="font-normal text-[1rem] leading-6">
                  {featured.excerpt}
                </p>
              </div>
            </div>
            <Link
              href={featured.href}
              className="font-bold text-[1rem] text-[#222221] whitespace-nowrap hover:text-[#f6a701] transition-colors mt-4 lg:mt-0"
            >
              → Zum Beitrag
            </Link>
          </div>
        </div>

        {/* Secondary posts: 1-col mobile → 2-col md+ */}
        <div className="flex flex-col md:flex-row gap-4 lg:gap-3 w-full">
          {secondary.map((post) => (
            <div
              key={post.title}
              className="flex-1 border border-[#d9d9d9] rounded-xl flex gap-3 items-center py-2"
            >
              <div className="rounded-xl overflow-hidden shrink-0 h-[120px] w-[9rem] md:h-[160px] md:w-[12rem] lg:h-[calc(230px-1rem)] lg:w-[14.7rem]">
                <img
                  alt=""
                  src={post.thumbnail}
                  className="w-full h-full object-cover pointer-events-none"
                />
              </div>
              <div className="flex flex-1 flex-col justify-between h-full min-w-0 py-2 pr-2 text-[#222221]">
                <div className="flex flex-col gap-2 lg:gap-3">
                  <div className="flex gap-2 items-center font-semibold text-[#777] text-[0.8rem] lg:text-[1rem] uppercase whitespace-nowrap">
                    <span>{post.category}</span>
                    <span>•</span>
                    <span>{post.readTime}</span>
                  </div>
                  <div className="flex flex-col gap-2 lg:gap-4">
                    <p
                      className="font-semibold leading-normal text-[1.1rem] lg:text-[1.25rem]"
                      style={{ fontFamily: "var(--font-lora)" }}
                    >
                      {post.title}
                    </p>
                    <p className="font-normal text-[0.9rem] lg:text-[1rem] leading-6 hidden md:block">
                      {post.excerpt}
                    </p>
                  </div>
                </div>
                <Link
                  href={post.href}
                  className="font-bold text-[0.9rem] lg:text-[1rem] whitespace-nowrap hover:text-[#f6a701] transition-colors mt-2"
                >
                  → Zum Beitrag
                </Link>
              </div>
            </div>
          ))}
        </div>

      </div>
    </div>
  );
}