remarks

src/components/NewspaperClipping.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import Image from "next/image";
+import { X } from "lucide-react";
+
+export default function NewspaperClipping() {
+  const [open, setOpen] = useState(false);
+
+  const close = useCallback(() => setOpen(false), []);
+
+  useEffect(() => {
+    if (!open) return;
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") close();
+    };
+    document.addEventListener("keydown", handleKey);
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", handleKey);
+      document.body.style.overflow = "";
+    };
+  }, [open, close]);
+
+  return (
+    <>
+      <div
+        className="aspect-[4/3] rounded-lg overflow-hidden bg-gray-100 shadow-xl border-l-8 border-[color:var(--brand)] cursor-pointer group relative"
+        onClick={() => setOpen(true)}
+      >
+        <Image
+          src="/images/newspaper.webp"
+          alt="Budd Electric Co. featured in the local newspaper"
+          fill
+          sizes="(max-width: 1024px) 100vw, 50vw"
+          className="object-contain p-3 group-hover:scale-105 transition-transform duration-300"
+          loading="lazy"
+        />
+        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors flex items-center justify-center">
+          <span className="text-white text-sm font-bold opacity-0 group-hover:opacity-100 transition-opacity bg-black/60 px-4 py-2 rounded">Click to enlarge</span>
+        </div>
+      </div>
+      <p className="mt-3 text-center text-sm text-gray-400 italic">Featured in the local press</p>
+
+      {open && (
+        <div
+          className="fixed inset-0 z-50 bg-black/85 flex items-center justify-center p-4 md:p-8"
+          onClick={close}
+        >
+          <button
+            onClick={close}
+            className="absolute top-4 right-4 text-white/80 hover:text-white transition-colors z-10"
+            aria-label="Close"
+          >
+            <X size={36} strokeWidth={2} />
+          </button>
+          <div
+            className="relative max-w-5xl w-full max-h-[90vh]"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <Image
+              src="/images/newspaper.webp"
+              alt="Budd Electric Co. featured in the local newspaper"
+              width={1600}
+              height={1200}
+              className="object-contain w-full h-full max-h-[90vh]"
+              unoptimized
+            />
+          </div>
+        </div>
+      )}
+    </>
+  );
+}