import React from 'react';
import { ExternalLink } from 'lucide-react';
import { Link } from 'react-router-dom';

export const References: React.FC = () => {
  // Demo projects that now have real pages
  const projects = [
    {
      id: 1,
      title: "SweetCraving Desszertműhely",
      category: "Landing Page",
      image: "https://images.unsplash.com/photo-1563729784474-d77dbb933a9e?ixlib=rb-4.0.3&auto=format&fit=crop&w=1073&q=80",
      description: "Fiatalos, kézműves desszertműhely bemutatkozó oldala.",
      link: "/demos/sweetcraving"
    },
    {
      id: 2,
      title: "BlueWave Solar Kft.",
      category: "Pro Web + Aloldalak",
      image: "https://images.unsplash.com/photo-1509391366360-2e959784a276?ixlib=rb-4.0.3&auto=format&fit=crop&w=1074&q=80",
      description: "Megújuló energiaforrások vállalati weboldala kalkulátorral.",
      link: "/demos/bluewave"
    },
    {
      id: 3,
      title: "Steelguard Biztonságtechnika",
      category: "Enterprise Rendszer",
      image: "https://images.unsplash.com/photo-1518770660439-4636190af475?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80",
      description: "High-tech biztonságtechnikai portál és ügyfélkapu.",
      link: "/demos/steelguard"
    },
    {
      id: 4,
      title: "EcoHome Ingatlan",
      category: "Ingatlan weboldal",
      image: "https://images.unsplash.com/photo-1560518883-ce09059eeffa?ixlib=rb-4.0.3&auto=format&fit=crop&w=1073&q=80",
      description: "Modern ingatlanértékesítő platform kereső funkcióval.",
      link: null
    },
    {
      id: 5,
      title: "Glamour Beauty",
      category: "Webshop",
      image: "https://images.unsplash.com/photo-1483985988355-763728e1935b?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80",
      description: "Kozmetikai webáruház bankkártyás fizetéssel.",
      link: null
    },
    {
      id: 6,
      title: "Law Firm",
      category: "Bemutatkozó oldal",
      image: "https://images.unsplash.com/photo-1589829085413-56de8ae18c73?ixlib=rb-4.0.3&auto=format&fit=crop&w=1212&q=80",
      description: "Ügyvédi iroda letisztult, bizalomépítő oldala.",
      link: null
    }
  ];

  return (
    <div className="pt-20 bg-white min-h-screen">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div className="text-center mb-16">
          <h1 className="text-4xl font-extrabold text-gray-900 mb-4">Referenciáink</h1>
          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
            Büszkék vagyunk rá, hogy ügyfeleink álmait digitális valósággá formálhatjuk. Nézze meg korábbi munkáinkat!
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {projects.map((project) => (
            <div key={project.id} className="group relative overflow-hidden rounded-2xl shadow-lg cursor-pointer bg-gray-900">
              <img 
                src={project.image} 
                alt={project.title} 
                className="w-full h-72 object-cover transform group-hover:scale-110 transition-transform duration-500 opacity-90 group-hover:opacity-60"
              />
              
              <div className="absolute inset-0 flex flex-col justify-end p-6 bg-gradient-to-t from-gray-900 via-gray-900/40 to-transparent">
                <span className="text-primary font-medium text-sm mb-1">{project.category}</span>
                <h3 className="text-white text-2xl font-bold mb-2">{project.title}</h3>
                <p className="text-gray-300 text-sm mb-4 line-clamp-2">{project.description}</p>
                
                {project.link ? (
                  <Link to={project.link} className="flex items-center text-white font-semibold hover:text-primary transition-colors">
                    Megtekintés <ExternalLink className="ml-2 w-4 h-4" />
                  </Link>
                ) : (
                  <span className="text-gray-500 text-sm italic">Hamarosan elérhető</span>
                )}
              </div>
            </div>
          ))}
        </div>

        <div className="mt-12 p-4 bg-purple-50 rounded-lg text-center text-gray-600 border border-purple-100">
          <p className="italic">
            "A képek illusztrációk. A valódi referenciamunkákat az ügyfél kérésére e-mailben küldött portfólió tartalmazza."
          </p>
        </div>
      </div>
    </div>
  );
};