import React from 'react';
import Image from 'next/image';
import Link from 'next/link';

const ResearchCard = ({ image, title, description, link }) => (
  <Link href={link} className="block">
    <div className="flex flex-col sm:flex-row items-start gap-4 p-4 sm:p-6 rounded-2xl sm:rounded-3xl shadow-sm hover:shadow-lg transition-all duration-300 group relative" style={{ backgroundColor: '#f2fcfc' }}>
      {/* Image Section */}
      <div className="flex-shrink-0 w-full sm:w-auto">
        <div className="relative overflow-hidden rounded-xl sm:rounded-2xl">
          <Image 
            src={image} 
            alt={title} 
            width={180}
            height={140}
            className="object-cover w-full h-48 sm:w-44 sm:h-36 group-hover:scale-105 transition-transform duration-300"
          />
        </div>
      </div>
      
      {/* Content Section */}
      <div className="flex-1 pt-1 pb-12 sm:pb-12">
        <h3 className="text-lg sm:text-lg font-semibold text-teal-700 mb-3 leading-tight">{title}</h3>
        <p className="text-gray-600 leading-relaxed text-sm text-justify pr-4 sm:pr-0">{description}</p>
      </div>
    </div>
  </Link>
);

const ResearchSection = () => {
  const researchAreas = [
    {
      image: "/images/blog/plant_fni.jpg",
      title: "Plant Research",
      description: "Enable researchers to generate accurate reference genomes for plants, study genetic variations, and identify genes related to traits like yield, disease resistance, and stress tolerance.",
      link: "/research#plant-research"
    },
    {
      image: "/images/blog/animan_fni.jpg",
      title: "Animal Research",
      description: "Enable researchers to study the genetic diversity of animal populations, trace ancestry, identify disease-resistant genes, and analyze gene expression patterns.",
      link: "/research#animal-research"
    },
    {
      image: "/images/blog/microbial_fn.jpg",
      title: "Microbial Research",
      description: "Enable pathogen identification, outbreak tracking, and studying antimicrobial resistance by sequencing the genomes of bacteria, viruses, and other microbes.",
      link: "/research#microbial-research"
    },
    {
      image: "/images/blog/human_fn.jpg",
      title: "Human Research",
      description: "Enable rapid sequencing of genomes or exomes to identify genomic alterations associated with rare and complex disorders.",
      link: "/research#human-research"
    }
  ];

  return (
    <section id="research" className="py-6 sm:py-8 bg-white">
      <div className="container mx-auto max-w-none px-6">
        <div className="mb-8">
          <h2 className="text-4xl font-bold text-teal-700 mb-4">Research Area</h2>
        </div>
        
        {/* Grid layout - 1 column on mobile, 2 columns on desktop */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
          {researchAreas.map((area, index) => (
            <ResearchCard
              key={index}
              image={area.image}
              title={area.title}
              description={area.description}
              link={area.link}
            />
          ))}
        </div>
      </div>
    </section>
  );
};

export default ResearchSection;