@extends('layouts.app')

@section('content')
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

.v22-root{
  --v22-primary:#2563eb;
  --v22-accent:#FF5D2E;
  --v22-ink:#0f172a;
  --v22-body:#475569;
  --v22-surface:#ffffff;
  --v22-surface-2:#f7f8fb;
  --v22-bd:#e8ecf3;
  --v22-canvas:#fbfcfe;
  font-family:-apple-system,'Inter','Segoe UI',sans-serif;
  color:var(--v22-body);
  line-height:1.6;
  position:relative;
}
.v22-root *{box-sizing:border-box;}
.v22-root ::selection{background:rgba(37,99,235,.16);color:var(--v22-ink);}
.v22-wrap{max-width:1180px;margin:0 auto;padding:0 22px;}

/* ===== Hero — Liquid Mesh ===== */
.v22-hero{
  position:relative;
  overflow:hidden;
  background:var(--v22-canvas);
  border-bottom:1px solid var(--v22-bd);
}
.v22-hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(70% 80% at 12% 8%, rgba(37,99,235,.20), transparent 60%),
    radial-gradient(75% 85% at 92% 96%, rgba(255,93,46,.18), transparent 62%),
    radial-gradient(50% 60% at 60% 40%, rgba(37,99,235,.08), transparent 70%);
}
.v22-hero-inner{position:relative;z-index:1;padding:clamp(56px,9vw,118px) 0 clamp(52px,7vw,96px);text-align:center;}
.v22-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--v22-primary);
  background:rgba(255,255,255,.72);backdrop-filter:blur(8px);
  border:1px solid var(--v22-bd);border-radius:999px;padding:7px 15px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.v22-eyebrow i{color:var(--v22-accent);}
.v22-h1{
  margin:.6em auto .35em;max-width:14ch;
  font-size:clamp(2.4rem,5vw,4rem);font-weight:800;letter-spacing:-.03em;line-height:1.05;
  color:var(--v22-ink);
}
.v22-lead{
  margin:0 auto;max-width:58ch;
  font-size:clamp(1.05rem,2vw,1.3rem);color:var(--v22-body);line-height:1.55;
}
.v22-ctas{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:2.1rem;}
.v22-btn{
  display:inline-flex;align-items:center;gap:9px;
  font-size:1rem;font-weight:600;text-decoration:none;
  padding:14px 26px;border-radius:13px;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease;
}
.v22-btn-primary{
  color:#fff;background:linear-gradient(120deg,var(--v22-primary),#1d4ed8);
  box-shadow:0 8px 22px rgba(37,99,235,.26);
}
.v22-btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(37,99,235,.34);}
.v22-btn-ghost{
  color:var(--v22-ink);background:rgba(255,255,255,.7);
  border:1px solid var(--v22-bd);box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.v22-btn-ghost:hover{transform:translateY(-2px);border-color:var(--v22-primary);color:var(--v22-primary);}
.v22-btn:focus-visible{outline:3px solid rgba(37,99,235,.45);outline-offset:3px;}

/* ===== Kennzahlen-Leiste ===== */
.v22-stats-sec{background:var(--v22-surface);padding:clamp(34px,5vw,52px) 0;}
.v22-stats{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:8px;
  background:rgba(255,255,255,.7);backdrop-filter:blur(10px);
  border:1px solid var(--v22-bd);border-radius:20px;
  padding:clamp(18px,3vw,28px) clamp(14px,3vw,30px);
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.v22-stat{flex:1 1 150px;min-width:0;text-align:center;padding:8px 14px;position:relative;}
.v22-stat + .v22-stat::before{
  content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;background:var(--v22-bd);
}
.v22-stat-num{
  font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:800;letter-spacing:-.02em;line-height:1;
  background:linear-gradient(120deg,var(--v22-primary),var(--v22-accent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.v22-stat-lbl{margin-top:8px;font-size:.86rem;font-weight:500;color:var(--v22-body);}

/* ===== Welten-Grid ===== */
.v22-worlds{background:var(--v22-surface-2);padding:clamp(56px,8vw,96px) 0;}
.v22-head{text-align:center;max-width:60ch;margin:0 auto clamp(34px,5vw,52px);}
.v22-kicker{
  display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--v22-accent);margin-bottom:.7em;
}
.v22-h2{
  margin:0 0 .4em;font-size:clamp(1.8rem,3.6vw,2.7rem);font-weight:800;
  letter-spacing:-.02em;line-height:1.1;color:var(--v22-ink);
}
.v22-sub{margin:0;font-size:1.05rem;color:var(--v22-body);}

.v22-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;}
.v22-card{
  position:relative;overflow:hidden;min-width:0;
  display:flex;flex-direction:column;
  background:var(--v22-surface);
  border:1px solid var(--v22-bd);border-radius:18px;
  padding:24px;text-decoration:none;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
/* Mesh-Echo: positionsabhängiger Tupfer, folgt dem Cursor via --mx/--my */
.v22-card::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(220px 220px at var(--mx,50%) var(--my,0%), var(--tint,rgba(37,99,235,.06)), transparent 70%);
  transition:background-position .25s ease,opacity .25s ease;
}
.v22-card > *{position:relative;z-index:1;}
.v22-card:hover{transform:translateY(-4px);border-color:var(--v22-primary);box-shadow:0 12px 30px rgba(37,99,235,.10);}
.v22-card:focus-visible{outline:3px solid rgba(37,99,235,.45);outline-offset:3px;border-color:var(--v22-primary);}

.v22-card-head{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.v22-ico{
  flex:0 0 auto;width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;font-size:1.15rem;color:var(--v22-primary);
  background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(255,93,46,.12));
  transition:background .25s ease;
}
.v22-card:hover .v22-ico{background:linear-gradient(135deg,rgba(37,99,235,.24),rgba(255,93,46,.24));}
.v22-card-title{font-size:1.15rem;font-weight:700;color:var(--v22-ink);letter-spacing:-.01em;}
.v22-card-txt{font-size:.95rem;line-height:1.55;color:var(--v22-body);margin:0 0 18px;}
.v22-card-link{
  margin-top:auto;display:inline-flex;align-items:center;gap:7px;
  font-size:.92rem;font-weight:600;color:var(--v22-primary);
}
.v22-card-link .arr{display:inline-block;transition:transform .25s ease;}
.v22-card:hover .v22-card-link .arr{transform:translateX(4px);}

/* ===== Über / Kontakt-Band ===== */
.v22-band{position:relative;overflow:hidden;background:var(--v22-canvas);border-top:1px solid var(--v22-bd);}
.v22-band::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 80% at 8% 12%, rgba(37,99,235,.16), transparent 60%),
    radial-gradient(60% 80% at 94% 90%, rgba(255,93,46,.14), transparent 62%);
}
.v22-band-inner{position:relative;z-index:1;text-align:center;padding:clamp(56px,8vw,100px) 0;}
.v22-band-inner .v22-h2{max-width:18ch;margin-left:auto;margin-right:auto;}
.v22-band-txt{max-width:54ch;margin:0 auto 1.9rem;font-size:1.08rem;color:var(--v22-body);}

@media (max-width:560px){
  .v22-stat + .v22-stat::before{display:none;}
  .v22-stat{flex-basis:46%;}
}

@media (prefers-reduced-motion:reduce){
  .v22-root *{transition:none!important;}
}
</style>

<div class="v22-root">

  {{-- 1. Liquid Mesh-Hero --}}
  <section class="v22-hero">
    <div class="v22-wrap v22-hero-inner">
      <span class="v22-eyebrow"><i class="fa-solid fa-sparkles"></i> Arthur Kotsch · Lichtenstein, Sachsen</span>
      <h1 class="v22-h1">Software, Web &amp; Hilfe aus einer Hand.</h1>
      <p class="v22-lead">Ich bin Arthur Kotsch, Student Digital Engineering und Entwickler aus Lichtenstein (Sachsen). Apps, Web-Tools, Hosting und IT-Hilfe — alles an einem Ort.</p>
      <div class="v22-ctas">
        <a class="v22-btn v22-btn-primary" href="#v22-welten">Welten entdecken <i class="fa-solid fa-arrow-down"></i></a>
        <a class="v22-btn v22-btn-ghost" href="/kontakt">Kontakt <i class="fa-solid fa-arrow-right"></i></a>
      </div>
    </div>
  </section>

  {{-- 2. Kennzahlen-Leiste --}}
  <section class="v22-stats-sec">
    <div class="v22-wrap">
      <div class="v22-stats" id="v22-stats">
        <div class="v22-stat"><div class="v22-stat-num" data-to="22">22</div><div class="v22-stat-lbl">iOS / Mac-Apps</div></div>
        <div class="v22-stat"><div class="v22-stat-num" data-to="9">9</div><div class="v22-stat-lbl">Windows-Tools</div></div>
        <div class="v22-stat"><div class="v22-stat-num" data-to="734">734</div><div class="v22-stat-lbl">Web-Tools</div></div>
        <div class="v22-stat"><div class="v22-stat-num" data-to="1412">1.412</div><div class="v22-stat-lbl">Artikel</div></div>
      </div>
    </div>
  </section>

  {{-- 3. Die 9 Welten --}}
  <section class="v22-worlds" id="v22-welten">
    <div class="v22-wrap">
      <div class="v22-head">
        <span class="v22-kicker">Neun Welten</span>
        <h2 class="v22-h2">Alles, was ich baue — an einem Ort</h2>
        <p class="v22-sub">Von nativen Apps über Browser-Tools bis zur IT-Hilfe vor Ort. Wähle deine Welt.</p>
      </div>

      <div class="v22-grid" id="v22-grid">

        <a class="v22-card" href="https://ios.kotsch.tech" style="--tint:rgba(37,99,235,.07)">
          <div class="v22-card-head"><span class="v22-ico"><i class="fa-brands fa-apple"></i></span><span class="v22-card-title">iOS &amp; Mac Apps</span></div>
          <p class="v22-card-txt">22 Apps im App Store für iPhone, iPad und Mac — mit regelmäßigen Updates.</p>
          <span class="v22-card-link">Apps ansehen <span class="arr">&rarr;</span></span>
        </a>

        <a class="v22-card" href="https://windows.kotsch.tech" style="--tint:rgba(37,99,235,.06)">
          <div class="v22-card-head"><span class="v22-ico"><i class="fa-brands fa-windows"></i></span><span class="v22-card-title">Windows</span></div>
          <p class="v22-card-txt">9 Programme — Cleaner, Commander, Notes, Taskmanager, CodeEditor — als Direkt-Download.</p>
          <span class="v22-card-link">Programme laden <span class="arr">&rarr;</span></span>
        </a>

        <a class="v22-card" href="https://android.kotsch.tech" style="--tint:rgba(255,93,46,.06)">
          <div class="v22-card-head"><span class="v22-ico"><i class="fa-brands fa-android"></i></span><span class="v22-card-title">Android</span></div>
          <p class="v22-card-txt">Native Apps für Android — aktuell in Entwicklung.</p>
          <span class="v22-card-link">Mehr erfahren <span class="arr">&rarr;</span></span>
        </a>

        <a class="v22-card" href="https://webtools.kotsch.tech" style="--tint:rgba(37,99,235,.07)">
          <div class="v22-card-head"><span class="v22-ico"><i class="fa-solid fa-toolbox"></i></span><span class="v22-card-title">Web-Tools</span></div>
          <p class="v22-card-txt">734 Tools direkt im Browser — ohne Login, ohne Installation.</p>
          <span class="v22-card-link">Tools öffnen <span class="arr">&rarr;</span></span>
        </a>

        <a class="v22-card" href="https://shop.kotsch.tech" style="--tint:rgba(255,93,46,.07)">
          <div class="v22-card-head"><span class="v22-ico"><i class="fa-solid fa-bag-shopping"></i></span><span class="v22-card-title">Shop</span></div>
          <p class="v22-card-txt">Digitale Produkte mit Sofort-Download nach dem Kauf.</p>
          <span class="v22-card-link">Zum Shop <span class="arr">&rarr;</span></span>
        </a>

        <a class="v22-card" href="https://hosting.kotsch.tech" style="--tint:rgba(37,99,235,.06)">
          <div class="v22-card-head"><span class="v22-ico"><i class="fa-solid fa-server"></i></span><span class="v22-card-title">Hosting</span></div>
          <p class="v22-card-txt">Managed Webhosting, vServer und VPS — DSGVO-konform betrieben.</p>
          <span class="v22-card-link">Pakete ansehen <span class="arr">&rarr;</span></span>
        </a>

        <a class="v22-card" href="https://news.kotsch.tech" style="--tint:rgba(255,93,46,.06)">
          <div class="v22-card-head"><span class="v22-ico"><i class="fa-solid fa-newspaper"></i></span><span class="v22-card-title">News</span></div>
          <p class="v22-card-txt">1.412 Ratgeber &amp; Tutorials rund um Technik, Software und Web.</p>
          <span class="v22-card-link">Artikel lesen <span class="arr">&rarr;</span></span>
        </a>

        <a class="v22-card" href="https://it-hilfe.kotsch.tech" style="--tint:rgba(255,93,46,.07)">
          <div class="v22-card-head"><span class="v22-ico"><i class="fa-solid fa-headset"></i></span><span class="v22-card-title">IT-Hilfe</span></div>
          <p class="v22-card-txt">Vor Ort &amp; Remote in der Region Glauchau–Lichtenstein. Keine Lösung = kein Preis.</p>
          <span class="v22-card-link">Hilfe anfragen <span class="arr">&rarr;</span></span>
        </a>

        <a class="v22-card" href="https://webdesign.kotsch.tech" style="--tint:rgba(255,93,46,.07)">
          <div class="v22-card-head"><span class="v22-ico"><i class="fa-solid fa-pen-ruler"></i></span><span class="v22-card-title">Webdesign</span></div>
          <p class="v22-card-txt">Webdesign-Studio mit 20 fertigen Branchen-Demos als Inspiration.</p>
          <span class="v22-card-link">Studio entdecken <span class="arr">&rarr;</span></span>
        </a>

      </div>
    </div>
  </section>

  {{-- 4. Über- / Kontakt-Band --}}
  <section class="v22-band">
    <div class="v22-wrap v22-band-inner">
      <span class="v22-kicker">Direkt zu mir</span>
      <h2 class="v22-h2">Ein Projekt, eine Frage, eine Idee?</h2>
      <p class="v22-band-txt">Egal ob App, Website, Hosting oder schnelle IT-Hilfe — schreib mir kurz, und wir finden den passenden Weg.</p>
      <a class="v22-btn v22-btn-primary" href="/kontakt">Kontakt aufnehmen <i class="fa-solid fa-arrow-right"></i></a>
    </div>
  </section>

</div>

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

  /* Cursor-Spotlight: Mesh-Tupfer folgt dem Cursor */
  if(!reduce){
    var grid = document.getElementById('v22-grid');
    if(grid){
      grid.querySelectorAll('.v22-card').forEach(function(card){
        card.addEventListener('pointermove', function(e){
          var r = card.getBoundingClientRect();
          card.style.setProperty('--mx', ((e.clientX - r.left)/r.width*100) + '%');
          card.style.setProperty('--my', ((e.clientY - r.top)/r.height*100) + '%');
        });
        card.addEventListener('pointerleave', function(){
          card.style.removeProperty('--mx');
          card.style.removeProperty('--my');
        });
      });
    }
  }

  /* Count-up der Stats beim Scroll-in */
  var stats = document.getElementById('v22-stats');
  if(stats){
    var fmt = function(n){ return n.toLocaleString('de-DE'); };
    var run = function(){
      stats.querySelectorAll('.v22-stat-num').forEach(function(el){
        var to = parseInt(el.getAttribute('data-to'),10);
        if(isNaN(to)) return;
        if(reduce){ el.textContent = fmt(to); return; }
        var start = null, dur = 1100;
        var step = function(ts){
          if(start===null) start = ts;
          var p = Math.min((ts-start)/dur, 1);
          var eased = 1 - Math.pow(1-p, 3);
          el.textContent = fmt(Math.round(to*eased));
          if(p<1) requestAnimationFrame(step);
        };
        requestAnimationFrame(step);
      });
    };
    if('IntersectionObserver' in window){
      var io = new IntersectionObserver(function(entries){
        entries.forEach(function(en){ if(en.isIntersecting){ run(); io.disconnect(); } });
      },{threshold:.4});
      io.observe(stats);
    } else { run(); }
  }
})();
</script>
@endsection