import React, { useState, useEffect } from 'react';
import { 
  Menu, X, ChevronRight, 
  Smartphone, Globe, Database, 
  Video, Wifi, Lightbulb, 
  TrendingUp, Code, ArrowRight 
} from 'lucide-react';

const App = () => {
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

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

  const services = [
    {
      icon: <Lightbulb className="w-8 h-8 text-blue-500" />,
      title: "Konsultasi IT",
      description: "Solusi strategis untuk transformasi digital dan efisiensi teknologi perusahaan Anda."
    },
    {
      icon: <TrendingUp className="w-8 h-8 text-blue-500" />,
      title: "Digital Marketing",
      description: "Tingkatkan konversi dan visibilitas brand Anda melalui strategi digital yang terukur."
    },
    {
      icon: <Smartphone className="w-8 h-8 text-blue-500" />,
      title: "Pembuatan Aplikasi",
      description: "Pengembangan aplikasi mobile (iOS/Android) yang intuitif dan *user-friendly*."
    },
    {
      icon: <Globe className="w-8 h-8 text-blue-500" />,
      title: "Website Company Profile",
      description: "Hadirkan wajah bisnis Anda ke dunia digital dengan desain website profesional dan responsif."
    },
    {
      icon: <Database className="w-8 h-8 text-blue-500" />,
      title: "Website Sistem",
      description: "Pengembangan web app kompleks, ERP, CRM, dan sistem manajemen kustom."
    },
    {
      icon: <Video className="w-8 h-8 text-blue-500" />,
      title: "Instalasi CCTV",
      description: "Sistem keamanan terpadu dengan pemantauan *real-time* beresolusi tinggi."
    },
    {
      icon: <Wifi className="w-8 h-8 text-blue-500" />,
      title: "Internet of Things (IoT)",
      description: "Otomatisasi perangkat cerdas untuk efisiensi rumah maupun industri Anda."
    },
    {
      icon: <Code className="w-8 h-8 text-blue-500" />,
      title: "Solusi Teknologi Lainnya",
      description: "Mulai dari infrastruktur jaringan hingga keamanan siber, kami punya solusinya."
    }
  ];

  return (
    <div className="min-h-screen bg-slate-50 font-sans text-slate-800 selection:bg-blue-500 selection:text-white">
      
      {/* Navbar */}
      <nav className={`fixed w-full z-50 transition-all duration-300 ${
        isScrolled ? 'bg-white/90 backdrop-blur-md shadow-sm py-3' : 'bg-transparent py-5'
      }`}>
        <div className="container mx-auto px-6 lg:px-12 flex justify-between items-center">
          <div className="flex items-center gap-3">
            <div className="w-12 h-12 bg-white rounded-full flex items-center justify-center shadow-lg p-1 border border-slate-100">
              <img 
                src="https://murniabadi.co.id/gambar/logomatek.png" 
                alt="Murni Abadi Teknologi Logo" 
                className="w-full h-full object-contain"
              />
            </div>
            <div>
              <h1 className={`font-bold text-lg leading-tight ${isScrolled ? 'text-slate-900' : 'text-slate-900 lg:text-white'}`}>Murni Abadi</h1>
              <p className={`text-xs font-medium tracking-widest uppercase ${isScrolled ? 'text-blue-600' : 'text-blue-600 lg:text-cyan-300'}`}>Teknologi</p>
            </div>
          </div>

          {/* Desktop Nav */}
          <div className={`hidden lg:flex items-center gap-8 font-medium ${isScrolled ? 'text-slate-600' : 'text-white/90'}`}>
            <a href="#beranda" className="hover:text-blue-500 transition-colors">Beranda</a>
            <a href="#layanan" className="hover:text-blue-500 transition-colors">Layanan</a>
            <a href="#tentang" className="hover:text-blue-500 transition-colors">Tentang Kami</a>
            <button className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2.5 rounded-full font-semibold transition-all transform hover:scale-105 shadow-md shadow-blue-500/30">
              Mulai Konsultasi
            </button>
          </div>

          {/* Mobile Menu Button */}
          <button 
            className="lg:hidden p-2 text-slate-600"
            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
          >
            {isMobileMenuOpen ? <X /> : <Menu className={!isScrolled ? 'text-slate-900' : ''} />}
          </button>
        </div>

        {/* Mobile Nav */}
        {isMobileMenuOpen && (
          <div className="lg:hidden absolute top-full left-0 w-full bg-white shadow-xl border-t border-slate-100 p-6 flex flex-col gap-4">
            <a href="#beranda" className="text-slate-700 font-medium p-2 hover:bg-slate-50 rounded-lg">Beranda</a>
            <a href="#layanan" className="text-slate-700 font-medium p-2 hover:bg-slate-50 rounded-lg">Layanan</a>
            <a href="#tentang" className="text-slate-700 font-medium p-2 hover:bg-slate-50 rounded-lg">Tentang Kami</a>
            <button className="bg-blue-600 text-white px-6 py-3 rounded-xl font-semibold mt-2">
              Mulai Konsultasi
            </button>
          </div>
        )}
      </nav>

      {/* Hero Section */}
      <section id="beranda" className="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden bg-slate-900">
        {/* Background Decorative Elements */}
        <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-blue-600/20 rounded-full blur-[120px] -translate-y-1/2 translate-x-1/3"></div>
        <div className="absolute bottom-0 left-0 w-[600px] h-[600px] bg-cyan-400/10 rounded-full blur-[100px] translate-y-1/3 -translate-x-1/3"></div>
        <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-[0.03]"></div>

        <div className="container mx-auto px-6 lg:px-12 relative z-10">
          <div className="max-w-4xl mx-auto text-center">
            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-blue-500/10 border border-blue-500/20 text-cyan-300 font-medium text-sm mb-6">
              <span className="w-2 h-2 rounded-full bg-cyan-400 animate-pulse"></span>
              Welcome to CV. Murni Abadi Teknologi
            </div>
            <h2 className="text-4xl md:text-6xl lg:text-7xl font-extrabold text-white tracking-tight mb-8 leading-[1.1]">
              Kami Siap <br/>
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">
                Develop Dunia Kamu.
              </span>
            </h2>
            <p className="text-lg md:text-xl text-slate-300 mb-10 max-w-2xl mx-auto leading-relaxed">
              Mitra teknologi terpercaya untuk mewujudkan visi digital Anda. Dari pengembangan website, aplikasi, hingga instalasi infrastruktur cerdas IoT dan CCTV.
            </p>
            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
              <button className="w-full sm:w-auto px-8 py-4 rounded-full bg-blue-600 hover:bg-blue-500 text-white font-semibold transition-all flex items-center justify-center gap-2 group">
                Eksplorasi Layanan
                <ChevronRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
              </button>
              <button className="w-full sm:w-auto px-8 py-4 rounded-full bg-white/5 hover:bg-white/10 text-white border border-white/10 font-semibold transition-all">
                Hubungi Tim Kami
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* Domain Highlight Banner */}
      <div className="bg-gradient-to-r from-blue-600 to-cyan-500 py-4">
        <div className="container mx-auto px-6 text-center">
          <p className="text-white/90 font-medium flex items-center justify-center gap-2">
            Kunjungi portal resmi kami di <a href="https://www.murniabadi.co.id" className="text-white font-bold hover:underline">www.murniabadi.co.id</a>
          </p>
        </div>
      </div>

      {/* Services Section */}
      <section id="layanan" className="py-24 bg-white relative">
        <div className="container mx-auto px-6 lg:px-12">
          <div className="text-center max-w-2xl mx-auto mb-16">
            <h3 className="text-blue-600 font-bold tracking-wider uppercase text-sm mb-2">Layanan Kami</h3>
            <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Solusi End-to-End untuk Bisnis Anda</h2>
            <p className="text-slate-600">
              Kami menyediakan beragam layanan di dunia teknologi yang dirancang khusus untuk memenuhi kebutuhan unik perusahaan maupun individu.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {services.map((service, index) => (
              <div 
                key={index} 
                className="group bg-slate-50 border border-slate-100 p-8 rounded-3xl hover:bg-white hover:shadow-xl hover:shadow-blue-500/5 transition-all duration-300"
              >
                <div className="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 group-hover:bg-blue-600 transition-all duration-300">
                  {React.cloneElement(service.icon, { 
                    className: "w-8 h-8 text-blue-600 group-hover:text-white transition-colors" 
                  })}
                </div>
                <h4 className="text-xl font-bold text-slate-900 mb-3 group-hover:text-blue-600 transition-colors">
                  {service.title}
                </h4>
                <p className="text-slate-600 leading-relaxed text-sm">
                  {service.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Call to Action Section */}
      <section className="py-20 relative overflow-hidden">
        <div className="absolute inset-0 bg-slate-900"></div>
        <div className="container mx-auto px-6 lg:px-12 relative z-10">
          <div className="bg-gradient-to-br from-blue-600 to-blue-800 rounded-3xl p-10 md:p-16 flex flex-col md:flex-row items-center justify-between gap-8 shadow-2xl">
            <div className="max-w-2xl text-center md:text-left">
              <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">Siap Memulai Proyek Anda Bersama Kami?</h2>
              <p className="text-blue-100 text-lg">
                Jadwalkan konsultasi gratis hari ini. Tim CV. Murni Abadi Teknologi siap membantu memberikan solusi IT terbaik untuk mengembangkan bisnis Anda.
              </p>
            </div>
            <button className="shrink-0 bg-white text-blue-700 px-8 py-4 rounded-full font-bold text-lg hover:bg-slate-100 transition-all flex items-center gap-2 hover:scale-105 shadow-xl">
              Hubungi Sekarang <ArrowRight className="w-5 h-5" />
            </button>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-slate-950 pt-20 pb-10 border-t border-slate-800">
        <div className="container mx-auto px-6 lg:px-12">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-16">
            <div className="lg:col-span-2">
              <div className="flex items-center gap-3 mb-6">
                <div className="w-10 h-10 bg-white rounded-full flex items-center justify-center p-1 border border-slate-700">
                  <img 
                    src="https://murniabadi.co.id/gambar/logomatek.png" 
                    alt="Murni Abadi Teknologi Logo" 
                    className="w-full h-full object-contain"
                  />
                </div>
                <div>
                  <h1 className="font-bold text-white text-lg leading-none">Murni Abadi Teknologi</h1>
                </div>
              </div>
              <p className="text-slate-400 mb-6 max-w-sm">
                "Kami siap Develop Dunia Kamu." Kami adalah perusahaan teknologi yang berdedikasi untuk memberikan inovasi digital tanpa batas.
              </p>
              <p className="text-blue-400 font-medium">www.murniabadi.co.id</p>
            </div>
            
            <div>
              <h4 className="text-white font-bold mb-6">Layanan</h4>
              <ul className="space-y-3 text-slate-400">
                <li><a href="#" className="hover:text-blue-400 transition-colors">Konsultasi IT</a></li>
                <li><a href="#" className="hover:text-blue-400 transition-colors">Pembuatan Aplikasi</a></li>
                <li><a href="#" className="hover:text-blue-400 transition-colors">Website Sistem</a></li>
                <li><a href="#" className="hover:text-blue-400 transition-colors">IoT & CCTV</a></li>
              </ul>
            </div>

            <div>
              <h4 className="text-white font-bold mb-6">Perusahaan</h4>
              <ul className="space-y-3 text-slate-400">
                <li><a href="#" className="hover:text-blue-400 transition-colors">Tentang Kami</a></li>
                <li><a href="#" className="hover:text-blue-400 transition-colors">Portofolio</a></li>
                <li><a href="#" className="hover:text-blue-400 transition-colors">Karir</a></li>
                <li><a href="#" className="hover:text-blue-400 transition-colors">Kontak</a></li>
              </ul>
            </div>
          </div>

          <div className="border-t border-slate-800 pt-8 flex flex-col md:flex-row items-center justify-between text-slate-500 text-sm">
            <p>&copy; {new Date().getFullYear()} CV. Murni Abadi Teknologi. Hak Cipta Dilindungi.</p>
            <div className="flex gap-4 mt-4 md:mt-0">
              <a href="#" className="hover:text-white transition-colors">Syarat & Ketentuan</a>
              <a href="#" className="hover:text-white transition-colors">Kebijakan Privasi</a>
            </div>
          </div>
        </div>
      </footer>

    </div>
  );
};

export default App;