
import React from 'react';
import { useTranslation } from 'react-i18next';

interface WelcomeSectionProps {
  onStartClick?: () => void;
  onNext?: () => void;
}

const WelcomeSection: React.FC<WelcomeSectionProps> = () => {
  const { t } = useTranslation();
  const features = [
    {
      id: 1,
      title: t('landing.welcome.feature1Title'),
      description: t('landing.welcome.feature1Desc'),
      iconBg: '#9BCACC',
      icon: '/assets/images/icon-analysis.svg'
    },
    {
      id: 2,
      title: t('landing.welcome.feature2Title'),
      description: t('landing.welcome.feature2Desc'),
      iconBg: '#DFC7FD',
      icon: '/assets/images/icon-content.svg'
    },
    {
      id: 3,
      title: t('landing.welcome.feature3Title'),
      description: t('landing.welcome.feature3Desc'),
      iconBg: '#D4FDF3',
      icon: '/assets/images/icon-deploy.svg'
    },
  ];

  return (
    <div className="welcome-section">
      <div className="welcome-content">
        {/* Star Icon - Top Center */}
        <div className="welcome-star">
          <img src="/assets/images/star-icon.svg" alt="star" />
        </div>

        {/* Header */}
        <div className="welcome-header">
          <h2 className="welcome-title">{t('landing.welcome.title')}</h2>
          <p className="welcome-subtitle">{t('landing.welcome.subtitle')}</p>
        </div>

        {/* Feature Cards */}
        <div className="feature-grid">
          {features.map((feature) => (
            <div key={feature.id} className="feature-card">
              <div className="feature-number-badge">
                <span>{feature.id}</span>
              </div>
              <h3 className="feature-card-title">{feature.title}</h3>
              <div className="feature-icon-box" style={{ backgroundColor: feature.iconBg }}>
                <img src={feature.icon} alt={feature.title} className="feature-icon-img" />
              </div>
              <p className="feature-card-description">{feature.description}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default WelcomeSection;
