Home.jsx

import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import projects from '../data/projects.js';
import ProjectCard from '../components/ProjectCard.jsx';

export default function Home() {
  const { t } = useTranslation();
  const featured = projects.filter((p) => p.featured).slice(0, 2);
  const taglineSecondary = t('brand.taglineSecondary');

  return (
    <>
      <section className="hero">
        <div className="hero__bg" aria-hidden="true" />
        <div className="hero__content">
          <p className="hero__tag">Madrid · {new Date().getFullYear()}</p>
          <h1 className="hero__title">{t('brand.tagline')}</h1>
          <p className="hero__subtitle">{t('home.subtitle')}</p>
          {taglineSecondary && <p className="hero__zh">{taglineSecondary}</p>}
          <Link to="/proyectos" className="btn hero__cta">
            {t('home.ctaProjects')}
          </Link>
        </div>
      </section>

      <section className="section philosophy">
        <div className="container--narrow">
          <span className="eyebrow">{t('home.philosophyTitle')}</span>
          <div className="philosophy__lines">
            <p>{t('home.philosophy.p1')}</p>
            <p>{t('home.philosophy.p2')}</p>
            <p>{t('home.philosophy.p3')}</p>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="featured__head">
            <div>
              <span className="eyebrow">{t('nav.projects')}</span>
              <h2>{t('home.featuredTitle')}</h2>
            </div>
            <p>{t('home.featuredSubtitle')}</p>
          </div>

          <div className="grid">
            {featured.map((p) => (
              <ProjectCard key={p.slug} project={p} />
            ))}
          </div>

          <div className="center-cta">
            <Link to="/proyectos" className="btn">
              {t('home.viewAll')}
            </Link>
          </div>
        </div>
      </section>
    </>
  );
}