import { useState, useEffect } from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';

const Home = () => {
  const [featuredProducts, setFeaturedProducts] = useState([]);
  const [categories, setCategories] = useState([]);

  useEffect(() => {
    axios.get('/api/products?limit=8')
      .then(res => setFeaturedProducts(res.data.products));
    
    axios.get('/api/categories')
      .then(res => setCategories(res.data));
  }, []);

  return (
    <div>
      {/* Hero Banner */}
      <div className="relative h-96 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-xl mb-12 overflow-hidden">
        <div className="absolute inset-0 bg-black/20"></div>
        <div className="relative z-10 container mx-auto h-full flex items-center px-4">
          <div className="max-w-2xl">
            <h1 className="text-5xl font-bold mb-4">Welcome to Shopify</h1>
            <p className="text-xl mb-8">Discover amazing products at unbeatable prices</p>
            <Link to="/shop"