import React, { useState, useEffect } from 'react';
import { Check, Server, Zap, Shield, Phone, Copy, ChevronDown } from 'lucide-react';

export default function HostingWebsite() {
  const [activeTab, setActiveTab] = useState('whm');
  const [selectedPlan, setSelectedPlan] = useState(null);
  const [showPaymentModal, setShowPaymentModal] = useState(false);
  const [copySuccess, setCopySuccess] = useState(null);
  const [scrolled, setScrolled] = useState(false);

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

  const plans = {
    whm: [
      {
        name: 'WHM Mini',
        price: '15.000',
        color: 'from-blue-600 to-cyan-500',
        features: [
          'Unlimited Accounts',
          'Unlimited Disk Space',
          'Unlimited Bandwidth',
          'Free SSL Certificate',
          'cPanel Control Panel',
          'Email Accounts',
          'Daily Backups',
          'Priority Support 24/7'
        ],
        popular: false
      },
      {
        name: 'WHM Medium',
        price: '25.000',
        color: 'from-purple-600 to-pink-500',
        features: [
          'Unlimited Accounts',
          'Unlimited Disk Space',
          'Unlimited Bandwidth',
          'Free SSL Certificate',
          'Advanced cPanel Features',
          'Email Marketing Tools',
          'Daily Backups + Cloud Backup',
          'Priority Support 24/7',
          'Free Domain Migration',
          'Advanced Security'
        ],
        popular: true
      },
      {
        name: 'WHM Extra',
        price: '30.000',
        color: 'from-emerald-600 to-teal-500',
        features: [
          'Unlimited Accounts',
          'Unlimited Disk Space',
          'Unlimited Bandwidth',
          'Free SSL + Wildcard SSL',
          'Full cPanel Control Panel',
          'Email Marketing + Automation',
          'Daily + Hourly Backups',
          'Premium Support 24/7/365',
          'Free Domain Migration',
          'Advanced Security + DDoS Protection'
        ],
        popular: false
      },
      {
        name: 'WHM Super',
        price: '35.000',
        color: 'from-orange-600 to-red-500',
        features: [
          'Unlimited Accounts',
          'Unlimited Disk Space',
          'Unlimited Bandwidth',
          'Free SSL + Wildcard SSL + Comodo',
          'Premium cPanel + WHM Full Access',
          'Email Marketing + API Access',
          'Real-time Backups',
          'VIP Support 24/7/365',
          'Free Domain Migration',
          'Enterprise Security Suite',
          'CDN Integration'
        ],
        popular: false
      }
    ],
    mwhm: [
      {
        name: 'MWHM Mini',
        price: '40.000',
        color: 'from-indigo-600 to-blue-500',
        features: [
          'Managed WHM Service',
          'Unlimited Accounts',
          'Unlimited Disk Space',
          'Unlimited Bandwidth',
          'Free SSL Certificate',
          'Full Server Management',
          'Automatic Updates & Patches',
          'Server Monitoring 24/7',
          'Daily Backups',
          'Expert Support'
        ],
        popular: false
      },
      {
        name: 'MWHM Medium',
        price: '50.000',
        color: 'from-violet-600 to-purple-500',
        features: [
          'Managed WHM Service',
          'Unlimited Accounts',
          'Unlimited Disk Space',
          'Unlimited Bandwidth',
          'Free SSL + Wildcard SSL',
          'Full Server Management',
          'Automatic Updates & Security Patches',
          'Real-time Server Monitoring',
          'Daily + Hourly Backups',
          'Performance Optimization',
          'Expert Support with SLA'
        ],
        popular: true
      },
      {
        name: 'MWHM Extra',
        price: '65.000',
        color: 'from-rose-600 to-pink-500',
        features: [
          'Managed WHM Service Premium',
          'Unlimited Accounts',
          'Unlimited Disk Space',
          'Unlimited Bandwidth',
          'Free SSL + Wildcard SSL + EV SSL',
          'Full Server Management + Optimization',
          'Automatic Updates & Security Patches',
          'Real-time Server Monitoring + Alerts',
          'Real-time Backups + Offsite',
          'Advanced Performance Tuning',
          'Enterprise Support 24/7/365',
          'CDN Integration',
          'WAF Protection'
        ],
        popular: false
      }
    ]
  };

  const paymentMethods = [
    {
      name: 'Dana',
      number: '085705151602',
      icon: '💳',
      type: 'phone'
    },
    {
      name: 'QRIS',
      number: 'Scan QRIS Code di bawah',
      icon: '📱',
      type: 'qris'
    }
  ];

  const copyToClipboard = (text, method) => {
    navigator.clipboard.writeText(text);
    setCopySuccess(method);
    setTimeout(() => setCopySuccess(null), 2000);
  };

  const renderPlans = (type) => {
    return plans[type].map((plan, idx) => (
      <div
        key={idx}
        className={`relative group rounded-2xl overflow-hidden backdrop-blur-xl transition-all duration-300 ${
          plan.popular ? 'ring-2 ring-white/40 lg:scale-105' : 'hover:ring-2 hover:ring-white/20'
        }`}
        style={{
          background: plan.popular
            ? 'rgba(255,255,255,0.08)'
            : 'rgba(255,255,255,0.05)'
        }}
      >
        {/* Gradient Background */}
        <div
          className={`absolute inset-0 bg-gradient-to-br ${plan.color} opacity-0 group-hover:opacity-10 transition-opacity duration-300`}
        />

        {plan.popular && (
          <div className="absolute top-0 right-0 bg-gradient-to-r from-yellow-400 to-orange-400 text-black px-4 py-1 rounded-bl-2xl font-semibold text-sm">
            Paling Populer ⭐
          </div>
        )}

        <div className="relative p-8">
          <h3 className="text-2xl font-bold text-white mb-2">{plan.name}</h3>
          <div className="flex items-baseline gap-1 mb-6">
            <span className="text-5xl font-black bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent">
              Rp{plan.price}
            </span>
            <span className="text-gray-400">/bulan</span>
          </div>

          <button
            onClick={() => {
              setSelectedPlan(plan);
              setShowPaymentModal(true);
            }}
            className={`w-full py-3 rounded-lg font-semibold mb-8 transition-all duration-300 ${
              plan.popular
                ? `bg-gradient-to-r ${plan.color} text-white hover:shadow-lg hover:shadow-purple-500/50`
                : 'bg-white/10 text-white hover:bg-white/20'
            }`}
          >
            Pesan Sekarang
          </button>

          <div className="space-y-4">
            {plan.features.map((feature, i) => (
              <div key={i} className="flex items-start gap-3">
                <Check className="w-5 h-5 text-emerald-400 flex-shrink-0 mt-0.5" />
                <span className="text-gray-300 text-sm">{feature}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    ));
  };

  return (
    <div className="min-h-screen overflow-hidden" style={{ background: 'radial-gradient(ellipse 80% 80% at 50% 20%, rgba(59, 130, 246, 0.15), rgba(30, 41, 59, 0.8))' }}>
      {/* Animated Background */}
      <div className="fixed inset-0 pointer-events-none overflow-hidden">
        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl animate-pulse" />
        <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl animate-pulse" style={{ animationDelay: '1s' }} />
      </div>

      {/* Navigation */}
      <nav
        className={`fixed top-0 w-full z-50 transition-all duration-300 ${
          scrolled ? 'bg-black/40 backdrop-blur-xl border-b border-white/10' : 'bg-transparent'
        }`}
      >
        <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
          <div className="text-3xl font-black bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
            HostPro
          </div>
          <div className="flex gap-8 items-center">
            <a href="#" className="text-gray-300 hover:text-white transition">Tentang</a>
            <a href="#" className="text-gray-300 hover:text-white transition">Produk</a>
            <a href="#" className="text-gray-300 hover:text-white transition">Support</a>
          </div>
        </div>
      </nav>

      {/* Hero Section */}
      <section className="relative pt-32 pb-20 px-6">
        <div className="max-w-5xl mx-auto text-center">
          <h1 className="text-6xl md:text-7xl font-black mb-6 text-white leading-tight">
            Hosting Server
            <br />
            <span className="bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">
              Kelas Enterprise
            </span>
          </h1>
          <p className="text-xl text-gray-400 mb-8 max-w-2xl mx-auto">
            Solusi hosting terpercaya dengan teknologi terdepan, uptime 99.9%, dan support 24/7 siap membantu Anda
          </p>
          <div className="flex gap-4 justify-center flex-wrap">
            <button className="px-8 py-3 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-lg font-semibold hover:shadow-lg hover:shadow-purple-500/50 transition">
              Mulai Sekarang
            </button>
            <button className="px-8 py-3 bg-white/10 text-white rounded-lg font-semibold hover:bg-white/20 transition border border-white/20">
              Konsultasi Gratis
            </button>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="max-w-7xl mx-auto px-6 py-16 grid md:grid-cols-4 gap-6 mb-20">
        {[
          { icon: <Zap className="w-6 h-6" />, title: 'Super Cepat', desc: '99.9% Uptime Guarantee' },
          { icon: <Shield className="w-6 h-6" />, title: 'Aman', desc: 'SSL & DDoS Protection' },
          { icon: <Server className="w-6 h-6" />, title: 'Scalable', desc: 'Grow tanpa khawatir' },
          { icon: <Phone className="w-6 h-6" />, title: 'Support 24/7', desc: 'Bantuan kapan saja' }
        ].map((item, idx) => (
          <div
            key={idx}
            className="bg-white/5 backdrop-blur-xl rounded-xl p-6 border border-white/10 hover:border-white/30 transition group"
          >
            <div className="text-emerald-400 mb-3 group-hover:scale-110 transition transform">{item.icon}</div>
            <h3 className="text-white font-bold mb-2">{item.title}</h3>
            <p className="text-gray-400 text-sm">{item.desc}</p>
          </div>
        ))}
      </section>

      {/* Pricing Section */}
      <section className="max-w-7xl mx-auto px-6 py-20 relative">
        <div className="text-center mb-16">
          <h2 className="text-5xl font-black text-white mb-4">Paket Hosting Premium</h2>
          <p className="text-gray-400 mb-8">Pilih paket yang sesuai dengan kebutuhan Anda</p>

          {/* Tab Buttons */}
          <div className="flex justify-center gap-4 mb-12">
            {['whm', 'mwhm'].map((tab) => (
              <button
                key={tab}
                onClick={() => setActiveTab(tab)}
                className={`px-8 py-3 rounded-lg font-bold transition-all duration-300 ${
                  activeTab === tab
                    ? 'bg-gradient-to-r from-blue-500 to-purple-500 text-white shadow-lg'
                    : 'bg-white/10 text-gray-300 hover:bg-white/20'
                }`}
              >
                {tab.toUpperCase()}
              </button>
            ))}
          </div>
        </div>

        {/* Plans Grid */}
        <div className="grid md:grid-cols-4 gap-6 mb-20">
          {renderPlans(activeTab)}
        </div>
      </section>

      {/* Payment Modal */}
      {showPaymentModal && (
        <div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4">
          <div className="bg-gradient-to-br from-slate-900 to-slate-800 rounded-3xl p-8 max-w-2xl w-full border border-white/10 max-h-[90vh] overflow-y-auto">
            <div className="flex justify-between items-center mb-6">
              <h2 className="text-3xl font-black text-white">
                {selectedPlan?.name}
              </h2>
              <button
                onClick={() => setShowPaymentModal(false)}
                className="text-gray-400 hover:text-white text-2xl"
              >
                ✕
              </button>
            </div>

            <div className="bg-gradient-to-r from-blue-500/20 to-purple-500/20 rounded-xl p-6 mb-8 border border-white/10">
              <p className="text-gray-300 mb-2">Harga Bulanan</p>
              <p className="text-4xl font-black text-white">
                Rp{selectedPlan?.price}
              </p>
            </div>

            <h3 className="text-2xl font-bold text-white mb-6">Metode Pembayaran</h3>

            {/* Dana Payment */}
            <div className="mb-6 bg-white/5 rounded-xl p-6 border border-white/10 hover:border-white/30 transition">
              <div className="flex items-center justify-between mb-4">
                <div className="flex items-center gap-3">
                  <span className="text-2xl">💳</span>
                  <div>
                    <h4 className="text-white font-bold">Dana Transfer</h4>
                    <p className="text-gray-400 text-sm">Transfer via Dana App</p>
                  </div>
                </div>
              </div>
              <div className="bg-black/40 rounded-lg p-4 flex items-center justify-between">
                <div>
                  <p className="text-gray-400 text-sm mb-1">Nomor Dana</p>
                  <p className="text-white font-bold text-lg">085705151602</p>
                </div>
                <button
                  onClick={() => copyToClipboard('085705151602', 'dana')}
                  className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition"
                >
                  <Copy className="w-4 h-4" />
                  {copySuccess === 'dana' ? 'Tercopy!' : 'Copy'}
                </button>
              </div>
            </div>

            {/* QRIS Payment */}
            <div className="mb-6 bg-white/5 rounded-xl p-6 border border-white/10 hover:border-white/30 transition">
              <div className="flex items-center justify-between mb-4">
                <div className="flex items-center gap-3">
                  <span className="text-2xl">📱</span>
                  <div>
                    <h4 className="text-white font-bold">QRIS Payment</h4>
                    <p className="text-gray-400 text-sm">Scan QRIS dengan mobile banking Anda</p>
                  </div>
                </div>
              </div>
              <div className="bg-white/10 rounded-xl p-6 flex justify-center">
                {/* QRIS Mock */}
                <div className="bg-white/20 w-48 h-48 rounded-lg flex items-center justify-center border-2 border-dashed border-white/30">
                  <div className="text-center">
                    <p className="text-white/50 text-sm mb-2">QRIS Code</p>
                    <div className="grid grid-cols-4 gap-1">
                      {[...Array(16)].map((_, i) => (
                        <div
                          key={mIDJS4CEJNNO2ugFGEI4mYlSGGMeTTfT}
                          className={`w-3 h-3 rounded-xs ${
                            Math.random() > 0.5 ? 'bg-white' : 'bg-transparent'
                          }`}
                        />
                      ))}
                    </div>
                    <p className="text-white/50 text-xs mt-2">Rp{selectedPlan?.price}</p>
                  </div>
                </div>
              </div>
            </div>

            {/* Features List */}
            <div className="mb-8">
              <h4 className="text-white font-bold mb-4">Fitur Included</h4>
              <div className="grid grid-cols-2 gap-3">
                {selectedPlan?.features.slice(0, 6).map((feature, i) => (
                  <div key={i} className="flex items-start gap-2">
                    <Check className="w-4 h-4 text-emerald-400 flex-shrink-0 mt-1" />
                    <span className="text-gray-300 text-sm">{feature}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Action Buttons */}
            <div className="flex gap-4">
              <button className="flex-1 bg-gradient-to-r from-emerald-500 to-teal-500 text-white py-3 rounded-lg font-bold hover:shadow-lg transition">
                Konfirmasi Pembayaran
              </button>
              <button
                onClick={() => setShowPaymentModal(false)}
                className="flex-1 bg-white/10 text-white py-3 rounded-lg font-bold hover:bg-white/20 transition"
              >
                Tutup
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Footer */}
      <footer className="border-t border-white/10 mt-20 bg-black/20 backdrop-blur-xl py-12">
        <div className="max-w-7xl mx-auto px-6">
          <div className="grid md:grid-cols-4 gap-8 mb-8">
            <div>
              <h3 className="text-white font-bold mb-4">HostPro</h3>
              <p className="text-gray-400 text-sm">Solusi hosting terpercaya sejak 2024</p>
            </div>
            {[
              { title: 'Produk', items: ['WHM', 'MWHM', 'VPS'] },
              { title: 'Support', items: ['Chat 24/7', 'Tickets', 'Knowledge Base'] },
              { title: 'Legal', items: ['Terms', 'Privacy', 'SLA'] }
            ].map((col, idx) => (
              <div key={idx}>
                <h4 className="text-white font-bold mb-4">{col.title}</h4>
                <ul className="space-y-2">
                  {col.items.map((item, i) => (
                    <li key={i}>
                      <a href="#" className="text-gray-400 hover:text-white text-sm transition">
                        {item}
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
          <div className="border-t border-white/10 pt-8 flex justify-between items-center">
            <p className="text-gray-400 text-sm">© 2024 HostPro. All rights reserved.</p>
            <div className="flex gap-4">
              <a href="#" className="text-gray-400 hover:text-white transition">Twitter</a>
              <a href="#" className="text-gray-400 hover:text-white transition">Instagram</a>
              <a href="#" className="text-gray-400 hover:text-white transition">Facebook</a>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}