'use client';

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

export default function Home() {
  const [activeImage, setActiveImage] = useState<string | null>(null);

  return (
    <div className="flex flex-col w-full min-h-screen">
      {/* Hero Section */}
      <section className="relative min-h-[600px] flex items-center overflow-hidden bg-primary py-16">
        <div className="absolute inset-0 z-0">
          <Image 
            className="w-full h-full object-cover opacity-60 mix-blend-luminosity" 
            alt="Dark sophisticated GIS mapping interface with glowing data clusters across a United States geographic visualization at night" 
            src="/hero_background.jpg" 
            fill
            sizes="100vw"
            priority
          />
          <div className="absolute inset-0" style={{ background: 'linear-gradient(to right, rgba(0, 26, 73, 0.95) 0%, rgba(0, 26, 73, 0.85) 50%, rgba(0, 26, 73, 0) 75%)' }}></div>
        </div>
        <div className="relative z-10 container mx-auto px-8 md:grid md:grid-cols-12 gap-8">
          <div className="col-span-8 flex flex-col items-start gap-4">
            <div className="flex items-center gap-3">
              <span className="text-[#E87722] font-headline font-bold tracking-[0.2em] text-xs uppercase">National Center for the Analysis of Healthcare Data</span>
            </div>
            <h1 className="text-4xl md:text-6xl font-headline font-bold text-white leading-[1.1] tracking-tight">
              The Nation's Most Precise Map of the <span className="text-[#E87722]">Healthcare Workforce.</span>
            </h1>
            <p className="text-lg md:text-xl text-slate-300 max-w-2xl font-body leading-relaxed mb-2">
              Move beyond fragmented workforce statistics & data. Access the gold standard of healthcare workforce data—a comprehensive provider-level proprietary dataset capable of identifying workforce shortages, assessing workforce trends and driving high-impact policy decisions.
            </p>
            <div className="flex flex-wrap gap-4">
              <Link href="/solutions/esl-data" className="bg-[#E87722] text-white px-6 py-3 rounded-lg font-headline font-bold text-base hover:brightness-110 transition-all flex items-center gap-2">
                Access Our Data
                <span className="material-symbols-outlined">arrow_forward</span>
              </Link>
              <Link href="/solutions/alumni-tracking" className="bg-white/10 backdrop-blur-md text-white border border-white/20 px-6 py-3 rounded-lg font-headline font-bold text-base hover:bg-white/20 transition-all flex items-center gap-2">
                Track Your Alumni
                <span className="material-symbols-outlined">arrow_forward</span>
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Partners Section */}
      <div className="w-full bg-white py-6 relative z-20 shadow-sm">
        <div className="container mx-auto px-8 flex flex-col md:flex-row items-center justify-between gap-6 md:gap-4 opacity-70">
          <span className="font-headline font-bold text-[#861F41] text-sm tracking-widest uppercase">Trusted By Institutions</span>
          <div className="flex flex-wrap justify-center gap-12 items-center text-primary font-headline font-bold text-lg md:text-xl tracking-tighter">
            <span className="hover:text-[#861F41] transition-colors cursor-default">AOA</span>
            <span className="hover:text-[#861F41] transition-colors cursor-default">NARHC</span>
            <span className="hover:text-[#861F41] transition-colors cursor-default">AACOM</span>
            <span className="hover:text-[#861F41] transition-colors cursor-default">APA</span>
            <span className="hover:text-[#861F41] transition-colors cursor-default">DFWHC</span>
            <span className="hover:text-[#861F41] transition-colors cursor-default">FORHP</span>
          </div>
        </div>
      </div>

      {/* Empowering Your Workforce Decisions Section */}
      <section className="py-12 bg-surface relative overflow-hidden">
        <div className="container mx-auto px-8 relative z-10 max-w-5xl">
          <div className="text-center mb-10">
            <h2 className="text-2xl md:text-3xl font-headline font-bold text-primary tracking-tight uppercase">
              Empowering Your Workforce Decisions
            </h2>
          </div>

          <div className="grid md:grid-cols-3 gap-6">
            {/* Card 1: Geospatial Visualization */}
            <div className="rounded-2xl border border-white/20 shadow-sm relative overflow-hidden group h-[200px] flex items-center justify-center transition-all hover:shadow-md bg-white">
              <Image src="/geospatial_viz_illustration.jpg" alt="Geospatial Visualization" fill sizes="(max-width: 768px) 100vw, 33vw" className="absolute inset-0 w-full h-full object-cover opacity-65 group-hover:opacity-10 transition-opacity duration-500" />
              <div className="absolute inset-0 bg-primary/5"></div>
              <div className="relative z-10 flex flex-col items-center p-4 transition-all duration-500 group-hover:-translate-y-8 group-hover:opacity-0">
                <h3 className="text-xl font-headline font-bold text-primary text-center leading-tight bg-white/90 backdrop-blur-sm px-4 py-2 rounded-lg shadow-sm">Geospatial Analysis <br/>& Mapping</h3>
              </div>
              <div className="absolute inset-0 z-20 p-4 flex flex-col justify-center items-start opacity-0 group-hover:opacity-100 transition-all duration-500 bg-white/95 backdrop-blur-md translate-y-8 group-hover:translate-y-0">
                <ul className="text-xs text-on-surface-variant font-body mb-2 space-y-1 list-disc pl-5">
                  <li>Using Geographic Information System (GIS), spatially identify the gaps in access to care</li>
                  <li>Overlay demographic, socio-economic, political and workforce data more informative analysis</li>
                  <li>Create customized maps with client-based and NCAHD data</li>
                </ul>
                <Link href="/solutions/spatial-analysis" className="text-[#861F41] font-headline font-bold text-xs flex items-center gap-1 hover:text-[#E87722] transition-colors mt-auto self-center">
                  Map It <span>&rarr;</span>
                </Link>
              </div>
            </div>

            {/* Card 2: Alumni Tracking & Outcomes */}
            <div className="rounded-2xl border border-white/20 shadow-sm relative overflow-hidden group h-[200px] flex items-center justify-center transition-all hover:shadow-md bg-white">
              <Image src="/alumni_tracking.jpg" alt="Personnel Tracking" fill sizes="(max-width: 768px) 100vw, 33vw" className="absolute inset-0 w-full h-full object-cover opacity-65 group-hover:opacity-10 transition-opacity duration-500" />
              <div className="absolute inset-0 bg-primary/5"></div>
              <div className="relative z-10 flex flex-col items-center p-4 transition-all duration-500 group-hover:-translate-y-8 group-hover:opacity-0">
                <h3 className="text-xl font-headline font-bold text-primary text-center leading-tight bg-white/90 backdrop-blur-sm px-4 py-2 rounded-lg shadow-sm">Alumni Tracking <br/>& Outcomes</h3>
              </div>
              <div className="absolute inset-0 z-20 p-4 flex flex-col justify-center items-start opacity-0 group-hover:opacity-100 transition-all duration-500 bg-white/95 backdrop-blur-md translate-y-8 group-hover:translate-y-0">
                <ul className="text-xs text-on-surface-variant font-body mb-2 space-y-1 list-disc pl-5 leading-snug">
                  <li>Track alumni/graduate to current practice location and specialty</li>
                  <li>Measure institutional recruitment/retention success</li>
                  <li>Conduct impact analysis of graduates to service region/shortage designations, etc.</li>
                </ul>
                <Link href="/solutions/alumni-tracking" className="text-[#861F41] font-headline font-bold text-xs flex items-center gap-1 hover:text-[#E87722] transition-colors mt-auto self-center">
                  Track Alumni <span>&rarr;</span>
                </Link>
              </div>
            </div>

            {/* Card 3: Economic Impact Analysis */}
            <div className="rounded-2xl border border-white/20 shadow-sm relative overflow-hidden group h-[200px] flex items-center justify-center transition-all hover:shadow-md bg-white">
              <Image src="/economics_analytics_outcome.jpg" alt="Economics Analytics" fill sizes="(max-width: 768px) 100vw, 33vw" className="absolute inset-0 w-full h-full object-cover opacity-65 group-hover:opacity-10 transition-opacity duration-500" />
              <div className="absolute inset-0 bg-primary/5"></div>
              <div className="relative z-10 flex flex-col items-center p-4 transition-all duration-500 group-hover:-translate-y-8 group-hover:opacity-0">
                <h3 className="text-xl font-headline font-bold text-primary text-center leading-tight bg-white/90 backdrop-blur-sm px-4 py-2 rounded-lg shadow-sm">Economic Impact <br/>Analysis</h3>
              </div>
              <div className="absolute inset-0 z-20 p-4 flex flex-col justify-center items-start opacity-0 group-hover:opacity-100 transition-all duration-500 bg-white/95 backdrop-blur-md translate-y-8 group-hover:translate-y-0">
                <ul className="text-xs text-on-surface-variant font-body mb-2 space-y-1 list-disc pl-5 leading-snug">
                  <li>Calculate economic impact of alumni and aggregate results</li>
                  <li>Generate maps that visually advocate the economic impact</li>
                  <li>Estimate the economic impact of a rural clinic, small hospital, nursing home</li>
                </ul>
                <Link href="/research/economic-impact" className="text-[#861F41] font-headline font-bold text-xs flex items-center gap-1 hover:text-[#E87722] transition-colors mt-auto self-center">
                  Dive Into Analysis <span>&rarr;</span>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* What Influences Physicians Section */}
      <section className="py-24 bg-white relative overflow-hidden">
        <div className="container mx-auto px-8 max-w-6xl">
          <div className="grid lg:grid-cols-2 gap-16 items-center">
            <div className="flex flex-col gap-6 relative z-10">
              <div className="flex flex-col">
                <h2 className="text-3xl md:text-5xl font-headline font-bold text-primary uppercase tracking-tight">
                  WORKFORCE ANALYSIS
                </h2>
                <span className="text-lg md:text-xl font-headline font-bold text-[#E87722] mt-2 block uppercase tracking-wide">
                  WHAT INFLUENCES PHYSICIANS AND WHERE THEY PRACTICE?
                </span>
              </div>
              <p className="text-lg text-on-surface-variant font-body leading-relaxed">
                Our analysis uncovers a powerful geographic correlation: a physician's hometown is a remarkably strong predictor of where they will eventually practice medicine. By tracking educational pathways into residency and beyond, we empower organizations with the insights needed to strategically target recruitment, support rural health initiatives, and build a sustainable local workforce.
              </p>
              <div className="flex flex-wrap gap-4 mt-2">
                <Link href="/solutions/alumni-tracking" className="bg-[#861F41] text-white px-5 py-2.5 rounded-lg font-headline font-bold text-sm hover:bg-[#6c1733] transition-all shadow-md flex items-center gap-1">
                  Alumni Tracking
                </Link>
                <Link href="/research/workforce-analysis" className="bg-[#E87722] text-white px-5 py-2.5 rounded-lg font-headline font-bold text-sm hover:bg-[#d46a1e] transition-all shadow-md flex items-center gap-1">
                  Workforce Analysis
                </Link>
                <Link href="/solutions/custom-mapping-portals" className="bg-primary text-white px-5 py-2.5 rounded-lg font-headline font-bold text-sm hover:bg-[#861F41] hover:scale-105 transition-all shadow-md flex items-center gap-1">
                  Custom Maps
                </Link>
              </div>
            </div>
            <div className="relative min-h-[500px] flex items-center justify-center">
              <div className="absolute inset-0 bg-primary/5 -z-10 blur-3xl rounded-full"></div>
              
              {/* VCOM Graduates Main Image */}
              <button 
                onClick={() => setActiveImage('/graduate tracking/VCOM graduates.jpg')}
                className="w-[85%] shadow-xl border border-outline-variant/20 rounded-2xl overflow-hidden hover:-translate-y-2 hover:shadow-2xl transition-all duration-500 z-10 absolute top-0 left-0 cursor-zoom-in bg-white"
              >
                <Image 
                  src="/graduate tracking/VCOM graduates.jpg" 
                  alt="VCOM Graduates Map" 
                  width={800} 
                  height={600} 
                  className="w-full h-auto p-2" 
                />
              </button>

              {/* VCOM Distance Analysis Image */}
              <button 
                onClick={() => setActiveImage('/graduate tracking/VCOM Distance Analysis.jpg')}
                className="w-[60%] shadow-2xl border-4 border-white rounded-2xl overflow-hidden hover:-translate-y-2 hover:shadow-3xl transition-all duration-500 z-20 absolute bottom-4 right-0 cursor-zoom-in bg-white"
              >
                <Image 
                  src="/graduate tracking/VCOM Distance Analysis.jpg" 
                  alt="VCOM Distance Analysis" 
                  width={600} 
                  height={600} 
                  className="w-full h-auto p-2" 
                />
              </button>
            </div>
          </div>
        </div>

        {/* Footprint Trail Background Graphic */}
        <div className="absolute bottom-2 left-1/2 -translate-x-1/2 w-[800px] h-[200px] opacity-15 pointer-events-none z-0 hidden md:block">
          <svg viewBox="0 0 800 200" className="w-full h-full">
            {/* Print 1 (Maroon) - Left Foot */}
            <g transform="translate(40, 110) rotate(90)">
              <ellipse cx="10" cy="15" rx="8" ry="14" fill="#861F41" />
              <ellipse cx="10" cy="32" rx="6" ry="6" fill="#861F41" />
            </g>
            {/* Print 2 (Orange) - Right Foot */}
            <g transform="translate(85, 150) rotate(90)">
              <ellipse cx="10" cy="15" rx="8" ry="14" fill="#E87722" />
              <ellipse cx="10" cy="32" rx="6" ry="6" fill="#E87722" />
            </g>
            {/* Print 3 (Maroon) - Left Foot */}
            <g transform="translate(130, 110) rotate(90)">
              <ellipse cx="10" cy="15" rx="8" ry="14" fill="#861F41" />
              <ellipse cx="10" cy="32" rx="6" ry="6" fill="#861F41" />
            </g>
            {/* Print 4 (Orange) - Right Foot */}
            <g transform="translate(175, 150) rotate(90)">
              <ellipse cx="10" cy="15" rx="8" ry="14" fill="#E87722" />
              <ellipse cx="10" cy="32" rx="6" ry="6" fill="#E87722" />
            </g>
            {/* Print 5 (Maroon) - Left Foot */}
            <g transform="translate(220, 110) rotate(90)">
              <ellipse cx="10" cy="15" rx="8" ry="14" fill="#861F41" />
              <ellipse cx="10" cy="32" rx="6" ry="6" fill="#861F41" />
            </g>
            {/* Print 6 (Orange) - Right Foot */}
            <g transform="translate(265, 150) rotate(90)">
              <ellipse cx="10" cy="15" rx="8" ry="14" fill="#E87722" />
              <ellipse cx="10" cy="32" rx="6" ry="6" fill="#E87722" />
            </g>
            {/* Print 7 (Maroon) - Left Foot */}
            <g transform="translate(310, 110) rotate(90)">
              <ellipse cx="10" cy="15" rx="8" ry="14" fill="#861F41" />
              <ellipse cx="10" cy="32" rx="6" ry="6" fill="#861F41" />
            </g>
            {/* Print 8 (Orange) - Right Foot */}
            <g transform="translate(355, 150) rotate(90)">
              <ellipse cx="10" cy="15" rx="8" ry="14" fill="#E87722" />
              <ellipse cx="10" cy="32" rx="6" ry="6" fill="#E87722" />
            </g>
            {/* Print 9 (Maroon) - Left Foot */}
            <g transform="translate(400, 110) rotate(90)">
              <ellipse cx="10" cy="15" rx="8" ry="14" fill="#861F41" />
              <ellipse cx="10" cy="32" rx="6" ry="6" fill="#861F41" />
            </g>
            {/* Print 10 (Orange) - Right Foot */}
            <g transform="translate(445, 150) rotate(90)">
              <ellipse cx="10" cy="15" rx="8" ry="14" fill="#E87722" />
              <ellipse cx="10" cy="32" rx="6" ry="6" fill="#E87722" />
            </g>

            {/* Large Magnifying Glass (Gray) - Centered Vertically and shifted right */}
            <g transform="translate(520, 90) scale(2.8)" stroke="#4B5563" strokeWidth="4" fill="none">
              <circle cx="0" cy="0" r="16" />
              <line x1="0" y1="16" x2="0" y2="40" strokeLinecap="round" />
            </g>
          </svg>
        </div>

        {/* Full Size Image Modal */}
        {activeImage && (
          <div className="fixed inset-0 z-[100] bg-black/80 backdrop-blur-md flex items-center justify-center p-4" onClick={() => setActiveImage(null)}>
            <div className="relative max-w-5xl max-h-[90vh] w-full h-full flex items-center justify-center">
              <Image src={activeImage} alt="Full size data visualization" fill className="object-contain rounded-xl shadow-2xl border border-white/10" unoptimized />
              <button className="absolute top-4 right-4 text-white bg-black/50 hover:bg-black/80 p-2 rounded-full transition-colors flex items-center justify-center">
                <span className="material-symbols-outlined text-2xl">close</span>
              </button>
            </div>
          </div>
        )}
      </section>

      {/* MAPPING PORTALS REWORK SECTION */}
      <section className="py-24 bg-[#0B1A2A] relative overflow-hidden text-white">
        <div className="container mx-auto px-4 md:px-8 xl:px-12 relative z-10 w-full max-w-[1920px]">

          {/* Header Block */}
          <div className="text-center mb-16 lg:mb-24 flex flex-col items-center">
            <h3 className="text-sm md:text-base font-headline font-bold text-slate-300 uppercase tracking-[0.15em] opacity-80 mb-3">
              Healthcare Workforce Mapping Portals
            </h3>
            <h2 className="text-3xl md:text-5xl lg:text-6xl font-headline font-bold tracking-tight mb-6">
              GEOGRAPHICAL INTELLIGENCE SUITE
            </h2>
            <p className="text-lg md:text-xl text-slate-300 font-body max-w-4xl mx-auto">
              Your Data Paired with Our ESL Datasets, Analysis and Visuals Create Invaluable Insights. Two Perspectives, Interactive or High-Quality Maps, to Fit Your Needs.
            </p>
          </div>

          {/* Two-Column Core Layout */}
          <div className="grid lg:grid-cols-2 gap-16 lg:gap-24 relative">

            {/* Visual Connecting Sweep */}
            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-4xl hidden lg:block opacity-30 pointer-events-none text-blue-300">
              <svg viewBox="0 0 100 20" fill="none" stroke="currentColor" className="w-full">
                <path d="M0,10 Q25,0 50,10 T100,10" strokeWidth="0.1" />
                <path d="M0,12 Q25,2 50,12 T100,12" strokeWidth="0.1" />
                <path d="M0,14 Q25,4 50,14 T100,14" strokeWidth="0.1" />
                <path d="M0,16 Q25,6 50,16 T100,16" strokeWidth="0.1" />
              </svg>
            </div>

            {/* Left Column: Interactive Portals */}
            <div className="flex flex-col gap-6 relative z-10">
              <div className="flex items-center gap-4 border-b border-white/10 pb-4 mb-2">
                <span className="material-symbols-outlined text-4xl text-[#E87722]">explore</span>
                <h3 className="text-2xl md:text-3xl font-headline font-bold uppercase tracking-wide">Interactive Portals</h3>
              </div>
              <p className="text-slate-300 font-body text-base lg:text-lg leading-relaxed">
                Harness the nation’s most complete healthcare workforce database through a customized interactive lens. Utilize nine specialized mapping tools—from aggregate summaries to travel-distance routing—to interact with supply-demand gaps and workforce shortages with unparalleled geographic precision.
              </p>

              <div className="flex flex-col xl:flex-row gap-6 mt-4">
                {/* Feature Lockups */}
                <div className="flex flex-col gap-3 w-full xl:w-5/12 shrink-0 justify-center">
                  <div className="bg-gradient-to-r from-white/15 to-white/5 border-l-4 border-[#E87722] p-4 rounded-r-xl border-y border-r border-white/10 w-full hover:bg-white/20 transition-colors shadow-lg">
                    <h4 className="font-headline font-bold text-base mb-1 text-white/90">Shortage Visualization</h4>
                    <p className="text-xs text-slate-300 leading-tight">Interact with workforce shortages and supply-demand in real-time.</p>
                  </div>
                  <div className="bg-gradient-to-r from-white/15 to-white/5 border-l-4 border-[#E87722] p-4 rounded-r-xl border-y border-r border-white/10 w-full hover:bg-white/20 transition-colors shadow-lg">
                    <h4 className="font-headline font-bold text-base mb-1 text-white/90">Policy Development</h4>
                    <p className="text-xs text-slate-400 leading-tight">e.g., historical shortages and policy development.</p>
                  </div>
                </div>
                {/* Visual Image Lockup */}
                <div className="w-full xl:w-7/12 rounded-2xl shadow-2xl flex items-center justify-center">
                  <Image 
                    src="/ncahd_portal.jpg" 
                    alt="Interactive Portals Interface" 
                    width={800} 
                    height={600} 
                    className="w-full h-auto rounded-2xl" 
                  />
                </div>
              </div>

              <div className="mt-4 flex flex-wrap gap-4">
                <Link href="https://portals.ncahd.org/" target="_blank" rel="noopener noreferrer" className="inline-block bg-[#E87722] hover:bg-[#d46a1e] text-white font-headline font-bold py-4 px-12 rounded-lg transition-all text-lg shadow-lg hover:shadow-xl hover:-translate-y-1">
                  Launch Demo
                </Link>
                <Link href="/solutions/custom-mapping-portals" className="inline-block bg-white/10 hover:bg-white/20 border border-white/20 text-white font-headline font-bold py-4 px-12 rounded-lg transition-all text-lg shadow-lg hover:-translate-y-1">
                  Learn More
                </Link>
              </div>
            </div>

            {/* Right Column: Static Map Data */}
            <div className="flex flex-col gap-6 relative z-10 lg:pl-4">
              <div className="flex items-center gap-4 lg:flex-row-reverse border-b border-white/10 pb-4 mb-2 lg:text-right">
                <span className="material-symbols-outlined text-4xl text-[#E87722]">location_on</span>
                <h3 className="text-2xl md:text-3xl font-headline font-bold uppercase tracking-wide">Maps</h3>
              </div>
              <p className="text-slate-300 font-body text-base lg:text-lg leading-relaxed lg:text-right">
                Tell the story of your impact with spatial analysis and high-quality maps. We move beyond simple spreadsheets to visualize the geographic relationships between your workforce and the communities they serve, helping you identify and address healthcare shortages.
              </p>

              <div className="flex flex-col xl:flex-row gap-6 mt-4 w-full">
                {/* Visual Image Lockup */}
                <div className="w-full xl:w-7/12 rounded-2xl shadow-2xl order-2 xl:order-1 flex items-center justify-center">
                  <Image 
                    src="/trend-analysis-1_lg.jpg" 
                    alt="Static Map Asset Data" 
                    width={800} 
                    height={600} 
                    className="w-full h-auto rounded-2xl" 
                  />
                </div>
                {/* Feature Lockups */}
                <div className="flex flex-col gap-3 w-full xl:w-5/12 shrink-0 order-1 xl:order-2 justify-center text-left">
                  <div className="bg-gradient-to-r from-white/15 to-white/5 border-l-4 border-[#E87722] p-4 rounded-r-xl border-y border-r border-white/10 w-full hover:bg-white/20 transition-colors shadow-lg">
                    <h4 className="font-headline font-bold text-base mb-1 text-white/90">Custom Snapshots</h4>
                    <p className="text-xs text-slate-300 leading-tight">e.g., specific regional deep dives.</p>
                  </div>
                  <div className="bg-gradient-to-r from-white/15 to-white/5 border-l-4 border-[#E87722] p-4 rounded-r-xl border-y border-r border-white/10 w-full hover:bg-white/20 transition-colors shadow-lg">
                    <h4 className="font-headline font-bold text-base mb-1 text-white/90">Trend Analysis</h4>
                    <p className="text-xs text-slate-300 leading-tight">e.g., historical data over time.</p>
                  </div>
                </div>
              </div>

              <div className="mt-4 flex lg:justify-end">
                <Link href="/solutions/spatial-analysis" className="inline-block bg-[#861F41] hover:bg-[#6c1733] text-white font-headline font-bold py-4 px-12 rounded-lg transition-all text-lg shadow-lg hover:shadow-xl hover:-translate-y-1">
                  Discover More
                </Link>
              </div>
            </div>

          </div>
        </div>
      </section>

      {/* Advanced Workforce Tools Section */}
      <section className="py-24 bg-surface-container-low relative overflow-hidden">
        <div className="container mx-auto px-4 sm:px-8 relative z-20 mb-16">
          <div className="text-center">
            <h2 className="text-3xl md:text-5xl font-headline font-bold text-primary tracking-tight uppercase">
              Advanced Workforce Tools
            </h2>
          </div>
        </div>

        <div className="w-full max-w-[1280px] mx-auto relative px-4 lg:px-8">

          {/* Gold Dynamic Connecting Line (Desktop) */}
          <div className="hidden lg:block absolute top-[25%] left-0 right-0 h-[25%] lg:top-[30%] lg:h-[22%] z-0 pointer-events-none px-4 lg:px-8">
            <svg
              className="w-full h-full text-[#E87722]"
              viewBox="0 0 100 100"
              preserveAspectRatio="none"
              style={{ overflow: "visible" }}
            >
              <path
                d="M 16.66 -4 C 33.33 -4, 33.33 96, 50 96 C 66.66 96, 66.66 -4, 83.33 -4"
                fill="none"
                stroke="currentColor"
                strokeWidth="1.5"
                strokeDasharray="6 6"
                vectorEffect="non-scaling-stroke"
                className="opacity-40"
              />
              <path
                d="M 16.66 0 C 33.33 0, 33.33 100, 50 100 C 66.66 100, 66.66 0, 83.33 0"
                fill="none"
                stroke="currentColor"
                strokeWidth="2.5"
                strokeDasharray="6 6"
                vectorEffect="non-scaling-stroke"
                className="opacity-70"
              />
              <path
                d="M 16.66 4 C 33.33 4, 33.33 104, 50 104 C 66.66 104, 66.66 4, 83.33 4"
                fill="none"
                stroke="currentColor"
                strokeWidth="1.5"
                strokeDasharray="6 6"
                vectorEffect="non-scaling-stroke"
                className="opacity-40"
              />
              <circle cx="16.66" cy="0" r="4" fill="currentColor" vectorEffect="non-scaling-stroke" className="opacity-90" />
              <circle cx="50" cy="100" r="4" fill="currentColor" vectorEffect="non-scaling-stroke" className="opacity-90" />
              <circle cx="83.33" cy="0" r="4" fill="currentColor" vectorEffect="non-scaling-stroke" className="opacity-90" />
            </svg>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-12 lg:gap-8 relative z-10">

            {/* Tool Node 1: Economic Impact */}
            <div className="flex flex-col items-center">
              <div className="w-full aspect-[4/3] bg-white rounded-[2rem] overflow-hidden shadow-[0_8px_30px_rgba(31,38,135,0.08)] border border-white/60 group transition-all duration-500 hover:-translate-y-2 hover:shadow-[0_12px_40px_rgba(31,38,135,0.12)] relative">
                <Image src="/economic impact tool.jpg" alt="Economic Impact Tool Scale" fill sizes="(max-width: 768px) 100vw, 33vw" className="object-cover group-hover:scale-105 transition-transform duration-700" />
              </div>
              <div className="text-center w-[90%] bg-white/80 backdrop-blur-md p-6 rounded-2xl shadow-lg border border-white relative z-10 -mt-10 transition-all duration-500 hover:-translate-y-1">
                <h3 className="text-lg xl:text-xl font-headline font-bold text-primary uppercase leading-tight mb-2 tracking-tight">Economic Impact Tool</h3>
                <p className="text-on-surface-variant font-body text-[14px] mb-4 leading-snug">Measure the real economic value and ROI of your healthcare workforce.</p>
                <Link href="/eit" className="text-[#861F41] font-headline font-bold hover:text-[#E87722] transition-colors flex items-center justify-center gap-1 group">
                  Access Tool <span className="material-symbols-outlined text-[18px] transition-transform group-hover:translate-x-1">arrow_forward</span>
                </Link>
              </div>
            </div>

            {/* Tool Node 2: Specialty Supply (Tablet) */}
            <div className="flex flex-col items-center lg:mt-32">
              <div className="w-[110%] md:w-full aspect-[4/3] bg-white rounded-[2rem] overflow-hidden shadow-[0_8px_30px_rgba(31,38,135,0.08)] border border-white/60 group transition-all duration-500 hover:-translate-y-2 hover:shadow-[0_12px_40px_rgba(31,38,135,0.12)] relative">
                <Image src="/spsdt_tool.jpg" alt="Predictive Analytics Tablet" fill sizes="(max-width: 768px) 100vw, 33vw" className="object-contain bg-white group-hover:scale-105 transition-transform duration-700" />
              </div>
              <div className="text-center w-[90%] bg-white/80 backdrop-blur-md p-6 rounded-2xl shadow-lg border border-white relative z-10 -mt-10 transition-all duration-500 hover:-translate-y-1">
                <h3 className="text-lg xl:text-xl font-headline font-bold text-primary uppercase leading-tight mb-2 tracking-tight">Specialty Physician Supply <br className="hidden xl:block" /> & Demand Tool</h3>
                <p className="text-on-surface-variant font-body text-[14px] mb-4 leading-snug">Forecast shortages and surpluses with data-driven predictive models.</p>
                <Link href="/spsdt" className="text-[#861F41] font-headline font-bold hover:text-[#E87722] transition-colors flex items-center justify-center gap-1 group">
                  Launch Tool <span className="material-symbols-outlined text-[18px] transition-transform group-hover:translate-x-1">arrow_forward</span>
                </Link>
              </div>
            </div>

            {/* Tool Node 3: Mapping Portal (Map) */}
            <div className="flex flex-col items-center">
              <div className="w-full aspect-[4/3] bg-white rounded-[2rem] overflow-hidden shadow-[0_8px_30px_rgba(31,38,135,0.08)] border border-white/60 group transition-all duration-500 hover:-translate-y-2 hover:shadow-[0_12px_40px_rgba(31,38,135,0.12)] relative">
                <Image src="/advanced_tools_map.jpg" alt="Digital United States Map" fill sizes="(max-width: 768px) 100vw, 33vw" className="object-cover group-hover:scale-105 transition-transform duration-700" />
              </div>
              <div className="text-center w-[90%] bg-white/80 backdrop-blur-md p-6 rounded-2xl shadow-lg border border-white relative z-10 -mt-10 transition-all duration-500 hover:-translate-y-1">
                <h3 className="text-lg xl:text-xl font-headline font-bold text-primary uppercase leading-tight mb-2 tracking-tight">Interactive Mapping Portal</h3>
                <p className="text-on-surface-variant font-body text-[14px] mb-4 leading-snug">Visualize spatial analysis with granular detail and impact with location-based data.</p>
                <Link href="https://portals.ncahd.org/" target="_blank" rel="noopener noreferrer" className="text-[#861F41] font-headline font-bold hover:text-[#E87722] transition-colors flex items-center justify-center gap-1 group">
                  Launch Demo <span className="material-symbols-outlined text-[18px] transition-transform group-hover:translate-x-1">arrow_forward</span>
                </Link>
              </div>
            </div>

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