import React, { useState, useEffect } from 'react';
import { 
  Mic, 
  Smartphone, 
  Video, 
  ArrowRight, 
  Menu, 
  X, 
  ChevronRight,
  Mail,
  Globe
} from 'lucide-react';

export default function App() {
  const [isScrolled, setIsScrolled] = useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

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

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

  return (
    <div className="min-h-screen bg-slate-50 font-sans text-slate-900 selection:bg-blue-200 selection:text-blue-900">
      
      {/* Navigation */}
      <nav className={`fixed w-full z-50 transition-all duration-300 ${isScrolled ? 'bg-white/90 backdrop-blur-md shadow-sm py-4' : 'bg-transparent py-6'}`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center">
            <div className="flex items-center cursor-pointer" onClick={() => scrollToSection('home')}>
              <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center mr-3">
                <span className="text-white font-bold text-xl tracking-tighter">M</span>
              </div>
              <span className={`font-bold text-xl tracking-tight transition-colors ${isScrolled ? 'text-slate-900' : 'text-white'}`}>
                Mezsondra <span className="text-blue-500 font-medium">LTD</span>
              </span>
            </div>
            
            {/* Desktop Menu */}
            <div className={`hidden md:flex space-x-8 transition-colors ${isScrolled ? 'text-slate-600' : 'text-slate-200'}`}>
              <button onClick={() => scrollToSection('portfolio')} className="hover:text-blue-500 transition-colors font-medium">Portfolio</button>
              <button onClick={() => scrollToSection('about')} className="hover:text-blue-500 transition-colors font-medium">About</button>
              <button onClick={() => scrollToSection('contact')} className="hover:text-blue-500 transition-colors font-medium">Contact</button>
            </div>

            {/* Mobile Menu Button */}
            <div className="md:hidden">
              <button 
                onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
                className={`p-2 rounded-md ${isScrolled ? 'text-slate-900' : 'text-white'}`}
              >
                {mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
              </button>
            </div>
          </div>
        </div>

        {/* Mobile Menu */}
        {mobileMenuOpen && (
          <div className="md:hidden absolute top-full left-0 w-full bg-white shadow-lg border-t border-slate-100 py-4 px-4 flex flex-col space-y-4 text-slate-800">
            <button onClick={() => scrollToSection('portfolio')} className="text-left py-2 border-b border-slate-50 font-medium">Portfolio</button>
            <button onClick={() => scrollToSection('about')} className="text-left py-2 border-b border-slate-50 font-medium">About</button>
            <button onClick={() => scrollToSection('contact')} className="text-left py-2 font-medium">Contact</button>
          </div>
        )}
      </nav>

      {/* Hero Section */}
      <section id="home" className="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden bg-slate-900">
        <div className="absolute inset-0 overflow-hidden">
          <div className="absolute -top-[30%] -right-[10%] w-[70%] h-[70%] rounded-full bg-blue-600/20 blur-3xl filter" />
          <div className="absolute top-[20%] -left-[10%] w-[50%] h-[50%] rounded-full bg-indigo-600/20 blur-3xl filter" />
        </div>
        
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <div className="inline-flex items-center rounded-full px-4 py-1.5 text-sm font-medium bg-blue-500/10 text-blue-300 ring-1 ring-inset ring-blue-500/20 mb-8">
            Building the future of digital experiences
          </div>
          <h1 className="text-5xl md:text-7xl font-extrabold tracking-tight text-white mb-8">
            Innovating at the <br className="hidden md:block" />
            intersection of <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-indigo-400">media & tech.</span>
          </h1>
          <p className="mt-4 text-xl text-slate-300 max-w-2xl mx-auto mb-10 leading-relaxed">
            Mezsondra LTD is a forward-thinking digital holding company. We build intelligent applications, craft premium video productions, and power revolutionary platforms like Transcribe.Audio.
          </p>
          <div className="flex flex-col sm:flex-row justify-center gap-4">
            <button onClick={() => scrollToSection('portfolio')} className="inline-flex items-center justify-center px-6 py-3.5 border border-transparent text-base font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 transition-colors shadow-lg shadow-blue-500/25">
              Explore Our Portfolio
              <ArrowRight className="ml-2 -mr-1 w-5 h-5" />
            </button>
            <button onClick={() => scrollToSection('contact')} className="inline-flex items-center justify-center px-6 py-3.5 border border-slate-700 text-base font-medium rounded-lg text-white bg-slate-800 hover:bg-slate-700 transition-colors">
              Get in Touch
            </button>
          </div>
        </div>
      </section>

      {/* Portfolio / Divisions Section */}
      <section id="portfolio" className="py-24 bg-white relative">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <h2 className="text-blue-600 font-semibold tracking-wide uppercase text-sm mb-3">Our Divisions</h2>
            <p className="mt-2 text-3xl leading-8 font-bold tracking-tight text-slate-900 sm:text-4xl">
              A diverse ecosystem of digital products
            </p>
            <p className="mt-4 max-w-2xl text-lg text-slate-500 mx-auto">
              From AI-driven transcription services to immersive video content, our portfolio is designed to push boundaries and deliver exceptional value.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {/* Transcribe.Audio Card */}
            <div className="relative group bg-slate-50 rounded-2xl p-8 border border-slate-100 hover:shadow-xl hover:border-blue-100 transition-all duration-300 overflow-hidden">
              <div className="absolute top-0 right-0 w-32 h-32 bg-blue-100 rounded-bl-full -mr-16 -mt-16 transition-transform group-hover:scale-110" />
              <div className="relative">
                <div className="w-14 h-14 bg-white rounded-xl shadow-sm flex items-center justify-center mb-6 text-blue-600 border border-slate-100">
                  <Mic size={28} />
                </div>
                <h3 className="text-xl font-bold text-slate-900 mb-3">Transcribe.Audio</h3>
                <p className="text-slate-600 mb-6 leading-relaxed">
                  Our flagship AI-powered platform transforming audio and video into highly accurate text, subtitles, and actionable insights in seconds.
                </p>
                <a href="#" className="inline-flex items-center text-blue-600 font-medium group-hover:text-blue-700">
                  Visit Project <ChevronRight size={18} className="ml-1 group-hover:translate-x-1 transition-transform" />
                </a>
              </div>
            </div>

            {/* App Development Card */}
            <div className="relative group bg-slate-50 rounded-2xl p-8 border border-slate-100 hover:shadow-xl hover:border-indigo-100 transition-all duration-300 overflow-hidden">
              <div className="absolute top-0 right-0 w-32 h-32 bg-indigo-100 rounded-bl-full -mr-16 -mt-16 transition-transform group-hover:scale-110" />
              <div className="relative">
                <div className="w-14 h-14 bg-white rounded-xl shadow-sm flex items-center justify-center mb-6 text-indigo-600 border border-slate-100">
                  <Smartphone size={28} />
                </div>
                <h3 className="text-xl font-bold text-slate-900 mb-3">App Deployments</h3>
                <p className="text-slate-600 mb-6 leading-relaxed">
                  Developing and scaling innovative web and mobile applications designed to solve modern problems with elegant, user-centric interfaces.
                </p>
                <a href="#" className="inline-flex items-center text-indigo-600 font-medium group-hover:text-indigo-700">
                  View Apps <ChevronRight size={18} className="ml-1 group-hover:translate-x-1 transition-transform" />
                </a>
              </div>
            </div>

            {/* Video Production Card */}
            <div className="relative group bg-slate-50 rounded-2xl p-8 border border-slate-100 hover:shadow-xl hover:border-purple-100 transition-all duration-300 overflow-hidden">
              <div className="absolute top-0 right-0 w-32 h-32 bg-purple-100 rounded-bl-full -mr-16 -mt-16 transition-transform group-hover:scale-110" />
              <div className="relative">
                <div className="w-14 h-14 bg-white rounded-xl shadow-sm flex items-center justify-center mb-6 text-purple-600 border border-slate-100">
                  <Video size={28} />
                </div>
                <h3 className="text-xl font-bold text-slate-900 mb-3">Video Production</h3>
                <p className="text-slate-600 mb-6 leading-relaxed">
                  End-to-end media production studio creating compelling visual narratives, commercials, and high-quality digital content for diverse audiences.
                </p>
                <a href="#" className="inline-flex items-center text-purple-600 font-medium group-hover:text-purple-700">
                  Watch Reel <ChevronRight size={18} className="ml-1 group-hover:translate-x-1 transition-transform" />
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* About Section */}
      <section id="about" className="py-24 bg-slate-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col lg:flex-row items-center gap-16">
            <div className="lg:w-1/2">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-4">
                  <div className="h-48 bg-blue-100 rounded-2xl overflow-hidden relative">
                    <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Data" className="w-full h-full object-cover opacity-80 mix-blend-multiply" />
                  </div>
                  <div className="h-64 bg-indigo-100 rounded-2xl overflow-hidden relative">
                    <img src="https://images.unsplash.com/photo-1600132806370-bf17e65e942f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Video Editing" className="w-full h-full object-cover opacity-80 mix-blend-multiply" />
                  </div>
                </div>
                <div className="space-y-4 mt-8">
                  <div className="h-64 bg-slate-200 rounded-2xl overflow-hidden relative">
                     <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Team" className="w-full h-full object-cover opacity-80 mix-blend-multiply" />
                  </div>
                  <div className="h-48 bg-blue-600 rounded-2xl flex items-center justify-center p-6 text-white">
                    <div>
                      <div className="text-4xl font-bold mb-1">10+</div>
                      <div className="text-blue-100 font-medium">Active Projects</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <div className="lg:w-1/2">
              <h2 className="text-blue-600 font-semibold tracking-wide uppercase text-sm mb-3">About Mezsondra</h2>
              <h3 className="text-3xl font-bold text-slate-900 sm:text-4xl mb-6">
                Bridging the gap between code and creativity.
              </h3>
              <p className="text-lg text-slate-600 mb-6 leading-relaxed">
                Mezsondra LTD was founded on a simple principle: technology should empower creativity, and creativity should drive technological innovation. As a holding company, we incubate, launch, and scale digital products that matter.
              </p>
              <p className="text-lg text-slate-600 mb-8 leading-relaxed">
                Whether it's the advanced AI models powering <strong>Transcribe.Audio</strong>, our suite of consumer applications, or our high-end video production studio, we maintain an unwavering commitment to quality, performance, and user experience.
              </p>
              
              <div className="flex flex-col sm:flex-row gap-4">
                 <div className="flex items-center space-x-3 text-slate-700">
                    <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
                      <Globe size={20} />
                    </div>
                    <span className="font-medium">Global Reach</span>
                 </div>
                 <div className="flex items-center space-x-3 text-slate-700">
                    <div className="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600">
                      <Video size={20} />
                    </div>
                    <span className="font-medium">In-House Studio</span>
                 </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA / Contact Section */}
      <section id="contact" className="py-24 bg-blue-600 relative overflow-hidden">
        <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80')] opacity-10 bg-cover bg-center mix-blend-overlay"></div>
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
          <h2 className="text-3xl font-bold text-white sm:text-4xl mb-6">
            Ready to collaborate?
          </h2>
          <p className="text-xl text-blue-100 mb-10 max-w-2xl mx-auto">
            Whether you're interested in our products, need professional video services, or want to discuss a partnership, we're always open to new opportunities.
          </p>
          <a 
            href="mailto:mezsondra@gmail.com" 
            className="inline-flex items-center justify-center px-8 py-4 border border-transparent text-lg font-medium rounded-lg text-blue-600 bg-white hover:bg-blue-50 transition-colors shadow-xl"
          >
            <Mail className="mr-3 w-5 h-5" />
            Contact Us Today
          </a>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-slate-900 py-12 border-t border-slate-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center">
          <div className="flex items-center mb-4 md:mb-0">
            <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center mr-3">
              <span className="text-white font-bold text-xl tracking-tighter">M</span>
            </div>
            <span className="font-bold text-xl tracking-tight text-white">
              Mezsondra <span className="text-blue-500 font-medium">LTD</span>
            </span>
          </div>
          
          <div className="flex space-x-6 text-slate-400">
            <a href="#" className="hover:text-white transition-colors">Privacy Policy</a>
            <a href="#" className="hover:text-white transition-colors">Terms of Service</a>
          </div>
        </div>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-8 text-center md:text-left text-slate-500 text-sm">
          &copy; {new Date().getFullYear()} Mezsondra LTD. All rights reserved.
        </div>
      </footer>
    </div>
  );
}