@extends('layouts.app')
@section('title', 'Lorem Ipsum Generator – Platzhaltertext erstellen | kotsch.tech')
@section('meta_description', 'Lorem Ipsum Generator online: Wörter, Sätze, Absätze, HTML oder Deutsch-Blindtext erstellen. Sofort kopieren – kostenlos im Browser.')
@section('meta_extra')
<meta name="keywords" content="Lorem Ipsum Generator, Platzhaltertext, Blindtext, Lorem Ipsum online, Dummy Text, Fülltext Generator">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.li-output { width:100%; min-height:220px; resize:vertical; padding:16px; font-size:0.92rem; line-height:1.8; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm); outline:none; box-sizing:border-box; font-family:'Georgia',serif; }
.li-output.mono { font-family:'JetBrains Mono',monospace; font-size:0.82rem; }
.mode-tab { padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:var(--card); font-weight:700; font-size:0.82rem; cursor:pointer; color:var(--muted); transition:all 0.15s; }
.mode-tab.active { border-color:var(--accent); background:var(--accent); color:#fff; }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-align-left"></i> Text</span>
        <h1 class="tool-h1">Lorem<span> Ipsum.</span></h1>
        <p class="tool-sub">Platzhaltertext generieren – Lorem Ipsum, Deutsch, HTML oder <code style="font-size:0.85em;background:var(--bg);padding:2px 6px;border-radius:4px;border:1px solid var(--line)">&lt;p&gt;</code>-Tags.</p>
    </div>

    <div class="t-panel">
        <div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px">
            <button class="mode-tab active" onclick="setLang('lorem',this)">Lorem Ipsum</button>
            <button class="mode-tab" onclick="setLang('de',this)">Deutsch</button>
            <button class="mode-tab" onclick="setLang('html',this)">HTML &lt;p&gt;</button>
        </div>

        <div class="t-grid-3" style="gap:12px;margin-bottom:16px">
            <div class="t-field">
                <label class="t-label">Typ</label>
                <select class="t-select" id="li-type" onchange="generate()">
                    <option value="words">Wörter</option>
                    <option value="sentences">Sätze</option>
                    <option value="paragraphs" selected>Absätze</option>
                </select>
            </div>
            <div class="t-field">
                <label class="t-label">Anzahl</label>
                <input type="number" class="t-input" id="li-count" min="1" max="50" value="3" oninput="generate()">
            </div>
            <div class="t-field">
                <label class="t-label">Wörter/Satz (Ø)</label>
                <input type="number" class="t-input" id="li-wordlen" min="5" max="30" value="12" oninput="generate()">
            </div>
        </div>

        <div class="t-toggle-row" style="border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:12px">
            <label for="li-startlorem">Mit "Lorem ipsum…" beginnen</label>
            <input type="checkbox" id="li-startlorem" class="t-check" checked onchange="generate()">
        </div>

        <button class="t-btn full" onclick="generate()"><i class="fas fa-rotate-right"></i> Neu generieren</button>
    </div>

    <div class="t-panel">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;flex-wrap:wrap;gap:8px">
            <span id="li-stats" style="font-size:0.78rem;color:var(--muted);font-weight:700"></span>
            <div style="display:flex;gap:8px">
                <button class="t-btn ghost sm" onclick="copyOutput()"><i class="fas fa-copy"></i> Kopieren</button>
                <button class="t-btn ghost sm" onclick="downloadTxt()"><i class="fas fa-download"></i> .txt</button>
            </div>
        </div>
        <textarea class="li-output" id="li-out" readonly></textarea>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
let lang = 'lorem';

const LOREM = ['lorem','ipsum','dolor','sit','amet','consectetur','adipiscing','elit','sed','do','eiusmod','tempor','incididunt','ut','labore','et','dolore','magna','aliqua','enim','ad','minim','veniam','quis','nostrud','exercitation','ullamco','laboris','nisi','aliquip','ex','ea','commodo','consequat','duis','aute','irure','in','reprehenderit','voluptate','velit','esse','cillum','fugiat','nulla','pariatur','excepteur','sint','occaecat','cupidatat','non','proident','sunt','culpa','qui','officia','deserunt','mollit','anim','id','est','laborum','cras','mattis','purus','fermentum','maecenas','faucibus','mollis','interdum','pellentesque','ridiculus','mus','mauris','vitae','ultricies','leo','integer','malesuada','nunc','vel','risus','commodo','viverra','accumsan','lacus','facilisis','volutpat','egestas','dui','ornare','arcu','odio','sem','pharetra','diam','nisl','suscipit','bibendum','felis','dictum','tempor','ullamcorper','proin','libero','interdum','varius','vulputate','aliquet','porttitor','luctus','tortor','posuere','semper','justo','laoreet','cursus','donec','turpis','urna'];

const DE = ['der','die','das','ein','eine','und','oder','aber','weil','wenn','dann','auch','noch','schon','immer','nie','sehr','viel','gut','schlecht','groß','klein','neu','alt','lang','kurz','schnell','langsam','einfach','schwierig','wichtig','möglich','eigentlich','natürlich','besonders','jedoch','dennoch','trotzdem','deshalb','daher','zunächst','schließlich','außerdem','zudem','dabei','dadurch','demnach','jedenfalls','insgesamt','grundsätzlich','tatsächlich','beispielsweise','gleichzeitig','anschließend','inzwischen','zwischenzeitlich','folglich','hinzukommt','entsprechend','voraussichtlich','gegebenenfalls','angesichts','hinsichtlich','bezüglich','wohingegen','demgegenüber','nichtsdestotrotz','ungeachtet','inwieweit','sofern','sobald','solange','während','obwohl','wenngleich','als','wie','wo','was','wer','wen','wem','dessen','deren'];

function pick(arr) { return arr[Math.floor(Math.random()*arr.length)]; }
function cap(s) { return s.charAt(0).toUpperCase()+s.slice(1); }

function setLang(l, btn) {
    lang = l;
    document.querySelectorAll('.mode-tab').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    document.getElementById('li-out').classList.toggle('mono', l==='html');
    generate();
}

function getWord() { return pick(lang==='de' ? DE : LOREM); }

function makeSentence(avgLen) {
    const len = Math.max(4, Math.round(avgLen * (0.7 + Math.random()*0.6)));
    const words = Array.from({length:len}, getWord);
    if (words.length > 6 && Math.random()>0.5) {
        const pos = 3 + Math.floor(Math.random()*3);
        words[pos] += ',';
    }
    return cap(words.join(' '))+'.';
}

function makeParagraph(avgWordLen) {
    const sentCount = 3 + Math.floor(Math.random()*4);
    return Array.from({length:sentCount}, ()=>makeSentence(avgWordLen)).join(' ');
}

function generate() {
    const type   = document.getElementById('li-type').value;
    const count  = Math.min(50, Math.max(1, parseInt(document.getElementById('li-count').value)||3));
    const avgLen = Math.min(30, Math.max(5, parseInt(document.getElementById('li-wordlen').value)||12));
    const startLorem = document.getElementById('li-startlorem').checked && lang !== 'de';
    let parts = [];

    if (type === 'words') {
        const words = Array.from({length:count}, getWord);
        if (startLorem && words.length >= 2) { words[0]='Lorem'; words[1]='ipsum'; }
        parts = [words.join(' ')];
    } else if (type === 'sentences') {
        parts = Array.from({length:count}, ()=>makeSentence(avgLen));
        if (startLorem) parts[0] = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
    } else {
        parts = Array.from({length:count}, ()=>makeParagraph(avgLen));
        if (startLorem) parts[0] = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. '+makeParagraph(avgLen).split('.').slice(1).join('.').trim();
    }

    let result;
    if (lang === 'html') {
        result = parts.map(p => type==='words' ? `<p>${p}</p>` : (type==='sentences' ? `<p>${parts.join(' ')}</p>` : `<p>${p}</p>`)).join('\n');
        if (type === 'sentences') result = `<p>${parts.join(' ')}</p>`;
    } else {
        result = parts.join(type==='paragraphs' ? '\n\n' : ' ');
    }

    document.getElementById('li-out').value = result;
    const wordCount = result.trim().split(/\s+/).length;
    document.getElementById('li-stats').textContent = wordCount + ' Wörter · ' + result.length + ' Zeichen';
}

function copyOutput() {
    const val = document.getElementById('li-out').value;
    if (!val) return;
    navigator.clipboard.writeText(val);
    const btn = event.target.closest('button');
    const orig = btn.innerHTML;
    btn.innerHTML = '<i class="fas fa-check"></i> Kopiert!';
    setTimeout(()=>btn.innerHTML=orig, 1800);
}

function downloadTxt() {
    const val = document.getElementById('li-out').value;
    if (!val) return;
    const a = document.createElement('a');
    a.href = URL.createObjectURL(new Blob([val],{type:'text/plain;charset=utf-8'}));
    a.download = 'lorem-ipsum.txt';
    a.click(); URL.revokeObjectURL(a.href);
}

generate();
</script>

@include('tools._seo_content', ['toolSlug' => 'lorem-ipsum', 'toolName' => 'Lorem Ipsum Generator'])

@endsection