import React from "react";
import styled from "styled-components";
import { FaCheckCircle } from "react-icons/fa"; // Tick mark icon for bullets

// Styled components for the About Us section
const AboutContainer = styled.section`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  background-color: #121212; // Dark background
  color: white;
  gap: 4rem; // Adds space between sections

  @media (min-width: 768px) {
    flex-direction: row;
    justify-content: space-between;
    padding: 4rem 5rem;
  }
`;

const AboutTextContainer = styled.div`
  flex: 0 0 60%; // Takes up 60% of the width
  text-align: center;

  @media (min-width: 768px) {
    text-align: left;
  }
`;

const AboutTitle = styled.h2`
  font-size: 3.5rem;
  font-weight: bold;
  background-clip: text;
  -webkit-background-clip: text;
  color: #3267B9;`

const AboutParagraph = styled.p`
  font-size: 1rem; // Smaller font size
  color: #e2e8f0;
  line-height: 1.8;
  max-width: 800px;
  margin: 0 auto;
  margin-bottom: 2rem;
  text-align: justify; // Justified text
`;

const BulletPoints = styled.ul`
  display: grid;
  grid-template-columns: repeat(2, 1fr); // Two columns
  gap: 2rem;
  list-style-type: none;
  padding: 0;
  text-align: left;
  margin: 0 auto;
  max-width: 600px;
`;

const BulletPoint = styled.li`
  font-size: 1.25rem;
  color: #e2e8f0;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
`;

const ImageSection = styled.div`
  flex: 0 0 40%;  // Takes up 40% of the width
  display: flex;
  justify-content: center;
  margin-top: 1rem;

  @media (min-width: 768px) {
    margin-top: 0;
  }

  img {
    width: 100%;
    height: auto;
    max-width: 450px; // Single image, medium size
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
`;

const AboutUs = () => {
  return (
    <AboutContainer>
      {/* Left Section: Text */}
      <AboutTextContainer>
        <AboutTitle>Genesis of Genomatics</AboutTitle>
        <AboutParagraph>
          Genomatics was founded with the vision of unlocking the full potential of genomic data in research and medicine. Our mission is to create innovative bioinformatics tools that empower scientists and clinicians to translate complex data into meaningful insights for health and discovery. With the rapid advancements in sequencing technology, genomic data is growing exponentially, creating a need for curated, precise solutions. Genomatics meets this challenge by combining expert knowledge with cutting-edge technology to produce actionable, reliable genomic insights.
        </AboutParagraph>

        {/* Bullet Points Section */}
        <BulletPoints>
          <BulletPoint>
            <FaCheckCircle style={{ color: "#3267B9" }} /> Curated Genomic Databases
          </BulletPoint>
          <BulletPoint>
            <FaCheckCircle style={{ color: "#3267B9" }} /> AI-Driven Insights
          </BulletPoint>
          <BulletPoint>
            <FaCheckCircle style={{ color: "#3267B9" }} /> Precision Medicine Support
          </BulletPoint>
          <BulletPoint>
            <FaCheckCircle style={{ color: "#3267B9" }} /> Advanced Analytical Tools
          </BulletPoint>
          <BulletPoint>
            <FaCheckCircle style={{ color: "#3267B9" }} /> Secure Cloud Access
          </BulletPoint>
          <BulletPoint>
            <FaCheckCircle style={{ color: "#3267B9" }} /> Constant Data Updates
          </BulletPoint>
        </BulletPoints>
      </AboutTextContainer>

      {/* Right Section: Image */}
      <ImageSection>
        <img src="https://via.placeholder.com/350x350" alt="Genomic Research" />
      </ImageSection>
    </AboutContainer>
  );
};

export default AboutUs;