import React from 'react';

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

const WelcomeSection: React.FC<WelcomeSectionProps> = () => {
  const features = [
    {
      id: 1,
      title: '비즈니스 핵심 정보 분석',
      description: '홈페이지, 네이버 지도, 블로그 등의\nURL을 입력하세요',
      iconBg: '#9BCACC',
      icon: '/assets/images/icon-analysis.svg'
    },
    {
      id: 2,
      title: '홍보 콘텐츠 자동 제작',
      description: '분석된 정보를 바탕으로\n비즈니스에 맞는 음악, 자막, 노래, 영상을\n자동으로 제작해요',
      iconBg: '#DFC7FD',
      icon: '/assets/images/icon-content.svg'
    },
    {
      id: 3,
      title: '멀티채널 자동 배포',
      description: '완성된 영상은 다운로드하거나\n바로 SNS에 업로드 할 수 있어요',
      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">ADO2.AI에 오신 것을 환영합니다.</h2>
          <p className="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;