'use client'


import Link from "next/link";
import Image from "next/image";
import {
    AppSection, AppText, FaqAccordion, FaqTitle, Footer,
    MainPage,
    HeaderBlock, HeaderPhone,
    Section,
    StartBlock
} from "@/app/main.styled";
import StyledButton from "@/components/StyledButton";
import RoomList from "@/components/RoomsList";
import PriceList from "@/components/PriceList";
import FeaturesList from "@/components/FeaturesList";
import GameList from "@/components/GameList";
import React, {useEffect, useState} from "react";
import Accordion from "@/components/Accordion";
import HeaderPage from "@/components/HeaderPage";
import {useBronStore} from "@/store/useBronStore";
import BronModal from "@/components/BronModal";
import { motion } from "framer-motion";

type Faq = {
    id: number
    title: string
    description: string
}
type Contacts = {
    id: number
    type: string
    value: string
}


export default function Home() {
    const open = useBronStore((s) => s.open);
    const [faqs, setFaqs] = useState<Faq[]>([])
    const [contacts, setContacts] = useState<Contacts[]>([])

    const inst = contacts.find((c)=> c.type ==='inst');
    const phone = contacts.find((c)=> c.type ==='phone');
    const tg = contacts.find((c)=> c.type ==='tg');
    const gis2 = contacts.find((c)=> c.type ==='gis2');
    const whatsapp = contacts.find((c)=> c.type ==='whatsapp');

    useEffect(() => {
        async function fetchFaq() {
            const res = await fetch(`/api/faq`);
            const data = await res.json();
            setFaqs(data);
        }
        async function fetchContact() {
            const res = await fetch(`/api/contacts`);
            const data = await res.json();
            setContacts(data);
        }

        fetchFaq();
        fetchContact();
    }, []);

    return (
        <MainPage>
            <HeaderPage whatsapp={whatsapp?.value} tg={tg?.value} phone={phone?.value} inst={inst?.value} gis2={gis2?.value} />
            <main>
                <StartBlock>

                    <Image src={'/images/startLeft.png'} alt={'startLeft'} width={482} height={440} />

                    <motion.h1
                        initial={{ opacity: 0, y: 40 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.8, delay: 0.5 }}
                    >
                        Выигрывай чаще и получай удовольствие <span>от компьютерных игр</span>
                    </motion.h1>

                    <motion.div
                        initial={{ scale: 0.8, opacity: 0 }}
                        animate={{ scale: 1, opacity: 1 }}
                        transition={{ duration: 0.8, delay: 0.8 }}
                    >
                        <StyledButton onClick={() => open('start')} label={'Забронировать место'} padding={'14px 46px'} fontSize={'42px'} />
                    </motion.div>


                    <Image src={'/images/startRight.png'} alt={'startRight'} width={422} height={410}  quality={100} />
                </StartBlock>
                <Section className={'roomSection'}>
                    <h2>В нашем клубе мы предлагаем только <span>современное и надёжное</span> оборудование, которое обеспечит вам <span>комфортную игру</span></h2>
                    <RoomList />
                </Section>
                <Section>
                    <PriceList />
                </Section>
                <Section>
                    <FeaturesList />
                </Section>
                <Section>
                    <GameList tg={tg?.value} whatsapp={whatsapp?.value} />
                </Section>
                <AppSection>
                    <AppText>
                        <StyledButton label={'Приложение'} padding={'12px 38px'} fontSize={'24px'} />
                        <h2>Загрузи и бронируй заранее.</h2>
                        <p>Следи за событиями, прокачивай профиль и получай вознаграждения. Пополнение счёта c <span>Kaspi</span> — в пару кликов.</p>
                        <div>
                            <Link href={'https://play.google.com/store/apps/details?id=com.f5computers.langame_aggregator'}>
                                <Image src={'/icons/appGooglePlay.png'} alt={'google play'} width={220} height={84} loading={"lazy"} />
                            </Link>
                            <Link href={'https://apps.apple.com/us/app/langame/id1642484175?l=ru'}>
                                <Image src={'/icons/appAppStore.png'} alt={'appStore'} width={235} height={84} loading={"lazy"} />
                            </Link>
                        </div>
                    </AppText>
                    <Image className={'phoneApp'} src={'/images/phone.png'} alt={'phone'} width={412} height={414} loading={"lazy"} />
                </AppSection>
                <FaqAccordion>
                    <FaqTitle>
                        <h2>FAQ</h2>
                        <h3>Часто задаваемые вопросы</h3>
                    </FaqTitle>
                    {faqs.map((faqBlock)=>(
                        <Accordion key={faqBlock.id} title={faqBlock.title}>
                            {faqBlock.description}
                        </Accordion>
                    ))}
                </FaqAccordion>
            </main>
            <Footer>
                <Link href='/' className={'logo'}>
                    <Image src={'/icons/logo.png'} alt={'logo'} width={226} height={60} loading={'lazy'} />
                </Link>
                <Link href='/policy' className={'policy'}>
                    Политика<br/> конфиденциальности
                </Link>
                <HeaderBlock className={'footerBlock'}>
                    <div>{inst ? (
                        <Link href={inst.value} target="_blank">
                            <Image src="/icons/inst.png" alt="inst" width={60} height={60} loading="lazy" />
                        </Link>
                    ) : (
                        <Image src="/icons/inst.png" alt="inst" width={60} height={60} loading="lazy" />
                    )}

                        {whatsapp ? (
                            <Link href={whatsapp.value} target="_blank">
                                <Image src="/icons/whatsapp.png" alt="whatsapp" width={58} height={58} loading="lazy" />
                            </Link>
                        ) : (
                            <Image src="/icons/whatsapp.png" alt="whatsapp" width={58} height={58} loading="lazy" />
                        )}

                        {tg ? (
                            <Link href={tg.value} className="tgLink" target="_blank">
                                <Image src="/icons/tg.png" alt="tg" width={48} height={48} loading="lazy" />
                            </Link>
                        ) : (
                            <Image src="/icons/tg.png" alt="tg" width={48} height={48} loading="lazy" />
                        )}

                        {gis2 ? (
                            <Link href={gis2.value} className="gis2Link headerImage" target="_blank">
                                <Image src="/icons/location.svg" alt="geo" width={37} height={50} loading="lazy" />
                            </Link>
                        ) : (
                            <Link href={'/'} className="gis2Link headerImage" target="_blank">
                                <Image src="/icons/location.svg" alt="geo" width={37} height={50} loading="lazy" />
                            </Link>
                        )}</div>
                    <HeaderPhone className={'footerPhone'}>
                        <p style={{ marginBottom: 0 }}>{phone?.value}</p>
                        <h4 onClick={() => open('zayvka-game')}>Заказать звонок</h4>
                    </HeaderPhone>
                </HeaderBlock>
            </Footer>
            <BronModal />
        </MainPage>
    );
};