const { useState, useEffect } = React;

const Icon = ({ className = '', children, ...props }) => (
  <svg
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
    aria-hidden="true"
    {...props}
  >
    {children}
  </svg>
);

const MapPin = (props) => (
  <Icon {...props}>
    <path d="M20 10c0 5-8 12-8 12S4 15 4 10a8 8 0 1 1 16 0Z" />
    <circle cx="12" cy="10" r="3" />
  </Icon>
);

const Calendar = (props) => (
  <Icon {...props}>
    <path d="M8 2v4" />
    <path d="M16 2v4" />
    <rect width="18" height="18" x="3" y="4" rx="2" />
    <path d="M3 10h18" />
  </Icon>
);

const Clock = (props) => (
  <Icon {...props}>
    <circle cx="12" cy="12" r="10" />
    <path d="M12 6v6l4 2" />
  </Icon>
);

const ChevronDown = (props) => (
  <Icon {...props}>
    <path d="m6 9 6 6 6-6" />
  </Icon>
);

const CheckCircle2 = (props) => (
  <Icon {...props}>
    <circle cx="12" cy="12" r="10" />
    <path d="m9 12 2 2 4-5" />
  </Icon>
);

const X = (props) => (
  <Icon {...props}>
    <path d="M18 6 6 18" />
    <path d="m6 6 12 12" />
  </Icon>
);

const Globe = (props) => (
  <Icon {...props}>
    <circle cx="12" cy="12" r="10" />
    <path d="M2 12h20" />
    <path d="M12 2a15.3 15.3 0 0 1 0 20" />
    <path d="M12 2a15.3 15.3 0 0 0 0 20" />
  </Icon>
);

const FloralCluster = ({ className = '', mirrored = false, idSuffix = 'main' }) => (
  <div className={`floral-cluster ${className}`}>
    <svg viewBox="0 0 340 360" className={mirrored ? 'scale-x-[-1]' : ''} aria-hidden="true">
      <defs>
        <radialGradient id={`roseFill-${idSuffix}`} cx="45%" cy="36%" r="66%">
          <stop offset="0%" stopColor="#FAF8F5" />
          <stop offset="47%" stopColor="#DCAE96" stopOpacity="0.72" />
          <stop offset="100%" stopColor="#691426" stopOpacity="0.64" />
        </radialGradient>
        <radialGradient id={`creamPetal-${idSuffix}`} cx="50%" cy="45%" r="72%">
          <stop offset="0%" stopColor="#FFFFFF" />
          <stop offset="58%" stopColor="#FAF8F5" />
          <stop offset="100%" stopColor="#bf953f" stopOpacity="0.45" />
        </radialGradient>
        <linearGradient id={`leafFill-${idSuffix}`} x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#FAF8F5" />
          <stop offset="52%" stopColor="#DCAE96" stopOpacity="0.55" />
          <stop offset="100%" stopColor="#691426" stopOpacity="0.22" />
        </linearGradient>
      </defs>

      <g className="floral-shadow">
        <path d="M181 20c56 18 77 71 50 114-32 51-103 47-130 3-24-40 15-94 80-117Z" fill={`url(#roseFill-${idSuffix})`} />
        <path d="M154 54c29-23 75-16 88 15 13 33-15 74-57 78-45 4-74-26-65-62 5-19 18-23 34-31Z" fill="#FAF8F5" opacity="0.52" />
        <path d="M181 64c30-5 52 17 47 45-5 27-31 44-59 37-27-7-44-28-36-49 7-18 22-28 48-33Z" fill="none" stroke="#691426" strokeOpacity="0.25" strokeWidth="5" />
        <path d="M175 80c22-14 46-1 44 20-2 23-26 33-46 21-19-11-19-30 2-41Z" fill="none" stroke="#bf953f" strokeOpacity="0.55" strokeWidth="4" />
        <path d="M178 96c12-7 25-1 24 10-1 12-14 18-25 11-10-6-10-15 1-21Z" fill="#691426" opacity="0.34" />
      </g>

      <g className="floral-shadow">
        <path d="M252 155c45 1 76 31 70 65-6 39-56 60-95 39-38-21-40-75 25-104Z" fill={`url(#creamPetal-${idSuffix})`} />
        <path d="M272 175c29 2 47 23 42 43-5 22-35 32-58 18-22-13-25-48 16-61Z" fill="#FAF8F5" opacity="0.7" />
        <path d="M265 199c16-13 42-6 43 13 1 20-22 29-40 18-15-10-17-21-3-31Z" fill="none" stroke="#bf953f" strokeOpacity="0.42" strokeWidth="4" />
      </g>

      <g className="floral-shadow">
        <path d="M92 222c52 12 83 52 68 91-16 43-78 55-119 22-38-31-22-89 51-113Z" fill={`url(#creamPetal-${idSuffix})`} />
        <path d="M86 255c25-22 67-13 75 16 8 31-24 59-61 55-37-4-56-41-14-71Z" fill="#FAF8F5" opacity="0.58" />
        <path d="M93 277c22-16 51-4 51 17 0 22-26 34-47 20-17-11-19-24-4-37Z" fill="none" stroke="#691426" strokeOpacity="0.18" strokeWidth="5" />
      </g>

      <g fill={`url(#leafFill-${idSuffix})`} stroke="#bf953f" strokeOpacity="0.38" strokeWidth="2">
        <path d="M57 121C16 105 1 68 18 41c42 19 55 54 39 80Z" />
        <path d="M78 161C30 164 3 138 8 106c48-2 78 21 70 55Z" />
        <path d="M231 296c37 11 57 45 45 72-40-11-60-41-45-72Z" />
        <path d="M191 282c31 28 34 65 10 85-33-27-40-60-10-85Z" />
        <path d="M261 97c42-13 73 3 81 33-42 15-73 3-81-33Z" />
      </g>
    </svg>
  </div>
);

const App = () => {
  const [view, setView] = useState('envelope'); // 'envelope', 'invitation'
  const [showRsvp, setShowRsvp] = useState(false);
  const [isLoaded, setIsLoaded] = useState(false);
  const [rsvpStatus, setRsvpStatus] = useState('idle'); // 'idle', 'submitting', 'success', 'error'
  const [rsvpError, setRsvpError] = useState('');
  const [lang, setLang] = useState('ar'); // 'ar' or 'en'

  useEffect(() => {
    setIsLoaded(true);
  }, []);

  const handleOpenInvitation = () => {
    setView('invitation');
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const handleRsvpSubmit = async (e) => {
    e.preventDefault();
    setRsvpError('');
    setRsvpStatus('submitting');
    const formData = new FormData(e.currentTarget);
    const payload = {
      name: String(formData.get('name') || '').trim(),
      guests: String(formData.get('guests') || '').trim(),
      message: String(formData.get('message') || '').trim(),
      lang,
    };

    try {
      const basePath = window.location.pathname.startsWith('/weddingtemp') ? '/weddingtemp' : '';
      const response = await fetch(`${basePath}/api/rsvp`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      const data = await response.json().catch(() => ({}));
      if (!response.ok) {
        throw new Error(data.error || t.errorMsg[lang]);
      }
      setRsvpStatus('success');
      setTimeout(() => {
        setShowRsvp(false);
        setRsvpStatus('idle');
        setRsvpError('');
      }, 3000);
    } catch (error) {
      setRsvpError(error instanceof Error ? error.message : t.errorMsg[lang]);
      setRsvpStatus('error');
    }
  };

  const mapUrl = 'https://share.google/mDAhjodbRnOjCZh7E';
  const calendarUrl = `https://calendar.google.com/calendar/render?action=TEMPLATE&text=${encodeURIComponent('Wedding Celebration - Kareem & Hala, Ahmed & Tuqa')}&dates=20260721T190000/20260721T230000&ctz=Africa%2FCairo&details=${encodeURIComponent('Wedding celebration at Nirvana Hall. God willing.')}&location=${encodeURIComponent(`Nirvana Hall ${mapUrl}`)}`;

  const handleAddToCalendar = () => {
    window.open(calendarUrl, '_blank', 'noopener,noreferrer');
  };

  // Translation Dictionary
  const t = {
    envelopeTitle1: { ar: 'عائلة الشخيبي', en: 'The Shokheiby Family' },
    and: { ar: 'و', en: '&' },
    envelopeTitle2: { ar: 'عائلة رضوان وعائلة جسار', en: 'Radwan Family & Jassar Family' },
    openInv: { ar: 'فتح الدعوة', en: 'Open Invitation' },
    invTitle: { ar: 'دعوة حضور زفاف', en: 'Wedding Invitation' },
    invSub1: { ar: 'يسعدنا ويشرفنا دعوتكم', en: 'We joyfully invite you to share' },
    invSub2: { ar: 'لحضور حفل زفاف أبنائنا', en: 'in our happiness at the wedding of our children' },
    hostsTitle: { ar: 'يتشرف كل من', en: 'Hosted By' },
    host1: { ar: 'الحاج محمد الشخيبي', en: 'El Hajj Mohamed El Shokheiby' },
    host2: { ar: 'أ.د صبحي الشخيبي', en: 'Prof. Dr. Sobhy El Shokheiby' },
    host3: { ar: 'أ.د علي رضوان', en: 'Prof. Dr. Ali Radwan' },
    host4: { ar: 'د. أسامة جسار', en: 'Dr. Osama Jassar' },
    groomTitle1: { ar: 'المهندس', en: 'Eng.' },
    groom1: { ar: 'كريم', en: 'Kareem' },
    groomLastName1: { ar: 'صبحي الشخيبي', en: 'Sobhy El Shokheiby' },
    brideTitle1: { ar: 'الدكتورة', en: 'Dr.' },
    bride1: { ar: 'هالة', en: 'Hala' },
    brideLastName1: { ar: 'علي رضوان', en: 'Ali Radwan' },
    groomTitle2: { ar: 'الدكتور', en: 'Dr.' },
    groom2: { ar: 'أحمد', en: 'Ahmed' },
    groomLastName2: { ar: 'صبحي الشخيبي', en: 'Sobhy El Shokheiby' },
    brideTitle2: { ar: 'الدكتورة', en: 'Dr.' },
    bride2: { ar: 'تُقى', en: 'Tuqa' },
    brideLastName2: { ar: 'أسامة جسار', en: 'Osama Jassar' },
    on: { ar: 'على', en: '&' },
    venue: { ar: 'قاعة نيرفانا', en: 'Nirvana Hall' },
    date: { ar: 'يوم الثلاثاء الموافق ٢١ / ٧', en: 'Tuesday, July 21st' },
    time: { ar: 'الساعة ٧ مساءً', en: '7:00 PM' },
    godWilling: { ar: 'إن شاء الله', en: 'God Willing' },
    rsvpBtn: { ar: 'تأكيد الحضور (RSVP)', en: 'RSVP Now' },
    mapBtn: { ar: 'فتح الموقع على الخريطة', en: 'Open Google Maps' },
    calendarBtn: { ar: 'إضافة للتقويم', en: 'Add to Calendar' },
    
    // RSVP Texts
    rsvpModalTitle: { ar: 'تأكيد الحضور', en: 'RSVP' },
    nameLabel: { ar: 'الاسم الكريم', en: 'Full Name' },
    namePlaceholder: { ar: 'أدخل اسمك بالكامل', en: 'Enter your full name' },
    guestsLabel: { ar: 'عدد الحضور', en: 'Number of Guests' },
    guest1: { ar: '١ (شخص واحد)', en: '1 (One Guest)' },
    guest2: { ar: '٢ (شخصين)', en: '2 (Two Guests)' },
    guest3: { ar: '٣ (ثلاثة أشخاص)', en: '3 (Three Guests)' },
    guest4: { ar: '٤ (أربعة أشخاص)', en: '4 (Four Guests)' },
    guest5: { ar: '٥ (خمسة أشخاص)', en: '5 (Five Guests)' },
    guest6: { ar: '٦ (ستة أشخاص)', en: '6 (Six Guests)' },
    guest7: { ar: '٧ (سبعة أشخاص)', en: '7 (Seven Guests)' },
    guest8: { ar: '٨ (ثمانية أشخاص)', en: '8 (Eight Guests)' },
    guest9: { ar: '٩ (تسعة أشخاص)', en: '9 (Nine Guests)' },
    guest10: { ar: '١٠ (عشرة أشخاص)', en: '10 (Ten Guests)' },
    msgLabel: { ar: 'رسالة للعروسين (اختياري)', en: 'Message for the couple (Optional)' },
    msgPlaceholder: { ar: 'اكتب تهنئتك هنا...', en: 'Write your wishes here...' },
    sendRsvp: { ar: 'إرسال التأكيد', en: 'Send RSVP' },
    sending: { ar: 'جاري الإرسال...', en: 'Sending...' },
    thankYou: { ar: 'دامت أفراحكم', en: 'With Joy' },
    successMsg: { ar: 'دامت دياركم عامرة بالأفراح، ونورتونا بحضوركم.', en: 'May your homes always be filled with joy. We are honored to celebrate with you.' },
    errorMsg: { ar: 'تعذر إرسال التأكيد. حاول مرة أخرى.', en: 'Could not send your RSVP. Please try again.' },
  };

  const isAr = lang === 'ar';
  
  // Font utility classes
  const fontTitle = isAr ? 'font-ruqaa' : 'font-playfair italic';
  const fontBody = isAr ? 'font-cairo' : 'font-montserrat';
  const fontName = isAr ? 'font-ruqaa' : 'font-playfair';

  return (
    <div dir={isAr ? 'rtl' : 'ltr'} className={`min-h-screen bg-stone-100 ${fontBody} text-[#4a3f35] selection:bg-[#800020] selection:text-white relative overflow-hidden transition-all duration-500`}>
      
      {/* Custom Styles */}
      <style dangerouslySetInnerHTML={{__html: `
        @import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400;1,700&family=Aref+Ruqaa:wght@400;700&family=Cairo:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Montserrat:wght@300;400;500;600&display=swap');

        .font-cairo { font-family: 'Cairo', sans-serif; }
        .font-amiri { font-family: 'Amiri', serif; }
        .font-ruqaa { font-family: 'Aref Ruqaa', serif; }
        .font-playfair { font-family: 'Playfair Display', serif; }
        .font-montserrat { font-family: 'Montserrat', sans-serif; }

        .paper-texture {
          background-color: #FAF8F5;
          background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
        }

        .wood-texture {
          background-color: #fcfbf9;
          background-image: repeating-linear-gradient(to bottom, transparent, transparent 40px, rgba(0,0,0,0.02) 40px, rgba(0,0,0,0.02) 42px);
        }

        .envelope-texture {
          background-color: #691426;
          background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
        }

        .invitation-stage {
          background:
            radial-gradient(circle at 18% 16%, rgba(220, 174, 150, 0.24), transparent 28%),
            radial-gradient(circle at 85% 82%, rgba(105, 20, 38, 0.12), transparent 32%),
            linear-gradient(135deg, #FAF8F5 0%, #f3eee6 52%, #eee5dc 100%);
        }

        .glass-card {
          box-shadow:
            0 28px 80px rgba(74, 63, 53, 0.22),
            0 8px 24px rgba(105, 20, 38, 0.10),
            inset 0 0 0 1px rgba(191, 149, 63, 0.18);
        }

        .inner-vellum {
          background:
            linear-gradient(180deg, rgba(255,255,255,0.76), rgba(250,248,245,0.64)),
            url("data:image/svg+xml,%3Csvg width='90' height='90' viewBox='0 0 90 90' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23paper)' opacity='0.026'/%3E%3C/svg%3E");
        }

        .floral-cluster {
          position: absolute;
          width: clamp(190px, 34vw, 340px);
          pointer-events: none;
          opacity: 0.88;
          filter: drop-shadow(0 22px 18px rgba(74, 63, 53, 0.16));
        }

        .floral-cluster svg {
          width: 100%;
          height: auto;
          display: block;
        }

        .floral-shadow {
          filter: drop-shadow(0 5px 5px rgba(105, 20, 38, 0.16));
        }

        .floral-corner-top {
          top: -72px;
          right: -72px;
          transform: rotate(-8deg);
        }

        .floral-corner-bottom {
          bottom: -88px;
          left: -78px;
          transform: rotate(174deg);
        }

        .floral-envelope-top {
          top: -95px;
          right: -78px;
          opacity: 0.35;
          transform: rotate(-12deg);
        }

        .floral-envelope-bottom {
          bottom: -110px;
          left: -86px;
          opacity: 0.28;
          transform: rotate(166deg);
        }

        .soft-petal {
          position: absolute;
          border-radius: 999px 999px 999px 0;
          background: linear-gradient(135deg, rgba(250,248,245,0.84), rgba(220,174,150,0.42));
          border: 1px solid rgba(191,149,63,0.18);
          box-shadow: inset -8px -10px 20px rgba(105,20,38,0.05), 0 12px 28px rgba(74,63,53,0.08);
          pointer-events: none;
        }

        .detail-tile {
          background: rgba(250,248,245,0.58);
          border: 1px solid rgba(191,149,63,0.24);
          box-shadow: inset 0 1px 0 rgba(255,255,255,0.68), 0 10px 24px rgba(105,20,38,0.06);
        }

        .animate-fade-in { animation: fadeIn 1s ease-out forwards; }
        .animate-slide-up { animation: slideUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        .animate-scale-in { animation: scaleIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        
        .delay-100 { animation-delay: 0.1s; }
        .delay-200 { animation-delay: 0.2s; }
        .delay-300 { animation-delay: 0.3s; }
        .delay-400 { animation-delay: 0.4s; }
        .delay-500 { animation-delay: 0.5s; }
        .delay-600 { animation-delay: 0.6s; }

        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

        /* Custom scrollbar */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #FAF8F5; }
        ::-webkit-scrollbar-thumb { background: #DCAE96; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #691426; }
      `}} />

      {/* Language Switcher */}
      <button 
        onClick={() => setLang(isAr ? 'en' : 'ar')}
        className="fixed top-6 z-[60] bg-white/70 backdrop-blur-md px-4 py-2 rounded-full border border-[#bf953f]/50 text-[#691426] font-bold text-sm shadow-lg hover:bg-white transition-all flex items-center gap-2"
        style={{ [isAr ? 'left' : 'right']: '1.5rem' }}
      >
        <Globe className="w-4 h-4" />
        <span className={isAr ? 'font-montserrat mt-1' : 'font-cairo'}>{isAr ? 'EN' : 'عربي'}</span>
      </button>

      {/* VIEW: ENVELOPE (Digital Entry) */}
      <div className={`fixed inset-0 z-50 flex items-center justify-center transition-transform duration-1000 ease-in-out ${view === 'envelope' ? 'translate-y-0' : '-translate-y-full'}`}>
        <div className="absolute inset-0 envelope-texture"></div>
        <div className="absolute inset-0 bg-black/20"></div> {/* Subtle depth vignette */}
        <FloralCluster className="floral-envelope-top" idSuffix="envelope-top" />
        <FloralCluster className="floral-envelope-bottom" mirrored idSuffix="envelope-bottom" />
        
        <div className={`relative z-10 text-center flex flex-col items-center p-8 opacity-0 ${isLoaded ? 'animate-scale-in' : ''}`}>
          {/* Decorative Top */}
          <svg width="60" height="60" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="mb-8 text-[#fcf6ba] opacity-80">
             <path d="M15.9 5.2C12 5.7 9 9 9 13c0 2.6 1.3 4.9 3.3 6.3C8.5 18.8 5.6 15.6 5.6 11.7c0-4.2 3.4-7.6 7.6-7.6 1 0 1.9.2 2.7.5Z" fill="currentColor"/>
             <path d="M17.1 9.1l.8 1.7 1.9.3-1.4 1.3.3 1.9-1.6-.9-1.7.9.3-1.9-1.4-1.3 1.9-.3.9-1.7Z" fill="currentColor"/>
             <path d="M12 2.8c2.1 0 4 .7 5.5 2M7.1 19.5A9.2 9.2 0 0 0 12 21.2" stroke="currentColor" strokeWidth="0.8" strokeLinecap="round" opacity="0.65"/>
          </svg>

          <h2 className={`${fontTitle} ${isAr ? 'text-4xl md:text-6xl' : 'text-3xl md:text-5xl'} text-[#fcf6ba] mb-6 drop-shadow-lg`}>
            {t.envelopeTitle1[lang]}
          </h2>
          <div className="flex items-center gap-4 mb-6">
            <span className="h-px w-12 bg-gradient-to-r from-transparent to-[#bf953f]"></span>
            <span className={`${fontName} text-[#bf953f] text-xl`}>{t.and[lang]}</span>
            <span className="h-px w-12 bg-gradient-to-l from-transparent to-[#bf953f]"></span>
          </div>
          <h2 className={`${fontTitle} ${isAr ? 'text-4xl md:text-6xl' : 'text-3xl md:text-5xl'} text-[#fcf6ba] mb-16 drop-shadow-lg`}>
            {t.envelopeTitle2[lang]}
          </h2>

          <button 
            onClick={handleOpenInvitation}
            className="group relative px-10 py-4 bg-[#FAF8F5] text-[#691426] font-bold text-lg rounded-full overflow-hidden shadow-[0_0_40px_rgba(252,246,186,0.15)] transition-all hover:shadow-[0_0_60px_rgba(252,246,186,0.3)] hover:scale-105"
          >
            <span className="relative z-10 flex items-center gap-2">
              {t.openInv[lang]}
              <ChevronDown className="w-5 h-5 group-hover:translate-y-1 transition-transform" />
            </span>
            <div className="absolute inset-0 bg-gradient-to-r from-[#F5F5DC] to-[#FAF8F5] opacity-0 group-hover:opacity-100 transition-opacity"></div>
          </button>
        </div>
      </div>

      {/* VIEW: MAIN INVITATION */}
      <div className={`invitation-stage min-h-screen py-8 md:py-16 px-2 md:px-4 transition-opacity duration-1000 delay-300 ${view === 'invitation' ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}>
        
        {/* Main Card Container */}
        <div className="max-w-3xl mx-auto bg-white/80 wood-texture glass-card relative overflow-hidden m-2 p-3 md:p-5 rounded-[28px] border border-[#bf953f]/30">
          
          {/* Embossed floral ornaments */}
          <FloralCluster className="floral-corner-top" idSuffix="card-top" />
          <FloralCluster className="floral-corner-bottom" mirrored idSuffix="card-bottom" />
          <span className="soft-petal hidden md:block w-20 h-32 top-24 left-5 -rotate-[28deg] opacity-80"></span>
          <span className="soft-petal hidden md:block w-16 h-28 bottom-28 right-7 rotate-[38deg] opacity-70"></span>

          {/* Inner Content Wrapper */}
          <div className="inner-vellum border border-[#bf953f]/30 p-6 md:p-12 flex flex-col items-center text-center relative z-10 rounded-[22px] backdrop-blur-sm">
            
            {/* 1. Top Detail (Chandelier inspired) */}
            <div className="mb-8 opacity-0 animate-slide-up">
               <svg width="70" height="70" viewBox="0 0 100 100" fill="none" stroke="#bf953f" strokeWidth="1.5">
                 <path d="M50 0 L50 20 M20 45 Q20 25 50 25 M80 45 Q80 25 50 25 M35 55 Q35 35 50 35 M65 55 Q65 35 50 35" />
                 <circle cx="50" cy="25" r="3" fill="#bf953f" />
                 <path d="M47 15 H53 M47 20 H53" />
                 <rect x="18" y="30" width="4" height="15" fill="#FAF8F5" stroke="#bf953f"/>
                 <rect x="78" y="30" width="4" height="15" fill="#FAF8F5" stroke="#bf953f"/>
                 <rect x="33" y="40" width="4" height="15" fill="#FAF8F5" stroke="#bf953f"/>
                 <rect x="63" y="40" width="4" height="15" fill="#FAF8F5" stroke="#bf953f"/>
                 <rect x="47" y="5" width="6" height="20" fill="#FAF8F5" stroke="#bf953f"/>
                 <path d="M20 25 Q20 20 22 22 Q20 25 20 25" fill="#691426" stroke="none"/>
                 <path d="M80 25 Q80 20 82 22 Q80 25 80 25" fill="#691426" stroke="none"/>
                 <path d="M35 35 Q35 30 37 32 Q35 35 35 35" fill="#691426" stroke="none"/>
                 <path d="M65 35 Q65 30 67 32 Q65 35 65 35" fill="#691426" stroke="none"/>
                 <path d="M50 0 Q50 -5 52 -3 Q50 0 50 0" fill="#691426" stroke="none"/>
               </svg>
            </div>

            {/* 2. Main Title */}
            <div className="mb-4 opacity-0 animate-slide-up delay-100 relative">
              <h1 className={`${fontTitle} ${isAr ? 'text-5xl md:text-7xl' : 'text-4xl md:text-5xl mb-4'} text-[#691426] tracking-wide drop-shadow-sm`}>
                {t.invTitle[lang]}
              </h1>
              <div className="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[#691426]">
                <svg width="30" height="20" viewBox="0 0 24 24" fill="currentColor">
                   <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                </svg>
              </div>
            </div>

            {/* 3. Short Invitation Sentence */}
            <div className="mt-8 mb-12 opacity-0 animate-slide-up delay-200">
              <p className={`font-medium ${isAr ? 'text-lg md:text-xl' : 'text-sm md:text-base tracking-wider'} text-[#691426] mb-1`}>
                {t.invSub1[lang]}
              </p>
              <p className={`font-medium ${isAr ? 'text-lg md:text-xl' : 'text-sm md:text-base tracking-wider'} text-[#691426]`}>
                {t.invSub2[lang]}
              </p>
            </div>

            {/* 4. Hosts Section */}
            <div className="w-full mb-16 opacity-0 animate-slide-up delay-300">
               <div className="flex items-center justify-center gap-4 mb-6">
                  <div className="h-[1px] w-12 bg-gradient-to-r from-transparent to-[#bf953f]"></div>
                  <p className={`font-light text-[#bf953f] text-sm md:text-base uppercase tracking-widest ${isAr ? '' : 'tracking-[0.2em]'}`}>
                    {t.hostsTitle[lang]}
                  </p>
                  <div className="h-[1px] w-12 bg-gradient-to-l from-transparent to-[#bf953f]"></div>
               </div>
               
               <div className={`flex justify-around text-center ${isAr ? 'text-lg md:text-xl font-bold' : 'text-sm md:text-md'} text-[#691426] px-2 md:px-8`}>
                 <div className="flex flex-col space-y-4">
                    <span>{t.host1[lang]}</span>
                    <span>{t.host2[lang]}</span>
                 </div>
                 <div className="w-px bg-[#bf953f]/30"></div>
                 <div className="flex flex-col space-y-4">
                    <span>{t.host3[lang]}</span>
                    <span>{t.host4[lang]}</span>
                 </div>
               </div>
            </div>

            {/* 5. Couples Section */}
            <div className="w-full flex flex-col space-y-12 mb-16 opacity-0 animate-slide-up delay-400">
              
              {/* Couple 1 */}
              <div className="flex items-center justify-between w-full">
                <div className={`flex-1 text-center ${isAr ? 'md:text-left' : 'md:text-right'}`}>
                   <span className="block text-xs md:text-sm text-[#bf953f] mb-6 md:mb-8 uppercase tracking-widest">{t.groomTitle1[lang]}</span>
                   <span className={`block ${isAr ? 'text-4xl md:text-6xl' : 'text-3xl md:text-5xl'} ${fontName} text-[#691426] mb-2 drop-shadow-sm leading-normal`}>{t.groom1[lang]}</span>
                   <span className="block mt-4 md:mt-5 text-xs md:text-sm text-[#5a4d41]">{t.groomLastName1[lang]}</span>
                </div>
                
                <div className={`relative w-24 h-24 md:w-32 md:h-32 flex items-center justify-center shrink-0 mx-3 md:mx-8 ${isAr ? 'mr-1 md:mr-2' : 'ml-1 md:ml-2'}`}>
                   <svg viewBox="0 0 100 100" className="absolute inset-0 w-full h-full text-[#bf953f]" fill="none" stroke="currentColor" strokeWidth="1.5">
                     <path d="M50,80 C50,80 15,55 15,35 C15,20 25,10 37.5,10 C45,10 50,20 50,20 C50,20 55,10 62.5,10 C75,10 85,20 85,35 C85,55 50,80 50,80 Z" />
                   </svg>
                   <svg viewBox="0 0 100 50" className="absolute -bottom-6 w-16 md:w-20 text-[#691426]" fill="currentColor">
                     <path d="M50,30 Q60,10 80,20 Q60,40 50,30 Z" fill="#bf953f" opacity="0.8"/>
                     <path d="M50,30 Q40,10 20,20 Q40,40 50,30 Z" fill="#bf953f" opacity="0.8"/>
                     <circle cx="50" cy="30" r="12" />
                     <circle cx="35" cy="35" r="9" fill="#FAF8F5" stroke="#bf953f"/>
                     <circle cx="65" cy="35" r="9" fill="#FAF8F5" stroke="#bf953f"/>
                   </svg>
                   <span className={`${fontName} ${isAr ? 'text-2xl md:text-3xl italic' : 'text-3xl'} text-[#691426] z-10 relative -mt-4`}>{t.on[lang]}</span>
                </div>

                <div className={`flex-1 text-center ${isAr ? 'md:text-right' : 'md:text-left'}`}>
                   <span className="block text-xs md:text-sm text-[#bf953f] mb-6 md:mb-8 uppercase tracking-widest">{t.brideTitle1[lang]}</span>
                   <span className={`block ${isAr ? 'text-4xl md:text-6xl' : 'text-3xl md:text-5xl'} ${fontName} text-[#691426] mb-2 drop-shadow-sm leading-normal`}>{t.bride1[lang]}</span>
                   <span className="block mt-4 md:mt-5 text-xs md:text-sm text-[#5a4d41]">{t.brideLastName1[lang]}</span>
                </div>
              </div>

              {/* Divider between couples */}
              <div className="flex justify-center opacity-70">
                <svg width="150" height="20" viewBox="0 0 150 20" stroke="#bf953f" fill="none">
                   <path d="M10,10 L70,10 M80,10 L140,10" strokeWidth="1"/>
                   <circle cx="75" cy="10" r="3" fill="#bf953f"/>
                </svg>
              </div>

              {/* Couple 2 */}
              <div className="flex items-center justify-between w-full">
                <div className={`flex-1 text-center ${isAr ? 'md:text-left' : 'md:text-right'}`}>
                   <span className="block text-xs md:text-sm text-[#bf953f] mb-6 md:mb-8 uppercase tracking-widest">{t.groomTitle2[lang]}</span>
                   <span className={`block ${isAr ? 'text-4xl md:text-6xl' : 'text-3xl md:text-5xl'} ${fontName} text-[#691426] mb-2 drop-shadow-sm leading-normal`}>{t.groom2[lang]}</span>
                   <span className="block mt-4 md:mt-5 text-xs md:text-sm text-[#5a4d41]">{t.groomLastName2[lang]}</span>
                </div>
                
                <div className={`relative w-24 h-24 md:w-32 md:h-32 flex items-center justify-center shrink-0 mx-3 md:mx-8 ${isAr ? 'mr-1 md:mr-2' : 'ml-1 md:ml-2'}`}>
                   <svg viewBox="0 0 100 100" className="absolute inset-0 w-full h-full text-[#bf953f]" fill="none" stroke="currentColor" strokeWidth="1.5">
                     <path d="M50,80 C50,80 15,55 15,35 C15,20 25,10 37.5,10 C45,10 50,20 50,20 C50,20 55,10 62.5,10 C75,10 85,20 85,35 C85,55 50,80 50,80 Z" />
                   </svg>
                   <svg viewBox="0 0 100 50" className="absolute -bottom-6 w-16 md:w-20 text-[#691426]" fill="currentColor">
                     <path d="M50,30 Q60,10 80,20 Q60,40 50,30 Z" fill="#bf953f" opacity="0.8"/>
                     <path d="M50,30 Q40,10 20,20 Q40,40 50,30 Z" fill="#bf953f" opacity="0.8"/>
                     <circle cx="50" cy="30" r="12" />
                     <circle cx="35" cy="35" r="9" fill="#FAF8F5" stroke="#bf953f"/>
                     <circle cx="65" cy="35" r="9" fill="#FAF8F5" stroke="#bf953f"/>
                   </svg>
                   <span className={`${fontName} ${isAr ? 'text-2xl md:text-3xl italic' : 'text-3xl'} text-[#691426] z-10 relative -mt-4`}>{t.on[lang]}</span>
                </div>

                <div className={`flex-1 text-center ${isAr ? 'md:text-right' : 'md:text-left'}`}>
                   <span className="block text-xs md:text-sm text-[#bf953f] mb-6 md:mb-8 uppercase tracking-widest">{t.brideTitle2[lang]}</span>
                   <span className={`block ${isAr ? 'text-4xl md:text-6xl' : 'text-3xl md:text-5xl'} ${fontName} text-[#691426] mb-2 drop-shadow-sm leading-normal`}>{t.bride2[lang]}</span>
                   <span className="block mt-4 md:mt-5 text-xs md:text-sm text-[#5a4d41]">{t.brideLastName2[lang]}</span>
                </div>
              </div>
            </div>

            {/* 6. Event Details */}
            <div className="w-full max-w-2xl mx-auto border-t border-[#bf953f]/30 pt-10 opacity-0 animate-slide-up delay-500">
              <div className="flex flex-col space-y-6 text-[#691426]">
                
                <div className="detail-tile flex items-center justify-center gap-4 rounded-2xl px-5 py-4">
                  <div className="w-10 h-10 rounded-full border border-[#bf953f]/50 flex items-center justify-center bg-[#FAF8F5]/90 shrink-0">
                    <MapPin className="w-5 h-5 text-[#bf953f]" />
                  </div>
                  <div className="flex flex-col items-center gap-2">
                    <span className={`font-bold ${isAr ? 'text-xl md:text-2xl' : 'text-lg md:text-xl'}`}>
                      {t.venue[lang]}
                    </span>
                    <a
                      href={mapUrl}
                      target="_blank"
                      rel="noreferrer"
                      className="text-xs md:text-sm font-bold text-[#bf953f] underline underline-offset-4 hover:text-[#691426] transition-colors"
                    >
                      {t.mapBtn[lang]}
                    </a>
                  </div>
                </div>

                <div className={`grid grid-cols-1 md:grid-cols-2 gap-4 ${isAr ? 'text-lg md:text-xl' : 'text-sm md:text-md font-medium'}`}>
                  <div className="detail-tile flex items-center justify-center gap-3 rounded-2xl px-5 py-4">
                    <Calendar className="w-5 h-5 text-[#bf953f]" />
                    <span>{t.date[lang]}</span>
                  </div>
                  <div className="detail-tile flex items-center justify-center gap-3 rounded-2xl px-5 py-4">
                    <Clock className="w-5 h-5 text-[#bf953f]" />
                    <span>{t.time[lang]}</span>
                  </div>
                </div>

                <div className="mt-4 text-center">
                   <span className={`${isAr ? 'font-amiri text-xl' : 'font-playfair italic text-lg'} text-[#5a4d41]`}>{t.godWilling[lang]}</span>
                </div>
              </div>
            </div>

            {/* Decorative Bottom Edge */}
            <div className="mt-8 text-[#691426]">
               <svg width="120" height="20" viewBox="0 0 120 20" fill="currentColor">
                  <path d="M0,10 L45,10 M75,10 L120,10" stroke="#bf953f" strokeWidth="1"/>
                  <circle cx="60" cy="10" r="4" />
                  <circle cx="50" cy="10" r="2" fill="#bf953f"/>
                  <circle cx="70" cy="10" r="2" fill="#bf953f"/>
               </svg>
            </div>

            {/* Action Buttons */}
            <div className="mt-12 flex flex-col sm:flex-row gap-4 w-full justify-center opacity-0 animate-slide-up delay-600">
              <button 
                onClick={() => setShowRsvp(true)}
                className="px-8 py-3 bg-[#691426] text-[#FAF8F5] font-bold rounded-md shadow-lg shadow-[#691426]/20 hover:bg-[#800020] hover:-translate-y-1 transition-all duration-300 tracking-wide"
              >
                {t.rsvpBtn[lang]}
              </button>
              <button
                type="button"
                onClick={handleAddToCalendar}
                className="px-8 py-3 border border-[#bf953f] text-[#691426] font-bold rounded-md hover:bg-[#bf953f]/10 transition-all duration-300 tracking-wide"
              >
                {t.calendarBtn[lang]}
              </button>
            </div>

          </div>
        </div>
      </div>

      {/* RSVP Modal overlay */}
      {showRsvp && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
          <div className="absolute inset-0 bg-black/40 backdrop-blur-sm" onClick={() => setShowRsvp(false)}></div>
          
          <div className={`relative bg-[#FAF8F5] paper-texture w-full max-w-md p-8 rounded-lg shadow-2xl animate-scale-in ${fontBody}`}>
            <button 
              onClick={() => setShowRsvp(false)}
              className={`absolute top-4 ${isAr ? 'left-4' : 'right-4'} text-gray-400 hover:text-[#691426] transition-colors`}
            >
              <X className="w-6 h-6" />
            </button>

            {rsvpStatus === 'success' ? (
              <div className="flex flex-col items-center justify-center py-12 text-center animate-fade-in">
                <CheckCircle2 className="w-16 h-16 text-green-600 mb-4" />
                <h3 className={`text-2xl font-bold text-[#691426] mb-2 ${fontTitle}`}>{t.thankYou[lang]}</h3>
                <p className="text-gray-600 leading-relaxed">{t.successMsg[lang]}</p>
              </div>
            ) : (
              <form onSubmit={handleRsvpSubmit} className="flex flex-col gap-6 animate-fade-in">
                <h3 className={`text-3xl text-[#691426] text-center mb-2 ${fontTitle}`}>{t.rsvpModalTitle[lang]}</h3>
                
                <div className={isAr ? 'text-right' : 'text-left'}>
                  <label className="block text-sm font-semibold text-[#5a4d41] mb-2">{t.nameLabel[lang]}</label>
                  <input 
                    required
                    name="name"
                    type="text" 
                    className="w-full px-4 py-3 bg-white/50 border border-[#bf953f]/30 rounded-md focus:outline-none focus:border-[#691426] focus:ring-1 focus:ring-[#691426] transition-all"
                    placeholder={t.namePlaceholder[lang]}
                  />
                </div>

                <div className={isAr ? 'text-right' : 'text-left'}>
                  <label className="block text-sm font-semibold text-[#5a4d41] mb-2">{t.guestsLabel[lang]}</label>
                  <select name="guests" className={`w-full px-4 py-3 bg-white/50 border border-[#bf953f]/30 rounded-md focus:outline-none focus:border-[#691426] focus:ring-1 focus:ring-[#691426] transition-all ${isAr ? '' : 'text-left'}`} dir={isAr ? 'rtl' : 'ltr'}>
                    <option>{t.guest1[lang]}</option>
                    <option>{t.guest2[lang]}</option>
                    <option>{t.guest3[lang]}</option>
                    <option>{t.guest4[lang]}</option>
                    <option>{t.guest5[lang]}</option>
                    <option>{t.guest6[lang]}</option>
                    <option>{t.guest7[lang]}</option>
                    <option>{t.guest8[lang]}</option>
                    <option>{t.guest9[lang]}</option>
                    <option>{t.guest10[lang]}</option>
                  </select>
                </div>

                <div className={isAr ? 'text-right' : 'text-left'}>
                  <label className="block text-sm font-semibold text-[#5a4d41] mb-2">{t.msgLabel[lang]}</label>
                  <textarea 
                    name="message"
                    rows="3"
                    className="w-full px-4 py-3 bg-white/50 border border-[#bf953f]/30 rounded-md focus:outline-none focus:border-[#691426] focus:ring-1 focus:ring-[#691426] transition-all resize-none"
                    placeholder={t.msgPlaceholder[lang]}
                  ></textarea>
                </div>

                {rsvpStatus === 'error' && (
                  <p className="rounded-md border border-[#691426]/20 bg-[#691426]/10 px-4 py-3 text-sm text-[#691426]">
                    {rsvpError || t.errorMsg[lang]}
                  </p>
                )}

                <button 
                  type="submit" 
                  disabled={rsvpStatus === 'submitting'}
                  className="w-full py-3 bg-[#691426] text-[#FAF8F5] font-bold rounded-md hover:bg-[#800020] transition-colors disabled:opacity-70 flex items-center justify-center gap-2 tracking-wide"
                >
                  {rsvpStatus === 'submitting' ? t.sending[lang] : t.sendRsvp[lang]}
                </button>
              </form>
            )}
          </div>
        </div>
      )}

    </div>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<App />);