/* service-detail.jsx — Página de detalle por cada tarjeta de Servicios */

/* Contenido extendido por servicio. La clave coincide con el `id` de cada
   tarjeta en sections.jsx y con el value del <select> del formulario. */
const SERVICE_DETAILS = {
  residencial: {
    tag: 'Residencial',
    t: 'Instalaciones residenciales',
    formType: 'Climatización residencial',
    photo: 'photos/services/residencial-biblioteca.jpg',
    alt: 'Equipos de aire integrados en biblioteca con piso de parquet',
    lede: 'Climatización para casas, departamentos y propiedad horizontal, con foco en confort, silencio y eficiencia energética — desde el cálculo térmico hasta la puesta en marcha.',
    intro: 'Diseñamos cada instalación pensando en cómo se vive el ambiente: temperatura pareja, equipos silenciosos y un montaje prolijo que se integra a la estética de la casa. Trabajamos junto a arquitectos y estudios de interiorismo cuando el proyecto lo requiere.',
    incluye: [
      'Asesoramiento y cálculo de carga térmica por ambiente',
      'Provisión de equipos de marcas líderes con garantía oficial',
      'Instalación con cañerías embutidas o a la vista, según el proyecto',
      'Puesta en marcha, pruebas y entrega con manual de uso',
    ],
    aplicaciones: ['Casas', 'Departamentos', 'Propiedad horizontal', 'Ampliaciones'],
  },
  ph: {
    tag: 'Edificios',
    t: 'Propiedad horizontal',
    formType: 'Edificio / Propiedad Horizontal',
    photo: 'photos/services/edificios-rooftop.jpg',
    alt: 'Ductos y ventilador centrífugo en azotea de edificio',
    lede: 'Sistemas centralizados y por unidad para edificios, con garantía de confort, eficiencia energética y mantenimiento continuo a lo largo del tiempo.',
    intro: 'Resolvemos la climatización de edificios completos: desde la ingeniería del sistema y la ubicación de equipos en terraza, hasta la coordinación con la administración y el plan de mantenimiento posterior. Priorizamos soluciones de bajo consumo y operación simple.',
    incluye: [
      'Ingeniería del sistema (VRF, chiller, UTAs según escala)',
      'Coordinación de obra con dirección técnica y administración',
      'Montaje en altura con operativos de izaje cuando es necesario',
      'Plan de mantenimiento preventivo y soporte continuo',
    ],
    aplicaciones: ['Edificios residenciales', 'Torres premium', 'Espacios comunes', 'Cocheras'],
  },
  comercial: {
    tag: 'Comercial',
    t: 'Comercios & gastronomía',
    formType: 'Comercial / Gastronómico',
    photo: 'photos/services/comercial-chiller-carrier.jpg',
    alt: 'Instalación de chiller Carrier AquaForce en azotea',
    lede: 'Climatización para locales, oficinas y gastronomía que optimiza el confort del cliente y mantiene la operatividad del negocio sin interrupciones.',
    intro: 'Cada rubro tiene una necesidad distinta: un local de indumentaria, una oficina abierta o una cocina de alta demanda no se resuelven igual. Diseñamos sistemas que mantienen el ambiente estable en horario pico y que son fáciles de operar para el personal.',
    incluye: [
      'Relevamiento del local y cálculo según ocupación y rubro',
      'Equipos comerciales de alta capacidad y bajo nivel sonoro',
      'Renovación y filtrado de aire para gastronomía',
      'Mantenimiento programado fuera del horario comercial',
    ],
    aplicaciones: ['Locales', 'Oficinas', 'Gastronomía', 'Showrooms'],
  },
  industrial: {
    tag: 'Industrial',
    t: 'Química, farma & industrias pesadas',
    formType: 'Industrial',
    photo: 'photos/services/industrial-sala-maquinas.jpg',
    alt: 'Sala de máquinas con intercambiadores de placas y manifolds',
    lede: 'Termomecánica para procesos industriales con foco en eficiencia, continuidad operativa y cumplimiento normativo estricto.',
    intro: 'Atendemos plantas e instalaciones donde la climatización es parte del proceso productivo y no puede fallar. Diseñamos sistemas redundantes, documentamos cada etapa y trabajamos bajo los requisitos normativos de cada industria.',
    incluye: [
      'Ingeniería termomecánica y salas de máquinas',
      'Sistemas redundantes para continuidad operativa 24/7',
      'Control de temperatura y humedad para procesos críticos',
      'Documentación y cumplimiento normativo (farma, química)',
    ],
    aplicaciones: ['Farmacéutica', 'Química', 'Data centers', 'Industria pesada'],
  },
};

const ServiceDetailPage = ({ id, setPage }) => {
  const s = SERVICE_DETAILS[id];
  if (!s) {
    return (
      <main className="svc-page">
        <div className="container" style={{ padding: '120px 0' }}>
          <h1>Servicio no encontrado</h1>
          <button className="btn btn-secondary" onClick={() => setPage('home')}>Volver al inicio</button>
        </div>
      </main>
    );
  }

  return (
    <main className="svc-page">
      {/* Breadcrumb */}
      <div className="container svc-crumb">
        <a onClick={() => setPage('home')}>Inicio</a>
        <span>/</span>
        <a onClick={() => { setPage('home'); setTimeout(() => { const el = document.getElementById('servicios'); if (el) el.scrollIntoView(); }, 60); }}>Servicios</a>
        <span>/</span>
        <strong>{s.t}</strong>
      </div>

      {/* Hero */}
      <section className="svc-hero">
        <div className="container svc-hero-grid">
          <div className="svc-hero-copy">
            <span className="pill pill-soft">{s.tag}</span>
            <h1>{s.t}</h1>
            <p className="lede" style={{ maxWidth: '46ch', marginTop: 14 }}>{s.lede}</p>
            <div className="svc-hero-actions">
              <a className="btn btn-primary" href="#svc-form">
                Solicitar presupuesto
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7" /></svg>
              </a>
              <button className="btn btn-ghost" onClick={() => setPage('home')}>Volver</button>
            </div>
          </div>
          <div className="svc-hero-visual">
            <img src={s.photo} alt={s.alt} />
          </div>
        </div>
      </section>

      {/* Detalle */}
      <section className="section-tight svc-detail">
        <div className="container svc-detail-grid">
          <div className="svc-detail-main">
            <span className="eyebrow">Sobre el servicio</span>
            <p className="svc-intro">{s.intro}</p>

            <div className="svc-includes">
              <h3>Qué incluye</h3>
              <ul>
                {s.incluye.map((item, i) => (
                  <li key={i}>
                    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5" /></svg>
                    <span>{item}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>

          <aside className="svc-detail-aside">
            <div className="svc-card">
              <div className="svc-card-lbl">Aplicaciones</div>
              <div className="svc-tags">
                {s.aplicaciones.map((a, i) => <span key={i} className="pill pill-soft">{a}</span>)}
              </div>
            </div>
            <div className="svc-card svc-card-cta">
              <div className="svc-card-lbl">¿Tenés un proyecto?</div>
              <p>Coordinamos una evaluación técnica sin cargo en tu obra.</p>
              <a className="btn btn-primary" href="#svc-form" style={{ width: '100%' }}>Pedir evaluación</a>
            </div>
          </aside>
        </div>
      </section>

      {/* Formulario pre-seleccionado */}
      <ServiceForm service={s} />
    </main>
  );
};

/* Formulario de proyecto — pre-selecciona el tipo según el servicio */
const ServiceForm = ({ service }) => (
  <section id="svc-form" className="section svc-form-section">
    <div className="container">
      <div className="contact-grid">
        <div className="contact-copy">
          <span className="eyebrow">Tu proyecto</span>
          <h2>Contanos sobre<br />{service.t.toLowerCase()}.</h2>
          <p className="lede">
            Completá el formulario y nuestro equipo se contacta para coordinar
            una evaluación técnica sin cargo. Ya dejamos seleccionado el tipo de
            proyecto, pero podés cambiarlo si lo necesitás.
          </p>
          <div className="contact-info">
            <div className="contact-info-item">
              <div className="contact-info-lbl">Oficina</div>
              <a className="contact-info-val contact-info-link" href="tel:+541144883917">(5411) 4488-3917</a>
            </div>
            <div className="contact-info-item">
              <div className="contact-info-lbl">Email</div>
              <a className="contact-info-val contact-info-link" href="mailto:administracion@aclimatarargentina.com.ar">administracion@aclimatarargentina.com.ar</a>
            </div>
          </div>
        </div>
        <form className="contact-form" onSubmit={(e) => { e.preventDefault(); alert('Consulta enviada. Te respondemos en menos de 24h hábiles.'); }}>
          <div className="cf-row-2">
            <div className="cf-field">
              <label>Nombre y apellido</label>
              <input type="text" required placeholder="María García" />
            </div>
            <div className="cf-field">
              <label>Empresa</label>
              <input type="text" placeholder="Opcional" />
            </div>
          </div>
          <div className="cf-row-2">
            <div className="cf-field">
              <label>Email</label>
              <input type="email" required placeholder="vos@empresa.com" />
            </div>
            <div className="cf-field">
              <label>Teléfono</label>
              <input type="tel" placeholder="+54 11" />
            </div>
          </div>
          <div className="cf-field">
            <label>Tipo de proyecto</label>
            <select defaultValue={service.formType}>
              <option>Climatización residencial</option>
              <option>Edificio / Propiedad Horizontal</option>
              <option>Comercial / Gastronómico</option>
              <option>Industrial</option>
              <option>Compra de electrodomésticos</option>
            </select>
          </div>
          <div className="cf-field">
            <label>Mensaje</label>
            <textarea rows="4" placeholder="Contanos sobre tu proyecto, m² aproximados, ubicación..."></textarea>
          </div>
          <button type="submit" className="btn btn-primary btn-lg" style={{ width: '100%' }}>
            Enviar consulta
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7" /></svg>
          </button>
          <p className="cf-fine">Te respondemos en menos de 24h hábiles.</p>
        </form>
      </div>
    </div>
  </section>
);

window.ServiceDetailPage = ServiceDetailPage;