import {projectCost,businessCost,styleResult} from './calculations.mjs';
const euro=v=>v===null?'Nicht berechenbar':new Intl.NumberFormat('de-DE',{style:'currency',currency:'EUR'}).format(v);
const menu=document.querySelector('.menu-toggle'),nav=document.querySelector('#navigation');
menu?.addEventListener('click',()=>{const open=menu.getAttribute('aria-expanded')!=='true';menu.setAttribute('aria-expanded',String(open));menu.setAttribute('aria-label',open?'Menü schließen':'Menü öffnen');nav.classList.toggle('open',open)});
document.addEventListener('keydown',e=>{if(e.key==='Escape'&&nav?.classList.contains('open')){nav.classList.remove('open');menu.setAttribute('aria-expanded','false');menu.setAttribute('aria-label','Menü öffnen');menu.focus()}});
const project=document.querySelector('#projekt');
function read(section,prefix=''){return Object.fromEntries([...section.querySelectorAll('input[type=number]')].map(input=>[input.id.replace(prefix,''),Number(input.value)||0]))}
function inputs(section,callback){section.querySelectorAll('input[type=number]').forEach(input=>{input.addEventListener('input',()=>{if(!input.validity.valid){section.querySelector('.big-number').textContent='Bitte Eingaben prüfen';return}callback()});input.addEventListener('change',()=>{const min=Number(input.min)||0,max=Number(input.max)||1e6;let value=Math.min(max,Math.max(min,Number(input.value)||0));if(input.step==='1')value=Math.round(value);input.value=String(value);callback()})})}
if(project){const defaults=read(project);const labels={furniture:'Möbel',decor:'Dekoration',light:'Beleuchtung',transport:'Transport',photo:'Fotografie',other:'Sonstige Kosten'};const update=()=>{const r=projectCost(read(project));project.querySelector('.big-number').textContent=euro(r.total);const dd=project.querySelectorAll('.result dl:first-of-type dd');dd[0].textContent=euro(r.room);dd[1].textContent=euro(r.area);project.querySelectorAll('details dd').forEach((el,i)=>el.textContent=euro(r.parts[i].value));const chart=project.querySelector('.chart');chart.replaceChildren();for(const part of r.parts){const row=document.createElement('div');row.className='aio-bar';const label=document.createElement('span');label.textContent=labels[part.key];const container=document.createElement('div');const bar=document.createElement('i');bar.style.width=(r.total?part.value/r.total*100:0)+'%';const value=document.createElement('small');value.textContent=euro(part.value);container.append(bar,value);row.append(label,container);chart.append(row)}};inputs(project,update);project.querySelector('button').addEventListener('click',()=>{for(const [k,v]of Object.entries(defaults))project.querySelector('#'+k).value=v;update()});update()}
const business=document.querySelector('#business');
if(business){const defaults=read(business,'b-');const update=()=>{const r=businessCost(read(business,'b-'));const big=business.querySelector('.big-number');big.textContent=euro(r.result);big.classList.toggle('negative',r.result<0);const values=[euro(r.revenue),euro(r.cost),r.breakEven===null?'Nicht erreichbar':r.breakEven+(r.breakEven===1?' Auftrag':' Aufträge'),r.hours.toLocaleString('de-DE')+' h',euro(r.hourly),euro(r.economic)];business.querySelectorAll('.result dl dd').forEach((el,i)=>el.textContent=values[i]);let note=business.querySelector('[data-capacity]');if(!note){note=document.createElement('p');note.dataset.capacity='';note.className='notice';note.textContent='Die geplante Auslastung überschreitet Ihre verfügbare Zeit.';business.querySelector('.result').append(note)}note.hidden=r.capacity};inputs(business,update);business.querySelectorAll('.scenarios button').forEach((b,i)=>b.addEventListener('click',()=>{for(const[k,v]of Object.entries({...defaults,orders:[1,3,6][i]}))business.querySelector('#b-'+k).value=v;update()}));update()}
const styles=[['Modern','Klare Formen mit ausgewählten Kontrasten.','Glas, lackiertes Holz, Metall',['#dedbd3','#333b38','#b4b6b3'],'Setzen Sie einen Schwerpunkt und wiederholen Sie eine Akzentfarbe.'],['Skandinavisch','Helle Flächen, freundliche Textilien und natürliche Materialien.','Helles Holz, Baumwolle, Wolle',['#f2eee6','#c4b18e','#a5b8ab'],'Kombinieren Sie warmes Licht mit pflegeleichten hellen Textilien.'],['Minimalistisch','Wenige bewusst gewählte Stücke und ruhige Flächen.','Glatte Oberflächen, Leinen, mattes Metall',['#f5f3ed','#b9b9b0','#53564f'],'Prüfen Sie bei jedem Gegenstand Funktion und benötigten Stauraum.'],['Japandi','Natürliche Wärme trifft reduzierte Formen.','Eiche, Leinen, Keramik',['#d8cbb4','#817b62','#363c33'],'Nutzen Sie fühlbare Texturen und lassen Sie Zwischenräume frei.'],['Klassisch','Ausgewogene Proportionen und vertraute, zeitlose Formen.','Dunkles Holz, strukturierte Stoffe, Messing',['#e5dccb','#6b725e','#8d6244'],'Ordnen Sie einzelne Elemente symmetrisch an, ohne alles zu verdoppeln.']];
document.querySelectorAll('.quiz').forEach(quiz=>{const form=quiz.querySelector('form');form.addEventListener('submit',e=>{e.preventDefault();if(!form.reportValidity())return;const answers=[...form.querySelectorAll('input:checked')].map(input=>Number(input.value));if(answers.length!==6)return;const [name,text,materials,colors,tip]=styles[styleResult(answers)];const result=document.createElement('div');result.className='style-result';result.setAttribute('role','status');result.tabIndex=-1;result.innerHTML=`<p class="eyebrow">Ihre Stilrichtung</p><h3>${name}</h3><p>${text}</p><p><b>Materialien:</b> ${materials}</p><div class="swatches">${colors.map(c=>`<span style="background:${c}" title="${c}"></span>`).join('')}</div><p>${tip}</p><p>Probieren Sie Materialien im tatsächlichen Licht aus. Beginnen Sie mit einem Raum und nutzen Sie vorhandene Möbel weiter.</p><p class="small">Die häufigste Stilpräferenz gewinnt. Bei Gleichstand wird die erste passende Stilrichtung angezeigt; Mischformen sind ebenso sinnvoll.</p><button type="button" class="button outline">Noch einmal starten</button>`;form.hidden=true;quiz.append(result);result.querySelector('button').addEventListener('click',()=>{result.remove();form.reset();form.hidden=false;form.querySelector('input').focus()});result.focus()})});
document.querySelectorAll('[data-contact]').forEach(form=>{form.addEventListener('submit',e=>{e.preventDefault();if(!form.reportValidity())return;const status=form.querySelector('[role=status]');status.textContent='Die Eingaben sind vollständig. Es wurde keine Nachricht gesendet. Bitte kontaktieren Sie uns per E-Mail oder Telefon.';status.classList.add('status-message');status.tabIndex=-1;status.focus()})});