{% extends "base.html" %}

{% block title %}Home - 1D Poisson Simulator{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="text-center mb-5">
            <h1 class="display-4">
                <i class="bi bi-cpu-fill"></i> 1D Poisson Semiconductor Simulator
            </h1>
            <p class="lead text-muted">
                Web-based interface harnessing <a href="https://engineering.nd.edu/faculty/gregory-snider/" target="_blank">Greg Snider's</a> 1D Poisson/Schrödinger Solver <br>
                Inspired by <a href="https://www.mathworks.com/matlabcentral/fileexchange/54505-onedp" target="_blank">Todd Karin's</a> MATLAB code
            </p>
        </div>
    </div>
</div>

<div class="row g-4">
    <!-- Build Simulation Card -->
    <div class="col-md-6 col-lg-4">
        <div class="card h-100 shadow-sm hover-card">
            <div class="card-body text-center">
                <div class="mb-3">
                    <i class="bi bi-hammer display-4 text-primary"></i>
                </div>
                <h5 class="card-title">Build Simulation</h5>
                <p class="card-text">
                    Build structures and execute Poisson and Schrödinger-Poisson calculations.
                </p>
                <ul class="list-unstyled text-start small">
                    <li><i class="bi bi-check-circle text-success"></i> Add/remove layers</li>
                    <li><i class="bi bi-check-circle text-success"></i> Set material properties</li>
                    <li><i class="bi bi-check-circle text-success"></i> Poisson solver</li>
                    <li><i class="bi bi-check-circle text-success"></i> Quantum states</li>
                    <li><i class="bi bi-check-circle text-success"></i> Self-consistent solution</li>
                </ul>
            </div>
            <div class="card-footer bg-transparent">
                <a href="/builder" class="btn btn-primary w-100">
                    <i class="bi bi-hammer"></i> Build & Simulate
                </a>
            </div>
        </div>
    </div>

    <!-- View Results Card -->
    <div class="col-md-6 col-lg-4">
        <div class="card h-100 shadow-sm hover-card">
            <div class="card-body text-center">
                <div class="mb-3">
                    <i class="bi bi-graph-up display-4 text-info"></i>
                </div>
                <h5 class="card-title">View Results</h5>
                <p class="card-text">
                    Visualize band structures, charge densities, and wavefunctions.
                </p>
                <ul class="list-unstyled text-start small">
                    <li><i class="bi bi-check-circle text-success"></i> Band diagrams</li>
                    <li><i class="bi bi-check-circle text-success"></i> Carrier densities</li>
                    <li><i class="bi bi-check-circle text-success"></i> Wavefunctions</li>
                    <li><i class="bi bi-check-circle text-success"></i> Export plots</li>
                </ul>
            </div>
            <div class="card-footer bg-transparent">
                <a href="/results" class="btn btn-info w-100">
                    <i class="bi bi-graph-up"></i> View Results
                </a>
            </div>
        </div>
    </div>

    <!-- Materials Database Card -->
    <div class="col-md-6 col-lg-4">
        <div class="card h-100 shadow-sm hover-card">
            <div class="card-body text-center">
                <div class="mb-3">
                    <i class="bi bi-table display-4 text-warning"></i>
                </div>
                <h5 class="card-title">Materials Database</h5>
                <p class="card-text">
                    Browse semiconductor material properties and alloy compositions.
                </p>
                <ul class="list-unstyled text-start small">
                    <li><i class="bi bi-check-circle text-success"></i> Common III-V materials</li>
                    <li><i class="bi bi-check-circle text-success"></i> Alloy interpolation</li>
                    <li><i class="bi bi-check-circle text-success"></i> Temperature dependence</li>
                    <li><i class="bi bi-check-circle text-success"></i> Custom materials</li>
                </ul>
            </div>
            <div class="card-footer bg-transparent">
                <a href="/materials" class="btn btn-warning w-100">
                    <i class="bi bi-table"></i> Browse Materials
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Features Section -->
<div class="row mt-5">
    <div class="col-12">
        <h2 class="text-center mb-4">Key Features</h2>
    </div>
</div>

<div class="row g-4">
    <div class="col-md-4">
        <div class="card border-0">
            <div class="card-body">
                <h5 class="card-title">
                    <i class="bi bi-lightning-charge text-primary"></i> Fast & Accurate
                </h5>
                <p class="card-text">
                    Powered by Gregory Snider's proven 1D Poisson solver with self-consistent Schrödinger-Poisson calculations.
                </p>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card border-0">
            <div class="card-body">
                <h5 class="card-title">
                    <i class="bi bi-laptop text-success"></i> User Friendly
                </h5>
                <p class="card-text">
                    Intuitive web interface eliminates the need for command-line interaction and manual file editing.
                </p>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card border-0">
            <div class="card-body">
                <h5 class="card-title">
                    <i class="bi bi-pie-chart text-info"></i> Rich Visualization
                </h5>
                <p class="card-text">
                    Interactive plots for band structures, carrier densities, and quantum mechanical wavefunctions.
                </p>
            </div>
        </div>
    </div>
</div>

<!-- Quick Start -->
<div class="row mt-5">
    <div class="col-12">
        <div class="card bg-light">
            <div class="card-body">
                <h3 class="card-title">
                    <i class="bi bi-rocket-takeoff"></i> Quick Start
                </h3>
                <ol class="mb-0">
                    <li><strong>Build:</strong> Design your heterostructure layer-by-layer</li>
                    <li><strong>Simulate:</strong> Execute Poisson or Schrödinger-Poisson calculations</li>
                    <li><strong>Analyze:</strong> View and export band diagrams, carrier densities, and wavefunctions</li>
                </ol>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_css %}
<style>
    .hover-card {
        transition: transform 0.2s, box-shadow 0.2s;
    }
    
    .hover-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    }
    
    .display-4 {
        font-size: 3rem;
    }
</style>
{% endblock %}