"use client";

import { motion } from "framer-motion";
import { useTranslation } from "@/lib/i18n/context";
import Link from "next/link";
import { ArrowRight, ArrowLeft } from "lucide-react";

export function CompanyIntro() {
  const { t, dir } = useTranslation();

  return (
    <section className="section-padding bg-white relative overflow-hidden" dir={dir}>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
          
          {/* Text Content */}
          <motion.div
            initial={{ opacity: 0, x: dir === "rtl" ? 50 : -50 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
            className="space-y-6"
          >
            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-soft-teal/10 border border-soft-teal/20 text-soft-teal font-bold text-sm mb-2">
              <span className="w-2 h-2 rounded-full bg-soft-teal animate-pulse" />
              {t.homeIntro.title}
            </div>
            
            <h2 className="text-3xl md:text-4xl lg:text-5xl font-black text-dark-text leading-tight">
              {t.homeIntro.title}
            </h2>
            
            <p className="text-lg text-dark-text/70 leading-relaxed">
              {t.homeIntro.description}
            </p>

            <div className="pt-4">
              <Link
                href="/about"
                className="inline-flex items-center justify-center gap-2 px-8 py-4 rounded-full bg-primary text-white font-bold text-base hover:bg-primary-dark transition-all duration-300 shadow-lg shadow-primary/20 group"
              >
                {t.homeIntro.cta}
                {dir === "rtl" ? (
                  <ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
                ) : (
                  <ArrowRight size={20} className="group-hover:translate-x-1 transition-transform" />
                )}
              </Link>
            </div>
          </motion.div>

          {/* Video Content */}
          <motion.div
            initial={{ opacity: 0, x: dir === "rtl" ? -50 : 50 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="relative"
          >
            {/* Decorative background shape */}
            <div className="absolute inset-0 bg-gradient-to-tr from-baby-blue/30 to-soft-teal/20 rounded-3xl transform rotate-3 scale-105 -z-10" />
            
            <div className="relative rounded-3xl overflow-hidden shadow-2xl aspect-video bg-dark-text/5">
              <iframe
                src="https://www.youtube.com/embed/DVq8bHceudI?autoplay=0&rel=0&showinfo=0"
                title="UNIPAM Intro"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen
                className="absolute top-0 left-0 w-full h-full border-0"
              />
            </div>
            
            {/* Floating badge */}
            <div className={`absolute -bottom-6 ${dir === "rtl" ? "-right-6" : "-left-6"} bg-white p-4 rounded-2xl shadow-xl flex items-center gap-4 z-10 hidden md:flex`}>
              <div className="w-12 h-12 rounded-full bg-soft-teal/20 flex items-center justify-center">
                <span className="text-soft-teal font-black text-xl">10+</span>
              </div>
              <div>
                <p className="font-bold text-dark-text text-sm leading-tight">Years of<br/>Excellence</p>
              </div>
            </div>
          </motion.div>

        </div>
      </div>
    </section>
  );
}