{% extends "base.html" %}
{% block title %}OTEC JCCD - Capacitacion Industrial y Corporativa{% endblock %}
{% block content %}
<!-- HERO -->
<div class="hero">
  <div class="hero-text">
    <div class="hero-tag">OTEC JCCD | CAPACITACION INDUSTRIAL & CORPORATIVA</div>
    <h1>Transformando el Talento<br>al Siguiente Nivel</h1>
    <a href="{{ url_for('catalog') }}" class="btn-hero">EXPLORAR CATALOGO</a>
    <div class="hero-dots">
      <div class="dot active"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>
    </div>
  </div>
</div>

<!-- TABS -->
<div class="section-tabs">
  <a href="{{ url_for('personas') }}"><button class="tab-btn">Personas</button></a>
  <a href="{{ url_for('empresas') }}"><button class="tab-btn">Empresas</button></a>
  <a href="{{ url_for('gremios') }}"><button class="tab-btn">Gremios</button></a>
  <div class="search-bar">
    <span>🔍</span>
    <input type="text" placeholder="Buscar programa..." onkeydown="if(event.key==='Enter')window.location='/catalogo?q='+this.value">
  </div>
</div>

<!-- MAIN GRID -->
<div class="main-grid">
  <!-- LEFT: Cursos + Packs -->
  <div>
    <div class="section-header">
      <div class="section-badge" style="background:#dcfce7">📚</div>
      <h2 class="section-title">CURSOS</h2>
      <a href="{{ url_for('catalog', tipo='curso') }}" class="filter-btn">VER TODOS</a>
    </div>
    <div class="courses-grid">
      {% for cat in cats if cat.tipo == "curso" %}{% if loop.index <= 8 %}
      <a href="{{ url_for('catalog', tipo='curso', cat=cat.slug) }}" class="course-card">
        <div class="card-icon">{{ cat.icon or "📚" }}</div>
        <div class="card-title">{{ cat.name }}</div>
        <span class="sence-badge">SENCE DISPONIBLE</span>
        <span class="see-link">Ver Curso &rarr;</span>
      </a>
      {% endif %}{% endfor %}
      {% if not cats %}
      <a href="{{ url_for('catalog', tipo='curso', cat='salud') }}" class="course-card">
        <div class="card-icon">🏥</div><div class="card-title">Salud y Matroneria</div><span class="sence-badge">SENCE DISPONIBLE</span><span class="see-link">Ver Curso &rarr;</span>
      </a>
      <a href="{{ url_for('catalog', tipo='curso', cat='mineria') }}" class="course-card">
        <div class="card-icon">⛏️</div><div class="card-title">Mineria e Industrial</div><span class="sence-badge">SENCE DISPONIBLE</span><span class="see-link">Ver Curso &rarr;</span>
      </a>
      <a href="{{ url_for('catalog', tipo='curso', cat='admin-contabilidad') }}" class="course-card">
        <div class="card-icon">📊</div><div class="card-title">Administracion y Contabilidad</div><span class="sence-badge">SENCE DISPONIBLE</span><span class="see-link">Ver Curso &rarr;</span>
      </a>
      <a href="{{ url_for('catalog', tipo='curso', cat='computacion') }}" class="course-card">
        <div class="card-icon">🖥️</div><div class="card-title">Computacion y Ofimatica</div><span class="sence-badge">SENCE DISPONIBLE</span><span class="see-link">Ver Curso &rarr;</span>
      </a>
      {% endif %}
    </div>

    <div class="section-header">
      <div class="section-badge" style="background:#f3e8ff">💎</div>
      <h2 class="section-title">PACKS ESPECIALES</h2>
    </div>
    <div class="packs-grid">
      <a href="{{ url_for('catalog', tipo='pack', cat='pack-salud') }}" class="pack-card" style="background:linear-gradient(135deg,#1a2b5e,#0d1b4b)">
        <div class="pack-title">PACK SALUD</div>
        <div class="pack-subtitle" style="color:#b5d000">PREMIUM</div>
        <div class="pack-courses">3 Cursos · 150 horas</div>
        <button class="pack-btn" style="background:#b5d000;color:#0d1b4b">Ver Pack &rarr;</button>
      </a>
      <a href="{{ url_for('catalog', tipo='pack', cat='pack-admin') }}" class="pack-card" style="background:linear-gradient(135deg,#2d3a6b,#1a2b5e)">
        <div class="pack-title">PACK ADMIN.</div>
        <div class="pack-subtitle" style="color:#e8821a">PUBLICA</div>
        <div class="pack-courses">4 Cursos · 200 horas</div>
        <button class="pack-btn" style="background:#e8821a;color:white">Ver Pack &rarr;</button>
      </a>
      <a href="{{ url_for('catalog', tipo='pack', cat='pack-rrhh') }}" class="pack-card" style="background:linear-gradient(135deg,#0f1e45,#1a2b5e)">
        <div class="pack-title">PACK</div>
        <div class="pack-subtitle" style="color:#a855f7">RR.HH.</div>
        <div class="pack-courses">3 Cursos · 150 horas</div>
        <button class="pack-btn" style="background:#a855f7;color:white">Ver Pack &rarr;</button>
      </a>
    </div>
  </div>

  <!-- DIPLOMADOS -->
  <div>
    <div class="section-header">
      <div class="section-badge" style="background:#fff4e8">🎓</div>
      <h2 class="section-title">DIPLOMADOS</h2>
    </div>
    <div class="diplomados-box">
      <a href="{{ url_for('catalog', tipo='diplomado', cat='dip-salud') }}" class="dip-item">
        <div><div class="dip-name">Diplomado en Salud Ocupacional</div></div><span class="dip-arrow">›</span>
      </a>
      <a href="{{ url_for('catalog', tipo='diplomado', cat='dip-mineria') }}" class="dip-item">
        <div><div class="dip-name">Diplomado Proyectos Mineros (EUDE)</div><span class="eude-badge">🎓 CONVENIO EUDE</span></div><span class="dip-arrow">›</span>
      </a>
      <a href="{{ url_for('catalog', tipo='diplomado') }}" class="dip-item">
        <div><div class="dip-name">Diplomado Estrategias Financieras</div><span class="eude-badge">🎓 CONVENIO EUDE</span></div><span class="dip-arrow">›</span>
      </a>
      <a href="{{ url_for('catalog', tipo='diplomado') }}" class="dip-item">
        <div><div class="dip-name">Diplomado Derecho y Gestion Social</div></div><span class="dip-arrow">›</span>
      </a>
      <a href="{{ url_for('catalog', tipo='diplomado') }}" class="dip-item">
        <div><div class="dip-name">Diplomado Liderazgo Organizacional</div></div><span class="dip-arrow">›</span>
      </a>
      <a href="{{ url_for('catalog', tipo='diplomado') }}" class="btn-full">VER TODOS LOS DIPLOMADOS &rarr;</a>
    </div>

    <div class="nch-badge">
      <div class="nch-label">CERTIFICADO</div>
      <div class="nch-circle"><div class="nch-code">NCh2728</div><div class="nch-stars">⭐⭐⭐</div></div>
      <div class="nch-text">Acreditado por Instituto Nacional de Normalizacion</div>
    </div>
  </div>

  <!-- SIDEBAR EMPRESAS -->
  <div>
    <div class="section-header"><h2 class="section-title">EMPRESAS</h2></div>
    <div class="partners-grid">
      <div class="partner-logo"><div class="partner-icon" style="background:#1a2b5e">DEG</div><span class="partner-name">DEG</span></div>
      <div class="partner-logo"><div class="partner-icon" style="background:#c0392b">BK</div><span class="partner-name">Bohnenkamp</span></div>
      <div class="partner-logo"><div class="partner-icon" style="background:#2980b9">GC</div><span class="partner-name">Gobernacion</span></div>
      <div class="partner-logo"><div class="partner-icon" style="background:#27ae60">BT</div><span class="partner-name">beoTestes</span></div>
      <div class="partner-logo"><div class="partner-icon" style="background:#8e44ad">HT</div><span class="partner-name">Hospital Tome</span></div>
      <div class="partner-logo"><div class="partner-icon" style="background:#1a2b5e">OJ</div><span class="partner-name">OTEC JCCD</span></div>
    </div>

    <div class="accred-box">
      <div class="accred-title">NUESTRAS ACREDITACIONES</div>
      <div class="accred-item"><span class="accred-tag" style="background:#1a7f4b">SENCE</span><span style="font-size:10px;color:#555">Franquicia Tributaria</span></div>
      <div class="accred-item"><span class="accred-tag" style="background:#1a3070">NCh2728</span><span style="font-size:10px;color:#555">Gestion de Calidad</span></div>
      <div class="accred-item"><span class="accred-tag" style="background:#8B0000">MOP</span><span style="font-size:10px;color:#555">Curso PAC acreditado</span></div>
      <div class="accred-item"><span class="accred-tag" style="background:#c0392b">ChileValora</span><span style="font-size:10px;color:#555">Competencias Lab.</span></div>
    </div>

    <div class="cotizar-cta">
      <div class="cotizar-icon">📋</div>
      <div class="cotizar-text">COTIZAR CAPACITACION CORPORATIVA</div>
      <a href="{{ url_for('quote') }}"><button class="btn-green">COTIZAR AHORA &rarr;</button></a>
    </div>
  </div>
</div>
{% endblock %}