import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';
import step1Img from '../assets/images/step1-products.png';
import step2Img from '../assets/images/step2-user.png';
import step3Img from '../assets/images/step3-prizes.png';
import heroPeopleImg from '../assets/images/hero-people.png';
import heroMobileImg from '../assets/images/hero-mobile.png';

export default function Landing() {
  const navigate = useNavigate();
  const { user } = useAuth();

  const handleActionClick = () => {
    navigate(user ? '/upload' : '/auth');
  };

  return (
    <div className="flex flex-col w-full bg-white font-sans text-brand-dark-blue">
      
      {/* HERO SECTION */}
      <section className="w-full relative bg-brand-blue">
        <div className="w-full relative">
          {/* Desktop Image */}
          <img 
            src={heroPeopleImg}
            alt="Cómete el Mundo y Gana" 
            className="hidden md:block w-full min-h-[400px] h-auto object-cover object-center" 
          />
          {/* Mobile Image */}
          <img 
            src={heroMobileImg}
            alt="Cómete el Mundo y Gana" 
            className="block md:hidden w-full h-auto object-cover object-center" 
          />
          {/* CTA Button placed over the image */}
          <button 
            onClick={handleActionClick}
            className="absolute bottom-[10%] md:bottom-[20%] left-[50%] -translate-x-1/2 md:translate-x-0 md:left-auto md:right-[15%] lg:right-[20%] z-20 bg-brand-yellow text-brand-blue font-bold px-8 md:px-10 py-3 md:py-4 rounded-full text-base md:text-lg shadow-[0_4px_20px_rgba(255,204,0,0.4)] hover:bg-white hover:text-brand-dark-blue hover:scale-105 transition-all"
          >
            Registra tu factura
          </button>
        </div>
      </section>

      {/* HOW TO PARTICIPATE */}
      <section className="py-20 px-4 container mx-auto text-center">
        <h2 className="font-display text-4xl text-brand-blue uppercase mb-12">¿Cómo participar?</h2>
        
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
           {/* Step 1 */}
           <div className="rounded-xl overflow-hidden relative group hover:scale-[1.02] transition-transform shadow-lg">
               <img src={step1Img} alt="Compra" className="w-full h-auto object-cover" />
           </div>

           {/* Step 2 */}
           <div 
             onClick={handleActionClick}
             className="rounded-xl overflow-hidden relative group hover:scale-[1.02] transition-transform shadow-lg cursor-pointer"
             role="button"
             tabIndex={0}
           >
               <img src={step2Img} alt="Regístrate" className="w-full h-auto object-cover" />
           </div>

           {/* Step 3 */}
           <div className="rounded-xl overflow-hidden relative group hover:scale-[1.02] transition-transform shadow-lg">
               <img src={step3Img} alt="Participa" className="w-full h-auto object-cover" />
           </div>
        </div>

        <div className="mt-12 flex items-center justify-center gap-3 font-display uppercase text-2xl md:text-3xl">
          <span className="text-brand-yellow">★</span>
          <span className="text-brand-blue">Recibe <span className="text-brand-red">1 punto</span> por cada <span className="text-brand-red">$ 10 USD</span></span>
          <span className="text-brand-yellow">★</span>
        </div>
      </section>

      {/* MARCAS PARTICIPANTES */}
      <section className="py-12 bg-white text-center">
        <h2 className="font-display text-3xl text-brand-dark-blue uppercase mb-8">Marcas participantes</h2>
        <div className="flex flex-col sm:flex-row justify-center items-center gap-8">
           <div className="w-64 h-32 bg-brand-cream border border-gray-100 rounded-xl shadow-sm flex items-center justify-center hover:shadow-md transition-shadow p-6">
             <img src={`${import.meta.env.BASE_URL}images/logo-nestle.png`} alt="Nestlé" className="max-w-full max-h-full object-contain" />
           </div>
           <div className="w-64 h-32 bg-brand-cream border border-gray-100 rounded-xl shadow-sm flex items-center justify-center hover:shadow-md transition-shadow p-6">
             <img src={`${import.meta.env.BASE_URL}images/logo-maggi.png`} alt="Maggi" className="max-w-full max-h-full object-contain" />
           </div>
        </div>
      </section>

      {/* PRIZES HIGHLIGHT */}
      <section className="py-16 px-4 max-w-6xl mx-auto text-center border-t border-gray-100">
        <h2 className="font-display text-3xl md:text-4xl lg:text-5xl uppercase tracking-wide leading-tight mb-12">
          <span className="text-brand-blue block sm:inline">Mientras más participes,</span>{" "}
          <span className="text-brand-red block sm:inline">más oportunidades tienes de ganar.</span>
        </h2>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
           {/* Loop fake prizes mimicking the grid (Asador, Utensilios, TV & Barra) */}
           {[
             { name: 'Asador', img: `${import.meta.env.BASE_URL}images/premio-asador.png`, fallback: 'https://images.unsplash.com/photo-1555939594-58d7cb561ad1?q=80&w=1974&auto=format&fit=crop' },
             { name: 'Set de Parrillada', img: `${import.meta.env.BASE_URL}images/premio-utensilios.png`, fallback: 'https://images.unsplash.com/photo-1556910103-1c02745a873f?q=80&w=2070&auto=format&fit=crop' },
             { name: 'TV & Barra de Sonido', img: `${import.meta.env.BASE_URL}images/premio-tv.png`, fallback: 'https://images.unsplash.com/photo-1593359677879-a4bb92f829d1?q=80&w=2070&auto=format&fit=crop' },
           ].map((prize, i) => (
             <div key={i} className="flex flex-col border border-gray-100 rounded-xl overflow-hidden hover:shadow-lg transition-shadow bg-white">
                <div className="h-64 bg-gray-50 flex items-center justify-center relative border-b border-gray-100 overflow-hidden p-6">
                   <img 
                     src={prize.img} 
                     alt={prize.name} 
                     className="w-full h-full object-contain transition-transform hover:scale-110 duration-300" 
                     referrerPolicy="no-referrer"
                     onError={(e) => { e.currentTarget.src = prize.fallback }}
                   />
                </div>
                <div className="p-4 text-center">
                  <p className="font-bold text-lg text-brand-dark-blue">{prize.name}</p>
                </div>
             </div>
           ))}
        </div>

        <button 
          onClick={handleActionClick}
          className="mt-12 bg-brand-yellow text-brand-dark-blue font-bold px-12 py-4 rounded-full hover:bg-brand-yellow/80 transition-colors shadow-[0_4px_15px_rgba(255,204,0,0.4)] text-lg"
        >
          Registra tu factura
        </button>
      </section>
      
    </div>
  );
}
