import { __ } from '@wordpress/i18n';
import { RichText } from '@wordpress/block-editor';
import {
	useEffect,
	useRef,
	useContext,
} from '@wordpress/element';
import { applyFilters, addFilter } from '@wordpress/hooks';
import QRCode from 'qrcode';
import { decodeEntities } from '@wordpress/html-entities';
import BlockContext from "../../context/blockContext";
import HeaderContact from '../../InspectorControls/HeaderContact';


function templateThree() {
	const { attributes, setAttributes, scrollToInspectorControl, updateField, formatMonthDisplay, placeholderImageUrl, currentData, updateDataByStyleField, containerRef } = useContext(BlockContext);
	const {
		sectionItems28,
		profileImage,
		hasInitialized,
		showQRCode,
	} = attributes;
	function getTranslatedDefaults() {
		return [
			{
				id: '1',
				type: 'about',
				title: __( 'Professional Summary', 'cv-builder' ),
				description: __( 'Experienced Finance Manager with over 10 years of delivering strategic financial leadership and operational excellence across diverse industries. Skilled in budgeting, forecasting, financial reporting, and driving process improvements that support business goals. Known for developing strong internal controls, managing complex audits, and leading high-performing finance teams.', 'cv-builder' ),
			},
			{
				id: '2',
				type: 'education',
				title: __( 'Education', 'cv-builder' ),
				items: [
					{
						institution: __( 'University of Texas at Austin – Austin, TX', 'cv-builder' ),
						name: __( 'Master of Science in Finance, ', 'cv-builder' ),
						fromDate: __( 'Nov 2010', 'cv-builder' ),
						toDate: __( 'Sep 2012', 'cv-builder' ),
						current: false,
						cgpa: __( 'GPA: ', 'cv-builder' ),
						cgpaValue: '3.4/4.0',
					},
					{
						institution: __( 'Arizona State University – Tempe, AZ', 'cv-builder' ),
						name: __( 'Bachelor of Science in Accounting, ', 'cv-builder' ),
						fromDate: __( 'Aug 2005', 'cv-builder' ),
						toDate: __( 'Sep 2009', 'cv-builder' ),
						current: false,
						cgpa: __( 'GPA: ', 'cv-builder' ),
						cgpaValue: '3.8/4.0',
					},
				],
			},
			{
				id: '3',
				type: 'experience',
				title: __( 'Professional Experience', 'cv-builder' ),
				items: [
					{
						name: __( 'Skyline Technologies Inc. — Austin, TX', 'cv-builder' ),
						designation: __( 'Finance Manager, ', 'cv-builder' ),
						present: true,
						fromExpDate: __( 'Feb 2020', 'cv-builder' ),
						toExpDate: __( 'May 2024', 'cv-builder' ),
						experienceDescription: `<ul>
							<li><span>${__( 'Lead financial operations including P&L management, monthly close, forecasting, and budget planning.', 'cv-builder' )}</span></li>
							<li><span>${__( 'Designed and implemented new reporting dashboards in Power BI, reducing time-to-insight by 40%.', 'cv-builder' )}</span></li>
							<li><span>${__( 'Collaborate directly with department heads and executive leadership to align financial strategy with business goals.', 'cv-builder' )}</span></li>
							<li><span>${__( 'Managed successful year-end audits with zero findings for three consecutive years.', 'cv-builder' )}</span></li>
						</ul>`,
					},
					{
						name: __( 'BluePeak Ventures — Denver, CO', 'cv-builder' ),
						designation: __( 'Senior Financial Analyst, ', 'cv-builder' ),
						present: false,
						fromExpDate: __( 'Sep 2015', 'cv-builder' ),
						toExpDate: __( 'Jan 2020', 'cv-builder' ),
						experienceDescription: `<ul>
                                <li><span>${__( 'Developed complex financial models to support mergers and acquisitions.', 'cv-builder' )}</span></li>
                                <li><span>${__( 'Led financial planning efforts that improved forecast accuracy by 25%.', 'cv-builder' )}</span></li>
                                <li><span>${__( 'Conducted variance analysis, cash flow reviews, and executive briefings for quarterly reviews.', 'cv-builder' )}</span></li>
                                <li><span>${__( 'AMentored two junior analysts, contributing to team-wide performance gains.', 'cv-builder' )}</span></li>
                            </ul>`,
					},
					{
						name: __( 'Everwest Solutions — Phoenix, AZ', 'cv-builder' ),
						designation: __( 'Finance Officer, ', 'cv-builder' ),
						present: false,
						fromExpDate: __( 'Jun 2011', 'cv-builder' ),
						toExpDate: __( 'Aug 2015', 'cv-builder' ),
						experienceDescription: `<ul>
                                <li><span>${__( 'Maintained general ledger, prepared financial statements, and supported month-end closing.', 'cv-builder' )}</span></li>
                                <li><span>${__( 'Assisted in audit preparation and implemented internal control improvements that increased reporting reliability.', 'cv-builder' )}</span></li>
                                <li><span>${__( 'Collaborated with AP/AR departments to streamline invoice and collection processes.', 'cv-builder' )}</span></li>
                            </ul>`,
					},
				],
			},
			
			{
				id: '4',
				type: 'skills',
				title: __( 'Skills & Competencies', 'cv-builder' ),
				items: [
					{ name: __( 'Budgeting & Forecasting', 'cv-builder' ) },
					{ name: __( 'Financial Modeling & Data Analysis', 'cv-builder' ) },
					{ name: __( 'Cash Flow Management', 'cv-builder' ) },
					{ name: __( 'GAAP & Regulatory Compliance', 'cv-builder' ) },
					{ name: __( 'Strategic Financial Planning', 'cv-builder' ) },
					{ name: __( 'Audit & Risk Management', 'cv-builder' ) },
					{ name: __( 'Business Intelligence Tools', 'cv-builder' ) },
					{ name: __( 'M&A Financial Due Diligence', 'cv-builder' ) },
					{ name: __( 'Cost Reduction & Profit Optimisation', 'cv-builder' ) },
				],
			},
			{
				id: '5',
				type: 'awards',
				title: __( 'Key Achievements', 'cv-builder' ),
				items: [
					{ name: __( 'Reduced monthly reporting cycle by 35% through automation and streamlined processes.', 'cv-builder' ) },
					{ name: __( 'Played a critical role in securing $2M in funding through detailed financial projections. Recognized for building a finance function from the ground up during company expansion.', 'cv-builder' ) },
					{ name: __( 'Implemented cost-saving initiatives that cut overhead by 18% annually.', 'cv-builder' ) },
				],
			},
			{
				id: '8',
				type: 'tools',
				title: __( 'Tools & Technology', 'cv-builder' ),
				items: [
					{ name: __( 'ERP Systems: SAP, NetSuite, Oracle', 'cv-builder' ) },
					{ name: __( 'Accounting Tools: QuickBooks, Xero, Sage Intacct', 'cv-builder' ) },
					{ name: __( 'BI Tools: Power BI, Tableau, Looker', 'cv-builder' ) },
					{ name: __( 'Productivity: Excel (Advanced), Google Sheets, Microsoft Office Suite', 'cv-builder' ) },
				],
			},
			{
				id: '7',
				type: 'languages',
				title: __( 'Languages', 'cv-builder' ),
				items: [
					{ name: __( 'English – Native', 'cv-builder' ) },
					{ name: __( 'Spanish – Professional Proficiency', 'cv-builder' ) },
				],
			},
			{
				id: '6',
				type: 'contact',
				title: __( 'Social & Contact', 'cv-builder' ),
				website: __( 'www.barry.design', 'cv-builder' ),
				address: __( '2207 Beach Avenue, Los Angeles', 'cv-builder' ),
				email: __( 'barry@design.mail', 'cv-builder' ),
				phoneNumber: __( '(914) 479-6342', 'cv-builder' ),
				city: '',
				postalCode: '',
				country: '',
			},
			{
				id: '9',
				type: 'hobbies',
				title: __( 'Hobbies', 'cv-builder' ),
				items: [
					{ name: __( 'Music', 'cv-builder' ) },
					{ name: __( 'Movie', 'cv-builder' ) },
					{ name: __( 'Writing', 'cv-builder' ) },
					{ name: __( 'Football', 'cv-builder' ) },
				],
			},
			{
				id: '10',
				type: 'reference',
				title: __( 'Reference', 'cv-builder' ),
				items: [
					{
						name: __( 'Esther Howard', 'cv-builder' ),
						jobPosition: __( 'CEO', 'cv-builder' ),
						company: __( 'Company Inc', 'cv-builder' ),
						phone: '+65 7657 4795',
						relation: __( 'Friend', 'cv-builder' ),
					},
					{
						name: __( 'John Doe', 'cv-builder' ),
						jobPosition: __( 'CEO', 'cv-builder' ),
						company: __( 'Company Inc', 'cv-builder' ),
						phone: '+65 7657 4753',
						relation: __( 'Friend', 'cv-builder' ),
					},
				],
			},
		]
    }
	useEffect(() => {
		if (!sectionItems28 || sectionItems28.length === 0) {
			setAttributes({
				sectionItems28: getTranslatedDefaults(),
			});
		}
	}, []);
	addFilter(
		'bwdcv.afterProfileContact',
		'bwdcv-cv-builder-sass/contact-component-style2',
		(content, props) => {
			const { attributes, setAttributes } = props;

			return (
				<HeaderContact
					attributes={attributes}
					setAttributes={setAttributes}
				/>
			);
		}
	);
	addFilter(
		'bwdcv-social-icon-visibility',
		'style28/hide-social-icons',
		() => false
	);
	addFilter(
		'bwdcv-footer-visibility',
		'style28/hide-footer',
		() => false
	);



	const canvasRef = useRef(null);
	const qrUrl = window.location.href;
	useEffect(() => {
		if (!QRCode) {
			return;
		}
		const qrCodeCanvas = canvasRef.current;
		if (!qrCodeCanvas) {
			return;
		}
		const qrCodeOptions = {
			color: {
				dark: '#000000',
				light: '#ffffff',
			},
			width: 100,
			margin: 1,
			errorCorrectionLevel: 'L',
		};

		QRCode.toCanvas(qrCodeCanvas, qrUrl, qrCodeOptions, (error) => {
			if (error) {
			}
		});
	}, []);

	return (
		<div className="wpcv-ats bwdcvs-cv-builder-common" ref={containerRef}>
			<div className="wpcv-container temp2">
				<div className="wpcv-temp2-content">
					{showQRCode && (
						<div className="cv-qrWrapper">
							<canvas ref={canvasRef} ></canvas>
						</div>
					)}
					<div className="wpcv-header">
						<div className="wpcv-header-hero text-center">
								{currentData.firstName && (
								<RichText
									tagName="h1"
									className="wpcv-name"
									value={currentData.firstName || ''}
									onChange={(value) => updateDataByStyleField('firstName', value)}
								/>
							)}
							{currentData.firstName && currentData.lastName && (
								<span>&nbsp;</span>
							)}
							{currentData.lastName && (
								<RichText
									tagName="h1"
									className="wpcv-name"
									value={currentData.lastName || ''}
									onChange={(value) => updateDataByStyleField('lastName', value)}
								/>
							)}
							{currentData.designation && (
								<RichText
									tagName="h1"
									className="wpcv-name"
									value={currentData.designation || ''}
									onChange={(value) => updateDataByStyleField('designation', value)}
								/>
							)}
						</div>
						<div className="wpcv-header-contact">
							<ul className="d-flex justify-content-center">
								<>
									{currentData.address && (
										<li>
											<RichText
												tagName="span"
												value={currentData.address}
												onChange={(value) => updateDataByStyleField('address', value)}
											/>
										</li>
									)}
									{currentData.email && (
										<li>
											<RichText
												tagName="a"
												value={currentData.email}
												onChange={(value) => updateDataByStyleField('email', value)}
												href={currentData.email
													? `mailto:${currentData.email}`
													: undefined
												}
											/>
										</li>
									)}
									{currentData.website && (
										<li>
											<RichText
												tagName="a"
												value={currentData.website}
												onChange={(value) => updateDataByStyleField('website', value)}
												href={currentData.website
													? `${currentData.website}`
													: undefined
												}
											/>
										</li>
									)}
									{currentData.phoneNumber && (
										<li>
											<RichText
												tagName="a"
												value={currentData.phoneNumber || ''}
												onChange={(value) => updateDataByStyleField('phoneNumber', value)}
												href={currentData.phoneNumber
													? `tel:${currentData.phoneNumber}`
													: undefined
												}
											/>
										</li>
									)}
									{currentData.city && (
										<li>
											<RichText
												tagName="span"
												value={currentData.city}
												onChange={(value) => updateDataByStyleField('city', value)}
											/>
										</li>
									)}
									{currentData.postalCode && (
										<li>
											<RichText
												tagName="span"
												value={currentData.postalCode}
												onChange={(value) => updateDataByStyleField('postalCode', value)}
											/>
										</li>
									)}
								</>
							</ul>
						</div>
					</div>
					
					{sectionItems28 && sectionItems28.map((section, index) => (
						<div key={section.id} onClick={() => scrollToInspectorControl(section.id)}>
							{section.type === 'about' && (
								<>
								<hr />
								<div className="wpcv-about-content d-flex">
									<div className="wpcv-section-title">
										<RichText
											tagName="h3"
											className=""
											value={section.title || ''}
											onChange={(value) =>
												updateField(sectionItems28.findIndex(s => s.id === section.id), "title", value)
											}
											placeholder={__('Enter section title…', 'cv-builder')}
										/>
									</div>
									<div>
										<RichText
										tagName="p"
										value={section.description}
										id="contentGeResult"
										onChange={(value) =>
											updateField(
												sectionItems28.findIndex(s => s.id === section.id),
												'description',
												value
											)
										}
										placeholder="Enter section description..."
									/>
									{section.generatedContent && (
										<RichText
											tagName="p"
											value={section.generatedContent}
											id="contentGeResult"
											onChange={(value) =>
												updateField(
													sectionItems28.findIndex(s => s.id === section.id),
													'generatedContent',
													value
												)
											}
											placeholder="Enter section description..."
										/>
									)}
									</div>							
									
								</div>
								</>
							)}
							{section.type === 'education' && Array.isArray(section.items) && (
								<>
								<hr />
								<div className="wpcv-education-content">
									<div className="wpcv-section-title">
										<RichText
											tagName="h3"
											className=""
											value={section.title || ''}
											onChange={(value) =>
												updateField(sectionItems28.findIndex(s => s.id === section.id), "title", value)
											}
											placeholder={__('Enter section title…', 'cv-builder')}
										/>
									</div>
									<div>
										{section.items.map((item, itemIndex) => (
											<div key={item.id}  className="wpcv-education d-flex">
												<div className="wpcv-education-date">
													<span>{item.fromDate ? formatMonthDisplay(item.fromDate) : ""}
															{(item.toDate || item.current) && (
																<>
																	{((item.fromDate && item.toDate) ||
																		(item.fromDate && item.current) ||
																		(item.toDate && item.current)) && (
																			<span> &nbsp;–&nbsp; </span>
																		)}
																	{item.current ? "Present" : formatMonthDisplay(item.toDate)}
																</>
															)}
													</span>
												</div>
												<div>
													{item.institution && (
															<>
																<RichText
																	tagName="div"
																	className="wpcv-education-institute"
																	value={item.institution}
																	onChange={(value) => updateField(sectionItems28.findIndex(s => s.id === section.id), "institution", value, itemIndex)}
																/>
															</>
														)}
													{item.name && (
															<div className="wpcv-education-qualification">
																<ul>
																	<li>
																		<span>
																			<RichText
																				tagName="span"
																				value={item.name}
																				onChange={(value) => updateField(sectionItems28.findIndex(s => s.id === section.id), "name", value, itemIndex)}
																			/>
																			<>
																			{item.cgpa && (
																				<RichText
																					tagName="span"
																					value={item.cgpa}
																					onChange={(value) => updateField(sectionItems28.findIndex(s => s.id === section.id), "cgpa", value, itemIndex)}
																				/>
																			)}
																			{item.cgpaValue && (
																				<RichText
																					tagName="span"
																					value={item.cgpaValue}
																					onChange={(value) => updateField(sectionItems28.findIndex(s => s.id === section.id), "cgpaValue", value, itemIndex)}
																				/>
																			)}
																			</>
																		</span>
																		
																	</li>
																</ul>
															</div>
														)}
												</div>
											</div>
										))}
									</div>
									
								</div>
								</>
							)}
							{section.type === 'experience' && Array.isArray(section.items) && (
								<> <hr/>
								<div className="wpcv-experience-content">
									<div className="wpcv-section-title">
										<RichText
											tagName="h3"
											className=""
											value={section.title || ''}
											onChange={(value) =>
												updateField(sectionItems28.findIndex(s => s.id === section.id), "title", value)
											}
											placeholder={__('Enter section title…', 'cv-builder')}
										/>
									</div>
									
									{section.items.map((item, itemIndex) => (
										<div key={item.id} className="wpcv-experience d-flex">
											<div className="wpcv-experience-date">
												<span>
													{formatMonthDisplay(item.fromExpDate)} 
													{(item.current || item.toExpDate) ? ` – ${item.current ? "Present" : formatMonthDisplay(item.toExpDate)}` : ""}
													</span>
											</div>
											<div>
												<div className="wpcv-old-company">
													{item.designation && (
														<RichText
															tagName="span"
															className="wpcv-oldc-designation"
															value={item.designation}
															onChange={(value) => updateField(sectionItems28.findIndex(s => s.id === section.id), "designation", value, itemIndex)}
															placeholder="Enter designation..."
														/>
													)}
													{item.name && (
														<RichText
															tagName="span"
															className="wpcv-old-company"
															value={item.name}
															onChange={(value) => updateField(sectionItems28.findIndex(s => s.id === section.id), "name", value, itemIndex)}
															placeholder="Enter company name..."
														/>
													)}
												</div>
												<div className="wpcv-experience-description"
													dangerouslySetInnerHTML={{ __html: item.experienceDescription }} >
												</div>
											</div>
										</div>
									))}
								</div>
								</>
							)}
							{section.type === 'skills' && Array.isArray(section.items) && (
								<div class="wpcv-competencies-content d-flex">
									<div class="wpcv-section-title">
										<RichText
											tagName="h3"
											className=""
											value={section.title || ''}
											onChange={(value) =>
												updateField(sectionItems28.findIndex(s => s.id === section.id), "title", value)
											}
											placeholder={__('Enter section title…', 'cv-builder')}
										/>
									</div>
									<div class="wpcv-competencies">
										<ul>
											{section.items.map((item, itemIndex) => (
													<li key={itemIndex}>
														{item.name && (
															<RichText
																tagName="span"
																value={item.name}
																onChange={(value) => updateField(sectionItems28.findIndex(s => s.id === section.id), "name", value, itemIndex)}
															/>
														)}
													</li>
												))}
										</ul>
									</div>
								</div>
							)}
							{section.type === 'awards' && Array.isArray(section.items) && (
								<div class="wpcv-achievements-content d-flex">
									<div class="wpcv-section-title">
										<RichText
											tagName="h3"
											className=""
											value={section.title || ''}
											onChange={(value) =>
												updateField(sectionItems28.findIndex(s => s.id === section.id), "title", value)
											}
											placeholder={__('Enter section title…', 'cv-builder')}
										/>
									</div>
									<div class="wpcv-achievements">
										<ul>
											{section.items.map((item, itemIndex) => (
												<li key={itemIndex}>
													{item.name && (
														<RichText
															tagName="span"
															value={item.name}
															onChange={(value) => updateField(sectionItems28.findIndex(s => s.id === section.id), "name", value, itemIndex)}
														/>
													)}
												</li>
											))}
										</ul>
									</div>
								</div>
							)}
							{section.type === 'tools' && Array.isArray(section.items) && (
								<div class="wpcv-tools-content d-flex">
									<div class="wpcv-section-title">
										<RichText
												tagName="h3"
												className=""
												value={section.title || ''}
												onChange={(value) =>
													updateField(sectionItems28.findIndex(s => s.id === section.id), "title", value)
												}
												placeholder={__('Enter section title…', 'cv-builder')}
											/>
									</div>
									<div class="wpcv-tools">
										<ul>
											{section.items.map((item, itemIndex) => (
														<li key={itemIndex}>
															{item.name && (
																<RichText
																	tagName="span"
																	value={item.name}
																	onChange={(value) => updateField(sectionItems28.findIndex(s => s.id === section.id), "name", value, itemIndex)}
																/>
															)}
														</li>
													))}
										</ul>
									</div>
								</div>
							)}
							{section.type === 'languages' && Array.isArray(section.items) && (
								<div class="wpcv-languages-content d-flex">
									<div class="wpcv-section-title">
										<RichText
												tagName="h3"
												className=""
												value={section.title || ''}
												onChange={(value) =>
													updateField(sectionItems28.findIndex(s => s.id === section.id), "title", value)
												}
												placeholder={__('Enter section title…', 'cv-builder')}
											/>
									</div>
									<div class="wpcv-languages">
										<ul>
											{section.items.map((item, itemIndex) => (
													<li key={itemIndex}>
														{item.name && (
															<RichText
																tagName="span"
																value={item.name}
																onChange={(value) => updateField(sectionItems28.findIndex(s => s.id === section.id), "name", value, itemIndex)}
															/>
														)}
													</li>
												))}
										</ul>
									</div>
								</div>
							)}
							{section.type === 'contact' && (
								<div class="wpcv-contact-content d-flex">
									<div class="wpcv-section-title">
										<RichText
											tagName="h3"
											className=""
											value={section.title || ''}
											onChange={(value) =>
												updateField(sectionItems28.findIndex(s => s.id === section.id), "title", value)
											}
											placeholder={__('Enter section title…', 'cv-builder')}
										/>
									</div>
									<div class="wpcv-contact">
										<ul>
											{section.address && (
												<li>
													<span>
														<RichText
															tagName="a"
															value={section.address}
															onChange={(value) => updateField(index, 'address', value)}
														/>
													</span>
												</li>
											)}
											{section.email && (
												<li>
													<span>
														<RichText
															tagName="a"
															value={section.email}
															onChange={(value) => updateField(index, 'email', value)}
														/>
													</span>
												</li>
											)}
											{section.website && (
												<li>
													<span>
														<RichText
															tagName="a"
															value={section.website}
															onChange={(value) => updateField(index, 'website', value)}
														/>
													</span>
												</li>
											)}
											{section.phoneNumber && (
												<li>
													<span>
														<RichText
															tagName="a"
															value={section.phoneNumber}
															onChange={(value) => updateField(index, 'phoneNumber', value)}
														/>
													</span>
												</li>
											)}
											{section.city && (
												<li>
													<span>
														<RichText
															tagName="a"
															value={section.city}
															onChange={(value) => updateField(index, 'city', value)}
														/>
													</span>
												</li>
											)}
											{section.postalCode && (
												<li>
													<span>
														<RichText
															tagName="a"
															value={section.postalCode}
															onChange={(value) => updateField(index, 'postalCode', value)}
														/>
													</span>
												</li>
											)}
										</ul>
									</div>
								</div>
							)}
							{section.type === 'hobbies' && Array.isArray(section.items) && (
								<div class="wpcv-hobbies-content d-flex">
									<div class="wpcv-section-title">
										<RichText
												tagName="h3"
												className=""
												value={section.title || ''}
												onChange={(value) =>
													updateField(sectionItems28.findIndex(s => s.id === section.id), "title", value)
												}
												placeholder={__('Enter section title…', 'cv-builder')}
											/>
									</div>
									<div class="wpcv-hobbies">
										<ul>
											{section.items.map((item, itemIndex) => (
													<li key={itemIndex}>
														{item.name && (
															<RichText
																tagName="span"
																value={item.name}
																onChange={(value) => updateField(sectionItems28.findIndex(s => s.id === section.id), "name", value, itemIndex)}
															/>
														)}
													</li>
												))}
										</ul>
									</div>
								</div>
							)}
							{section.type === 'reference' && Array.isArray(section.items) && (
								<div className="wpcv-reference-content d-flex">
									<div className="wpcv-section-title">
										<RichText
											tagName="h3"
											className=""
											value={section.title || ''}
											onChange={(value) =>
												updateField(sectionItems28.findIndex(s => s.id === section.id), "title", value)
											}
											placeholder={__('Enter section title…', 'cv-builder')}
										/>
									</div>
									<div className='d-flex flex-gap15'>
										{section.items.map((item, itemIndex) => (
											<div key={itemIndex} className="wpcv-reference">
												{item.name && (
													<div className="wpcv-section-title">
														<RichText
															tagName="h3"
															value={item.name}
															onChange={(value) => updateField(sectionItems28.findIndex(s => s.id === section.id), "name", value, itemIndex)}
														/>
													</div>
												)}
												<div>
													<ul>
														{(item.company || item.jobPosition) && (
															<li>
																<RichText
																	tagName="span"
																	value={item.company}
																	onChange={(value) => updateField(sectionItems28.findIndex(s => s.id === section.id), "company", value, itemIndex)}
																/>
																{item.company && item.jobPosition && (
																	<span>,&nbsp; </span>
																)}
																<RichText
																	tagName="span"
																	value={item.jobPosition}
																	onChange={(value) => updateField(sectionItems28.findIndex(s => s.id === section.id), "jobPosition", value, itemIndex)}
																/>
															</li>
														)}
														{item.phone && (
															<li>
																<RichText
																	tagName="span"
																	value={item.phone}
																	onChange={(value) => updateField(sectionItems28.findIndex(s => s.id === section.id), "phone", value, itemIndex)}
																/>
															</li>
														)}
														{item.relation && (
															<li>
																<RichText
																	tagName="span"
																	value={item.relation}
																	onChange={(value) => updateField(sectionItems28.findIndex(s => s.id === section.id), "relation", value, itemIndex)}
																/>
															</li>
														)}
													</ul>
												</div>
											</div>
										))}
									</div>
								</div>
							)}
						</div>
					))}
					
				</div>
			</div>
		</div>
	);
}

export default templateThree;