'use client';

import { useState, useEffect, useRef } from 'react';
import Link from 'next/link';
import {
  Camera, Users, Clock, Share2, Heart, Sparkles, UserCircle, QrCode, Shield,
  ChevronDown, Star, Play, ArrowRight, Lock, Zap, Image as ImageIcon, Wand2,
} from 'lucide-react';
import { motion } from 'framer-motion';
import { useLanguage } from '@/hooks/use-language';
import { useAuth } from '@/components/auth-provider';
import { LanguageSwitcher } from '@/components/language-switcher';
import { t } from '@/lib/i18n';

// ---------------------------------------------------------------------------
// Local Media Library - Luxury Event Photography
// ---------------------------------------------------------------------------
const HERO_IMAGES = [
  { src: '/media/main.png', alt: 'Premium wedding setup' },
  { src: '/media/hf_20260526_115838_c934bb45-0061-4eec-9e6c-3b62b20fb2ee.png', alt: 'Elegant table decor' },
  { src: '/media/hf_20260526_115839_f9cc83ed-4d9c-4645-a4b2-9de8faf2479b.png', alt: 'Luxury event setting' },
  { src: '/media/hf_20260526_115839_a443209a-f7c0-42a8-a681-0d0f0b17b418.png', alt: 'Beautiful celebration' },
  { src: '/media/fd7832bc-e2c2-4cca-967c-e8990d925c8a.png', alt: 'Wedding details' },
  { src: '/media/hf_20260526_114135_b4fde3c5-ec33-4eef-87b7-7e771c7bd004.png', alt: 'Aerial view' },
];

const VIDEOS = [
  { src: '/media/hf_20260526_115837_80c35ba1-2093-4146-bac8-4831aa3a4226.mp4', poster: '/media/hf_20260526_115839_a443209a-f7c0-42a8-a681-0d0f0b17b418.png' },
  { src: '/media/hf_20260526_121541_8feb33d7-39e9-48fc-b634-1bf4b1834355.mp4', poster: '/media/hf_20260526_115839_f9cc83ed-4d9c-4645-a4b2-9de8faf2479b.png' },
];

const USE_CASE_IMAGES: Record<string, string> = {
  wedding:  '/media/wedding.png',
  birthday: '/media/birthday.png',
  trip:     '/media/trip.png',
  party:    '/media/hf_20260526_115839_a443209a-f7c0-42a8-a681-0d0f0b17b418.png',
};

const TESTIMONIALS = [
  {
    name: 'سارة العتيبي',
    nameEn: 'Sara A.',
    role: 'عروس · الرياض',
    roleEn: 'Bride · Riyadh',
    avatar: '/media/hf_20260526_115839_f9cc83ed-4d9c-4645-a4b2-9de8faf2479b.png',
    quote: 'كل ضيف التقط يومي من زاوية مختلفة. لحظة الكشف كانت ساحرة — مثل فتح كبسوله زمنية معاً.',
    quoteEn: 'Every guest captured the day from a different angle. The reveal moment was magical — like opening a time capsule together.',
  },
  {
    name: 'محمد الدوسري',
    nameEn: 'Mohammed D.',
    role: 'منظم مناسبات · جدة',
    roleEn: 'Event Planner · Jeddah',
    avatar: '/media/fd7832bc-e2c2-4cca-967c-e8990d925c8a.png',
    quote: 'أفضل لقطات يختارها الذكاء الاصطناعي. عملائي يحصلون على فيديو 60 ثانية فور انتهاء المناسبة.',
    quoteEn: 'The AI curation picks the absolute best shots. My couples receive a 60-second highlight reel within minutes of the wedding ending.',
  },
  {
    name: 'لينا الكعبي',
    nameEn: 'Lina K.',
    role: 'صاحبة مناسبة · دبي',
    roleEn: 'Birthday host · Dubai',
    avatar: '/media/hf_20260526_115839_a443209a-f7c0-42a8-a681-0d0f0b17b418.png',
    quote: 'لا داعي لمطاردة 30 صديق للحصول على الصور. رمز QR واحد على الطاولة والألبوم يبني نفسه.',
    quoteEn: 'No more chasing 30 friends for photos. One QR code on the table and the album builds itself.',
  },
];

// ---------------------------------------------------------------------------
// Components
// ---------------------------------------------------------------------------

function AccordionItem({ question, answer }: { question: string; answer: string }) {
  const [open, setOpen] = useState(false);
  return (
    <div className="border-b border-zinc-800 last:border-0">
      <button
        onClick={() => setOpen(!open)}
        className="w-full flex items-center justify-between py-5 text-start hover:text-amber-200 transition-colors"
        aria-expanded={open}
      >
        <span className="font-medium text-sm sm:text-base pe-4 text-zinc-200">{question}</span>
        <ChevronDown className={`h-5 w-5 text-zinc-500 transition-transform shrink-0 ${open ? 'rotate-180 text-amber-300' : ''}`} />
      </button>
      {open && (
        <motion.div
          initial={{ opacity: 0, height: 0 }}
          animate={{ opacity: 1, height: 'auto' }}
          exit={{ opacity: 0, height: 0 }}
          className="pb-5 text-sm text-zinc-400 leading-relaxed"
        >
          {answer}
        </motion.div>
      )}
    </div>
  );
}

function StatCounter({ value, suffix = '', label }: { value: number; suffix?: string; label: string }) {
  const [n, setN] = useState(0);
  const ref = useRef<HTMLDivElement>(null);
  useEffect(() => {
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {
        const start = Date.now();
        const dur = 1600;
        const tick = () => {
          const p = Math.min(1, (Date.now() - start) / dur);
          setN(Math.floor(value * (1 - Math.pow(1 - p, 3))));
          if (p < 1) requestAnimationFrame(tick);
          else setN(value);
        };
        tick();
        obs.disconnect();
      }
    }, { threshold: 0.4 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, [value]);
  return (
    <div ref={ref} className="text-center">
      <div className="text-4xl sm:text-5xl font-bold tracking-tight bg-gradient-to-br from-white to-zinc-400 bg-clip-text text-transparent" suppressHydrationWarning>
        {n.toLocaleString()}{suffix}
      </div>
      <div className="text-xs sm:text-sm text-zinc-500 mt-1">{label}</div>
    </div>
  );
}

function PhotoMarquee({ photos }: { photos: { src: string; alt: string }[] }) {
  return (
    <div className="relative overflow-hidden py-6 px-4">
      {/* Professional frame with gradient borders */}
      <div className="absolute inset-0 bg-gradient-to-b from-zinc-900 via-zinc-800 to-zinc-900 rounded-2xl" />
      <div className="absolute inset-[1px] bg-zinc-950 rounded-2xl" />
      
      {/* Top and bottom gradient masks for smooth edges */}
      <div className="absolute top-0 inset-x-0 h-8 bg-gradient-to-b from-zinc-950 to-transparent z-10" />
      <div className="absolute bottom-0 inset-x-0 h-8 bg-gradient-to-t from-zinc-950 to-transparent z-10" />
      
      {/* Left and right gradient masks */}
      <div className="absolute left-0 inset-y-0 w-16 bg-gradient-to-r from-zinc-950 via-zinc-950/80 to-transparent z-10" />
      <div className="absolute right-0 inset-y-0 w-16 bg-gradient-to-l from-zinc-950 via-zinc-950/80 to-transparent z-10" />
      
      {/* Two identical tracks side by side - second appears immediately after first */}
      <div className="relative flex py-4">
        <div className="flex gap-4 shrink-0 animate-marquee-x pe-4">
          {photos.map((p, i) => (
            <div key={`a-${i}`} className="relative h-40 w-52 sm:h-48 sm:w-64 shrink-0 rounded-2xl overflow-hidden bg-zinc-900 ring-1 ring-zinc-700/50 shadow-xl shadow-black/30">
              <img src={p.src} alt={p.alt} className="w-full h-full object-cover" loading="lazy" />
              <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-black/10" />
            </div>
          ))}
        </div>
        <div className="flex gap-4 shrink-0 animate-marquee-x pe-4" aria-hidden="true">
          {photos.map((p, i) => (
            <div key={`b-${i}`} className="relative h-40 w-52 sm:h-48 sm:w-64 shrink-0 rounded-2xl overflow-hidden bg-zinc-900 ring-1 ring-zinc-700/50 shadow-xl shadow-black/30">
              <img src={p.src} alt={p.alt} className="w-full h-full object-cover" loading="lazy" />
              <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-black/10" />
            </div>
          ))}
        </div>
        <div className="flex gap-4 shrink-0 animate-marquee-x pe-4" aria-hidden="true">
          {photos.map((p, i) => (
            <div key={`c-${i}`} className="relative h-40 w-52 sm:h-48 sm:w-64 shrink-0 rounded-2xl overflow-hidden bg-zinc-900 ring-1 ring-zinc-700/50 shadow-xl shadow-black/30">
              <img src={p.src} alt={p.alt} className="w-full h-full object-cover" loading="lazy" />
              <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-black/10" />
            </div>
          ))}
        </div>
      </div>
      
      <style jsx global>{`
        @keyframes marquee-x {
          0% { transform: translateX(0); }
          100% { transform: translateX(-100%); }
        }
        .animate-marquee-x {
          animation: marquee-x 30s linear infinite;
        }
      `}</style>
    </div>
  );
}

// ---------------------------------------------------------------------------
// Page
// ---------------------------------------------------------------------------

export default function Home() {
  const { lang } = useLanguage();
  const { isAdmin } = useAuth();

  const features = [
    { icon: Camera,    title: t(lang, 'feature1Title'),  desc: t(lang, 'feature1Desc'), color: 'from-amber-300/20 to-amber-300/0' },
    { icon: Clock,     title: t(lang, 'feature2Title'),    desc: t(lang, 'feature2Desc'), color: 'from-violet-400/20 to-violet-400/0' },
    { icon: Lock,      title: t(lang, 'feature3Title'),  desc: t(lang, 'feature3Desc'), color: 'from-emerald-400/20 to-emerald-400/0' },
    { icon: Wand2,     title: t(lang, 'feature4Title'),  desc: t(lang, 'feature4Desc'), color: 'from-rose-400/20 to-rose-400/0' },
    { icon: Sparkles,  title: t(lang, 'feature5Title'),    desc: t(lang, 'feature5Desc'), color: 'from-sky-400/20 to-sky-400/0' },
    { icon: Share2,    title: t(lang, 'feature6Title'),   desc: t(lang, 'feature6Desc'), color: 'from-pink-400/20 to-pink-400/0' },
  ];

  const useCases = [
    { key: 'wedding',  emoji: '💍', title: t(lang, 'wedding'),  desc: t(lang, 'weddingDesc') },
    { key: 'birthday', emoji: '🎂', title: t(lang, 'birthday'), desc: t(lang, 'birthdayDesc') },
    { key: 'trip',     emoji: '✈️', title: t(lang, 'trip'),     desc: t(lang, 'tripDesc') },
    { key: 'party',    emoji: '🎉', title: t(lang, 'party'),    desc: t(lang, 'partyDesc') },
  ];

  const faqs = [
    { q: t(lang, 'faq1Q'), a: t(lang, 'faq1A') },
    { q: t(lang, 'faq2Q'), a: t(lang, 'faq2A') },
    { q: t(lang, 'faq3Q'), a: t(lang, 'faq3A') },
    { q: t(lang, 'faq4Q'), a: t(lang, 'faq4A') },
    { q: t(lang, 'faq5Q'), a: t(lang, 'faq5A') },
    { q: t(lang, 'faq6Q'), a: t(lang, 'faq6A') },
    { q: t(lang, 'faq7Q'), a: t(lang, 'faq7A') },
    { q: t(lang, 'faq8Q'), a: t(lang, 'faq8A') },
    { q: t(lang, 'faq9Q'), a: t(lang, 'faq9A') },
  ];

  const isAr = lang === 'ar';

  return (
    <div className="flex-1 bg-background text-foreground" dir={isAr ? 'rtl' : 'ltr'}>
      {/* ============================================================== */}
      {/* HERO — SaaS Style (Stripe/Linear inspired)                       */}
      {/* ============================================================== */}
      <section className="relative min-h-screen flex items-center px-6 py-20 overflow-hidden bg-[#0a0a0a]">
        {/* Subtle gradient background */}
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(120,119,198,0.15),transparent)]" />
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_60%_40%_at_80%_50%,rgba(99,102,241,0.1),transparent)]" />

        <div className="max-w-7xl mx-auto w-full grid lg:grid-cols-2 gap-12 lg:gap-8 items-center">
          {/* Left: Content */}
          <motion.div
            initial={{ opacity: 0, x: -30 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6 }}
            className="relative z-10 text-center lg:text-start"
          >
            <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-indigo-500/30 bg-indigo-500/10 mb-6">
              <Sparkles className="h-3.5 w-3.5 text-indigo-400" />
              <span className="text-xs font-medium text-indigo-300">{t(lang, 'nowWithAI')}</span>
            </div>

            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight leading-[1.1] mb-6 text-white">
              {t(lang, 'captureYourDay')}
              <br />
              <span className="bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">
                {t(lang, 'throughEveryonesEyes')}
              </span>
            </h1>

            <p className="text-base sm:text-lg text-zinc-400 mb-8 max-w-lg mx-auto lg:mx-0 leading-relaxed">
              {t(lang, 'premiumPrivatePhotoSharing')}
            </p>

            <div className="flex flex-col sm:flex-row gap-3 justify-center lg:justify-start">
              <Link
                href="/event/create"
                className="group inline-flex items-center justify-center gap-2 h-11 px-6 rounded-lg bg-white text-zinc-950 font-semibold text-sm hover:bg-zinc-100 transition-colors"
              >
                {t(lang, 'createYourEvent')}
                <ArrowRight className="h-4 w-4 group-hover:translate-x-0.5 transition-transform" />
              </Link>
              <Link
                href="/pricing"
                className="inline-flex items-center justify-center gap-2 h-11 px-6 rounded-lg border border-zinc-700 text-zinc-300 font-medium text-sm hover:border-zinc-600 hover:text-white transition-colors bg-zinc-900/50"
              >
                {t(lang, 'seePricing')}
              </Link>
            </div>

            {/* Stats */}
            <div className="flex items-center gap-6 mt-10 justify-center lg:justify-start text-sm text-zinc-500">
              <div className="flex items-center gap-2">
                <Users className="h-4 w-4 text-zinc-600" />
                <span>2,400+ {lang === 'ar' ? 'مناسبة' : 'Events'}</span>
              </div>
              <div className="flex items-center gap-2">
                <Camera className="h-4 w-4 text-zinc-600" />
                <span>180K+ {lang === 'ar' ? 'صورة' : 'Photos'}</span>
              </div>
            </div>
          </motion.div>

          {/* Right: iPad Mockup with Hero Image */}
          <motion.div
            initial={{ opacity: 0, x: 30 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="relative z-10 flex justify-center lg:justify-end"
          >
            <div className="relative">
              {/* iPad Frame */}
              <div className="relative w-[420px] sm:w-[550px] md:w-[650px] bg-zinc-900 rounded-[1.5rem] sm:rounded-[2rem] p-2 sm:p-3 border border-zinc-800 shadow-2xl shadow-indigo-500/10">
                {/* Camera notch */}
                <div className="absolute top-2 left-1/2 -translate-x-1/2 w-2 h-2 sm:w-3 sm:h-3 rounded-full bg-zinc-800 z-10" />
                
                <div className="relative aspect-[4/3] rounded-[1rem] sm:rounded-[1.5rem] overflow-hidden bg-zinc-950">
                  {/* Hero Image - Momira App Interface */}
                  <img 
                    src="/media/main.png" 
                    alt="Momira App - Wedding Album" 
                    className="w-full h-full object-cover"
                  />
                  
                  {/* Subtle overlay for depth */}
                  <div className="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent pointer-events-none" />
                </div>
              </div>

              {/* Floating Photo Cards - Side decorations */}
              <motion.div
                initial={{ x: -30, opacity: 0 }}
                animate={{ x: 0, opacity: 1 }}
                transition={{ delay: 0.5 }}
                className="absolute -left-8 sm:-left-16 top-12 w-20 h-20 sm:w-28 sm:h-28 rounded-xl overflow-hidden border-2 border-white/10 shadow-xl hidden sm:block rotate-[-8deg]"
              >
                <img src={HERO_IMAGES[0].src} alt="" className="w-full h-full object-cover" />
              </motion.div>

              <motion.div
                initial={{ x: 30, opacity: 0 }}
                animate={{ x: 0, opacity: 1 }}
                transition={{ delay: 0.6 }}
                className="absolute -right-8 sm:-right-12 bottom-20 w-16 h-16 sm:w-24 sm:h-24 rounded-xl overflow-hidden border-2 border-white/10 shadow-xl hidden sm:block rotate-[6deg]"
              >
                <img src={HERO_IMAGES[1].src} alt="" className="w-full h-full object-cover" />
              </motion.div>

              {/* QR Badge floating */}
              <motion.div
                initial={{ scale: 0.8, opacity: 0 }}
                animate={{ scale: 1, opacity: 1 }}
                transition={{ delay: 0.7 }}
                className="absolute -right-4 top-8 bg-white/95 backdrop-blur rounded-xl p-2.5 sm:p-3 shadow-lg border border-zinc-200"
              >
                <QrCode className="h-6 w-6 sm:h-8 sm:w-8 text-zinc-800" />
              </motion.div>
            </div>
          </motion.div>
        </div>

        {/* Top bar */}
        <div className="absolute top-4 end-4 z-20 flex items-center gap-2">
          <LanguageSwitcher />
          {isAdmin && (
            <Link href="/admin" className="flex items-center gap-1.5 text-xs text-zinc-500 hover:text-white transition-colors">
              <Shield className="h-3.5 w-3.5" />
              Admin
            </Link>
          )}
        </div>
      </section>

      {/* ============================================================== */}
      {/* PHOTO MARQUEE                                                    */}
      {/* ============================================================== */}
      <section className="border-t border-zinc-900 py-8 bg-zinc-950">
        <p className="text-center text-xs uppercase tracking-widest text-zinc-400 mb-4">
          Real moments captured by Momira users
        </p>
        <PhotoMarquee photos={HERO_IMAGES} />
      </section>

      {/* ============================================================== */}
      {/* STATS — Dark gradient background                                 */}
      {/* ============================================================== */}
      <section className="py-20 px-6 border-t border-zinc-900 bg-gradient-to-b from-zinc-950 via-zinc-900 to-zinc-950 relative overflow-hidden">
        {/* Subtle radial glow */}
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(99,102,241,0.08),transparent_70%)]" />
        <div className="max-w-5xl mx-auto grid grid-cols-2 sm:grid-cols-4 gap-8 relative z-10">
          <StatCounter value={2400} suffix="+" label="Events created" />
          <StatCounter value={180000} suffix="+" label="Photos captured" />
          <StatCounter value={47} label="Countries" />
          <StatCounter value={99} suffix="%" label="Host satisfaction" />
        </div>
      </section>

      {/* ============================================================== */}
      {/* GET STARTED — three roles                                        */}
      {/* ============================================================== */}
      <section className="py-24 px-6 border-t border-zinc-900 bg-gradient-to-b from-zinc-950 to-zinc-900">
        <div className="max-w-5xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-center mb-12"
          >
            <h2 className="text-3xl sm:text-4xl font-bold mb-3 text-white">{t(lang, 'chooseHowToUse')}</h2>
            <p className="text-zinc-400 text-sm">{t(lang, 'userDesc')} · {t(lang, 'guestDesc')} · {t(lang, 'adminDesc')}</p>
          </motion.div>
          <div className="grid sm:grid-cols-2 gap-4">
            {[
              { icon: UserCircle, title: t(lang, 'host'),  desc: t(lang, 'userDesc'), href: '/auth',                 color: 'text-blue-400',    bg: 'from-blue-500/15 to-blue-500/0',    border: 'border-blue-500/30' },
              { icon: QrCode,     title: t(lang, 'guest'), desc: t(lang, 'guestDesc'), href: '/qr',                   color: 'text-emerald-400', bg: 'from-emerald-500/15 to-emerald-500/0', border: 'border-emerald-500/30' },
            ].map((role, i) => (
              <motion.div
                key={role.title}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.1 }}
              >
                <Link
                  href={role.href}
                  className={`group block rounded-2xl border ${role.border} bg-gradient-to-br ${role.bg} backdrop-blur-sm p-6 hover:scale-[1.02] transition-transform h-full`}
                >
                  <role.icon className={`h-8 w-8 ${role.color} mb-4`} />
                  <h3 className="text-lg font-semibold mb-2 text-white">{role.title}</h3>
                  <p className="text-sm text-zinc-400 leading-relaxed mb-4">{role.desc}</p>
                  <span className={`inline-flex items-center gap-1 text-xs font-medium ${role.color} group-hover:gap-2 transition-all`}>
                    {t(lang, 'getStarted')} <ArrowRight className="h-3 w-3" />
                  </span>
                </Link>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* ============================================================== */}
      {/* HOW IT WORKS                                                     */}
      {/* ============================================================== */}
      <section className="py-24 px-6 border-t border-zinc-900 bg-gradient-to-b from-zinc-900 to-zinc-950 relative overflow-hidden">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_50%,_rgba(99,102,241,0.08)_0%,_transparent_50%)] pointer-events-none" />
        <div className="max-w-5xl mx-auto relative">
          <motion.h2
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            viewport={{ once: true }}
            className="text-3xl sm:text-5xl font-bold text-center mb-4 text-white"
          >
            {t(lang, 'howADayBecomes')}
          </motion.h2>
          <p className="text-zinc-300 text-center mb-16 max-w-xl mx-auto">{t(lang, 'threeSimpleSteps')}</p>
          <div className="grid sm:grid-cols-3 gap-8 relative">
            {/* Connector line */}
            <div className="hidden sm:block absolute top-8 start-[15%] end-[15%] h-px bg-gradient-to-r from-transparent via-amber-300/30 to-transparent" />

            {[
              { step: '01', title: t(lang, 'createAFilm'),     desc: t(lang, 'createFilmDesc'), img: '/media/main.png' },
              { step: '02', title: t(lang, 'inviteYourPeople'), desc: t(lang, 'inviteDesc'),         img: '/media/fd7832bc-e2c2-4cca-967c-e8990d925c8a.png' },
              { step: '03', title: t(lang, 'captureTogether'),   desc: t(lang, 'captureDesc'),     img: '/media/4.png' },
            ].map((item, i) => (
              <motion.div
                key={item.step}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.15 }}
                className="text-center relative"
              >
                <div className="relative w-16 h-16 mx-auto mb-6 rounded-full bg-indigo-500 text-white flex items-center justify-center font-bold shadow-lg shadow-indigo-500/30">
                  {item.step}
                </div>
                <div className="rounded-2xl overflow-hidden mb-5 aspect-video bg-zinc-900">
                  <img src={item.img} alt="" className="w-full h-full object-cover" loading="lazy" />
                </div>
                <h3 className="text-xl font-semibold mb-2 text-white">{item.title}</h3>
                <p className="text-zinc-300 text-sm leading-relaxed">{item.desc}</p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* ============================================================== */}
      {/* FEATURES — bento grid                                            */}
      {/* ============================================================== */}
      <section className="py-24 px-6 border-t border-zinc-900 bg-gradient-to-b from-zinc-950 via-zinc-900 to-zinc-950">
        <div className="max-w-6xl mx-auto">
          <motion.div
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            viewport={{ once: true }}
            className="text-center mb-16"
          >
            <p className="text-xs uppercase tracking-widest text-indigo-400 mb-3">{t(lang, 'features')}</p>
            <h2 className="text-3xl sm:text-5xl font-bold text-white">{t(lang, 'everythingYouNeed')}</h2>
          </motion.div>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            {features.map((feature, i) => (
              <motion.div
                key={feature.title}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.06 }}
                className={`relative overflow-hidden rounded-2xl border border-zinc-800 bg-zinc-900/30 p-6 hover:border-zinc-700 transition-all hover:-translate-y-1 group`}
              >
                <div className={`absolute inset-0 bg-gradient-to-br ${feature.color} opacity-0 group-hover:opacity-100 transition-opacity`} />
                <feature.icon className="relative h-7 w-7 text-indigo-400 mb-4" />
                <h3 className="relative font-semibold text-lg mb-2 text-white">{feature.title}</h3>
                <p className="relative text-sm text-zinc-400 leading-relaxed">{feature.desc}</p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* ============================================================== */}
      {/* VIDEO SHOWCASE — Local media                                     */}
      {/* ============================================================== */}
      <section className="py-24 px-6 border-t border-zinc-900 bg-gradient-to-b from-zinc-900 to-zinc-950">
        <div className="max-w-6xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-center mb-16"
          >
            <p className="text-xs uppercase tracking-widest text-primary mb-3">{lang === 'ar' ? 'لحظات حية' : 'Live Moments'}</p>
            <h2 className="text-3xl sm:text-5xl font-bold font-display text-white">{lang === 'ar' ? 'شاهد التجربة' : 'See the Experience'}</h2>
          </motion.div>

          {/* Professional Camera Screen Display */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
            className="relative max-w-4xl mx-auto"
          >
            {/* Camera Frame */}
            <div className="relative bg-zinc-950 rounded-2xl sm:rounded-3xl p-3 sm:p-4 border border-zinc-800 shadow-2xl shadow-indigo-500/10">
              {/* Camera notch / top bar */}
              <div className="absolute top-1 sm:top-2 left-1/2 -translate-x-1/2 flex items-center gap-2 z-20">
                <div className="w-2 h-2 sm:w-3 sm:h-3 rounded-full bg-zinc-700" />
                <div className="w-1 h-1 rounded-full bg-red-500 animate-pulse" />
              </div>
              
              {/* Recording indicator */}
              <div className="absolute top-3 sm:top-4 right-4 sm:right-6 flex items-center gap-2 z-20 bg-black/60 backdrop-blur rounded-full px-2 sm:px-3 py-1">
                <div className="w-2 h-2 rounded-full bg-red-500 animate-pulse" />
                <span className="text-[10px] sm:text-xs font-mono text-white/90">REC</span>
              </div>

              {/* Video Screen - 16:9 Aspect Ratio */}
              <div className="relative aspect-video rounded-xl sm:rounded-2xl overflow-hidden bg-zinc-900">
                <video
                  src="/media/hf_20260526_121541_8feb33d7-39e9-48fc-b634-1bf4b1834355.mp4"
                  className="w-full h-full object-cover"
                  autoPlay
                  muted
                  loop
                  playsInline
                />
                
                {/* Camera UI Overlay */}
                <div className="absolute inset-0 pointer-events-none">
                  {/* Focus brackets */}
                  <div className="absolute top-4 left-4 w-8 h-8 border-l-2 border-t-2 border-white/30" />
                  <div className="absolute top-4 right-4 w-8 h-8 border-r-2 border-t-2 border-white/30" />
                  <div className="absolute bottom-4 left-4 w-8 h-8 border-l-2 border-b-2 border-white/30" />
                  <div className="absolute bottom-4 right-4 w-8 h-8 border-r-2 border-b-2 border-white/30" />
                  
                  {/* Center focus point */}
                  <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-12 h-12 border border-white/20 rounded-full" />
                  <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-1 h-4 bg-white/40" />
                  <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-4 h-1 bg-white/40" />
                </div>

                {/* Bottom info bar */}
                <div className="absolute bottom-0 inset-x-0 bg-gradient-to-t from-black/60 to-transparent p-4 sm:p-6">
                  <div className="flex items-end justify-between text-white">
                    <div>
                      <p className="text-xs sm:text-sm font-medium text-white/80 mb-1">{lang === 'ar' ? 'موميرا - مناسبة حية' : 'Momira - Live Event'}</p>
                      <p className="text-[10px] sm:text-xs text-white/50 font-mono">ISO 800 · f/2.8 · 1/60s</p>
                    </div>
                    <div className="text-right">
                      <p className="text-lg sm:text-2xl font-mono font-bold text-white">00:45:23</p>
                      <p className="text-[10px] sm:text-xs text-white/50">{lang === 'ar' ? 'وقت التسجيل' : 'Recording Time'}</p>
                    </div>
                  </div>
                </div>
              </div>

              {/* Camera controls bar */}
              <div className="flex items-center justify-between mt-3 sm:mt-4 px-2">
                <div className="flex items-center gap-2 sm:gap-4">
                  <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-zinc-800 flex items-center justify-center">
                    <Camera className="h-4 w-4 sm:h-5 sm:w-5 text-zinc-400" />
                  </div>
                  <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-zinc-800 flex items-center justify-center">
                    <div className="w-4 h-4 sm:w-5 sm:h-5 rounded bg-red-500" />
                  </div>
                </div>
                <div className="text-[10px] sm:text-xs text-zinc-500 font-mono">momira.app</div>
                <div className="flex items-center gap-2">
                  <div className="w-8 h-5 sm:w-10 sm:h-6 rounded bg-zinc-800 flex items-center justify-center">
                    <div className="w-4 h-2 sm:w-5 sm:h-2.5 rounded-sm bg-white/20" />
                  </div>
                  <span className="text-[10px] sm:text-xs text-zinc-500">100%</span>
                </div>
              </div>
            </div>
          </motion.div>
        </div>
      </section>

      {/* ============================================================== */}
      {/* USE CASES with images                                            */}
      {/* ============================================================== */}
      <section className="py-24 px-6 border-t border-zinc-900 bg-gradient-to-b from-zinc-950 to-zinc-900">
        <div className="max-w-6xl mx-auto">
          <motion.div
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            viewport={{ once: true }}
            className="text-center mb-16"
          >
            <h2 className="text-3xl sm:text-5xl font-bold mb-3 text-white">{t(lang, 'perfectForEveryMoment')}</h2>
            <p className="text-zinc-400">{t(lang, 'fromWhisperedToNeon')}</p>
          </motion.div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            {useCases.map((useCase, i) => (
              <motion.div
                key={useCase.key}
                initial={{ opacity: 0, scale: 0.95 }}
                whileInView={{ opacity: 1, scale: 1 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.08 }}
                className="group relative aspect-[3/4] rounded-2xl overflow-hidden border border-zinc-800 hover:border-amber-300/50 transition-colors"
              >
                <img
                  src={USE_CASE_IMAGES[useCase.key]}
                  alt={useCase.title}
                  className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                  loading="lazy"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black via-black/60 to-transparent" />
                <div className="absolute bottom-0 inset-x-0 p-5">
                  <div className="text-3xl mb-2">{useCase.emoji}</div>
                  <h3 className="font-bold text-lg text-white">{useCase.title}</h3>
                  <p className="text-xs text-zinc-300 mt-1">{useCase.desc}</p>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* ============================================================== */}
      {/* TESTIMONIALS                                                     */}
      {/* ============================================================== */}
      <section className="py-24 px-6 border-t border-zinc-900 bg-zinc-950">
        <div className="max-w-6xl mx-auto">
          <motion.div
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            viewport={{ once: true }}
            className="text-center mb-16"
          >
            <p className="text-xs uppercase tracking-widest text-indigo-400 mb-3">{t(lang, 'testimonials')}</p>
            <h2 className="text-3xl sm:text-5xl font-bold text-white">{t(lang, 'lovedByHosts')}</h2>
          </motion.div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {TESTIMONIALS.map((t, i) => (
              <motion.div
                key={t.name}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.1 }}
                className="rounded-2xl border border-zinc-800 bg-zinc-900/40 p-6 hover:border-amber-300/30 transition-colors"
              >
                <div className="flex mb-4">
                  {[...Array(5)].map((_, j) => (
                    <Star key={j} className="h-4 w-4 fill-amber-300 text-amber-300" />
                  ))}
                </div>
                <p className="text-sm text-zinc-300 leading-relaxed mb-6 italic">&ldquo;{t.quote}&rdquo;</p>
                <div className="flex items-center gap-3">
                  <img src={t.avatar} alt={t.name} className="h-10 w-10 rounded-full object-cover ring-2 ring-zinc-800" loading="lazy" />
                  <div>
                    <div className="text-sm font-semibold text-white">{t.name}</div>
                    <div className="text-xs text-zinc-500">{t.role}</div>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* ============================================================== */}
      {/* FAQ                                                              */}
      {/* ============================================================== */}
      <section className="py-24 px-6 border-t border-zinc-900 bg-gradient-to-b from-zinc-900 to-zinc-950">
        <div className="max-w-3xl mx-auto">
          <motion.h2
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            viewport={{ once: true }}
            className="text-3xl sm:text-5xl font-bold text-center mb-4 text-white"
          >
            {t(lang, 'faq')}
          </motion.h2>
          <p className="text-zinc-400 text-center mb-12 text-sm">{t(lang, 'everythingYouWantedToKnow')}</p>
          <div className="rounded-2xl border border-zinc-800 bg-zinc-900/30 overflow-hidden px-6">
            {faqs.map((faq, i) => (
              <AccordionItem key={i} question={faq.q} answer={faq.a} />
            ))}
          </div>
        </div>
      </section>

      {/* ============================================================== */}
      {/* CTA                                                              */}
      {/* ============================================================== */}
      <section className="relative py-32 px-6 border-t border-zinc-900 overflow-hidden">
        <div className="absolute inset-0 -z-10">
          <div className="absolute inset-0 bg-gradient-to-br from-indigo-950/50 via-zinc-950 to-purple-950/50" />
          <div className="absolute inset-0 bg-gradient-to-t from-black via-black/90 to-black" />
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,_rgba(252,211,77,0.15)_0%,_transparent_60%)]" />
        </div>
        <div className="max-w-3xl mx-auto text-center relative">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
          >
            <h2 className="text-4xl sm:text-6xl font-bold mb-4 leading-tight text-white">
              {t(lang, 'lifeHappens')}
              <br />
              <span className="bg-gradient-to-r from-amber-200 to-amber-400 bg-clip-text text-transparent">
                {t(lang, 'dontLetItFade')}
              </span>
            </h2>
            <p className="text-zinc-300 text-lg mb-10 max-w-xl mx-auto">
              {t(lang, 'startFirstEvent')}
            </p>
            <div className="flex flex-col sm:flex-row gap-3 justify-center">
              <Link
                href="/event/create"
                className="group inline-flex items-center justify-center gap-2 h-12 px-8 rounded-full bg-amber-300 text-zinc-950 font-semibold text-base hover:bg-amber-200 transition-colors shadow-2xl shadow-amber-300/20"
              >
                {t(lang, 'createForFree')}
                <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
              </Link>
              <Link
                href="/pricing"
                className="inline-flex items-center justify-center h-12 px-8 rounded-full border border-zinc-600 bg-black/40 backdrop-blur-md text-white font-medium text-base hover:bg-zinc-800/60 transition-colors"
              >
                {t(lang, 'seePricing')}
              </Link>
            </div>
          </motion.div>
        </div>
      </section>

      {/* ============================================================== */}
      {/* FOOTER                                                           */}
      {/* ============================================================== */}
      <footer className="py-12 px-6 border-t border-zinc-900">
        <div className="max-w-6xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4">
          <div className="flex items-center gap-2 text-sm">
            <div className="h-7 w-7 rounded-full bg-amber-300 flex items-center justify-center text-zinc-950 font-bold text-xs">○</div>
            <span className="font-semibold">Momira</span>
            <span className="text-zinc-600">·</span>
            <span className="text-zinc-500 text-xs">{t(lang, 'footerTagline')}</span>
          </div>
          <div className="flex flex-wrap items-center gap-4 text-xs text-zinc-500">
            <Link href="/pricing" className="hover:text-white">{t(lang, 'pricing')}</Link>
            <Link href="/privacy" className="hover:text-white">{lang === 'ar' ? 'الخصوصية' : 'Privacy'}</Link>
            <Link href="/terms" className="hover:text-white">{lang === 'ar' ? 'الشروط' : 'Terms'}</Link>
            <Link href="/contact" className="hover:text-white">{lang === 'ar' ? 'تواصل معنا' : 'Contact'}</Link>
            <Link href="/auth" className="hover:text-white">{t(lang, 'login')}</Link>
            <span>© 2026 Momira.app</span>
          </div>
        </div>
      </footer>
    </div>
  );
}