import React from 'react';
import { ExternalLink } from 'lucide-react';

const WebsiteScreenshots: React.FC = () => {
  const websites = [
    {
      title: 'E-Commerce Platform',
      image: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
      url: '#',
      description: 'Modern online store with seamless checkout'
    },
    {
      title: 'Portfolio Website',
      image: 'https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
      url: '#',
      description: 'Creative showcase for digital artists'
    },
    {
      title: 'Business Landing Page',
      image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
      url: '#',
      description: 'Professional B2B service presentation'
    },
    {
      title: 'Blog Platform',
      image: 'https://images.unsplash.com/photo-1486312338219-ce68e2c6f44d?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
      url: '#',
      description: 'Content management system for writers'
    }
  ];

  return (
    <section className="py-16 bg-background-light">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-12">
          <h2 className="text-3xl font-bold text-text sm:text-4xl">
            Website Screenshots
          </h2>
          <p className="mt-4 text-lg text-lines max-w-2xl mx-auto">
            A glimpse of recent web development projects and designs
          </p>
        </div>

        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
          {websites.map((website, index) => (
            <div
              key={website.title}
              className="group bg-background rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 border border-lines overflow-hidden"
            >
              <div className="relative overflow-hidden">
                <img
                  className="w-full h-32 object-cover group-hover:scale-105 transition-transform duration-300"
                  src={website.image}
                  alt={`${website.title} screenshot`}
                  loading="lazy"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-background/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-end p-2">
                  <a
                    href={website.url}
                    className="p-2 bg-boxes rounded-full hover:bg-other transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-lines focus:ring-offset-2"
                    aria-label={`View ${website.title}`}
                  >
                    <ExternalLink className="h-4 w-4 text-text" />
                  </a>
                </div>
              </div>
              <div className="p-4">
                <h3 className="text-sm font-semibold text-text mb-1">
                  {website.title}
                </h3>
                <p className="text-xs text-lines">
                  {website.description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default WebsiteScreenshots;