{% extends "base.html" %}
{% load static %}
{% block title %}HAEGL DCET Coaching | Karnataka DCET Preparation{% endblock %}
{% block content %}

<style>
  .hero-bg-grid {
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
    mask-image: radial-gradient(ellipse at 60% 50%, black 45%, transparent 85%) !important;
    -webkit-mask-image: radial-gradient(ellipse at 60% 50%, black 45%, transparent 85%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }
  .hero-bg-grid::before {
    content: "" !important;
    position: absolute !important;
    top: -80px !important;
    left: -80px !important;
    width: calc(100% + 160px) !important;
    height: calc(100% + 160px) !important;
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px) !important;
    background-size: 40px 40px !important;
    will-change: transform !important;
    animation: heroGridFlow 4s linear infinite !important;
  }
  @keyframes heroGridFlow {
    0% {
      transform: translate3d(0, 0, 0);
    }
    100% {
      transform: translate3d(40px, 40px, 0);
    }
  }
</style>

<section class="hero">
  <div class="hero-bg-grid" aria-hidden="true"></div>
  <div class="hero-glow-orb" aria-hidden="true"></div>
  <div class="hero-glow-orb-2" aria-hidden="true"></div>

  <div class="container hero-grid">
    <!-- Left Column: Institutional Pedigree & Positioning -->
    <div class="hero-content">
      <div class="inst-pill">
        <span class="inst-pulse-dot"></span>
        <span class="inst-pill-text">Karnataka DCET 2026 Admissions Open</span>
        <span class="inst-pill-badge">KEA Aligned</span>
      </div>

      <h1 class="hero-headline">
        Direct Lateral Entry into Karnataka's <span class="hero-text-gradient">Premier Engineering</span> Colleges.
      </h1>

      <p class="hero-lead">
        Karnataka’s specialized coaching institute for Diploma engineers. Master Applied Mathematics, Applied Science,
        and Branch Core subjects through VTU-aligned faculty, high-yield shortcut techniques, and computer-based mock
        analytics.
      </p>


      <!-- Action Buttons -->
      <div class="btn-row hero-actions">
        <a class="btn btn-primary btn-executive" href="{% url 'enquiries:contact' %}">
          <span>Enquire for DCET 2026 Batch</span>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"
            stroke-linecap="round" stroke-linejoin="round">
            <line x1="5" y1="12" x2="19" y2="12" />
            <polyline points="12 5 19 12 12 19" />
          </svg>
        </a>
        <a class="btn btn-outline-executive" href="{% url 'courses:course' %}">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
            stroke-linecap="round" stroke-linejoin="round">
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
            <polyline points="14 2 14 8 20 8" />
            <line x1="16" y1="13" x2="8" y2="13" />
            <line x1="16" y1="17" x2="8" y2="17" />
          </svg>
          <span>Explore Syllabus &amp; Modules</span>
        </a>
      </div>

      <!-- Institutional Track Record Strip -->
      <div class="institutional-trust-strip">
        <div class="trust-metric">
          <strong>94.8%</strong>
          <span>Selection Rate</span>
        </div>
        <div class="trust-divider"></div>
        <div class="trust-metric">
          <strong>5,000+</strong>
          <span>Diploma Engineers</span>
        </div>
      </div>
    </div>

    <!-- Right Column: KEA Revised Pattern Aligned Card -->
    <div class="hero-visual">
      <div class="kea-aligned-card">
        <div class="kea-card-header">
          <div class="kea-card-crest">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"
              stroke-linecap="round" stroke-linejoin="round">
              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
            </svg>
          </div>
          <div>
            <span class="kea-card-badge">Official KEA Blueprint</span>
            <h2 class="kea-card-title">KEA Revised Pattern Aligned</h2>
            <small class="kea-card-subtitle">Karnataka Examinations Authority &bull; DCET 2026</small>
          </div>
        </div>

        <div class="kea-card-body">
          <!-- Point 1 -->
          <div class="kea-point-box">
            <div class="kea-point-icon">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"
                stroke-linecap="round" stroke-linejoin="round">
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
                <polyline points="14 2 14 8 20 8" />
                <line x1="16" y1="13" x2="8" y2="13" />
                <line x1="16" y1="17" x2="8" y2="17" />
                <polyline points="10 9 9 9 8 9" />
              </svg>
            </div>
            <div class="kea-point-content">
              <strong>Previous 5 Years Papers with Expected Questions</strong>
              <p>Solved past 5 years question papers paired with curated high-yield expected questions and detailed
                solutions.</p>
            </div>
          </div>

          <!-- Point 2 -->
          <div class="kea-point-box">
            <div class="kea-point-icon">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"
                stroke-linecap="round" stroke-linejoin="round">
                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
                <polyline points="22 4 12 14.01 9 11.01" />
              </svg>
            </div>
            <div class="kea-point-content">
              <strong>KEA Revised Pattern Aligned</strong>
              <p>100-mark complete syllabus with topic-level weightage, formula derivations, and high-yield scoring
                modules.</p>
            </div>
          </div>

          <!-- Point 2 -->
          <div class="kea-point-box">
            <div class="kea-point-icon">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"
                stroke-linecap="round" stroke-linejoin="round">
                <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
                <line x1="8" y1="21" x2="16" y2="21" />
                <line x1="12" y1="17" x2="12" y2="21" />
              </svg>
            </div>
            <div class="kea-point-content">
              <strong>Full-Length Computer-Based Mocks</strong>
              <p>Real exam interface simulation with negative-marking precision, question analytics, and ranking
                reports.</p>
            </div>
          </div>
        </div>

        <div class="kea-card-footer">
          <div class="kea-footer-note">
            <span class="kea-live-dot"></span>
            <span>Batch Admissions Open for DCET 2026</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    <h2 class="section-title">Why Choose HAEGL?</h2>
    <div class="grid grid-3">
      <article class="card">
        <h3>Structured preparation</h3>
        <p>A planned path through the DCET syllabus, topic by topic.</p>
      </article>
      <article class="card">
        <h3>Concept-focused teaching</h3>
        <p>Clear explanations that build understanding, not just memory.</p>
      </article>
      <article class="card">
        <h3>Practice and mock tests</h3>
        <p>Regular practice questions and exam-style mock tests.</p>
      </article>
      <article class="card">
        <h3>Revision support</h3>
        <p>Organised revision material ahead of the examination.</p>
      </article>
      <article class="card">
        <h3>Progress tracking</h3>
        <p>Feedback on performance so you know where to improve.</p>
      </article>
      <article class="card">
        <h3>Student-focused guidance</h3>
        <p>Support and guidance for students throughout preparation.</p>
      </article>
    </div>
  </div>
</section>

<section class="section alt">
  <div class="container two-col">
    <div>
      <span class="tag">Academic Excellence &bull; Lateral Entry Specialization</span>
      <h2 class="section-title left" style="margin-top: 0.5rem;">About HAEGL DCET Coaching</h2>
      {% if content.about_summary %}
      <p class="about-lead">{{ content.about_summary|linebreaksbr }}</p>
      {% endif %}
      <div style="margin-top: 1.5rem;">
        <a class="btn btn-outline" href="{% url 'core:about' %}">
          <span>Learn more about us</span>
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
            style="margin-left: 6px;">
            <line x1="5" y1="12" x2="19" y2="12"></line>
            <polyline points="12 5 19 12 12 19"></polyline>
          </svg>
        </a>
      </div>
    </div>
    <div class="card about-approach-card">
      <div class="approach-badge-wrap" style="display: flex; align-items: center; gap: 12px; margin-bottom: 0.8rem;">
        <span class="approach-icon"
          style="width: 40px; height: 40px; border-radius: 8px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; flex-shrink: 0; border: 1px solid var(--primary-border);">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M22 10v6M2 10l10-5 10 5-10 5z"></path>
            <path d="M6 12v5c3 3 9 3 12 0v-5"></path>
          </svg>
        </span>
        <h3 style="margin: 0; font-size: 1.15rem;">Our Approach to DCET Preparation</h3>
      </div>
      <p>{{ content.learning_approach|default:"Concept clarity, regular practice and structured revision." }}</p>
      <ul class="plain"
        style="margin-top: 1.2rem; border-top: 1px solid var(--line); padding-top: 1rem; display: flex; flex-direction: column; gap: 0.6rem;">
        <li style="display: flex; align-items: center; gap: 8px; font-size: 0.92rem; color: var(--ink);">
          <span style="color: #10b981; font-weight: 700;">✓</span> 100% KEA DCET syllabus mastery with shortcut
          techniques
        </li>
        <li style="display: flex; align-items: center; gap: 8px; font-size: 0.92rem; color: var(--ink);">
          <span style="color: #10b981; font-weight: 700;">✓</span> Computer-based mock tests with negative marking
          analytics
        </li>
        <li style="display: flex; align-items: center; gap: 8px; font-size: 0.92rem; color: var(--ink);">
          <span style="color: #10b981; font-weight: 700;">✓</span> Dedicated mentorship by senior professors from
          premier colleges
        </li>
      </ul>
    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    <h2 class="section-title">DCET Course Overview</h2>
    {% if course %}
    <div style="max-width: 820px; margin: 0 auto; text-align: center;">
      <h3 style="font-size: 1.45rem; margin-bottom: 0.6rem;">{{ course.title }}</h3>
      <p style="color: var(--muted); line-height: 1.6; margin-bottom: 1.8rem;">{{
        course.description|truncatewords:60|linebreaksbr }}</p>
      <p><a class="btn btn-primary" href="{% url 'courses:course' %}">Explore Course &amp; Subjects &rarr;</a></p>
    </div>
    {% else %}{% include "includes/empty.html" with message="Course details will be published soon." %}{% endif %}
  </div>
</section>


<section class="section">
  <div class="container">
    <h2 class="section-title">Preparation Features</h2>
    <div class="grid grid-3">
      <article class="card">
        <h3>Concept explanations</h3>
        <p>Topic-wise explanations of core ideas.</p>
      </article>
      <article class="card">
        <h3>Practice questions</h3>
        <p>Question practice for each subject.</p>
      </article>
      <article class="card">
        <h3>Mock examinations</h3>
        <p>Exam-style tests to build confidence.</p>
      </article>
      <article class="card">
        <h3>Previous-year papers</h3>
        <p>Made available where legally permitted.</p>
      </article>
      <article class="card">
        <h3>Revision materials</h3>
        <p>Concise material for final revision.</p>
      </article>
      <article class="card">
        <h3>Performance feedback</h3>
        <p>Guidance on strengths and areas to improve.</p>
      </article>
    </div>
  </div>
</section>

{% if faculty %}
<section class="section alt">
  <div class="container">
    <h2 class="section-title">Our Faculty & Mentors</h2>
    <div class="faculty-grid" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch;">
      {% for f in faculty %}
        {% include "includes/faculty_card.html" %}
      {% endfor %}
    </div>
    <p class="center" style="margin-top: 2.75rem;"><a class="btn btn-outline" href="{% url 'academics:faculty' %}">Meet Our Faculty Members</a></p>
  </div>
</section>
{% endif %}


<style>
  .faq-columns {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
    align-items: start !important;
  }

  @media (max-width: 860px) {
    .faq-columns {
      grid-template-columns: 1fr !important;
    }
  }

  .faq-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }

  details.faq-item summary {
    list-style: none !important;
    list-style-type: none !important;
  }

  details.faq-item summary::-webkit-details-marker,
  details.faq-item summary::marker {
    display: none !important;
  }
</style>

<section class="section faq-section">
  <div class="container">
    <div class="faq-header">
      <h2 class="section-title">Frequently Asked Questions</h2>
      <p>Everything you need to know about Karnataka DCET coaching batches, eligibility, syllabus, and preparation.</p>
    </div>

    {% if faqs %}
    <div class="faq-columns" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start;">
      <!-- Left Column: 3 Questions -->
      <div class="faq-col" style="display: flex; flex-direction: column; gap: 1rem;">
        {% for f in faqs %}
        {% if forloop.counter <= 3 %} <details class="faq faq-item">
          <summary>
            <span>{{ f.question }}</span>
            <span class="faq-chevron" aria-hidden="true">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                <polyline points="6 9 12 15 18 9"></polyline>
              </svg>
            </span>
          </summary>
          <div class="faq-body">
            <p>{{ f.answer|linebreaksbr }}</p>
          </div>
          </details>
          {% endif %}
          {% endfor %}
      </div>

      <!-- Right Column: Other 3 Questions -->
      <div class="faq-col" style="display: flex; flex-direction: column; gap: 1rem;">
        {% for f in faqs %}
        {% if forloop.counter > 3 %}
        <details class="faq faq-item">
          <summary>
            <span>{{ f.question }}</span>
            <span class="faq-chevron" aria-hidden="true">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                <polyline points="6 9 12 15 18 9"></polyline>
              </svg>
            </span>
          </summary>
          <div class="faq-body">
            <p>{{ f.answer|linebreaksbr }}</p>
          </div>
        </details>
        {% endif %}
        {% endfor %}
      </div>
    </div>
    {% else %}
    {% include "includes/empty.html" with message="FAQs will be added soon." %}
    {% endif %}


  </div>
</section>

<section class="section" style="padding-top: 1rem; padding-bottom: 4rem;">
  <div class="container">
    <div class="about-cta-container">
      <h2>{{ content.final_cta_title }}</h2>
      <p>{% if contact.phone %}Call {{ contact.phone }}{% if contact.whatsapp %} / {{ contact.whatsapp }}{% endif %} or
        {% endif %}send us an enquiry and our team will get in touch.</p>
      <div class="about-cta-actions">
        <a class="btn btn-primary" href="{% url 'enquiries:contact' %}">Talk to Our Team</a>
      </div>
    </div>
  </div>
</section>
{% endblock %}