@extends('layouts.app')

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

.v27-root{
  --v27-bg:#ffffff;
  --v27-paper:#f6f8fc;
  --v27-line:#e4e9f2;
  --v27-ink:#0f1830;
  --v27-muted:#56627a;
  --v27-blue:var(--primary,#2563eb);
  --v27-orange:var(--accent-2,#FF5D2E);
  --v27-grad:linear-gradient(100deg,#2563eb,#FF5D2E);
  font-family:'Inter',-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--v27-ink);
  background:var(--v27-bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.v27-root *{box-sizing:border-box;}
.v27-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,32px);}

/* ---------- Hero ---------- */
.v27-hero{padding:clamp(44px,8vw,96px) 0 clamp(28px,4vw,40px);}
.v27-eyebrow{
  display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:.8rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--v27-blue);margin:0 0 20px;
}
.v27-eyebrow i{color:var(--v27-orange);}
.v27-root h1.v27-h1{
  font-size:clamp(2.4rem,6vw,5.5rem);
  font-weight:800;letter-spacing:-.03em;line-height:.95;
  margin:0 0 22px;color:var(--v27-ink);
}
.v27-h1 .v27-outline{
  -webkit-text-stroke:2px var(--v27-blue);
  -webkit-text-fill-color:transparent;
  color:transparent;
  background:var(--v27-grad);-webkit-background-clip:text;background-clip:text;
}
.v27-lead{
  font-size:clamp(1.05rem,1.7vw,1.2rem);color:var(--v27-muted);
  max-width:62ch;margin:0 0 30px;
}
.v27-cta-row{display:flex;flex-wrap:wrap;gap:14px;}
.v27-btn{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:600;font-size:1rem;text-decoration:none;
  padding:13px 22px;border-radius:12px;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease,color .18s ease,border-color .18s ease;
}
.v27-btn:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--v27-blue) 45%,transparent);}
.v27-btn-primary{background:var(--v27-blue);color:#fff;box-shadow:0 8px 20px -6px color-mix(in srgb,var(--v27-blue) 60%,transparent);}
.v27-btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px -6px color-mix(in srgb,var(--v27-blue) 70%,transparent);}
.v27-btn-ghost{background:#fff;color:var(--v27-ink);border:1px solid var(--v27-line);}
.v27-btn-ghost:hover{border-color:var(--v27-blue);color:var(--v27-blue);transform:translateY(-2px);}
.v27-btn .v27-arrow{color:inherit;transition:transform .18s ease;}
.v27-btn:hover .v27-arrow{transform:translateX(4px);}

/* Hero-Teaser-Band */
.v27-teaser{
  margin-top:clamp(34px,5vw,56px);
  border-top:1px solid var(--v27-line);
  position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  overflow:hidden;
}
.v27-teaser-track{
  display:flex;gap:0;align-items:center;width:max-content;
  padding:18px 0;
  animation:v27-marquee 38s linear infinite;
}
.v27-teaser:hover .v27-teaser-track{animation-play-state:paused;}
.v27-teaser-item{
  display:inline-flex;align-items:center;gap:14px;padding:0 22px;
  font-weight:700;font-size:clamp(1rem,1.8vw,1.25rem);letter-spacing:-.01em;
  color:var(--v27-ink);white-space:nowrap;
}
.v27-teaser-dot{width:7px;height:7px;border-radius:50%;background:var(--v27-orange);flex:0 0 auto;}
.v27-teaser-num{
  font-variant-numeric:tabular-nums;font-weight:800;
  background:var(--v27-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ---------- Kennzahlen-Leiste ---------- */
.v27-stats-shell{position:relative;margin:clamp(8px,2vw,18px) 0 clamp(50px,8vw,84px);}
.v27-stats-line{height:1px;background:var(--v27-grad);margin-bottom:clamp(20px,3vw,30px);border-radius:1px;}
.v27-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.4vw,28px);
}
.v27-stat{min-width:0;}
.v27-stat-num{
  font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--v27-ink);
}
.v27-stat-lbl{margin-top:8px;font-size:.9rem;color:var(--v27-muted);}

/* ---------- Section head ---------- */
.v27-sec-head{margin:0 0 clamp(22px,3.5vw,34px);max-width:62ch;}
.v27-sec-kicker{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--v27-orange);margin:0 0 10px;}
.v27-sec-title{font-size:clamp(1.7rem,4vw,3rem);font-weight:800;letter-spacing:-.025em;line-height:1;margin:0;}
.v27-sec-sub{color:var(--v27-muted);margin:12px 0 0;}

/* ---------- Kinetic Ribbons ---------- */
.v27-ribbons{margin-bottom:clamp(50px,8vw,90px);}
.v27-band{
  position:relative;overflow:hidden;padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.v27-band + .v27-band{margin-top:clamp(16px,2.4vw,22px);}
.v27-band-track{
  display:flex;gap:clamp(16px,2vw,22px);width:max-content;padding:8px 0;
  will-change:transform;
}
.v27-band-a .v27-band-track{animation:v27-slide-left 52s linear infinite;}
.v27-band-b .v27-band-track{animation:v27-slide-right 58s linear infinite;}
/* Hover oder Tastaturfokus auf IRGENDEIN Band pausiert BEIDE Bänder */
.v27-ribbons:hover .v27-band-track,
.v27-ribbons:focus-within .v27-band-track{animation-play-state:paused;}

@keyframes v27-slide-left{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes v27-slide-right{from{transform:translateX(-50%);}to{transform:translateX(0);}}

.v27-card{
  position:relative;display:flex;flex-direction:column;
  min-width:clamp(240px,26vw,360px);max-width:360px;
  background:var(--v27-bg);border:1px solid var(--v27-line);border-radius:18px;
  padding:clamp(20px,2.4vw,28px);text-decoration:none;color:var(--v27-ink);
  overflow:hidden;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.v27-card:hover,.v27-card:focus-visible{
  transform:translateY(-4px);border-color:var(--v27-blue);
  box-shadow:0 14px 34px -16px color-mix(in srgb,var(--v27-blue) 50%,transparent);
  outline:none;
}
.v27-card:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--v27-blue) 45%,transparent);}
.v27-card-num{
  font-size:clamp(3rem,6vw,4.2rem);font-weight:900;line-height:.85;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;margin:0 0 14px;
  -webkit-text-stroke:1.5px var(--v27-blue);
  -webkit-text-fill-color:transparent;color:transparent;
  transition:all .2s ease;
}
.v27-card:hover .v27-card-num,.v27-card:focus-visible .v27-card-num{
  -webkit-text-stroke:0;
  background:var(--v27-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.v27-card-icon{
  position:absolute;top:clamp(20px,2.4vw,28px);right:clamp(20px,2.4vw,28px);
  font-size:1.2rem;color:var(--v27-blue);opacity:.8;
}
.v27-card-title{font-size:1.18rem;font-weight:700;letter-spacing:-.01em;margin:0 0 8px;}
.v27-card-desc{font-size:.96rem;color:var(--v27-muted);margin:0 0 18px;flex:1 1 auto;}
.v27-card-cta{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:.92rem;color:var(--v27-ink);margin-top:auto;
}
.v27-card-cta .v27-arrow{color:var(--v27-orange);transition:transform .2s ease;}
.v27-card:hover .v27-card-cta .v27-arrow,.v27-card:focus-visible .v27-card-cta .v27-arrow{transform:translateX(4px);}

/* ---------- Über / Region ---------- */
.v27-about{
  background:var(--v27-paper);border:1px solid var(--v27-line);border-radius:20px;
  padding:clamp(28px,5vw,52px);margin-bottom:clamp(50px,8vw,90px);
  display:grid;grid-template-columns:auto 1fr;gap:clamp(22px,3vw,36px);align-items:center;
}
.v27-about-badge{
  width:clamp(64px,9vw,92px);height:clamp(64px,9vw,92px);border-radius:20px;
  background:var(--v27-grad);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:clamp(1.4rem,3vw,2.1rem);font-weight:800;letter-spacing:-.02em;flex:0 0 auto;min-width:0;
}
.v27-about-body h2{font-size:clamp(1.3rem,2.6vw,1.7rem);font-weight:800;margin:0 0 10px;letter-spacing:-.02em;}
.v27-about-body p{color:var(--v27-muted);margin:0;max-width:62ch;}

/* ---------- Schluss-CTA ---------- */
.v27-contact{
  text-align:center;border:1px solid var(--v27-line);border-radius:22px;background:var(--v27-bg);
  padding:clamp(40px,7vw,72px) clamp(20px,4vw,40px);margin-bottom:clamp(56px,9vw,100px);
}
.v27-contact h2{font-size:clamp(1.7rem,3.6vw,2.6rem);font-weight:800;letter-spacing:-.025em;margin:0 0 14px;}
.v27-contact p{color:var(--v27-muted);margin:0 auto 26px;max-width:50ch;}
.v27-contact .v27-arrow{color:#fff;}

/* ---------- Responsive ---------- */
@media (max-width:640px){
  .v27-stats{grid-template-columns:repeat(2,1fr);row-gap:24px;}
  .v27-about{grid-template-columns:1fr;text-align:center;justify-items:center;}
  .v27-cta-row .v27-btn{flex:1 1 auto;justify-content:center;}
}

/* ---------- Reduced motion: Marquee aus → statisch scrollbar ---------- */
@media (prefers-reduced-motion:reduce){
  .v27-root *{transition:none!important;}
  .v27-teaser-track{animation:none!important;}
  .v27-band{
    -webkit-mask-image:none;mask-image:none;
    overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  }
  .v27-band-track{animation:none!important;width:max-content;}
  .v27-card{scroll-snap-align:start;}
}
</style>

<div class="v27-root">
  @php
    // Datenmodell: nr, titel, satz, icon, url, band (a|b)
    $worlds = [
      ['01','iOS &amp; Mac Apps','22 Apps im App Store für iPhone, iPad &amp; Mac, regelmäßig aktualisiert.','fa-brands fa-apple','https://ios.kotsch.tech','a'],
      ['02','Windows','9 Programme: Cleaner, Commander, Notes, Taskmanager, CodeEditor – Direkt-Download.','fa-brands fa-windows','https://windows.kotsch.tech','a'],
      ['03','Android','Native Apps, aktuell in Entwicklung.','fa-brands fa-android','https://android.kotsch.tech','a'],
      ['04','Web-Tools','734 Tools direkt im Browser – ohne Login, ohne Installation.','fa-solid fa-toolbox','https://webtools.kotsch.tech','a'],
      ['05','Shop','Digitale Produkte mit Sofort-Download.','fa-solid fa-bag-shopping','https://shop.kotsch.tech','a'],
      ['06','Hosting','Managed Webhosting, vServer/VPS – DSGVO-konform.','fa-solid fa-server','https://hosting.kotsch.tech','b'],
      ['07','News','1.412 Ratgeber &amp; Tutorials.','fa-solid fa-newspaper','https://news.kotsch.tech','b'],
      ['08','IT-Hilfe','Vor Ort &amp; Remote (Region Glauchau–Lichtenstein) – keine Lösung, kein Preis.','fa-solid fa-headset','https://it-hilfe.kotsch.tech','b'],
      ['09','Webdesign','Studio &amp; 20 Branchen-Demos.','fa-solid fa-palette','https://webdesign.kotsch.tech','b'],
    ];
    $bandA = array_values(array_filter($worlds, fn($w) => $w[5] === 'a'));
    $bandB = array_values(array_filter($worlds, fn($w) => $w[5] === 'b'));
  @endphp

  <div class="v27-wrap">

    {{-- 1. HERO --}}
    <header class="v27-hero">
      <p class="v27-eyebrow"><i class="fa-solid fa-location-dot" aria-hidden="true"></i> Arthur Kotsch · Student Digital Engineering · Lichtenstein (Sachsen)</p>
      <h1 class="v27-h1">Eine Marke, neun <span class="v27-outline">Welten</span>.</h1>
      <p class="v27-lead">Apps, Web-Tools, Hosting und persönliche IT-Hilfe – alles aus einer Hand, von einem Entwickler aus Sachsen.</p>
      <div class="v27-cta-row">
        <a class="v27-btn v27-btn-primary" href="#v27-welten">Welten entdecken <i class="fa-solid fa-arrow-down v27-arrow" aria-hidden="true"></i></a>
        <a class="v27-btn v27-btn-ghost" href="/kontakt"><i class="fa-regular fa-envelope" aria-hidden="true"></i> Kontakt</a>
      </div>

      {{-- Signature-Band als Teaser am unteren Hero-Rand --}}
      <div class="v27-teaser" aria-hidden="true">
        <div class="v27-teaser-track">
          @for($pass=0;$pass<2;$pass++)
            @foreach($worlds as $w)
              <span class="v27-teaser-item">
                <span class="v27-teaser-num">{{ $w[0] }}</span> {!! $w[1] !!}
                <span class="v27-teaser-dot"></span>
              </span>
            @endforeach
          @endfor
        </div>
      </div>
    </header>

    {{-- 2. KENNZAHLEN-LEISTE --}}
    <div class="v27-stats-shell">
      <div class="v27-stats-line" aria-hidden="true"></div>
      <div class="v27-stats" role="list" aria-label="Kennzahlen">
        <div class="v27-stat" role="listitem"><div class="v27-stat-num" data-count="22">22</div><div class="v27-stat-lbl">iOS/Mac-Apps</div></div>
        <div class="v27-stat" role="listitem"><div class="v27-stat-num" data-count="9">9</div><div class="v27-stat-lbl">Windows-Tools</div></div>
        <div class="v27-stat" role="listitem"><div class="v27-stat-num" data-count="734">734</div><div class="v27-stat-lbl">Web-Tools</div></div>
        <div class="v27-stat" role="listitem"><div class="v27-stat-num" data-count="1412" data-fmt="de">1.412</div><div class="v27-stat-lbl">Artikel</div></div>
      </div>
    </div>

    {{-- 3. DIE 9 WELTEN — KINETIC RIBBONS --}}
    <section class="v27-ribbons" id="v27-welten" aria-labelledby="v27-welten-title">
      <div class="v27-sec-head">
        <p class="v27-sec-kicker">Die neun Welten</p>
        <h2 class="v27-sec-title" id="v27-welten-title">Ein Band, das nie stillsteht</h2>
        <p class="v27-sec-sub">Zwei sanft laufende Bänder – fahre mit der Maus darüber oder nutze die Tastatur, dann halten beide an, damit du in Ruhe lesen kannst.</p>
      </div>

      {{-- Band A --}}
      <div class="v27-band v27-band-a">
        <div class="v27-band-track">
          @for($pass=0;$pass<2;$pass++)
            @foreach($bandA as $w)
              <a class="v27-card" href="{{ $w[4] }}" target="_blank" rel="noopener"
                 @if($pass===1) aria-hidden="true" tabindex="-1" @endif>
                <i class="{{ $w[3] }} v27-card-icon" aria-hidden="true"></i>
                <div class="v27-card-num" aria-hidden="true">{{ $w[0] }}</div>
                <h3 class="v27-card-title">{!! $w[1] !!}</h3>
                <p class="v27-card-desc">{!! $w[2] !!}</p>
                <span class="v27-card-cta">Öffnen <i class="fa-solid fa-arrow-right v27-arrow" aria-hidden="true"></i></span>
              </a>
            @endforeach
          @endfor
        </div>
      </div>

      {{-- Band B --}}
      <div class="v27-band v27-band-b">
        <div class="v27-band-track">
          @for($pass=0;$pass<2;$pass++)
            @foreach($bandB as $w)
              <a class="v27-card" href="{{ $w[4] }}" target="_blank" rel="noopener"
                 @if($pass===1) aria-hidden="true" tabindex="-1" @endif>
                <i class="{{ $w[3] }} v27-card-icon" aria-hidden="true"></i>
                <div class="v27-card-num" aria-hidden="true">{{ $w[0] }}</div>
                <h3 class="v27-card-title">{!! $w[1] !!}</h3>
                <p class="v27-card-desc">{!! $w[2] !!}</p>
                <span class="v27-card-cta">Öffnen <i class="fa-solid fa-arrow-right v27-arrow" aria-hidden="true"></i></span>
              </a>
            @endforeach
          @endfor
        </div>
      </div>
    </section>

    {{-- 4. ÜBER / REGION-NOTIZ --}}
    <section class="v27-about" aria-labelledby="v27-about-title">
      <div class="v27-about-badge" aria-hidden="true">AK</div>
      <div class="v27-about-body">
        <h2 id="v27-about-title">Aus Lichtenstein in Sachsen</h2>
        <p>Hinter allem steckt ein einzelner Entwickler aus Lichtenstein in der Region Glauchau–Lichtenstein. Native Apps, Tools im Browser, Hosting und IT-Hilfe vor Ort – ehrlich, persönlich und ohne erfundene Versprechen.</p>
      </div>
    </section>

    {{-- 5. SCHLUSS-CTA --}}
    <section class="v27-contact" aria-labelledby="v27-cta-title">
      <h2 id="v27-cta-title">Projekt, Frage, oder einfach neugierig?</h2>
      <p>Schreib mir kurz – ich melde mich verlässlich zurück.</p>
      <a class="v27-btn v27-btn-primary" href="/kontakt">Zum Kontakt <i class="fa-solid fa-arrow-right v27-arrow" aria-hidden="true"></i></a>
    </section>

  </div>
</div>

<script>
(function(){
  var root=document.querySelector('.v27-root'); if(!root) return;
  var reduce=window.matchMedia&&window.matchMedia('(prefers-reduced-motion:reduce)').matches;
  var nums=Array.prototype.slice.call(root.querySelectorAll('.v27-stat-num'));

  function fmt(n,de){ return de ? n.toLocaleString('de-DE') : String(n); }

  function countUp(el){
    var target=parseInt(el.getAttribute('data-count'),10);
    var de=el.getAttribute('data-fmt')==='de';
    if(reduce||!target){ el.textContent=fmt(target||0,de); return; }
    var dur=900, start=null;
    function step(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(target*eased),de);
      if(p<1) requestAnimationFrame(step); else el.textContent=fmt(target,de);
    }
    el.textContent=fmt(0,de);
    requestAnimationFrame(step);
  }

  if(reduce||!('IntersectionObserver' in window)){
    nums.forEach(function(el){ var t=parseInt(el.getAttribute('data-count'),10); el.textContent=fmt(t, el.getAttribute('data-fmt')==='de'); });
    return;
  }
  var io=new IntersectionObserver(function(entries){
    entries.forEach(function(e){
      if(e.isIntersecting){ countUp(e.target); io.unobserve(e.target); }
    });
  },{threshold:.4});
  nums.forEach(function(el){ io.observe(el); });
})();
</script>
@endsection