@extends('layouts.app')

@section('title', 'Convertly+ – Einheiten-Umrechner für Android, iOS & Windows | KOTSCH.TECH')
@section('meta_description', 'Convertly+ ist der native Einheiten-Umrechner: 300+ Einheiten in 32 Kategorien, 18 Sprachen, Hell-/Dunkelmodus, voll offline. App gratis laden, Key einmalig kaufen.')
@section('og_title', 'Convertly+ – der Einheiten-Umrechner')
@section('og_description', '300+ Einheiten, 32 Kategorien, 18 Sprachen, voll offline. Einmalkauf, kein Abo.')
@section('og_image', asset('img/convertly/tile.png'))

@php
    $product = \App\Models\ShopProduct::where('slug', config('convertly.shop_slug'))->first();
    $price = $product?->price_formatted ?? '2,99 EUR';
    $compare = $product?->compare_at_price_formatted;
    $buyUrl = $product ? route('shop.show', $product->slug) : route('shop.index');
    $installer = config('convertly.installer_path');
    $installerExists = config('convertly.installer_enabled', false) && is_file(public_path($installer));
    $apk = config('convertly.apk_path');
    $apkExists = $apk && is_file(public_path($apk));
    $apkSize = $apkExists ? max(1, round(filesize(public_path($apk)) / 1048576)) : null;
    $platform = $platform ?? null; // 'android' | 'windows' | null (neutral)
    $reg = new \App\Support\SubdomainRegistry();
    $urlAndroid  = $reg->url('android', 'convertly');
    $urlApple    = $reg->url('ios', 'convertly');   // Apple-Seite liegt auf ios.kotsch.tech (base /apple)
    $urlWindows  = $reg->url('windows', 'convertly');
    $urlOverview = $reg->url('convertly');
    // APK ist Android-only → auf der reinen Windows-Seite NICHT als Download anbieten.
    $showApk = $apkExists && $platform !== 'windows';
    $features = [
        ['fa-layer-group', '300+ Einheiten in 32 Kategorien', 'Von Länge, Fläche und Masse bis dB, Drehmoment, Strahlendosis und Viskosität.'],
        ['fa-magnifying-glass', 'Suche nach Einheiten & Kategorien', 'Tippen, finden, umrechnen — ohne Klick-Marathon.'],
        ['fa-palette', 'Hell · Dunkel · System', 'Passt sich deinem System an, inkl. wählbarer Akzentfarbe.'],
        ['fa-table-cells-large', 'Zwei Layouts', 'Großzügige Desktop-Ansicht oder kompakter Taschenrechner-Stil.'],
        ['fa-globe', '18 Sprachen', 'Automatisch nach System — von Deutsch bis Japanisch.'],
        ['fa-star', 'Favoriten & Verlauf', 'Häufige Umrechnungen sofort parat, alte Werte wiederfinden.'],
        ['fa-flask', 'Wissenschaftliche Notation', 'Sehr große/kleine Ergebnisse sauber dargestellt.'],
        ['fa-wifi', 'Voll offline', 'Keine Cloud, kein Konto. Nur die einmalige Aktivierung braucht kurz Internet.'],
    ];
    $shots = [
        ['img/convertly/shot-1-dark.png', 'Hauptansicht (Dunkel)'],
        ['img/convertly/shot-4-light.png', 'Hauptansicht (Hell)'],
        ['img/convertly/shot-2-search.png', 'Kategorie- & Einheiten-Suche'],
        ['img/convertly/shot-3-settings.png', 'Einstellungen: Theme, Layout, Sprache, Lizenz'],
        ['img/convertly/shot-5-compact.png', 'Kompakt-Ansicht'],
    ];
@endphp

@section('structured_data')
<script type="application/ld+json">
{!! json_encode([
    '@context' => 'https://schema.org',
    '@type' => 'SoftwareApplication',
    'name' => 'Convertly+',
    'applicationCategory' => 'UtilitiesApplication',
    'operatingSystem' => 'Windows 10, Windows 11, Android, iOS',
    'softwareVersion' => config('convertly.version'),
    'url' => url('/convertly'),
    'image' => asset('img/convertly/icon.png'),
    'description' => 'Nativer Einheiten-Umrechner (Android, iOS, Windows): 300+ Einheiten in 32 Kategorien, 18 Sprachen, voll offline.',
    'offers' => [
        '@type' => 'Offer',
        'price' => number_format(($product?->price_cents ?? 299) / 100, 2, '.', ''),
        'priceCurrency' => 'EUR',
        'url' => $buyUrl,
    ],
    'publisher' => ['@type' => 'Organization', 'name' => 'KOTSCH.TECH'],
], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}
</script>
@endsection

@section('content')
<div class="cv-wrap">

    @if ($platform === 'android')
        <div class="cv-pbanner cv-pbanner-android"><i class="fab fa-android"></i> <span><strong>Convertly+ für Android.</strong> Key im Shop kaufen, APK laden und mit dem Key freischalten.</span></div>
    @elseif ($platform === 'windows')
        <div class="cv-pbanner cv-pbanner-windows"><i class="fab fa-windows"></i> <span><strong>Convertly+ für Windows.</strong> Installer direkt laden, Key kaufen und freischalten. Der Key gilt für alle Plattformen.</span></div>
    @endif

    {{-- Hero --}}
    <section class="cv-hero">
        <div class="cv-hero-text">
            <img src="{{ asset('img/convertly/icon.png') }}" alt="Convertly+ Logo" class="cv-appicon">
            <span class="cv-eyebrow">App · Android · iOS · Windows · KOTSCH.TECH</span>
            <h1>Convertly+</h1>
            <p class="cv-claim">Jede Einheit. Sofort. Schön.</p>
            <p class="cv-sub">Der Einheiten-Umrechner, der sich endlich richtig anfühlt — jetzt für Android, dazu iOS & Windows — 300+ Einheiten, 32 Kategorien, 18 Sprachen, voll offline.</p>

            <div class="cv-cta-row">
                @if ($installerExists)
                    <a href="{{ asset($installer) }}" download class="cv-btn cv-btn-primary">
                        <i class="fab fa-windows"></i> App gratis laden
                        <span class="cv-btn-sub">Windows · EXE · {{ config('convertly.installer_size_mb') }} MB</span>
                    </a>
                @endif
                @if ($showApk)
                    <a href="{{ asset($apk) }}" download class="cv-btn cv-btn-android">
                        <i class="fab fa-android"></i> Android-APK laden
                        <span class="cv-btn-sub">Android · APK · {{ $apkSize }} MB</span>
                    </a>
                @endif
                <a href="{{ $buyUrl }}" class="cv-btn cv-btn-key">
                    <i class="fas fa-key"></i> Key kaufen — {{ $price }}
                    @if ($compare)<span class="cv-btn-strike">{{ $compare }}</span>@endif
                </a>
            </div>
            <p class="cv-note"><i class="fas fa-circle-info"></i> Keine Testphase: Die App startet nur mit gültigem Key. App laden ist gratis — der Key schaltet sie dauerhaft frei (bis zu 3 Geräte, kein Abo).</p>

            <div class="cv-chips">
                <span>32 Kategorien</span><span>300+ Einheiten</span><span>18 Sprachen</span><span>Offline</span><span>WinUI 3</span>
            </div>
        </div>
        <div class="cv-hero-shot">
            <img src="{{ asset('img/convertly/shot-1-dark.png') }}" alt="Convertly+ Hauptansicht" loading="eager">
        </div>
    </section>

    {{-- Features --}}
    <section class="cv-section">
        <h2 class="cv-h2">Tiefe trifft Design</h2>
        <p class="cv-lead">So viele Einheiten wie Profi-Tools — mit einem Interface, das man gern benutzt.</p>
        <div class="cv-grid">
            @foreach ($features as [$icon, $title, $text])
                <div class="cv-card">
                    <div class="cv-card-ic"><i class="fas {{ $icon }}"></i></div>
                    <h3>{{ $title }}</h3>
                    <p>{{ $text }}</p>
                </div>
            @endforeach
        </div>
    </section>

    {{-- Screenshots --}}
    <section class="cv-section">
        <h2 class="cv-h2">Ein Blick in die App</h2>
        <div class="cv-shots">
            @foreach ($shots as [$src, $alt])
                <figure class="cv-shot">
                    <img src="{{ asset($src) }}" alt="{{ $alt }}" loading="lazy">
                    <figcaption>{{ $alt }}</figcaption>
                </figure>
            @endforeach
        </div>
    </section>

    {{-- So funktioniert's --}}
    <section class="cv-section cv-steps-sec">
        <h2 class="cv-h2">In 3 Schritten startklar</h2>
        <div class="cv-steps">
            <div class="cv-step"><span class="cv-step-n">1</span><h3>Key kaufen</h3><p>Im Shop bezahlen ({{ $price }}, kein Abo). Den Schlüssel bekommst du <strong>sofort per E-Mail</strong>.</p></div>
            <div class="cv-step"><span class="cv-step-n">2</span><h3>App laden</h3><p>Die App gratis laden — als Android-APK oder Windows-Installer.</p></div>
            <div class="cv-step"><span class="cv-step-n">3</span><h3>Key eingeben</h3><p>Schlüssel beim ersten Start eingeben — dauerhaft freigeschaltet, für bis zu 3 Geräte.</p></div>
        </div>
        <div class="cv-cta-row cv-center">
            <a href="{{ $buyUrl }}" class="cv-btn cv-btn-key"><i class="fas fa-key"></i> Key kaufen — {{ $price }}</a>
            @if ($showApk)
                <a href="{{ asset($apk) }}" download class="cv-btn cv-btn-ghost"><i class="fab fa-android"></i> Nur App laden (APK)</a>
            @endif
        </div>
    </section>

    {{-- Plattformen — Übersicht zeigt alle; Plattform-Seiten bleiben fokussiert --}}
    @if (! $platform)
    <section class="cv-section">
        <h2 class="cv-h2">Auf jeder Plattform</h2>
        <p class="cv-lead">Ein Key — überall nutzbar. Hier laden oder die passende Plattform-Seite öffnen.</p>
        <div class="cv-platforms">
            <div class="cv-plat {{ $apkExists ? 'cv-plat-on' : 'cv-plat-soon' }}">
                <i class="fab fa-android"></i>
                <strong>Android</strong>
                <span>{{ config('convertly.min_android') }}</span>
                @if ($apkExists)<a href="{{ asset($apk) }}" download>APK laden · {{ $apkSize }} MB</a>@endif
                <a href="{{ $urlAndroid }}">Android-Seite →</a>
            </div>
            <div class="cv-plat cv-plat-on">
                <i class="fab fa-apple"></i>
                <strong>iPhone & iPad</strong>
                <a href="{{ config('convertly.app_store_url') }}" target="_blank" rel="noopener">Im App Store</a>
                <a href="{{ $urlApple }}">Apple-Seite →</a>
            </div>
            <div class="cv-plat {{ $installerExists ? 'cv-plat-on' : 'cv-plat-soon' }}">
                <i class="fab fa-windows"></i>
                <strong>Windows</strong>
                <span>{{ config('convertly.min_windows') }}</span>
                @if ($installerExists)<a href="{{ asset($installer) }}" download>Jetzt laden</a>@else<span>Installer folgt</span>@endif
                <a href="{{ $urlWindows }}">Windows-Seite →</a>
            </div>
            <div class="cv-plat {{ config('convertly.play_store_url') ? 'cv-plat-on' : 'cv-plat-soon' }}">
                <i class="fab fa-google-play"></i>
                <strong>Play Store</strong>
                @if (config('convertly.play_store_url'))
                    <a href="{{ config('convertly.play_store_url') }}" target="_blank" rel="noopener">Im Play Store</a>
                @else <span>Bald verfügbar</span> @endif
            </div>
        </div>
    </section>
    @else
    <section class="cv-section" style="text-align:center; padding-top:0;">
        <a href="{{ $urlOverview }}" class="cv-btn cv-btn-ghost" style="display:inline-flex;"><i class="fas fa-layer-group"></i> Convertly+ für alle Plattformen (Übersicht)</a>
    </section>
    @endif

    {{-- Fakten + FAQ --}}
    <section class="cv-section cv-facts-sec">
        <div class="cv-facts">
            <h2 class="cv-h2" style="text-align:left;">Eckdaten</h2>
            <table class="cv-fact-table">
                <tr><td>Kategorien</td><td>32</td></tr>
                <tr><td>Einheiten</td><td>über 300</td></tr>
                <tr><td>Sprachen</td><td>18</td></tr>
                <tr><td>Themes</td><td>Hell · Dunkel · System</td></tr>
                <tr><td>Offline</td><td>ja, vollständig</td></tr>
                <tr><td>Plattform</td><td>{{ config('convertly.min_windows') }}</td></tr>
                <tr><td>Technik</td><td>nativ, WinUI 3 / .NET</td></tr>
                <tr><td>Lizenz</td><td>Einmalkauf, dauerhaft, bis zu 3 Geräte</td></tr>
            </table>
        </div>
        <div class="cv-faq">
            <h2 class="cv-h2" style="text-align:left;">Häufige Fragen</h2>
            <details><summary>Braucht Convertly Internet?</summary><p>Nein, das Umrechnen läuft komplett offline. Nur die einmalige Key-Aktivierung braucht kurz Internet.</p></details>
            <details><summary>Gibt es ein Abo?</summary><p>Nein — Einmalkauf, dauerhaft. Du zahlst {{ $price }} und nutzt die App für immer.</p></details>
            <details><summary>Wie viele Geräte?</summary><p>Bis zu 3 pro Key. Ein Gerät lässt sich in den Einstellungen wieder freigeben.</p></details>
            <details><summary>Wo bekomme ich den Key?</summary><p>Sofort nach dem Kauf per E-Mail. Dann beim ersten Start der App eingeben.</p></details>
            <details><summary>Warum eine „unbekannter Herausgeber"-Warnung?</summary><p>Das verschwindet mit einem gekauften Code-Signing-Zertifikat. Die App ist bereits als „Kotsch.Tech" signiert.</p></details>
        </div>
    </section>

    {{-- Final CTA --}}
    <section class="cv-final">
        <h2>Einmal kaufen, für immer nutzen.</h2>
        <p>Jede Einheit. Sofort. Schön.</p>
        <div class="cv-cta-row cv-center">
            <a href="{{ $buyUrl }}" class="cv-btn cv-btn-primary"><i class="fas fa-key"></i> Key sichern — {{ $price }}</a>
            @if ($showApk)<a href="{{ asset($apk) }}" download class="cv-btn cv-btn-ghost"><i class="fab fa-android"></i> App gratis laden (APK)</a>@endif
        </div>
    </section>
</div>

<style>
    .cv-wrap{ --slate:#64748b; --ink:#0f172a; --muted:#64748b; --line:#e6e9f0; --blue:#2563eb;
        max-width:1180px; margin:0 auto; padding:24px 20px 80px; color:var(--ink);
        font-family:'Plus Jakarta Sans',system-ui,sans-serif; }
    .cv-wrap h1,.cv-wrap h2,.cv-wrap h3{ letter-spacing:-.02em; }
    .cv-pbanner{ display:flex; gap:.7rem; align-items:center; padding:14px 20px; border-radius:14px; font-size:.95rem;
        margin:0 0 20px; border:1px solid var(--line); background:#f6f7fb; color:var(--ink); line-height:1.4; }
    .cv-pbanner i{ font-size:1.3rem; flex-shrink:0; }
    .cv-pbanner-android{ background:#dcfce7; border-color:rgba(15,157,88,.3); } .cv-pbanner-android i{ color:#0f9d58; }
    .cv-pbanner-windows{ background:#eff6ff; border-color:rgba(37,99,235,.3); } .cv-pbanner-windows i{ color:#2563eb; }
    .cv-hero{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; padding:40px 0 56px; }
    .cv-appicon{ width:84px; height:84px; border-radius:22px; box-shadow:0 18px 40px -16px rgba(37,99,235,.5); margin-bottom:18px; }
    .cv-eyebrow{ display:inline-block; font-size:.74rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--slate); }
    .cv-hero h1{ font-size:3.4rem; font-weight:800; margin:8px 0 4px; line-height:1; }
    .cv-claim{ font-size:1.35rem; font-weight:700; color:var(--blue); margin:0 0 14px; }
    .cv-sub{ font-size:1.05rem; line-height:1.6; color:#475569; max-width:36ch; }
    .cv-cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin:26px 0 14px; }
    .cv-cta-row.cv-center{ justify-content:center; margin-top:30px; }
    .cv-btn{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
        padding:14px 26px; border-radius:14px; font-weight:800; font-size:1rem; text-decoration:none;
        transition:transform .18s, box-shadow .18s, filter .18s; line-height:1.1; }
    .cv-btn i{ margin-right:7px; }
    .cv-btn-sub{ font-size:.72rem; font-weight:600; opacity:.8; }
    .cv-btn-strike{ font-size:.72rem; font-weight:600; text-decoration:line-through; opacity:.7; }
    .cv-btn-primary{ background:linear-gradient(135deg,#2563eb,#7c3aed); color:#fff; box-shadow:0 16px 34px -14px rgba(37,99,235,.7); }
    .cv-btn-key{ background:var(--ink); color:#fff; }
    .cv-btn-android{ background:linear-gradient(135deg,#0f9d58,#3ddc84); color:#fff; box-shadow:0 16px 34px -14px rgba(15,157,88,.6); }
    .cv-btn-ghost{ background:#fff; color:var(--ink); border:1.5px solid var(--line); }
    .cv-btn:hover{ transform:translateY(-2px); filter:brightness(1.04); }
    .cv-note{ font-size:.86rem; color:var(--muted); line-height:1.5; max-width:46ch; }
    .cv-note i{ color:var(--slate); }
    .cv-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
    .cv-chips span{ font-size:.78rem; font-weight:700; color:#475569; background:#f1f5f9; padding:6px 12px; border-radius:999px; }
    .cv-hero-shot img{ width:100%; border-radius:20px; box-shadow:0 40px 80px -30px rgba(15,23,42,.45); border:1px solid var(--line); }

    .cv-section{ padding:54px 0; border-top:1px solid var(--line); }
    .cv-h2{ font-size:2rem; font-weight:800; text-align:center; margin:0 0 8px; }
    .cv-lead{ text-align:center; color:var(--muted); margin:0 0 34px; font-size:1.05rem; }
    .cv-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
    .cv-card{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px; box-shadow:0 1px 2px rgba(15,23,42,.04); transition:transform .2s, box-shadow .2s; }
    .cv-card:hover{ transform:translateY(-4px); box-shadow:0 24px 48px -28px rgba(37,99,235,.4); }
    .cv-card-ic{ width:46px; height:46px; border-radius:13px; background:linear-gradient(135deg,#2563eb,#7c3aed); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.1rem; margin-bottom:14px; }
    .cv-card h3{ font-size:1.02rem; font-weight:800; margin:0 0 6px; }
    .cv-card p{ font-size:.9rem; color:#475569; line-height:1.5; margin:0; }

    .cv-shots{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
    .cv-shot{ margin:0; }
    .cv-shot img{ width:100%; border-radius:14px; border:1px solid var(--line); box-shadow:0 14px 30px -18px rgba(15,23,42,.4); }
    .cv-shot figcaption{ font-size:.8rem; color:var(--muted); margin-top:8px; text-align:center; }

    .cv-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
    .cv-step{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:26px; text-align:center; }
    .cv-step-n{ display:inline-flex; width:44px; height:44px; border-radius:50%; background:var(--ink); color:#fff; font-weight:800; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:14px; }
    .cv-step h3{ font-size:1.1rem; font-weight:800; margin:0 0 8px; }
    .cv-step p{ font-size:.92rem; color:#475569; line-height:1.55; margin:0; }

    .cv-platforms{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
    .cv-plat{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px 20px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; }
    .cv-plat i{ font-size:1.9rem; color:var(--ink); }
    .cv-plat strong{ font-size:1rem; }
    .cv-plat span{ font-size:.8rem; color:var(--muted); }
    .cv-plat a{ margin-top:8px; font-weight:800; font-size:.86rem; color:var(--blue); text-decoration:none; }
    .cv-plat-soon{ opacity:.62; }
    .cv-plat-soon span{ background:#fef3c7; color:#b45309; padding:4px 10px; border-radius:999px; font-weight:700; }

    .cv-facts-sec{ display:grid; grid-template-columns:1fr 1.2fr; gap:48px; }
    .cv-fact-table{ width:100%; border-collapse:collapse; }
    .cv-fact-table td{ padding:11px 0; border-bottom:1px solid var(--line); font-size:.94rem; }
    .cv-fact-table td:first-child{ color:var(--muted); }
    .cv-fact-table td:last-child{ font-weight:700; text-align:right; }
    .cv-faq details{ border:1px solid var(--line); border-radius:12px; padding:14px 18px; margin-bottom:10px; background:#fff; }
    .cv-faq summary{ font-weight:800; cursor:pointer; font-size:.96rem; }
    .cv-faq p{ margin:10px 0 0; color:#475569; font-size:.92rem; line-height:1.55; }

    .cv-final{ text-align:center; padding:64px 0 10px; }
    .cv-final h2{ font-size:2.2rem; font-weight:800; margin:0 0 6px; }
    .cv-final p{ color:var(--blue); font-weight:700; font-size:1.2rem; margin:0; }

    @media(max-width:900px){
        .cv-hero{ grid-template-columns:1fr; gap:30px; }
        .cv-hero h1{ font-size:2.6rem; }
        .cv-grid,.cv-platforms{ grid-template-columns:repeat(2,1fr); }
        .cv-shots,.cv-steps{ grid-template-columns:1fr; }
        .cv-facts-sec{ grid-template-columns:1fr; gap:30px; }
        .cv-btn{ flex:1; }
    }
</style>
@endsection