'use client';

import React, { useState, FormEvent } from 'react';
import { useT } from '@/i18n';
import AnimateOnScroll from '@/components/AnimateOnScroll';
import s from './page.module.css';

export default function ContactPage() {
  const t = useT();
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault();
    setSubmitted(true);
  };

  return (
    <>
      <section className={s.hero}>
        <AnimateOnScroll direction="none">
          <h1 className={s.title}>{t('contact_title')}</h1>
          <p className={s.subtitle}>{t('contact_subtitle')}</p>
        </AnimateOnScroll>
      </section>

      <div className={s.content}>
        <AnimateOnScroll direction="left">
          {submitted ? (
            <p className={s.successMsg}>{t('contact_form_success')}</p>
          ) : (
            <form className={s.form} onSubmit={handleSubmit}>
              <div>
                <label className={s.label}>{t('contact_form_name')}</label>
                <input className={s.input} type="text" required />
              </div>
              <div>
                <label className={s.label}>{t('contact_form_email')}</label>
                <input className={s.input} type="email" required />
              </div>
              <div>
                <label className={s.label}>{t('contact_form_subject')}</label>
                <input className={s.input} type="text" required />
              </div>
              <div>
                <label className={s.label}>{t('contact_form_message')}</label>
                <textarea className={s.textarea} required />
              </div>
              <button type="submit" className={s.submitBtn}>
                {t('contact_form_submit')}
              </button>
            </form>
          )}
        </AnimateOnScroll>

        <AnimateOnScroll direction="right">
          <div className={s.info}>
            <div className={s.infoCard}>
              <div className={s.infoIcon}>{'\u{1F3E2}'}</div>
              <div>
                <div className={s.infoTitle}>{t('contact_office_title')}</div>
                <div className={s.infoText}>{t('contact_office_addr')}</div>
              </div>
            </div>
            <div className={s.infoCard}>
              <div className={s.infoIcon}>{'\u{2709}'}</div>
              <div>
                <div className={s.infoTitle}>{t('contact_email_title')}</div>
                <div className={s.infoText}>{t('contact_email_addr')}</div>
              </div>
            </div>
            <div className={s.infoCard}>
              <div className={s.infoIcon}>{'\u{1F310}'}</div>
              <div>
                <div className={s.infoTitle}>{t('contact_social_title')}</div>
                <div className={s.infoText}>WeChat / Twitter / Telegram</div>
              </div>
            </div>
          </div>
        </AnimateOnScroll>
      </div>
    </>
  );
}
