---
import Image from 'astro/components/Image.astro';
import FormInput from '../FormInput/FormInput.astro';
import Dog from '@images/main/contact-form/Mask.svg';
import BluePlanet from '@images/main/contact-form/Planet Blue.svg';
import YellowPlanet from '@images/main/contact-form/Planet Yellow.svg';
import { getLangFromUrl, useTranslations } from '@/i18n/utils';
import './contact-form.style.css';

const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
---

<div class="container contact-form">
    <h2>{t("contacts.title")}</h2>

    <div class="image">
        <Image src={Dog} alt="cute dog in space"/>
        <Image src={BluePlanet} alt="blue planet" class="planet blue"/>
        <Image src={YellowPlanet} alt="yellow planet" class="planet yellow"/>
    </div>

    <form class="container">
        <div id="success-message" class="success" style="display: none;"></div>
        <div id="error-message" class="error" style="display: none;"></div>

        <FormInput
                type="text"
                name="name"
            label={String(t("contacts.name"))}
                required
        />
        <FormInput
                type="email"
                name="email"
            label={String(t("contacts.email"))}
                required
        />
        <FormInput
                type="tel"
                name="phone"
            label={String(t("contacts.phone"))}
                required
        />

        <cap-widget data-cap-api-endpoint="https://cap.midcreative.eu/8e5272fb9c08/api/"></cap-widget>

        <div id="captcha-error" class="error" style="display: none; margin-top: 10px;">
            {t("contacts.captchaError") || "Please complete the captcha"}
        </div>

        <button type="submit">{t("contacts.send")}</button>
    </form>
</div>

<script>
    const form = document.querySelector('.contact-form form');
    form?.addEventListener('submit', (e) => {
        e.preventDefault();
        console.log('Form submitted - add your logic here');
    });
</script>