import React from 'react';
import Header from '../components/Header';
import HeroBanner from '../components/HeroBanner';
import ContentRow from '../components/ContentRow';
import Footer from '../components/Footer';

const Index = () => {
  // Mock data for content rows
  const trendingNow = [
    { id: 1, title: "Stranger Things", image: "https://images.unsplash.com/photo-1626814026160-2237a95fc5a0?w=300&h=169&fit=crop", rating: "97% Match" },
    { id: 2, title: "The Crown", image: "https://images.unsplash.com/photo-1489599735816-c3b58368ac55?w=300&h=169&fit=crop", rating: "95% Match" },
    { id: 3, title: "Money Heist", image: "https://images.unsplash.com/photo-1574267432553-4b4628081c31?w=300&h=169&fit=crop", rating: "92% Match" },
    { id: 4, title: "The Witcher", image: "https://images.unsplash.com/photo-1518709268805-4e9042af2176?w=300&h=169&fit=crop", rating: "89% Match" },
    { id: 5, title: "Bridgerton", image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=300&h=169&fit=crop", rating: "94% Match" },
    { id: 6, title: "Ozark", image: "https://images.unsplash.com/photo-1536440136628-849c177e76a1?w=300&h=169&fit=crop", rating: "91% Match" },
    { id: 7, title: "Wednesday", image: "https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=300&h=169&fit=crop", rating: "88% Match" },
    { id: 8, title: "Dark", image: "https://images.unsplash.com/photo-1546587348-d12660c30c50?w=300&h=169&fit=crop", rating: "96% Match" }
  ];

  const continueWatching = [
    { id: 9, title: "Breaking Bad", image: "https://images.unsplash.com/photo-1440404653325-ab127d49abc1?w=300&h=169&fit=crop", rating: "98% Match", progress: 65 },
    { id: 10, title: "The Office", image: "https://images.unsplash.com/photo-1497486751825-1233686d5d80?w=300&h=169&fit=crop", rating: "85% Match", progress: 23 },
    { id: 11, title: "Friends", image: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=300&h=169&fit=crop", rating: "82% Match", progress: 78 },
    { id: 12, title: "The Good Place", image: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=300&h=169&fit=crop", rating: "89% Match", progress: 12 },
    { id: 13, title: "Narcos", image: "https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=300&h=169&fit=crop", rating: "93% Match", progress: 45 },
    { id: 14, title: "House of Cards", image: "https://images.unsplash.com/photo-1486312338219-ce68e2c6b696?w=300&h=169&fit=crop", rating: "87% Match", progress: 56 }
  ];

  const popularOnNetflix = [
    { id: 15, title: "Squid Game", image: "https://images.unsplash.com/photo-1578662996442-48f60103fc96?w=300&h=169&fit=crop", rating: "95% Match" },
    { id: 16, title: "Tiger King", image: "https://images.unsplash.com/photo-1564349683136-77e08dba1ef7?w=300&h=169&fit=crop", rating: "78% Match" },
    { id: 17, title: "Lucifer", image: "https://images.unsplash.com/photo-1509909756405-be0199881695?w=300&h=169&fit=crop", rating: "90% Match" },
    { id: 18, title: "The Umbrella Academy", image: "https://images.unsplash.com/photo-1440404653325-ab127d49abc1?w=300&h=169&fit=crop", rating: "86% Match" },
    { id: 19, title: "Orange Is the New Black", image: "https://images.unsplash.com/photo-1574267432553-4b4628081c31?w=300&h=169&fit=crop", rating: "84% Match" },
    { id: 20, title: "Black Mirror", image: "https://images.unsplash.com/photo-1518709268805-4e9042af2176?w=300&h=169&fit=crop", rating: "92% Match" }
  ];

  const topPicks = [
    { id: 21, title: "The Queen's Gambit", image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=300&h=169&fit=crop", rating: "99% Match" },
    { id: 22, title: "Mindhunter", image: "https://images.unsplash.com/photo-1536440136628-849c177e76a1?w=300&h=169&fit=crop", rating: "94% Match" },
    { id: 23, title: "Russian Doll", image: "https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=300&h=169&fit=crop", rating: "88% Match" },
    { id: 24, title: "Peaky Blinders", image: "https://images.unsplash.com/photo-1546587348-d12660c30c50?w=300&h=169&fit=crop", rating: "91% Match" },
    { id: 25, title: "The Haunting of Hill House", image: "https://images.unsplash.com/photo-1440404653325-ab127d49abc1?w=300&h=169&fit=crop", rating: "87% Match" },
    { id: 26, title: "Daredevil", image: "https://images.unsplash.com/photo-1497486751825-1233686d5d80?w=300&h=169&fit=crop", rating: "90% Match" }
  ];

  return (
    <div className="min-h-screen bg-black text-white">
      <Header />
      <HeroBanner />
      
      <div className="relative z-10 pb-20">
        <ContentRow title="Trending Now" items={trendingNow} />
        <ContentRow title="Continue Watching for John" items={continueWatching} showProgress />
        <ContentRow title="Popular on Netflix" items={popularOnNetflix} />
        <ContentRow title="Top Picks for You" items={topPicks} />
      </div>
      
      <Footer />
    </div>
  );
};

export default Index;