"use client";
import Link from 'next/link';
import Image from 'next/image';
import { useState } from 'react';
import VideoModal from '@/components/VideoModal';

export default function MappingPortalsContent() {
  const [videoModalOpen, setVideoModalOpen] = useState(false);
  const [currentVideoId, setCurrentVideoId] = useState<string | null>(null);

  const openVideo = (id: string) => {
    setCurrentVideoId(id);
    setVideoModalOpen(true);
  };

  return (
    <div className="flex flex-col w-full min-h-screen bg-surface">
      <VideoModal isOpen={videoModalOpen} onClose={() => setVideoModalOpen(false)} videoId={currentVideoId} />
      {/* Hero Section */}
      <section className="relative min-h-[550px] flex items-center overflow-hidden bg-primary py-24">
        <div className="absolute inset-0 z-0">
          <Image 
            className="w-full h-full object-cover opacity-60 mix-blend-luminosity" 
            alt="Interactive Dashboard Interface Lockup" 
            src="/portal_page_hero_background.jpg"
            fill
            priority
          />
          <div className="absolute inset-0 map-gradient-overlay border-b border-[#E87722]/30"></div>
        </div>
        <div className="relative z-10 container mx-auto px-8 md:grid md:grid-cols-12 gap-8">
          <div className="col-span-12 lg:col-span-10 flex flex-col items-start gap-6">
            <div className="inline-flex items-center gap-2 bg-[#861F41]/30 backdrop-blur-md px-4 py-1.5 rounded-full text-white font-headline font-bold text-xs uppercase tracking-widest border border-[#861F41]/50 shadow-sm">
              <span className="material-symbols-outlined text-[16px]">visibility</span> Custom Mapping Portals
            </div>
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-headline font-bold text-white leading-[1.1] tracking-tight max-w-2xl">
              Visualize the Future of Your <span className="text-[#E87722]">Healthcare Workforce.</span>
            </h1>
            <p className="text-lg md:text-xl text-slate-300 max-w-2xl 2xl:max-w-3xl font-body leading-relaxed border-l-4 border-[#861F41] pl-4">
              Turn Complex Data into Actionable Strategy with Custom Interactive Mapping Portals.
            </p>
            <div className="mt-4 flex gap-4">
               <button onClick={() => openVideo('UZ4vj1Xrdf8')} className="bg-white text-primary px-6 py-3 rounded-lg font-headline font-bold text-base hover:bg-[#E87722] hover:text-white transition-all flex items-center gap-2 shadow-xl hover:shadow-2xl hover:-translate-y-1">
                  <span className="material-symbols-outlined">play_circle</span> Watch How It Works
               </button>
            </div>
          </div>
        </div>
      </section>

            {/* Challenge / Solution */}
      <section className="pt-24 pb-12 bg-surface-container-low relative overflow-hidden">
        <div className="container mx-auto px-8 max-w-6xl">
          <div className="grid md:grid-cols-2 gap-16 items-start">
            <div className="bg-white p-8 md:p-10 rounded-2xl shadow-sm border-t-4 border-[#861F41] flex flex-col gap-4">
              <div className="flex items-center gap-3 mb-2">
                <span className="material-symbols-outlined text-[#861F41] text-3xl">warning</span>
                <h2 className="text-2xl font-headline font-bold text-primary">The Challenge</h2>
              </div>
              <p className="text-on-surface-variant font-body leading-relaxed">
                In a rapidly shifting healthcare landscape, raw data isn't enough. You need to see the gaps, the trends, and the solutions in real-time.
              </p>
            </div>
            
            <div className="bg-white p-8 md:p-10 rounded-2xl shadow-[0_12px_40px_rgba(31,38,135,0.08)] border-t-4 border-[#E87722] flex flex-col gap-4 scale-100 hover:scale-[1.02] transition-transform">
              <div className="flex items-center gap-3 mb-2">
                <span className="material-symbols-outlined text-[#E87722] text-3xl">verified</span>
                <h2 className="text-2xl font-headline font-bold text-primary">The Solution</h2>
              </div>
              <p className="text-on-surface-variant font-body leading-relaxed">
                NCAHD Mapping Portals are high-performance, cost-effective GIS solutions that pair your proprietary data with our industry-leading workforce datasets. Empower your stakeholders to move from "searching for answers" to "visualizing solutions."
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Why Leaders Choose NCAHD */}
      <section className="pt-12 pb-24 bg-surface-container-low relative">
         <div className="container mx-auto px-8 max-w-6xl">
            <h2 className="text-3xl md:text-4xl font-headline font-bold text-primary text-center tracking-tight mb-16">
              Why Leaders Choose NCAHD Portals
            </h2>
            <div className="grid md:grid-cols-4 gap-8">
               {[
                 { icon: 'monitoring', title: 'Visual Impact', desc: 'Start presenting stories with your data using interactive mapping.' },
                 { icon: 'explore', title: 'Geographic Intelligence', desc: 'Uncover the hidden connections between provider locations and community needs.' },
                 { icon: 'tune', title: 'Fully Customizable', desc: 'We blend our 15+ provider-level datasets with your unique branding and data.' },
                 { icon: 'analytics', title: 'Decision-Ready Analysis', desc: 'Move beyond static maps with built-in analytical tools designed for healthcare experts.' },
               ].map((feat, i) => (
                  <div key={i} className="bg-white p-6 rounded-2xl shadow-sm border border-outline-variant/20 hover:-translate-y-1 transition-transform">
                      <span className="material-symbols-outlined text-[#E87722] text-4xl mb-4">{feat.icon}</span>
                      <h3 className="font-headline font-bold text-lg text-primary mb-2">{feat.title}</h3>
                      <p className="font-body text-sm text-on-surface-variant leading-relaxed">{feat.desc}</p>
                  </div>
               ))}
            </div>
         </div>
      </section>

      {/* Tools for Precision Planning */}
      <section className="py-24 bg-[#0B1A2A] text-white">
         <div className="container mx-auto px-8 max-w-6xl">
             <div className="text-center mb-16">
                 <h2 className="text-3xl md:text-4xl font-headline font-bold mb-4">Powerful Tools for Precision Planning</h2>
                 <p className="text-slate-300 font-body text-lg">We don’t just show you a map; we give you a command center.</p>
             </div>

             <div className="grid lg:grid-cols-2 gap-12">
                 {[
                   { title: '1. Aggregate Summary Tool', subtitle: 'Instant Workforce Overviews', desc: 'Visualize the "big picture" instantly. Toggle specific provider types and watch the data re-aggregate as you scroll over counties.', benefit: 'Identify regional surpluses or shortages in seconds.', videoId: 'YSsIfsFQQz4' },
                   { title: '2. Identify Tool', subtitle: 'Granular Facility Insights', desc: 'Access the "DNA" of your community. Click any facility, education site, or program to reveal deep-layer data.', benefit: 'Export raw data for your own internal research for free.', videoId: 'GVwY_75mhZU' },
                   { title: '3. Service Area Tool', subtitle: 'Realistic Access Modeling', desc: 'Map the actual patient experience. Analyze areas based on real-world travel time and distance, not just "as the crow flies."', benefit: 'Accurately measure healthcare deserts and patient commute burdens.', videoId: 'SoY-DGLvWio' },
                   { title: '4. Routing Tool', subtitle: 'Optimize Patient Journeys', desc: 'Calculate the fastest route between a patient and the nearest specialized care. Compare multiple routes instantly.', benefit: 'Streamline referral networks and emergency response planning.', videoId: 'Fga1l_6uLG0' },
                 ].map((tool, i) => (
                    <div key={i} className="bg-white/5 backdrop-blur-md p-8 rounded-2xl border border-white/10 flex flex-col gap-4">
                       <div>
                          <h3 className="font-headline font-bold text-xl text-[#E87722]">{tool.title}</h3>
                          <h4 className="font-headline font-bold text-lg text-white mb-2">{tool.subtitle}</h4>
                       </div>
                       <p className="font-body text-slate-300 text-sm leading-relaxed">{tool.desc}</p>
                       <div className="bg-[#861F41]/20 border-l-4 border-[#861F41] p-3 rounded-r mt-auto mb-2">
                          <p className="font-body text-sm font-bold text-white">Benefit: <span className="font-normal text-slate-200">{tool.benefit}</span></p>
                       </div>
                       <button onClick={() => openVideo(tool.videoId)} className="text-[#E87722] hover:text-white flex items-center gap-2 font-headline font-bold text-sm transition-colors self-start mt-2">
                         <span className="material-symbols-outlined text-[20px]">smart_display</span> Watch Demo
                       </button>
                    </div>
                 ))}
             </div>
         </div>
      </section>

      {/* What's Included / Pricing */}
      <section className="py-24 bg-surface text-center">
         <div className="container mx-auto px-8 max-w-5xl">
            <h2 className="text-3xl font-headline font-bold text-primary mb-12">What’s Included in Your Portal?</h2>
            
            <div className="grid md:grid-cols-3 gap-6 mb-16">
               <div className="border border-outline-variant/30 p-6 rounded-xl bg-white shadow-sm">
                 <h4 className="font-headline font-bold text-xl text-[#861F41] mb-2">15 Provider Datasets</h4>
                 <p className="text-on-surface-variant text-sm">Workforce, Demographics, Health Indicators pre-loaded.</p>
               </div>
               <div className="border border-outline-variant/30 p-6 rounded-xl bg-white shadow-sm">
                 <h4 className="font-headline font-bold text-xl text-[#861F41] mb-2">9 Interactive Tools</h4>
                 <p className="text-on-surface-variant text-sm">Custom-built mapping tools for healthcare analysis.</p>
               </div>
               <div className="border border-outline-variant/30 p-6 rounded-xl bg-white shadow-sm">
                 <h4 className="font-headline font-bold text-xl text-[#861F41] mb-2">Custom Branding</h4>
                 <p className="text-on-surface-variant text-sm">Fully matched to your organization’s identity.</p>
               </div>
            </div>

            <div className="grid md:grid-cols-[2fr_1fr] gap-8 text-left">
               <div className="bg-primary text-white p-8 rounded-3xl shadow-xl flex flex-col justify-center">
                  <h3 className="font-headline font-bold text-2xl mb-6">Investment & Timeline</h3>
                  <ul className="space-y-4 font-body">
                    <li className="flex justify-between items-center gap-8 border-b border-white/20 pb-4">
                       <span className="font-bold">Development:</span>
                       <span className="text-right">$20,000+ <span className="block text-xs font-normal opacity-75">Launch-ready in 60-90 days</span></span>
                    </li>
                    <li className="flex justify-between items-center gap-8">
                       <span className="font-bold">Annual Maintenance:</span>
                       <span className="text-right">$4,000 <span className="block text-xs font-normal opacity-75">Data refreshes & software updates</span></span>
                    </li>
                  </ul>
               </div>
               
               <div className="bg-surface-container p-8 rounded-3xl shadow-sm border border-outline-variant/30 flex flex-col justify-center">
                  <h3 className="font-headline font-bold text-lg text-primary mb-4">Explore Active Portals</h3>
                  <ul className="space-y-3 font-body text-sm text-[#861F41]">
                     <li><Link href="#active-portals" className="flex gap-2 items-start group"><span className="material-symbols-outlined text-[16px] mt-0.5">link</span> <span className="group-hover:underline">West Virginia Health Data Portal</span></Link></li>

                     <li><Link href="#active-portals" className="flex gap-2 items-start group"><span className="material-symbols-outlined text-[16px] mt-0.5">link</span> <span className="group-hover:underline">Specialty Supply & Demand Tool</span></Link></li>
                     <li><Link href="#active-portals" className="flex gap-2 items-start group"><span className="material-symbols-outlined text-[16px] mt-0.5">link</span> <span className="group-hover:underline">NCAHD National Portal</span></Link></li>
                  </ul>
               </div>
            </div>
         </div>
      </section>

      {/* Testimonial */}
      <section className="py-24 bg-surface-container-low text-center">
        <div className="container mx-auto px-8 max-w-4xl pt-8">
          <p className="text-xl md:text-2xl font-headline font-bold text-primary leading-relaxed italic mb-8">
            "Since opening the West Virginia Health Data Portal, our membership has increased by over 50%, boosting our financial stability. Stakeholders use this data for legislative bills, grant writing, and research. NCAHD took our organization to the next level."
          </p>
          <div className="flex flex-col items-center gap-1">
            <span className="font-headline font-bold text-lg text-primary">Debrin Jenkins</span>
            <span className="text-on-surface-variant font-body text-sm uppercase tracking-wider">Former Executive Director, West Virginia Rural Health Association</span>
          </div>
        </div>
      </section>

      {/* Explore Active Portals */}
      <section id="active-portals" className="py-24 bg-white relative">
         <div className="container mx-auto px-8 max-w-6xl">
            <div className="text-center mb-16">
               <h2 className="text-3xl font-headline font-bold text-primary mb-4">Explore Our Active Portals</h2>
               <p className="text-lg text-on-surface-variant">Join the institutions already leading the way in data-driven healthcare.</p>
            </div>
            <div className="grid md:grid-cols-2 gap-8">
               {[
                 { name: "West Virginia Health Data Portal (WVHDP)", desc: "Advancing rural health access through supply and demand transparency." },

                 { name: "Specialty Supply & Demand Tool (SPSDT)", desc: "A unique model utilizing patient utilization patterns for 13 different specialties." },
                 { name: "NCAHD National Portal", desc: "Our flagship tool for researchers and consultants needing national healthcare data." }
               ].map((portal, idx) => (
                  <div key={idx} className="border border-outline-variant/30 p-6 rounded-2xl shadow-sm hover:shadow-md transition-shadow flex flex-col justify-between">
                     <div>
                        <h4 className="font-headline font-bold text-lg text-primary mb-2">{portal.name}</h4>
                        <p className="text-sm text-on-surface-variant leading-relaxed mb-6">{portal.desc}</p>
                     </div>
                     <button className="text-[#861F41] font-headline font-bold text-sm hover:underline self-start">Visit Portal &rarr;</button>
                  </div>
               ))}
            </div>
         </div>
      </section>

      {/* CTA Section */}
      <section className="py-24 bg-[#E87722] text-white text-center">
        <div className="container mx-auto px-8 max-w-4xl">
          <h2 className="text-4xl md:text-5xl font-headline font-bold mb-6 tracking-tight">Ready to Visualize Your Impact?</h2>
          <p className="text-xl font-body mb-10 max-w-2xl mx-auto opacity-90">
            Don’t let your data sit idle. Schedule a demonstration today and see how an interactive portal can transform your organization’s decision-making.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link href="/contact" className="bg-primary text-white px-8 py-4 rounded-lg font-headline font-bold text-lg hover:bg-[#002d74] transition-all shadow-xl">
              Book a Free Consultation
            </Link>
            <Link href="https://portals.ncahd.org/" className="bg-white/10 text-white border border-white/30 px-8 py-4 rounded-lg font-headline font-bold text-lg hover:bg-white/20 transition-all">
              View Interactive Demo
            </Link>
          </div>
        </div>
      </section>

    </div>
  );
}