﻿import React from 'react';
import { Head, Link } from '@inertiajs/react';
import { PublicLayout } from '@/Layouts/PublicLayout';
import { ArrowRight, Calendar } from 'lucide-react';

interface Props {
    posts: any[];
}

export default function Journal({ posts = [] }: Props) {
    return (
        <PublicLayout>
            <Head title="Journal & Stories — Primon Hotel Naalya" />

            <section className="relative py-28 bg-[#1A1A1A] text-[#FBF9F5] text-center border-b border-[#C5A880]/20">
                <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 space-y-4">
                    <span className="text-xs uppercase tracking-[0.3em] text-[#C5A880] font-semibold">
                        Hospitality & Destination
                    </span>
                    <h1 className="font-serif text-4xl sm:text-6xl font-light text-white">
                        The Primon Journal
                    </h1>
                    <p className="text-sm sm:text-base text-gray-300 font-light max-w-2xl mx-auto leading-relaxed">
                        Curated stories on Kampala's culinary landscapes, Naalya culture, wellness rituals, and travel insights.
                    </p>
                </div>
            </section>

            <section className="py-20 bg-[#FBF9F5]">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                        {posts.map((post) => (
                            <Link
                                key={post.id}
                                href={`/journal/${post.slug}`}
                                className="group bg-[#F3EFEA] rounded-3xl overflow-hidden border border-[#C5A880]/20 shadow-md hover:shadow-xl transition-all flex flex-col justify-between"
                            >
                                <div className="h-56 overflow-hidden">
                                    <img
                                        src={post.featured_image || 'https://images.unsplash.com/photo-1547471080-7cc2caa01a7e?auto=format&fit=crop&w=800&q=80'}
                                        alt={post.title}
                                        className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                                    />
                                </div>
                                <div className="p-6 flex-1 flex flex-col justify-between space-y-4">
                                    <div className="space-y-2">
                                        <span className="text-[10px] uppercase tracking-wider text-[#C5A880] font-semibold">
                                            {post.category}
                                        </span>
                                        <h3 className="font-serif text-2xl font-normal text-[#1A1A1A] group-hover:text-[#C5A880] transition-colors leading-snug">
                                            {post.title}
                                        </h3>
                                        <p className="text-xs text-gray-600 font-light line-clamp-3 leading-relaxed">
                                            {post.excerpt}
                                        </p>
                                    </div>

                                    <div className="pt-3 border-t border-gray-300 flex items-center justify-between text-xs font-semibold text-[#1A1A1A]">
                                        <span>Read Full Article</span>
                                        <ArrowRight className="h-4 w-4 group-hover:translate-x-1 transition-transform" />
                                    </div>
                                </div>
                            </Link>
                        ))}
                    </div>
                </div>
            </section>
        </PublicLayout>
    );
}
