import Image from 'next/image';
import { Button } from '@/components/ui/button';

const quickActions = [
  {
    subtitle: 'Create your own ebook',
    title: 'DPE Publishing Studio',
    image: '/create.png',
    button: { label: 'Design Now', link: '#' },
  },
  {
    subtitle: 'Unlimited access to',
    title: '15,000 Fonts',
    image: '/text.png',
    button: { label: 'View More', link: '#' },
  },
  {
    subtitle: 'Unlimited access to',
    title: '25,000 Audios',
    image: '/paint.png',
    button: { label: 'View More', link: '#' },
  },
  {
    subtitle: 'Unlimited access to',
    title: '175,000 Graphics',
    image: '/brush.png',
    button: { label: 'View More', link: '#' },
  },
  {
    subtitle: 'Unlimited access to',
    title: '45,000 Videos',
    image: '/camera.png',
    button: { label: 'View More', link: '#' },
  },
];

export default function QuickActions() {
  return (
    <div className="relative w-full">
      {/* Top linear gradient image bar */}
      <div className="absolute top-0 left-0 w-full h-3 z-10">
        <Image src="/GradientMesh_Light.png" alt="Gradient Bar" className="w-full h-full object-cover" width={100} height={100} />
      </div>
      <div
        className="w-full flex flex-col items-center gap-6 py-4 sm:py-8 px-4 sm:px-8 md:px-12 lg:px-20 relative z-20"
        style={{
          background: 'radial-gradient(ellipse at 20% 20%, #f5f7fa 60%, #e8eafc 80%, #f7e7fa 100%, #e3f6fd 100%)',
          minHeight: '100%',
          width: '100%',
        }}
      >
        <div className="flex flex-col md:flex-row items-center w-full gap-6 md:gap-8">
          <div className="flex items-center">
           <h1>DPE</h1>
          </div>
          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4 w-full">
            {quickActions.map((action, idx) => (
              <div
                key={idx}
                className="bg-white shadow-md flex flex-col items-center justify-center text-center flex-shrink-0"
                style={{ 
                  height: 'auto',
                  minHeight: '170px',
                  padding: '11px 15px', 
                  borderRadius: 8, 
                  justifyContent: 'space-between', 
                  overflow: 'hidden' 
                }}
              >
                <Image 
                  src={action.image} 
                  alt={action.title} 
                  width={37.43} 
                  height={40.8} 
                  className="object-contain mx-auto mb-1 w-[30px] sm:w-[37.43px] h-auto" 
                />
                <div className="text-[8px] sm:text-[9px] text-[#151C4F] mb-0.5 w-full font-400">{action.subtitle}</div>
                <div className="font-[700] text-[9px] sm:text-[10px] text-[#151C4F] mb-0.5 w-full">{action.title}</div>
                <Button 
                  className="w-full h-6 sm:h-7 text-[8px] sm:text-[9px] px-0 mt-1 font-400 text-[#1A237E] border-[rgba(48,58,156,0.42)] rounded-sm" 
                  variant="outline" 
                  asChild
                >
                  <a href={action.button.link}>{action.button.label}</a>
                </Button>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}