Portfolio and Image Gallery

'use client';

import React from 'react';
import { RadialScrollGallery } from '@/components/ui/portfolio-and-image-gallery';
import { ArrowUpRight } from 'lucide-react';
import { Badge } from '@/components/ui/badge';

const projects = [
{ id: 1, title: "Nebula", cat: "Art", img: "https://cdn.21st.dev/assets/mirror/a0/a0ea47db06a3c131378bee578b9a53747fc7c257e607c38600da4a6f58ab3da1.jpg" },
{ id: 2, title: "Decay", cat: "Photo", img: "https://cdn.21st.dev/assets/mirror/a5/a5d2c310d841cad8bdbbde8b1a02cbe231b9194f3b3fc7c335a0047c565bdba0.jpg" },
{ id: 3, title: "Oceanic", cat: "Nature", img: "https://cdn.21st.dev/assets/mirror/1e/1e4e1a59f7b883f6850a55294853a8e01c6cc8aa7f2a24a96fdea0b9a32b1985.jpg" },
{ id: 4, title: "Neon", cat: "Tech", img: "https://cdn.21st.dev/assets/mirror/58/58c20ed0202d07d41d21b17d58acc08c4e158d7d39e6d9c739d17dba99d9b0b6.jpg" },
{ id: 5, title: "Desert", cat: "Travel", img: "https://cdn.21st.dev/assets/mirror/af/af8af20b571811682fe2cd0d5639e83177c5c524443bd80cc392ee4ae43d02ae.jpg" },
];

export default function DemoRadialScrollGalleryBento() {
return (
  <div className="bg-background min-h-[600px] text-foreground overflow-hidden rounded-lg border w-full">
    <div className="h-[300px] flex flex-col items-center justify-center space-y-4 pt-8">
      <div className="space-y-1 text-center">
        <span className="text-[10px] font-bold tracking-widest text-muted-foreground uppercase">
          Portfolio
        </span>
        <h1 className="text-4xl font-bold tracking-tighter">
          Work
        </h1>
      </div>
      <div className="animate-bounce text-muted-foreground text-xs">↓ Scroll</div>
    </div>

    <RadialScrollGallery
      className="!min-h-[600px]"
      baseRadius={400}
      mobileRadius={250}
      visiblePercentage={50}
      scrollDuration={2000}
    >
      {(hoveredIndex) =>
        projects.map((project, index) => {
           const isActive = hoveredIndex === index;
           return (
            <div 
              key={project.id} 
              className="group relative w-[200px] h-[280px] sm:w-[240px] sm:h-[320px] overflow-hidden rounded-xl bg-card border border-border shadow-lg"
            >
              <div className="absolute inset-0 overflow-hidden">
                <img
                  src={project.img}
                  alt={project.title}
                  className={`h-full w-full object-cover transition-transform duration-700 ease-out ${
                    isActive ? 'scale-110 blur-0' : 'scale-100 blur-[1px] grayscale-[30%]'
                  }`}
                />
                <div className="absolute inset-0 bg-gradient-to-t from-background/90 via-background/10 to-transparent opacity-60" />
              </div>

              <div className="absolute inset-0 flex flex-col justify-between p-4">
                <div className="flex justify-between items-start">
                  <Badge variant="secondary" className="text-[10px] px-2 py-0 bg-background/80 backdrop-blur">
                    {project.cat}
                  </Badge>
                  <div className={`w-6 h-6 rounded-full bg-primary text-primary-foreground flex items-center justify-center transition-all duration-500 ${isActive ? 'opacity-100 rotate-0' : 'opacity-0 -rotate-45'}`}>
                    <ArrowUpRight size={12} />
                  </div>
                </div>

                <div className={`transition-transform duration-500 ${isActive ? 'translate-y-0' : 'translate-y-2'}`}>
                  <h3 className="text-xl font-bold leading-tight text-foreground">{project.title}</h3>
                  <div className={`h-0.5 bg-primary mt-2 transition-all duration-500 ${isActive ? 'w-full opacity-100' : 'w-0 opacity-0'}`} />
                </div>
              </div>
            </div>
           );
        })
      }
    </RadialScrollGallery>

    <div className="h-[300px] flex items-center justify-center bg-muted/30">
      <h2 className="text-xl font-light tracking-widest uppercase text-muted-foreground">
        Footer
      </h2>
    </div>
  </div>
);
}