frontend/src/sections/about/VarDiGSection.jsx

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

// Styled components for the VarDiG section
const VarDiGContainer = 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-reverse;  // Swapped the position to have image on the left
    justify-content: space-between;
    padding: 4rem 5rem;
  }
`;

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

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

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

const VarDiGParagraph = 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: 2rem;

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

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

const VarDiGSection = () => {
  return (
    <VarDiGContainer role="region">
      {/* Right Section: Text */}
      <VarDiGTextContainer>
        <VarDiGTitle>VarDiG® - Unlocking the Power of Genomic Data</VarDiGTitle>
        <VarDiGParagraph>
          VarDiG® is your gateway to actionable genomic data. Powered by advanced AI and curated by experts, our platform provides real-time access to over 800,000 verified genetic variants, diseases, and gene relationships, ensuring every insight is precise and reliable. With continuous AI-driven cross-verification, VarDiG® guarantees data integrity, empowering researchers and clinicians to make confident, data-backed decisions for precision medicine and advanced discoveries.
        </VarDiGParagraph>

        {/* Bullet Points Section */}
        <BulletPoints>
          <BulletPoint>
            <FaCheckCircle style={{ color: "#3267B9" }} /> AI-Verified, Expert-Curated Data
          </BulletPoint>
          <BulletPoint>
            <FaCheckCircle style={{ color: "#3267B9" }} /> Comprehensive Variant-Disease-Gene Mapping
          </BulletPoint>
          <BulletPoint>
            <FaCheckCircle style={{ color: "#3267B9" }} /> Advanced Search Engine with Flexible Filters
          </BulletPoint>
          <BulletPoint>
            <FaCheckCircle style={{ color: "#3267B9" }} /> Seamless VCF File Upload & Visualization
          </BulletPoint>
        </BulletPoints>
      </VarDiGTextContainer>

      {/* Left Section: Image */}
      <ImageSection>
        <img src="https://via.placeholder.com/350x350" alt="VarDiG Platform Visualization" />
      </ImageSection>
    </VarDiGContainer>
  );
};

export default VarDiGSection;