import React from 'react';
import { Link } from 'react-router-dom';

const GettingStarted = () => {
  const cardData = [
    {
      title: "Watchlist Screening",
      subtitle: "Assess Potential Risk",
      description: "Receive detailed insights into potential matches against a list of known or suspected individuals and entities. Our service analyzes the provided full name and other key information to help you assess risks effectively and make informed decisions.",
      badge: "New",
      buttonText: "Get Started",
    },
    {
      title: "Watchlist Screening",
      subtitle: "Assess Potential Risk",
      description: "Receive detailed insights into potential matches against a list of known or suspected individuals and entities. Our service analyzes the provided full name and other key information to help you assess risks effectively and make informed decisions.",
      badge: "New",
      buttonText: "Get Started",
    },
    {
      title: "Watchlist Screening",
      subtitle: "Assess Potential Risk",
      description: "Receive detailed insights into potential matches against a list of known or suspected individuals and entities. Our service analyzes the provided full name and other key information to help you assess risks effectively and make informed decisions.",
      badge: "New",
      buttonText: "Get Started",
    },
    {
      title: "Watchlist Screening",
      subtitle: "Assess Potential Risk",
      description: "Receive detailed insights into potential matches against a list of known or suspected individuals and entities. Our service analyzes the provided full name and other key information to help you assess risks effectively and make informed decisions.",
      badge: "New",
      buttonText: "Get Started",
    },
    {
      title: "Watchlist Screening",
      subtitle: "Assess Potential Risk",
      description: "Receive detailed insights into potential matches against a list of known or suspected individuals and entities. Our service analyzes the provided full name and other key information to help you assess risks effectively and make informed decisions.",
      badge: "New",
      buttonText: "Get Started",
    },
    {
      title: "Watchlist Screening",
      subtitle: "Assess Potential Risk",
      description: "Receive detailed insights into potential matches against a list of known or suspected individuals and entities. Our service analyzes the provided full name and other key information to help you assess risks effectively and make informed decisions.",
      badge: "New",
      buttonText: "Get Started",
    },
  ];

  return (
    <div className="container mt-5">
      {/* Welcome Section */}
      <div className="row-card" style={styles.welcomeCard}>
        <div className="d-flex flex-column justify-content-start align-items-start p-4">
          <div>
            <h4 className="mb-3 text-start">
              <i className="fas fa-info fa-bold me-3"></i>
              Welcome Back, Murtadi
            </h4>
            <p className="mb-0 text-start">
              Get started now by creating an Application ID and explore all the demo services available on the dashboard. 
              Experience the ease and flexibility of trying out all our features firsthand.
            </p>
          </div>
          {/* Buttons */}
          <div className="d-flex flex-column flex-md-row mt-3">
            <Link to="/createApps" style={{ textDecoration: 'none' }} className="mb-3 mb-md-0">
              <button className="btn d-flex justify-content-center align-items-center me-2" style={styles.buttonPrimary}>
                <i className="fas fa-plus text-white me-2"></i>
                <p className="text-white mb-0">Create New App ID</p>
              </button>
            </Link>

            <button className="btn d-flex justify-content-center align-items-center" style={styles.buttonSecondary}>
              <p className="text-primary mb-0 fw-bold">Read Our API Docs</p>
            </button>
          </div>
        </div>
      </div>

      {/* Cards Section */}
      <div className="row">
        {cardData.map((card, index) => (
          <div className="col-md-6 col-lg-4 mb-4" key={index}>
            <div className="card h-100" style={styles.card}>
              <div className="card-body text-start">
                <h5 className="card-title d-flex justify-content-between align-items-center">
                  <span style={styles.cardTitle}>{card.title}</span>
                  <span className="badge" style={styles.badge}>{card.badge}</span>
                </h5>
                <h6 className="mb-3">{card.subtitle}</h6>
                <p className="card-text">{card.description}</p>
                <a href="/" className="btn btn-link" style={styles.linkButton}>
                  {card.buttonText}
                </a>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default GettingStarted;

const styles = {
  welcomeCard: {
    backgroundColor: 'white',
    borderLeft: '4px solid #007bff',
    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
    marginBottom: '1rem',
  },
  buttonPrimary: {
    backgroundColor: '#0542CC',
  },
  buttonSecondary: {
    backgroundColor: '#E2FBEA',
  },
  card: {
    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
  },
  cardTitle: {
    color: '#007bff',
  },
  badge: {
    backgroundColor: 'green',
    color: 'white',
    padding: '0.25em 0.5em',
    borderRadius: '0.25em',
  },
  linkButton: {
    padding: '0',
    fontWeight: 'bold',
    color: '#007bff',
  },
};
