import React from 'react';
import { Award, BookOpen, Dna, FileText, Globe, ArrowRight, CheckCircle2 } from 'lucide-react';
import { PROFILE_SUMMARY } from '../data/cvData';

interface HeroProps {
  onOpenCVModal: () => void;
}

export default function Hero({ onOpenCVModal }: HeroProps) {
  return (
    <section id="overview" className="relative pt-8 pb-12 lg:pt-14 lg:pb-20 overflow-hidden">
      {/* Background ambient lighting */}
      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-7xl h-96 bg-gradient-to-b from-emerald-500/5 via-teal-500/5 to-transparent pointer-events-none" />

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        
        {/* Split-Screen Hero Layout */}
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 items-stretch">
          
          {/* Left Column: Typographic Hierarchy */}
          <div className="lg:col-span-7 flex flex-col justify-center">
            
            {/* Unboxed Metadata Kicker */}
            <div className="flex items-center flex-wrap gap-2 text-xs font-semibold text-emerald-700 dark:text-emerald-400 mb-4 tracking-wide uppercase font-mono">
              <span className="flex items-center gap-1.5 bg-emerald-100/60 dark:bg-emerald-950/60 px-2.5 py-1 rounded">
                <Award className="w-3.5 h-3.5 text-emerald-600 dark:text-emerald-400" />
                Stanford Top 2% Scientist (2020 – 2025)
              </span>
              <span aria-hidden="true" className="text-slate-300 dark:text-slate-700">·</span>
              <span className="text-slate-600 dark:text-slate-400">Former Pro-Vice Chancellor</span>
            </div>

            {/* Display Headline */}
            <h1 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight text-slate-900 dark:text-white leading-[1.15] mb-5 text-wrap">
              Pioneering Clinical Microbiology, Cyanobacteria & Sustainable Biotechnology
            </h1>

            {/* Lead Narrative Paragraph */}
            <p className="text-base sm:text-lg text-slate-600 dark:text-slate-300 leading-relaxed mb-6 font-normal">
              Senior Academic & Research Director with 35+ years of research excellence at Bharathidasan University and Crescent Institute of Science & Technology. Internationally recognized for groundbreaking discoveries in marine & freshwater cyanobacteria taxonomy, clinical anti-biofilm therapeutics against ESBL/MRSA pathogens, microbial drug bioconversions (US Patent), and industrial microalgal bioenergy.
            </p>

            {/* Credentials summary line with typographic separators */}
            <div className="flex flex-wrap items-center gap-x-3 gap-y-1.5 text-xs text-slate-500 dark:text-slate-400 mb-8 font-medium">
              <span>FLS (London)</span>
              <span aria-hidden="true" className="text-slate-300 dark:text-slate-700">·</span>
              <span>FRSB (London)</span>
              <span aria-hidden="true" className="text-slate-300 dark:text-slate-700">·</span>
              <span>FNABS</span>
              <span aria-hidden="true" className="text-slate-300 dark:text-slate-700">·</span>
              <span>FMSI</span>
              <span aria-hidden="true" className="text-slate-300 dark:text-slate-700">·</span>
              <span>FMBSI</span>
              <span aria-hidden="true" className="text-slate-300 dark:text-slate-700">·</span>
              <span className="text-emerald-700 dark:text-emerald-400 font-semibold">Founder: NRMC-F & NFMC</span>
            </div>

            {/* Primary Action Buttons */}
            <div className="flex flex-wrap items-center gap-4">
              <a
                href="#expertise"
                className="inline-flex items-center gap-2 px-5 py-3 rounded-lg bg-slate-900 text-white dark:bg-emerald-500 dark:text-slate-950 dark:hover:bg-emerald-400 hover:bg-slate-800 font-semibold text-sm transition-all shadow-md hover:shadow-lg"
              >
                <span>Explore Research & Clinical Expertise</span>
                <ArrowRight className="w-4 h-4" />
              </a>

              <button
                onClick={onOpenCVModal}
                className="inline-flex items-center gap-2 px-5 py-3 rounded-lg bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-800 text-slate-800 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 font-medium text-sm transition-colors"
              >
                <FileText className="w-4 h-4 text-emerald-600 dark:text-emerald-400" />
                <span>View Full CV & Biography</span>
              </button>
            </div>

          </div>

          {/* Right Column: High-Fidelity Scientific Lab Visual Container */}
          <div className="lg:col-span-5 flex flex-col justify-center">
            <div className="relative rounded-2xl overflow-hidden border border-slate-200/80 dark:border-slate-800/80 bg-slate-100 dark:bg-slate-900 shadow-xl group">
              <img
                src="/src/assets/images/hero_microbiology_lab_1794337772364.jpg"
                alt="Microbiology Research Laboratory - Cyanobacteria & Biofuels"
                className="w-full h-80 sm:h-96 lg:h-[420px] object-cover transition-transform duration-500 group-hover:scale-105"
                referrerPolicy="no-referrer"
              />
              
              {/* Measured contrast scrim */}
              <div className="absolute inset-0 bg-gradient-to-t from-slate-950/90 via-slate-950/40 to-transparent flex flex-col justify-end p-6 text-white">
                <div className="flex items-center justify-between mb-2">
                  <span className="text-xs font-mono font-semibold uppercase tracking-wider text-emerald-400 bg-slate-900/80 px-2.5 py-1 rounded border border-emerald-500/30">
                    National Repository Director
                  </span>
                  <span className="text-xs text-slate-300 font-mono">DBT Govt. of India</span>
                </div>
                <h3 className="text-lg font-bold text-white mb-1">
                  NRMC-F & NFMC Infrastructure
                </h3>
                <p className="text-xs text-slate-200 leading-normal font-normal">
                  National Repository for Freshwater Microalgae & Cyanobacteria harboring over 687 molecularly characterized reference strains.
                </p>
              </div>
            </div>
          </div>

        </div>

        {/* Full-Width Metric KPI Band below Hero Split */}
        <div className="mt-12 pt-8 border-t border-slate-200/80 dark:border-slate-800/80">
          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-6">
            
            <div className="p-4 rounded-xl bg-white dark:bg-slate-900/80 border border-slate-200/60 dark:border-slate-800/60 shadow-sm">
              <div className="text-2xl sm:text-3xl font-extrabold font-mono text-slate-900 dark:text-emerald-400 tracking-tight">
                475+
              </div>
              <div className="text-xs font-medium text-slate-600 dark:text-slate-400 mt-1">
                Research Publications
              </div>
              <div className="text-[11px] text-slate-400 dark:text-slate-500 mt-0.5">
                4 Nature Group Papers
              </div>
            </div>

            <div className="p-4 rounded-xl bg-white dark:bg-slate-900/80 border border-slate-200/60 dark:border-slate-800/60 shadow-sm">
              <div className="text-2xl sm:text-3xl font-extrabold font-mono text-slate-900 dark:text-emerald-400 tracking-tight">
                15,451+
              </div>
              <div className="text-xs font-medium text-slate-600 dark:text-slate-400 mt-1">
                Citations (h-index: 60)
              </div>
              <div className="text-[11px] text-slate-400 dark:text-slate-500 mt-0.5">
                i10-index: 216
              </div>
            </div>

            <div className="p-4 rounded-xl bg-white dark:bg-slate-900/80 border border-slate-200/60 dark:border-slate-800/60 shadow-sm">
              <div className="text-2xl sm:text-3xl font-extrabold font-mono text-slate-900 dark:text-emerald-400 tracking-tight">
                ₹26.18 Cr
              </div>
              <div className="text-xs font-medium text-slate-600 dark:text-slate-400 mt-1">
                Research & Grants
              </div>
              <div className="text-[11px] text-slate-400 dark:text-slate-500 mt-0.5">
                DBT, DST, UGC, MoES
              </div>
            </div>

            <div className="p-4 rounded-xl bg-white dark:bg-slate-900/80 border border-slate-200/60 dark:border-slate-800/60 shadow-sm">
              <div className="text-2xl sm:text-3xl font-extrabold font-mono text-slate-900 dark:text-emerald-400 tracking-tight">
                687
              </div>
              <div className="text-xs font-medium text-slate-600 dark:text-slate-400 mt-1">
                GenBank Deposits
              </div>
              <div className="text-[11px] text-slate-400 dark:text-slate-500 mt-0.5">
                10 Whole Genomes
              </div>
            </div>

            <div className="p-4 rounded-xl bg-white dark:bg-slate-900/80 border border-slate-200/60 dark:border-slate-800/60 shadow-sm">
              <div className="text-2xl sm:text-3xl font-extrabold font-mono text-slate-900 dark:text-emerald-400 tracking-tight">
                6
              </div>
              <div className="text-xs font-medium text-slate-600 dark:text-slate-400 mt-1">
                Patents (US & IN)
              </div>
              <div className="text-[11px] text-slate-400 dark:text-slate-500 mt-0.5">
                1 US Patent Granted
              </div>
            </div>

            <div className="p-4 rounded-xl bg-white dark:bg-slate-900/80 border border-slate-200/60 dark:border-slate-800/60 shadow-sm">
              <div className="text-2xl sm:text-3xl font-extrabold font-mono text-slate-900 dark:text-emerald-400 tracking-tight">
                40
              </div>
              <div className="text-xs font-medium text-slate-600 dark:text-slate-400 mt-1">
                Ph.D. Scholars Guided
              </div>
              <div className="text-[11px] text-slate-400 dark:text-slate-500 mt-0.5">
                15 Post-Docs Guided
              </div>
            </div>

          </div>
        </div>

      </div>
    </section>
  );
}