{% extends "base.html" %}

{% block title %}Predict — Constellar{% endblock %}

{% block content %}
<section class="section" style="max-width:820px; padding-top:5rem; text-align:center;">
    <div class="tag" style="margin-bottom:1.25rem;">Choose a Method</div>
    <h1 style="font-family:'Orbitron',monospace; font-size:clamp(1.6rem,3.5vw,2.5rem); font-weight:900; margin:0 0 1rem; letter-spacing:-.01em;">
        Predict Constellations
    </h1>
    <p style="font-size:.9375rem; color:var(--muted); line-height:1.7; max-width:480px; margin:0 auto 3rem;">
        Two ways to explore the stars — analyze a photo you already have, or scan the sky live with your camera.
    </p>

    <div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.25rem; text-align:left;">

        <!-- Upload option -->
        <a href="{% url 'upload' %}" class="glass-card" style="display:block; padding:2rem; text-decoration:none; color:inherit;">
            <div style="width:48px; height:48px; border-radius:12px; background:rgba(99,102,241,.12); border:1px solid rgba(99,102,241,.25); display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem;">
                <svg width="22" height="22" fill="none" stroke="#a5b4fc" stroke-width="1.8" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5"/>
                </svg>
            </div>
            <h3 style="font-size:1.0625rem; font-weight:600; margin:0 0 .625rem; color:#fff;">Upload an Image</h3>
            <p style="font-size:.8125rem; color:var(--muted); line-height:1.65; margin:0 0 1.25rem;">
                Select a night sky photo from your device. The model detects and labels every constellation it finds, with detailed information about each.
            </p>
            <span style="font-size:.8125rem; font-weight:600; color:#a5b4fc;">Upload a photo →</span>
        </a>

        <!-- Live option -->
        <a href="{% url 'detect' %}" class="glass-card" style="display:block; padding:2rem; text-decoration:none; color:inherit;">
            <div style="width:48px; height:48px; border-radius:12px; background:rgba(99,102,241,.12); border:1px solid rgba(99,102,241,.25); display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem;">
                <svg width="22" height="22" fill="none" stroke="#a5b4fc" stroke-width="1.8" viewBox="0 0 24 24">
                    <path stroke-linecap="round" d="M15 10l4.553-2.276A1 1 0 0 1 21 8.618v6.764a1 1 0 0 1-1.447.894L15 14M5 18h8a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2z"/>
                </svg>
            </div>
            <h3 style="font-size:1.0625rem; font-weight:600; margin:0 0 .625rem; color:#fff;">Live Detection</h3>
            <p style="font-size:.8125rem; color:var(--muted); line-height:1.65; margin:0 0 1.25rem;">
                Point your camera at the night sky and watch constellations get outlined and named on the feed in real time.
            </p>
            <span style="font-size:.8125rem; font-weight:600; color:#a5b4fc;">Open camera →</span>
        </a>

    </div>
</section>
{% endblock %}