import React, { useState } from 'react';
import { 
  Instagram, 
  Youtube, 
  Phone, 
  Mail, 
  MapPin, 
  MessageCircle, 
  Star, 
  Camera, 
  TrendingUp, 
  Heart,
  Send,
  CheckCircle
} from 'lucide-react';

const App = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [formStatus, setFormStatus] = useState('idle'); // idle, submitting, success

  const phoneNumber = "919544214536";
  const whatsappLink = `https://wa.me/${phoneNumber}`;
  const callLink = `tel:+${phoneNumber}`;
  const youtubeLink = "https://www.youtube.com/@LIANJUS_VLOGS";
  const instagramLink = "https://www.instagram.com/lianjus_vlogs/";

  const handleContactSubmit = (e) => {
    e.preventDefault();
    setFormStatus('submitting');
    // Simulate network request
    setTimeout(() => {
      setFormStatus('success');
      e.target.reset();
      setTimeout(() => setFormStatus('idle'), 5000); // Reset after 5 seconds
    }, 1500);
  };

  return (
    <div className="font-sans text-slate-800 bg-slate-50 min-h-screen">
      
      {/* Navigation */}
      <nav className="fixed w-full bg-white/90 backdrop-blur-md z-40 shadow-sm border-b border-slate-100">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center py-3">
            <div className="flex-shrink-0 flex items-center gap-3 md:gap-4">
              {/* JPG Logo - Replace the src URL with your actual JPG logo link */}
              <img 
                src="lianjo logo.JPG" 
                alt="Lianju's Logo" 
                className="h-20 w-20 md:h-28 md:w-28 drop-shadow-md hover:scale-105 transition-transform object-cover rounded-xl border-2 border-amber-200" 
              />
              <span className="font-extrabold text-2xl md:text-3xl tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-amber-500 to-orange-600">
                Lianju's Vlogs
              </span>
            </div>
            
            {/* Desktop Menu */}
            <div className="hidden md:flex space-x-8 items-center">
              <a href="#home" className="text-slate-600 hover:text-amber-500 font-medium transition-colors">Home</a>
              <a href="#about" className="text-slate-600 hover:text-amber-500 font-medium transition-colors">About</a>
              <a href="#gallery" className="text-slate-600 hover:text-amber-500 font-medium transition-colors">Gallery</a>
              <a href="#why-us" className="text-slate-600 hover:text-amber-500 font-medium transition-colors">Why Choose Us</a>
              <a href="#contact" className="text-slate-600 hover:text-amber-500 font-medium transition-colors">Contact</a>
              <div className="flex items-center gap-3 pl-4 border-l border-slate-200">
                <a href={instagramLink} target="_blank" rel="noopener noreferrer" className="text-pink-600 hover:text-pink-700 transition-transform hover:scale-110">
                  <Instagram size={24} />
                </a>
                <a href={youtubeLink} target="_blank" rel="noopener noreferrer" className="text-red-600 hover:text-red-700 transition-transform hover:scale-110">
                  <Youtube size={28} />
                </a>
              </div>
            </div>

            {/* Mobile menu button */}
            <div className="md:hidden flex items-center">
              <button 
                onClick={() => setIsMenuOpen(!isMenuOpen)}
                className="text-slate-600 hover:text-slate-900 focus:outline-none"
              >
                <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  {isMenuOpen ? (
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                  ) : (
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
                  )}
                </svg>
              </button>
            </div>
          </div>
        </div>

        {/* Mobile Menu */}
        {isMenuOpen && (
          <div className="md:hidden bg-white border-b border-slate-100 absolute w-full shadow-lg">
            <div className="px-4 pt-2 pb-6 space-y-1 sm:px-3 flex flex-col items-center">
              <a href="#home" onClick={() => setIsMenuOpen(false)} className="block px-3 py-2 text-slate-700 font-medium w-full text-center">Home</a>
              <a href="#about" onClick={() => setIsMenuOpen(false)} className="block px-3 py-2 text-slate-700 font-medium w-full text-center">About</a>
              <a href="#gallery" onClick={() => setIsMenuOpen(false)} className="block px-3 py-2 text-slate-700 font-medium w-full text-center">Gallery</a>
              <a href="#why-us" onClick={() => setIsMenuOpen(false)} className="block px-3 py-2 text-slate-700 font-medium w-full text-center">Why Choose Us</a>
              <a href="#contact" onClick={() => setIsMenuOpen(false)} className="block px-3 py-2 text-slate-700 font-medium w-full text-center">Contact</a>
              <div className="flex justify-center gap-6 pt-4 w-full border-t border-slate-100 mt-2">
                <a href={instagramLink} target="_blank" rel="noopener noreferrer" className="text-pink-600">
                  <Instagram size={28} />
                </a>
                <a href={youtubeLink} target="_blank" rel="noopener noreferrer" className="text-red-600">
                  <Youtube size={32} />
                </a>
              </div>
            </div>
          </div>
        )}
      </nav>

      {/* Floating Action Buttons */}
      <div className="fixed bottom-6 right-6 z-50 flex flex-col gap-4">
        <a 
          href={callLink}
          className="w-14 h-14 bg-blue-500 text-white rounded-full flex items-center justify-center shadow-lg hover:bg-blue-600 hover:scale-110 transition-all duration-300"
          aria-label="Call Us"
        >
          <Phone fill="currentColor" size={24} />
        </a>
        <a 
          href={whatsappLink}
          target="_blank" 
          rel="noopener noreferrer"
          className="w-14 h-14 bg-green-500 text-white rounded-full flex items-center justify-center shadow-lg hover:bg-green-600 hover:scale-110 transition-all duration-300"
          aria-label="WhatsApp Us"
        >
          <MessageCircle fill="currentColor" size={28} />
        </a>
      </div>

      {/* Hero Section */}
      <section id="home" className="pt-36 pb-20 lg:pt-48 lg:pb-28 overflow-hidden relative">
        <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-amber-50 to-white -z-10"></div>
        {/* Decorative blobs */}
        <div className="absolute top-20 left-10 w-64 h-64 bg-yellow-200 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob"></div>
        <div className="absolute top-40 right-10 w-64 h-64 bg-pink-200 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000"></div>

        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative">
          <div className="flex flex-col lg:flex-row items-center gap-12">
            <div className="w-full lg:w-1/2 text-center lg:text-left">
              <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-amber-100 text-amber-800 font-semibold text-sm mb-6">
                <Star size={16} className="fill-amber-500 text-amber-500" />
                <span>Child Model & Vlogger</span>
              </div>
              <h1 className="text-5xl lg:text-7xl font-extrabold text-slate-900 tracking-tight mb-6 leading-tight">
                Hi, I'm <span className="text-transparent bg-clip-text bg-gradient-to-r from-amber-500 to-orange-500">Lianju!</span>
              </h1>
              <p className="text-xl text-slate-600 mb-8 max-w-lg mx-auto lg:mx-0 leading-relaxed">
                I am 1½ years old, and I love the camera! Follow my journey as a child model and watch my daily adventures on my vlogs.
              </p>
              <div className="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4">
                <a href="#contact" className="px-8 py-4 w-full sm:w-auto bg-slate-900 text-white font-bold rounded-full hover:bg-slate-800 transition-colors shadow-lg shadow-slate-200 flex items-center justify-center gap-2">
                  Book Me <Camera size={18} />
                </a>
                <a href={youtubeLink} target="_blank" rel="noopener noreferrer" className="px-8 py-4 w-full sm:w-auto bg-white text-red-600 font-bold rounded-full border-2 border-red-100 hover:border-red-600 hover:bg-red-50 transition-all flex items-center justify-center gap-2">
                  Watch Vlogs <Youtube size={20} />
                </a>
              </div>
            </div>
            
            <div className="w-full lg:w-1/2 relative">
              <div className="relative rounded-3xl overflow-hidden aspect-[4/5] md:aspect-square lg:aspect-[4/5] shadow-2xl shadow-amber-100/50 border-8 border-white group">
                {/* Placeholder Image - You can replace this src with Lianju's actual photo URL */}
                <img 
                  src="lianjo driving.jpg" 
                  alt="Lianju hero" 
                  className="object-cover w-full h-full transform group-hover:scale-105 transition-transform duration-700"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent"></div>
                <div className="absolute bottom-6 left-6 right-6">
                  <div className="bg-white/90 backdrop-blur-sm p-4 rounded-2xl shadow-lg flex items-center justify-between">
                    <div>
                      <p className="text-xs text-slate-500 font-bold uppercase tracking-wider">Managed by</p>
                      <p className="font-bold text-slate-800">Abdullah</p>
                    </div>
                    <div className="flex gap-2">
                      <a href={instagramLink} target="_blank" rel="noopener noreferrer" className="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center text-pink-600 hover:bg-pink-600 hover:text-white transition-colors">
                        <Instagram size={20} />
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* About Section */}
      <section id="about" className="py-20 bg-white">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-5xl font-bold text-slate-900 mb-4">About Me</h2>
            <div className="w-24 h-1.5 bg-amber-400 mx-auto rounded-full"></div>
          </div>

          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div className="order-2 md:order-1 relative">
               <img src="lianjo independence.jpg" alt="Lianju playing" className="rounded-3xl w-full h-80 md:h-[400px] object-cover shadow-2xl border-8 border-white" />
               <div className="absolute -bottom-6 -right-6 bg-white p-4 rounded-2xl shadow-xl hidden md:block">
                 <div className="bg-amber-100 text-amber-600 p-4 rounded-xl font-bold text-center">
                   <span className="block text-3xl">1½</span>
                   <span className="text-sm">Years Old</span>
                 </div>
               </div>
            </div>
            
            <div className="order-1 md:order-2 space-y-6">
              <h3 className="text-2xl font-bold text-slate-800 flex items-center gap-2">
                <Heart className="text-pink-500 fill-pink-500" /> A Little Star in the Making
              </h3>
              <p className="text-lg text-slate-600 leading-relaxed">
                Hello! My name is Lianju. Even though I am just 1 and 1/2 years old, I have already found my love for the camera! My days are filled with giggles, exploring the world, and sharing my cuteness through my vlogs and modeling shoots.
              </p>
              <p className="text-lg text-slate-600 leading-relaxed">
                Whether it's a fun day at the park, trying out new toys, or posing for brand collaborations, I love sharing my happy moments with everyone on my YouTube channel and Instagram.
              </p>
              
              <div className="bg-slate-50 border border-slate-100 p-6 rounded-2xl mt-8">
                <h4 className="font-bold text-slate-900 mb-2">Professional Management</h4>
                <p className="text-slate-600 text-sm">
                  My profile, bookings, and collaborations are exclusively managed by my father, <strong>Abdullah</strong>. As an experienced Ad Specialist, he ensures that all brand partnerships are handled professionally, creatively, and smoothly.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Gallery Section */}
      <section id="gallery" className="py-20 bg-slate-50">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-5xl font-bold text-slate-900 mb-4">My Photo Gallery</h2>
            <div className="w-24 h-1.5 bg-amber-400 mx-auto rounded-full"></div>
            <p className="text-slate-600 mt-6 max-w-2xl mx-auto text-lg">
              Here are some of my favorite moments, modeling shoots, and fun adventures!
            </p>
          </div>

          <div className="grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-6">
            <div className="rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-shadow duration-300 aspect-square group">
              <img src="lianjo logo.JPG" alt="Lianju cute" className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" />
            </div>
            <div className="rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-shadow duration-300 aspect-square group">
              <img src="lian" alt="Lianju playing" className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" />
            </div>
            <div className="rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-shadow duration-300 aspect-[4/5] md:aspect-square group">
              <img src="lianjo vishu.jpg" alt="Lianju outdoors" className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" />
            </div>
          </div>
        </div>
      </section>

      {/* Why Choose Us Section */}
      <section id="why-us" className="py-20 bg-slate-900 text-white">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-5xl font-bold mb-4 text-white">Why Choose Us?</h2>
            <div className="w-24 h-1.5 bg-amber-500 mx-auto rounded-full"></div>
            <p className="text-slate-400 mt-6 max-w-2xl mx-auto text-lg">
              Combining Lianju's natural charm with professional ad-industry expertise.
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            {/* Feature 1 */}
            <div className="bg-slate-800 p-8 rounded-3xl border border-slate-700 hover:border-amber-500 transition-colors group">
              <div className="w-14 h-14 bg-slate-700 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-amber-500 group-hover:text-slate-900 transition-colors">
                <Camera size={28} />
              </div>
              <h3 className="text-xl font-bold mb-3">Natural Talent</h3>
              <p className="text-slate-400">
                At just 1.5 years old, Lianju is incredibly comfortable in front of the camera, delivering genuine smiles and engaging expressions perfect for kids' brands.
              </p>
            </div>

            {/* Feature 2 */}
            <div className="bg-slate-800 p-8 rounded-3xl border border-slate-700 hover:border-amber-500 transition-colors group">
              <div className="w-14 h-14 bg-slate-700 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-amber-500 group-hover:text-slate-900 transition-colors">
                <TrendingUp size={28} />
              </div>
              <h3 className="text-xl font-bold mb-3">Ad Specialist Managed</h3>
              <p className="text-slate-400">
                Managed by Abdullah, an Ad Specialist. This means we understand brand guidelines, campaign objectives, deliverables, and professional communication.
              </p>
            </div>

            {/* Feature 3 */}
            <div className="bg-slate-800 p-8 rounded-3xl border border-slate-700 hover:border-amber-500 transition-colors group">
              <div className="w-14 h-14 bg-slate-700 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-amber-500 group-hover:text-slate-900 transition-colors">
                <Heart size={28} />
              </div>
              <h3 className="text-xl font-bold mb-3">Engaged Audience</h3>
              <p className="text-slate-400">
                With an active presence on YouTube and Instagram, partnering with us means reaching a loving, family-oriented audience who enjoys our daily vlogs.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="py-20 bg-amber-50">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-5 gap-12 bg-white rounded-3xl shadow-xl overflow-hidden">
            
            {/* Contact Info */}
            <div className="lg:col-span-2 bg-gradient-to-br from-amber-500 to-orange-500 p-10 text-white flex flex-col justify-between relative overflow-hidden">
              {/* Decorative circles */}
              <div className="absolute top-0 right-0 w-64 h-64 bg-white opacity-10 rounded-full -translate-y-1/2 translate-x-1/2"></div>
              <div className="absolute bottom-0 left-0 w-48 h-48 bg-white opacity-10 rounded-full translate-y-1/2 -translate-x-1/2"></div>
              
              <div className="relative z-10">
                <h3 className="text-3xl font-bold mb-2">Get in Touch</h3>
                <p className="text-amber-100 mb-8">
                  Interested in collaborations, modeling assignments, or just want to say hi? Reach out to my Dad!
                </p>

                <div className="space-y-6">
                  <div className="flex items-center gap-4">
                    <div className="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center shrink-0">
                      <Phone size={20} />
                    </div>
                    <div>
                      <p className="text-sm text-amber-100">Call / WhatsApp</p>
                      <p className="font-bold text-lg">+91 9544214536</p>
                      <p className="text-xs text-amber-100">(Managed by Abdullah)</p>
                    </div>
                  </div>
                  
                  <div className="flex items-center gap-4">
                    <div className="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center shrink-0">
                      <Mail size={20} />
                    </div>
                    <div>
                      <p className="text-sm text-amber-100">Email</p>
                      <p className="font-bold">Contact via Form</p>
                    </div>
                  </div>

                  <div className="flex items-center gap-4">
                    <div className="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center shrink-0">
                      <MapPin size={20} />
                    </div>
                    <div>
                      <p className="text-sm text-amber-100">Location</p>
                      <p className="font-bold">India</p>
                    </div>
                  </div>
                </div>
              </div>

              <div className="relative z-10 mt-12">
                <p className="text-sm text-amber-100 mb-4">Follow My Journey</p>
                <div className="flex gap-4">
                  <a href={instagramLink} target="_blank" rel="noopener noreferrer" className="w-10 h-10 bg-white text-orange-500 rounded-full flex items-center justify-center hover:scale-110 transition-transform shadow-lg">
                    <Instagram size={20} />
                  </a>
                  <a href={youtubeLink} target="_blank" rel="noopener noreferrer" className="w-10 h-10 bg-white text-orange-500 rounded-full flex items-center justify-center hover:scale-110 transition-transform shadow-lg">
                    <Youtube size={20} />
                  </a>
                </div>
              </div>
            </div>

            {/* Contact Form */}
            <div className="lg:col-span-3 p-10 lg:p-12">
              <h3 className="text-2xl font-bold text-slate-800 mb-6">Send us a Message</h3>
              
              {formStatus === 'success' ? (
                <div className="bg-green-50 border border-green-200 text-green-700 p-6 rounded-2xl flex flex-col items-center justify-center text-center h-full min-h-[300px]">
                  <CheckCircle size={48} className="text-green-500 mb-4" />
                  <h4 className="text-xl font-bold mb-2">Message Sent Successfully!</h4>
                  <p>Thank you for reaching out. Abdullah will get back to you shortly.</p>
                </div>
              ) : (
                <form onSubmit={handleContactSubmit} className="space-y-6">
                  <div className="grid md:grid-cols-2 gap-6">
                    <div className="space-y-2">
                      <label className="text-sm font-semibold text-slate-600 block">Your Name</label>
                      <input 
                        type="text" 
                        required
                        className="w-full px-4 py-3 rounded-xl bg-slate-50 border border-slate-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent transition-all"
                        placeholder="John Doe"
                      />
                    </div>
                    <div className="space-y-2">
                      <label className="text-sm font-semibold text-slate-600 block">Contact Number</label>
                      <input 
                        type="tel" 
                        required
                        className="w-full px-4 py-3 rounded-xl bg-slate-50 border border-slate-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent transition-all"
                        placeholder="+91 XXXXX XXXXX"
                      />
                    </div>
                  </div>
                  
                  <div className="grid md:grid-cols-2 gap-6">
                    <div className="space-y-2">
                      <label className="text-sm font-semibold text-slate-600 block">Email Address</label>
                      <input 
                        type="email" 
                        required
                        className="w-full px-4 py-3 rounded-xl bg-slate-50 border border-slate-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent transition-all"
                        placeholder="john@example.com"
                      />
                    </div>
                    <div className="space-y-2">
                      <label className="text-sm font-semibold text-slate-600 block">Place / City</label>
                      <input 
                        type="text" 
                        required
                        className="w-full px-4 py-3 rounded-xl bg-slate-50 border border-slate-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent transition-all"
                        placeholder="e.g. Mumbai, Kerala, etc."
                      />
                    </div>
                  </div>

                  <div className="space-y-2">
                    <label className="text-sm font-semibold text-slate-600 block">Message</label>
                    <textarea 
                      required
                      rows="4"
                      className="w-full px-4 py-3 rounded-xl bg-slate-50 border border-slate-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent transition-all resize-none"
                      placeholder="Tell us about the collaboration or requirement..."
                    ></textarea>
                  </div>

                  <button 
                    type="submit" 
                    disabled={formStatus === 'submitting'}
                    className={`w-full py-4 rounded-xl font-bold text-white flex items-center justify-center gap-2 transition-all shadow-md ${
                      formStatus === 'submitting' 
                        ? 'bg-amber-400 cursor-not-allowed' 
                        : 'bg-amber-500 hover:bg-amber-600 hover:shadow-lg'
                    }`}
                  >
                    {formStatus === 'submitting' ? 'Sending...' : (
                      <>Send Message <Send size={18} /></>
                    )}
                  </button>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-slate-900 text-slate-400 py-8 text-center border-t border-slate-800">
        <div className="max-w-6xl mx-auto px-4">
          <p>&copy; {new Date().getFullYear()} Lianju's Vlogs. All rights reserved.</p>
          <p className="text-sm mt-2">Managed professionally by Abdullah (Ad Specialist).</p>
        </div>
      </footer>
    </div>
  );
};

export default App;c