import Link from 'next/link';
import SafeImage from '@/components/SafeImage';
import styles from './resources.module.css';
import { resources } from '@/data/resources';

export const metadata = {
    title: 'Resources - SocialBuddy',
    description: 'Guides, tips, and strategies to master social media marketing.',
};

export default function ResourcesPage() {
    return (
        <main className={styles.page}>
            {/* Standardized Hero Section */}
            <section className={styles.hero}>
                <div className={styles.container}>
                    <div className={styles.heroContent}>
                        <h1 className={styles.heroTitle}>Resources</h1>
                        <div className={styles.breadcrumbs}>
                            <Link href="/">Home</Link> <span>/</span> <span className={styles.breadcrumbActive}>Resources</span>
                        </div>
                    </div>
                </div>
            </section>

            <div className={styles.container}>
                <div className={styles.grid}>
                    {resources.map((resource) => (
                        <Link key={resource.id} href={`/resources/${resource.slug}`} className={styles.card}>
                            <div className={styles.imageWrapper}>
                                <SafeImage
                                    src={resource.image}
                                    alt={resource.title}
                                    className={styles.image}
                                    fallbackSrc={`https://placehold.co/600x400/png?text=${encodeURIComponent(resource.category)}`}
                                />
                            </div>
                            <div className={styles.content}>
                                <span className={styles.category}>{resource.category}</span>
                                <h2 className={styles.title}>{resource.title}</h2>
                                <p className={styles.excerpt}>{resource.excerpt}</p>
                            </div>
                        </Link>
                    ))}
                </div>
            </div>
        </main>
    );
}