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

{% block content %}
<section class="hero-section container">
  <div class="row justify-content-center">
    <div class="col-lg-10">
      <div class="feature-pill">
        <span class="feature-dot"></span>
        <span class="text-white fw-medium">Exclusive for Students & Grads</span>
      </div>
      <h1 class="hero-title text-white">Build and Fund the <span class="text-gradient">Future Together.</span></h1>
      <p class="hero-subtitle text-secondary">The only university networking and micro-investment platform where verified students and recent graduates support each other's startups.</p>
      <div class="d-flex flex-column flex-sm-row justify-content-center gap-3">
        <a href="{% url 'signup' %}" class="btn btn-primary btn-lg">Get Started</a>
        <a href="#how-it-works" class="btn btn-outline-light btn-lg rounded-pill px-4">See How It Works</a>
      </div>
    </div>
  </div>
</section>

<section class="container mb-5 pb-5">
  <div class="row g-4">
    <div class="col-md-4">
      <div class="glass-card h-100">
        <div class="mb-4">
          <i class="fa-solid fa-user-shield fa-2x text-gradient"></i>
        </div>
        <h3 class="text-white mb-3">Verify</h3>
        <p class="text-secondary small">Exclusively for students and graduates within the last 5 years. Use your university email to join the network.</p>
      </div>
    </div>
    <div class="col-md-4">
      <div class="glass-card h-100">
        <div class="mb-4">
          <i class="fa-solid fa-people-group fa-2x text-gradient"></i>
        </div>
        <h3 class="text-white mb-3">Connect</h3>
        <p class="text-secondary small">Find the perfect co-founder or team member using our AI-driven matching questionnaire based on skills and vision.</p>
      </div>
    </div>
    <div class="col-md-4">
      <div class="glass-card h-100">
        <div class="mb-4">
          <i class="fa-solid fa-rocket fa-2x text-gradient"></i>
        </div>
        <h3 class="text-white mb-3">Fund</h3>
        <p class="text-secondary small">Start raising capital from your peers or discover student-led startups to invest in, starting from as little as £50.</p>
      </div>
    </div>
  </div>
</section>

<section id="how-it-works" class="container py-5">
  <div class="text-center mb-5">
    <h2 class="text-white mb-4">How it Works</h2>
    <p class="text-secondary">Three simple steps to launch your vision or grow your portfolio.</p>
  </div>
  <div class="row justify-content-center">
    <div class="col-lg-8">
      <div class="d-flex flex-column gap-5">
        <div class="d-flex align-items-start gap-4">
          <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center flex-shrink-0" style="width: 40px; height: 40px;">
            <span class="text-white fw-bold">1</span>
          </div>
          <div>
            <h5 class="text-white mb-2">Create Your Verified Profile</h5>
            <p class="text-secondary">Sign up with your .edu or university email. We verify your status as a current student or recent graduate instantly.</p>
          </div>
        </div>
        <div class="d-flex align-items-start gap-4">
          <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center flex-shrink-0" style="width: 40px; height: 40px;">
            <span class="text-white fw-bold">2</span>
          </div>
          <div>
            <h5 class="text-white mb-2">Define Your Role</h5>
            <p class="text-secondary">Choose to be a Founder looking for investment and partners, or an Investor looking to support peer-led innovation.</p>
          </div>
        </div>
        <div class="d-flex align-items-start gap-4">
          <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center flex-shrink-0" style="width: 40px; height: 40px;">
            <span class="text-white fw-bold">3</span>
          </div>
          <div>
            <h5 class="text-white mb-2">Start Networking & Investing</h5>
            <p class="text-secondary">Browse listings, connect with founders, or set up your startup profile and start your first funding round.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}