export default function WelcomeStep({ strings: S, features, logoUrl }) {
  return (
    <div className="wowext-onboarding-welcome">
      <div className="wowext-onboarding-welcome__hero">
        {logoUrl && (
          <img
            src={logoUrl}
            alt=""
            className="wowext-onboarding-welcome__logo"
            width="64"
            height="64"
          />
        )}
        <h1 className="wowext-onboarding-welcome__title">{S.welcomeTitle}</h1>
        <p className="wowext-onboarding-welcome__subtitle">{S.welcomeSubtitle}</p>
      </div>
      <p className="wowext-onboarding-welcome__intro">{S.welcomeIntro}</p>
      <h2 className="wowext-onboarding-welcome__features-heading">{S.keyFeatures}</h2>
      <ul className="wowext-onboarding-feature-list">
        {features.map((f) => (
          <li key={f.title} className="wowext-onboarding-feature-card">
            <span className="wowext-onboarding-feature-card__icon" aria-hidden="true">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                <path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </span>
            <h3 className="wowext-onboarding-feature-card__title">{f.title}</h3>
          </li>
        ))}
      </ul>
    </div>
  );
}