import Header from "../components/Header";
import Footer from "../components/Footer";
import { Button } from "../components/ui/button";
import { ArrowRight } from "lucide-react";
import { Link } from "react-router-dom";
import accommodation1 from "../assets/accommodation-1.jpg";
import accommodation2 from "../assets/accommodation-2.jpg";
import room1 from "../assets/room-1.jpg";
import room2 from "../assets/room-2.jpg";
import room3 from "../assets/room-3.jpg";
import heroRoom from "../assets/hero-room.jpg";

const magazinePosts = [
  {
    id: 1,
    title: "Luxury Escapes: Exclusive Accommodations You Need to Experience",
    excerpt: "Discover the world's most exclusive luxury accommodations that redefine comfort and elegance. From private villas to boutique hotels.",
    image: accommodation1,
    date: "März 15, 2024",
    readTime: "5 min read"
  },
  {
    id: 2,
    title: "The Ultimate Guide to Finding Your Dream Vacation Rental",
    excerpt: "Learn the insider secrets to discovering and booking the perfect vacation rental that matches your style and budget preferences.",
    image: accommodation2, 
    date: "März 12, 2024",
    readTime: "8 min read"
  },
  {
    id: 3,
    title: "Suite Dreams 2024: Where Luxury and Comfort Converge",
    excerpt: "Explore the latest trends in luxury accommodation design and discover what makes a truly exceptional stay experience.",
    image: room1,
    date: "März 10, 2024",
    readTime: "6 min read"
  },
  {
    id: 4,
    title: "Home Havens: Crafting Comfort in Your Staycation Space",
    excerpt: "Transform your home into the ultimate retreat with expert tips for creating a luxury hotel experience in your own space.",
    image: room2,
    date: "März 8, 2024",
    readTime: "7 min read"
  },
  {
    id: 5,
    title: "Hidden Gems: Uncovering Unique Off-the-Beaten-Path Stays",
    excerpt: "Discover extraordinary accommodations in unexpected locations that offer authentic experiences and unforgettable memories.",
    image: room3,
    date: "März 5, 2024", 
    readTime: "9 min read"
  },
  {
    id: 6,
    title: "Luxury Villas: Your Passport to Exclusive Private Getaways",
    excerpt: "Experience the ultimate in privacy and luxury with our curated selection of the world's most stunning private villa rentals.",
    image: heroRoom,
    date: "März 2, 2024",
    readTime: "6 min read"
  }
];

const Magazin = () => {
  return (
    <div className="min-h-screen bg-background">
      <Header />
      <main>
        
        {/* Hero Section */}
        <section className="section-padding pt-24">
          <div className="container-narrow text-center">
            <h1 className="text-5xl font-light text-foreground mb-4 font-secondary tracking-wide">
              archive blog
            </h1>
            <p className="text-large text-muted-foreground max-w-2xl mx-auto">
              Entdecken Sie inspirierende Geschichten, Expertentipps und die neuesten Trends 
              rund um außergewöhnliche Unterkünfte und unvergessliche Reiseerlebnisse.
            </p>
          </div>
        </section>

        {/* Blog Posts */}
        <section className="section-padding">
          <div className="container-narrow">
            <div className="space-y-12">
              {magazinePosts.map((post, index) => (
                <article 
                  key={post.id}
                  className="flex flex-col md:flex-row gap-8 group"
                >
                  {/* Image */}
                  <div className="md:w-1/2 overflow-hidden rounded-lg">
                    <img
                      src={post.image}
                      alt={post.title}
                      className="w-full h-64 md:h-80 object-cover transition-transform duration-500 group-hover:scale-105"
                    />
                  </div>

                  {/* Content */}
                  <div className="md:w-1/2 flex flex-col justify-between">
                    <div>
                      <div className="flex items-center gap-4 text-sm text-muted-foreground mb-4">
                        <span>{post.date}</span>
                        <span>•</span>
                        <span>{post.readTime}</span>
                      </div>
                      
                      <h2 className="text-2xl font-medium text-foreground mb-4 font-secondary leading-tight group-hover:text-secondary transition-colors">
                        {post.title}
                      </h2>
                      
                      <p className="text-muted-foreground leading-relaxed mb-6">
                        {post.excerpt}
                      </p>
                    </div>

                    {/* Read More Button */}
                    <div className="flex justify-start">
                      <Link to={`/magazin/${post.id}`}>
                        <Button 
                          variant="outline" 
                          size="sm"
                          className="rounded-full w-12 h-12 p-0 border-2 border-foreground hover:bg-foreground hover:text-background transition-all duration-300 group-hover:scale-110"
                        >
                          <ArrowRight className="w-4 h-4" />
                        </Button>
                      </Link>
                    </div>
                  </div>
                </article>
              ))}
            </div>
          </div>
        </section>

        {/* Bottom CTA Section */}
        <section className="section-dark section-padding">
          <div className="container-narrow text-center">
            <div className="max-w-2xl mx-auto spacing-content">
              <h2 className="text-section-title mb-6 font-secondary">
                We're committed to your{" "}
                <span className="text-secondary font-medium">comfort</span> and{" "}
                <span className="text-secondary font-medium">satisfaction</span>{" "}
                for unforgettable experiences.
              </h2>
              
              <button className="btn-accent">
                Entdecken Sie mehr
              </button>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
};

export default Magazin;