import React from 'react';
import { PageId } from './Navbar';
import { PROFILE_SUMMARY, CLINICAL_RESEARCH_PILLARS, PATENTS } from '../data/cvData';
import { Award, ArrowRight, BookOpen, Dna, ShieldCheck, Globe, Mail, Microscope, CheckCircle2, ChevronRight, GraduationCap, Building2 } from 'lucide-react';

interface HomePageProps {
  setActivePage: (page: PageId) => void;
}

export default function HomePage({ setActivePage }: HomePageProps) {
  return (
    <div className="space-y-12 sm:space-y-16 pb-16 w-full overflow-x-hidden">
      
      {/* 1. ULTRA-WIDE HERO BANNER WITH DOCTOR'S REAL PHOTO & BACKDROP */}
      <section className="relative w-full min-h-[540px] sm:min-h-[580px] lg:min-h-[640px] flex items-center justify-center overflow-hidden bg-slate-950 text-white">
        
        {/* Background Wide Lab Image with Scrim */}
        <img
          src="/src/assets/images/hero_wide_banner_1794338327871.jpg"
          alt="Microbiology Research Photobioreactor Laboratory"
          className="absolute inset-0 w-full h-full object-cover object-center opacity-35 scale-105 pointer-events-none"
          referrerPolicy="no-referrer"
        />

        {/* Multi-layered Gradated Scrim Overlay */}
        <div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/80 to-slate-950/60" />
        <div className="absolute inset-0 bg-gradient-to-r from-slate-950/95 via-slate-950/75 to-transparent" />

        {/* Hero Content Container */}
        <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10 sm:py-14 lg:py-16 w-full">
          
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-10 items-center">
            
            {/* Left Column: Typographic Hierarchy & Actions */}
            <div className="lg:col-span-7 space-y-4 sm:space-y-5">
              
              {/* Stanford Top 2% Badge */}
              <div className="inline-flex items-center gap-2 px-3 py-1.5 sm:px-3.5 sm:py-1.5 rounded-lg bg-emerald-950/90 border border-emerald-500/40 text-emerald-400 text-[11px] sm:text-xs font-mono font-semibold uppercase tracking-wider backdrop-blur-md max-w-full">
                <Award className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-amber-400 shrink-0" />
                <span className="truncate">Stanford Top 2% Scientist Worldwide (2020 – 2025)</span>
              </div>

              {/* Main Display Headline */}
              <h1 className="text-2xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight text-white leading-[1.15] sm:leading-[1.14] font-display">
                Pioneering Clinical Microbiology, Cyanobacteria & Sustainable Biotechnology
              </h1>

              {/* Narrative Subtitle */}
              <p className="text-xs sm:text-base lg:text-lg text-slate-300 font-normal leading-relaxed max-w-2xl">
                Former Pro-Vice Chancellor (Crescent Institute) · Formerly Head & Professor of Microbiology and Dean of Science, Engineering & Technology (Bharathidasan University) · Founder & Director of NRMC-F & NFMC National Facilities.
              </p>

              {/* Fellowships Badges */}
              <div className="flex flex-wrap items-center gap-x-2.5 sm:gap-x-3 gap-y-1 text-[11px] sm:text-xs font-mono text-slate-300 pt-1">
                <span className="text-emerald-400 font-bold">FLS (London)</span>
                <span aria-hidden="true">·</span>
                <span className="text-emerald-400 font-bold">FRSB (London)</span>
                <span aria-hidden="true">·</span>
                <span>FNABS</span>
                <span aria-hidden="true">·</span>
                <span>FMSI</span>
                <span aria-hidden="true">·</span>
                <span>FMBSI</span>
                <span aria-hidden="true">·</span>
                <span className="text-amber-300 font-semibold">35+ Yrs Research</span>
              </div>

              {/* Action Buttons */}
              <div className="flex flex-wrap items-center gap-3 sm:gap-4 pt-3">
                <button
                  onClick={() => setActivePage('expertise')}
                  className="inline-flex items-center justify-center gap-2 px-4 py-2.5 sm:px-5 sm:py-3 rounded-xl bg-emerald-500 text-slate-950 font-bold text-xs sm:text-sm hover:bg-emerald-400 transition-colors shadow-lg shadow-emerald-500/20 shrink-0"
                >
                  <span>Explore Clinical Expertise</span>
                  <ArrowRight className="w-4 h-4" />
                </button>

                <button
                  onClick={() => setActivePage('publications')}
                  className="inline-flex items-center justify-center gap-2 px-4 py-2.5 sm:px-5 sm:py-3 rounded-xl bg-slate-900/90 border border-slate-700 text-white font-semibold text-xs sm:text-sm hover:bg-slate-800 transition-colors backdrop-blur-md shrink-0"
                >
                  <BookOpen className="w-4 h-4 text-emerald-400" />
                  <span>475+ Publications</span>
                </button>

                <button
                  onClick={() => setActivePage('contact')}
                  className="inline-flex items-center justify-center gap-2 px-4 py-2.5 sm:px-5 sm:py-3 rounded-xl bg-white/10 hover:bg-white/20 border border-white/20 text-white font-medium text-xs sm:text-sm transition-colors backdrop-blur-md shrink-0"
                >
                  <Mail className="w-4 h-4 text-emerald-400" />
                  <span>Contact Office</span>
                </button>
              </div>

            </div>

            {/* Right Column: DOCTOR'S REAL PHOTOGRAPH CARD */}
            <div className="lg:col-span-5 flex justify-center">
              <div className="relative max-w-sm w-full rounded-3xl p-1.5 bg-gradient-to-b from-emerald-500/60 via-teal-500/40 to-slate-800/80 shadow-2xl">
                <div className="relative rounded-[22px] overflow-hidden bg-slate-900 border border-slate-800 p-4">
                  
                  {/* Doctor Real Photo Container */}
                  <div className="relative rounded-xl overflow-hidden bg-slate-800 mb-4 h-72 sm:h-88 lg:h-96">
                    <img
                      src={PROFILE_SUMMARY.photoUrl}
                      alt="Prof. Dr. N. Thajuddin, Ph.D., D.Sc."
                      className="w-full h-full object-cover object-top"
                      referrerPolicy="no-referrer"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-slate-950/90 via-transparent to-transparent" />
                    
                    <div className="absolute bottom-3 left-3 right-3 text-white">
                      <div className="text-xs font-mono font-bold text-emerald-400 uppercase tracking-wider">
                        Official Academic Portrait
                      </div>
                      <div className="text-base sm:text-lg font-extrabold font-display leading-tight">
                        Prof. Dr. N. Thajuddin
                      </div>
                      <div className="text-xs text-slate-300">
                        Ph.D., D.Sc. · Former Pro-Vice Chancellor
                      </div>
                    </div>
                  </div>

                  {/* Quick Card Sub-Stats */}
                  <div className="grid grid-cols-2 gap-2 text-center text-xs font-mono">
                    <div className="p-2.5 rounded-lg bg-slate-950/80 border border-slate-800">
                      <div className="text-emerald-400 font-bold text-sm">475+</div>
                      <div className="text-[10px] text-slate-400">Publications</div>
                    </div>
                    <div className="p-2.5 rounded-lg bg-slate-950/80 border border-slate-800">
                      <div className="text-emerald-400 font-bold text-sm">15,451+</div>
                      <div className="text-[10px] text-slate-400">Citations (h-60)</div>
                    </div>
                  </div>

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

          </div>

          {/* Banner Metric Bar */}
          <div className="mt-10 sm:mt-12 pt-6 border-t border-slate-800/80 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 sm:gap-4 font-mono">
            <div className="p-2.5 rounded-xl bg-slate-900/40 border border-slate-800/60">
              <div className="text-lg sm:text-2xl font-extrabold text-emerald-400">475+</div>
              <div className="text-[10px] sm:text-[11px] text-slate-400">Research Papers</div>
            </div>
            <div className="p-2.5 rounded-xl bg-slate-900/40 border border-slate-800/60">
              <div className="text-lg sm:text-2xl font-extrabold text-emerald-400">15,451+</div>
              <div className="text-[10px] sm:text-[11px] text-slate-400">Citations (h-60)</div>
            </div>
            <div className="p-2.5 rounded-xl bg-slate-900/40 border border-slate-800/60">
              <div className="text-lg sm:text-2xl font-extrabold text-emerald-400">₹26.18 Cr</div>
              <div className="text-[10px] sm:text-[11px] text-slate-400">Grants Handled</div>
            </div>
            <div className="p-2.5 rounded-xl bg-slate-900/40 border border-slate-800/60">
              <div className="text-lg sm:text-2xl font-extrabold text-emerald-400">687</div>
              <div className="text-[10px] sm:text-[11px] text-slate-400">GenBank Deposits</div>
            </div>
            <div className="p-2.5 rounded-xl bg-slate-900/40 border border-slate-800/60">
              <div className="text-lg sm:text-2xl font-extrabold text-emerald-400">US Patent</div>
              <div className="text-[10px] sm:text-[11px] text-slate-400">US 11,299,706 B2</div>
            </div>
            <div className="p-2.5 rounded-xl bg-slate-900/40 border border-slate-800/60">
              <div className="text-lg sm:text-2xl font-extrabold text-emerald-400">40 Ph.D.</div>
              <div className="text-[10px] sm:text-[11px] text-slate-400">Scholars Produced</div>
            </div>
          </div>

        </div>
      </section>


      {/* 2. EXECUTIVE BIOGRAPHY WITH REAL DOCTOR PHOTO & EDUCATION DEGREES */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 sm:gap-8 items-stretch">
          
          {/* Doctor Photo & Degrees Sidebar Column */}
          <div className="lg:col-span-5 space-y-6">
            <div className="p-5 sm:p-6 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800/80 shadow-sm">
              <div className="flex items-center gap-3.5 sm:gap-4 mb-4">
                <img
                  src={PROFILE_SUMMARY.photoUrl}
                  alt="Prof. Dr. N. Thajuddin"
                  className="w-16 h-16 sm:w-20 sm:h-20 rounded-2xl object-cover object-top border-2 border-emerald-500 shadow-sm shrink-0"
                  referrerPolicy="no-referrer"
                />
                <div>
                  <h3 className="text-sm sm:text-base font-bold text-slate-900 dark:text-white">
                    Prof. Dr. N. Thajuddin
                  </h3>
                  <div className="text-xs font-mono font-semibold text-emerald-600 dark:text-emerald-400">
                    Ph.D., D.Sc., FLS, FRSB
                  </div>
                  <div className="text-[11px] text-slate-500 dark:text-slate-400 mt-0.5">
                    Former Pro-Vice Chancellor
                  </div>
                </div>
              </div>

              <h4 className="text-xs font-mono font-bold uppercase text-slate-400 mb-3 tracking-wider flex items-center gap-1.5">
                <GraduationCap className="w-4 h-4 text-emerald-600 dark:text-emerald-400 shrink-0" />
                <span>Educational Qualifications</span>
              </h4>

              <div className="space-y-2.5 text-xs text-slate-700 dark:text-slate-300 font-mono">
                {PROFILE_SUMMARY.education.map((edu, idx) => (
                  <div key={idx} className="p-2.5 rounded-lg bg-slate-50 dark:bg-slate-950 border border-slate-200/50 dark:border-slate-800/50">
                    <div className="flex items-center justify-between font-bold text-slate-900 dark:text-white gap-2">
                      <span className="truncate">{edu.degree} - {edu.subject}</span>
                      <span className="text-[10px] text-emerald-600 dark:text-emerald-400 font-semibold shrink-0">{edu.year}</span>
                    </div>
                    <div className="text-[11px] text-slate-500 dark:text-slate-400 mt-0.5 truncate">{edu.institution}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Academic Profile & Career History */}
          <div className="lg:col-span-7 p-6 sm:p-8 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800/80 shadow-sm flex flex-col justify-between">
            <div>
              <div className="text-xs font-mono font-semibold uppercase text-emerald-600 dark:text-emerald-400 mb-2">
                Detailed Profile & Leadership History
              </div>
              <h2 className="text-xl sm:text-2xl lg:text-3xl font-extrabold text-slate-900 dark:text-white mb-4">
                Academic & Administrative Experience
              </h2>
              <p className="text-slate-600 dark:text-slate-300 text-xs sm:text-sm lg:text-base leading-relaxed mb-6 font-normal">
                Dr. N. Thajuddin completed his doctoral research in marine cyanobacteria at Bharathidasan University (1991) and underwent advanced post-doctoral training in 16S rDNA phylogenetic studies at **Rensselaer Polytechnic Institute (RPI), Troy, New York, USA** under the prestigious DBT Overseas Award. With over 24 years of department headship, he established national reference laboratories, evaluated 157 Ph.D. theses across India, and authored 475+ research papers.
              </p>

              <h4 className="text-xs font-mono font-bold uppercase text-slate-400 mb-3 tracking-wider flex items-center gap-1.5">
                <Building2 className="w-4 h-4 text-emerald-600 dark:text-emerald-400 shrink-0" />
                <span>Key Administrative Positions</span>
              </h4>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-xs">
                {PROFILE_SUMMARY.adminHistory.map((admin, idx) => (
                  <div key={idx} className="p-3 rounded-xl bg-slate-50 dark:bg-slate-950 border border-slate-200/60 dark:border-slate-800/60">
                    <div className="font-bold text-slate-900 dark:text-white mb-0.5">{admin.position}</div>
                    <div className="text-[11px] text-slate-500 dark:text-slate-400">{admin.organization}</div>
                    <div className="text-[10px] font-mono text-emerald-700 dark:text-emerald-400 font-semibold mt-1">
                      {admin.period} ({admin.duration})
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div className="mt-8 pt-6 border-t border-slate-100 dark:border-slate-800 flex flex-col sm:flex-row sm:items-center justify-between gap-3 text-xs">
              <span className="text-slate-500 font-mono">Listed in Top 2% Scientists in World</span>
              <button
                onClick={() => setActivePage('expertise')}
                className="font-bold text-emerald-600 dark:text-emerald-400 hover:underline flex items-center gap-1"
              >
                <span>View Clinical Research Pillars</span>
                <ChevronRight className="w-4 h-4" />
              </button>
            </div>
          </div>

        </div>
      </section>


      {/* 3. FEATURED CLINICAL & RESEARCH EXPERTISE TEASER */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex flex-col sm:flex-row sm:items-end justify-between gap-4 mb-8">
          <div>
            <div className="text-xs font-mono font-semibold uppercase text-emerald-600 dark:text-emerald-400 mb-1">
              Core Specializations
            </div>
            <h2 className="text-xl sm:text-2xl lg:text-3xl font-extrabold text-slate-900 dark:text-white tracking-tight">
              Featured Research Pillars
            </h2>
          </div>

          <button
            onClick={() => setActivePage('expertise')}
            className="inline-flex items-center gap-1.5 text-xs font-bold text-emerald-600 dark:text-emerald-400 hover:underline shrink-0"
          >
            <span>View All 6 Clinical & Research Pillars</span>
            <ArrowRight className="w-4 h-4" />
          </button>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {CLINICAL_RESEARCH_PILLARS.slice(0, 3).map((pillar) => (
            <div
              key={pillar.id}
              onClick={() => setActivePage('expertise')}
              className="group p-5 sm:p-6 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800/80 hover:border-emerald-500/50 shadow-sm hover:shadow-md transition-all cursor-pointer flex flex-col justify-between"
            >
              <div>
                <div className="text-xs font-mono text-emerald-600 dark:text-emerald-400 font-bold mb-2">
                  {pillar.keyMetrics}
                </div>
                <h3 className="text-base sm:text-lg font-bold text-slate-900 dark:text-white group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors mb-2">
                  {pillar.title}
                </h3>
                <p className="text-xs text-slate-600 dark:text-slate-300 leading-relaxed line-clamp-3 mb-4 font-normal">
                  {pillar.tagline}
                </p>
              </div>

              <div className="pt-3 border-t border-slate-100 dark:border-slate-800 flex items-center justify-between text-xs text-slate-500 dark:text-slate-400 font-medium">
                <span>Clinical & Biotech Impact</span>
                <span className="text-emerald-600 dark:text-emerald-400 font-semibold group-hover:translate-x-1 transition-transform">Learn more →</span>
              </div>
            </div>
          ))}
        </div>
      </section>


      {/* 4. MULTI-PAGE GATEWAY NAVIGATION CARDS */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="p-6 sm:p-8 rounded-3xl bg-slate-900 text-white dark:bg-slate-950 border border-slate-800 shadow-xl">
          <div className="max-w-2xl mb-6 sm:mb-8">
            <div className="text-xs font-mono text-emerald-400 font-semibold uppercase mb-2">
              Multi-Page Portal Navigation
            </div>
            <h2 className="text-xl sm:text-2xl lg:text-3xl font-extrabold text-white tracking-tight">
              Explore Academic & Research Modules
            </h2>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            
            <button
              onClick={() => setActivePage('expertise')}
              className="p-5 rounded-2xl bg-slate-800/80 hover:bg-slate-800 border border-slate-700/80 text-left transition-all group"
            >
              <Dna className="w-6 h-6 text-emerald-400 mb-3 group-hover:scale-110 transition-transform" />
              <h3 className="text-sm font-bold text-white mb-1">Clinical & Research</h3>
              <p className="text-xs text-slate-400 line-clamp-2">6 Specialized research pillars, methodologies & clinical impacts.</p>
            </button>

            <button
              onClick={() => setActivePage('publications')}
              className="p-5 rounded-2xl bg-slate-800/80 hover:bg-slate-800 border border-slate-700/80 text-left transition-all group"
            >
              <BookOpen className="w-6 h-6 text-emerald-400 mb-3 group-hover:scale-110 transition-transform" />
              <h3 className="text-sm font-bold text-white mb-1">Publications & GenBank</h3>
              <p className="text-xs text-slate-400 line-clamp-2">475+ Publications search, Nature Group papers & 687 GenBank deposits.</p>
            </button>

            <button
              onClick={() => setActivePage('patents-grants')}
              className="p-5 rounded-2xl bg-slate-800/80 hover:bg-slate-800 border border-slate-700/80 text-left transition-all group"
            >
              <ShieldCheck className="w-6 h-6 text-emerald-400 mb-3 group-hover:scale-110 transition-transform" />
              <h3 className="text-sm font-bold text-white mb-1">Patents & Facilities</h3>
              <p className="text-xs text-slate-400 line-clamp-2">US Patent Granted, ₹26.18 Cr Grants & National Repositories (NRMC-F).</p>
            </button>

            <button
              onClick={() => setActivePage('global-impact')}
              className="p-5 rounded-2xl bg-slate-800/80 hover:bg-slate-800 border border-slate-700/80 text-left transition-all group"
            >
              <Globe className="w-6 h-6 text-emerald-400 mb-3 group-hover:scale-110 transition-transform" />
              <h3 className="text-sm font-bold text-white mb-1">Global Impact & Alumni</h3>
              <p className="text-xs text-slate-400 line-clamp-2">67 Universities in 25 Countries, 40 Ph.D. scholars & Post-Docs.</p>
            </button>

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

    </div>
  );
}