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

{% block title %}RepairsHub - Multi-tenant Repairs Management{% endblock %}

{% block head %}
<style>
    .hero-section {
        padding: 8rem 0 6rem;
        background: radial-gradient(circle at 0% 0%, rgba(251, 146, 60, 0.05) 0%, transparent 50%),
                    radial-gradient(circle at 100% 100%, rgba(15, 23, 42, 0.02) 0%, transparent 50%);
        position: relative;
        overflow: hidden;
    }

    .hero-shape {
        position: absolute;
        z-index: -1;
        filter: blur(40px);
        opacity: 0.4;
    }

    .shape-1 {
        width: 300px;
        height: 300px;
        background: var(--primary-color);
        border-radius: 50%;
        top: -100px;
        right: -50px;
    }

    .shape-2 {
        width: 200px;
        height: 200px;
        background: var(--navy-light);
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
        bottom: -50px;
        left: -50px;
    }

    .hero-title {
        font-size: 3.5rem;
        line-height: 1.1;
        letter-spacing: -1.5px;
        margin-bottom: 1.5rem;
    }

    .hero-subtitle {
        font-size: 1.25rem;
        color: var(--text-muted);
        max-width: 600px;
        margin-bottom: 2.5rem;
    }

    .feature-card {
        padding: 2rem;
        transition: transform 0.3s ease;
        height: 100%;
    }

    .feature-card:hover {
        transform: translateY(-5px);
    }

    .feature-icon {
        width: 48px;
        height: 48px;
        background-color: rgba(251, 146, 60, 0.1);
        color: var(--primary-color);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        margin-bottom: 1.5rem;
        font-size: 1.5rem;
    }
</style>
{% endblock %}

{% block content %}
<section class="hero-section">
    <div class="hero-shape shape-1"></div>
    <div class="hero-shape shape-2"></div>
    
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-7">
                <h1 class="hero-title">Manage Repairs with <span style="color: var(--primary-color);">Total Isolation</span>.</h1>
                <p class="hero-subtitle">The multi-tenant engine for repair firms. Custom workflows, required folder structures, and automated status management—all in one secure hub.</p>
                <div class="d-flex gap-3">
                    <a href="{% url 'register' %}" class="btn btn-primary btn-lg">Start Free Trial</a>
                    <a href="#features" class="btn btn-outline-dark btn-lg">Explore Features</a>
                </div>
            </div>
            <div class="col-lg-5 d-none d-lg-block">
                <div class="card p-4 bg-white shadow-lg border-0" style="transform: rotate(2deg);">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h5 class="mb-0">Job #RH-9021</h5>
                        <span class="badge bg-warning text-dark">To Be Surveyed</span>
                    </div>
                    <div class="mb-3">
                        <label class="text-muted small">Address</label>
                        <p class="fw-bold mb-0">123 Construction Way, London</p>
                    </div>
                    <div class="progress mb-3" style="height: 8px;">
                        <div class="progress-bar bg-success" style="width: 75%"></div>
                    </div>
                    <p class="small text-muted mb-0"><i class="bi bi-folder-check"></i> 3/4 Folders Completed</p>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="features" class="py-5">
    <div class="container py-5">
        <div class="text-center mb-5">
            <h2 class="mb-3">Built for Modern Repair Firms</h2>
            <p class="text-muted">Everything you need to scale your operations securely.</p>
        </div>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="card feature-card">
                    <div class="feature-icon"><i class="bi bi-shield-check"></i></div>
                    <h4>Multi-Tenancy</h4>
                    <p class="text-muted">Strict data isolation for every company. Your jobs, statuses, and users stay yours.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card feature-card">
                    <div class="feature-icon"><i class="bi bi-diagram-3"></i></div>
                    <h4>Custom Workflows</h4>
                    <p class="text-muted">Define your own job statuses and documentation folders that apply to every project.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card feature-card">
                    <div class="feature-icon"><i class="bi bi-file-earmark-excel"></i></div>
                    <h4>Bulk Sync</h4>
                    <p class="text-muted">Import and export jobs via Excel with intelligent field mapping and UPRN tracking.</p>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}
