'use client';

import { useState, FormEvent } from 'react';

const SERVICES_URL = process.env.NEXT_PUBLIC_SERVICES_URL || 'http://localhost:5001/api';

export default function ContactoPage() {
  const [mail, setMail] = useState('');
  const [mensaje, setMensaje] = useState('');
  const [enviando, setEnviando] = useState(false);

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    setEnviando(true);
    try {
      await fetch(`${SERVICES_URL}/email/send`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ to: mail, subject: 'Contacto desde SAM', body: mensaje }),
      });
      alert('Correo enviado');
      setMail('');
      setMensaje('');
    } catch {
      alert('Error al enviar');
    } finally {
      setEnviando(false);
    }
  };

  return (
    <div>
      <h3 className="mb-3">Contacto</h3>
      <div className="card shadow p-4">
        <form onSubmit={handleSubmit}>
          <div className="mb-3">
            <label className="form-label">Correo</label>
            <input type="email" className="form-control" value={mail} onChange={e => setMail(e.target.value)} required />
          </div>
          <div className="mb-3">
            <label className="form-label">Mensaje</label>
            <textarea className="form-control" rows={4} value={mensaje} onChange={e => setMensaje(e.target.value)} required />
          </div>
          <button type="submit" className="btn btn-primary">Enviar</button>
        </form>
      </div>
    </div>
  );
}