import React, { useState } from 'react';
import { LogIn, Compass, ArrowRight, Camera } from 'lucide-react';
import { LoginModal } from './LoginModal';

interface LandingPageProps {
  onContinue?: () => void;
  onGoToSignup?: () => void;
}

export const LandingPage: React.FC<LandingPageProps> = ({ onContinue, onGoToSignup }) => {
  const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);

  return (
    <div className="flex h-screen w-full flex-col md:flex-row overflow-hidden font-sans relative">
      {/* Nửa bên trái: Ảnh background mặc định của dự án */}
      <div className="hidden md:block md:w-1/2 relative bg-gray-900">
        <img
          src="https://images.unsplash.com/photo-1503220317375-aaad61436b1b?q=80&w=2070&auto=format&fit=crop"
          alt="Travel Planner Background"
          className="absolute inset-0 h-full w-full object-cover opacity-70"
        />
        {/* Overlay màu xanh nhẹ đặc trưng của dự án */}
        <div className="absolute inset-0 bg-gradient-to-t from-blue-900/60 to-transparent" />
        
        <div className="absolute bottom-16 left-16 text-white z-10">
          <div className="flex items-center gap-3 mb-6">
            <div className="p-3 bg-white/20 backdrop-blur-md rounded-2xl">
              <Compass className="w-8 h-8 text-white" />
            </div>
            <span className="text-3xl font-black tracking-tighter uppercase">Travel Planner</span>
          </div>
          <h2 className="text-5xl font-bold leading-tight max-w-lg">
            Khám phá thế giới, lưu giữ kỉ niệm.
          </h2>
          <p className="mt-4 text-blue-100 text-lg opacity-80 max-w-sm">
            Hợp tác cùng bạn bè để lên lịch trình hoàn hảo nhất cho mọi chuyến đi.
          </p>
        </div>
      </div>

      {/* Nửa bên phải: Nội dung chào mừng và Hành động */}
      <div className="flex-1 flex flex-col justify-center items-center bg-white p-8 sm:p-12 md:p-20">
        <div className="max-w-md w-full space-y-12">
          <div className="space-y-6">
            <h1 className="text-4xl md:text-5xl font-extrabold text-gray-900 leading-tight">
              Chào mừng bạn đến với trang tạo kế hoạch du lịch
            </h1>
            <p className="text-xl text-gray-600 leading-relaxed">
              Đăng nhập để vào tạo kế hoạch cá nhân hoặc nhấn nút tiếp tục để tham quan các hình ảnh du lịch được chia sẻ.
            </p>
          </div>

          <div className="flex flex-col gap-4">
            {/* Nút Đăng nhập */}
            <button 
              onClick={() => setIsLoginModalOpen(true)}
              className="group flex items-center justify-center gap-3 bg-blue-600 hover:bg-blue-700 text-white font-bold py-5 px-8 rounded-2xl shadow-xl shadow-blue-200 transition-all active:scale-95"
            >
              <LogIn className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
              Đăng nhập ngay
            </button>

            {/* Nút Tiếp tục */}
            <button 
              onClick={onContinue}
              className="flex items-center justify-center gap-3 bg-gray-50 hover:bg-gray-100 text-gray-700 font-bold py-5 px-8 rounded-2xl border border-gray-200 transition-all active:scale-95"
            >
              Tiếp tục tham quan ảnh
              <ArrowRight className="w-5 h-5" />
            </button>
          </div>

          <div className="pt-12 flex items-center gap-4 text-sm text-gray-400 border-t border-gray-100">
            <div className="flex -space-x-3">
              {[1, 2, 3, 4].map(i => (
                <img key={i} className="w-10 h-10 rounded-full border-4 border-white" src={`https://i.pravatar.cc/100?img=${i+20}`} alt="user" />
              ))}
            </div>
            <p className="font-medium">Tham gia cùng +2,400 người du lịch khác</p>
          </div>
        </div>
      </div>

      {/* Login Modal Component */}
      <LoginModal 
        isOpen={isLoginModalOpen} 
        onClose={() => setIsLoginModalOpen(false)} 
        onSwitchToSignup={onGoToSignup}
      />
    </div>
  );
};