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

{% block title %}Shiftly Scheduler - Employee Scheduling Software{% endblock %}

{% block head %}
<meta name="description" content="Shiftly Scheduler is a mobile-first employee scheduling software that makes it easy for employers to manage shifts and for employees to track their work schedules.">
<style>
  .hero-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 6rem 0;
    color: white;
  }
  .hero-section h1 {
    font-size: 3.5rem;
    font-weight: 700;
  }
  .hero-section p {
    font-size: 1.25rem;
    opacity: 0.9;
  }
</style>
{% endblock %}

{% block content %}
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
  <div class="container">
    <a class="navbar-brand" href="#">Shiftly Scheduler</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        {% if user.is_authenticated %}
        <li class="nav-item">
            <a class="nav-link" href="{% url 'profile' %}">Dashboard</a>
        </li>
        <li class="nav-item">
            <a class="btn btn-primary" href="{% url 'create_checkout_session' %}">Subscribe</a>
        </li>
        <li class="nav-item">
            <form action="{% url 'logout' %}" method="post" class="d-inline">
                {% csrf_token %}
                <button type="submit" class="btn btn-secondary">Logout</button>
            </form>
        </li>
        {% else %}
        <li class="nav-item me-2">
            <a class="btn btn-secondary" href="{% url 'login' %}">Login</a>
        </li>
        <li class="nav-item">
            <a class="btn btn-primary" href="{% url 'signup' %}">Sign Up for Free</a>
        </li>
        {% endif %}
      </ul>
    </div>
  </div>
</nav>

<div class="hero-section text-center">
  <div class="container">
    <h1 class="display-4">Effortless Scheduling for Modern Teams</h1>
    <p class="lead my-4">Create, manage, and view staff schedules in minutes. <br> More time focusing on your business, less time on admin.</p>
    <a class="btn btn-primary btn-lg" href="{% url 'signup' %}">Get Started for Free</a>
    <p class="text-sm mt-2">Free 14-day trial. No credit card required.</p>
  </div>
</div>

<footer class="py-4 text-center">
  <div class="container">
    <p class="text-muted">&copy; {% now "Y" %} Shiftly Scheduler. All Rights Reserved.</p>
  </div>
</footer>
{% endblock %}