/* global React, VNav, VFooter, Social, useReveal */
// contact.jsx — Página de contacto FersaMedia (agenda + formulario)
const { useState } = React;

// ⚙️  Sustituye por tu URL real de "Programación de citas" de Google Calendar.
//     Panel de Google Calendar → Crear → Programación de citas → Compartir → Copiar enlace.
const CAL_URL = 'https://calendar.google.com/calendar/appointments/schedules/PLACEHOLDER';
const CAL_READY = CAL_URL.includes('/schedules/') && !CAL_URL.includes('PLACEHOLDER');

const EMAIL = 'hola@fersamedia.com';
const WHATSAPP = '34600000000'; // ⚙️  número en formato internacional, sin + ni espacios
const HOME_URL = 'index.html';
const CONTACT_NAV = [[HOME_URL, 'Inicio'], [HOME_URL + '#servicios', 'Servicios'], [HOME_URL + '#sectores', 'Verticales']];

const IconCal = () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4.5" width="18" height="16" rx="2.5" /><path d="M3 9h18M8 3v3M16 3v3" /><path d="M7.5 13h3v3h-3z" fill="currentColor" stroke="none" /></svg>;
const IconForm = () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M4 4h16v16H4z" /><path d="M8 9h8M8 13h8M8 17h5" /></svg>;
const IconMail = () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="5" width="18" height="14" rx="2.5" /><path d="m4 7 8 5.5L20 7" /></svg>;
const IconWa = () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M20.5 11.4a8 8 0 0 1-11.9 7.6L3.5 20.5l1.9-5.1A8 8 0 1 1 20.5 11.4z" /><path d="M8.6 10.4c.4 1.9 2.1 3.6 4 4l1.2-1.1 1.7.6" /></svg>;

/* ---------- Agenda (Google Calendar) ---------- */
function AgendaPanel() {
  if (CAL_READY) {
    return <iframe className="cal-embed" src={CAL_URL} title="Reserva tu llamada" frameBorder="0"></iframe>;
  }
  return (
    <div className="cal-panel">
      <div className="cal-icon"><IconCal /></div>
      <h3>Reserva tu llamada de 15 minutos</h3>
      <p>Elige el hueco que mejor te venga y hablamos de tu negocio, sin compromiso. Diagnóstico gratuito.</p>
      <a className="btn btn-primary btn-lg" href={CAL_URL} target="_blank" rel="noopener">Ver horarios disponibles <span className="arrow">→</span></a>
      <p className="tiny">Se abrirá tu agenda de Google Calendar en una pestaña nueva.</p>
    </div>);
}

/* ---------- Formulario (PHPMailer) ---------- */
function FormPanel() {
  const [status, setStatus] = useState('idle'); // idle | sending | ok | err
  const [msg, setMsg] = useState('');

  async function onSubmit(e) {
    e.preventDefault();
    const form = e.currentTarget;
    if (form.website && form.website.value) return; // honeypot
    setStatus('sending');
    try {
      const res = await fetch('contact.php', { method: 'POST', body: new FormData(form) });
      const data = await res.json().catch(() => ({}));
      if (res.ok && data.ok) {
        setStatus('ok');
        setMsg('¡Gracias! Hemos recibido tu mensaje y te responderemos en menos de 24 h.');
        form.reset();
      } else {
        setStatus('err');
        setMsg((data && data.error) || 'No se pudo enviar el mensaje. Inténtalo de nuevo o escríbenos por WhatsApp.');
      }
    } catch (err) {
      setStatus('err');
      setMsg('Este formulario necesita el backend PHP (contact.php con PHPMailer) para enviarse. Súbelo a tu servidor para activarlo.');
    }
  }

  return (
    <form className="cform" onSubmit={onSubmit} noValidate>
      <div className={'cform-status ' + (status === 'ok' ? 'ok show' : status === 'err' ? 'err show' : '')}>
        <strong>{status === 'ok' ? 'Mensaje enviado' : 'Nota'}</strong><br />{msg}
      </div>
      <div className="cform-row">
        <div className="field">
          <label htmlFor="nombre">Nombre <span className="req">*</span></label>
          <input id="nombre" name="nombre" type="text" placeholder="Tu nombre" required />
        </div>
        <div className="field">
          <label htmlFor="telefono">Teléfono</label>
          <input id="telefono" name="telefono" type="tel" placeholder="+34 600 00 00 00" />
        </div>
      </div>
      <div className="cform-row">
        <div className="field">
          <label htmlFor="email">Email <span className="req">*</span></label>
          <input id="email" name="email" type="email" placeholder="tucorreo@empresa.com" required />
        </div>
        <div className="field">
          <label htmlFor="sector">Tu sector</label>
          <select id="sector" name="sector" defaultValue="">
            <option value="" disabled>Selecciona…</option>
            <option>Asesorías y Despachos</option>
            <option>Salud y Bienestar</option>
            <option>Fontaneros, Gasistas y Electricistas</option>
            <option>Otro</option>
          </select>
        </div>
      </div>
      <div className="field">
        <label htmlFor="mensaje">¿Qué necesitas? <span className="req">*</span></label>
        <textarea id="mensaje" name="mensaje" placeholder="Cuéntanos brevemente tu situación y qué te gustaría conseguir." required></textarea>
      </div>
      <input className="hp" type="text" name="website" tabIndex="-1" autoComplete="off" aria-hidden="true" />
      <button className="btn btn-primary btn-lg" type="submit" disabled={status === 'sending'}>
        {status === 'sending' ? 'Enviando…' : 'Enviar solicitud'} <span className="arrow">→</span>
      </button>
      <p className="cform-legal">Al enviar aceptas que te contactemos sobre tu consulta. Sin spam, sin compromiso.</p>
    </form>);
}

/* ---------- Página ---------- */
function ContactPage() {
  useReveal();
  const [tab, setTab] = useState('agenda');
  return (
    <React.Fragment>
      <VNav links={CONTACT_NAV} />
      <main>
        <header className="contact-hero shell">
          <div className="vhero-glow" />
          <p className="contact-kicker reveal">Contacto</p>
          <h1 className="reveal" data-delay="1"><span className="dim">Hablemos de tu </span><span className="em">crecimiento.</span></h1>
          <p className="lead reveal" data-delay="2">Reserva una llamada de 15 minutos o déjanos tus datos. Te respondemos en menos de 24 horas — sin permanencias y con diagnóstico gratuito.</p>
        </header>

        <section className="contact-wrap shell">
          <div className="contact-grid">
            <div className="contact-main reveal">
              <div className="contact-tabs" role="tablist">
                <button className={'contact-tab' + (tab === 'agenda' ? ' active' : '')} onClick={() => setTab('agenda')} role="tab" aria-selected={tab === 'agenda'}>
                  <IconCal /> Agenda una llamada
                </button>
                <button className={'contact-tab' + (tab === 'form' ? ' active' : '')} onClick={() => setTab('form')} role="tab" aria-selected={tab === 'form'}>
                  <IconForm /> Déjanos tus datos
                </button>
              </div>
              <div className="contact-panel">
                {tab === 'agenda' ? <AgendaPanel /> : <FormPanel />}
              </div>
            </div>

            <aside className="contact-aside reveal" data-delay="1">
              <div className="aside-card">
                <h4>Contacto directo</h4>
                <a className="aside-item" href={'mailto:' + EMAIL}>
                  <span className="aside-ic"><IconMail /></span>
                  <span className="lbl"><span className="k">Email</span><span className="v">{EMAIL}</span></span>
                </a>
                <a className="aside-item" href={'https://wa.me/' + WHATSAPP} target="_blank" rel="noopener">
                  <span className="aside-ic"><IconWa /></span>
                  <span className="lbl"><span className="k">WhatsApp</span><span className="v">Escríbenos ahora</span></span>
                </a>
              </div>
              <div className="aside-note">
                <p><span className="big">Respuesta en menos de 24 h.</span> Sin permanencias y con diagnóstico gratuito: si en un mes no quieres seguir, lo dejas.</p>
              </div>
            </aside>
          </div>
        </section>
      </main>
      <VFooter />
    </React.Fragment>);
}

Object.assign(window, { ContactPage });