@extends('layouts.app')

@section('title', 'Eine Marke. Neun Welten. — Arthur Kotsch | KOTSCH.TECH')
@section('meta_description', 'Arthur Kotsch — Student Digital Engineering & Entwickler aus Lichtenstein (Sachsen). iOS- & Mac-Apps, Windows-Tools, Web-Tools, Shop, Hosting, News, IT-Hilfe und Webdesign.')

@section('content')
<style>
    /* ===== Demo #30 — 3D-Tilt Depth Cards (Präfix v30-) ===== */
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

    .v30-wrap {
        --v30-bg: #F7F8FA;
        --v30-card: #FFFFFF;
        --v30-border: #EEF0F4;
        --v30-head: #0B1220;
        --v30-body: #5B6472;
        --v30-blue: #2563EB;
        --v30-orange: #FF5D2E;
        --v30-rest: 0 1px 2px rgba(11,18,32,.04), 0 8px 24px rgba(11,18,32,.05);
        --v30-lift: 0 18px 48px rgba(37,99,235,.16);
        position: relative;
        background: var(--v30-bg);
        background-image: radial-gradient(120% 80% at 50% -10%, rgba(37,99,235,.05), transparent 60%);
        color: var(--v30-body);
        font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
        font-size: 1.05rem;
        line-height: 1.6;
        overflow: clip;
        padding: clamp(2rem, 5vw, 4.5rem) clamp(1rem, 4vw, 2rem) clamp(3rem, 6vw, 5rem);
    }
    .v30-inner { max-width: 1180px; margin: 0 auto; }
    .v30-wrap *, .v30-wrap *::before, .v30-wrap *::after { box-sizing: border-box; }

    /* ---- Generic Depth-Card base ---- */
    .v30-card {
        position: relative;
        background: var(--v30-card);
        border: 1px solid var(--v30-border);
        border-radius: 22px;
        box-shadow: var(--v30-rest);
        transform-style: preserve-3d;
        transition: box-shadow .35s ease, border-color .35s ease, transform .5s cubic-bezier(.22,.61,.36,1);
        will-change: transform;
    }
    /* moving specular highlight */
    .v30-card::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.85), rgba(255,255,255,0) 45%);
        opacity: 0;
        transition: opacity .35s ease;
        pointer-events: none;
        mix-blend-mode: screen;
        z-index: 2;
    }
    .v30-card.is-tilting::before,
    .v30-card:hover::before { opacity: .7; }
    .v30-card:hover { border-color: color-mix(in srgb, var(--v30-blue) 35%, var(--v30-border)); box-shadow: var(--v30-lift); }
    .v30-card:focus-within { border-color: var(--v30-blue); box-shadow: var(--v30-lift); }

    /* ====== Hero ====== */
    .v30-hero {
        display: grid;
        grid-template-columns: 1.15fr .85fr;
        gap: clamp(1.5rem, 4vw, 3.5rem);
        align-items: center;
        margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
        perspective: 1100px;
    }
    .v30-eyebrow {
        display: inline-flex; align-items: center; gap: .55rem;
        font-size: .8rem; font-weight: 600; letter-spacing: .02em;
        color: var(--v30-blue);
        background: rgba(37,99,235,.08);
        padding: .45rem .85rem; border-radius: 999px;
        margin-bottom: 1.2rem; min-width: 0;
    }
    .v30-eyebrow i { font-size: .75rem; }
    .v30-h1 {
        margin: 0 0 1rem;
        font-size: clamp(2.4rem, 6.5vw, 4rem);
        line-height: 1.04;
        letter-spacing: -.03em;
        font-weight: 800;
        color: var(--v30-head);
    }
    .v30-h1 .v30-accent { color: var(--v30-blue); }
    .v30-lead { margin: 0 0 1.8rem; max-width: 46ch; font-size: 1.08rem; }
    .v30-cta-row { display: flex; flex-wrap: wrap; gap: .85rem; }
    .v30-btn {
        display: inline-flex; align-items: center; gap: .5rem;
        font-weight: 700; font-size: 1rem; text-decoration: none;
        padding: .9rem 1.5rem; border-radius: 14px;
        transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
    }
    .v30-btn-primary {
        background: var(--v30-blue); color: #fff;
        box-shadow: 0 10px 26px -10px rgba(37,99,235,.6);
    }
    .v30-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -10px rgba(37,99,235,.7); }
    .v30-btn-ghost {
        background: #fff; color: var(--v30-head);
        border: 1px solid var(--v30-border);
    }
    .v30-btn-ghost:hover { border-color: var(--v30-blue); color: var(--v30-blue); transform: translateY(-2px); }

    /* signature hero card */
    .v30-hero-card { padding: 1.8rem; min-width: 0; }
    .v30-hero-card .v30-sig-token {
        width: 56px; height: 56px; border-radius: 16px;
        display: grid; place-items: center;
        background: rgba(37,99,235,.08); color: var(--v30-blue);
        font-size: 1.4rem; margin-bottom: 1.2rem;
        transform: translateZ(40px);
    }
    .v30-hero-card h2 { margin: 0 0 .5rem; font-size: 1.3rem; font-weight: 700; color: var(--v30-head); transform: translateZ(28px); }
    .v30-hero-card p { margin: 0 0 1.3rem; font-size: .98rem; transform: translateZ(20px); }
    .v30-sig-strip { display: flex; flex-wrap: wrap; gap: .5rem; transform: translateZ(34px); }
    .v30-sig-chip {
        font-size: .78rem; font-weight: 700; color: var(--v30-blue);
        background: rgba(37,99,235,.07); border-radius: 999px; padding: .35rem .7rem;
        font-variant-numeric: tabular-nums;
    }

    /* ====== Stats bar ====== */
    .v30-stats {
        display: grid; grid-template-columns: repeat(4, 1fr);
        background: #fff; border: 1px solid var(--v30-border); border-radius: 22px;
        box-shadow: var(--v30-rest);
        margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
        overflow: hidden;
    }
    .v30-stat { padding: 1.6rem 1rem; text-align: center; border-left: 1px solid var(--v30-border); min-width: 0; }
    .v30-stat:first-child { border-left: 0; }
    .v30-stat-num {
        font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 800; color: var(--v30-blue);
        font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1;
    }
    .v30-stat-label { margin-top: .5rem; font-size: .82rem; font-weight: 500; color: var(--v30-body); }

    /* ====== Section heads ====== */
    .v30-sec-head { text-align: center; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
    .v30-sec-head h2 {
        margin: 0 0 .6rem; font-size: clamp(1.7rem, 4.5vw, 2.6rem);
        font-weight: 800; letter-spacing: -.025em; color: var(--v30-head);
    }
    .v30-sec-head p { margin: 0 auto; max-width: 52ch; }

    /* ====== 9 Worlds grid ====== */
    .v30-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(1rem, 2.5vw, 1.6rem);
        perspective: 1100px;
        margin-bottom: clamp(2.8rem, 6vw, 4.8rem);
    }
    .v30-world {
        display: flex; flex-direction: column;
        padding: 1.6rem; min-width: 0;
        text-decoration: none; color: inherit;
    }
    .v30-world-token {
        width: 50px; height: 50px; border-radius: 14px;
        display: grid; place-items: center;
        background: rgba(37,99,235,.08); color: var(--v30-blue);
        font-size: 1.25rem; margin-bottom: 1.1rem;
        transform: translateZ(36px);
        transition: transform .5s cubic-bezier(.22,.61,.36,1);
    }
    .v30-world h3 { margin: 0 0 .5rem; font-size: 1.18rem; font-weight: 700; color: var(--v30-head); transform: translateZ(24px); }
    .v30-world-desc { margin: 0 0 1.1rem; font-size: .95rem; flex: 1 1 auto; transform: translateZ(16px); }
    .v30-pill {
        align-self: flex-start;
        font-size: .76rem; font-weight: 800; color: var(--v30-blue);
        background: rgba(37,99,235,.07); border-radius: 999px; padding: .3rem .7rem;
        font-variant-numeric: tabular-nums; margin-bottom: 1.1rem;
        transform: translateZ(20px);
    }
    .v30-world-cta {
        display: inline-flex; align-items: center; gap: .4rem;
        font-size: .92rem; font-weight: 700; color: var(--v30-blue);
        transform: translateZ(30px);
        transition: color .25s ease;
    }
    .v30-world-cta .v30-arrow { transition: transform .25s ease; }
    .v30-world:hover .v30-world-cta { color: var(--v30-orange); }
    .v30-world:hover .v30-world-cta .v30-arrow { transform: translateX(5px); }
    .v30-world:hover .v30-world-token { transform: translateZ(50px); }

    /* ====== About block ====== */
    .v30-about {
        background: #fff; border: 1px solid var(--v30-border); border-radius: 22px;
        box-shadow: var(--v30-rest);
        padding: clamp(1.6rem, 4vw, 2.6rem);
        margin-bottom: clamp(2.5rem, 6vw, 4rem);
        display: grid; grid-template-columns: auto 1fr; gap: clamp(1.2rem, 3vw, 2rem); align-items: center;
    }
    .v30-about-mono {
        width: 72px; height: 72px; border-radius: 18px; flex: 0 0 auto;
        display: grid; place-items: center;
        background: linear-gradient(135deg, var(--v30-blue), var(--v30-orange));
        color: #fff; font-size: 1.7rem; font-weight: 800; letter-spacing: -.04em;
    }
    .v30-about h2 { margin: 0 0 .5rem; font-size: clamp(1.3rem, 3vw, 1.7rem); font-weight: 800; color: var(--v30-head); letter-spacing: -.02em; }
    .v30-about p { margin: 0; max-width: 60ch; }

    /* ====== Closing CTA (full-width tilt card) ====== */
    .v30-cta-wrap { perspective: 1100px; }
    .v30-cta-card {
        display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
        gap: 1.5rem;
        padding: clamp(1.8rem, 4vw, 2.8rem);
        background: linear-gradient(135deg, #0B1220, #1a2740);
        border: 1px solid #1d2a44;
    }
    .v30-cta-card::before { mix-blend-mode: screen; background: radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(37,99,235,.4), transparent 50%); }
    .v30-cta-card h2 { margin: 0 0 .5rem; font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 800; color: #fff; letter-spacing: -.025em; transform: translateZ(26px); }
    .v30-cta-card p { margin: 0; color: #aeb8c8; transform: translateZ(16px); }
    .v30-cta-card .v30-cta-text { min-width: 0; }
    .v30-cta-card .v30-btn-primary { background: var(--v30-orange); box-shadow: 0 12px 30px -10px rgba(255,93,46,.6); transform: translateZ(34px); }
    .v30-cta-card .v30-btn-primary:hover { box-shadow: 0 18px 38px -10px rgba(255,93,46,.7); }

    /* ====== Responsive ====== */
    @media (max-width: 900px) {
        .v30-hero { grid-template-columns: 1fr; }
        .v30-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .v30-stats { grid-template-columns: repeat(2, 1fr); }
        .v30-stat:nth-child(3) { border-left: 0; }
        .v30-stat:nth-child(odd) { border-left: 0; }
        .v30-stat:nth-child(3), .v30-stat:nth-child(4) { border-top: 1px solid var(--v30-border); }
    }
    @media (max-width: 560px) {
        .v30-grid { grid-template-columns: 1fr; }
        .v30-about { grid-template-columns: 1fr; text-align: center; justify-items: center; }
        .v30-cta-card { flex-direction: column; align-items: flex-start; text-align: left; }
        .v30-cta-card .v30-btn { width: 100%; justify-content: center; }
    }

    @media (prefers-reduced-motion: reduce) {
        .v30-card, .v30-world-token, .v30-world-cta .v30-arrow, .v30-btn { transition: box-shadow .2s ease, border-color .2s ease, color .2s ease; }
        .v30-card::before { display: none; }
        .v30-card { transform: none !important; }
    }
</style>

<div class="v30-wrap">
    <div class="v30-inner">

        {{-- ===== Hero ===== --}}
        <section class="v30-hero">
            <div>
                <span class="v30-eyebrow"><i class="fas fa-bolt" aria-hidden="true"></i> Arthur Kotsch — Student Digital Engineering, Entwickler aus Lichtenstein (Sachsen)</span>
                <h1 class="v30-h1">Eine Marke.<br><span class="v30-accent">Neun Welten.</span></h1>
                <p class="v30-lead">Apps, Tools, Webdesign und IT — alles aus einer Hand. Jede Welt ist eine eigene Plattform, alle tragen dieselbe Handschrift.</p>
                <div class="v30-cta-row">
                    <a href="#v30-welten" class="v30-btn v30-btn-primary">Welten entdecken <i class="fas fa-arrow-down" aria-hidden="true"></i></a>
                    <a href="{{ route('kontakt') }}" class="v30-btn v30-btn-ghost">Kontakt</a>
                </div>
            </div>
            <article class="v30-card v30-hero-card" data-tilt>
                <div class="v30-sig-token"><i class="fas fa-cubes" aria-hidden="true"></i></div>
                <h2>Ein Move über alle Welten</h2>
                <p>Karten, die sich der Maus zuneigen — Material statt Schmuck. Das ist die wiederkehrende Geste der Marke.</p>
                <div class="v30-sig-strip">
                    <span class="v30-sig-chip">22 Apps</span>
                    <span class="v30-sig-chip">734 Tools</span>
                    <span class="v30-sig-chip">1.412 Artikel</span>
                </div>
            </article>
        </section>

        {{-- ===== Stats bar ===== --}}
        <section class="v30-stats" aria-label="Kennzahlen">
            <div class="v30-stat"><div class="v30-stat-num" data-count="22">22</div><div class="v30-stat-label">iOS/Mac-Apps</div></div>
            <div class="v30-stat"><div class="v30-stat-num" data-count="9">9</div><div class="v30-stat-label">Windows-Tools</div></div>
            <div class="v30-stat"><div class="v30-stat-num" data-count="734">734</div><div class="v30-stat-label">Web-Tools</div></div>
            <div class="v30-stat"><div class="v30-stat-num" data-count="1412" data-format="de">1.412</div><div class="v30-stat-label">Artikel</div></div>
        </section>

        {{-- ===== 9 Worlds ===== --}}
        <section id="v30-welten">
            <div class="v30-sec-head">
                <h2>Die neun Welten</h2>
                <p>Jede Welt lebt auf ihrer eigenen Subdomain — mit eigenem Fokus, gleichem Anspruch.</p>
            </div>

            <div class="v30-grid">
                {{-- iOS & Mac --}}
                <a class="v30-card v30-world" href="https://ios.kotsch.tech" data-tilt>
                    <div class="v30-world-token"><i class="fab fa-apple" aria-hidden="true"></i></div>
                    <h3>iOS &amp; Mac Apps</h3>
                    <p class="v30-world-desc">22 Apps im App Store — iPhone/iPad/Mac, regelmäßige Updates.</p>
                    <span class="v30-pill">22 Apps</span>
                    <span class="v30-world-cta">Öffnen <span class="v30-arrow" aria-hidden="true">↗</span></span>
                </a>

                {{-- Windows --}}
                <a class="v30-card v30-world" href="https://windows.kotsch.tech" data-tilt>
                    <div class="v30-world-token"><i class="fab fa-windows" aria-hidden="true"></i></div>
                    <h3>Windows</h3>
                    <p class="v30-world-desc">9 Programme — Cleaner, Commander, Notes, Taskmanager, CodeEditor — Direkt-Download.</p>
                    <span class="v30-pill">9 Tools</span>
                    <span class="v30-world-cta">Öffnen <span class="v30-arrow" aria-hidden="true">↗</span></span>
                </a>

                {{-- Android --}}
                <a class="v30-card v30-world" href="https://android.kotsch.tech" data-tilt>
                    <div class="v30-world-token"><i class="fab fa-android" aria-hidden="true"></i></div>
                    <h3>Android</h3>
                    <p class="v30-world-desc">Native Apps, aktuell in Entwicklung.</p>
                    <span class="v30-pill">in Arbeit</span>
                    <span class="v30-world-cta">Öffnen <span class="v30-arrow" aria-hidden="true">↗</span></span>
                </a>

                {{-- Web-Tools --}}
                <a class="v30-card v30-world" href="https://webtools.kotsch.tech" data-tilt>
                    <div class="v30-world-token"><i class="fas fa-toolbox" aria-hidden="true"></i></div>
                    <h3>Web-Tools</h3>
                    <p class="v30-world-desc">734 Tools direkt im Browser — ohne Login, ohne Installation.</p>
                    <span class="v30-pill">734 Tools</span>
                    <span class="v30-world-cta">Öffnen <span class="v30-arrow" aria-hidden="true">↗</span></span>
                </a>

                {{-- Shop --}}
                <a class="v30-card v30-world" href="https://shop.kotsch.tech" data-tilt>
                    <div class="v30-world-token"><i class="fas fa-bag-shopping" aria-hidden="true"></i></div>
                    <h3>Shop</h3>
                    <p class="v30-world-desc">Digitale Produkte mit Sofort-Download.</p>
                    <span class="v30-pill">digital</span>
                    <span class="v30-world-cta">Öffnen <span class="v30-arrow" aria-hidden="true">↗</span></span>
                </a>

                {{-- Hosting --}}
                <a class="v30-card v30-world" href="https://hosting.kotsch.tech" data-tilt>
                    <div class="v30-world-token"><i class="fas fa-server" aria-hidden="true"></i></div>
                    <h3>Hosting</h3>
                    <p class="v30-world-desc">Managed Webhosting, vServer/VPS — DSGVO-konform.</p>
                    <span class="v30-pill">managed</span>
                    <span class="v30-world-cta">Öffnen <span class="v30-arrow" aria-hidden="true">↗</span></span>
                </a>

                {{-- News --}}
                <a class="v30-card v30-world" href="https://news.kotsch.tech" data-tilt>
                    <div class="v30-world-token"><i class="fas fa-newspaper" aria-hidden="true"></i></div>
                    <h3>News</h3>
                    <p class="v30-world-desc">1.412 Ratgeber &amp; Tutorials rund um Technik und Software.</p>
                    <span class="v30-pill">1.412 Artikel</span>
                    <span class="v30-world-cta">Öffnen <span class="v30-arrow" aria-hidden="true">↗</span></span>
                </a>

                {{-- IT-Hilfe --}}
                <a class="v30-card v30-world" href="https://it-hilfe.kotsch.tech" data-tilt>
                    <div class="v30-world-token"><i class="fas fa-headset" aria-hidden="true"></i></div>
                    <h3>IT-Hilfe</h3>
                    <p class="v30-world-desc">Vor Ort &amp; Remote in der Region Glauchau–Lichtenstein — „keine Lösung = kein Preis".</p>
                    <span class="v30-pill">Region</span>
                    <span class="v30-world-cta">Öffnen <span class="v30-arrow" aria-hidden="true">↗</span></span>
                </a>

                {{-- Webdesign --}}
                <a class="v30-card v30-world" href="https://webdesign.kotsch.tech" data-tilt>
                    <div class="v30-world-token"><i class="fas fa-pen-ruler" aria-hidden="true"></i></div>
                    <h3>Webdesign</h3>
                    <p class="v30-world-desc">Studio &amp; 20 Branchen-Demos — moderne Websites mit Charakter.</p>
                    <span class="v30-pill">20 Demos</span>
                    <span class="v30-world-cta">Öffnen <span class="v30-arrow" aria-hidden="true">↗</span></span>
                </a>
            </div>
        </section>

        {{-- ===== About ===== --}}
        <section class="v30-about">
            <div class="v30-about-mono" aria-hidden="true">AK</div>
            <div>
                <h2>Eine Person hinter allem</h2>
                <p>Hinter den neun Welten steht Arthur Kotsch — Student Digital Engineering und Entwickler aus Lichtenstein in Sachsen. Vom App Store bis zur IT-Hilfe vor Ort: dieselbe Handschrift, derselbe Anspruch an Qualität.</p>
            </div>
        </section>

        {{-- ===== Closing CTA ===== --}}
        <section class="v30-cta-wrap">
            <article class="v30-card v30-cta-card" data-tilt>
                <div class="v30-cta-text">
                    <h2>Projekt, Frage, IT-Notfall?</h2>
                    <p>Schreib mir — keine Lösung = kein Preis.</p>
                </div>
                <a href="{{ route('kontakt') }}" class="v30-btn v30-btn-primary">Kontakt aufnehmen <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
            </article>
        </section>

    </div>
</div>

<script>
(function () {
    var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    var fine = window.matchMedia && window.matchMedia('(hover: hover) and (pointer: fine)').matches;

    /* ---- 3D Tilt + specular highlight ---- */
    if (!reduce && fine) {
        var MAX = 6;
        document.querySelectorAll('.v30-wrap [data-tilt]').forEach(function (card) {
            var raf = null, tx = 0, ty = 0, cx = 0, cy = 0;
            function render() {
                card.style.transform = 'rotateX(' + cy + 'deg) rotateY(' + cx + 'deg) translateZ(6px)';
                raf = null;
            }
            card.addEventListener('pointermove', function (e) {
                if (e.pointerType === 'touch') return;
                var r = card.getBoundingClientRect();
                var px = (e.clientX - r.left) / r.width;
                var py = (e.clientY - r.top) / r.height;
                cx = (px - 0.5) * 2 * MAX;
                cy = -(py - 0.5) * 2 * MAX;
                card.style.setProperty('--mx', (px * 100) + '%');
                card.style.setProperty('--my', (py * 100) + '%');
                card.classList.add('is-tilting');
                if (!raf) raf = requestAnimationFrame(render);
            });
            card.addEventListener('pointerleave', function () {
                cx = 0; cy = 0;
                card.classList.remove('is-tilting');
                card.style.transform = '';
            });
        });
    }

    /* ---- Count-up on scroll ---- */
    var nums = Array.prototype.slice.call(document.querySelectorAll('.v30-wrap [data-count]'));
    function fmt(n, mode) {
        return mode === 'de' ? n.toLocaleString('de-DE') : String(n);
    }
    if (reduce || !('IntersectionObserver' in window)) {
        nums.forEach(function (el) { el.textContent = fmt(parseInt(el.dataset.count, 10), el.dataset.format); });
    } else {
        var io = new IntersectionObserver(function (entries) {
            entries.forEach(function (entry) {
                if (!entry.isIntersecting) return;
                var el = entry.target;
                io.unobserve(el);
                var target = parseInt(el.dataset.count, 10);
                var mode = el.dataset.format;
                var start = performance.now(), dur = 1100;
                function step(now) {
                    var p = Math.min((now - start) / dur, 1);
                    var eased = 1 - Math.pow(1 - p, 3);
                    el.textContent = fmt(Math.round(target * eased), mode);
                    if (p < 1) requestAnimationFrame(step);
                    else el.textContent = fmt(target, mode);
                }
                requestAnimationFrame(step);
            });
        }, { threshold: 0.4 });
        nums.forEach(function (el) { io.observe(el); });
    }
})();
</script>
@endsection