---
import BaseLayout from '../layouts/BaseLayout.astro';
import { tramites } from '../data/sitio';
---

<BaseLayout title={`Trámites en línea · Demo · Comuna de Zenón Pereyra`} description="Simulación de trámites en línea. DEMO. Sin validación real.">
  <div class="demo-banner" role="status" aria-label="Ambiente de demostración">
    <span class="demo-banner-star">★</span>
    <span class="demo-banner-title">Ambiente de demostración</span>
    <span class="demo-banner-text">Sin validación · Los datos no se guardan · Sin valor legal ni fiscal</span>
  </div>

  <section class="section">
    <div class="container tramite-wrap">
      <header class="section-head">
        <span class="eyebrow">Trámites en línea · Demo</span>
        <h1 class="h1">Generá tu comprobante de simulación.</h1>
        <p class="lead">Ingresá tu CUIT, elegí el trámite y recibí un comprobante demo. Para un trámite válido, escribinos por WhatsApp o acercate a la Comuna.</p>
      </header>

      <form id="form-tramite" class="tramite-form" novalidate>
        <div class="campo">
          <label for="cuit" class="campo-label">CUIT</label>
          <input
            id="cuit"
            name="cuit"
            type="text"
            inputmode="numeric"
            placeholder="00-00000000-0"
            class="campo-input mono"
            autocomplete="off"
            required
          />
          <p class="campo-hint muted">Sin validación. No se guarda ni se envía a ningún servidor.</p>
        </div>

        <div class="campo">
          <label for="tramite" class="campo-label">Trámite</label>
          <select id="tramite" name="tramite" class="campo-input" required>
            {tramites.lista.map((t) => (
              <option value={t.codigo}>{t.nombre}</option>
            ))}
          </select>
        </div>

        <button type="submit" class="btn btn--primary">Generar comprobante →</button>
      </form>

      <div id="resultado" class="resultado" hidden aria-live="polite">
        <div class="resultado-head">
          <span class="eyebrow">Comprobante · Demo</span>
          <span class="demo-badge">DEMO</span>
        </div>
        <div class="resultado-grid">
          <div class="resultado-row"><span class="resultado-k">N° de operación</span><span class="mono" id="r-operacion">—</span></div>
          <div class="resultado-row"><span class="resultado-k">CUIT</span><span class="mono" id="r-cuit">—</span></div>
          <div class="resultado-row"><span class="resultado-k">Trámite</span><span id="r-tramite">—</span></div>
          <div class="resultado-row"><span class="resultado-k">Período</span><span class="mono" id="r-periodo">—</span></div>
          <div class="resultado-row"><span class="resultado-k">Importe</span><span class="mono" id="r-importe">—</span></div>
          <div class="resultado-row"><span class="resultado-k">Estado</span><span id="r-estado" class="estado-demo">● Simulado</span></div>
        </div>
        <div class="resultado-actions">
          <button type="button" class="btn btn--ghost" id="btn-otro">Generar otro</button>
          <a href={tramites.whatsapp} target="_blank" rel="noopener" class="btn btn--primary">Trámite real por WhatsApp</a>
        </div>
        <p class="resultado-foot muted italic">Documento ilustrativo. Sin valor fiscal ni legal. Para iniciar un trámite válido, contactá a la Comuna por los canales oficiales.</p>
      </div>

      <div class="tramites-lista">
        <h2 class="h3">Trámites disponibles</h2>
        <ul>
          {tramites.lista.map((t) => (
            <li class="tramite-item">
              <span class="tramite-codigo mono">{t.codigo}</span>
              <div>
                <span class="tramite-nombre">{t.nombre}</span>
                <p class="muted">{t.desc}</p>
              </div>
            </li>
          ))}
        </ul>
        <p class="muted italic">Otros trámites presenciales: tasa de alumbrado, barrido y limpieza, permisos de obra, cementerio, registro civil delegado. Consultá horarios en la Comuna.</p>
      </div>
    </div>
  </section>
</BaseLayout>

<script is:inline define:vars={{ tramitesLista: tramites.lista }}>
  const form = document.getElementById('form-tramite');
  const resultado = document.getElementById('resultado');
  const btnOtro = document.getElementById('btn-otro');

  const nombresTramite = {};
  tramitesLista.forEach(t => { nombresTramite[t.codigo] = t.nombre; });
  const importes = { API: '$ 12.450,00', TGI: '$ 4.318,00', HAB: '$ 8.900,00', AUT: '$ 6.250,00' };

  function generarOperacion() {
    const n = Math.floor(Math.random() * 9000 + 1000);
    const y = new Date().getFullYear();
    const m = String(new Date().getMonth() + 1).padStart(2, '0');
    return `${y}-${n}-33${m}`;
  }
  function periodoActual() {
    const y = new Date().getFullYear();
    const m = String(new Date().getMonth() + 1).padStart(2, '0');
    return `${y} / ${m}`;
  }

  form?.addEventListener('submit', (e) => {
    e.preventDefault();
    const data = new FormData(form);
    const cuit = String(data.get('cuit') || '').trim() || '00-00000000-0';
    const codigo = String(data.get('tramite') || 'API');
    document.getElementById('r-operacion').textContent = generarOperacion();
    document.getElementById('r-cuit').textContent = cuit;
    document.getElementById('r-tramite').textContent = nombresTramite[codigo] || codigo;
    document.getElementById('r-periodo').textContent = periodoActual();
    document.getElementById('r-importe').textContent = importes[codigo] || '$ 0,00';
    form.setAttribute('hidden', '');
    resultado.removeAttribute('hidden');
    resultado.scrollIntoView({ behavior: 'smooth', block: 'start' });
  });

  btnOtro?.addEventListener('click', () => {
    resultado.setAttribute('hidden', '');
    form.removeAttribute('hidden');
    form.reset();
    form.scrollIntoView({ behavior: 'smooth', block: 'start' });
  });
</script>

<style>
  .demo-banner {
    position: sticky; top: 4.5rem; z-index: 40;
    background: var(--brick); color: var(--paper);
    display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
    align-items: center; justify-content: center;
    padding: 0.625rem 1rem;
    font-family: var(--font-body);
    font-size: var(--fs-cap);
    letter-spacing: 0.02em;
  }
  .demo-banner-star { font-size: var(--fs-sm); }
  .demo-banner-title { font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
  .demo-banner-text { opacity: 0.9; }

  .tramite-wrap { max-width: 48rem; }
  .tramite-form {
    display: flex; flex-direction: column; gap: var(--space-3);
    background: var(--paper-2);
    padding: var(--space-4);
    border: 1px solid rgba(20,32,42,0.1);
    border-left: 4px solid var(--civic);
    border-radius: var(--radius);
    margin-bottom: var(--space-5);
  }
  @media (min-width: 48rem) { .tramite-form > .btn { align-self: flex-start; } }

  .campo { display: flex; flex-direction: column; gap: 0.375rem; }
  .campo-label { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm); color: var(--ink); }
  .campo-input {
    min-height: 44px; padding: 0.75rem 1rem;
    border: 1px solid rgba(20,32,42,0.2);
    background: var(--paper); color: var(--ink);
    font-size: var(--fs-body);
    border-radius: var(--radius);
  }
  .campo-input:focus { outline: 3px solid var(--civic); outline-offset: 0; border-color: var(--civic); }
  .campo-hint { font-size: var(--fs-cap); }

  .resultado {
    background: var(--paper-2);
    border: 1px solid rgba(20,32,42,0.1);
    border-left: 4px solid var(--brick);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
    border-radius: var(--radius);
    position: relative;
  }
  .resultado-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }
  .demo-badge { background: var(--brick); color: var(--paper); padding: 0.25rem 0.6rem; font-family: var(--font-body); font-weight: 700; font-size: var(--fs-cap); letter-spacing: 0.1em; border-radius: 2px; }
  .resultado-grid { display: grid; gap: var(--space-2); }
  .resultado-row { display: grid; grid-template-columns: 1fr 1.5fr; gap: 0.5rem; padding-bottom: var(--space-1); border-bottom: 1px solid rgba(20,32,42,0.06); font-size: var(--fs-sm); }
  .resultado-k { color: var(--slate); }
  .estado-demo { color: var(--brick); font-weight: 600; }
  .resultado-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
  .resultado-foot { margin-top: var(--space-3); font-size: var(--fs-sm); }

  .tramites-lista h2 { margin-bottom: var(--space-3); }
  .tramites-lista ul { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
  .tramite-item {
    display: grid; grid-template-columns: 5rem 1fr; gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--paper-2);
    border-left: 3px solid var(--civic);
    border-radius: var(--radius);
    align-items: baseline;
  }
  .tramite-codigo { font-size: var(--fs-sm); color: var(--civic); font-weight: 600; letter-spacing: 0.06em; }
  .tramite-nombre { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
  .tramite-item p { font-size: var(--fs-sm); margin-top: 0.25rem; }
</style>