{% extends "base.html" %}
{% block content %}

<style>
  /* Adjust logo size + remove white space appearance */
  .ip2-logo {
    max-width: 180px;
    height: auto;
    display: block;
  }

  .ip2-logo-wrapper {
    margin-bottom: 1rem;
  }

  /* Reduce space around hero card to avoid excessive scrolling */
  .ip2-hero-card {
    padding-top: 20px !important;
    padding-bottom: 10px !important;
  }
</style>

<div class="container mt-2 mb-3">

  <!-- HERO CARD -->
  <div class="ip2-hero-card">
    <div class="row g-4 align-items-center">

      <!-- Left Column: Logo + Welcome -->
      <div class="col-lg-7">

        <!-- LOGO -->
        <div class="ip2-logo-wrapper">
          <img src="/static/img/ip2marketlogo.png" alt="IP2Market Logo" class="ip2-logo">
        </div>

        <span class="ip2-pill mb-3">
          UNIVERSITY IP · DOST-ALIGNED · IPOPHL-READY
        </span>

        <h1 class="ip2-hero-title mb-3">
          Welcome to IP2Market
        </h1>

        <p class="ip2-hero-subtitle mb-4">
          Manage university IP portfolios, assess commercialization readiness
          (TRL / CRL / expert scoring), and connect promising technologies with
          potential adopters.
        </p>

        <a href="{% url 'login' %}" class="btn ip2-btn-primary px-4 py-2">
          <i class="bi bi-door-open"></i> Enter IP2Market
        </a>
      </div>

      <!-- Right Column: Small summary text -->
      <div class="col-lg-5 d-none d-lg-block">
        <p class="small text-muted mb-3">
          IP2Market brings together innovators, Technology Transfer Officers (TTOs),
          and industry partners into one DOST-aligned, IPOPHL-ready platform.
        </p>
        <ul class="small text-muted mb-0">
          <li>Upload IP disclosures and key documents.</li>
          <li>Score readiness across six TTO pillars.</li>
          <li>Publish high-readiness IPs to a partner marketplace.</li>
        </ul>
      </div>

    </div>
  </div>

</div>

<!-- QUICK OVERVIEW -->
<div class="container mb-5">
  <h5 class="text-uppercase text-muted fw-bold mb-3">Quick Overview</h5>

  <div class="row g-4">

    <div class="col-12 col-md-6 col-lg-4">
      <a href="{% url 'login' %}" class="ip2-click-card d-block">
        <div class="ip2-click-card-inner">
          <div class="ip2-click-card-icon"><i class="bi bi-lightbulb-fill"></i></div>
          <div class="ip2-click-card-body">
            <small class="text-uppercase fw-bold text-white-50">For Innovators</small>
            <h5 class="fw-bold text-white mt-2 mb-1">IP Portfolio</h5>
            <p class="text-white-50 mb-0">Register IPs, upload documents, and track TRL/CRL.</p>
          </div>
        </div>
      </a>
    </div>

    <div class="col-12 col-md-6 col-lg-4">
      <a href="{% url 'login' %}" class="ip2-click-card d-block">
        <div class="ip2-click-card-inner">
          <div class="ip2-click-card-icon"><i class="bi bi-clipboard-data"></i></div>
          <div class="ip2-click-card-body">
            <small class="text-uppercase fw-bold text-white-50">For TTOs</small>
            <h5 class="fw-bold text-white mt-2 mb-1">Readiness Assessment</h5>
            <p class="text-white-50 mb-0">Score novelty, feasibility, IP status strength, and market potential.</p>
          </div>
        </div>
      </a>
    </div>

    <div class="col-12 col-md-6 col-lg-4">
      <a href="{% url 'login' %}" class="ip2-click-card d-block">
        <div class="ip2-click-card-inner">
          <div class="ip2-click-card-icon"><i class="bi bi-buildings"></i></div>
          <div class="ip2-click-card-body">
            <small class="text-uppercase fw-bold text-white-50">For Industry</small>
            <h5 class="fw-bold text-white mt-2 mb-1">Technology Marketplace</h5>
            <p class="text-white-50 mb-0">Browse high-readiness IPs and send expressions of interest.</p>
          </div>
        </div>
      </a>
    </div>

  </div>
</div>

{% endblock %}