/* eslint-disable react-hooks/exhaustive-deps */
import type React from 'react';
import { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';

import useCurrencyLabel from '../../../../hooks/useCurrencyLabel';
import type { RootState } from '../../../../ReduxState/store';
import { cashFlowProfitabilityCalculator } from '../../../../Store/CashFlowAnalysis/CashFlowSummary/cahs-flow-analysis-context-helper';
import type { FinancialsModel } from '../../../Financials/Components/FinancialsForm/FinancialsForm.helper';
import styles from '../../../MoneyForCeos/Components/MoneyForCeosTable.module.scss';
import CustomWidthTooltip from '../../../../Components/UI/CustomWidthTooltip/CustomWidthTooltip';
import getThreeLetterMonthName from '../../../../utils/getThreeLetterMonthName';
import {
	determinePolarityOfChange,
	decreaseIsGoodThing,
	increaseIsGoodThing
} from '../../../../utils/determinePolarityOfChange';

const CashFlowPerspectiveTable: React.FC = (): JSX.Element => {
	/** NEW */
	const selectedFinancials = useSelector(
		(state: RootState): FinancialsModel[] | null => state.financials.selectedFinancials
	);
	/** NEW end */
	const [revenueGrowthSecondFinancial, setRevenueGrowthSecondFinancial] = useState<string>('');
	const [revenueGrowthThirdFinancial, setRevenueGrowthThirdFinancial] = useState<string>('');
	const [cogsFirst, setCogsFirst] = useState<string>('');
	const [cogsSecond, setCogsSecond] = useState<string>('');
	const [grossMarginFirst, setGrossMarginFirst] = useState<string>('');
	const [grossMarginSecond, setGrossMarginSecond] = useState<string>('');
	const [contributionMarginFirst, setContributionMarginFirst] = useState<string>('');
	const [contributionMarginSecond, setContributionMarginSecond] = useState<string>('');
	const [changeContributionMargin, setChangeContributionMargin] = useState<string>('');
	const [overheadsFirst, setOverheadsFirst] = useState<string>('');
	const [overheadsSecond, setOverheadsSecond] = useState<string>('');
	const [secondFinYearEnd, setSecondFinYearEnd] = useState('');
	const [secondFinMonthEnd, setSecondFinMonthEnd] = useState('');
	const [thirdFinMonthEnd, setThirdFinMonthEnd] = useState('');
	const [thirdFinYearEnd, setThirdFinYearEnd] = useState('');
	const [secFinRevenue, setSecFinRevenue] = useState<string>('');
	const [thirdFinRevenue, setThirdFinRevenue] = useState('');
	const [ebitFirst, setEbitFirst] = useState('');
	const [ebitSecond, setEbitSecond] = useState('');
	const [netProfitBeforeOfRevenueFirst, setNetProfitBeforeOfRevenueFirst] = useState('');
	const [netProfitBeforeOfRevenueSecond, setNetProfitBeforeOfRevenueSecond] = useState('');
	const [netProfitBeforeOfGrossMarginFirst, setNetProfitBeforeOfGrossMarginFirst] = useState('');
	const [netProfitBeforeOfGrossMarginSecond, setNetProfitBeforeOfGrossMarginSecond] = useState('');
	const [netProfitAfterTaxFirst, setNetProfitAfterTaxFirst] = useState('');
	const [netProfitAfterTaxSecond, setNetProfitAfterTaxSecond] = useState('');
	const [ebitdaFirst, setEbitdaFirst] = useState('');
	const [ebitdaSecond, setEbitdaSecond] = useState('');
	const [changeRevenue, setChangeRevenue] = useState<string>('');
	const [changeRevenueGrowth, setChangeRevenueGrowth] = useState<string>('');
	const [changeCogs, setChangeCogs] = useState<string>('');
	const [changeGrossMargin, setChangeGrossMargin] = useState<string>('');
	const [changeEbitOfRevenue, setChangeEbitOfRevenue] = useState<string>('');
	const [changeEbitda, setChangeEbitda] = useState<string>('');
	const [changeNetProfitOfRevenue, setChangeNetProfitOfRevenue] = useState<string>('');
	const [changeNetProfitOfGrossMargin, setChangeNetProfitOfGrossMargin] = useState<string>('');
	const [changeNetProfitAfterTax, setChangeNetProfitAfterTax] = useState<string>('');
	const [changeOverheads, setChangeOverheads] = useState<string>('');
	const [cogsGrowthFirst, setCogsGrowthFirst] = useState<string>('');
	const [cogsGrowthSecond, setCogsGrowthSecond] = useState<string>('');
	const [cogsGrowthThird, setCogsGrowthThird] = useState<string>('');
	const [overheadsGrowthFirst, setOverheadsGrowthFirst] = useState<string>('');
	const [overheadsGrowthSecond, setOverheadsGrowthSecond] = useState<string>('');
	const [overheadsGrowthSum, setOverheadsGrowthSum] = useState<string>('');
	const [lerFirst, setLerFirst] = useState<string>('');
	const [lerSecond, setLerSecond] = useState<string>('');
	useEffect(() => {
		// const firstFinancial: FinancialsModel = JSON.parse(
		// 	localStorage.getItem('first-financial') as string
		// );
		// const secondFinancial: FinancialsModel = JSON.parse(
		// 	localStorage.getItem('second-financial') as string
		// );
		// const thirdFinancial: FinancialsModel = JSON.parse(
		// 	localStorage.getItem('third-financial') as string
		// );
		if (!selectedFinancials) return;
		const {
			calculatedRevenueGrowthSecondFinancial,
			calculatedCogsSecond,
			calculatedRevenueGrowthThirdFinancial,
			calculateCogsFirst,
			secondFinancialYearEnding,
			secondFinancialMonthEnding,
			thirdFinancialYearEnding,
			thirdFinancialMonthEnding,
			ThirdRevenue,
			SecondRevenue,
			calculatedGrossMarginSecond,
			calculatedGrossMarginFirst,
			calculatedContributionMarginFirst,
			calculatedContributionMarginSecond,
			calculatedChangeContributionMargin,
			calculatedOverheadsFirst,
			calculatedOverheadsSecond,
			calculatedEbitPercentOfRevenueFirst,
			calculatedEbitPercentOfRevenueSecond,
			calculatedNetProfitBeforeTaxOfRevenueSecond,
			calculatedNetProfitAfterTaxSecond,
			calculatedNetProfitAfterTaxFirst,
			calculatedEbitdaFirst,
			calculatedEbitdaSecond,
			calculatedNetProfitBeforeTaxOfRevenueFirst,
			calculatedNetProfitBeforeTaxOfGrossMarginFirst,
			calculatedNetProfitBeforeTaxOfGrossMarginSecond,
			calculatedChangeEbitOfRevenue,
			calculatedChangeEbitda,
			calculatedChangeCogs,
			calculatedChangeGrossMargin,
			calculatedChangeNetProfitOfGrossMargin,
			calculatedChangeNetProfitAfterTax,
			calculatedChangeRevenueGrowth,
			calculatedChangeNetProfitOfRevenue,
			calculatedChangeRevenue,
			calculatedChangeOverheads,
			calculatedCogsGrowthSecond,
			calculatedCogsGrowthFirst,
			calculatedCogsGrowthThird,
			calculatedOverheadsGrowthFirst,
			calculatedOverheadsGrowthSecond,
			calculatedOverheadsGrowthSum,
			calculatedLerFirst,
			calculatedLerSecond
		} = cashFlowProfitabilityCalculator(
			selectedFinancials[0],
			selectedFinancials[1],
			selectedFinancials[2]
		);
		setOverheadsGrowthFirst(calculatedOverheadsGrowthFirst.toFixed(2).toString());
		setOverheadsGrowthSecond(calculatedOverheadsGrowthSecond.toFixed(2).toString());
		setOverheadsGrowthSum(calculatedOverheadsGrowthSum.toFixed(2).toString());
		setChangeCogs(calculatedChangeCogs.toFixed(2).toString());
		setChangeRevenue(calculatedChangeRevenue.toFixed(2).toString());
		setChangeEbitda(calculatedChangeEbitda.toFixed(2).toString());
		setChangeNetProfitAfterTax(calculatedChangeNetProfitAfterTax.toFixed(2).toString());
		setChangeGrossMargin(calculatedChangeGrossMargin.toFixed(2).toString());
		setChangeEbitOfRevenue(calculatedChangeEbitOfRevenue.toFixed(2).toString());
		setChangeNetProfitOfRevenue(calculatedChangeNetProfitOfRevenue.toFixed(2).toString());
		setChangeNetProfitOfGrossMargin(calculatedChangeNetProfitOfGrossMargin.toFixed(2).toString());
		setChangeRevenueGrowth(calculatedChangeRevenueGrowth.toFixed(2).toString());
		setChangeOverheads(calculatedChangeOverheads.toFixed(2).toString());
		setLerFirst(calculatedLerFirst.toFixed(2).toString());
		setLerSecond(calculatedLerSecond.toFixed(2).toString());

		setEbitdaFirst(calculatedEbitdaFirst.toFixed(0).toString());
		setEbitdaSecond(calculatedEbitdaSecond.toFixed(0).toString());
		setNetProfitBeforeOfRevenueFirst(
			calculatedNetProfitBeforeTaxOfRevenueFirst.toFixed(2).toString()
		);
		setNetProfitBeforeOfRevenueSecond(
			calculatedNetProfitBeforeTaxOfRevenueSecond.toFixed(2).toString()
		);
		setNetProfitAfterTaxFirst(calculatedNetProfitAfterTaxFirst.toFixed(2).toString());
		setNetProfitAfterTaxSecond(calculatedNetProfitAfterTaxSecond.toFixed(2).toString());
		setNetProfitBeforeOfGrossMarginFirst(
			calculatedNetProfitBeforeTaxOfGrossMarginFirst.toFixed(2).toString()
		);
		setNetProfitBeforeOfGrossMarginSecond(
			calculatedNetProfitBeforeTaxOfGrossMarginSecond.toFixed(2).toString()
		);

		setRevenueGrowthSecondFinancial(calculatedRevenueGrowthSecondFinancial.toFixed(2).toString());
		setRevenueGrowthThirdFinancial(calculatedRevenueGrowthThirdFinancial.toFixed(2).toString());
		setCogsFirst(calculateCogsFirst.toFixed(2).toString());
		setCogsSecond(calculatedCogsSecond.toFixed(2).toString());
		setGrossMarginFirst(calculatedGrossMarginFirst.toFixed(2).toString());
		setGrossMarginSecond(calculatedGrossMarginSecond.toFixed(2).toString());
		setContributionMarginFirst(calculatedContributionMarginFirst.toFixed(2).toString());
		setContributionMarginSecond(calculatedContributionMarginSecond.toFixed(2).toString());
		setChangeContributionMargin(calculatedChangeContributionMargin.toFixed(2).toString());
		setOverheadsFirst(calculatedOverheadsFirst.toFixed(2).toString());
		setOverheadsSecond(calculatedOverheadsSecond.toFixed(2).toString());
		setSecFinRevenue(SecondRevenue);
		setThirdFinRevenue(ThirdRevenue);
		setSecondFinYearEnd(secondFinancialYearEnding);
		setThirdFinYearEnd(thirdFinancialYearEnding);
		setSecondFinMonthEnd(secondFinancialMonthEnding);
		setThirdFinMonthEnd(thirdFinancialMonthEnding);
		setEbitFirst(calculatedEbitPercentOfRevenueFirst.toFixed(2).toString());
		setEbitSecond(calculatedEbitPercentOfRevenueSecond.toFixed(2).toString());
		setCogsGrowthFirst(calculatedCogsGrowthFirst.toFixed(2).toString());
		setCogsGrowthSecond(calculatedCogsGrowthSecond.toFixed(2).toString());
		setCogsGrowthThird(calculatedCogsGrowthThird.toFixed(2).toString());
	}, [
		localStorage.getItem('first-financial'),
		localStorage.getItem('second-financial'),
		localStorage.getItem('third-financial'),
		secFinRevenue,
		thirdFinRevenue
	]);
	const currency = localStorage.getItem('currency');
	const { currencyLabel } = useCurrencyLabel();
	// const determinePolarityOfChange = (
	// 	originalValue: number,
	// 	movedValue: number,
	// 	changeValue: number
	// ) => {
	// 	if (originalValue === 0) {
	// 		return movedValue;
	// 	}

	// 	if (movedValue === 0) {
	// 		return -1 * originalValue;
	// 	}

	// 	if (originalValue < movedValue) {
	// 		return Math.abs(changeValue);
	// 	}

	// 	return -1 * Math.abs(changeValue);
	// };
	// const increaseIsGoodThing = (originalValue: number, movedValue: number) => {
	// 	if (originalValue < movedValue) {
	// 		return styles.green;
	// 	}

	// 	return styles.red;
	// };
	// const decreaseIsGoodThing = (originalValue: number, movedValue: number) => {
	// 	if (originalValue > movedValue) {
	// 		return styles.green;
	// 	}

	// 	return styles.red;
	// };

	return (
		<div className={styles.formContainer}>
			<div className={styles.tableFooter5}>
				<p>
					<b>Profitability</b>
				</p>
				<p>
					<b>
						{getThreeLetterMonthName(secondFinMonthEnd)} {secondFinYearEnd}
					</b>
				</p>
				<p>
					<b>
						{getThreeLetterMonthName(thirdFinMonthEnd)} {thirdFinYearEnd}
					</b>
				</p>
				<p>
					<b>Change</b>
				</p>
			</div>
			<div className={styles.inputContainer}>
				<label className={styles.labelClass} htmlFor="priceIncrease">
					<CustomWidthTooltip title="Total income from sales before expenses." />
					Revenue
				</label>

				<p className={styles.netCashFlow}>
					{currency}{' '}
					{parseFloat(secFinRevenue).toLocaleString('en-GB', {
						style: 'currency',
						currency: currencyLabel,
						minimumFractionDigits: 0,
						maximumFractionDigits: 0
					})}
				</p>
				<p className={styles.netCashFlow}>
					{currency}{' '}
					{parseFloat(thirdFinRevenue).toLocaleString('en-GB', {
						style: 'currency',
						currency: currencyLabel,
						minimumFractionDigits: 0,
						maximumFractionDigits: 0
					})}
				</p>
				<p className={`${styles.ebit} ${increaseIsGoodThing(+secFinRevenue, +thirdFinRevenue)}`}>
					{determinePolarityOfChange(+secFinRevenue, +thirdFinRevenue, +changeRevenue)
						.toString()
						.replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')}{' '}
					%
				</p>
			</div>
			<div className={styles.inputContainer}>
				<label className={styles.labelClass} htmlFor="volumeIncrease">
					<CustomWidthTooltip title="The pace at which sales are changing compared to previous period." />
					Revenue Growth %
				</label>
				<p className={styles.netCashFlow}>{revenueGrowthSecondFinancial} %</p>
				<p className={styles.netCashFlow}>{revenueGrowthThirdFinancial} %</p>
				<p
					className={`${styles.ebit} ${increaseIsGoodThing(
						+revenueGrowthSecondFinancial,
						+revenueGrowthThirdFinancial
					)}`}
				>
					{determinePolarityOfChange(
						+revenueGrowthSecondFinancial,
						+revenueGrowthThirdFinancial,
						+changeRevenueGrowth
					)}{' '}
					%
				</p>
			</div>
			<div className={styles.inputContainer}>
				<label className={styles.labelClass} htmlFor="cogsReduction">
					<CustomWidthTooltip title="The portion of revenue consumed by delivering your product/service." />
					COGS %
				</label>
				<p className={styles.netCashFlow}>{cogsFirst} %</p>
				<p className={styles.netCashFlow}>{cogsSecond} %</p>
				<p className={`${styles.ebit} ${decreaseIsGoodThing(+cogsFirst, +cogsSecond)}`}>
					{determinePolarityOfChange(+cogsFirst, +cogsSecond, +changeCogs)} %
				</p>
			</div>
			<div className={styles.inputContainer}>
				<label className={styles.labelClass} htmlFor="grossMarginReduction">
					<CustomWidthTooltip title="The percentage of sales left after direct costs; your first profitability gate. Your “true” economic top line." />
					<b>Gross Margin %</b>
				</label>
				<p className={styles.netCashFlow} style={{ fontWeight: '900' }}>
					{grossMarginFirst} %
				</p>
				<p className={styles.netCashFlow} style={{ fontWeight: '900' }}>
					{grossMarginSecond} %
				</p>
				<p
					className={`${styles.ebit} ${increaseIsGoodThing(+grossMarginFirst, +grossMarginSecond)}`}
					style={{ fontWeight: '900' }}
				>
					{determinePolarityOfChange(+grossMarginFirst, +grossMarginSecond, +changeGrossMargin)} %
				</p>
			</div>
			<div className={styles.inputContainer}>
				<label className={styles.labelClass} htmlFor="grossMarginReduction">
					<CustomWidthTooltip title="The margin available to fund overheads and profit once variable costs are covered - your most important profitability indicator." />
					<b>Contribution Margin %</b>
				</label>
				<p className={styles.netCashFlow} style={{ fontWeight: '900' }}>
					{contributionMarginFirst} %
				</p>
				<p className={styles.netCashFlow} style={{ fontWeight: '900' }}>
					{contributionMarginSecond} %
				</p>
				<p
					className={`${styles.ebit} ${increaseIsGoodThing(
						+contributionMarginFirst,
						+contributionMarginSecond
					)}`}
				>
					{determinePolarityOfChange(
						+contributionMarginFirst,
						+contributionMarginSecond,
						+changeContributionMargin
					)}{' '}
					%
				</p>
			</div>
			<div className={styles.inputContainer}>
				<label className={styles.labelClass} htmlFor="overheadsReduction">
					<CustomWidthTooltip title="Your fixed “business infrastructure” costs relative to revenue." />
					Overheads %
				</label>
				<p className={styles.netCashFlow}>{overheadsFirst} %</p>
				<p className={styles.netCashFlow}>{overheadsSecond} %</p>
				<p className={`${styles.ebit} ${decreaseIsGoodThing(+overheadsFirst, +overheadsFirst)}`}>
					{determinePolarityOfChange(+overheadsFirst, +overheadsSecond, +changeOverheads)} %
				</p>
			</div>
			<div className={styles.inputContainer}>
				<label className={styles.labelClass} htmlFor="ebitPercentOfRevenueReduction">
					<CustomWidthTooltip title="Profit from operations before financing and tax; a measure of operating efficiency." />
					<b>EBIT (% of Revenue)</b>
				</label>
				<p className={styles.netCashFlow} style={{ fontWeight: '900' }}>
					{ebitFirst} %
				</p>
				<p className={styles.netCashFlow} style={{ fontWeight: '900' }}>
					{ebitSecond} %
				</p>
				<p
					className={`${styles.ebit} ${increaseIsGoodThing(+ebitFirst, +ebitSecond)}`}
					style={{ fontWeight: '900' }}
				>
					{determinePolarityOfChange(+ebitFirst, +ebitSecond, +changeEbitOfRevenue)} %
				</p>
			</div>
			<div className={styles.inputContainer}>
				<label className={styles.labelClass} htmlFor="EBITDA">
					<CustomWidthTooltip title="Earnings before interest, taxes, depreciation, and amortisation." />
					EBITDA
				</label>
				<p className={styles.netCashFlow}>
					{parseFloat(ebitdaFirst).toLocaleString('en-GB', {
						style: 'currency',
						currency: currencyLabel,
						minimumFractionDigits: 0,
						maximumFractionDigits: 0
					})}
				</p>
				<p className={styles.netCashFlow}>
					{parseFloat(ebitdaSecond).toLocaleString('en-GB', {
						style: 'currency',
						currency: currencyLabel,
						minimumFractionDigits: 0,
						maximumFractionDigits: 0
					})}
				</p>
				<p className={`${styles.ebit} ${increaseIsGoodThing(+ebitdaFirst, +ebitdaSecond)}`}>
					{determinePolarityOfChange(+ebitdaFirst, +ebitdaSecond, +changeEbitda)} %
				</p>
			</div>
			<div className={styles.inputContainer}>
				<label className={styles.labelClass} htmlFor="netProfitPercentOfRevenueReduction">
					<CustomWidthTooltip title="Earnings left after all costs, before tax." />
					<b>Net Profit (pre - tax) % of Revenue</b>
				</label>
				<p className={styles.netCashFlow} style={{ fontWeight: '900' }}>
					{netProfitBeforeOfRevenueFirst} %
				</p>
				<p className={styles.netCashFlow} style={{ fontWeight: '900' }}>
					{netProfitBeforeOfRevenueSecond} %
				</p>
				<p
					className={`${styles.ebit} ${increaseIsGoodThing(
						+netProfitBeforeOfRevenueFirst,
						+netProfitBeforeOfRevenueSecond
					)}`}
					style={{ fontWeight: '900' }}
				>
					{determinePolarityOfChange(
						+netProfitBeforeOfRevenueFirst,
						+netProfitBeforeOfRevenueSecond,
						+changeNetProfitOfRevenue
					)}{' '}
					%
				</p>
			</div>
			<div className={styles.inputContainer}>
				<label className={styles.labelClass} htmlFor="netProfitPercentOfGrossMarginReduction">
					<CustomWidthTooltip title="Earnings left after all costs, before tax." />
					<b>Net Profit (pre - tax) % of Gross Margin</b>
				</label>
				<p className={styles.netCashFlow} style={{ fontWeight: '900' }}>
					{netProfitBeforeOfGrossMarginFirst} %
				</p>
				<p className={styles.netCashFlow} style={{ fontWeight: '900' }}>
					{netProfitBeforeOfGrossMarginSecond} %
				</p>
				<p
					className={`${styles.ebit} ${increaseIsGoodThing(
						+netProfitBeforeOfGrossMarginFirst,
						+netProfitBeforeOfGrossMarginSecond
					)}`}
					style={{ fontWeight: '900' }}
				>
					{determinePolarityOfChange(
						+netProfitBeforeOfGrossMarginFirst,
						+netProfitBeforeOfGrossMarginSecond,
						+changeNetProfitOfGrossMargin
					)}{' '}
					%
				</p>
			</div>
			<div className={styles.inputContainer}>
				<label className={styles.labelClass} htmlFor="netProfitAfterTaxReduction">
					<CustomWidthTooltip title="The true bottom line: what’s retained for reinvestment or distribution." />
					<b>Net Profit (after tax) % of Revenue</b>
				</label>
				<p className={styles.netCashFlow} style={{ fontWeight: '900' }}>
					{netProfitAfterTaxFirst} %
				</p>
				<p className={styles.netCashFlow} style={{ fontWeight: '900' }}>
					{netProfitAfterTaxSecond} %
				</p>
				<p
					className={`${styles.ebit} ${increaseIsGoodThing(
						+netProfitAfterTaxFirst,
						+netProfitAfterTaxSecond
					)}`}
					style={{ fontWeight: '900' }}
				>
					{determinePolarityOfChange(
						+netProfitAfterTaxFirst,
						+netProfitAfterTaxSecond,
						+changeNetProfitAfterTax
					)}{' '}
					%
				</p>
			</div>
			<div className={styles.tableFooter4}>
				<p>
					<b>Growth Summary</b>
				</p>
				<p />
				<p />
			</div>
			<div className={styles.inputContainer}>
				<label className={styles.labelClass} htmlFor="priceIncrease">
					<CustomWidthTooltip title="Year-on-year change in cost of goods sold." />
					COGS Growth %
				</label>

				<p className={styles.netCashFlow}>{cogsGrowthFirst} %</p>
				<p className={styles.netCashFlow}>{cogsGrowthSecond} %</p>
				<p className={`${styles.ebit} ${decreaseIsGoodThing(+cogsGrowthFirst, +cogsGrowthSecond)}`}>
					{determinePolarityOfChange(+cogsGrowthFirst, +cogsGrowthSecond, +cogsGrowthThird)} %
				</p>
			</div>
			<div className={styles.inputContainer}>
				<label className={styles.labelClass} htmlFor="volumeIncrease">
					<CustomWidthTooltip title="Year-on-year change in overhead costs." />
					Overheads Growth %
				</label>
				<p className={styles.netCashFlow}>{overheadsGrowthFirst} %</p>
				<p className={styles.netCashFlow}>{overheadsGrowthSecond} %</p>
				{/* <p className={styles.ebit}>{overheadsGrowthSum} %</p> */}
				<p
					className={`${styles.ebit} ${decreaseIsGoodThing(
						+overheadsGrowthFirst,
						+overheadsGrowthSecond
					)}`}
				>
					{determinePolarityOfChange(
						+overheadsGrowthFirst,
						+overheadsGrowthSecond,
						+overheadsGrowthSum
					)}{' '}
					%
				</p>
			</div>
			<div className={styles.inputContainer}>
				<label className={styles.labelClass} htmlFor="volumeIncrease">
					<CustomWidthTooltip title="Gross margin produced per £1 of direct labour; your productivity signal." />
					Direct Labour Efficiency Ratio (LER)
				</label>
				<p className={styles.netCashFlow}>{lerFirst}</p>
				<p className={styles.netCashFlow}>{lerSecond}</p>
				<p className={styles.ebit} />
			</div>
			<div style={{ fontSize: '0.925rem', marginTop: '30px' }}>
				💡 <b>Investor lens</b>: High, stable gross margin with improving LER signals scalability.
			</div>
		</div>
	);
};

export default CashFlowPerspectiveTable;