import React, { useState, useEffect } from 'react';
import { Mail, Phone, MapPin, ChevronRight, Menu, X, ExternalLink } from 'lucide-react';

const App = () => {
  const [activeTab, setActiveTab] = useState('All');
  const [isScrolled, setIsScrolled] = useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  // Handle scroll for navbar styling
  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 50);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const scrollTo = (id) => {
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
    }
    setMobileMenuOpen(false);
  };

  const skills = [
    "SketchUp", "3ds Max", "Revit", "Corona Render", "Vantage", 
    "D5", "Lumion", "Adobe Suite", "Unreal Engine"
  ];

  const experience = [
    {
      role: "Intern Architecture",
      company: "Big Adeco",
      period: "2021 - 2025",
      desc: "Intern Architecture Concept, shop drawing, Rendering. Working with client after 3 month Intern."
    },
    {
      role: "Urban Design & Landscape Design",
      company: "Assem and Clitus",
      period: "Freelance/Contract",
      desc: "Concept design for landscape architecture, Urban Plan. 3D idea concept, Visual concept, detail concept."
    },
    {
      role: "Freelance Designer",
      company: "DOT & PLANT lab",
      period: "Remote",
      desc: "Interior Design, Exterior design, Landcape design, Urban Design, and join a lot of competition in the world."
    }
  ];

  const portfolio = [
    { id: 1, title: "Nhà Mát", category: "Urban Design", location: "Bạc Liêu", img: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&q=80&w=800" },
    { id: 2, title: "Phong Nha Retreat", category: "Landscape", location: "Quảng Bình", img: "https://images.unsplash.com/photo-1518005020951-eccb494ad742?auto=format&fit=crop&q=80&w=800" },
    { id: 3, title: "Lac House", category: "Exterior", location: "Long An", img: "https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?auto=format&fit=crop&q=80&w=800" },
    { id: 4, title: "Villa Himlam", category: "Interior", location: "Quận 7, TPHCM", img: "https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?auto=format&fit=crop&q=80&w=800" },
    { id: 5, title: "Khải Hằng Villa", category: "Exterior", location: "Thốt Nốt, Cần Thơ", img: "https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&q=80&w=800" },
    { id: 6, title: "Vinhome Smart City", category: "Interior", location: "Hà Nội", img: "https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?auto=format&fit=crop&q=80&w=800" },
    { id: 7, title: "Trường House", category: "Exterior", location: "Tân Uyên, Bình Dương", img: "https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&q=80&w=800" },
    { id: 8, title: "Nhà Phố KDC", category: "2D & BIM", location: "TPHCM", img: "https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&q=80&w=800" }
  ];

  const categories = ['All', 'Urban Design', 'Exterior', 'Interior', 'Landscape', '2D & BIM'];
  const filteredPortfolio = activeTab === 'All' ? portfolio : portfolio.filter(item => item.category === activeTab);

  return (
    <div className="min-h-screen bg-[#0a0a0a] text-[#e5e5e5] font-sans selection:bg-[#8b6642] selection:text-white">
      {/* Navigation */}
      <nav className={`fixed w-full z-50 transition-all duration-500 ${isScrolled ? 'bg-[#0a0a0a]/90 backdrop-blur-md border-b border-[#2a4030]/30 py-4' : 'bg-transparent py-6'}`}>
        <div className="container mx-auto px-6 md:px-12 flex justify-between items-center">
          <div className="text-xl font-light tracking-[0.2em] text-[#bda07c] cursor-pointer" onClick={() => scrollTo('home')}>
            QOKI <span className="font-semibold text-white">CONCEPT</span>
          </div>
          
          {/* Desktop Nav */}
          <div className="hidden md:flex space-x-8 text-sm tracking-wider">
            {['ABOUT', 'EXPERIENCE', 'PORTFOLIO', 'CONTACT'].map((item) => (
              <button 
                key={item} 
                onClick={() => scrollTo(item.toLowerCase())}
                className="text-gray-400 hover:text-[#bda07c] transition-colors duration-300 outline-none"
              >
                {item}
              </button>
            ))}
          </div>

          {/* Mobile Menu Toggle */}
          <button className="md:hidden text-gray-300" onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
            {mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
          </button>
        </div>

        {/* Mobile Nav */}
        {mobileMenuOpen && (
          <div className="md:hidden absolute top-full left-0 w-full bg-[#0a0a0a] border-b border-[#2a4030]/30 py-4 px-6 flex flex-col space-y-4 shadow-2xl">
            {['ABOUT', 'EXPERIENCE', 'PORTFOLIO', 'CONTACT'].map((item) => (
              <button 
                key={item} 
                onClick={() => scrollTo(item.toLowerCase())}
                className="text-left text-gray-400 hover:text-[#bda07c] tracking-widest text-sm py-2"
              >
                {item}
              </button>
            ))}
          </div>
        )}
      </nav>

      {/* Hero Section */}
      <section id="home" className="relative min-h-screen flex items-center justify-center overflow-hidden">
        {/* Abstract Background Elements */}
        <div className="absolute top-0 left-0 w-full h-full overflow-hidden z-0">
          <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] rounded-full bg-[#2a4030] opacity-10 blur-[100px]"></div>
          <div className="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] rounded-full bg-[#8b6642] opacity-10 blur-[120px]"></div>
        </div>

        <div className="container mx-auto px-6 relative z-10 text-center mt-20">
          <h2 className="text-[#bda07c] text-sm md:text-base tracking-[0.3em] uppercase mb-4 animate-fade-in-up">
            Không Gian Xanh
          </h2>
          <h1 className="text-5xl md:text-7xl lg:text-8xl font-light tracking-tight mb-6 animate-fade-in-up" style={{animationDelay: '0.1s'}}>
            NGUYEN QUOC <span className="font-semibold">KIET</span>
          </h1>
          <p className="text-gray-400 text-sm md:text-base tracking-[0.2em] max-w-2xl mx-auto uppercase mb-12 leading-relaxed animate-fade-in-up" style={{animationDelay: '0.2s'}}>
            Urban Design &bull; Architecture &bull; Interior &bull; Landscape
          </p>
          <button 
            onClick={() => scrollTo('portfolio')}
            className="inline-flex items-center gap-2 border border-[#8b6642] text-[#bda07c] px-8 py-3 rounded-none hover:bg-[#8b6642] hover:text-white transition-all duration-300 tracking-widest text-xs uppercase animate-fade-in-up" style={{animationDelay: '0.3s'}}
          >
            Explore Projects <ChevronRight size={16} />
          </button>
        </div>
      </section>

      {/* About Section */}
      <section id="about" className="py-24 bg-[#0f110f] border-y border-[#2a4030]/20">
        <div className="container mx-auto px-6 md:px-12">
          <div className="flex flex-col md:flex-row gap-16 lg:gap-24">
            <div className="md:w-1/2">
              <h3 className="text-[#bda07c] text-xs font-semibold tracking-[0.2em] uppercase mb-2">Giới thiệu</h3>
              <h2 className="text-3xl md:text-4xl font-light mb-8">Về Tôi</h2>
              <div className="space-y-4 text-gray-400 font-light leading-relaxed">
                <p>
                  Xin chào, tôi là Nguyễn Quốc Kiệt, sinh năm 2003. Tôi đam mê kiến tạo những không gian sống kết nối hài hòa giữa con người và thiên nhiên. Định hướng của tôi là mang triết lý "Không Gian Xanh" vào từng đường nét kiến trúc và quy hoạch đô thị.
                </p>
                <div className="pt-6 grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <div>
                    <h4 className="text-white text-sm tracking-wider mb-1">HỌC VẤN</h4>
                    <p className="text-sm">Đại học UEH (ISCM)<br/>Cử nhân Kiến trúc & Thiết kế Đô thị Thông minh</p>
                    <p className="text-sm mt-2">THPT Chu Văn An<br/>Tỉnh An Giang</p>
                  </div>
                  <div>
                    <h4 className="text-white text-sm tracking-wider mb-1">NGOẠI NGỮ</h4>
                    <p className="text-sm">Tiếng Anh: IELTS 6.5</p>
                    <p className="text-sm">Tiếng Trung: HSK 3</p>
                  </div>
                </div>
              </div>
            </div>
            
            <div className="md:w-1/2">
              <h3 className="text-[#bda07c] text-xs font-semibold tracking-[0.2em] uppercase mb-2">Chuyên môn</h3>
              <h2 className="text-3xl md:text-4xl font-light mb-8">Kỹ Năng</h2>
              <div className="flex flex-wrap gap-3">
                {skills.map((skill, index) => (
                  <span 
                    key={index} 
                    className="px-4 py-2 border border-[#2a4030] bg-[#121a14] text-gray-300 text-sm tracking-wider rounded-sm hover:border-[#8b6642] hover:text-[#bda07c] transition-colors duration-300"
                  >
                    {skill}
                  </span>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Experience Section */}
      <section id="experience" className="py-24 bg-[#0a0a0a]">
        <div className="container mx-auto px-6 md:px-12">
          <div className="text-center mb-16">
            <h3 className="text-[#bda07c] text-xs font-semibold tracking-[0.2em] uppercase mb-2">Hành trình</h3>
            <h2 className="text-3xl md:text-4xl font-light">Kinh Nghiệm Làm Việc</h2>
          </div>
          
          <div className="max-w-4xl mx-auto">
            <div className="relative border-l border-[#2a4030]/50 ml-4 md:ml-0">
              {experience.map((item, index) => (
                <div key={index} className="mb-12 pl-8 relative group">
                  {/* Timeline dot */}
                  <div className="absolute w-3 h-3 bg-[#bda07c] rounded-full -left-[6.5px] top-1.5 group-hover:scale-150 group-hover:bg-[#8b6642] transition-all duration-300 shadow-[0_0_10px_rgba(189,160,124,0.5)]"></div>
                  
                  <div className="flex flex-col md:flex-row md:justify-between md:items-baseline mb-2">
                    <h4 className="text-xl font-medium text-white">{item.role}</h4>
                    <span className="text-[#bda07c] text-sm tracking-widest mt-1 md:mt-0">{item.period}</span>
                  </div>
                  <h5 className="text-[#8b6642] tracking-wider mb-3 text-sm uppercase">{item.company}</h5>
                  <p className="text-gray-400 font-light text-sm md:text-base leading-relaxed">
                    {item.desc}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Portfolio Section */}
      <section id="portfolio" className="py-24 bg-[#0f110f] border-t border-[#2a4030]/20">
        <div className="container mx-auto px-6 md:px-12">
          <div className="text-center mb-12">
            <h3 className="text-[#bda07c] text-xs font-semibold tracking-[0.2em] uppercase mb-2">Dự án</h3>
            <h2 className="text-3xl md:text-4xl font-light">Portfolio Của Tôi</h2>
          </div>

          {/* Filter Tabs */}
          <div className="flex flex-wrap justify-center gap-4 md:gap-8 mb-16">
            {categories.map((cat) => (
              <button
                key={cat}
                onClick={() => setActiveTab(cat)}
                className={`text-xs md:text-sm tracking-widest uppercase transition-all duration-300 pb-1 border-b-2 outline-none ${
                  activeTab === cat 
                    ? 'text-[#bda07c] border-[#bda07c]' 
                    : 'text-gray-500 border-transparent hover:text-gray-300'
                }`}
              >
                {cat}
              </button>
            ))}
          </div>

          {/* Portfolio Grid */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {filteredPortfolio.map((item) => (
              <div 
                key={item.id} 
                className="group relative overflow-hidden bg-[#121212] aspect-[4/3] cursor-pointer"
              >
                {/* Fallback image style structure */}
                <div 
                  className="w-full h-full bg-cover bg-center transition-transform duration-700 group-hover:scale-105 opacity-80 group-hover:opacity-100 mix-blend-luminosity group-hover:mix-blend-normal"
                  style={{ backgroundImage: `url(${item.img})` }}
                ></div>
                
                {/* Overlay */}
                <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent opacity-80 group-hover:opacity-90 transition-opacity duration-300 flex flex-col justify-end p-8">
                  <div className="transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
                    <p className="text-[#8b6642] text-xs tracking-[0.2em] uppercase mb-2">{item.category}</p>
                    <h3 className="text-2xl font-light text-white mb-1">{item.title}</h3>
                    <p className="text-gray-400 text-sm font-light">{item.location}</p>
                  </div>
                </div>
                
                <div className="absolute top-6 right-6 opacity-0 group-hover:opacity-100 transform translate-x-4 group-hover:translate-x-0 transition-all duration-300 delay-100">
                  <div className="bg-[#bda07c] text-black p-2 rounded-full">
                    <ExternalLink size={16} />
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="py-24 bg-[#0a0a0a] relative overflow-hidden">
        {/* Background accent */}
        <div className="absolute top-0 right-0 w-[30%] h-full bg-gradient-to-l from-[#111a14] to-transparent z-0"></div>
        
        <div className="container mx-auto px-6 md:px-12 relative z-10">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
            <div>
              <h3 className="text-[#bda07c] text-xs font-semibold tracking-[0.2em] uppercase mb-2">Kết nối</h3>
              <h2 className="text-3xl md:text-5xl font-light mb-8">Hãy Cùng Tạo Nên Những Dự Án Tuyệt Vời.</h2>
              <p className="text-gray-400 font-light mb-12 max-w-md leading-relaxed">
                Tôi luôn sẵn sàng cho những thử thách mới trong lĩnh vực thiết kế kiến trúc, nội ngoại thất và quy hoạch cảnh quan. Hãy liên hệ với tôi để cùng trao đổi về ý tưởng của bạn.
              </p>
              
              <div className="space-y-6">
                <div className="flex items-center gap-4 group cursor-default">
                  <div className="w-12 h-12 border border-[#2a4030] bg-[#121a14] flex items-center justify-center text-[#bda07c] group-hover:bg-[#8b6642] group-hover:text-white transition-colors duration-300">
                    <Phone size={20} strokeWidth={1.5} />
                  </div>
                  <div>
                    <p className="text-xs text-gray-500 tracking-wider uppercase mb-1">Điện thoại</p>
                    <p className="text-white tracking-widest font-light">0583.234.700</p>
                  </div>
                </div>
                
                <div className="flex items-center gap-4 group cursor-default">
                  <div className="w-12 h-12 border border-[#2a4030] bg-[#121a14] flex items-center justify-center text-[#bda07c] group-hover:bg-[#8b6642] group-hover:text-white transition-colors duration-300">
                    <Mail size={20} strokeWidth={1.5} />
                  </div>
                  <div>
                    <p className="text-xs text-gray-500 tracking-wider uppercase mb-1">Email</p>
                    <p className="text-white tracking-wide font-light">im.qoki254@gmail.com</p>
                  </div>
                </div>
                
                <div className="flex items-center gap-4 group cursor-default">
                  <div className="w-12 h-12 border border-[#2a4030] bg-[#121a14] flex items-center justify-center text-[#bda07c] group-hover:bg-[#8b6642] group-hover:text-white transition-colors duration-300">
                    <MapPin size={20} strokeWidth={1.5} />
                  </div>
                  <div>
                    <p className="text-xs text-gray-500 tracking-wider uppercase mb-1">Địa chỉ</p>
                    <p className="text-white tracking-wide font-light">Nhà Bè, TPHCM</p>
                  </div>
                </div>
              </div>
            </div>
            
            {/* Minimalist Visual Element */}
            <div className="hidden md:flex justify-end">
              <div className="w-full max-w-md aspect-square border border-[#2a4030] relative p-4">
                <div className="w-full h-full bg-[#121a14] flex items-center justify-center relative overflow-hidden">
                   <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1506526131445-6671ee6a8581?auto=format&fit=crop&q=80&w=800')] bg-cover bg-center opacity-20 mix-blend-luminosity"></div>
                   <h2 className="text-6xl font-serif text-[#bda07c] opacity-50 z-10">Q/K</h2>
                </div>
                {/* Decorative brackets */}
                <div className="absolute top-0 left-0 w-8 h-8 border-t border-l border-[#8b6642]"></div>
                <div className="absolute bottom-0 right-0 w-8 h-8 border-b border-r border-[#8b6642]"></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-[#050505] py-8 text-center border-t border-[#1a1a1a]">
        <p className="text-xs text-gray-600 tracking-widest uppercase">
          &copy; 2025 Nguyen Quoc Kiet | Qoki Concept. All rights reserved.
        </p>
      </footer>
    </div>
  );
};

export default App;