@extends('layouts.app')
@section('title', 'Wort Zähler & Text Analysator – Zeichen zählen | kotsch.tech')
@section('meta_description', 'Wörter, Zeichen, Sätze zählen – live. Häufigste Wörter, Lesezeit, Twitter/LinkedIn-Limit-Checker. Kostenloser Text Analyzer online.')
@section('meta_extra')
<meta name="keywords" content="Wort Zähler, Zeichen zählen, Wörter zählen, Text analysieren, Zeichenzähler, Wortzähler, Twitter Zeichenlimit">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.limit-bar { height:6px; border-radius:999px; background:var(--line); overflow:hidden; margin-top:6px; }
.limit-fill { height:100%; border-radius:999px; background:var(--accent); transition:width 0.2s, background 0.2s; }
.limit-fill.warn { background:#f59e0b; }
.limit-fill.over { background:#ef4444; }
.freq-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:var(--bg); border:1px solid var(--line); font-size:0.78rem; font-weight:700; margin:3px; }
.freq-chip span { background:var(--accent); color:#fff; border-radius:999px; padding:1px 7px; font-size:0.7rem; }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-align-left"></i> Textwerkzeuge</span>
        <h1 class="tool-h1">Text<span>analysator.</span></h1>
        <p class="tool-sub">Wörter, Zeichen, Sätze – live gezählt. Plus Häufigkeitsanalyse und Social-Media-Limits.</p>
    </div>

    <div class="t-panel">
        <div class="t-field">
            <label class="t-label">Text eingeben oder einfügen</label>
            <div class="t-copy-wrap">
                <textarea class="t-textarea" id="txt" placeholder="Text hier einfügen…" oninput="analyze()" style="min-height:200px"></textarea>
                <button class="t-copy-btn" onclick="copyText()" title="Kopieren"><i class="fas fa-copy"></i></button>
            </div>
        </div>
        <div style="display:flex;gap:8px;margin-top:8px">
            <button class="t-btn sm ghost" onclick="document.getElementById('txt').value='';analyze()"><i class="fas fa-trash"></i> Leeren</button>
        </div>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-chart-bar"></i> Statistiken</div>
        <div class="t-grid-4">
            <div class="t-stat-card accent"><div class="t-stat-num" id="s-words">0</div><div class="t-stat-lbl">Wörter</div></div>
            <div class="t-stat-card"><div class="t-stat-num" id="s-chars">0</div><div class="t-stat-lbl">Zeichen (inkl.)</div></div>
            <div class="t-stat-card"><div class="t-stat-num" id="s-chars-no">0</div><div class="t-stat-lbl">Ohne Leerzeichen</div></div>
            <div class="t-stat-card"><div class="t-stat-num" id="s-sentences">0</div><div class="t-stat-lbl">Sätze</div></div>
            <div class="t-stat-card"><div class="t-stat-num" id="s-paragraphs">0</div><div class="t-stat-lbl">Absätze</div></div>
            <div class="t-stat-card"><div class="t-stat-num" id="s-read">0</div><div class="t-stat-lbl">Min. Lesezeit</div></div>
            <div class="t-stat-card"><div class="t-stat-num" id="s-avgword">0</div><div class="t-stat-lbl">Ø Wortlänge</div></div>
            <div class="t-stat-card"><div class="t-stat-num" id="s-unique">0</div><div class="t-stat-lbl">Einzigartige Wörter</div></div>
        </div>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-share-alt"></i> Social-Media Limits</div>
        <div style="margin-bottom:14px">
            <div style="display:flex;justify-content:space-between;font-size:0.85rem;font-weight:700">
                <span>𝕏 / Twitter (280)</span><span id="tw-count">0 / 280</span>
            </div>
            <div class="limit-bar"><div class="limit-fill" id="tw-bar" style="width:0"></div></div>
        </div>
        <div style="margin-bottom:14px">
            <div style="display:flex;justify-content:space-between;font-size:0.85rem;font-weight:700">
                <span>LinkedIn Post (3000)</span><span id="li-count">0 / 3000</span>
            </div>
            <div class="limit-bar"><div class="limit-fill" id="li-bar" style="width:0"></div></div>
        </div>
        <div>
            <div style="display:flex;justify-content:space-between;font-size:0.85rem;font-weight:700">
                <span>Meta (Instagram Bio, 150)</span><span id="ig-count">0 / 150</span>
            </div>
            <div class="limit-bar"><div class="limit-fill" id="ig-bar" style="width:0"></div></div>
        </div>
    </div>

    <div class="t-panel" id="freq-panel" style="display:none">
        <div class="t-panel-title"><i class="fas fa-sort-amount-down"></i> Häufigste Wörter</div>
        <div id="freq-list"></div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
const STOPWORDS=new Set(['der','die','das','ein','eine','und','oder','aber','mit','bei','in','an','auf','für','von','zu','ist','sind','war','hat','ich','du','er','sie','es','wir','ihr','sie','den','dem','des']);

function updateBar(barId,countId,chars,limit){
    const pct=Math.min(100,(chars/limit)*100);
    const bar=document.getElementById(barId);
    bar.style.width=pct+'%';
    bar.className='limit-fill'+(pct>100?' over':pct>80?' warn':'');
    document.getElementById(countId).textContent=chars+' / '+limit;
}

function analyze(){
    const text=document.getElementById('txt').value;
    const trimmed=text.trim();
    const words=trimmed?trimmed.split(/\s+/):[];
    const wordCount=words.length;
    const chars=text.length;
    const charsNo=text.replace(/\s/g,'').length;
    const sentences=trimmed?(text.match(/[.!?]+/g)||[]).length:0;
    const paragraphs=trimmed?text.split(/\n\s*\n/).filter(p=>p.trim()).length||1:0;
    const readTime=wordCount===0?0:Math.max(1,Math.ceil(wordCount/200));
    const avgWord=wordCount?Math.round(charsNo/wordCount*10)/10:0;
    const unique=new Set(words.map(w=>w.toLowerCase().replace(/[^a-zäöü]/g,''))).size;

    document.getElementById('s-words').textContent=wordCount.toLocaleString('de-DE');
    document.getElementById('s-chars').textContent=chars.toLocaleString('de-DE');
    document.getElementById('s-chars-no').textContent=charsNo.toLocaleString('de-DE');
    document.getElementById('s-sentences').textContent=sentences;
    document.getElementById('s-paragraphs').textContent=paragraphs;
    document.getElementById('s-read').textContent=readTime+' min';
    document.getElementById('s-avgword').textContent=avgWord;
    document.getElementById('s-unique').textContent=unique;

    updateBar('tw-bar','tw-count',chars,280);
    updateBar('li-bar','li-count',chars,3000);
    updateBar('ig-bar','ig-count',chars,150);

    // Frequency
    if(wordCount>0){
        const freq={};
        words.forEach(w=>{const k=w.toLowerCase().replace(/[^a-zäöü]/g,'');if(k.length>2&&!STOPWORDS.has(k))freq[k]=(freq[k]||0)+1;});
        const top=Object.entries(freq).sort((a,b)=>b[1]-a[1]).slice(0,15);
        document.getElementById('freq-list').innerHTML=top.map(([w,c])=>`<span class="freq-chip">${w} <span>${c}</span></span>`).join('');
        document.getElementById('freq-panel').style.display=top.length?'':'none';
    } else {
        document.getElementById('freq-panel').style.display='none';
    }
}

function copyText(){
    const val=document.getElementById('txt').value;
    if(!val)return;
    navigator.clipboard.writeText(val).then(()=>{
        const btn=document.querySelector('.t-copy-btn');
        btn.innerHTML='<i class="fas fa-check"></i>';
        setTimeout(()=>btn.innerHTML='<i class="fas fa-copy"></i>',2000);
    });
}
</script>

@include('tools._seo_content', ['toolSlug' => 'wort-zaehler', 'toolName' => 'Wort & Zeichenzähler'])

@endsection