/**
 * 共通ガイドセクション
 *
 * グラデーションヒーローバナー + カードグリッドで各ページの説明を表示。
 *
 * @param {Object}   props
 * @param {Object}   props.hero           - { title: string, description: string }
 * @param {Array}    props.cards          - [{ icon: JSX, title: string, description: string, tips: string[] }]
 */
export default function GuideSection( { hero, cards } ) {
	return (
		<div className="conf-manager-guide">
			<div className="conf-manager-guide__hero">
				<h3>{ hero.title }</h3>
				<p>{ hero.description }</p>
			</div>
			<div className="conf-manager-guide__cards">
				{ cards.map( ( card, i ) => (
					<div key={ i } className="conf-manager-guide__card">
						<div className="conf-manager-guide__card-icon" aria-hidden="true">
							{ card.icon }
						</div>
						<h4>{ card.title }</h4>
						<p>{ card.description }</p>
						{ card.tips && card.tips.length > 0 && (
							<ul>
								{ card.tips.map( ( tip, j ) => (
									<li key={ j }>{ tip }</li>
								) ) }
							</ul>
						) }
					</div>
				) ) }
			</div>
		</div>
	);
}
