@extends('layouts.app')

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

.v26-root{
  --v26-bg:#ffffff;
  --v26-panel:#f6f8fc;
  --v26-line:#e4e9f2;
  --v26-ink:#0f1830;
  --v26-muted:#5a6478;
  --v26-blue:#2563eb;
  --v26-orange:#FF5D2E;
  --v26-grad:linear-gradient(120deg,#2563eb,#FF5D2E);
  font-family:'Inter',-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--v26-ink);
  background:var(--v26-bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.v26-root *{box-sizing:border-box;}
.v26-wrap{max-width:1160px;margin:0 auto;padding:0 clamp(16px,4vw,32px);}

/* Intro */
.v26-intro{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:24px;
  justify-content:space-between;
  padding:clamp(40px,7vw,76px) 0 clamp(20px,3vw,30px);
}
.v26-intro-text{min-width:0;flex:1 1 420px;}
.v26-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--v26-blue);margin:0 0 14px;
}
.v26-eyebrow i{color:var(--v26-orange);}
.v26-root h1.v26-h1{
  font-size:clamp(1.9rem,4.5vw,3rem);
  font-weight:800;letter-spacing:-.025em;line-height:1.08;
  margin:0 0 14px;color:var(--v26-ink);
}
.v26-h1 .v26-grad-text{
  background:var(--v26-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.v26-lead{font-size:clamp(1rem,1.6vw,1.12rem);color:var(--v26-muted);max-width:54ch;margin:0;}
.v26-intro-cta{flex:0 0 auto;}
.v26-btn{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:600;font-size:.98rem;text-decoration:none;
  padding:12px 20px;border-radius:12px;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease,color .18s ease;
}
.v26-btn-primary{background:var(--v26-blue);color:#fff;box-shadow:0 6px 18px rgba(37,99,235,.22);}
.v26-btn-primary:hover,.v26-btn-primary:focus-visible{
  background:var(--v26-orange);transform:translateY(-1px);box-shadow:0 10px 26px rgba(255,93,46,.28);
}
.v26-btn-ghost{
  background:#fff;color:var(--v26-ink);border:1px solid var(--v26-line);
}
.v26-btn-ghost:hover,.v26-btn-ghost:focus-visible{border-color:var(--v26-blue);color:var(--v26-blue);transform:translateY(-1px);}

/* Kennzahlen */
.v26-stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--v26-line);border-radius:18px;overflow:hidden;
  background:#fff;margin:clamp(18px,3vw,28px) 0 clamp(44px,7vw,72px);
}
.v26-stat{padding:clamp(18px,2.6vw,26px) clamp(14px,2vw,22px);min-width:0;border-left:1px solid var(--v26-line);}
.v26-stat:first-child{border-left:0;}
.v26-stat-num{
  font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  background:var(--v26-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;line-height:1;
}
.v26-stat-lbl{margin-top:7px;font-size:.86rem;color:var(--v26-muted);}

/* Section head */
.v26-sec-head{margin:0 0 clamp(18px,3vw,26px);}
.v26-sec-kicker{font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--v26-orange);margin:0 0 8px;}
.v26-sec-title{font-size:clamp(1.5rem,3.2vw,2.2rem);font-weight:800;letter-spacing:-.02em;margin:0;}
.v26-sec-sub{color:var(--v26-muted);margin:8px 0 0;max-width:60ch;}

/* Cockpit */
.v26-cockpit{
  display:grid;grid-template-columns:38% 62%;
  border:1px solid var(--v26-line);border-radius:20px;overflow:hidden;
  background:var(--v26-panel);
  margin-bottom:clamp(44px,7vw,72px);
}

/* Tab column */
.v26-tabs{display:flex;flex-direction:column;border-right:1px solid var(--v26-line);background:var(--v26-panel);min-width:0;}
.v26-tab{
  position:relative;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;
  width:100%;text-align:left;cursor:pointer;
  background:transparent;border:0;border-bottom:1px solid var(--v26-line);
  padding:14px clamp(14px,1.8vw,20px);
  font-family:inherit;color:var(--v26-ink);
  transition:background .16s ease,transform .16s ease;
}
.v26-tab:last-child{border-bottom:0;}
.v26-tab::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--v26-grad);opacity:0;transition:opacity .16s ease;
}
.v26-tab-idx{
  font-size:.82rem;font-weight:800;font-variant-numeric:tabular-nums;
  color:#9aa4b8;transition:color .16s ease;letter-spacing:.02em;
}
.v26-tab-name{font-weight:600;font-size:1rem;line-height:1.2;}
.v26-tab-tag{display:block;font-weight:400;font-size:.8rem;color:var(--v26-muted);margin-top:2px;}
.v26-tab:hover,.v26-tab:focus-visible{background:#fff;transform:translateX(2px);outline:none;}
.v26-tab:hover .v26-tab-idx,.v26-tab:focus-visible .v26-tab-idx{
  background:var(--v26-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.v26-tab:focus-visible{box-shadow:inset 0 0 0 2px var(--v26-blue);}
.v26-tab[aria-selected="true"]{background:#fff;}
.v26-tab[aria-selected="true"]::before{opacity:1;}
.v26-tab[aria-selected="true"] .v26-tab-idx{
  background:var(--v26-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}

/* Stage */
.v26-stage{position:relative;background:#fff;min-width:0;overflow:hidden;
  padding:clamp(26px,4vw,52px);min-height:340px;display:flex;}
.v26-ghost{
  position:absolute;top:clamp(8px,2vw,18px);right:clamp(16px,3vw,34px);
  font-size:clamp(4.5rem,12vw,8rem);font-weight:800;line-height:.8;
  font-variant-numeric:tabular-nums;color:var(--v26-ink);opacity:.06;
  pointer-events:none;user-select:none;letter-spacing:-.04em;
  transition:opacity .18s ease;
}
.v26-panel{display:none;flex-direction:column;justify-content:center;position:relative;z-index:1;width:100%;}
.v26-panel.is-active{display:flex;animation:v26-fade .22s ease both;}
@keyframes v26-fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.v26-panel-icon{
  width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;color:#fff;background:var(--v26-grad);margin-bottom:18px;
  box-shadow:0 8px 22px rgba(37,99,235,.18);
}
.v26-panel-title{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:0 0 12px;}
.v26-panel-desc{font-size:clamp(1rem,1.6vw,1.12rem);color:var(--v26-muted);margin:0 0 18px;max-width:46ch;}
.v26-fact{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-size:.84rem;font-weight:600;color:var(--v26-ink);
  background:var(--v26-panel);border:1px solid var(--v26-line);
  padding:7px 13px;border-radius:999px;margin-bottom:24px;
}
.v26-fact i{color:var(--v26-blue);}

/* Über */
.v26-about{
  background:var(--v26-panel);border:1px solid var(--v26-line);border-radius:20px;
  padding:clamp(26px,4vw,46px);margin-bottom:clamp(44px,7vw,72px);
  display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,34px);align-items:center;
}
.v26-about-badge{
  width:clamp(64px,9vw,86px);height:clamp(64px,9vw,86px);border-radius:20px;
  background:var(--v26-grad);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:clamp(1.4rem,3vw,2rem);font-weight:800;letter-spacing:-.02em;flex:0 0 auto;
  box-shadow:0 10px 26px rgba(37,99,235,.2);
}
.v26-about-body h3{font-size:clamp(1.2rem,2.2vw,1.5rem);font-weight:800;margin:0 0 8px;letter-spacing:-.01em;}
.v26-about-body p{color:var(--v26-muted);margin:0;max-width:62ch;}

/* Kontakt CTA */
.v26-contact{
  text-align:center;border:1px solid var(--v26-line);border-radius:20px;background:#fff;
  padding:clamp(34px,6vw,64px) clamp(20px,4vw,40px);margin-bottom:clamp(50px,8vw,90px);
}
.v26-contact h2{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;letter-spacing:-.02em;margin:0 0 12px;}
.v26-contact p{color:var(--v26-muted);margin:0 auto 24px;max-width:50ch;}

@media (max-width:760px){
  .v26-cockpit{grid-template-columns:1fr;}
  .v26-tabs{
    flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--v26-line);
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  }
  .v26-tab{
    flex:0 0 auto;grid-template-columns:1fr;gap:2px;border-bottom:0;border-right:1px solid var(--v26-line);
    min-width:150px;scroll-snap-align:start;padding:12px 16px;
  }
  .v26-tab::before{top:auto;bottom:0;left:0;right:0;width:auto;height:3px;}
  .v26-tab:hover,.v26-tab:focus-visible{transform:none;}
  .v26-tab-tag{display:none;}
  .v26-stage{min-height:300px;padding:clamp(22px,6vw,32px);}
  .v26-about{grid-template-columns:1fr;text-align:center;justify-items:center;}
}
@media (max-width:420px){
  .v26-stats{grid-template-columns:repeat(2,1fr);}
  .v26-stat:nth-child(-n+2){border-bottom:1px solid var(--v26-line);}
  .v26-stat:nth-child(odd){border-left:0;}
  .v26-intro-cta{width:100%;}
  .v26-intro-cta .v26-btn{width:100%;justify-content:center;}
}
@media (prefers-reduced-motion:reduce){
  .v26-root *{transition:none!important;animation:none!important;}
}
</style>

<div class="v26-root">
  <div class="v26-wrap">

    {{-- Intro / Hero --}}
    <header class="v26-intro">
      <div class="v26-intro-text">
        <p class="v26-eyebrow"><i class="fa-solid fa-code"></i> Arthur Kotsch · Lichtenstein (Sachsen)</p>
        <h1 class="v26-h1">Neun Welten, <span class="v26-grad-text">ein Entwickler.</span></h1>
        <p class="v26-lead">Student Digital Engineering und Entwickler aus Lichtenstein in Sachsen. Apps, Web-Tools, Hosting und IT-Hilfe — wähle eine Welt und sieh, was dahintersteckt.</p>
      </div>
      <div class="v26-intro-cta">
        <a class="v26-btn v26-btn-ghost" href="/kontakt"><i class="fa-regular fa-envelope"></i> Kontakt aufnehmen</a>
      </div>
    </header>

    {{-- Kennzahlen --}}
    <div class="v26-stats" role="list" aria-label="Kennzahlen">
      <div class="v26-stat" role="listitem"><div class="v26-stat-num">22</div><div class="v26-stat-lbl">iOS/Mac-Apps</div></div>
      <div class="v26-stat" role="listitem"><div class="v26-stat-num">9</div><div class="v26-stat-lbl">Windows-Tools</div></div>
      <div class="v26-stat" role="listitem"><div class="v26-stat-num">734</div><div class="v26-stat-lbl">Web-Tools</div></div>
      <div class="v26-stat" role="listitem"><div class="v26-stat-num">1.412</div><div class="v26-stat-lbl">Artikel</div></div>
    </div>

    {{-- SIGNATURE: 9-Welten-Cockpit --}}
    <section aria-labelledby="v26-worlds-title">
      <div class="v26-sec-head">
        <p class="v26-sec-kicker">Das Welten-Cockpit</p>
        <h2 class="v26-sec-title" id="v26-worlds-title">Neun Welten im Überblick</h2>
        <p class="v26-sec-sub">Wähle links eine Welt — die Bühne zeigt Details und führt dich direkt zum passenden Bereich.</p>
      </div>

      <div class="v26-cockpit">
        {{-- Tab-Spalte --}}
        <div class="v26-tabs" role="tablist" aria-label="Neun Welten" aria-orientation="vertical">
          @php
            $worlds = [
              ['ios','iOS &amp; Mac Apps','App Store','iOS &amp; Mac Apps','22 Apps im App Store — für iPhone, iPad und Mac, mit regelmäßigen Updates.','fa-brands fa-apple','App Store · iPhone / iPad / Mac','https://ios.kotsch.tech','Zum App Store'],
              ['windows','Windows','9 Programme','Windows','9 Programme — Cleaner, Commander, Notes, Taskmanager und CodeEditor als Direkt-Download.','fa-brands fa-windows','Direkt-Download · Windows','https://windows.kotsch.tech','Programme ansehen'],
              ['android','Android','In Entwicklung','Android','Native Android-Apps, aktuell in Entwicklung.','fa-brands fa-android','Native Apps · in Entwicklung','https://android.kotsch.tech','Mehr erfahren'],
              ['webtools','Web-Tools','734 im Browser','Web-Tools','734 Tools direkt im Browser — ohne Login, ohne Installation.','fa-solid fa-toolbox','734 Tools · ohne Login','https://webtools.kotsch.tech','Tools öffnen'],
              ['shop','Shop','Sofort-Download','Shop','Digitale Produkte mit Sofort-Download nach dem Kauf.','fa-solid fa-bag-shopping','Digital · Sofort-Download','https://shop.kotsch.tech','Zum Shop'],
              ['hosting','Hosting','DSGVO-konform','Hosting','Managed Webhosting sowie vServer und VPS — DSGVO-konform betrieben.','fa-solid fa-server','Managed · vServer / VPS','https://hosting.kotsch.tech','Hosting ansehen'],
              ['news','News','1.412 Artikel','News','1.412 Ratgeber und Tutorials rund um Technik und Software.','fa-solid fa-newspaper','1.412 Ratgeber &amp; Tutorials','https://news.kotsch.tech','Zu den Artikeln'],
              ['it-hilfe','IT-Hilfe','Vor Ort &amp; Remote','IT-Hilfe','IT-Hilfe vor Ort und per Remote in der Region Glauchau–Lichtenstein.','fa-solid fa-headset','„keine Lösung = kein Preis“','https://it-hilfe.kotsch.tech','Hilfe anfragen'],
              ['webdesign','Webdesign','Studio &amp; Demos','Webdesign','Webdesign-Studio mit 20 Branchen-Demos als Inspiration.','fa-solid fa-palette','Studio · 20 Branchen-Demos','https://webdesign.kotsch.tech','Zum Studio'],
            ];
          @endphp
          @foreach($worlds as $i => $w)
            <button class="v26-tab{{ $i===0 ? ' is-init' : '' }}" role="tab"
                    id="v26-tab-{{ $i }}" aria-controls="v26-panel-{{ $i }}"
                    aria-selected="{{ $i===0 ? 'true' : 'false' }}"
                    tabindex="{{ $i===0 ? '0' : '-1' }}" data-idx="{{ $i }}">
              <span class="v26-tab-idx">{{ str_pad($i+1,2,'0',STR_PAD_LEFT) }}</span>
              <span>
                <span class="v26-tab-name">{!! $w[1] !!}</span>
                <span class="v26-tab-tag">{!! $w[2] !!}</span>
              </span>
            </button>
          @endforeach
        </div>

        {{-- Bühne --}}
        <div class="v26-stage">
          <span class="v26-ghost" id="v26-ghost" aria-hidden="true">01 / 09</span>
          @foreach($worlds as $i => $w)
            <div class="v26-panel{{ $i===0 ? ' is-active' : '' }}" role="tabpanel"
                 id="v26-panel-{{ $i }}" aria-labelledby="v26-tab-{{ $i }}"
                 tabindex="0" {{ $i===0 ? '' : 'hidden' }}>
              <span class="v26-panel-icon"><i class="{{ $w[5] }}" aria-hidden="true"></i></span>
              <h3 class="v26-panel-title">{!! $w[3] !!}</h3>
              <p class="v26-panel-desc">{!! $w[4] !!}</p>
              <span class="v26-fact"><i class="fa-solid fa-circle-check" aria-hidden="true"></i> {!! $w[6] !!}</span>
              <a class="v26-btn v26-btn-primary" href="{{ $w[7] }}">
                {!! $w[8] !!} <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
              </a>
            </div>
          @endforeach
        </div>
      </div>
    </section>

    {{-- Über --}}
    <section class="v26-about" aria-labelledby="v26-about-title">
      <div class="v26-about-badge" aria-hidden="true">AK</div>
      <div class="v26-about-body">
        <h3 id="v26-about-title">Über Arthur Kotsch</h3>
        <p>Student im Studiengang Digital Engineering und Entwickler aus Lichtenstein in Sachsen. Von nativen Apps über Web-Tools bis zu Hosting und persönlicher IT-Hilfe — alles aus einer Hand, ehrlich und ohne erfundene Versprechen.</p>
      </div>
    </section>

    {{-- Kontakt-CTA --}}
    <section class="v26-contact" aria-labelledby="v26-cta-title">
      <h2 id="v26-cta-title">Frage oder Projekt?</h2>
      <p>Schreib mir kurz — ich melde mich verlässlich zurück.</p>
      <a class="v26-btn v26-btn-primary" href="/kontakt"><i class="fa-regular fa-paper-plane" aria-hidden="true"></i> Zum Kontakt</a>
    </section>

  </div>
</div>

<script>
(function(){
  var root=document.querySelector('.v26-root'); if(!root) return;
  var tabs=Array.prototype.slice.call(root.querySelectorAll('.v26-tab'));
  var panels=Array.prototype.slice.call(root.querySelectorAll('.v26-panel'));
  var ghost=root.querySelector('#v26-ghost');
  var total=String(tabs.length).padStart(2,'0');

  function activate(idx,focus){
    tabs.forEach(function(t,i){
      var on=i===idx;
      t.setAttribute('aria-selected',on?'true':'false');
      t.tabIndex=on?0:-1;
      if(on&&focus) t.focus();
    });
    panels.forEach(function(p,i){
      var on=i===idx;
      p.classList.toggle('is-active',on);
      if(on){p.removeAttribute('hidden');} else {p.setAttribute('hidden','');}
    });
    if(ghost){ ghost.textContent=String(idx+1).padStart(2,'0')+' / '+total; }
  }

  tabs.forEach(function(t,i){
    t.addEventListener('click',function(){ activate(i,false); });
    t.addEventListener('keydown',function(e){
      var n=null;
      if(e.key==='ArrowDown'||e.key==='ArrowRight'){ n=(i+1)%tabs.length; }
      else if(e.key==='ArrowUp'||e.key==='ArrowLeft'){ n=(i-1+tabs.length)%tabs.length; }
      else if(e.key==='Home'){ n=0; }
      else if(e.key==='End'){ n=tabs.length-1; }
      if(n!==null){ e.preventDefault(); activate(n,true); }
    });
  });
})();
</script>
@endsection