Embed

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

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

  /* Typography & layout */
  [data-ao-widget-en] { 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; } } /* side-by-side on desktop */

  /* Type */
  .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; }

  /* Left card grid */
  .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; }

  /* Buttons */
  .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>
(() => {
  // Support multiple embeds on the same page:
  document.querySelectorAll('[data-ao-widget-en]').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 participants = base price only

    const LECTURE_TOPICS = [
      'AI gives you wings – introduction',
      'AI starts with insight – maturity assessment & analysis',
      'Understand the feeling in the data – tone & sentiment analysis',
      'Create an AI strategy',
      'AI in change – from resistance to curiosity',
      'Other'
    ];
    const WORKSHOP_TOPICS = [
      'Prompt like a pro',
      'Build an AI agent/assistant',
      'AI ethics & safety',
      'From data to insight',
      'Toolbox for the future',
      'Other'
    ];

    const $  = (sel) => root.querySelector(sel);
    const $$ = (sel) => Array.from(root.querySelectorAll(sel));
    const money  = (n) => new Intl.NumberFormat('en-GB', { style:'currency', currency:CURRENCY }).format(n);
    const num    = (n) => new Intl.NumberFormat('en-GB').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); };

    // --- Markup ---
    root.innerHTML = [
      '<div class="ao-wrap">',
      '  <div class="ao-grid">',
      '    <div class="ao-card">',
      '      <h2 class="ao-h2">Quote details</h2>',
      '      <label class="ao-label">Name</label><input id="ao-name" class="ao-input" placeholder="First and last name"/>',
      '      <label class="ao-label">Email</label><input id="ao-email" type="email" class="ao-input" placeholder="name@company.com"/>',
      '      <div class="ao-row">',
      '        <div><label class="ao-label">Preferred date</label><input id="ao-date" type="date" class="ao-input"/></div>',
      '        <div><label class="ao-label">Participants</label><input id="ao-people" type="number" min="1" value="1" class="ao-input"/></div>',
      '      </div>',
      '      <label class="ao-label">Setup</label>',
      '      <select id="ao-product" class="ao-select">',
      '        <option value="lecture">Lecture</option>',
      '        <option value="workshop">Workshop</option>',
      '        <option value="pt">PT time</option>',
      '      </select>',
      '      <div id="ao-extra" style="display:none">',
      '        <label class="ao-label">Duration</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">Theme</label>',
      '        <select id="ao-theme" class="ao-select"></select>',
      '        <p id="ao-theme-hint" class="ao-muted" style="display:none; margin-top:6px">Write your wishes in the Notes field below.</p>',
      '      </div>',
      '      <div id="ao-pt" style="display:none">',
      '        <label class="ao-label">PT hours</label><input id="ao-pt-hours" type="number" min="1" value="1" class="ao-input"/>',
      '        <p class="ao-muted">Charged €180/h.</p>',
      '      </div>',
      '      <label class="ao-label">VAT</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">Notes (optional)</label><textarea id="ao-notes" rows="3" class="ao-textarea" placeholder="E.g., theme, location, tech…"></textarea>',
      '    </div>',
      '    <div class="ao-card">',
      '      <h2 class="ao-h2">Summary</h2>',
      '      <div>',
      '        <div class="ao-flex"><span>Client:</span><span id="ao-out-name"></span></div>',
      '        <div class="ao-flex"><span>Email:</span><span id="ao-out-email"></span></div>',
      '        <div class="ao-flex"><span>Date:</span><span id="ao-out-date"></span></div>',
      '        <div class="ao-flex"><span>Participants:</span><span id="ao-out-people">1</span></div>',
      '        <div class="ao-flex"><span>Setup:</span><span id="ao-out-label"></span></div>',
      '      </div>',
      '      <hr class="ao-hr"/>',
      '      <div>',
      '        <p class="ao-muted" style="margin:0 0 6px">Cost breakdown (excl. VAT):</p>',
      '        <ul id="ao-breakdown" class="ao-list"></ul>',
      '      </div>',
      '      <div style="margin-top:12px">',
      '        <div class="ao-flex"><span>Net amount</span><span id="ao-out-net" style="font-weight:600"></span></div>',
      '        <div class="ao-flex"><span>VAT (<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">TOTAL</span><span id="ao-out-total" class="ao-total"></span></div>',
      '        <p class="ao-muted" style="margin-top:6px">This indicative quote is valid for 14 days from today. Subject to AveoAI’s general terms. Travel expenses as well as meals and accomodation will be added to cost.</p>',
      '      </div>',
      '      <div class="ao-actions">',
      '        <button id="ao-email-btn" class="ao-btn ao-btn-primary">Send quote request</button>',
      '        <button id="ao-pdf" class="ao-btn">Save as PDF</button>',
      '      </div>',
      '    </div>',
      '  </div>',
      '</div>'
    ].join('\n');

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

    // --- Helpers ---
    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 time ('+state.ptHours+' h)';
        const pt = PRICING.PT_RATE_PER_HOUR * state.ptHours; net = pt;
        breakdown.push(['PT time '+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 = 'Lecture '+durLabel; net = lecture;
        breakdown.push(['Lecture '+durLabel+' (fixed price)', 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 = 'Workshop '+durLabel; breakdown.push(['Workshop '+durLabel, lecture]);
        let secondPt = 0;
        if (state.people > WORKSHOP_SECOND_PERSON_THRESHOLD){ secondPt = PRICING.PT_RATE_PER_HOUR * hours; }
        breakdown.push(['Additional person €118/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==='Other' ? '' : 'none';
    }

    // Init
    updateThemeOptions();
    render();

    // Listeners – mobile-safe
    $('#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();
      });
    });

    // Actions
    $('#ao-email-btn').addEventListener('click', ()=>{
      const q = buildQuote();
      const lines = [];
      lines.push('AveoAI – Quote');
      lines.push('Client: ' + (state.name  || '-'));
      lines.push('Email: ' + (state.email || '-'));
      lines.push('Date: ' + (state.date  || '-'));
      lines.push('Participants: ' + state.people);
      lines.push('Setup: ' + q.label + (state.theme ? ' – ' + state.theme : ''));
      lines.push('');
      lines.push('Cost breakdown (excl. VAT)');
      q.breakdown.forEach(([lbl,val])=> lines.push('- ' + lbl + ': ' + money(val)));
      lines.push('Net amount: ' + money(q.net));
      lines.push('VAT (' + fmtVat(state.vatRate) + '%): ' + money(q.vat));
      lines.push('TOTAL: ' + money(q.total));
      if (state.notes){ lines.push(''); lines.push('Notes:'); lines.push(state.notes); }

      const body = encodeURIComponent(lines.join('\n'));
      const subject = encodeURIComponent('Quote request – 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.