import { Link } from 'react-router-dom';
import { ExternalLink } from 'lucide-react';
import { useI18n } from '../hooks/useI18n';
import { siteData } from '../data/siteData';
import Hero from '../components/Hero';
import StatsBar from '../components/StatsBar';
import SectionHeader from '../components/SectionHeader';
import FeaturedCard from '../components/FeaturedCard';

export default function HomePage() {
  const { t } = useI18n();

  const featuredProjects = siteData.projects
    .filter((p) => p.featured)
    .slice(0, 6);

  return (
    <div className="fade-in">
      <Hero />
      <div className="container">
        <StatsBar />

        <div className="section">
          <SectionHeader
            title={t('featured.title')}
            subtitle={t('featured.subtitle')}
            action={
              <Link to="/projects" className="section-action">
                {t('featured.viewAll')} →
              </Link>
            }
          />
          <div className="card-grid">
            {featuredProjects.map((p) => (
              <FeaturedCard key={p.id} project={p} />
            ))}
          </div>
        </div>

        <div className="section section-compact cta-section">
          <h2 className="section-title">{t('cta.title')}</h2>
          <p className="section-subtitle cta-subtitle">
            {t('cta.subtitle')}
          </p>
          <div className="cta-actions">
            <a
              href={siteData.brand.github}
              target="_blank"
              rel="noopener noreferrer"
              className="btn btn-primary"
            >
              <ExternalLink size={16} /> {t('cta.button')}
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}
