import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { getPublicStats } from '../utils/api';

const AdvertisePage = () => {
  const [stats, setStats] = useState(null);

  useEffect(() => {
    loadStats();
  }, []);

  const loadStats = async () => {
    try {
      const response = await getPublicStats();
      setStats(response.data);
    } catch (error) {
      console.error('Error loading stats:', error);
    }
  };

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white border-b">
        <div className="max-w-7xl mx-auto px-5 py-4 flex justify-between items-center">
          <Link to="/" className="flex items-center gap-3">
            <img src="/assets/img/logo1.png" alt="Logo" className="h-12" />
            <div>
              <div className="text-xl font-bold text-gray-900">
                <strong className="text-blue-600">RH</strong> Elektronik
              </div>
            </div>
          </Link>
          <Link to="/" className="text-gray-700 font-semibold hover:text-blue-600">← Home</Link>
        </div>
      </header>

      {/* Hero */}
      <section className="bg-gradient-to-br from-purple-600 via-blue-600 to-blue-800 text-white py-20">
        <div className="max-w-6xl mx-auto px-5 text-center">
          <h1 className="text-5xl font-extrabold mb-4">📢 Beriklan Bersama Kami</h1>
          <p className="text-2xl mb-8">Jangkau Ribuan Pelanggan Potensial di Industri Elektronik</p>
          <a href="https://wa.me/6281554333316?text=Halo,%20saya%20tertarik%20untuk%20beriklan%20di%20website%20RH%20Elektronik" target="_blank" rel="noopener noreferrer" className="inline-block bg-green-500 text-white px-10 py-4 rounded-xl font-bold text-lg hover:bg-green-600 transition shadow-lg">
            📱 Hubungi Kami di WhatsApp
          </a>
        </div>
      </section>

      <div className="max-w-6xl mx-auto px-5 py-16">
        {/* Stats */}
        {stats && (
          <div className="grid md:grid-cols-4 gap-6 mb-16">
            <div className="bg-white rounded-2xl shadow-lg p-6 text-center">
              <div className="text-5xl font-extrabold text-blue-600 mb-2">{stats.monthly_visitors.toLocaleString()}+</div>
              <div className="text-gray-600 font-semibold">Monthly Visitors</div>
            </div>
            <div className="bg-white rounded-2xl shadow-lg p-6 text-center">
              <div className="text-5xl font-extrabold text-green-600 mb-2">{stats.total_views.toLocaleString()}+</div>
              <div className="text-gray-600 font-semibold">Page Views</div>
            </div>
            <div className="bg-white rounded-2xl shadow-lg p-6 text-center">
              <div className="text-5xl font-extrabold text-purple-600 mb-2">{stats.avg_time_on_site}</div>
              <div className="text-gray-600 font-semibold">Avg Time on Site</div>
            </div>
            <div className="bg-white rounded-2xl shadow-lg p-6 text-center">
              <div className="text-5xl font-extrabold text-red-600 mb-2">{stats.bounce_rate}</div>
              <div className="text-gray-600 font-semibold">Bounce Rate</div>
            </div>
          </div>
        )}

        {/* Why Advertise */}
        <div className="mb-16">
          <h2 className="text-3xl font-extrabold text-center mb-12">🎯 Mengapa Beriklan di RH Elektronik?</h2>
          <div className="grid md:grid-cols-3 gap-8">
            <div className="bg-white rounded-2xl shadow-lg p-8">
              <div className="text-4xl mb-4">🎯</div>
              <h3 className="text-xl font-bold mb-3">Target Audience Tepat</h3>
              <p className="text-gray-600">Jangkau pelanggan yang sedang mencari service & produk elektronik berkualitas</p>
            </div>
            <div className="bg-white rounded-2xl shadow-lg p-8">
              <div className="text-4xl mb-4">📊</div>
              <h3 className="text-xl font-bold mb-3">Traffic Tinggi</h3>
              <p className="text-gray-600">Ribuan pengunjung aktif setiap bulan dari seluruh Jawa Barat & Tengah</p>
            </div>
            <div className="bg-white rounded-2xl shadow-lg p-8">
              <div className="text-4xl mb-4">💰</div>
              <h3 className="text-xl font-bold mb-3">ROI Maksimal</h3>
              <p className="text-gray-600">Harga kompetitif dengan hasil yang terukur untuk bisnis Anda</p>
            </div>
          </div>
        </div>

        {/* Ad Packages */}
        <div className="mb-16">
          <h2 className="text-3xl font-extrabold text-center mb-12">💼 Paket Iklan Kami</h2>
          <div className="grid md:grid-cols-3 gap-8">
            <div className="bg-white rounded-2xl shadow-lg p-8 border-2 border-gray-200">
              <h3 className="text-2xl font-bold mb-4 text-blue-600">Banner Ads</h3>
              <div className="text-4xl font-extrabold mb-6">Rp 500K<span className="text-lg text-gray-500">/bulan</span></div>
              <ul className="space-y-3 mb-8">
                <li className="flex items-center gap-2"><span className="text-green-600">✅</span> Header banner placement</li>
                <li className="flex items-center gap-2"><span className="text-green-600">✅</span> 50,000+ impressions</li>
                <li className="flex items-center gap-2"><span className="text-green-600">✅</span> Logo + link</li>
                <li className="flex items-center gap-2"><span className="text-green-600">✅</span> Monthly report</li>
              </ul>
            </div>
            
            <div className="bg-gradient-to-br from-blue-600 to-purple-600 rounded-2xl shadow-2xl p-8 text-white border-4 border-yellow-400 relative">
              <div className="absolute -top-4 left-1/2 transform -translate-x-1/2 bg-yellow-400 text-gray-900 px-4 py-1 rounded-full font-bold text-sm">POPULER</div>
              <h3 className="text-2xl font-bold mb-4">Sponsored Posts</h3>
              <div className="text-4xl font-extrabold mb-6">Rp 1.2JT<span className="text-lg opacity-80">/bulan</span></div>
              <ul className="space-y-3 mb-8">
                <li className="flex items-center gap-2"><span>✅</span> 3 blog posts/bulan</li>
                <li className="flex items-center gap-2"><span>✅</span> SEO optimized content</li>
                <li className="flex items-center gap-2"><span>✅</span> Social media sharing</li>
                <li className="flex items-center gap-2"><span>✅</span> Banner ads included</li>
                <li className="flex items-center gap-2"><span>✅</span> Premium placement</li>
              </ul>
            </div>

            <div className="bg-white rounded-2xl shadow-lg p-8 border-2 border-gray-200">
              <h3 className="text-2xl font-bold mb-4 text-purple-600">Product Showcase</h3>
              <div className="text-4xl font-extrabold mb-6">Rp 2JT<span className="text-lg text-gray-500">/bulan</span></div>
              <ul className="space-y-3 mb-8">
                <li className="flex items-center gap-2"><span className="text-green-600">✅</span> Featured product page</li>
                <li className="flex items-center gap-2"><span className="text-green-600">✅</span> Full product listings</li>
                <li className="flex items-center gap-2"><span className="text-green-600">✅</span> Homepage spotlight</li>
                <li className="flex items-center gap-2"><span className="text-green-600">✅</span> All benefits above</li>
                <li className="flex items-center gap-2"><span className="text-green-600">✅</span> Dedicated account manager</li>
              </ul>
            </div>
          </div>
        </div>

        {/* CTA */}
        <div className="bg-gradient-to-br from-blue-50 to-purple-50 rounded-2xl p-12 text-center">
          <h2 className="text-3xl font-extrabold mb-4">Siap Tingkatkan Bisnis Anda?</h2>
          <p className="text-xl text-gray-700 mb-8">Hubungi kami untuk diskusi package yang sesuai dengan kebutuhan Anda</p>
          <div className="flex justify-center gap-4 flex-wrap">
            <a href="https://wa.me/6281554333316?text=Halo,%20saya%20tertarik%20untuk%20beriklan%20di%20website%20RH%20Elektronik" target="_blank" rel="noopener noreferrer" className="bg-green-500 text-white px-10 py-4 rounded-xl font-bold text-lg hover:bg-green-600 transition shadow-lg">
              📱 Chat WhatsApp
            </a>
            <a href="mailto:cs.rhelektronik@gmail.com" className="bg-blue-600 text-white px-10 py-4 rounded-xl font-bold text-lg hover:bg-blue-700 transition shadow-lg">
              📧 Email Kami
            </a>
          </div>
        </div>
      </div>

      {/* Footer */}
      <footer className="bg-gray-900 text-gray-400 text-center py-10 mt-20">
        <p>© 2026 CV RH Elektronik - Authorized Service Center</p>
      </footer>
    </div>
  );
};

export default AdvertisePage;
