import { useForm } from '@inertiajs/react';
import { Head } from '@inertiajs/react';
import { LandingHeader } from '@/Components/Layout/LandingHeader';
import { LandingFooter } from '@/Components/Layout/LandingFooter';
import { TextInput } from '@/Components/Forms/TextInput';

export default function Contact() {
  const form = useForm({
    school_name: '',
    manager_name: '',
    mobile: '',
    city: '',
    message: '',
  });

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    form.post('/contact', {
      onSuccess: () => form.reset(),
    });
  }

  return (
    <div className="lp">
      <Head title="تماس با ما">
        <meta name="description" content="تماس با تیم دانشیار من برای درخواست دمو، خرید اشتراک مدرسه و فعال‌سازی پنل اتوماسیون هوشمند مدارس." />
      </Head>

      <LandingHeader transparent topMode="light" />

      <section className="hero-section">
        <div className="hero-copy">
          <p className="eyebrow">تماس فروش</p>
          <h1>درخواست دمو یا خرید اشتراک مدرسه</h1>
          <p>
            در نسخه اول، خرید با تماس فروش و invoice دستی انجام می‌شود. درگاه آنلاین بعد از انتخاب
            payment gateway فعال می‌شود. فرم را پر کنید تا با شما تماس بگیریم.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', marginTop: '2rem' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
              <span style={{ background: 'var(--color-primary-soft)', borderRadius: '50%', width: 40, height: 40, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <i className="bi bi-envelope" style={{ color: 'var(--color-primary)' }} />
              </span>
              <span style={{ color: 'var(--color-text-muted)' }}>info@mydaneshyar.ir</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
              <span style={{ background: 'var(--color-primary-soft)', borderRadius: '50%', width: 40, height: 40, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <i className="bi bi-clock" style={{ color: 'var(--color-primary)' }} />
              </span>
              <span style={{ color: 'var(--color-text-muted)' }}>پاسخ‌دهی کاری — شنبه تا چهارشنبه ۸ تا ۱۷</span>
            </div>
          </div>
        </div>

        <form className="feature-card" onSubmit={handleSubmit} style={{ padding: '2rem', display: 'flex', flexDirection: 'column', gap: '1rem' }}>
          <h2 style={{ margin: '0 0 0.5rem', fontSize: '1.25rem' }}>فرم درخواست دمو</h2>
          <TextInput
            label="نام مدرسه"
            value={form.data.school_name}
            onChange={(e) => form.setData('school_name', e.target.value)}
            error={form.errors.school_name}
          />
          <TextInput
            label="نام مدیر یا مسئول"
            value={form.data.manager_name}
            onChange={(e) => form.setData('manager_name', e.target.value)}
            error={form.errors.manager_name}
          />
          <TextInput
            label="شماره موبایل"
            type="tel"
            value={form.data.mobile}
            onChange={(e) => form.setData('mobile', e.target.value)}
            error={form.errors.mobile}
          />
          <TextInput
            label="شهر"
            value={form.data.city}
            onChange={(e) => form.setData('city', e.target.value)}
          />
          <div>
            <label style={{ display: 'block', marginBottom: '0.4rem', fontWeight: 600, fontSize: '0.9rem' }}>توضیح بیشتر (اختیاری)</label>
            <textarea
              value={form.data.message}
              onChange={(e) => form.setData('message', e.target.value)}
              rows={3}
              style={{
                width: '100%', border: '1.5px solid var(--color-border)', borderRadius: 'var(--radius-sm)',
                padding: '0.65rem 0.9rem', fontSize: '0.95rem', fontFamily: 'inherit', resize: 'vertical',
                boxSizing: 'border-box',
              }}
            />
          </div>
          <button className="btn btn-primary" type="submit" disabled={form.processing} style={{ marginTop: '0.5rem' }}>
            {form.processing ? 'در حال ارسال...' : 'ثبت درخواست'}
          </button>
          {form.wasSuccessful && (
            <p style={{ color: 'var(--color-success)', fontWeight: 600, textAlign: 'center' }}>
              <i className="bi bi-check-circle" /> درخواست شما ثبت شد. به زودی تماس می‌گیریم.
            </p>
          )}
        </form>
      </section>

      <LandingFooter />
    </div>
  );
}
