import React, { useState, useEffect } from 'react';
import { 
  Camera, 
  Video, 
  MonitorPlay, 
  Zap, 
  FileCheck, 
  Clock, 
  Menu, 
  X, 
  Phone, 
  Mail, 
  MapPin, 
  ChevronRight,
  Star,
  CheckCircle,
  Play
} from 'lucide-react';

// --- DATA MOCKUP (Dữ liệu giả lập) ---

const SERVICES = [
  {
    id: 1,
    title: "Media Sự Kiện",
    desc: "Quay phim Highlight, Chụp ảnh sự kiện chuyên nghiệp. Trả file nhanh trong 24h.",
    icon: <Camera size={32} className="text-orange-500" />
  },
  {
    id: 2,
    title: "Livestream Chuyên Nghiệp",
    desc: "Cầu truyền hình trực tiếp, 1-3 máy quay, đường truyền ổn định cho Hội thảo, Talkshow.",
    icon: <MonitorPlay size={32} className="text-orange-500" />
  },
  {
    id: 3,
    title: "Phim Doanh Nghiệp & TVC",
    desc: "Sản xuất TVC quảng cáo, phim giới thiệu doanh nghiệp với kịch bản và ekip đạo diễn.",
    icon: <Video size={32} className="text-orange-500" />
  },
  {
    id: 4,
    title: "Flycam Sự Kiện",
    desc: "Góc máy trên cao bao quát quy mô hoành tráng cho Teambuilding, Khởi công.",
    icon: <Zap size={32} className="text-orange-500" />
  }
];

const PRICING_COMBOS = [
  {
    name: "COMBO 1 (Standard)",
    price: "7.500.000",
    unit: "VNĐ/Buổi",
    desc: "Phù hợp sự kiện nhỏ < 100 khách",
    features: [
      "01 Photographer chuyên nghiệp",
      "01 Videographer (Cameraman)",
      "Chỉnh sửa toàn bộ ảnh",
      "01 Phim Highlight (3-5 phút)",
      "Bàn giao: 3-5 ngày"
    ],
    highlight: false
  },
  {
    name: "COMBO 2 (Pro)",
    price: "10.500.000",
    unit: "VNĐ/Buổi",
    desc: "Phù hợp YEP, Gala Dinner, Hội nghị",
    features: [
      "02 Photographer (Backdrop + Khoảnh khắc)",
      "01 Videographer",
      "Chỉnh sửa toàn bộ ảnh",
      "01 Phim Highlight cảm xúc",
      "Bàn giao: 3-5 ngày"
    ],
    highlight: true // Best Seller
  },
  {
    name: "COMBO VIP (All-in-one)",
    price: "18.000.000",
    unit: "VNĐ/Buổi",
    desc: "Dành cho sự kiện lớn, hoành tráng",
    features: [
      "02 Photographer Senior",
      "02 Videographer (Toàn/Cận)",
      "01 Flycam quay toàn cảnh",
      "Dựng phim hiệu ứng cao cấp",
      "Ưu tiên xử lý nhanh"
    ],
    highlight: false
  }
];

const YOUTUBE_VIDEOS = [
  { id: 'video1', title: 'Highlight Year End Party TCL 2025', url: 'https://www.youtube.com/embed/dQw4w9WgXcQ' }, // Thay ID video thật vào đây
  { id: 'video2', title: 'TVC Giới thiệu Toshiko', url: 'https://www.youtube.com/embed/dQw4w9WgXcQ' },
  { id: 'video3', title: 'Livestream Lễ Tốt Nghiệp', url: 'https://www.youtube.com/embed/dQw4w9WgXcQ' },
];

const DRIVE_ALBUMS = [
  { 
    id: 1, 
    title: 'Sự kiện Khai Trương Diamond Place', 
    date: 'Jan 2026',
    cover: 'https://images.unsplash.com/photo-1511578314322-379afb476865?auto=format&fit=crop&q=80&w=400',
    link: 'https://drive.google.com' 
  },
  { 
    id: 2, 
    title: 'Teambuilding Công ty ABC', 
    date: 'Dec 2025',
    cover: 'https://images.unsplash.com/photo-1523580494863-6f3031224c94?auto=format&fit=crop&q=80&w=400',
    link: 'https://drive.google.com' 
  },
  { 
    id: 3, 
    title: 'Hội nghị Khách hàng Vietcombank', 
    date: 'Nov 2025',
    cover: 'https://images.unsplash.com/photo-1544161515-4ab6ce6db48e?auto=format&fit=crop&q=80&w=400',
    link: 'https://drive.google.com' 
  },
];

// --- COMPONENTS ---

const Navigation = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 50);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const navLinks = [
    { name: "Trang chủ", href: "#home" },
    { name: "Dịch vụ", href: "#services" },
    { name: "Dự án", href: "#portfolio" },
    { name: "Bảng giá", href: "#pricing" },
    { name: "Liên hệ", href: "#contact" },
  ];

  return (
    <nav className={`fixed w-full z-50 transition-all duration-300 ${scrolled ? 'bg-black/90 backdrop-blur-md py-3' : 'bg-transparent py-5'}`}>
      <div className="container mx-auto px-4 flex justify-between items-center">
        <a href="#" className="text-2xl font-bold text-white tracking-tighter">
          LƯỢN <span className="text-orange-500">MEDIA</span>
        </a>

        {/* Desktop Menu */}
        <div className="hidden md:flex space-x-8">
          {navLinks.map((link) => (
            <a key={link.name} href={link.href} className="text-gray-300 hover:text-orange-500 transition-colors font-medium">
              {link.name}
            </a>
          ))}
        </div>

        {/* Mobile Menu Button */}
        <button className="md:hidden text-white" onClick={() => setIsOpen(!isOpen)}>
          {isOpen ? <X /> : <Menu />}
        </button>
      </div>

      {/* Mobile Menu Dropdown */}
      {isOpen && (
        <div className="md:hidden bg-black absolute top-full left-0 w-full p-4 border-t border-gray-800">
          <div className="flex flex-col space-y-4">
            {navLinks.map((link) => (
              <a 
                key={link.name} 
                href={link.href} 
                className="text-white hover:text-orange-500"
                onClick={() => setIsOpen(false)}
              >
                {link.name}
              </a>
            ))}
          </div>
        </div>
      )}
    </nav>
  );
};

const Hero = () => {
  return (
    <section id="home" className="relative h-screen flex items-center justify-center overflow-hidden">
      {/* Background Image/Video Placeholder */}
      <div className="absolute inset-0 z-0">
        <img 
          src="https://images.unsplash.com/photo-1492684223066-81342ee5ff30?auto=format&fit=crop&q=80&w=1920" 
          alt="Event Background" 
          className="w-full h-full object-cover opacity-40"
        />
        <div className="absolute inset-0 bg-gradient-to-b from-black/70 to-black/90"></div>
      </div>

      <div className="container mx-auto px-4 z-10 text-center">
        <h1 className="text-4xl md:text-6xl font-bold text-white mb-6 leading-tight">
          GIẢI PHÁP HÌNH ẢNH & TRUYỀN THÔNG<br/>
          <span className="text-transparent bg-clip-text bg-gradient-to-r from-orange-400 to-red-600">
            TOÀN DIỆN CHO DOANH NGHIỆP
          </span>
        </h1>
        <p className="text-xl md:text-2xl text-gray-300 mb-8 max-w-3xl mx-auto font-light">
          Chuyên nghiệp - Tốc độ - Minh bạch. Đối tác tin cậy của 500+ doanh nghiệp tại TP.HCM & Nha Trang.
        </p>
        <div className="flex flex-col md:flex-row gap-4 justify-center">
          <a href="#pricing" className="px-8 py-4 bg-orange-600 hover:bg-orange-700 text-white font-bold rounded-full transition-all transform hover:scale-105 shadow-lg shadow-orange-500/30 flex items-center justify-center">
            XEM BÁO GIÁ NGAY <ChevronRight className="ml-2" />
          </a>
          <a href="#portfolio" className="px-8 py-4 border border-white/30 hover:bg-white/10 text-white font-bold rounded-full transition-all flex items-center justify-center">
            <Play className="mr-2 w-4 h-4 fill-current" /> XEM DỰ ÁN
          </a>
        </div>
      </div>
    </section>
  );
};

const USP = () => {
  return (
    <section className="py-12 bg-zinc-900 border-b border-zinc-800">
      <div className="container mx-auto px-4 grid grid-cols-1 md:grid-cols-3 gap-8">
        <div className="flex items-center space-x-4 p-4 rounded-lg bg-zinc-800/50">
          <div className="p-3 bg-orange-500/10 rounded-full text-orange-500">
            <Clock size={32} />
          </div>
          <div>
            <h3 className="text-white font-bold text-lg">Tốc Độ Thần Tốc</h3>
            <p className="text-gray-400 text-sm">Ảnh có trong 24h, Video sau 3-5 ngày.</p>
          </div>
        </div>
        <div className="flex items-center space-x-4 p-4 rounded-lg bg-zinc-800/50">
          <div className="p-3 bg-blue-500/10 rounded-full text-blue-500">
            <FileCheck size={32} />
          </div>
          <div>
            <h3 className="text-white font-bold text-lg">Pháp Lý Minh Bạch</h3>
            <p className="text-gray-400 text-sm">Hợp đồng rõ ràng, Xuất hoá đơn VAT đầy đủ.</p>
          </div>
        </div>
        <div className="flex items-center space-x-4 p-4 rounded-lg bg-zinc-800/50">
          <div className="p-3 bg-green-500/10 rounded-full text-green-500">
            <Zap size={32} />
          </div>
          <div>
            <h3 className="text-white font-bold text-lg">Thiết Bị 4K</h3>
            <p className="text-gray-400 text-sm">Hệ thống máy quay Sony Cinema Line, Flycam đời mới.</p>
          </div>
        </div>
      </div>
    </section>
  );
};

const Services = () => {
  return (
    <section id="services" className="py-20 bg-black">
      <div className="container mx-auto px-4">
        <div className="text-center mb-16">
          <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">DỊCH VỤ CỐT LÕI</h2>
          <div className="w-20 h-1 bg-orange-500 mx-auto"></div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          {SERVICES.map((service) => (
            <div key={service.id} className="p-6 bg-zinc-900 rounded-xl hover:bg-zinc-800 transition-all border border-zinc-800 hover:border-orange-500/50 group">
              <div className="mb-4 transform group-hover:scale-110 transition-transform duration-300">
                {service.icon}
              </div>
              <h3 className="text-xl font-bold text-white mb-3">{service.title}</h3>
              <p className="text-gray-400 leading-relaxed">{service.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Portfolio = () => {
  return (
    <section id="portfolio" className="py-20 bg-zinc-950">
      <div className="container mx-auto px-4">
        <div className="text-center mb-12">
          <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">DỰ ÁN TIÊU BIỂU</h2>
          <p className="text-gray-400">Những khoảnh khắc "triệu đô" chúng tôi đã ghi lại</p>
        </div>

        {/* Video Grid */}
        <div className="mb-16">
          <h3 className="text-2xl font-bold text-white mb-6 flex items-center">
            <Video className="mr-2 text-orange-500" /> Video Highlight & TVC
          </h3>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {YOUTUBE_VIDEOS.map((video) => (
              <div key={video.id} className="rounded-lg overflow-hidden bg-zinc-900 shadow-lg">
                <div className="aspect-w-16 aspect-h-9 w-full h-64 bg-gray-800 relative">
                  {/* Placeholder for iframe to avoid heavy loading in preview */}
                  <div className="absolute inset-0 flex items-center justify-center flex-col">
                     <span className="text-gray-500 mb-2">Video Embed Placeholder</span>
                     <p className="text-white font-medium px-4 text-center">{video.title}</p>
                     <div className="mt-4 px-4 py-2 bg-red-600 rounded text-white text-sm">YouTube Embed</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Photo Album Grid */}
        <div>
          <h3 className="text-2xl font-bold text-white mb-6 flex items-center">
            <Camera className="mr-2 text-orange-500" /> Album Ảnh Sự Kiện
          </h3>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {DRIVE_ALBUMS.map((album) => (
              <a 
                key={album.id} 
                href={album.link} 
                target="_blank" 
                rel="noreferrer"
                className="group relative rounded-xl overflow-hidden block aspect-[4/3]"
              >
                <img 
                  src={album.cover} 
                  alt={album.title} 
                  className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent flex flex-col justify-end p-6">
                  <span className="text-orange-400 text-sm font-medium mb-1">{album.date}</span>
                  <h4 className="text-xl font-bold text-white group-hover:text-orange-400 transition-colors">{album.title}</h4>
                  <div className="mt-4 flex items-center text-sm text-gray-300 opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all">
                    Xem trọn bộ trên Drive <ChevronRight size={16} />
                  </div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const Pricing = () => {
  return (
    <section id="pricing" className="py-20 bg-black">
      <div className="container mx-auto px-4">
        <div className="text-center mb-16">
          <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">BẢNG GIÁ COMBO SỰ KIỆN</h2>
          <p className="text-gray-400">Giải pháp trọn gói - Tối ưu chi phí - Đã bao gồm VAT 8%</p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
          {PRICING_COMBOS.map((combo, index) => (
            <div 
              key={index} 
              className={`relative rounded-2xl p-8 border ${
                combo.highlight 
                  ? 'bg-zinc-900 border-orange-500 shadow-2xl shadow-orange-900/20 scale-105 z-10' 
                  : 'bg-zinc-950 border-zinc-800 text-gray-400'
              }`}
            >
              {combo.highlight && (
                <div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-gradient-to-r from-orange-500 to-red-600 text-white px-4 py-1 rounded-full text-sm font-bold shadow-lg">
                  KHUYÊN DÙNG
                </div>
              )}
              
              <h3 className={`text-xl font-bold mb-2 ${combo.highlight ? 'text-white' : 'text-gray-200'}`}>
                {combo.name}
              </h3>
              <div className="mb-4">
                <span className="text-3xl font-bold text-white">{combo.price}</span>
                <span className="text-sm text-gray-500 block">{combo.unit}</span>
              </div>
              <p className="text-sm text-gray-400 mb-6 italic border-b border-zinc-800 pb-4">
                {combo.desc}
              </p>

              <ul className="space-y-4 mb-8">
                {combo.features.map((feature, idx) => (
                  <li key={idx} className="flex items-start text-sm">
                    <CheckCircle className={`w-5 h-5 mr-3 flex-shrink-0 ${combo.highlight ? 'text-orange-500' : 'text-gray-600'}`} />
                    <span className={combo.highlight ? 'text-gray-200' : 'text-gray-400'}>{feature}</span>
                  </li>
                ))}
              </ul>

              <a 
                href="#contact" 
                className={`block w-full py-3 rounded-lg text-center font-bold transition-all ${
                  combo.highlight 
                    ? 'bg-orange-600 hover:bg-orange-700 text-white' 
                    : 'bg-zinc-800 hover:bg-zinc-700 text-white'
                }`}
              >
                Đặt Lịch Ngay
              </a>
            </div>
          ))}
        </div>
        
        <div className="mt-12 text-center">
          <p className="text-gray-500 mb-4">Bạn cần gói Quay/Chụp lẻ hoặc yêu cầu riêng?</p>
          <a href="#" className="inline-flex items-center text-orange-500 font-bold hover:text-orange-400 transition-colors">
            <span className="border-b border-orange-500 pb-1">Tải về Báo giá chi tiết (PDF)</span> <ChevronRight size={16} />
          </a>
        </div>
      </div>
    </section>
  );
};

const Contact = () => {
  return (
    <section id="contact" className="py-20 bg-zinc-900">
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
          {/* Info */}
          <div>
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">LIÊN HỆ VỚI CHÚNG TÔI</h2>
            <p className="text-gray-400 mb-8">
              Đừng ngần ngại để lại thông tin. Chuyên viên tư vấn của Lượn Media sẽ liên hệ lại ngay trong vòng 5 phút!
            </p>

            <div className="space-y-6">
              <div className="flex items-start space-x-4">
                <div className="bg-orange-500/20 p-3 rounded-full text-orange-500">
                  <MapPin size={24} />
                </div>
                <div>
                  <h4 className="text-white font-bold">Khu vực hoạt động</h4>
                  <p className="text-gray-400">TP. Hồ Chí Minh - Nha Trang - Phan Rang</p>
                </div>
              </div>
              
              <div className="flex items-start space-x-4">
                <div className="bg-orange-500/20 p-3 rounded-full text-orange-500">
                  <Phone size={24} />
                </div>
                <div>
                  <h4 className="text-white font-bold">Hotline / Zalo</h4>
                  <p className="text-gray-400 text-lg">0399.646.730</p>
                </div>
              </div>

              <div className="flex items-start space-x-4">
                <div className="bg-orange-500/20 p-3 rounded-full text-orange-500">
                  <Mail size={24} />
                </div>
                <div>
                  <h4 className="text-white font-bold">Email</h4>
                  <p className="text-gray-400">booking@luonmedia.com</p>
                </div>
              </div>

              <div className="pt-6 border-t border-zinc-800 mt-6">
                <p className="text-gray-500 text-sm">
                  ** CÔNG TY TNHH LƯỢN MEDIA<br/>
                  ** MST: 4500662217
                </p>
              </div>
            </div>
          </div>

          {/* Form */}
          <div className="bg-white rounded-2xl p-8 shadow-xl">
            <h3 className="text-2xl font-bold text-gray-900 mb-6">Nhận tư vấn miễn phí</h3>
            <form className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Họ và tên</label>
                <input type="text" className="w-full px-4 py-3 rounded-lg bg-gray-100 border-transparent focus:bg-white focus:ring-2 focus:ring-orange-500 outline-none transition-all" placeholder="Nhập tên của bạn" />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Số điện thoại / Zalo</label>
                <input type="tel" className="w-full px-4 py-3 rounded-lg bg-gray-100 border-transparent focus:bg-white focus:ring-2 focus:ring-orange-500 outline-none transition-all" placeholder="09xxxxxxxxx" />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Dịch vụ quan tâm</label>
                <select className="w-full px-4 py-3 rounded-lg bg-gray-100 border-transparent focus:bg-white focus:ring-2 focus:ring-orange-500 outline-none transition-all">
                  <option>Chọn dịch vụ...</option>
                  <option>Media Sự Kiện (Quay/Chụp)</option>
                  <option>Livestream</option>
                  <option>Phim Doanh Nghiệp</option>
                  <option>Khác</option>
                </select>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Nội dung cần tư vấn</label>
                <textarea rows="4" className="w-full px-4 py-3 rounded-lg bg-gray-100 border-transparent focus:bg-white focus:ring-2 focus:ring-orange-500 outline-none transition-all" placeholder="Ngày tổ chức, địa điểm, yêu cầu..."></textarea>
              </div>
              <button className="w-full py-4 bg-orange-600 hover:bg-orange-700 text-white font-bold rounded-lg shadow-lg transition-all transform hover:-translate-y-1">
                GỬI YÊU CẦU NGAY
              </button>
            </form>
          </div>
        </div>
      </div>
    </section>
  );
};

const Footer = () => {
  return (
    <footer className="bg-black py-8 border-t border-zinc-900">
      <div className="container mx-auto px-4 text-center">
        <p className="text-gray-500 text-sm">
          © 2026 LƯỢN MEDIA. All rights reserved. <br className="md:hidden" />
          Giải pháp Hình ảnh & Truyền thông Toàn diện.
        </p>
      </div>
    </footer>
  );
};

const FloatingButtons = () => {
  return (
    <div className="fixed bottom-6 right-6 z-50 flex flex-col space-y-3">
      <a 
        href="https://zalo.me/0399646730" 
        target="_blank" 
        rel="noreferrer"
        className="w-14 h-14 bg-blue-600 rounded-full flex items-center justify-center shadow-lg hover:scale-110 transition-transform text-white"
        title="Chat Zalo"
      >
        <span className="font-bold text-xs">Zalo</span>
      </a>
      <a 
        href="tel:0399646730" 
        className="w-14 h-14 bg-red-600 rounded-full flex items-center justify-center shadow-lg hover:scale-110 transition-transform text-white animate-bounce"
        title="Gọi ngay"
      >
        <Phone size={24} />
      </a>
    </div>
  );
};

// --- APP COMPONENT ---

const App = () => {
  return (
    <div className="bg-black min-h-screen text-gray-200 font-sans selection:bg-orange-500 selection:text-white">
      <Navigation />
      <Hero />
      <USP />
      <Services />
      <Portfolio />
      <Pricing />
      <Contact />
      <Footer />
      <FloatingButtons />
    </div>
  );
};

export default App;