'use client';
import { useState } from 'react';
import { motion } from 'framer-motion';
import { ourFactoryData } from '../lib/data';

export const OurFactoryTab = () => {
  const [activeIndex, setActiveIndex] = useState(0);
  const active = ourFactoryData.blocks[activeIndex];

  return (
    <section className="pb-10 bg-white">
      <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-10 items-center">
        <motion.div
          initial={{ x: -50, opacity: 0 }}
          animate={{ x: 0, opacity: 1 }}
          transition={{ duration: 0.7 }}
          className="space-y-6"
        >
          <div className="flex gap-4">
            {ourFactoryData.tabs.map((tab, idx) => (
              <button
                key={idx}
                onClick={() => setActiveIndex(idx)}
                className={`px-4 py-2 text-sm font-semibold rounded-t-md ${
                  idx === activeIndex
                    ? 'bg-secondary text-white'
                    : 'bg-white text-primary border border-primary/50'
                }`}
              >
                {tab}
              </button>
            ))}
          </div>
          <motion.div
            key={activeIndex}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.4 }}
            className="space-y-4"
          >
            <h3 className="text-2xl font-semibold text-accent">
              {active.title}
            </h3>
            <p className="text-muted leading-relaxed whitespace-pre-line font-medium">
              {active.description}
            </p>
          </motion.div>
        </motion.div>
        <motion.div
          initial={{ x: 50, opacity: 0 }}
          animate={{ x: 0, opacity: 1 }}
          transition={{ duration: 0.7 }}
          className="aspect-video w-full h-full rounded-xl overflow-hidden shadow-md"
        >
          <iframe
            src={`https://www.youtube.com/embed/${active.videoId}`}
            title="Video"
            className="w-full h-full"
            allowFullScreen
          />
        </motion.div>
      </div>
    </section>
  );
};
