import { injectStyles } from '../../../shared/injectStyles';
/**
 * ClientProposalSection
 *
 * Renders a single content block from the proposal's sections array.
 * Types: heading | text | list
 * ('pricing' sections are intercepted and rendered by ProposalClientView
 * itself, since only it has the actual line-item/package data to show.)
 */

const CSS = `
/* ── Heading ───────────────────────────────────────────────── */
.cfs-heading {
	margin: 52px 0 18px;
}
.cfs-heading:first-child {
	margin-top: 0;
}
.cfs-heading h2 {
	font-family: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 25px;
	font-weight: 800;
	color: #1A1A2E;
	margin: 0;
	padding-bottom: 12px;
	border-bottom: 1px solid #EEECEA;
	line-height: 1.3;
	letter-spacing: -0.3px;
}

/* ── Text ──────────────────────────────────────────────────── */
.cfs-text {
	margin: 0 0 24px;
}
.cfs-text p {
	font-family: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 15.5px;
	line-height: 1.78;
	color: #374151;
	margin: 0 0 14px;
}
.cfs-text p:last-child {
	margin-bottom: 0;
}

/* ── List ──────────────────────────────────────────────────── */
.cfs-list {
	margin: 0 0 28px;
}
.cfs-list ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.cfs-list li {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	padding: 7px 0;
	font-family: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 15px;
	line-height: 1.65;
	color: #374151;
}
.cfs-bullet {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #6366F1;
	flex-shrink: 0;
	margin-top: 8px;
}

/* ── Print ──────────────────────────────────────────────────── */
@media print {
	.cfs-heading h2 { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.cfs-bullet     { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
`;

export default function ClientProposalSection( { section } ) {
	injectStyles( 'co-section-s', CSS );

	const { type, content, items } = section;

	if ( type === 'heading' ) {
		return (
			<div className="cfs-heading">
				<h2>{ content }</h2>
			</div>
		);
	}

	if ( type === 'text' ) {
		const renderInline = ( text ) =>
			text.split( /(\*\*[^*]+\*\*)/ ).map( ( chunk, i ) =>
				chunk.startsWith( '**' ) && chunk.endsWith( '**' )
					? <strong key={ i }>{ chunk.slice( 2, -2 ) }</strong>
					: chunk
			);

		const paragraphs = ( content || '' ).split( /\n\n+/ );

		return (
			<div className="cfs-text">
				{ paragraphs.map( ( para, pi ) => (
					<p key={ pi }>
						{ para.split( '\n' ).map( ( line, li, arr ) => (
							<wp.element.Fragment key={ li }>
								{ renderInline( line ) }
								{ li < arr.length - 1 && <br /> }
							</wp.element.Fragment>
						) ) }
					</p>
				) ) }
			</div>
		);
	}

	if ( type === 'list' ) {
		return (
			<div className="cfs-list">
				<ul>
					{ ( items || [] ).map( ( item, i ) => (
						<li key={ i }>
							<span className="cfs-bullet" aria-hidden="true" />
							{ item }
						</li>
					) ) }
				</ul>
			</div>
		);
	}

	return null;
}
