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

{% block title %}AI Healthcare Agents - Automate Admin & Patient Workflows | Gobii{% endblock %}

{% block head_extras %}
{{ block.super }}
<meta name="description" content="Open source AI agents designed to support HIPAA compliance. Self-host in your environment, fully audit the code, and automate patient intake, scheduling, and admin tasks.">
<style>
  .healthcare-panel {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .healthcare-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 20% 25%, rgba(99, 102, 241, 0.14) 0%, rgba(99, 102, 241, 0) 55%),
      radial-gradient(circle at 75% 35%, rgba(79, 70, 229, 0.10) 0%, rgba(79, 70, 229, 0) 60%),
      radial-gradient(circle at 55% 80%, rgba(129, 140, 248, 0.08) 0%, rgba(129, 140, 248, 0) 70%);
    opacity: 0.8;
    filter: blur(40px);
    pointer-events: none;
    z-index: 2;
  }

  .healthcare-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.65) 100%);
    pointer-events: none;
    z-index: 3;
    mix-blend-mode: lighten;
  }

  .healthcare-gradient-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.28) 0%, rgba(129, 140, 248, 0.32) 40%, rgba(79, 70, 229, 0.22) 100%);
    -webkit-mask-image: radial-gradient(ellipse 130% 100% at 50% 0%, black 40%, transparent 100%);
    mask-image: radial-gradient(ellipse 130% 100% at 50% 0%, black 40%, transparent 100%);
  }

  .healthcare-content {
    position: relative;
    z-index: 10;
  }

  /* Hero image as atmospheric background element */
  .hero-image-bg {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    overflow: hidden;
  }

  .hero-image-bg img {
    position: absolute;
    right: -5%;
    top: 0;
    width: 80%;
    height: 100%;
    object-fit: cover;
    object-position: 70% 30%;
    opacity: 1;
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, transparent 5%, rgba(0,0,0,0.08) 15%, rgba(0,0,0,0.25) 30%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0.8) 60%, black 80%),
      linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 8%, black 18%, black 85%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(90deg, transparent 0%, transparent 5%, rgba(0,0,0,0.08) 15%, rgba(0,0,0,0.25) 30%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0.8) 60%, black 80%),
      linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 8%, black 18%, black 85%, transparent 100%);
    mask-composite: intersect;
  }

  @media (max-width: 1023px) {
    .hero-image-bg img {
      right: -10%;
      width: 110%;
      object-position: 70% 30%;
      opacity: 0.45;
      -webkit-mask-image:
        linear-gradient(90deg, transparent 0%, transparent 15%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.4) 55%, rgba(0,0,0,0.75) 75%, black 90%),
        linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.7) 10%, black 20%, black 80%, transparent 100%);
      mask-image:
        linear-gradient(90deg, transparent 0%, transparent 15%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.4) 55%, rgba(0,0,0,0.75) 75%, black 90%),
        linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.7) 10%, black 20%, black 80%, transparent 100%);
    }

    .healthcare-panel::after {
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.6) 40%, rgba(255, 255, 255, 0.3) 70%, transparent 100%),
                  linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.6) 100%);
    }
  }

  .agent-card {
    transition: all 0.2s ease;
  }

  .agent-card:hover {
    transform: translateY(-2px);
    border-color: rgba(99, 102, 241, 0.26);
    box-shadow: 0 24px 48px -28px rgba(99, 102, 241, 0.35);
  }
</style>
{% endblock %}

{% block content %}
<!-- Hero Section -->
<div class="relative healthcare-panel -mt-16 min-h-[600px] lg:min-h-[700px]">
  <div class="healthcare-gradient-bg" aria-hidden="true"></div>

  <!-- Hero image as atmospheric background -->
  <div class="hero-image-bg" aria-hidden="true">
    <img
      src="{% static 'images/solutions/healthcare-hero.jpg' %}"
      alt=""
      loading="eager"
    >
  </div>

  <!-- Grid pattern overlay -->
  <div class="absolute inset-0 bg-grid-slate-100 bg-[size:var(--bg-size-x)_var(--bg-size-y)] [mask-image:linear-gradient(0deg,transparent,rgba(255,255,255,0.7),transparent)] opacity-20 z-[4]" style="--bg-size-x:40px; --bg-size-y:40px"></div>

  <!-- Seamless Gradient Fade to white -->
  <div class="absolute bottom-0 left-0 right-0 h-40 bg-gradient-to-t from-white via-white/80 to-transparent pointer-events-none z-[11]"></div>

  <section class="relative healthcare-content">
    <div class="relative max-w-7xl mx-auto px-6 sm:px-8 lg:px-12 xl:px-16 2xl:px-20 pt-24 lg:pt-32 pb-28">

      <!-- Hero Content -->
      <div class="relative z-10 max-w-2xl ml-2 sm:ml-4 lg:ml-8 2xl:ml-0">
        <h1 class="text-4xl sm:text-5xl lg:text-6xl tracking-tight font-light text-gray-900 leading-[1.1]">
          Healthcare automation,
          <span class="font-normal bg-gradient-to-r from-indigo-700 to-violet-600 bg-clip-text text-transparent">done right</span>
        </h1>

        <p class="mt-6 text-lg text-gray-700 leading-relaxed max-w-xl">
          Open source AI agents designed to support HIPAA compliance. Self-host in your environment, audit every line of code, and keep patient data under your control.
        </p>

        <div class="mt-10 flex flex-col sm:flex-row gap-4">
          <a
            href="#request-demo"
            class="w-full sm:w-auto group inline-flex items-center justify-center gap-2 px-7 py-3.5 bg-gradient-to-r from-indigo-600 to-violet-600 hover:from-indigo-700 hover:to-violet-700 text-white font-medium rounded-xl shadow-lg shadow-indigo-200/50 hover:shadow-xl transition-all duration-200"
            data-analytics-cta-id="solutions_health_care_hero_request_demo"
            data-analytics-placement="hero"
            data-analytics-intent="request_demo"
          >
            Request a demo
            <svg class="w-4 h-4 group-hover:translate-x-0.5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
            </svg>
          </a>
          <a href="#how-it-works" class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-7 py-3.5 bg-white/70 backdrop-blur-sm hover:bg-white/90 text-gray-800 font-medium rounded-xl border border-white/60 hover:border-indigo-200 shadow-sm transition-all duration-200">
            See how it works
          </a>
        </div>

        <!-- Inline stats -->
        <div class="mt-16 flex flex-wrap gap-x-14 gap-y-5">
          <div>
            <div class="text-3xl font-light text-gray-900">Open source</div>
            <p class="text-sm text-gray-800 mt-1">Fully auditable</p>
          </div>
          <div>
            <div class="text-3xl font-light text-gray-900">Self-hosted</div>
            <p class="text-sm text-gray-800 mt-1">Your infrastructure</p>
          </div>
          <div>
            <div class="text-3xl font-light text-gray-900">24/7</div>
            <p class="text-sm text-gray-800 mt-1">Always on</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

<!-- Agents Section -->
<section class="relative bg-white pb-12">
  <div class="max-w-6xl mx-auto px-6">
    <div class="text-center pt-4 pb-24">
      <h2 class="text-3xl sm:text-4xl font-light text-gray-900 tracking-tight">
        Built for healthcare
      </h2>
      <p class="mt-4 text-lg text-gray-500 max-w-2xl mx-auto">
        Open source agents designed to support compliance. Fully auditable, self-hosted in your environment.
      </p>
    </div>

    <!-- Featured Agent: Patient Intake -->
    <div class="mb-10">
      <div class="agent-card group relative overflow-hidden rounded-3xl bg-gradient-to-br from-indigo-600 via-violet-600 to-indigo-600 p-1">
        <div class="absolute inset-0 bg-gradient-to-br from-indigo-400/20 via-transparent to-violet-400/20 pointer-events-none"></div>
        <div class="relative bg-white rounded-[1.35rem] p-8 lg:p-10">
          <div class="grid lg:grid-cols-2 gap-8 lg:gap-12 items-center">
            <!-- Left: Content -->
            <div>
              <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-indigo-50 text-indigo-600 text-xs font-semibold tracking-wide uppercase mb-6">
                <span class="w-1.5 h-1.5 rounded-full bg-indigo-500 animate-pulse"></span>
                Most Popular
              </div>
              <h3 class="text-2xl lg:text-3xl font-medium text-gray-900 mb-4">Patient Intake Agent</h3>
              <p class="text-gray-600 text-lg leading-relaxed mb-8">
                Automates patient registration, insurance verification, and pre-visit questionnaires. Reduces wait times and front-desk burden.
              </p>
              <ul class="grid sm:grid-cols-2 gap-x-8 gap-y-3 text-sm text-gray-600 mb-8">
                <li class="flex items-center gap-3">
                  <div class="w-5 h-5 rounded-full bg-indigo-100 flex items-center justify-center flex-shrink-0">
                    <svg class="w-3 h-3 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/>
                    </svg>
                  </div>
                  Digital forms
                </li>
                <li class="flex items-center gap-3">
                  <div class="w-5 h-5 rounded-full bg-indigo-100 flex items-center justify-center flex-shrink-0">
                    <svg class="w-3 h-3 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/>
                    </svg>
                  </div>
                  Insurance verification
                </li>
                <li class="flex items-center gap-3">
                  <div class="w-5 h-5 rounded-full bg-indigo-100 flex items-center justify-center flex-shrink-0">
                    <svg class="w-3 h-3 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/>
                    </svg>
                  </div>
                  EHR integration
                </li>
                <li class="flex items-center gap-3">
                  <div class="w-5 h-5 rounded-full bg-indigo-100 flex items-center justify-center flex-shrink-0">
                    <svg class="w-3 h-3 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/>
                    </svg>
                  </div>
                  Open source
                </li>
              </ul>
              <a href="#request-demo" class="group/btn inline-flex items-center justify-center gap-2 px-6 py-3.5 bg-gradient-to-r from-indigo-600 to-violet-600 hover:from-indigo-700 hover:to-violet-700 text-white font-medium rounded-xl shadow-lg shadow-indigo-200/50 hover:shadow-xl transition-all duration-200">
                Request a demo
                <svg class="w-4 h-4 group-hover/btn:translate-x-0.5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                </svg>
              </a>
            </div>
            <!-- Right: Visual -->
            <div class="hidden lg:block">
              <div class="relative">
                <!-- Decorative gradient orb -->
                <div class="absolute -top-8 -right-8 w-64 h-64 bg-gradient-to-br from-indigo-200/60 via-violet-200/40 to-purple-200/60 rounded-full blur-3xl pointer-events-none"></div>
                <!-- Icon cluster -->
                <div class="relative flex items-center justify-center py-8">
                  <div class="relative">
                    <!-- Main icon -->
                    <div class="w-28 h-28 bg-gradient-to-br from-indigo-500 to-violet-600 rounded-3xl flex items-center justify-center shadow-2xl shadow-indigo-300/50 rotate-3">
                      <i data-lucide="clipboard-list" class="w-14 h-14 text-white"></i>
                    </div>
                    <!-- Floating badges -->
                    <div class="absolute -top-4 -right-6 w-12 h-12 bg-white rounded-xl shadow-lg flex items-center justify-center border border-slate-100">
                      <i data-lucide="shield-check" class="w-6 h-6 text-indigo-600"></i>
                    </div>
                    <div class="absolute -bottom-3 -left-8 w-12 h-12 bg-white rounded-xl shadow-lg flex items-center justify-center border border-slate-100">
                      <i data-lucide="file-text" class="w-6 h-6 text-gray-700"></i>
                    </div>
                    <div class="absolute top-1/2 -right-10 -translate-y-1/2 w-10 h-10 bg-white rounded-lg shadow-lg flex items-center justify-center border border-slate-100">
                      <i data-lucide="user-check" class="w-5 h-5 text-violet-600"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Supporting Agents -->
    <div class="grid md:grid-cols-2 gap-6">
      <!-- Agent 2: Scheduling Agent -->
      <div class="agent-card group relative bg-white rounded-2xl p-8 shadow-xl shadow-slate-200/40 border border-slate-100">
        <div class="flex items-start gap-5">
          <div class="w-14 h-14 bg-gradient-to-br from-violet-500 to-indigo-600 rounded-2xl flex items-center justify-center shadow-lg shadow-violet-200/50 flex-shrink-0">
            <i data-lucide="calendar-check" class="w-7 h-7 text-white"></i>
          </div>
          <div class="flex-1 min-w-0">
            <h3 class="text-xl font-medium text-gray-900 mb-2">Scheduling Agent</h3>
            <p class="text-gray-600 leading-relaxed mb-5">
              Handles appointment booking, rescheduling, and reminders. Reduces no-shows and optimizes provider schedules.
            </p>
          </div>
        </div>
        <ul class="space-y-2.5 text-sm text-gray-500 mb-6 mt-5 pl-[4.75rem]">
          <li class="flex items-center gap-2.5">
            <svg class="w-4 h-4 text-violet-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
            Smart scheduling
          </li>
          <li class="flex items-center gap-2.5">
            <svg class="w-4 h-4 text-violet-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
            Automated reminders
          </li>
          <li class="flex items-center gap-2.5">
            <svg class="w-4 h-4 text-violet-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
            Waitlist management
          </li>
        </ul>
        <div class="pl-[4.75rem]">
          <a href="#request-demo" class="inline-flex items-center text-sm font-medium text-violet-600 hover:text-violet-700">
            Learn more
            <svg class="w-4 h-4 ml-1 group-hover:translate-x-0.5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
            </svg>
          </a>
        </div>
      </div>

      <!-- Agent 3: Prior Auth Agent -->
      <div class="agent-card group relative bg-white rounded-2xl p-8 shadow-xl shadow-slate-200/40 border border-slate-100">
        <div class="flex items-start gap-5">
          <div class="w-14 h-14 bg-gradient-to-br from-violet-500 to-indigo-600 rounded-2xl flex items-center justify-center shadow-lg shadow-violet-200/50 flex-shrink-0">
            <i data-lucide="file-check" class="w-7 h-7 text-white"></i>
          </div>
          <div class="flex-1 min-w-0">
            <h3 class="text-xl font-medium text-gray-900 mb-2">Prior Auth Agent</h3>
            <p class="text-gray-600 leading-relaxed mb-5">
              Automates prior authorization requests and follow-ups with payers. Reduces delays and denials.
            </p>
          </div>
        </div>
        <ul class="space-y-2.5 text-sm text-gray-500 mb-6 mt-5 pl-[4.75rem]">
          <li class="flex items-center gap-2.5">
            <svg class="w-4 h-4 text-emerald-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
            Payer portal automation
          </li>
          <li class="flex items-center gap-2.5">
            <svg class="w-4 h-4 text-emerald-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
            Status tracking
          </li>
          <li class="flex items-center gap-2.5">
            <svg class="w-4 h-4 text-emerald-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
            Appeal assistance
          </li>
        </ul>
        <div class="pl-[4.75rem]">
          <a href="#request-demo" class="inline-flex items-center text-sm font-medium text-emerald-600 hover:text-emerald-700">
            Learn more
            <svg class="w-4 h-4 ml-1 group-hover:translate-x-0.5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- How It Works -->
<section id="how-it-works" class="relative py-20 lg:py-28 overflow-hidden scroll-mt-20">
  <!-- Subtle centered gradient orb -->
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[400px] bg-gradient-to-r from-indigo-100/40 via-violet-100/50 to-indigo-100/40 rounded-full blur-[100px] pointer-events-none"></div>

  <div class="relative max-w-5xl mx-auto px-6">
    <div class="text-center mb-16">
      <h2 class="text-3xl sm:text-4xl font-light text-gray-900 tracking-tight">
        How it works
      </h2>
      <p class="mt-4 text-lg text-gray-500">
        From first call to full deployment in weeks, not months.
      </p>
    </div>

    <!-- Horizontal steps with connecting line -->
    <div class="relative">
      <!-- Connecting line (desktop) -->
      <div class="hidden md:block absolute top-5 left-[calc(16.67%+20px)] right-[calc(16.67%+20px)] h-px bg-gradient-to-r from-indigo-200 via-violet-200 to-indigo-200"></div>

      <div class="grid md:grid-cols-3 gap-10 lg:gap-16">
        <!-- Step 1 -->
        <div class="relative text-center">
          <div class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-gradient-to-br from-indigo-500 to-indigo-600 text-white text-lg font-medium shadow-lg shadow-indigo-200/50 mb-5">1</div>
          <h3 class="text-lg font-medium text-gray-900 mb-2">Audit the code</h3>
          <p class="text-gray-500 text-sm leading-relaxed">
            Review our open source codebase. Your security team verifies every line before deployment.
          </p>
        </div>

        <!-- Step 2 -->
        <div class="relative text-center">
          <div class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-gradient-to-br from-violet-500 to-violet-600 text-white text-lg font-medium shadow-lg shadow-violet-200/50 mb-5">2</div>
          <h3 class="text-lg font-medium text-gray-900 mb-2">Deploy in your environment</h3>
          <p class="text-gray-500 text-sm leading-relaxed">
            Self-host on your infrastructure. We configure for your EHR and compliance needs.
          </p>
        </div>

        <!-- Step 3 -->
        <div class="relative text-center">
          <div class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-gradient-to-br from-indigo-500 to-indigo-600 text-white text-lg font-medium shadow-lg shadow-indigo-200/50 mb-5">3</div>
          <h3 class="text-lg font-medium text-gray-900 mb-2">Go live with support</h3>
          <p class="text-gray-500 text-sm leading-relaxed">
            Launch with our team standing by. Ongoing updates as your needs evolve.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Benefits Section -->
<section class="relative pt-8 pb-20 lg:pt-10 lg:pb-24 overflow-hidden bg-white">

  <div class="relative max-w-6xl mx-auto px-6 sm:px-8 lg:px-12">
    <div class="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
      <!-- Left: Benefits -->
      <div class="lg:pr-4">
        <h2 class="text-3xl sm:text-4xl font-light text-gray-900 tracking-tight">
          Why healthcare teams choose Gobii
        </h2>
        <p class="mt-4 text-lg text-gray-500 mb-10">
          Reduce administrative burden without compromising on security or compliance.
        </p>

        <div class="space-y-6">
          <div class="group flex gap-5 p-4 -ml-4 rounded-2xl hover:bg-white/80 transition-colors">
            <div class="flex-shrink-0 w-12 h-12 rounded-2xl bg-gradient-to-br from-indigo-500 to-violet-500 flex items-center justify-center shadow-lg shadow-indigo-200/50">
              <i data-lucide="heart-pulse" class="w-6 h-6 text-white"></i>
            </div>
            <div>
              <h3 class="text-lg font-medium text-gray-900 mb-1">Focus on patient care</h3>
              <p class="text-gray-600 leading-relaxed">Free your clinical staff from paperwork. Let agents handle the admin so providers can spend more time with patients.</p>
            </div>
          </div>

          <div class="group flex gap-5 p-4 -ml-4 rounded-2xl hover:bg-white/80 transition-colors">
            <div class="flex-shrink-0 w-12 h-12 rounded-2xl bg-gradient-to-br from-violet-500 to-indigo-500 flex items-center justify-center shadow-lg shadow-violet-200/50">
              <i data-lucide="shield" class="w-6 h-6 text-white"></i>
            </div>
            <div>
              <h3 class="text-lg font-medium text-gray-900 mb-1">Designed for compliance</h3>
              <p class="text-gray-600 leading-relaxed">Open source code your security team can audit. Self-hosted to support HIPAA requirements.</p>
            </div>
          </div>

          <div class="group flex gap-5 p-4 -ml-4 rounded-2xl hover:bg-white/80 transition-colors">
            <div class="flex-shrink-0 w-12 h-12 rounded-2xl bg-gradient-to-br from-indigo-500 to-violet-500 flex items-center justify-center shadow-lg shadow-indigo-200/50">
              <i data-lucide="plug" class="w-6 h-6 text-white"></i>
            </div>
            <div>
              <h3 class="text-lg font-medium text-gray-900 mb-1">EHR integration</h3>
              <p class="text-gray-600 leading-relaxed">Works with Epic, Cerner, athenahealth, and other major EHR systems. No rip-and-replace required.</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Right: What's included -->
      <div class="relative">
        <!-- Decorative gradient orb -->
        <div class="absolute -top-8 -right-8 w-48 h-48 bg-gradient-to-br from-indigo-200/60 to-violet-200/60 rounded-full blur-3xl pointer-events-none"></div>

        <div class="relative bg-gradient-to-br from-indigo-50 via-violet-50/80 to-purple-50/60 rounded-3xl p-8 sm:p-10 lg:p-12 shadow-xl shadow-indigo-100/50 border border-white/60">
          <h3 class="text-lg font-medium text-gray-900 mb-6">Designed to support compliance</h3>
          <ul class="space-y-4">
            <li class="flex items-start gap-3">
              <div class="w-6 h-6 rounded-full bg-indigo-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                <svg class="w-3.5 h-3.5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/>
                </svg>
              </div>
              <div>
                <div class="font-medium text-gray-900">Open source &amp; auditable</div>
                <p class="text-sm text-gray-500 mt-0.5">Your security team can review every line before deployment</p>
              </div>
            </li>
            <li class="flex items-start gap-3">
              <div class="w-6 h-6 rounded-full bg-indigo-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                <svg class="w-3.5 h-3.5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/>
                </svg>
              </div>
              <div>
                <div class="font-medium text-gray-900">Self-hosted deployment</div>
                <p class="text-sm text-gray-500 mt-0.5">Patient data never leaves your infrastructure</p>
              </div>
            </li>
            <li class="flex items-start gap-3">
              <div class="w-6 h-6 rounded-full bg-indigo-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                <svg class="w-3.5 h-3.5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/>
                </svg>
              </div>
              <div>
                <div class="font-medium text-gray-900">BAA support available</div>
                <p class="text-sm text-gray-500 mt-0.5">Business Associate Agreement upon request</p>
              </div>
            </li>
            <li class="flex items-start gap-3">
              <div class="w-6 h-6 rounded-full bg-indigo-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                <svg class="w-3.5 h-3.5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/>
                </svg>
              </div>
              <div>
                <div class="font-medium text-gray-900">Enterprise support</div>
                <p class="text-sm text-gray-500 mt-0.5">Implementation help and EHR integration</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- FAQ Section -->
<section class="relative pt-8 pb-16 lg:pt-10 lg:pb-20 overflow-hidden">
  <!-- Subtle gradient background -->
  <div class="absolute inset-0 bg-gradient-to-b from-white via-slate-50/30 to-white pointer-events-none"></div>

  <div class="relative max-w-3xl mx-auto px-6">
    <div class="text-center mb-14">
      <h2 class="text-3xl sm:text-4xl font-light text-gray-900 tracking-tight">
        Questions
      </h2>
    </div>

    <div class="space-y-0 divide-y divide-gray-200">
      <details class="group py-6">
        <summary class="flex items-center justify-between cursor-pointer list-none">
          <span class="text-lg font-medium text-gray-900 pr-8">How does Gobii support HIPAA compliance?</span>
          <svg class="w-5 h-5 text-gray-400 group-open:rotate-45 transition-transform flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v12m6-6H6"/>
          </svg>
        </summary>
        <p class="mt-4 text-gray-600 leading-relaxed">
          Gobii is open source and designed to support HIPAA compliance. Your security team can audit the code, and you self-host in your own environment to maintain full control of patient data. We provide BAA support and help configure agents with encryption, audit trails, and role-based access control.
        </p>
      </details>

      <details class="group py-6">
        <summary class="flex items-center justify-between cursor-pointer list-none">
          <span class="text-lg font-medium text-gray-900 pr-8">Does Gobii integrate with my EHR?</span>
          <svg class="w-5 h-5 text-gray-400 group-open:rotate-45 transition-transform flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v12m6-6H6"/>
          </svg>
        </summary>
        <p class="mt-4 text-gray-600 leading-relaxed">
          Yes. Gobii agents integrate with major EHR systems including Epic, Cerner, athenahealth, eClinicalWorks, and others. We work with your IT team to ensure secure, compliant data flow.
        </p>
      </details>

      <details class="group py-6">
        <summary class="flex items-center justify-between cursor-pointer list-none">
          <span class="text-lg font-medium text-gray-900 pr-8">Can Gobii handle prior authorizations?</span>
          <svg class="w-5 h-5 text-gray-400 group-open:rotate-45 transition-transform flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v12m6-6H6"/>
          </svg>
        </summary>
        <p class="mt-4 text-gray-600 leading-relaxed">
          Yes. Our Prior Auth Agent automates the submission process, tracks status across payer portals, and flags issues before they become denials. Many practices see 50%+ reduction in auth-related staff time.
        </p>
      </details>

      <details class="group py-6">
        <summary class="flex items-center justify-between cursor-pointer list-none">
          <span class="text-lg font-medium text-gray-900 pr-8">Why is Gobii open source?</span>
          <svg class="w-5 h-5 text-gray-400 group-open:rotate-45 transition-transform flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v12m6-6H6"/>
          </svg>
        </summary>
        <p class="mt-4 text-gray-600 leading-relaxed">
          Healthcare organizations need to trust the software handling patient data. Open source means your security and compliance teams can audit every line of code. You can self-host in your own environment, ensuring data never leaves your infrastructure. No black boxes, no vendor lock-in.
        </p>
      </details>
    </div>
  </div>
</section>

<!-- Demo Request CTA -->
<section id="request-demo" class="relative pt-8 pb-24 lg:pt-10 lg:pb-28 overflow-hidden isolate scroll-mt-20">
  <!-- Centered radial gradient that fades to transparent on all edges -->
  <div class="absolute inset-0 pointer-events-none">
    <div class="absolute inset-0 bg-[radial-gradient(ellipse_70%_50%_at_50%_50%,rgba(99,102,241,0.08),transparent_70%)]"></div>
    <div class="absolute inset-0 bg-[radial-gradient(ellipse_90%_60%_at_50%_50%,rgba(139,92,246,0.05),transparent_60%)]"></div>
  </div>

  <!-- Soft floating orbs with heavy blur -->
  <div class="absolute top-1/2 left-1/3 -translate-y-1/2 w-[500px] h-[500px] bg-indigo-300/20 rounded-full blur-[100px] pointer-events-none"></div>
  <div class="absolute top-1/2 right-1/3 -translate-y-1/2 w-[400px] h-[400px] bg-violet-300/15 rounded-full blur-[100px] pointer-events-none"></div>

  <div class="relative max-w-4xl mx-auto px-6 text-center">
    <!-- Decorative badge -->
    <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/70 backdrop-blur-sm border border-indigo-200/50 shadow-sm mb-8">
      <span class="w-2 h-2 rounded-full bg-gradient-to-r from-indigo-500 to-violet-500 animate-pulse"></span>
      <span class="text-sm font-medium text-indigo-700">Open source &amp; self-hosted</span>
    </div>

    <h2 class="text-4xl sm:text-5xl font-light text-gray-900 tracking-tight">
      See Gobii in action
    </h2>
    <p class="mt-5 text-xl text-gray-600 max-w-xl mx-auto leading-relaxed">
      Schedule a personalized demo to see how AI agents can transform your healthcare operations.
    </p>

    <!-- Demo request form -->
    <div class="mt-10 max-w-md mx-auto">
      <form
        action="{% url 'pages:marketing_contact_request' %}"
        method="post"
        class="space-y-4"
        data-analytics-cta-id="healthcare_demo_request"
        data-analytics-placement="final_cta"
        data-analytics-intent="request_demo"
        hx-post="{% url 'pages:marketing_contact_request' %}"
        hx-target="#healthcare-demo-response"
        hx-swap="innerHTML"
      >
        {% csrf_token %}
        <input type="hidden" name="source" value="healthcare_landing_page">
        <input type="hidden" name="source_page" value="healthcare_demo_request">
        <div>
          <input
            type="email"
            name="email"
            required
            placeholder="Work email"
            autocomplete="email"
            class="w-full px-5 py-4 rounded-xl border border-gray-200 focus:border-indigo-400 focus:ring-2 focus:ring-indigo-200 outline-none transition-all text-gray-900 placeholder-gray-400"
          >
        </div>
        <div>
          <input
            type="text"
            name="organization"
            placeholder="Organization name"
            autocomplete="organization"
            class="w-full px-5 py-4 rounded-xl border border-gray-200 focus:border-indigo-400 focus:ring-2 focus:ring-indigo-200 outline-none transition-all text-gray-900 placeholder-gray-400"
          >
        </div>
        {% if settings.TURNSTILE_ENABLED and marketing_contact_form %}
        <div class="flex justify-center">
          {{ marketing_contact_form.turnstile }}
        </div>
        {% endif %}
        <button
          type="submit"
          class="w-full group inline-flex items-center justify-center gap-2 px-8 py-4 bg-gradient-to-r from-indigo-600 to-violet-600 hover:from-indigo-700 hover:to-violet-700 text-white font-medium rounded-xl shadow-lg shadow-indigo-300/50 hover:shadow-xl hover:shadow-indigo-300/60 transition-all duration-200 hover:-translate-y-0.5"
        >
          Request a demo
          <svg class="w-4 h-4 group-hover:translate-x-0.5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
          </svg>
        </button>
        <div id="healthcare-demo-response" class="text-left" aria-live="polite"></div>
      </form>
    </div>

    <!-- Trust indicators -->
    <div class="mt-14 flex flex-wrap items-center justify-center gap-x-8 gap-y-4 text-sm text-gray-500">
      <div class="flex items-center gap-2">
        <svg class="w-5 h-5 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
        </svg>
        Open source
      </div>
      <div class="flex items-center gap-2">
        <svg class="w-5 h-5 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
        </svg>
        Self-hosted
      </div>
      <div class="flex items-center gap-2">
        <svg class="w-5 h-5 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
        </svg>
        Fully auditable
      </div>
    </div>

    <p class="mt-8 text-sm text-gray-400">
      Backed by <a href="https://opencoreventures.com" target="_blank" rel="noopener" class="text-gray-500 hover:text-indigo-600 transition-colors">Open Core Ventures</a>, from the founder of GitLab
    </p>
  </div>
</section>
{% endblock %}
