{% extends "base.html" %}

{% set meta_description = "Invario kostet 250 € pro Jahr für Inventarverwaltung und 100 € pro Jahr für das Bibliothekssystem. Keine Installation, Serverstandort Deutschland, Support für Schulen und Schulträger." %}

{% block title %}Preise | Invario 250 € / 100 €{% endblock %}

{% block head %}
{{ super() }}
<style>
    .booking-hero {
        background: linear-gradient(135deg, rgba(28, 90, 99, 0.14), rgba(255, 255, 255, 0.65)),
                    linear-gradient(180deg, #fffefb 0%, #f2f5f2 100%);
        border: 1px solid rgba(28, 90, 99, 0.16);
        border-radius: 24px;
        padding: 2.2rem;
        margin-bottom: 1.8rem;
        box-shadow: 0 18px 44px rgba(18, 49, 54, 0.08);
        overflow: hidden;
        position: relative;
    }

    .booking-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at top right, rgba(34, 98, 128, 0.16), transparent 36%);
        pointer-events: none;
    }

    .booking-hero > * {
        position: relative;
        z-index: 1;
    }

    .booking-hero h1 {
        margin-bottom: 0.65rem;
        color: #133d4a;
        font-size: clamp(2rem, 3.5vw, 3.2rem);
    }

    .booking-hero p {
        margin: 0.75rem 0 0;
        max-width: 780px;
        color: #3b5f69;
        font-size: clamp(1rem, 1.05vw, 1.1rem);
    }

    .pricing-pills {
        margin-top: 1.2rem;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.8rem;
    }

    .pricing-pill {
        padding: 0.9rem 1rem;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.75);
        border: 1px solid rgba(28, 90, 99, 0.12);
        color: #133d4a;
    }

    .pricing-pill strong {
        display: block;
        margin-bottom: 0.2rem;
        font-size: 1.05rem;
    }

    .pricing-pill span {
        color: #4d6b73;
    }

    .packages-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1.4rem;
        margin-bottom: 1.8rem;
    }

    .package-card {
        background: #ffffff;
        border: 1px solid #dfe7e7;
        border-radius: 22px;
        box-shadow: 0 18px 40px rgba(23, 44, 57, 0.05);
        padding: 1.8rem;
        display: grid;
        gap: 1.2rem;
        transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    }

    .package-card:hover {
        transform: translateY(-3px);
        border-color: #b2d4dc;
        box-shadow: 0 24px 48px rgba(23, 44, 57, 0.1);
    }

    .package-card__header {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 1.2rem;
    }

    .package-card__header > div {
        min-width: 0;
        width: 100%;
    }

    .package-card__tag {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.45rem 0.8rem;
        border-radius: 999px;
        background: #e6f5f8;
        color: #106476;
        font-size: 0.9rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        margin-bottom: 0.6rem;
    }

    .package-card__name {
        margin: 0;
        color: #143f46;
        font-size: clamp(1.4rem, 2.5vw, 1.8rem);
        line-height: 1.2;
        word-wrap: break-word;
    }

    .package-card__price {
        display: inline-flex;
        align-items: baseline;
        gap: 0.35rem;
        font-weight: 700;
        color: #102d37;
        white-space: normal;
        margin-top: 0.2rem;
    }

    .package-card__price span {
        font-size: clamp(1.8rem, 3vw, 2.4rem);
        letter-spacing: -0.04em;
        line-height: 1.1;
    }
    .package-card__old-price {
        color: #c62828;
        text-decoration: line-through;
        margin-right: 0.5rem;
        font-size: clamp(1rem, 2.2vw, 1.1rem);
        font-weight: 700;
        opacity: 0.95;
    }

    .package-card__new-price {
        color: #0b6440;
        font-size: clamp(1.8rem, 3vw, 2.4rem);
        font-weight: 800;
        letter-spacing: -0.04em;
    }

    .package-card__price small {
        color: #57717b;
        font-size: 0.95rem;
    }

    .package-card__description {
        margin: 0;
        color: #4b6a72;
        line-height: 1.75;
    }

    .package-card__features {
        margin: 1rem 0 0;
        padding: 0;
        list-style: none;
        display: grid;
        gap: 0.75rem;
    }

    .package-card__features li {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0.75rem;
        align-items: flex-start;
        color: #4f6a72;
        font-size: 0.98rem;
    }

    .package-card__features li::before {
        content: "✓";
        color: #187490;
        font-weight: 700;
        line-height: 1.2;
    }

    .package-card__actions {
        margin-top: 0.5rem;
    }

    .package-card__actions form,
    .package-card__actions a {
        width: 100%;
        display: inline-flex;
    }

    .btn {
        width: 100%;
        border: 1px solid #1c5a63;
        background: linear-gradient(120deg, #1d6d79 0%, #164b55 100%);
        color: #ffffff;
        border-radius: 999px;
        padding: 0.95rem 1.2rem;
        font-weight: 700;
        cursor: pointer;
        text-align: center;
        transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

    .btn:hover,
    .btn:focus-visible {
        transform: translateY(-1px);
        box-shadow: 0 12px 24px rgba(28, 90, 99, 0.22);
    }

    .btn.secondary {
        border-color: #c7dde3;
        background: #f7fbfb;
        color: #1d5f6f;
    }

    .notice {
        padding: 1.3rem 1.35rem;
        border-radius: 20px;
        background: #ffffff;
        border: 1px solid #dfe7ea;
        color: #304f5a;
        box-shadow: 0 12px 24px rgba(23, 44, 57, 0.04);
    }

    .notice strong {
        color: #15444c;
    }

    .pricing-comparison {
        margin: 1rem 0 1.8rem;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.8rem;
    }

    .comparison-card {
        padding: 1rem 1.05rem;
        border-radius: 16px;
        border: 1px solid #d9e2df;
        background: #ffffff;
        box-shadow: 0 10px 24px rgba(23, 44, 57, 0.04);
    }

    .comparison-card strong {
        display: block;
        color: #133d4a;
        margin-bottom: 0.25rem;
    }

    .comparison-card p {
        color: #4b6a72;
        line-height: 1.6;
        margin: 0;
    }

    .proof-card {
        margin-bottom: 1.8rem;
        padding: 1.25rem 1.35rem;
        border-radius: 18px;
        border: 1px solid #d9e4e0;
        background: linear-gradient(135deg, #ffffff 0%, #f3f8f5 100%);
        box-shadow: 0 12px 24px rgba(23, 44, 57, 0.05);
    }

    .proof-card h2 {
        margin-bottom: 0.5rem;
        color: #133d4a;
        font-size: clamp(1.35rem, 2.5vw, 1.9rem);
    }

    .proof-card p {
        margin: 0;
        color: #4b6a72;
        line-height: 1.7;
    }

    @media (max-width: 760px) {
        .booking-hero {
            padding: 1.5rem 1.2rem;
            border-radius: 18px;
        }

        .booking-hero h1 {
            font-size: 1.8rem;
        }

        .packages-grid {
            grid-template-columns: 1fr;
            gap: 1.2rem;
        }

        .pricing-pills,
        .pricing-comparison {
            grid-template-columns: 1fr;
        }

        .package-card {
            padding: 1.4rem 1.2rem;
            border-radius: 18px;
            gap: 1rem;
        }

        .package-card__header {
            gap: 0.8rem;
        }

        .package-card__price {
            margin-top: 0;
        }

        .package-card__price span {
            font-size: 2rem;
        }

        .btn {
            padding: 1rem 1.2rem;
            font-size: 1.05rem;
        }
    }

    /* Custom Modal Styles */
    .custom-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 100;
        padding: 1rem;
    }

    .custom-modal.active {
        display: flex;
    }

    .custom-modal-backdrop {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(18, 49, 54, 0.4);
        backdrop-filter: blur(4px);
    }

    .custom-modal-content {
        position: relative;
        background: #ffffff;
        border-radius: 20px;
        padding: 2.2rem;
        max-width: 500px;
        width: 100%;
        box-shadow: 0 24px 54px rgba(23, 44, 57, 0.2);
        z-index: 101;
        animation: modalEnter 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes modalEnter {
        from {
            opacity: 0;
            transform: translateY(20px) scale(0.95);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    .custom-modal-content h3 {
        margin-top: 0;
        margin-bottom: 1rem;
        color: #133d4a;
    }

    .custom-modal-content p {
        color: #4b6a72;
        margin-bottom: 0.8rem;
    }

    .custom-modal-actions {
        display: flex;
        gap: 1rem;
        margin-top: 2rem;
        justify-content: flex-end;
    }

    .custom-modal-actions button {
        width: auto;
        min-width: 120px;
    }

    @media (max-width: 600px) {
        .custom-modal-content {
            padding: 1.6rem;
            border-radius: 16px;
        }

        .custom-modal-actions {
            flex-direction: column;
        }

        .custom-modal-actions button {
            width: 100%;
        }
    }
</style>
{% endblock %}

{% block content %}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "SoftwareApplication",
      "@id": "{{ request.url_root.rstrip('/') }}#software",
      "name": "Invario",
      "url": "{{ request.url_root.rstrip('/') }}",
      "description": "{{ meta_description }}",
      "operatingSystem": "Web",
      "applicationCategory": "EducationApplication",
      "softwareVersion": "1.0",
      "image": "{{ url_for('static', filename='images/logo-1.jpeg') }}",
      "publisher": { "@type": "Organization", "name": "Invario", "url": "{{ request.url_root.rstrip('/') }}" },
      "offers": [
        { "@id": "{{ request.url_root.rstrip('/') }}#offer-inventar" },
        { "@id": "{{ request.url_root.rstrip('/') }}#offer-bibliothek" }
      ]
    },
    {
      "@type": "Offer",
      "@id": "{{ request.url_root.rstrip('/') }}#offer-inventar",
      "name": "Inventarverwaltung",
      "price": "250",
      "priceCurrency": "EUR",
      "url": "{{ request.url_root.rstrip('/') }}{{ url_for('preise') }}",
      "itemOffered": { "@id": "{{ request.url_root.rstrip('/') }}#software" },
      "description": "Schulweite Inventarverwaltung mit Rollenrechten, PDF-Berichten und 5-Minuten-Start."
    },
    {
      "@type": "Offer",
      "@id": "{{ request.url_root.rstrip('/') }}#offer-bibliothek",
      "name": "Bibliothekssystem",
      "price": "100",
      "priceCurrency": "EUR",
      "url": "{{ request.url_root.rstrip('/') }}{{ url_for('preise') }}",
      "itemOffered": { "@id": "{{ request.url_root.rstrip('/') }}#software" },
      "description": "Bibliothekssystem für Ausleihe, Rückgabe und transparente Bestände."
    },
    {
      "@type": "Review",
      "@id": "{{ request.url_root.rstrip('/') }}#review-albert-schweitzer-strasse",
      "itemReviewed": { "@id": "{{ request.url_root.rstrip('/') }}#software" },
      "author": {
        "@type": "Organization",
        "name": "Grundschule Albert-Schweitzer-Straße",
        "url": "https://www.grundschule-albert-schweitzer-strasse.de"
      },
      "reviewBody": "Invario wurde gemeinsam mit der Schulpraxis entwickelt. Die Einführung verlief schnell, die Bedienung ist intuitiv und die Inventur wurde deutlich effizienter.",
      "reviewRating": {
        "@type": "Rating",
        "ratingValue": "5",
        "bestRating": "5"
      }
    }
  ]
}
</script>

<section class="booking-hero">
    <h1>Was kostet Invario?</h1>
    <p>Invario kostet 250 € pro Jahr für die Inventarverwaltung und 100 € pro Jahr für das Bibliothekssystem. Beide Angebote sind Web-Apps ohne Installation, mit Serverstandort Deutschland und direktem Support für Schulen und Schulträger.</p>
    <div class="pricing-pills" aria-label="Kernpreise">
        <div class="pricing-pill"><strong>250 € / Jahr</strong><span>Inventarverwaltung</span></div>
        <div class="pricing-pill"><strong>100 € / Jahr</strong><span>Bibliothekssystem</span></div>
        <div class="pricing-pill"><strong>Von Praktikern</strong><span>mit der Grundschule Albert-Schweitzer-Straße entwickelt</span></div>
    </div>
</section>

<section class="pricing-comparison" aria-label="Kostenvergleich">
    <article class="comparison-card">
        <strong>Flatrate statt Zusatzkosten</strong>
        <p>Invario hält die Jahreskosten klar und planbar, statt später teure Module, Schnittstellen oder Supportpakete nachzuschieben.</p>
    </article>
    <article class="comparison-card">
        <strong>Vergleich mit Enterprise-Modellen</strong>
        <p>Bei anderen Anbietern entstehen oft zusätzliche Gebühren, zum Beispiel bis zu 1.950 € für App-Schnittstellen oder ähnliche Erweiterungen.</p>
    </article>
    <article class="comparison-card">
        <strong>Für Förderlogik vorbereitet</strong>
        <p>Revisionssichere PDF-Berichte, deutscher Serverstandort und dokumentierte Prozesse erleichtern Schulträgern die Prüfung.</p>
    </article>
</section>

<section class="proof-card">
    <h2>Bewährt im Schulalltag</h2>
    <p><strong>Grundschule Albert-Schweitzer-Straße:</strong> Als Entwicklungspartner prägt die Schule die Praxisnähe von Invario. Genau daraus entsteht der Leitsatz: Von Praktikern für Praktiker entwickelt.</p>
</section>

<section class="packages-grid" aria-label="Angebote">
    <article class="package-card">
        <div class="package-card__header">
            <div>
                <span class="package-card__tag">Inventar</span>
                <h2 class="package-card__name">Inventarsystem</h2>
            </div>
            <div class="package-card__price">
                <span class="package-card__new-price">250 €</span>
                <small>/ Jahr</small>
            </div>
        </div>
        <p class="package-card__description">Der schnelle Einstieg für Schulen, die Inventar, Ausleihe und klare Rollenrechte ohne lokale Installation benötigen.</p>
        <ul class="package-card__features">
            <li>Inventarverwaltung mit Rollenrechten</li>
            <li>PDF-Berichte für Inventur und Nachweise</li>
            <li>5-Minuten-Start im Browser</li>
            <li>Serverstandort Deutschland</li>
        </ul>
        <div class="package-card__actions">
            {% if 'username' in session %}
                <form method="POST" action="{{ url_for('book_option_package') }}" class="booking-form">
                    <input type="hidden" name="package" value="inventarsystem">
                    <button class="btn" type="button" onclick="openBookingModal(this.form)">Jetzt buchen</button>
                </form>
            {% else %}
                <a class="btn secondary" href="{{ url_for('login') }}">Mit Konto buchen</a>
            {% endif %}
        </div>
    </article>

    <article class="package-card">
        <div class="package-card__header">
            <div>
                <span class="package-card__tag">Bibliothek</span>
                <h2 class="package-card__name">Bibliothekssystem</h2>
            </div>
            <div class="package-card__price">
                <span class="package-card__new-price">100 €</span>
                <small>/ Jahr</small>
            </div>
        </div>
        <p class="package-card__description">Das schlanke Modul für Medienzentren und Schulbibliotheken mit Ausleihe, Rückgabe und transparenter Historie.</p>
        <ul class="package-card__features">
            <li>Ausleih- und Rückgabeprozesse</li>
            <li>Transparente Medienbestände</li>
            <li>Intuitive Web-App ohne Installation</li>
            <li>Wartungsarm für Sekretariat und IT</li>
        </ul>
        <div class="package-card__actions">
            {% if 'username' in session %}
                <form method="POST" action="{{ url_for('book_option_package') }}" class="booking-form">
                    <input type="hidden" name="package" value="buecherei">
                    <button class="btn" type="button" onclick="openBookingModal(this.form)">Jetzt buchen</button>
                </form>
            {% else %}
                <a class="btn secondary" href="{{ url_for('login') }}">Mit Konto buchen</a>
            {% endif %}
        </div>
    </article>

</section>

<section class="notice">
    {% if 'username' in session %}
        <p><strong>Hinweis:</strong> Deine Buchungsanfrage wird direkt vom Admin-Team bearbeitet und deiner Schulinstanz zugeordnet.</p>
    {% else %}
        <p><strong>Hinweis:</strong> Bitte logge dich ein oder registriere dich, um einen Termin zu vereinbaren.</p>
    {% endif %}
</section>

<!-- Custom Modal -->
<div class="custom-modal" id="bookingModal" aria-hidden="true" role="dialog" aria-modal="true">
    <div class="custom-modal-backdrop" onclick="closeBookingModal()"></div>
    <div class="custom-modal-content">
        <h3>Buchung bestätigen</h3>
        <p>Möchten Sie dieses Paket wirklich anfragen?</p>
        <p style="font-size: 0.95rem;">Ein Administrator wird sich innerhalb von ca. 48 Stunden über das Portal mit Ihnen in Verbindung setzen. Dort wird dann ein Termin ausgemacht, um die Buchung persönlich vor Ort zu besprechen oder einen direkten Start zu vereinbaren.</p>
        <div class="custom-modal-actions">
            <button class="btn secondary" type="button" onclick="closeBookingModal()">Abbrechen</button>
            <button class="btn" type="button" id="confirmBookingBtn">Anfrage bestätigen</button>
        </div>
    </div>
</div>

<script>
    let currentFormToSubmit = null;

    function openBookingModal(formElement) {
        currentFormToSubmit = formElement;
        const modal = document.getElementById('bookingModal');
        modal.classList.add('active');
        modal.setAttribute('aria-hidden', 'false');
    }

    function closeBookingModal() {
        currentFormToSubmit = null;
        const modal = document.getElementById('bookingModal');
        modal.classList.remove('active');
        modal.setAttribute('aria-hidden', 'true');
    }

    document.getElementById('confirmBookingBtn').addEventListener('click', function() {
        if (currentFormToSubmit) {
            currentFormToSubmit.submit();
        }
    });

    document.addEventListener('keydown', function(event) {
        if (event.key === 'Escape') {
            closeBookingModal();
        }
    });
</script>
{% endblock %}