{% extends 'base.html' %}
{% load static %}

{% block content %}
<!-- Hero Section -->
<section class="hero-section text-white py-5" style="background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%); position: relative; overflow: hidden;">
  <div class="container py-5 position-relative" style="z-index: 2;">
    <div class="row align-items-center">
      <div class="col-lg-7">
        <h1 class="display-3 fw-bold mb-3">Reach the Right Department Chiefs.</h1>
        <p class="lead mb-4 opacity-75">Connect with hospital leadership across Germany. Manage your medical recruitment outreach in one streamlined dashboard.</p>
        <div class="d-flex gap-3">
          <a href="#directory" class="btn btn-accent px-4 py-2 fs-5">Browse Directory</a>
          <button class="btn btn-outline-light px-4 py-2 fs-5">Bulk Outreach</button>
        </div>
      </div>
      <div class="col-lg-5 d-none d-lg-block">
        <div class="glass-card p-4 rounded-4" style="background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2);">
          <div class="d-flex justify-content-between mb-4">
            <div>
              <small class="text-uppercase opacity-50">Active Campaigns</small>
              <h3 class="mb-0">12</h3>
            </div>
            <div class="text-end">
              <small class="text-uppercase opacity-50">Response Rate</small>
              <h3 class="mb-0 text-success">24%</h3>
            </div>
          </div>
          <div class="progress mb-2" style="height: 6px; background: rgba(255,255,255,0.1);">
            <div class="progress-bar bg-success" style="width: 70%"></div>
          </div>
          <small class="opacity-75">Outreach goal for January</small>
        </div>
      </div>
    </div>
  </div>
  <!-- Abstract Shapes -->
  <div style="position: absolute; top: -50px; right: -50px; width: 300px; height: 300px; border-radius: 50%; background: rgba(16, 185, 129, 0.1); filter: blur(50px);"></div>
  <div style="position: absolute; bottom: -100px; left: -100px; width: 400px; height: 400px; border-radius: 50%; background: rgba(16, 185, 129, 0.05); filter: blur(80px);"></div>
</section>

<!-- Filter Section -->
<section id="directory" class="py-5 bg-white shadow-sm border-bottom">
  <div class="container">
    <form method="GET" class="row g-3 align-items-end">
      <div class="col-md-4">
        <label class="form-label fw-bold small text-uppercase">Search</label>
        <input type="text" name="q" class="form-control" placeholder="Search by name or hospital..." value="{{ query }}">
      </div>
      <div class="col-md-3">
        <label class="form-label fw-bold small text-uppercase">State</label>
        <select name="state" class="form-select">
          <option value="">All States</option>
          {% for code, name in states %}
          <option value="{{ code }}" {% if selected_state == code %}selected{% endif %}>{{ name }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="col-md-3">
        <label class="form-label fw-bold small text-uppercase">Department</label>
        <select name="dept" class="form-select">
          <option value="">All Departments</option>
          {% for code, name in departments %}
          <option value="{{ code }}" {% if selected_dept == code %}selected{% endif %}>{{ name }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="col-md-2">
        <button type="submit" class="btn btn-primary w-100 py-2">Filter</button>
      </div>
    </form>
  </div>
</section>

<!-- Results Grid -->
<section class="py-5">
  <div class="container">
    <div class="d-flex justify-content-between align-items-center mb-4">
      <h2 class="mb-0">{{ chiefs.count }} Contacts Found</h2>
      <div>
        <button class="btn btn-sm btn-outline-secondary me-2">Select All</button>
        <button class="btn btn-sm btn-accent">Email Selected</button>
      </div>
    </div>

    <div class="row g-4">
      {% for chief in chiefs %}
      <div class="col-md-6 col-lg-4">
        <div class="card h-100 border-0 shadow-sm hover-lift">
          <div class="card-body">
            <div class="d-flex justify-content-between mb-3">
              <span class="badge bg-light text-dark border">{{ chief.get_department_display }}</span>
              <div class="form-check">
                <input class="form-check-input" type="checkbox" value="{{ chief.id }}">
              </div>
            </div>
            <h5 class="card-title fw-bold mb-1">{{ chief.name }}</h5>
            <p class="text-muted small mb-3">{{ chief.title }}</p>
            <hr class="opacity-10">
            <div class="d-flex align-items-center mb-2">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-hospital text-accent me-2" viewBox="0 0 16 16">
                <path d="M8.5 5.034v1.1l.953-.55.5.867L9 7l.953.55-.5.867-.953-.55v1.1h1v1h-1v1h1v1h-1V14h3a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1h-3.5z"/>
                <path d="M3.5 15h9a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-3.5V5.034h1v1h1v-1h-1V3.916l-.953.55-.5-.867L9 3l.953-.55-.5-.867-.953.55V1h-1v1.1l-.953-.55-.5.867L6 3l-.953.55.5.867.953-.55v1.1h1v1h-1v1h1v-1h-1v4a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h3.5v3.966h-1v-1h-1v1h1v1.1l.953-.55.5.867L9 13l-.953.55.5.867.953-.55v1.1h1v-1z"/>
              </svg>
              <span class="small fw-semibold">{{ chief.hospital.name }}</span>
            </div>
            <div class="d-flex align-items-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo-alt text-muted me-2" viewBox="0 0 16 16">
                <path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 31.481 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.304 1.867-.834 2.94zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z"/>
                <path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
              </svg>
              <span class="small text-muted">{{ chief.hospital.city }}, {{ chief.hospital.get_state_display }}</span>
            </div>
          </div>
          <div class="card-footer bg-transparent border-0 pb-4 px-4">
            <a href="mailto:{{ chief.email }}" class="btn btn-outline-primary btn-sm w-100">Send Individual Email</a>
          </div>
        </div>
      </div>
      {% empty %}
      <div class="col-12 text-center py-5">
        <div class="mb-3">
          <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-search text-muted opacity-25" viewBox="0 0 16 16">
            <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
          </svg>
        </div>
        <h3 class="fw-bold">No contacts found</h3>
        <p class="text-muted">Try adjusting your filters or search terms.</p>
        <a href="/" class="btn btn-primary">Clear All Filters</a>
      </div>
      {% endfor %}
    </div>
  </div>
</section>

<style>
  .hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,0.1) !important;
  }
  .text-accent {
    color: var(--accent-color);
  }
</style>
{% endblock %}
