'use client';

import { motion } from 'framer-motion';
import { PolycamEmbed } from '@/components/PolycamEmbed';
import { speakers } from '@/data/speakers';

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1,
      delayChildren: 0.1,
    },
  },
};

const itemVariants = {
  hidden: {
    opacity: 0,
    y: 20,
  },
  visible: {
    opacity: 1,
    y: 0,
  },
};

export function SpeakersPageClient() {
  return (
    <section className="bg-[#0f0f0f] text-white min-h-screen flex flex-col" style={{ fontFamily: 'var(--font-space-grotesk)' }}>
      {/* Header Card */}
      <header className="py-6 px-4 sm:px-6 lg:px-8">
        <div className="container mx-auto max-w-[1200px]">
          <motion.div
            className="relative bg-[#1a1a1a] border border-white/10 rounded-xl px-6 py-4 md:px-8 md:py-5 shadow-2xl"
            style={{
              boxShadow: '0 20px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05)',
            }}
            variants={itemVariants}
            transition={{ duration: 0.4, ease: 'easeOut' }}
            initial="hidden"
            animate="visible"
            role="banner"
          >
            <div className="flex flex-col lg:flex-row lg:items-start gap-6 lg:gap-8">
              {/* Title */}
              <motion.h1
                className="text-4xl md:text-5xl font-black font-exo-2 leading-none"
                style={{
                  color: '#ff4d00',
                }}
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.4, ease: 'easeOut', delay: 0.1 }}
              >
                SPEAKERS
              </motion.h1>

              {/* Info Grid - Left Aligned */}
              <div className="grid grid-cols-1 sm:grid-cols-3 gap-6 text-left flex-1">
                <motion.div
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.4, ease: 'easeOut', delay: 0.15 }}
                >
                  <p className="text-xs text-gray-500 uppercase tracking-wide">Code</p>
                  <p className="text-xs md:text-sm font-mono text-white">SPKR</p>
                </motion.div>

                <motion.div
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.4, ease: 'easeOut', delay: 0.2 }}
                  className="hidden sm:block"
                >
                  <p className="text-xs text-gray-500 uppercase tracking-wide">Client</p>
                  <p className="text-xs md:text-sm text-white whitespace-nowrap">Carly Gibert</p>
                </motion.div>

                <motion.div
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.4, ease: 'easeOut', delay: 0.25 }}
                  className="hidden sm:block"
                >
                  <p className="text-xs text-gray-500 uppercase tracking-wide">Studio</p>
                  <p className="text-xs md:text-sm text-white whitespace-nowrap">Biohazard VFX</p>
                </motion.div>
              </div>
            </div>
          </motion.div>
        </div>
      </header>

      {/* Divider */}
      <div className="px-4 sm:px-6 lg:px-8">
        <div className="container mx-auto max-w-[1200px]">
          <div className="border-t border-white/10" />
        </div>
      </div>

      {/* Embeds Section */}
      <main className="flex-1 px-4 sm:px-6 lg:px-8 py-12 md:py-16">
        <div className="container mx-auto max-w-[1200px]">
          {/* Visually hidden heading for screen readers */}
          <h2 className="sr-only">3D Scan Gallery</h2>

          <motion.div
            className="relative space-y-8"
            variants={containerVariants}
            initial="hidden"
            animate="visible"
            transition={{
              staggerChildren: 0.1,
              delayChildren: 0.1,
            }}
            role="region"
            aria-label="3D scan gallery"
          >
            {speakers.map((scan, index) => (
              <PolycamEmbed
                key={scan.id}
                captureId={scan.captureId}
                title={scan.title}
                index={index}
              />
            ))}
          </motion.div>
        </div>
      </main>

      {/* Divider */}
      <div className="px-4 sm:px-6 lg:px-8">
        <div className="container mx-auto max-w-[1200px]">
          <div className="border-t border-white/10" />
        </div>
      </div>

      {/* Footer */}
      <footer className="px-4 sm:px-6 lg:px-8 py-12 md:py-16 border-t border-white/10" role="contentinfo">
        <div className="container mx-auto max-w-[1200px]">
          <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-8">
            <div>
              <p className="text-sm text-gray-400 mb-4 font-semibold">Biohazard VFX</p>
              <p className="text-sm text-gray-300 max-w-sm">
                Artists and technical people specializing in VFX and 3D visualization.
              </p>
            </div>
            <motion.a
              href="mailto:contact@biohazardvfx.com"
              className="text-sm font-mono"
              style={{ color: '#ff4d00' }}
              whileHover={{ opacity: 0.8 }}
              aria-label="Email contact"
            >
              contact@biohazardvfx.com
            </motion.a>
          </div>
        </div>
      </footer>
    </section>
  );
}
