/* ====================================================
 * Company Intro Section
 * Animated counters + company overview
 * ==================================================== */

'use client';

import { useRef, useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { useInView } from '@/hooks';
import SectionHeader from '@/components/common/SectionHeader';
import ScrollReveal from '@/components/common/ScrollReveal';
import { companyStats as mockStats } from '@/data/mock-data';
import { AboutCompany } from '@/types/api';



export default function CompanyIntro({
  aboutData,
}: {
  aboutData?: AboutCompany | null;
}) {

  // Use mock data as fallback if api data is missing
  const data = aboutData?.history ? aboutData : {
    history: "Vitalist Pharma được thành lập năm 2005, khởi đầu từ một cơ sở sản xuất nhỏ tại Bình Dương. Trải qua gần 20 năm phát triển không ngừng, chúng tôi đã trở thành một trong những công ty dược phẩm uy tín nhất Việt Nam.\n\nVới nhà máy đạt chuẩn EU-GMP và hệ thống máy móc hiện đại từ Châu Âu, Vitalist Pharma cam kết đảm bảo chất lượng từng sản phẩm, phục vụ sức khỏe cộng đồng.",
    factory_title: "Nhà máy GMP",
    factory_description: "Diện tích 50.000m² | VSIP, Bình Dương",
    core_values: [
      { id: 1, title: 'EU-GMP', icon: '🏆' },
      { id: 2, title: 'ISO 9001', icon: '🌿' },
      { id: 3, title: 'Top 10 Dược phẩm', icon: '⭐' },
    ]
  };

  const historyParagraphs = data.history.split('\n').filter(p => p.trim());

  return (
    <section className="section-padding bg-white">
      <div className="container-custom">
        <SectionHeader
          subtitle={aboutData?.section_subtitle || 'Về chúng tôi'}
          title={aboutData?.section_title || 'Dược phẩm chất lượng quốc tế'}
          description={aboutData?.section_description || 'Với gần 20 năm kinh nghiệm, chúng tôi tự hào là một trong những công ty dược phẩm hàng đầu Việt Nam, cam kết mang đến sản phẩm chất lượng cao nhất.'}
        />

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-16">
          {/* Text Content */}
          <ScrollReveal animation="fadeLeft">
            <div className="space-y-5">
              <div
                className="text-dark-500 leading-relaxed space-y-4"
                dangerouslySetInnerHTML={{ __html: data.history }}
              />

              <div className="flex flex-wrap gap-3 pt-2">
                {data.core_values?.map((cv, i) => (
                  <span key={i} className="px-4 py-2 bg-primary-50 text-primary-600 text-sm font-medium rounded-full">
                    {cv.icon} {cv.title}
                  </span>
                ))}
              </div>
            </div>
          </ScrollReveal>

          {/* Image */}
          <ScrollReveal animation="fadeRight">
            {/* Container với group để trigger hover cho cả overlay lẫn badge */}
            <div className="relative group">

              {/* Ảnh nền */}
              <div
                className="aspect-[4/3] rounded-2xl overflow-hidden bg-gradient-to-br from-primary-100 to-primary-50 bg-cover bg-center relative"
                style={aboutData?.factory_images?.[0] ? { backgroundImage: `url(${aboutData.factory_images[0].image})` } : {}}
              >
                {/* Overlay mờ luôn có để ảnh không bị chói */}
                <div className="absolute inset-0 bg-primary-900/10 rounded-2xl" />

                {/* Nội dung overlay — ẩn mặc định, hiện khi hover */}
                <div className="absolute inset-0 flex items-center justify-center
                  opacity-0 group-hover:opacity-100
                  translate-y-4 group-hover:translate-y-0
                  transition-all duration-500 ease-out">
                  <div className="text-center p-8 backdrop-blur-md bg-white/40 rounded-2xl shadow-lg mx-6">
                    {/* Icon: emoji từ admin hoặc SVG mặc định */}
                    <div className="w-20 h-20 mx-auto mb-4 rounded-full bg-primary-500/10 flex items-center justify-center">
                      {aboutData?.factory_icon ? (
                        <span className="text-4xl">{aboutData.factory_icon}</span>
                      ) : (
                        <svg width="44" height="44" viewBox="0 0 48 48" fill="none">
                          <path d="M24 4C12.96 4 4 12.96 4 24s8.96 20 20 20 20-8.96 20-20S35.04 4 24 4z" fill="#0066B3" opacity="0.1" />
                          <path d="M24 8C15.16 8 8 15.16 8 24s7.16 16 16 16 16-7.16 16-16S32.84 8 24 8z" fill="#0066B3" opacity="0.2" />
                          <path d="M22 16h4v6h6v4h-6v6h-4v-6h-6v-4h6v-6z" fill="#0066B3" />
                        </svg>
                      )}
                    </div>
                    <h3 className="text-xl font-bold text-primary-700 mb-2">
                      {aboutData?.factory_title || data.factory_title}
                    </h3>
                    <p className="text-sm text-primary-700 font-medium">
                      {aboutData?.factory_description || data.factory_description}
                    </p>
                  </div>
                </div>
              </div>

              {/* Floating Badge — icon luôn hiện, text trượt ra khi hover */}
              <motion.div
                className="absolute -bottom-4 -left-4 bg-white rounded-xl shadow-card overflow-hidden cursor-default"
                animate={{ y: [0, -8, 0] }}
                transition={{ duration: 3, repeat: Infinity, ease: 'easeInOut' }}
              >
                <div className="flex items-center p-3 gap-0">
                  {/* Icon luôn hiện */}
                  <div className="w-11 h-11 rounded-lg bg-secondary-50 flex items-center justify-center text-2xl shrink-0">
                    {aboutData?.badge_icon || '🏭'}
                  </div>

                  {/* Text: trượt ra khi group-hover */}
                  <div
                    className="overflow-hidden max-w-0 group-hover:max-w-xs
                    opacity-0 group-hover:opacity-100
                    transition-all duration-500 ease-out
                    whitespace-nowrap pl-0 group-hover:pl-3"
                  >
                    <div className="text-sm font-bold text-dark-800 leading-tight">
                      {aboutData?.badge_title || 'EU-GMP'}
                    </div>
                    <div className="text-xs text-dark-400">
                      {aboutData?.badge_subtitle || 'Tiêu chuẩn Châu Âu'}
                    </div>
                  </div>
                </div>
              </motion.div>

            </div>
          </ScrollReveal>

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