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 templateTwo() {
	const { attributes, setAttributes, scrollToInspectorControl, updateField, formatMonthDisplay, placeholderImageUrl, currentData, updateDataByStyleField, containerRef } = useContext(BlockContext);
	const {
		sectionItems27,
		profileImage,
		hasInitialized,
		showQRCode,
	} = attributes;
	function getTranslatedDefaults() {
		return [
			{
				id: '1',
				type: 'about',
				title: __( 'About Me', 'cv-builder' ),
				description: __( 'Results-driven HR & Administration Manager with over 12 years of experience streamlining HR processes, leading recruitment efforts, enhancing employee engagement, and overseeing administrative functions in dynamic business environments. Adept at policy development, compliance, and fostering strong organisational culture. Skilled in managing cross-functional teams, optimising workflows, and delivering cost-effective solutions.', 'cv-builder' ),
			},
			{
				id: '3',
				type: 'experience',
				title: __( 'Experience', 'cv-builder' ),
				items: [
					{
						name: __( 'Biffco Enterprises Ltd.', 'cv-builder' ),
						designation: __( 'Manager, HR & Administration', 'cv-builder' ),
						present: true,
						fromExpDate: __( 'June 2022', 'cv-builder' ),
						toExpDate: __( 'May 2024', 'cv-builder' ),
						experienceDescription: `<ul>
							<li><span>${__( 'Led full-cycle HR functions including recruitment, onboarding, payroll, employee relations, and performance management for a team of [X] employees.', 'cv-builder' )}</span></li>
							<li><span>${__( 'Implemented HR policies and procedures, ensuring compliance with labor laws and organizational standards.', 'cv-builder' )}</span></li>
							<li><span>${__( 'Oversaw office administration including procurement, vendor management, and facility operations.', 'cv-builder' )}</span></li>
							<li><span>${__( 'Supported senior leadership with strategic planning and organizational development.', 'cv-builder' )}</span></li>
							<li><span>${__( 'Reduced employee turnover by 10% by launching new engagement and retention strategies.', 'cv-builder' )}</span></li>
						</ul>`,
					},
					{
						name: __( 'XYZ Solutions', 'cv-builder' ),
						designation: __( 'Assistant Manager. HR & Administration', 'cv-builder' ),
						present: false,
						fromExpDate: __( 'June 2020', 'cv-builder' ),
						toExpDate: __( 'June 2022', 'cv-builder' ),
						experienceDescription: `<ul>
                                <li><span>${__( 'Assisted with hiring, training, and orientation of new staff.', 'cv-builder' )}</span></li>
                                <li><span>${__( 'Managed employee records, attendance, and leave systems.', 'cv-builder' )}</span></li>
                                <li><span>${__( 'Coordinated internal events, workshops, and employee wellness programs.', 'cv-builder' )}</span></li>
                                <li><span>${__( 'Acted as point of contact between management and staff, resolving HR-related queries.', 'cv-builder' )}</span></li>
                            </ul>`,
					},
					{
						name: __( 'ABC Corporation', 'cv-builder' ),
						designation: __( 'Officer, HR & Administration', 'cv-builder' ),
						present: false,
						fromExpDate: __( 'June 2015', 'cv-builder' ),
						toExpDate: __( 'June 2020', 'cv-builder' ),
						experienceDescription: `<ul>
                                <li><span>${__( 'Supported payroll processing and maintained employee attendance and leave records.', 'cv-builder' )}</span></li>
                                <li><span>${__( 'Ensured compliance with HR regulations and supported audit preparations.', 'cv-builder' )}</span></li>
                                <li><span>${__( 'Assisted in organising corporate events, meetings, and office logistics.', 'cv-builder' )}</span></li>
                                <li><span>${__( 'Handled confidential employee data and prepared HR documentation and reports.', 'cv-builder' )}</span></li>
                            </ul>`,
					},
				],
			},
			{
				id: '4',
				type: 'education',
				title: __( 'Educational Qualification', 'cv-builder' ),
				items: [
					{
						institution: __( 'The University of Bolton', 'cv-builder' ),
						name: __( 'Master’s in Human Resources', 'cv-builder' ),
						fromDate: __( 'July 2014', 'cv-builder' ),
						toDate: __( 'July 2015', 'cv-builder' ),
						current: false,
					},
					{
						institution: __( 'Birmingham City University', 'cv-builder' ),
						name: __( 'Bachelor’s in Human Resources', 'cv-builder' ),
						fromDate: __( 'June 2010', 'cv-builder' ),
						toDate: __( 'June 2014', 'cv-builder' ),
						current: false,
					},
				],
			},
			{
				id: '5',
				type: 'skills',
				title: __( 'Technical Skills', 'cv-builder' ),
				items: [
					{ name: __( 'Recruitment & Talent Acquisition', 'cv-builder' ) },
					{ name: __( 'Performance Management', 'cv-builder' ) },
					{ name: __( 'Policy Development', 'cv-builder' ) },
					{ name: __( 'Employee Engagement', 'cv-builder' ) },
					{ name: __( 'Team Leadership', 'cv-builder' ) },
					{ name: __( 'Labor Law & Compliance', 'cv-builder' ) },
					{ name: __( 'HRIS & Payroll Systems', 'cv-builder' ) },
					{ name: __( 'Office Administration', 'cv-builder' ) },
					{ name: __( 'Conflict Resolution', 'cv-builder' ) },
					{ name: __( 'Problem Solution', 'cv-builder' ) },
				],
			},
			{
				id: '8',
				type: 'tools',
				title: __( 'Tools & Software', 'cv-builder' ),
				items: [
					{ name: __( 'MS Office (Excel, Word, PowerPoint)', 'cv-builder' ) },
					{ name: __( 'HRIS Systems (SAP, BambooHR, etc.)', 'cv-builder' ) },
					{ name: __( 'ATS (Workable, Greenhouse, etc.)', 'cv-builder' ) },
					{ name: __( 'Slack / Trello / Asana', 'cv-builder' ) },
					{ name: __( 'G-Suite', 'cv-builder' ) },
				],
			},
			{
				id: '7',
				type: 'languages',
				title: __( 'Languages', 'cv-builder' ),
				items: [
					{ name: __( 'English – Fluent', 'cv-builder' ) },
					{ name: __( 'Spanish – Intermediate', 'cv-builder' ) },
				],
			},
			{
				id: '2',
				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: '6',
				type: 'awards',
				title: __( 'Achievements & Awards', 'cv-builder' ),
				items: [
					{ name: __( 'Top Finance Leader LATAM – Global Capital Solutions, 2022', 'cv-builder' ) },
					{ name: __( 'Outstanding Account Manager – Banco Nacional, 2018', 'cv-builder' ) },
					{ name: __( 'Reduced finance operating expenses by $250K annually', 'cv-builder' ) },
					{ name: __( 'Successfully led post-merger finance integration project across 3 countries', 'cv-builder' ) },
				],
			},
			{
				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 (!sectionItems27 || sectionItems27.length === 0) {
			setAttributes({
				sectionItems27: 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',
		'style27/hide-social-icons',
		() => false
	);
	addFilter(
		'bwdcv-footer-visibility',
		'style27/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 temp3">
				<div className="wpcv-temp3-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="h4"
									className="wpcv-designation"
									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.phoneNumber && (
										<li>
											<RichText
												tagName="a"
												value={currentData.phoneNumber || ''}
												onChange={(value) => updateDataByStyleField('phoneNumber', value)}
												href={currentData.phoneNumber
													? `tel:${currentData.phoneNumber}`
													: undefined
												}
											/>
										</li>
									)}
									{currentData.email && (
										<li>
											<RichText
												tagName="a"
												value={currentData.email}
												onChange={(value) => updateDataByStyleField('email', value)}
												href={currentData.email
													? `mailto:${currentData.email}`
													: undefined
												}
											/>
										</li>
									)}
									{currentData.city && (
										<li>
											<RichText
												tagName="span"
												value={currentData.city}
												onChange={(value) => updateDataByStyleField('city', value)}
											/>
										</li>
									)}
									{currentData.website && (
										<li>
											<RichText
												tagName="a"
												value={currentData.website}
												onChange={(value) => updateDataByStyleField('website', value)}
												href={currentData.website
													? `${currentData.website}`
													: undefined
												}
											/>
										</li>
									)}
									{currentData.postalCode && (
										<li>
											<RichText
												tagName="span"
												value={currentData.postalCode}
												onChange={(value) => updateDataByStyleField('postalCode', value)}
											/>
										</li>
									)}
								</>
							</ul>
						</div>
					</div>
					<hr />

					{sectionItems27 && sectionItems27.map((section, index) => (
						<div key={section.id} onClick={() => scrollToInspectorControl(section.id)}>
							{section.type === 'about' && (
								<div className="wpcv-about-content">									
									<RichText
										tagName="p"
										value={section.description}
										id="contentGeResult"
										onChange={(value) =>
											updateField(
												sectionItems27.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(
													sectionItems27.findIndex(s => s.id === section.id),
													'generatedContent',
													value
												)
											}
											placeholder="Enter section description..."
										/>
									)}
								</div>
							)}
							{section.type === 'experience' && Array.isArray(section.items) && (
								<div className="wpcv-experience-content">
									<div className="wpcv-section-title">
										<RichText
											tagName="h3"
											className=""
											value={section.title || ''}
											onChange={(value) =>
												updateField(sectionItems27.findIndex(s => s.id === section.id), "title", value)
											}
											placeholder={__('Enter section title…', 'cv-builder')}
										/>
									</div>
									<hr />
									{section.items.map((item, itemIndex) => (
										<div key={item.id} className="wpcv-experience">
											<div className="d-flex justify-content-between align-items-center">
												<div className="d-flex align-items-center">
													{item.name && (
														<RichText
															tagName="div"
															className="wpcv-old-company"
															value={item.name}
															onChange={(value) => updateField(sectionItems27.findIndex(s => s.id === section.id), "name", value, itemIndex)}
															placeholder="Enter company name..."
														/>
													)}
													{item.designation && (
														<RichText
															tagName="div"
															className="wpcv-oldc-designation"
															value={item.designation}
															onChange={(value) => updateField(sectionItems27.findIndex(s => s.id === section.id), "designation", value, itemIndex)}
															placeholder="Enter designation..."
														/>
													)}
												</div>
												<div className="wpcv-experience-date">
													<span>
														{formatMonthDisplay(item.fromExpDate)}
														{(item.current || item.toExpDate) ? ` – ${item.current ? "Present" : formatMonthDisplay(item.toExpDate)}` : ""}
													</span>
												</div>
											</div>
											<div>
												<div className="wpcv-experience-description"
													dangerouslySetInnerHTML={{ __html: item.experienceDescription }} >
												</div>
											</div>
										</div>
									))}
								</div>
							)}
							{section.type === 'education' && Array.isArray(section.items) && (
								<div className="wpcv-education-content">
									<div className="wpcv-section-title">
										<RichText
											tagName="h3"
											className=""
											value={section.title || ''}
											onChange={(value) =>
												updateField(sectionItems27.findIndex(s => s.id === section.id), "title", value)
											}
											placeholder={__('Enter section title…', 'cv-builder')}
										/>
									</div>
									<hr />
									<div>
										{section.items.map((item, itemIndex) => (
											<div key={item.id} className="wpcv-education">
												<div className="d-flex justify-content-between align-items-center">
													<div className="d-flex align-items-center">
														{item.institution && (
															<div className="wpcv-education-institute">
																<RichText
																	tagName="strong"
																	value={item.institution}
																	onChange={(value) => updateField(sectionItems27.findIndex(s => s.id === section.id), "institution", value, itemIndex)}
																/>
															</div>
														)}
														{item.name && (
															<div className="wpcv-education-qualification">
																<RichText
																	tagName="span"
																	value={item.name}
																	onChange={(value) => updateField(sectionItems27.findIndex(s => s.id === section.id), "name", value, itemIndex)}
																/>
															</div>
														)}
													</div>
													<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>
											</div>
										))}
									</div>
								</div>
							)}
							{section.type === 'skills' && Array.isArray(section.items) && (
								<div className="wpcv-competencies-content">
									<div className="wpcv-section-title">
										<RichText
											tagName="h3"
											className=""
											value={section.title || ''}
											onChange={(value) =>
												updateField(sectionItems27.findIndex(s => s.id === section.id), "title", value)
											}
											placeholder={__('Enter section title…', 'cv-builder')}
										/>
									</div>
									<hr />
									<div>
										<div className="wpcv-competencies">
											<ul>
												{section.items.map((item, itemIndex) => (
													<li key={itemIndex}>
														{item.name && (
															<RichText
																tagName="span"
																value={item.name}
																onChange={(value) => updateField(sectionItems27.findIndex(s => s.id === section.id), "name", value, itemIndex)}
															/>
														)}
													</li>
												))}
											</ul>
										</div>
									</div>
								</div>
							)}
							{section.type === 'tools' && Array.isArray(section.items) && (
								<div className="wpcv-tools-content">
									<div className="wpcv-section-title">
										<RichText
											tagName="h3"
											className=""
											value={decodeEntities(section.title || '')}
											onChange={(value) =>
												updateField(sectionItems27.findIndex(s => s.id === section.id), "title", value)
											}
											placeholder={__('Enter section title…', 'cv-builder')}
										/>
									</div>
									<hr />
									<div>
										<div className="wpcv-tools">
											<ul>
												{section.items.map((item, itemIndex) => (
													<li key={itemIndex}>
														{item.name && (
															<RichText
																tagName="span"
																value={item.name}
																onChange={(value) => updateField(sectionItems27.findIndex(s => s.id === section.id), "name", value, itemIndex)}
															/>
														)}
													</li>
												))}
											</ul>
										</div>
									</div>
								</div>
							)}
							{section.type === 'languages' && Array.isArray(section.items) && (
								<div className="wpcv-languages-content">
									<div className="wpcv-section-title">
										<RichText
											tagName="h3"
											className=""
											value={section.title || ''}
											onChange={(value) =>
												updateField(sectionItems27.findIndex(s => s.id === section.id), "title", value)
											}
											placeholder={__('Enter section title…', 'cv-builder')}
										/>
									</div>
									<hr />
									<div>
										<div className="wpcv-languages">
											<ul>
												{section.items.map((item, itemIndex) => (
													<li key={itemIndex}>
														{item.name && (
															<RichText
																tagName="span"
																value={item.name}
																onChange={(value) => updateField(sectionItems27.findIndex(s => s.id === section.id), "name", value, itemIndex)}
															/>
														)}
													</li>
												))}
											</ul>
										</div>
									</div>
								</div>
							)}
							{section.type === 'contact' && (
								<div className="wpcv-contacts-content">
									<div className="wpcv-section-title">
										<RichText
											tagName="h3"
											className=""
											value={section.title || ''}
											onChange={(value) =>
												updateField(sectionItems27.findIndex(s => s.id === section.id), "title", value)
											}
											placeholder={__('Enter section title…', 'cv-builder')}
										/>
									</div>
									<hr />
									<div>
										<div className="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>
								</div>
							)}
							{section.type === 'awards' && Array.isArray(section.items) && (
								<div className="wpcv-award-content">
									<div className="wpcv-section-title">
										<RichText
											tagName="h3"
											className=""
											value={decodeEntities(section.title || '')}
											onChange={(value) =>
												updateField(sectionItems27.findIndex(s => s.id === section.id), "title", value)
											}
											placeholder={__('Enter section title…', 'cv-builder')}
										/>
									</div>
									<hr />
									<div className="wpcv-award">
										<ul>
											{section.items.map((item, itemIndex) => (
												<li key={itemIndex}>
													{item.name && (
														<RichText
															tagName="span"
															value={item.name}
															onChange={(value) => updateField(sectionItems27.findIndex(s => s.id === section.id), "name", value, itemIndex)}
														/>
													)}
												</li>
											))}
										</ul>
									</div>
								</div>
							)}
							{section.type === 'hobbies' && Array.isArray(section.items) && (
								<div className="wpcv-hobbies-content">
									<div className="wpcv-section-title">
										<RichText
											tagName="h3"
											className=""
											value={section.title || ''}
											onChange={(value) =>
												updateField(sectionItems27.findIndex(s => s.id === section.id), "title", value)
											}
											placeholder={__('Enter section title…', 'cv-builder')}
										/>
									</div>
									<hr />
									<div className="wpcv-hobbies">
										<ul>
											{section.items.map((item, itemIndex) => (
												<li key={itemIndex}>
													{item.name && (
														<RichText
															tagName="span"
															value={item.name}
															onChange={(value) => updateField(sectionItems27.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">
									<div className="wpcv-section-title">
										<RichText
											tagName="h3"
											className=""
											value={section.title || ''}
											onChange={(value) =>
												updateField(sectionItems27.findIndex(s => s.id === section.id), "title", value)
											}
											placeholder={__('Enter section title…', 'cv-builder')}
										/>
									</div>
									<hr />
									<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(sectionItems27.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(sectionItems27.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(sectionItems27.findIndex(s => s.id === section.id), "jobPosition", value, itemIndex)}
																/>
															</li>
														)}
														{item.phone && (
															<li>
																<RichText
																	tagName="span"
																	value={item.phone}
																	onChange={(value) => updateField(sectionItems27.findIndex(s => s.id === section.id), "phone", value, itemIndex)}
																/>
															</li>
														)}
														{item.relation && (
															<li>
																<RichText
																	tagName="span"
																	value={item.relation}
																	onChange={(value) => updateField(sectionItems27.findIndex(s => s.id === section.id), "relation", value, itemIndex)}
																/>
															</li>
														)}
													</ul>
												</div>
											</div>
										))}
									</div>
								</div>
							)}

						</div>
					))}
				</div>
			</div>
		</div>
	);
}

export default templateTwo;
