'use client';

import { useState } from 'react';
import ImageModal from './ImageModal';
import Link from 'next/link';
import Image from 'next/image';

const MAPS = [
  { src: '/outcome report maps/AT-Still-National-Alumni-Pracitce-Locations-Arizona-SOMA.jpg', title: 'AT Still National Alumni' },
  { src: '/outcome report maps/California_Medical-school-comparison-2017.jpg', title: 'California Med School Comparison' },
  { src: '/outcome report maps/F-KCCUMB_Regional_Distribution-2018-Updated.jpg', title: 'KCCUMB Regional Distribution' },
  { src: '/outcome report maps/Massachusett-high-potential-hospitals.jpg', title: 'Massachusetts High Potential Hospitals' },
  { src: '/outcome report maps/Missouri_PC_Needs_with_KCUMB.jpg', title: 'Missouri Primary Care Needs' },
  { src: '/outcome report maps/VA-Medical-School-Comparison.jpg', title: 'VA Med School Comparison' }
];

export default function OutcomeMapGalleryBento() {
  const [activeMap, setActiveMap] = useState<string | null>(null);

  return (
    <section className="py-24 bg-surface-container-lowest relative text-center">
      <div className="container mx-auto px-8 max-w-6xl">
        <h2 className="text-3xl md:text-4xl font-headline font-bold text-primary mb-6">Explore Outcome Visualizations</h2>
        <p className="text-lg text-on-surface-variant max-w-3xl mx-auto mb-12">
          Visually communicate your program's workforce contributions with precision clarity.
        </p>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 auto-rows-[150px] max-w-5xl mx-auto">
          {MAPS.map((map, idx) => (
            <div 
              key={idx} 
              className={`relative rounded-2xl overflow-hidden cursor-pointer group shadow-sm hover:shadow-xl transition-all border border-outline-variant/20 ${idx === 0 || idx === 3 ? 'md:col-span-2 lg:col-span-2 lg:row-span-2' : ''}`}
              onClick={() => setActiveMap(map.src)}
            >
              <Image 
                src={map.src} 
                alt={map.title} 
                fill
                sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-[#0B1A2A]/90 via-[#0B1A2A]/40 to-transparent opacity-80 group-hover:opacity-100 transition-opacity"></div>
              <div className="absolute bottom-0 left-0 w-full p-6 text-left flex items-center justify-between">
                <h4 className="font-headline font-bold text-white text-lg drop-shadow-md">{map.title}</h4>
                <div className="w-10 h-10 rounded-full bg-white/20 backdrop-blur-md flex items-center justify-center text-white opacity-0 group-hover:opacity-100 transition-all translate-y-4 group-hover:translate-y-0">
                  <span className="material-symbols-outlined">zoom_in</span>
                </div>
              </div>
            </div>
          ))}
        </div>
        
        <div className="mt-12 text-center">
          <Link href="/solutions/outcome-reporting/gallery" className="inline-flex items-center gap-2 bg-[#861F41] text-white px-8 py-4 rounded-lg font-headline font-bold text-lg hover:brightness-110 transition-all shadow-xl">
            More Maps <span className="material-symbols-outlined">arrow_forward</span>
          </Link>
        </div>
      </div>
      <ImageModal 
        src={activeMap} 
        alt="Enlarged Map View" 
        isOpen={!!activeMap} 
        onClose={() => setActiveMap(null)} 
      />
    </section>
  );
}