import React from "react";
import { Link } from "react-router-dom";
import "./HomePage.css";
import SoupImage from "../img/Soup.jpg";
import BasicImage from "../img/Basic.jpg";  
import DessertImage from "../img/Dessert.jpg"; 
import SaladImage from "../img/Salad.jpg"; 
import SolyankaImage from "../img/Solyanka.jpg";
import MeatballsImage from "../img/Meatballs.jpg"; 
import CaesarImage from "../img/Caesar.jpg"; 
import HeroImage from "../img/HomePage.jpg";

function HomePage() {
  return (
    <div className="home-page">
      <section className="hero">
        <div className="hero-content"> 
          <div className="hero-image">
            <img src={HeroImage} alt="Hero Image" />
          </div>
          <div className="hero-text"> 
            <h1>Добро пожаловать в мир вкусных рецептов!</h1>
            <p>Найдите идеальный рецепт для любого случая.</p>
            <Link to="/categories" className="cta-button">
              Посмотреть категории
            </Link>
          </div>
        </div>
      </section>
      <section className="categories">
        <h2>Категории рецептов</h2>
        <div className="category-grid">
          <Link to="/category/salads" className="category-card">
            <img src={SaladImage} alt="Салаты" />
            <span>Салаты</span>
          </Link>

          <Link to="/category/soups" className="category-card">
            <img src={SoupImage} alt="Супы" />
            <span>Супы</span>
          </Link>

          <Link to="/category/main-courses" className="category-card">
            <img src={BasicImage} alt="Основные блюда" />
            <span>Основные блюда</span>
          </Link>

          <Link to="/category/desserts" className="category-card">
            <img src={DessertImage} alt="Десерты" />
            <span>Десерты</span>
          </Link>
        </div>
      </section>

      <section className="featured-recipes">
        <h2>Популярные рецепты</h2>
        <div className="recipe-grid">
          <div className="recipe-card">
            <img src={SolyankaImage} alt="Название рецепта 1" />
            <h3>Солянка</h3>
            <p>Старинное русское национальное суповое блюдо</p>
            <Link to="/recipe/1">Подробнее</Link>
          </div>

          <div className="recipe-card">
            <img src={MeatballsImage} alt="Название рецепта 2" />
            <h3>Тефтели</h3>
            <p>Готовятся они очень быстро, а едят их все с удовольствием.</p>
            <Link to="/recipe/2">Подробнее</Link>
          </div>

          <div className="recipe-card">
            <img src={CaesarImage} alt="Название рецепта 2" />
            <h3>Цезарь</h3>
            <p>Овощной салат, популярное блюдо американской кухни </p>
            <Link to="/recipe/3">Подробнее</Link>
          </div>
          
        </div>
      </section>
    </div>
  );
}

export default HomePage;
