{% extends "base.html" %}
{% block title %}Echo 1.1 - Home{% endblock %}
{% block content %}
<div class="min-h-screen">
  <section class="py-20 md:py-28">

    <div class="absolute inset-0 flex justify-center items-center pointer-events-none">
      <div class="w-[500px] h-[500px] bg-blue-600/20 blur-3xl rounded-full"></div>
    </div>

    <div class="max-w-6xl mx-auto px-4 text-center">
      <div class="flex items-center justify-center">
        <img src="/static/icons/favicon.ico">
        <h1 class="text-4xl md:text-8xl font-extrabold tracking-tight text-blue-100 fade-in-up">
          Echo 1.2
        </h1>
      </div>
      <h2 class="text-4xl md:text-6xl font-extrabold tracking-tight text-zinc-100">
        The smarter way to manage IT support
      </h2>
      <p class="mt-4 md:mt-6 text-lg md:text-2xl text-zinc-400 max-w-2xl mx-auto">
        Echo streamlines ticket intake and accelerates resolutions with agent suggestions, and a growing knowledge base.
      </p>
      <div class="mt-8 flex items-center justify-center gap-3">
        {% set current_user = user or request.session.get('user') %}
        {% if not current_user %}
          <a href="/register" class="inline-flex items-center rounded-md bg-blue-600 px-5 py-3 text-white font-medium hover:bg-blue-700">Get Started</a>
        {%endif %}
        <a href="/features" class="inline-flex items-center rounded-md border border-zinc-800 px-5 py-3 text-zinc-300 hover:bg-zinc-800">Learn More</a>
      </div>
    </div>
  </section>
  <section class="flex flex-col md:flex-row items-center justify-center text-center border-t py-8 ">
    <div class="px-4 py-2 animate-fade-in">
      <h3 class="text-lg font-semibold ">Submit Tickets</h3>
    </div>
    <div class="px-4 py-2 animate-fade-in" style="animation-delay: 1.5s;">
      <img src="/static/icons/arrow_right.svg" alt="Shield icon" class="h-7 w-7 invert brightness-0"/> 
    </div>
    <div class="px-4 py-2 animate-fade-in" style="animation-delay: 1.5s;">
      <h3 class="text-lg font-semibold ">Suggest Solutions</h3>
    </div>
    <div class="px-4 py-2 animate-fade-in" style="animation-delay: 3s;">
      <img src="/static/icons/arrow_right.svg" alt="Shield icon" class="h-7 w-7 invert brightness-0"/> 
    </div>
    <div class="px-4 py-2 animate-fade-in" style="animation-delay: 3s;">
      <h3 class="text-lg font-semibold ">Resolve Faster</h3>
    </div>
    <div class="px-4 py-2 animate-fade-in" style="animation-delay: 4s;">
      <img src="/static/icons/arrow_right.svg" alt="Shield icon" class="h-7 w-7 invert brightness-0"/> 
    </div>
    <div class="px-4 py-2 animate-fade-in" style="animation-delay: 4s;">
      <h3 class="text-lg font-semibold ">Store Proven Solutions for reuse</h3>
    </div>
  </section>
  <link rel="stylesheet" href="/static/styles/echo.css">

  <section class="py-16 bg-zinc-900 rounded-2xl">
    <div class="max-w-6xl mx-auto px-4">
      <div class="text-center">
        <h2 class="text-2xl md:text-3xl font-semibold">Everything you need to resolve faster</h2>
        <p class="mt-2 text-zinc-400">Built for end users, agents, and managers.</p>
      </div>
      <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="rounded-lg border border-zinc-800 p-5 bg-zinc-900">
          <div class="text-blue-400 font-semibold">Issue Submission Forms</div>
          <p class="mt-2 text-sm text-zinc-400">Users can submit issues via their designated dashboard.</p>
        </div>
        <div class="rounded-lg border border-zinc-800 p-5 bg-zinc-900">
          <div class="text-blue-400 font-semibold">Agent Suggestions</div>
          <p class="mt-2 text-sm text-zinc-400">IT agents add resolution suggestions that appear directly in context to the corresponding  ticket  for faster fixes.</p>
        </div>
        <div class="rounded-lg border border-zinc-800 p-5 bg-zinc-900">
          <div class="text-blue-400 font-semibold">Knowledge Base</div>
          <p class="mt-2 text-sm text-zinc-400">Application admins have access to the knowledge base to update and delete data.</p>
        </div>
      </div>
    </div>
  </section>

  <section class="py-16 bg-zinc-900">
    <div class="max-w-6xl mx-auto px-4 text-center">
      <h2 class="text-2xl md:text-3xl font-semibold">Start resolving tickets faster</h2>
      <p class="mt-2 text-zinc-400">Create your workspace and publish your first adaptive form in minutes.</p>
      {% set current_user = user or request.session.get('user') %}
      {% if not current_user %}
      <div class="mt-6">
        <a href="/register" class="inline-flex items-center rounded-md bg-blue-600 px-6 py-3 text-white font-medium hover:bg-blue-700">Create Free Account</a>
      </div>
      {% endif %}
    </div>
  </section>

</div>
{% endblock %}