import React, { useState, useEffect, useRef } from 'react';
import { 
  Heart, Calendar, MapPin, Star, Menu, X, Instagram, Mail, Phone, 
  ChevronRight, Sparkles, Camera, Lock, Save, LogOut, Loader2, 
  CheckCircle, ArrowLeft, ChevronLeft, MessageCircle, Plus, Minus, Feather, Quote
} from 'lucide-react';

// ⚠️ PENTING: MASUKKAN URL GOOGLE APPS SCRIPT ANDA DI SINI
const GOOGLE_SCRIPT_URL = "https://script.google.com/macros/s/AKfycbwsSPmOLtgdhYG61bDDY_xKNLKFKTgRz0SId9_g23N-VC7WS-d1UBN4xYOH_Nur5Z_S/exec";

// ==========================================
// KOMPONEN DASHBOARD ADMIN
// ==========================================
const AdminPanel = ({ initialData, onBack }) => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [password, setPassword] = useState('');
  const [formData, setFormData] = useState({});
  const [isSaving, setIsSaving] = useState(false);
  const [toast, setToast] = useState({ show: false, message: '', type: '' });

  useEffect(() => {
    if (initialData) setFormData(initialData);
  }, [initialData]);

  const showToast = (msg, type = 'success') => {
    setToast({ show: true, message: msg, type });
    setTimeout(() => setToast({ show: false, message: '', type: '' }), 3000);
  };

  const handleLogin = (e) => {
    e.preventDefault();
    if (password.trim() !== '') setIsLoggedIn(true);
  };

  const handleSave = async () => {
    setIsSaving(true);
    try {
      const response = await fetch(GOOGLE_SCRIPT_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'text/plain;charset=utf-8' },
        body: JSON.stringify({ password, updates: formData })
      });
      const result = await response.json();
      
      if (result.status === 'success') {
        showToast(result.message, 'success');
      } else {
        showToast(result.message, 'error');
        if (result.message.toLowerCase().includes("sandi")) {
          setTimeout(() => setIsLoggedIn(false), 2000);
        }
      }
    } catch (error) {
      showToast('Gagal terhubung ke server. Pastikan URL Script benar.', 'error');
    }
    setIsSaving(false);
  };

  if (!isLoggedIn) {
    return (
      <div className="min-h-screen bg-[#FAF8F5] flex items-center justify-center p-6 font-sans text-[#221D18]">
        <div className="bg-white p-10 rounded-3xl shadow-xl w-full max-w-md text-center border border-[#EAE5DE]">
          <Lock className="w-12 h-12 mx-auto text-[#9C7449] mb-6" />
          <h1 className="text-2xl font-bold mb-2">Admin Login</h1>
          <p className="text-gray-500 text-sm mb-8">Masukkan kata sandi untuk masuk ke panel pengaturan CMS.</p>
          <form onSubmit={handleLogin} className="space-y-6">
            <input 
              type="password" 
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:border-[#9C7449] transition-all" 
              placeholder="Kata Sandi..." 
              required 
            />
            <button type="submit" className="w-full bg-[#221D18] text-white py-3 rounded-xl font-medium tracking-widest text-sm hover:bg-[#9C7449] transition-colors">
              Masuk Dashboard
            </button>
          </form>
          <button onClick={onBack} className="mt-8 text-sm text-gray-500 hover:text-[#9C7449] font-medium transition-colors flex items-center justify-center gap-2 w-full">
            <ArrowLeft className="w-4 h-4" /> Kembali ke Website
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-[#FAF8F5] font-sans flex flex-col text-[#221D18]">
      <div className={`fixed top-5 left-1/2 -translate-x-1/2 px-6 py-3 rounded-full shadow-xl z-50 transform transition-all duration-300 flex items-center gap-2 text-white ${toast.show ? 'translate-y-0 opacity-100' : '-translate-y-20 opacity-0'} ${toast.type === 'error' ? 'bg-red-500' : 'bg-green-500'}`}>
        <CheckCircle className="w-5 h-5" />
        <span>{toast.message}</span>
      </div>

      <nav className="bg-white border-b border-[#EAE5DE] sticky top-0 z-40 shadow-sm px-6 py-4 flex justify-between items-center">
        <div className="font-bold text-lg flex items-center gap-2">
          <Sparkles className="w-5 h-5 text-[#9C7449]" /> Satu Cerita CMS
        </div>
        <div className="flex items-center gap-4">
          <button onClick={() => setIsLoggedIn(false)} className="text-sm text-gray-500 hover:text-red-500 font-medium">Keluar</button>
          <button onClick={handleSave} disabled={isSaving} className="bg-[#9C7449] hover:bg-[#7a5937] text-white px-6 py-2.5 rounded-full text-sm font-medium transition-colors flex items-center gap-2 disabled:opacity-70">
            {isSaving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
            {isSaving ? 'Menyimpan...' : 'Simpan Perubahan'}
          </button>
        </div>
      </nav>

      <div className="max-w-5xl mx-auto px-6 py-10 w-full flex-grow">
        <div className="bg-white p-8 rounded-3xl shadow-sm border border-[#EAE5DE]">
          <h2 className="text-xl font-bold mb-6 border-b pb-4">Editor Konten Website</h2>
          
          {Object.keys(formData).length === 0 ? (
            <div className="text-center py-10 text-gray-500">
              Tidak ada data yang ditemukan. Pastikan URL Google Script sudah diisi dan Spreadsheet tidak kosong.
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {Object.keys(formData).sort().map(key => (
                <div key={key} className="flex flex-col mb-2">
                  <label className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">
                    {key.replace(/-/g, ' ')}
                  </label>
                  {String(formData[key]).length > 60 || key.includes('desc') ? (
                    <textarea 
                      rows={4}
                      value={formData[key]}
                      onChange={(e) => setFormData({...formData, [key]: e.target.value})}
                      className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:border-[#9C7449] transition-all resize-none text-sm"
                    />
                  ) : (
                    <input 
                      type="text"
                      value={formData[key]}
                      onChange={(e) => setFormData({...formData, [key]: e.target.value})}
                      className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:border-[#9C7449] transition-all text-sm"
                    />
                  )}
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

// ==========================================
// KOMPONEN WEBSITE UTAMA
// ==========================================
const App = () => {
  const [view, setView] = useState('home'); 
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [cmsData, setCmsData] = useState({});
  const [activeTab, setActiveTab] = useState('wedding-only');
  const [openFaq, setOpenFaq] = useState(null);
  const sliderRef = useRef(null);

  useEffect(() => {
    const fetchCMS = async () => {
      if (!GOOGLE_SCRIPT_URL) return;
      try {
        const response = await fetch(GOOGLE_SCRIPT_URL);
        const data = await response.json();
        setCmsData(data);
      } catch (error) {
        console.error("Gagal mengambil data CMS:", error);
      }
    };
    fetchCMS();
  }, []);

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

  useEffect(() => {
    const link = document.createElement('link');
    link.href = 'https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Montserrat:wght@300;400;500;600&display=swap';
    link.rel = 'stylesheet';
    document.head.appendChild(link);
  }, []);

  const t = (key, fallback) => cmsData[key] !== undefined && cmsData[key] !== "" ? cmsData[key] : fallback;

  if (view === 'admin') {
    return <AdminPanel initialData={cmsData} onBack={() => setView('home')} />;
  }

  const themeStyle = { fontFamily: "'Montserrat', sans-serif" };
  const serifStyle = { fontFamily: "'Cormorant Garamond', serif" };

  const scrollSlider = (direction) => {
    if (sliderRef.current) {
      const scrollAmount = window.innerWidth < 768 ? 260 : 320;
      sliderRef.current.scrollBy({ left: direction === 'left' ? -scrollAmount : scrollAmount, behavior: 'smooth' });
    }
  };

  const handleWaLink = (message) => {
    return `https://wa.me/6285194283636?text=${encodeURIComponent(message)}`;
  };

  return (
    <div style={themeStyle} className="min-h-screen bg-[#FAF8F5] text-[#221D18] font-normal tracking-wide selection:bg-[#9C7449] selection:text-white">
      
      {/* Navigation */}
      <nav className={`fixed w-full z-50 transition-all duration-500 ${isScrolled ? 'bg-[#FAF8F5]/95 backdrop-blur-md shadow-sm py-4' : 'bg-transparent py-6'}`}>
        <div className="max-w-7xl mx-auto px-6 md:px-12 flex justify-between items-center">
          <a href="#" className="text-2xl md:text-3xl font-semibold tracking-wider flex items-center gap-2 text-[#221D18]" style={serifStyle}>
            <Sparkles className="w-5 h-5 text-[#9C7449]" />
            Satu Cerita.
          </a>
          
          <div className="hidden lg:flex items-center gap-8 xl:gap-10 text-[11px] xl:text-xs tracking-[0.2em] uppercase font-medium">
            <a href="#about" className="hover:text-[#9C7449] transition-colors">{t('menu-1-text', 'Tentang Kami')}</a>
            <a href="#team" className="hover:text-[#9C7449] transition-colors">{t('menu-2-text', 'Tim Kami')}</a>
            <a href="#services" className="hover:text-[#9C7449] transition-colors">{t('menu-3-text', 'Paket')}</a>
            <a href="#portfolio" className="hover:text-[#9C7449] transition-colors">{t('menu-4-text', 'Portofolio')}</a>
            <a href="#contact" className="px-6 py-3 border border-[#221D18] hover:bg-[#221D18] hover:text-white transition-all rounded-full">
              Konsultasi
            </a>
          </div>

          <button className="lg:hidden text-[#221D18] p-2" onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}>
            {isMobileMenuOpen ? <X /> : <Menu />}
          </button>
        </div>

        {isMobileMenuOpen && (
          <div className="lg:hidden absolute top-full left-0 w-full bg-[#FAF8F5]/95 backdrop-blur-md border-t border-[#EAE5DE] shadow-lg py-8 flex flex-col items-center gap-6">
            <a href="#about" onClick={() => setIsMobileMenuOpen(false)} className="w-full text-center py-2 text-sm tracking-[0.2em] uppercase hover:text-[#9C7449]">Tentang Kami</a>
            <a href="#team" onClick={() => setIsMobileMenuOpen(false)} className="w-full text-center py-2 text-sm tracking-[0.2em] uppercase hover:text-[#9C7449]">Tim Kami</a>
            <a href="#services" onClick={() => setIsMobileMenuOpen(false)} className="w-full text-center py-2 text-sm tracking-[0.2em] uppercase hover:text-[#9C7449]">Paket Layanan</a>
            <a href="#portfolio" onClick={() => setIsMobileMenuOpen(false)} className="w-full text-center py-2 text-sm tracking-[0.2em] uppercase hover:text-[#9C7449]">Portofolio</a>
            <a href="#contact" onClick={() => setIsMobileMenuOpen(false)} className="mt-4 px-8 py-3 bg-[#221D18] text-white text-xs tracking-[0.2em] uppercase rounded-full">Konsultasi</a>
          </div>
        )}
      </nav>

      {/* Hero Section */}
      <header className="relative h-screen flex items-center justify-center overflow-hidden">
        <div className="absolute inset-0 z-0">
          <img 
            src={t('hero-bg-img', 'https://images.unsplash.com/photo-1519741497674-611481863552?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80')} 
            alt="Wedding Background" 
            className="w-full h-full object-cover object-center scale-105 animate-[pulse_20s_ease-in-out_infinite_alternate]"
          />
          <div className="absolute inset-0 bg-gradient-to-b from-[#221D18]/40 via-[#221D18]/20 to-[#221D18]/60"></div>
        </div>
        
        <div className="relative z-10 text-center px-4 max-w-4xl mx-auto mt-20">
          <span className="text-[#9C7449] tracking-[0.3em] uppercase text-xs md:text-sm font-medium mb-6 block drop-shadow-md">
            {t('hero-kicker', 'Wedding Organizer & Planner')}
          </span>
          <h1 className="text-5xl md:text-7xl lg:text-8xl text-white mb-6 leading-tight drop-shadow-lg font-medium" style={serifStyle}>
            {t('hero-title-1', 'Menghadirkan Kisah,')}<br/>
            <span className="italic font-light text-[#FAF8F5]">{t('hero-title-2', 'Paling Indah.')}</span>
          </h1>
          <p className="text-white/90 text-sm md:text-base lg:text-lg mb-12 font-light max-w-2xl mx-auto drop-shadow-md leading-relaxed tracking-wide">
            {t('hero-desc', 'Di setiap pernikahan, selalu ada kisah indah yang ingin dikenang seumur hidup. Celebrate love in the most beautiful way.')}
          </p>
          <a href="#contact" className="inline-flex items-center gap-3 bg-transparent border border-white text-white px-8 py-4 rounded-full text-xs uppercase tracking-[0.2em] font-medium hover:bg-white hover:text-[#221D18] transition-all duration-500">
            Mulai Cerita Anda <ChevronRight className="w-4 h-4" />
          </a>
        </div>
      </header>

      {/* About Section */}
      <section id="about" className="py-32 px-6 md:px-12 max-w-7xl mx-auto">
        <div className="grid lg:grid-cols-2 gap-20 items-center">
          <div className="relative px-8 lg:px-0">
            <div className="w-4/5 aspect-[3/4] rounded-t-full rounded-bl-full overflow-hidden border-[12px] border-white shadow-[0_10px_40px_-10px_rgba(34,29,24,0.15)]">
              <img src={t('about-img-main', 'https://images.unsplash.com/photo-1519699047748-de8e457a634e?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80')} alt="Potret" className="w-full h-full object-cover" />
            </div>
            <div className="absolute -bottom-10 right-0 w-3/5 aspect-[4/5] rounded-t-full overflow-hidden border-[10px] border-[#FAF8F5] shadow-[0_10px_40px_-10px_rgba(34,29,24,0.15)]">
              <img src={t('about-img-accent', 'https://images.unsplash.com/photo-1511285560929-80b456fea0bc?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80')} alt="Detail" className="w-full h-full object-cover" />
            </div>
          </div>
          
          <div className="mt-16 lg:mt-0 lg:pl-10">
            <span className="text-[#9C7449] tracking-[0.2em] uppercase text-[10px] font-semibold mb-4 block">Tentang Kami</span>
            <h2 className="text-4xl md:text-5xl lg:text-6xl mb-8 text-[#221D18] leading-tight" style={serifStyle}>
              {t('about-title', 'Satu Cerita Bahagia.')}
            </h2>
            <div className="space-y-6 text-[#221D18]/80 text-sm md:text-base leading-loose font-light">
              <p>{t('about-desc', 'Karena bagi kami, setiap pernikahan adalah satu cerita bahagia yang layak dirayakan dengan sepenuh hati. Kami hadir untuk merangkai momen berharga itu menjadi kisah yang utuh, penuh makna, dan tak terlupakan.')}</p>
            </div>
            
            <div className="grid grid-cols-2 gap-8 mt-12 pt-10 border-t border-[#EAE5DE]">
              <div>
                <h4 className="text-xl text-[#221D18] mb-2" style={serifStyle}>Kreatif & Personal</h4>
                <p className="text-xs text-[#221D18]/60 leading-relaxed">Disesuaikan secara eksklusif dengan perjalanan cinta Anda.</p>
              </div>
              <div>
                <h4 className="text-xl text-[#221D18] mb-2" style={serifStyle}>Tim Profesional</h4>
                <p className="text-xs text-[#221D18]/60 leading-relaxed">Mengeksekusi setiap detail dengan presisi dan keanggunan.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Team / Crew Section */}
      <section id="team" className="py-32 bg-white px-6 md:px-12 overflow-hidden">
        <div className="max-w-7xl mx-auto relative group">
          <div className="text-center mb-20">
            <span className="text-[#9C7449] tracking-[0.2em] uppercase text-[10px] font-semibold mb-4 block">Tim Kami</span>
            <h2 className="text-4xl md:text-5xl lg:text-6xl text-[#221D18] mb-6" style={serifStyle}>{t('crew-title', 'Di Balik Layar Kebahagiaan')}</h2>
          </div>

          <button onClick={() => scrollSlider('left')} className="hidden md:flex absolute left-0 top-[55%] -translate-y-1/2 -ml-6 z-10 bg-[#FAF8F5] border border-[#EAE5DE] p-4 rounded-full shadow-lg text-[#221D18] hover:text-[#9C7449] transition-all">
            <ChevronLeft />
          </button>
          <button onClick={() => scrollSlider('right')} className="hidden md:flex absolute right-0 top-[55%] -translate-y-1/2 -mr-6 z-10 bg-[#FAF8F5] border border-[#EAE5DE] p-4 rounded-full shadow-lg text-[#221D18] hover:text-[#9C7449] transition-all">
        <ChevronRight />
      </button>

      <div ref={sliderRef} className="flex gap-8 overflow-x-auto snap-x snap-mandatory scroll-smooth pb-12 pt-4 px-4" style={{ scrollbarWidth: 'none' }}>
        {[
          { name: t('crew-1-name', 'M. Aditya Fahrul Fauzy'), role: t('crew-1-role', 'Crew'), img: t('crew-1-img', 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=500&q=80'), top: true },
          { name: t('crew-2-name', 'Nabila S. Alya'), role: t('crew-2-role', 'Crew'), img: t('crew-2-img', 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=500&q=80'), top: false },
          { name: t('crew-3-name', 'Mely Ristiani S.'), role: t('crew-3-role', 'Crew'), img: t('crew-3-img', 'https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=500&q=80'), top: true },
          { name: t('crew-4-name', 'Reka Indra Restika'), role: t('crew-4-role', 'Admin'), img: t('crew-4-img', 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=500&q=80'), top: false },
          { name: t('crew-5-name', 'Putri Dede Lestari'), role: t('crew-5-role', 'Crew'), img: t('crew-5-img', 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=500&q=80'), top: true },
          { name: t('crew-6-name', 'Syahrul'), role: t('crew-6-role', 'Crew'), img: t('crew-6-img', 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=500&q=80'), top: false },
        ].map((member, i) => (
          <div key={i} className={`w-60 md:w-72 flex-shrink-0 snap-center group text-center ${member.top ? '' : 'mt-8'}`}>
            <div className={`relative overflow-hidden aspect-[4/5] mb-6 shadow-sm border-[6px] border-[#FAF8F5] group-hover:border-[#EAE5DE] transition-all duration-500 ${member.top ? 'rounded-t-full rounded-bl-full' : 'rounded-t-full rounded-br-full'}`}>
              <img src={member.img} alt={member.name} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" />
            </div>
            <h3 className="text-xl text-[#221D18] mb-1" style={serifStyle}>{member.name}</h3>
            <p className="text-[10px] text-[#9C7449] uppercase tracking-[0.2em] font-medium">{member.role}</p>
          </div>
        ))}
      </div>
    </div>
  </section>

  {/* Services (Paket Pernikahan - Full Version) */}
      <section id="services" className="py-32 bg-[#F8F6F2] px-6 md:px-12">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-16">
            <span className="text-[#9C7449] tracking-[0.2em] uppercase text-[10px] font-semibold mb-4 block">Layanan Kami</span>
            <h2 className="text-4xl md:text-5xl lg:text-6xl text-[#221D18] mb-6" style={serifStyle}>Paket Pernikahan</h2>
            <p className="text-[#221D18]/60 mt-4 max-w-2xl mx-auto text-sm leading-relaxed font-light">Kurasi paket elegan yang dirancang khusus untuk memenuhi impian dan kebutuhan esensial di hari bahagia Anda.</p>
          </div>

          {/* Tab Navigation */}
          <div className="flex justify-center gap-4 md:gap-6 mb-16 flex-wrap">
            {['wedding-only', 'all-package', 'custom'].map(tab => (
              <button 
                key={tab}
                onClick={() => setActiveTab(tab)}
                className={`px-8 py-3 rounded-full text-[11px] uppercase tracking-[0.2em] font-medium transition-all duration-300 ${activeTab === tab ? 'bg-[#221D18] text-white shadow-lg' : 'bg-transparent text-[#221D18] border border-[#221D18]/30 hover:border-[#9C7449]'}`}
              >
                {tab.replace('-', ' ')}
              </button>
            ))}
          </div>

          {/* Tab Content: Wedding Only */}
          {activeTab === 'wedding-only' && (
            <div className="flex flex-wrap justify-center gap-8 animate-fade-in">
              <div className="w-full md:w-[calc(50%-1rem)] lg:w-[calc(33.333%-1.34rem)] bg-white p-10 border border-[#EAE5DE] flex flex-col items-center text-center">
                <h3 className="text-2xl text-[#221D18] mb-3" style={serifStyle}>Paket Sweet</h3>
                <div className="text-xl font-medium text-[#9C7449] mb-8">Rp 2.400.000</div>
                <ul className="text-sm text-[#221D18]/70 space-y-4 mb-8 flex-grow font-light">
                  <li>4 Crew Profesional (7 Jam)</li>
                  <li>2x Meeting & 1x Survey Lokasi</li>
                  <li>Rundown Acara</li>
                  <li>Koordinator hari-H</li>
                </ul>
                <a href={handleWaLink('Halo Satu Cerita, saya tertarik dengan Paket Sweet seharga Rp 2.400.000. Boleh minta info lebih lanjut?')} target="_blank" className="mt-auto w-full py-3 border border-[#221D18] text-[10px] uppercase tracking-[0.2em] hover:bg-[#221D18] hover:text-white transition-colors flex items-center justify-center gap-2">
                  <MessageCircle className="w-3 h-3"/> Pesan Sekarang
                </a>
              </div>
              
              {/* Highlighted Deluxe Package */}
              <div className="w-full md:w-[calc(50%-1rem)] lg:w-[calc(33.333%-1.34rem)] bg-[#221D18] p-10 transform md:-translate-y-4 shadow-xl flex flex-col items-center text-center relative">
                <Star className="absolute top-6 right-6 w-5 h-5 text-[#9C7449] fill-[#9C7449]/20" />
                <h3 className="text-2xl text-white mb-3" style={serifStyle}>Paket Deluxe</h3>
                <div className="text-xl font-medium text-[#9C7449] mb-8">Rp 4.000.000</div>
                <ul className="text-sm text-white/80 space-y-4 mb-8 flex-grow font-light">
                  <li>6 Profesional Crew (8 Jam)</li>
                  <li>Master of Ceremony (MC)</li>
                  <li>1x Pendampingan Pre-Wed & Fitting</li>
                  <li>Rundown, Buku Tamu, dll.</li>
                </ul>
                <a href={handleWaLink('Halo Satu Cerita, saya tertarik dengan Paket Deluxe seharga Rp 4.000.000. Boleh minta info lebih lanjut?')} target="_blank" className="mt-auto w-full py-3 bg-[#9C7449] text-white text-[10px] uppercase tracking-[0.2em] hover:bg-white hover:text-[#221D18] transition-colors flex items-center justify-center gap-2">
                  <MessageCircle className="w-3 h-3"/> Pesan Sekarang
                </a>
              </div>

              <div className="w-full md:w-[calc(50%-1rem)] lg:w-[calc(33.333%-1.34rem)] bg-white p-10 border border-[#EAE5DE] flex flex-col items-center text-center">
                <h3 className="text-2xl text-[#221D18] mb-3" style={serifStyle}>Paket Luxury</h3>
                <div className="text-xl font-medium text-[#9C7449] mb-8">Rp 4.850.000</div>
                <ul className="text-sm text-[#221D18]/70 space-y-4 mb-8 flex-grow font-light">
                  <li>8 Profesional Crew (8 Jam)</li>
                  <li>Master of Ceremony (MC)</li>
                  <li>1x Pendampingan Pre-Wed & Fitting</li>
                  <li>2x Meeting & 1x Survei Lokasi</li>
                </ul>
                <a href={handleWaLink('Halo Satu Cerita, saya tertarik dengan Paket Luxury seharga Rp 4.850.000. Boleh minta info lebih lanjut?')} target="_blank" className="mt-auto w-full py-3 border border-[#221D18] text-[10px] uppercase tracking-[0.2em] hover:bg-[#221D18] hover:text-white transition-colors flex items-center justify-center gap-2">
                  <MessageCircle className="w-3 h-3"/> Pesan Sekarang
                </a>
              </div>
            </div>
          )}

          {/* Tab Content: All Package */}
          {activeTab === 'all-package' && (
            <div className="flex flex-wrap justify-center gap-8 animate-fade-in">
              <div className="w-full md:w-[calc(50%-1rem)] lg:w-[calc(33.333%-1.34rem)] bg-white p-10 border border-[#EAE5DE] flex flex-col items-center text-center">
                <h3 className="text-2xl text-[#221D18] mb-3" style={serifStyle}>Paket A - Basic</h3>
                <div className="text-xl font-medium text-[#9C7449] mb-8">Rp 25.500.000</div>
                <ul className="text-sm text-[#221D18]/70 space-y-4 mb-8 flex-grow font-light">
                  <li>Wedding Organizer</li>
                  <li>Dekorasi & Tenda</li>
                  <li>Makeup & Attire</li>
                  <li>Photography & MC</li>
                </ul>
                <a href={handleWaLink('Halo, info Paket A Basic Rp 25.5jt?')} target="_blank" className="mt-auto w-full py-3 border border-[#221D18] text-[10px] uppercase tracking-[0.2em] hover:bg-[#221D18] hover:text-white transition-colors flex items-center justify-center gap-2">
                  <MessageCircle className="w-3 h-3"/> Pesan Sekarang
                </a>
              </div>
              
              <div className="w-full md:w-[calc(50%-1rem)] lg:w-[calc(33.333%-1.34rem)] bg-[#221D18] p-10 transform md:-translate-y-4 shadow-xl flex flex-col items-center text-center relative">
                <Star className="absolute top-6 right-6 w-5 h-5 text-[#9C7449] fill-[#9C7449]/20" />
                <h3 className="text-2xl text-white mb-3" style={serifStyle}>Paket B - Arsanta</h3>
                <div className="text-xl font-medium text-[#9C7449] mb-8">Rp 37.500.000</div>
                <ul className="text-sm text-white/80 space-y-4 mb-8 flex-grow font-light">
                  <li>WO & Master of Ceremony</li>
                  <li>Dekorasi & Tenda</li>
                  <li>Makeup & Attire</li>
                  <li>Photo, Video & Upacara Adat</li>
                </ul>
                <a href={handleWaLink('Halo, info Paket B Arsanta Rp 37.5jt?')} target="_blank" className="mt-auto w-full py-3 bg-[#9C7449] text-white text-[10px] uppercase tracking-[0.2em] hover:bg-white hover:text-[#221D18] transition-colors flex items-center justify-center gap-2">
                  <MessageCircle className="w-3 h-3"/> Pesan Sekarang
                </a>
              </div>

              <div className="w-full md:w-[calc(50%-1rem)] lg:w-[calc(33.333%-1.34rem)] bg-white p-10 border border-[#EAE5DE] flex flex-col items-center text-center">
                <h3 className="text-2xl text-[#221D18] mb-3" style={serifStyle}>Paket C - Langkara</h3>
                <div className="text-xl font-medium text-[#9C7449] mb-8">Rp 46.800.000</div>
                <ul className="text-sm text-[#221D18]/70 space-y-4 mb-8 flex-grow font-light">
                  <li>Wedding Organizer</li>
                  <li>Makeup, Attire, Dekorasi</li>
                  <li>Photo & Videography</li>
                  <li>Entertainment & Adat</li>
                </ul>
                <a href={handleWaLink('Halo, info Paket C Langkara Rp 46.8jt?')} target="_blank" className="mt-auto w-full py-3 border border-[#221D18] text-[10px] uppercase tracking-[0.2em] hover:bg-[#221D18] hover:text-white transition-colors flex items-center justify-center gap-2">
                  <MessageCircle className="w-3 h-3"/> Pesan Sekarang
                </a>
              </div>
            </div>
          )}

          {/* Tab Content: Custom */}
          {activeTab === 'custom' && (
            <div className="max-w-3xl mx-auto animate-fade-in">
              <div className="bg-white p-16 border border-[#EAE5DE] flex flex-col items-center text-center">
                <Feather className="w-8 h-8 text-[#9C7449] mb-6 stroke-[1]" />
                <h3 className="text-4xl mb-4 text-[#221D18]" style={serifStyle}>Custom <span className="italic font-light">Package</span></h3>
                <div className="text-xl font-medium text-[#9C7449] mb-8">Mulai Rp 30.000.000</div>
                <div className="w-12 h-[1px] bg-[#9C7449]/40 mb-8"></div>
                <p className="text-[#221D18]/70 leading-relaxed mb-10 font-light text-sm md:text-base">
                  Rancang setiap detail pernikahan sesuai dengan gaya dan ekspektasi Anda. Dari pemilihan MUA, Fotografer, Dekorasi, hingga hiburan, kami memberikan kebebasan mutlak.
                </p>
                <a href={handleWaLink('Halo, saya ingin konsultasi Paket Custom.')} target="_blank" className="px-8 py-3 border border-[#221D18] text-[#221D18] rounded-full text-[11px] uppercase tracking-[0.2em] hover:bg-[#221D18] hover:text-white transition-all flex items-center justify-center gap-2">
                  <MessageCircle className="w-4 h-4"/> Mulai Konsultasi Vendor
                </a>
              </div>
            </div>
          )}

        </div>
      </section>

      {/* Portfolio Gallery */}
      <section id="portfolio" className="py-32 px-6 md:px-12 bg-white">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-16">
            <span className="text-[#9C7449] tracking-[0.2em] uppercase text-[10px] font-semibold mb-4 block">Karya Kami</span>
            <h2 className="text-4xl md:text-5xl lg:text-6xl text-[#221D18]" style={serifStyle}>Galeri <span className="italic font-light">Kebahagiaan</span></h2>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div className="group relative overflow-hidden aspect-[4/5] lg:col-span-2">
              <img src="https://images.unsplash.com/photo-1606800052052-a08af7148866?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Portfolio" className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105" />
              <div className="absolute inset-0 bg-gradient-to-t from-[#221D18]/80 via-[#221D18]/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex flex-col justify-end p-10">
                <span className="text-[#9C7449] text-[10px] tracking-[0.2em] uppercase mb-2">Modern Tradisional</span>
                <h3 className="text-3xl text-white" style={serifStyle}>Raka & Dian</h3>
              </div>
            </div>
            
            <div className="group relative overflow-hidden aspect-[4/5]">
              <img src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Portfolio" className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105" />
              <div className="absolute inset-0 bg-gradient-to-t from-[#221D18]/80 via-[#221D18]/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex flex-col justify-end p-8">
                <span className="text-[#9C7449] text-[10px] tracking-[0.2em] uppercase mb-2">Pernikahan Intim</span>
                <h3 className="text-2xl text-white" style={serifStyle}>Andi & Sari</h3>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ Section */}
      <section id="faq" className="py-32 bg-[#FAF8F5] px-6 md:px-12">
        <div className="max-w-3xl mx-auto">
          <div className="text-center mb-16">
            <span className="text-[#9C7449] tracking-[0.2em] uppercase text-[10px] font-semibold mb-4 block">Pertanyaan Umum</span>
            <h2 className="text-4xl md:text-5xl text-[#221D18]" style={serifStyle}>Segala Hal yang Ingin <br/><span className="italic font-light">Anda Ketahui</span></h2>
          </div>

          <div className="space-y-4">
            {[
              { q: 'Bagaimana cara kerja Paket Custom?', a: 'Anda memiliki fleksibilitas penuh untuk memilih vendor sesuai preferensi dan budget Anda. Harga total akan disesuaikan secara transparan.' },
              { q: 'Di mana lokasi operasional Satu Cerita?', a: 'Kantor pusat kami di Kuningan, Jawa Barat. Namun, kami siap melayani di berbagai venue pilihan Anda di area sekitarnya.' },
              { q: 'Berapa jumlah kru di hari H?', a: 'Jumlah kru disesuaikan dengan skala acara dan paket, mulai dari 4 kru profesional hingga 9 kru untuk memastikan kelancaran acara tanpa celah.' }
            ].map((faq, i) => (
              <div key={i} className="border-b border-[#EAE5DE] pb-2">
                <button onClick={() => setOpenFaq(openFaq === i ? null : i)} className="w-full text-left py-5 flex justify-between items-center focus:outline-none">
                  <span className="text-xl text-[#221D18]" style={serifStyle}>{faq.q}</span>
                  {openFaq === i ? <Minus className="w-4 h-4 text-[#9C7449]" /> : <Plus className="w-4 h-4 text-[#9C7449]" />}
                </button>
                {openFaq === i && (
                  <div className="text-[#221D18]/60 text-sm leading-relaxed font-light pb-6 animate-fade-in">
                    {faq.a}
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Testimonial */}
      <section className="py-32 bg-[#221D18] text-white relative overflow-hidden">
        <div className="absolute top-0 right-0 w-96 h-96 bg-[#9C7449]/10 rounded-full blur-3xl -mr-20 -mt-20"></div>
        <div className="absolute bottom-0 left-0 w-96 h-96 bg-[#FAF8F5]/5 rounded-full blur-3xl -ml-20 -mb-20"></div>
        
        <div className="max-w-4xl mx-auto px-6 text-center relative z-10">
          <Quote className="w-10 h-10 text-[#9C7449]/50 mx-auto mb-10 stroke-[1]" />
          <p className="text-2xl md:text-4xl leading-relaxed font-light mb-12 italic text-white/90" style={serifStyle}>
            "Professional banget timnya! Dari awal konsultasi sampai hari-H semuanya berjalan mulus. Hasil dekorasinya sangat elegan dan melebihi ekspektasi kami."
          </p>
          <div className="flex flex-col items-center">
            <span className="text-xs uppercase tracking-[0.2em] font-medium text-[#9C7449] mb-1">Raka & Dian</span>
            <span className="text-xs text-white/50 font-light">Pernikahan, 5 Agustus 2023</span>
          </div>
        </div>
      </section>

      {/* CTA / Contact Section */}
      <section id="contact" className="py-32 px-6 md:px-12 bg-white">
        <div className="max-w-6xl mx-auto flex flex-col lg:flex-row gap-16 lg:gap-24">
          <div className="lg:w-1/2 flex flex-col justify-center">
            <span className="text-[#9C7449] tracking-[0.2em] uppercase text-[10px] font-semibold mb-4 block">Mari Berbincang</span>
            <h2 className="text-4xl md:text-6xl text-[#221D18] mb-6" style={serifStyle}>Ceritakan <br/><span className="italic font-light">Impian Anda.</span></h2>
            <p className="text-[#221D18]/60 mb-12 text-sm leading-relaxed font-light">Kopi, teh, atau obrolan hangat. Hubungi kami untuk merencanakan langkah pertama menuju hari paling berharga Anda.</p>
            
            <form onSubmit={(e) => { e.preventDefault(); window.open(handleWaLink('Halo, saya ingin konsultasi.')); }} className="space-y-8">
              <input type="text" className="w-full border-b border-[#EAE5DE] py-3 focus:outline-none focus:border-[#9C7449] bg-transparent text-sm font-light" placeholder="Nama Lengkap Pasangan" required />
              <button type="submit" className="bg-[#221D18] text-white px-10 py-4 rounded-full text-[11px] uppercase tracking-[0.2em] font-medium hover:bg-[#9C7449] transition-colors duration-300 mt-4">
                Kirim Pesan via WhatsApp
              </button>
            </form>
          </div>

          <div className="lg:w-1/2">
            <div className="aspect-[3/4] rounded-t-full w-full max-w-md mx-auto overflow-hidden relative border-[10px] border-[#FAF8F5] shadow-[0_10px_40px_-10px_rgba(34,29,24,0.15)]">
              <img src={t('contact-img', 'https://images.unsplash.com/photo-1522673607200-164d1b6ce486?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80')} alt="Contact" className="absolute inset-0 w-full h-full object-cover" />
              <div className="absolute inset-0 bg-[#221D18]/20"></div>
              <div className="absolute bottom-10 left-0 w-full text-center px-8 text-white space-y-4">
                <p className="flex items-center justify-center gap-3 text-sm font-light"><Phone className="w-4 h-4"/> {t('contact-phone', '+62 851-9428-3636')}</p>
                <p className="flex items-center justify-center gap-3 text-sm font-light"><Mail className="w-4 h-4"/> {t('contact-email', 'info@satuceritaorganizer.com')}</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-[#221D18] text-white/60 py-16 px-6 md:px-12 text-xs font-light text-center">
        <div className="max-w-7xl mx-auto flex flex-col items-center gap-8">
          <div className="text-3xl text-white italic" style={serifStyle}>Satu Cerita.</div>
          <div className="flex gap-8 uppercase tracking-[0.2em] text-[10px]">
            <a href="https://www.instagram.com/satucerita.wo/" target="_blank" className="hover:text-[#9C7449] transition-colors">Instagram</a>
            <a href={handleWaLink('Halo, mau konsultasi donk')} target="_blank" className="hover:text-[#9C7449] transition-colors">WhatsApp</a>
          </div>
          <div className="mt-8 border-t border-white/10 pt-8 w-full max-w-sm mx-auto flex flex-col items-center gap-4">
            <span>&copy; 2025 Satu Cerita Wedding Organizer.</span>
            <button onClick={() => setView('admin')} className="flex items-center gap-1 text-white/40 hover:text-[#9C7449] transition-colors mt-4">
              <Lock className="w-3 h-3" /> Login Admin
            </button>
          </div>
        </div>
      </footer>

      {/* Floating WA (from original HTML) */}
      <a href={handleWaLink('Halo, mau konsultasi donk')} target="_blank" className="fixed bottom-8 right-8 bg-[#25D366] text-white p-4 rounded-full shadow-[0_10px_30px_rgba(37,211,102,0.3)] hover:scale-110 transition-all duration-300 z-50 flex items-center justify-center">
        <MessageCircle className="w-6 h-6" />
      </a>

      {/* CSS Tambahan untuk animasi */}
      <style>{`
        .animate-fade-in { animation: fadeIn 0.5s ease-in-out; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
      `}</style>

    </div>
  );
};

export default App;