Embed

<div data-ao-widget-fi></div>

<style>
  /* Roboto 400/700 */
  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

  /* Typografia & layout */
  [data-ao-widget-fi] { font-family: Roboto, Arial, "Helvetica Neue", Helvetica, system-ui, -apple-system, Segoe UI, "Noto Sans"; color:#111827; font-size:14px; }
  .ao-wrap { max-width: 960px; margin: 0 auto; padding: 24px 16px; }
  .ao-card { background:#fff; border-radius:16px; box-shadow:0 2px 10px rgba(0,0,0,.06); padding:20px; }
  .ao-grid { display:grid; grid-template-columns: 1fr; gap:24px; }
  @media (min-width: 900px){ .ao-grid { grid-template-columns: 1fr 1fr; } } /* vierekkäin desktopilla */

  /* Typografia */
  .ao-h2 { font-size:24px; font-weight:700; margin:0 0 12px; font-family: Roboto, sans-serif; }
  .ao-label { display:block; font-size:14px; margin: 10px 0 6px; }
  .ao-input, .ao-select, .ao-textarea { width:100%; border:1px solid #e5e7eb; border-radius:12px; padding:10px 12px; font-size:14px; }

  /* Ruudukko vasemmalla */
  .ao-row { display:grid; grid-template-columns: 1fr; gap:12px; }
  @media (min-width: 520px){ .ao-row { grid-template-columns: 1fr 1fr; } }

  .ao-list { list-style: disc; padding-left: 18px; }
  .ao-flex { display:flex; justify-content:space-between; align-items:center; gap:12px; }
  .ao-hr { border:0; border-top:1px solid #e5e7eb; margin:16px 0; }
  .ao-total { font-weight:800; }

  /* Napit */
  .ao-btn { padding:10px 16px; border-radius:12px; border:1px solid #e5e7eb; background:#fff; cursor:pointer; font-weight:600; font-size:14px; }
  .ao-btn-primary { background:#8c3cda; color:#fff; border-color:#8c3cda; }
  .ao-btn-primary:hover { background:#7a2ec4; border-color:#7a2ec4; }

  .ao-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
  .ao-muted { color:#6b7280; font-size:14px; }
</style>

<script>
(() => {
  // Tuki useille upotuksille samalla sivulla:
  document.querySelectorAll('[data-ao-widget-fi]').forEach((root) => {
    const CURRENCY = 'EUR';
    const PRICING = {
      PT_RATE_PER_HOUR: 180,
      LECTURE_2_3H: 1890,
      LECTURE_5_7H: 2580,
      DURATION_HOURS: { '2_3': 3, '5_7': 6 }
    };
    const WORKSHOP_SECOND_PERSON_THRESHOLD = 8; // 1–8 hlö = vain perushinta

    const LECTURE_TOPICS = [
      'AI antaa siivet – johdantokokonaisuus',
      'AI alkaa oivalluksesta – kypsyysmittaus ja analyysi',
      'Ymmärrä datan tunne – tonaliteetti ja sentimenttianalyysi',
      'Laadi AI-strategia',
      'Muutos ja AI – vastarinnasta uteliaisuuteen',
      'Muu'
    ];
    const WORKSHOP_TOPICS = [
      'Promptaa kuin pro',
      'Rakenna AI-agentti/assistentti',
      'AI-etiikka ja turvallisuus',
      'Datasta oivallukseen',
      'Tulevaisuuden työkalupakki',
      'Muu'
    ];

    const $  = (sel) => root.querySelector(sel);
    const $$ = (sel) => Array.from(root.querySelectorAll(sel));
    const money  = (n) => new Intl.NumberFormat('fi-FI', { style:'currency', currency:CURRENCY }).format(n);
    const num    = (n) => new Intl.NumberFormat('fi-FI').format(n);
    const round2 = (n) => Math.round(n*100)/100;
    const fmtVat = (v) => { const s=v*100; return (Number.isInteger(s) ? s.toFixed(0) : s.toFixed(1)).replace('.', ','); };

    // --- Markup ---
    root.innerHTML = [
      '<div class="ao-wrap">',
      '  <div class="ao-grid">',
      '    <div class="ao-card">',
      '      <h2 class="ao-h2">Tarjoustiedot</h2>',
      '      <label class="ao-label">Nimi</label><input id="ao-name" class="ao-input" placeholder="Etunimi ja sukunimi"/>',
      '      <label class="ao-label">Sähköposti</label><input id="ao-email" type="email" class="ao-input" placeholder="nimi@yritys.fi"/>',
      '      <div class="ao-row">',
      '        <div><label class="ao-label">Toivottu päivämäärä</label><input id="ao-date" type="date" class="ao-input"/></div>',
      '        <div><label class="ao-label">Osallistujamäärä</label><input id="ao-people" type="number" min="1" value="1" class="ao-input"/></div>',
      '      </div>',
      '      <label class="ao-label">Kokonaisuus</label>',
      '      <select id="ao-product" class="ao-select">',
      '        <option value="lecture">Luento</option>',
      '        <option value="workshop">Workshop</option>',
      '        <option value="pt">PT-aika</option>',
      '      </select>',
      '      <div id="ao-extra" style="display:none">',
      '        <label class="ao-label">Laajuus</label>',
      '        <select id="ao-duration" class="ao-select">',
      '          <option value="2_3">2–3 h</option>',
      '          <option value="5_7">5–7 h</option>',
      '        </select>',
      '        <label class="ao-label">Teema</label>',
      '        <select id="ao-theme" class="ao-select"></select>',
      '        <p id="ao-theme-hint" class="ao-muted" style="display:none; margin-top:6px">Kirjoita toiveesi alla olevaan Huomiot-kenttään.</p>',
      '      </div>',
      '      <div id="ao-pt" style="display:none">',
      '        <label class="ao-label">PT-tunnit</label><input id="ao-pt-hours" type="number" min="1" value="1" class="ao-input"/>',
      '        <p class="ao-muted">Laskutus 180 €/h.</p>',
      '      </div>',
      '      <label class="ao-label">ALV</label>',
      '      <div class="ao-flex" style="justify-content:flex-start">',
      '        <label><input type="radio" name="ao-vat" value="0" checked/> 0 %</label>',
      '        <label style="margin-left:16px"><input type="radio" name="ao-vat" value="0.255"/> 25,5 %</label>',
      '      </div>',
      '      <label class="ao-label">Huomiot (valinnainen)</label><textarea id="ao-notes" rows="3" class="ao-textarea" placeholder="Esim. teema, paikka, tekniikka…"></textarea>',
      '    </div>',
      '    <div class="ao-card">',
      '      <h2 class="ao-h2">Yhteenveto</h2>',
      '      <div>',
      '        <div class="ao-flex"><span>Asiakas:</span><span id="ao-out-name"></span></div>',
      '        <div class="ao-flex"><span>Sähköposti:</span><span id="ao-out-email"></span></div>',
      '        <div class="ao-flex"><span>Päivämäärä:</span><span id="ao-out-date"></span></div>',
      '        <div class="ao-flex"><span>Osallistujat:</span><span id="ao-out-people">1</span></div>',
      '        <div class="ao-flex"><span>Kokonaisuus:</span><span id="ao-out-label"></span></div>',
      '      </div>',
      '      <hr class="ao-hr"/>',
      '      <div>',
      '        <p class="ao-muted" style="margin:0 0 6px">Kustannuserittely (alv ei sisälly):</p>',
      '        <ul id="ao-breakdown" class="ao-list"></ul>',
      '      </div>',
      '      <div style="margin-top:12px">',
      '        <div class="ao-flex"><span>Veroton summa</span><span id="ao-out-net" style="font-weight:600"></span></div>',
      '        <div class="ao-flex"><span>ALV (<span id="ao-out-vatp"></span> %)</span><span id="ao-out-vat" style="font-weight:600"></span></div>',
      '        <div class="ao-flex" style="font-size:16px"><span class="ao-total">YHTEENSÄ</span><span id="ao-out-total" class="ao-total"></span></div>',
      '        <p class="ao-muted" style="margin-top:6px">Tämä suuntaa-antava tarjous on voimassa 14 päivää tästä päivästä. AveoAI:n yleiset ehdot voimassa. Matkakulut sekä majoitus- ja ruokakulut lisätään.</p>',
      '      </div>',
      '      <div class="ao-actions">',
      '        <button id="ao-email-btn" class="ao-btn ao-btn-primary">Lähetä tarjouspyyntö</button>',
      '        <button id="ao-pdf" class="ao-btn">Tallenna PDF:nä</button>',
      '      </div>',
      '    </div>',
      '  </div>',
      '</div>'
    ].join('\n');

    // --- Tila ---
    const state = { name:'', email:'', date:'', people:1, product:'lecture', duration:'2_3', theme:'', ptHours:1, vatRate:0, notes:'' };

    // --- Apurit ---
    function fillSelect(el, items){
      el.innerHTML = items.map(t => '<option value="'+t.replace(/"/g,'&quot;')+'">'+t.replace(/</g,'&lt;')+'</option>').join('');
    }
    function buildQuote(){
      let label=''; let net=0; const breakdown=[];
      if (state.product==='pt'){
        label = 'PT-aika ('+state.ptHours+' h)';
        const pt = PRICING.PT_RATE_PER_HOUR * state.ptHours; net = pt;
        breakdown.push(['PT-aika '+state.ptHours+' h × '+num(PRICING.PT_RATE_PER_HOUR)+' €', pt]);
      } else if (state.product==='lecture'){
        const durLabel = state.duration==='2_3' ? '2–3 h' : '5–7 h';
        const lecture = state.duration==='2_3' ? PRICING.LECTURE_2_3H : PRICING.LECTURE_5_7H;
        label = 'Luento '+durLabel; net = lecture;
        breakdown.push(['Luento '+durLabel+' (kiinteä hinta)', lecture]);
      } else if (state.product==='workshop'){
        const durLabel = state.duration==='2_3' ? '2–3 h' : '5–7 h';
        const hours = PRICING.DURATION_HOURS[state.duration];
        const lecture = state.duration==='2_3' ? PRICING.LECTURE_2_3H : PRICING.LECTURE_5_7H;
        label = 'Työpaja '+durLabel; breakdown.push(['Työpaja '+durLabel, lecture]);
        let secondPt = 0;
        if (state.people > WORKSHOP_SECOND_PERSON_THRESHOLD){ secondPt = PRICING.PT_RATE_PER_HOUR * hours; }
        breakdown.push(['Lisähenkilö 180 €/h', secondPt]);
        net = lecture + secondPt;
      }
      const vat = round2(net * state.vatRate); const total = round2(net + vat);
      return { label, net:round2(net), vat, total, breakdown };
    }

    function updateThemeOptions(){
      const items = state.product==='lecture' ? LECTURE_TOPICS : WORKSHOP_TOPICS;
      fillSelect($('#ao-theme'), items);
    }

    function render(){
      const q = buildQuote();
      $('#ao-out-name').textContent   = state.name   || '—';
      $('#ao-out-email').textContent  = state.email  || '—';
      $('#ao-out-date').textContent   = state.date   || '—';
      $('#ao-out-people').textContent = String(state.people || 1);
      $('#ao-out-label').textContent  = q.label + (state.theme ? ' – '+state.theme : '');
      $('#ao-breakdown').innerHTML    = q.breakdown.map(([lbl,val])=>'<li class="ao-flex"><span>'+lbl+'</span><span style="font-weight:600">'+money(val)+'</span></li>').join('');
      $('#ao-out-net').textContent    = money(q.net);
      $('#ao-out-vatp').textContent   = fmtVat(state.vatRate);
      $('#ao-out-vat').textContent    = money(q.vat);
      $('#ao-out-total').textContent  = money(q.total);

      const showExtra = (state.product==='lecture' || state.product==='workshop');
      $('#ao-extra').style.display = showExtra ? '' : 'none';
      $('#ao-pt').style.display    = state.product==='pt' ? '' : 'none';
      $('#ao-theme-hint').style.display = state.theme==='Muu' ? '' : 'none';
    }

    // Init
    updateThemeOptions();
    render();

    // Kuuntelijat – mobiilivarmat
    $('#ao-name').addEventListener('input',  e=>{ state.name  = e.target.value; render(); });
    $('#ao-email').addEventListener('input', e=>{ state.email = e.target.value; render(); });
    $('#ao-date').addEventListener('input',  e=>{ state.date  = e.target.value; render(); });
    $('#ao-date').addEventListener('change', e=>{ state.date  = e.target.value; render(); });
    $('#ao-people').addEventListener('input',e=>{ state.people= Math.max(1, parseInt(e.target.value||'1',10)); render(); });

    $('#ao-product').addEventListener('change', e=>{
      state.product = e.target.value;
      if(state.product!=='pt'){ state.ptHours=1; }
      updateThemeOptions(); render();
    });
    $('#ao-duration').addEventListener('change', e=>{ state.duration = e.target.value; render(); });
    $('#ao-theme').addEventListener('change',   e=>{ state.theme    = e.target.value; render(); });
    const elPtHours = $('#ao-pt-hours');
    if (elPtHours) elPtHours.addEventListener('input', e=>{ state.ptHours = Math.max(1, parseInt(e.target.value||'1',10)); render(); });
    $('#ao-notes').addEventListener('input', e=>{ state.notes = e.target.value; });

    $$('input[name="ao-vat"]').forEach(r=>{
      r.addEventListener('change', ()=>{
        const sel = root.querySelector('input[name="ao-vat"]:checked');
        state.vatRate = parseFloat(sel.value||'0');
        render();
      });
    });

    // Toiminnot
    $('#ao-email-btn').addEventListener('click', ()=>{
      const q = buildQuote();
      const lines = [];
      lines.push('AveoAI – Tarjous');
      lines.push('Asiakas: ' + (state.name  || '-'));
      lines.push('Sähköposti: ' + (state.email || '-'));
      lines.push('Päivämäärä: ' + (state.date  || '-'));
      lines.push('Osallistujat: ' + state.people);
      lines.push('Kokonaisuus: ' + q.label + (state.theme ? ' – ' + state.theme : ''));
      lines.push('');
      lines.push('Kustannuserittely (alv ei sisälly)');
      q.breakdown.forEach(([lbl,val])=> lines.push('- ' + lbl + ': ' + money(val)));
      lines.push('Veroton summa: ' + money(q.net));
      lines.push('ALV (' + fmtVat(state.vatRate) + ' %): ' + money(q.vat));
      lines.push('YHTEENSÄ: ' + money(q.total));
      if (state.notes){ lines.push(''); lines.push('Huomiot:'); lines.push(state.notes); }

      const body = encodeURIComponent(lines.join('\n'));
      const subject = encodeURIComponent('Tarjouspyyntö – AveoAI');
      const mailto = 'mailto:charlotta@aveo.fi?subject=' + subject + '&body=' + body;
      window.location.href = mailto;
    });

    $('#ao-pdf').addEventListener('click', ()=>{ window.print(); });
  });
})();
</script>

AveoAI

AveoAI erbjuder nordiska organisationer en kristallklar AI-strategi, praktisk coaching och fokus på människan. Det stärker teamets välbefinnande och produktivitet.