import React from 'react';
import styled from 'styled-components';
import { Dr_giridharan } from '../../utils';
import { Dr_rajasekaran } from '../../utils';
import { Dr_thangaraj } from '../../utils';

// Styled Components
const Section = styled.section`
  background-color: #0a0a0a; /* Dark background */
  color: #fff;
  padding: 60px 20px;
  text-align: center;
`;

const Heading = styled.h2`
  font-size: 2.5rem;
  font-weight: bold;
  color: #3267B9;
  margin-bottom: 16px;
`;

// const Subheading = styled.p`
//   font-size: 1.125rem;
//   color: #ccc;
//   margin-bottom: 40px;
// `;

const CardList = styled.ul`
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
`;

const Card = styled.li`
  padding: 30px;
  border-radius: 20px; /* Rounded corners for the card */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Align content towards the bottom */
  position: relative;
  min-height: 300px; /* Set minimum height to ensure space for text */
  
  /* Gradient border */
  border: 3px solid #3267B9;
  
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
`;



const QuoteIcon = styled.svg`
  position: absolute;
  top: -20px;
  left: 20px;
  width: 40px;
  height: 40px;
  opacity: 0.8;

  /* Gradient in the QuoteIcon */
  & path {
    fill: #3267B9; /* Referencing gradient from <defs> */
  }
`;

const CardText = styled.p`
  font-size: 1rem;
  color: #fff; /* White text for readability */
  margin-bottom: 20px;
`;

const CardFooter = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center; /* Center the author info */
  justify-content: center;
  margin-top: 20px;
`;

const Avatar = styled.img`
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-bottom: 10px; /* Space between avatar and name */
`;

const Name = styled.div`
  font-weight: bold;
  background: #3267B9;
  -webkit-background-clip: text;
  color: transparent;
`;

const Position = styled.div`
  font-size: 0.875rem;
  color: #bbb; /* Light gray for position */
`;

const Testimonials = () => {
  // Testimonial data
  const testimonialData = [
    {
      text: 'A very useful product in Medical Genetics!',
      name: 'Dr. K. Thangaraj',
      position: 'Chief Scientist, Evolutionary and Medical Genetics, CCMB, Hyderabad, India',
      avatar: Dr_thangaraj
    },
    {
      text: 'Flexibly done to serve our Clinical Genomics needs!',
      name: 'Prof. S. Rajasekaran',
      position: 'Chairman, Dept of Orthopaedic, Trauma & Spine Surgery, Ganga Hospital, Coimbatore, India',
      avatar: Dr_rajasekaran
    },
    {
      text: 'Awesome product which serves as a collection of variants of all diseases, not just the rare ones!',
      name: 'Dr. Giridharan Periasamy',
      position: 'Platform Leader, High Throughput Phenomics, GIS, Singapore',
      avatar: Dr_giridharan
    }
  ];

  return (
    <Section>
      <Heading>Testimonials</Heading>
      {/* <Subheading>Here are what some of our amazing customers are saying...</Subheading> */}
      <CardList>
        {testimonialData.map((testimonial, index) => (
          <Card key={index}>
            <QuoteIcon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
              <path d="M557.133 561.704H442.128c-44.256 0-80.458-36.19-80.458-80.446 0-165.58-42.32-347.485 160.656-399.418 91.95-23.516 115.915 77.753 18.119 84.745-59.647 4.276-71.293 42.804-73.147 101.068h92.269c44.256 0 80.458 36.201 80.458 80.458v130.702c0 45.591-37.3 82.89-82.891 82.89zm-358.032 0H84.096c-44.256 0-80.446-36.19-80.446-80.446 0-165.58-42.331-347.485 160.644-399.418 91.95-23.516 115.915 77.753 18.118 84.745-59.646 4.276-71.292 42.804-73.146 101.068h92.269c44.256 0 80.457 36.201 80.457 80.458v130.702c0 45.591-37.3 82.89-82.89 82.89z" />
            </QuoteIcon>
            <CardText>{testimonial.text}</CardText>
            <CardFooter>
              <Avatar src={testimonial.avatar} alt={testimonial.name} />
              <Name>{testimonial.name}</Name>
              <Position>{testimonial.position}</Position>
            </CardFooter>
          </Card>
        ))}
      </CardList>
    </Section>
  );
};

export default Testimonials;