import { useState } from "react";
import { Button } from "./components/Button/Button";
import { ImageLine } from "./components/ImageLine/ImageLine";
import { Step } from "./components/Step/Step";
import styles from "./StepsBlock.module.css";
import { Popup } from "../../../../components/Popup/Popup";
import { sendGoal } from "@utils";

import { typo } from "@utils/typo";

export const StepsBlock = () => {
	const [popupIsOpen, setPopupIsOpen] = useState(false);

	const handleJoinCommunity = () => {
		sendGoal("join_community_clicked");
	};

	const handleLocationPopupOpen = () => {
		sendGoal("location_popup_opened");
		setPopupIsOpen(true);
	};

	return (
		<div className={styles.column} id='steps'>
			<h1 className={styles.head}>
				как пересечься
				<br />с интересными людьми
			</h1>
			<div className={styles.mobile_image} />
			<div className={styles.row}>
				<Step number={1} head='Шаг<br/>первый'>
					<p>
						{typo(`Скачай Сетку и напиши пост о себе`)}
						<span>
							{" "}
							<a
								target='_blank'
								href='https://set.ki/chan_inv/CrvvTgv'
								onClick={handleJoinCommunity}
							>
								{typo(`в закрытом сообществе`)}
							</a>{" "}
						</span>
						{typo(`Сетка\u00A0х\u00A0Surf\u00A0Coffee®. 
                        Расскажи, чем горишь, где работаешь и какой у&nbsp;тебя любимый спот Surf\u00A0Coffee® в Москве.`)}
					</p>
				</Step>

				<Step number={2} head='Шаг<br/>второй'>
					<p>
						{typo(`Поставь в посте хештег спота, чтобы тебя смогли 
                        найти другие сёрферы. Выбери его из списка ниже.`)}
					</p>
				</Step>

				<Step number={3} head='Шаг<br/>третий'>
					<p>
						{typo(`Переходи по хештегу, 
                        ищи посты других сёрферов и&nbsp;договаривайся понетворкать в Surf\u00A0Coffee®.`)}
					</p>
				</Step>
			</div>
			<div className={styles.button}>
				<Button text='cпоты Surf Coffee®' onClick={handleLocationPopupOpen} />
			</div>
			<Popup isOpen={popupIsOpen} setIsOpen={setPopupIsOpen} />
			<ImageLine />
		</div>
	);
};
