import React from 'react';

export const Blog: React.FC = () => {
  const posts = [
    {
      id: 1,
      title: "Miért fontos a gyors weboldal 2024-ben?",
      excerpt: "A betöltési sebesség nemcsak a felhasználói élményt, hanem a Google helyezést is drasztikusan befolyásolja.",
      date: "2024. Március 15.",
      image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
    },
    {
      id: 2,
      title: "Webshop trendek: Mire figyeljünk idén?",
      excerpt: "Az AI alapú ajánlók és a mobilfizetési megoldások térnyerése az e-kereskedelemben.",
      date: "2024. Február 28.",
      image: "https://images.unsplash.com/photo-1556742049-0cfed4f7a07d?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
    },
    {
      id: 3,
      title: "SEO alapok kezdőknek",
      excerpt: "Hogyan optimalizáld weboldalad tartalmát, hogy a Google szeresse?",
      date: "2024. Február 10.",
      image: "https://images.unsplash.com/photo-1432888498266-38ffec3eaf0a?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
    }
  ];

  return (
    <div className="pt-20 bg-gray-50 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">Blog</h1>
          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
            Hírek, tippek és szakmai cikkek a webfejlesztés és online marketing világából.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {posts.map((post) => (
            <article key={post.id} className="bg-white rounded-2xl shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
              <img src={post.image} alt={post.title} className="w-full h-48 object-cover" />
              <div className="p-6">
                <span className="text-sm text-primary font-semibold">{post.date}</span>
                <h3 className="text-xl font-bold text-gray-900 mt-2 mb-3 hover:text-primary cursor-pointer">{post.title}</h3>
                <p className="text-gray-600 text-sm mb-4">{post.excerpt}</p>
                <button className="text-primary font-medium hover:underline">Olvass tovább &rarr;</button>
              </div>
            </article>
          ))}
        </div>
        
        <div className="mt-12 text-center p-8 border-2 border-dashed border-gray-300 rounded-xl bg-white/50">
          <p className="text-gray-500 font-medium">További cikkek hamarosan feltöltésre kerülnek...</p>
        </div>
      </div>
    </div>
  );
};