*
* Trigger buttons should have one of these IDs:
* - open-modal-btn
* - open-modal-btn-2
* - open-modal-btn-3
* Or add class: knic-open-modal
*/

(function() {
'use strict';

// Configuration - UPDATE THIS WITH YOUR N8N WEBHOOK URL
const CONFIG = {
n8nWebhookUrl: 'https://your-n8n-instance.com/webhook/knic-application',
maxElevatorPitchChars: 500,
maxOpportunityChars: 300,
maxBlockerChars: 300
};

let currentSlide = 0;
const totalSlides = 6;

const createModalHTML = () => {
return `

`;
};

const createStyles = () => {
const style = document.createElement('style');
style.textContent = `
/* Modal Styles */
.knic-modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.7);
z-index: 10000;
align-items: center;
justify-content: center;
padding: 20px;
overflow-y: auto;
}

.knic-modal-overlay.active {
display: flex;
}

.knic-modal {
background: white;
border-radius: 20px;
width: 100%;
max-width: 600px;
max-height: 90vh;
overflow-y: auto;
position: relative;
padding: 40px;
animation: knicModalIn 0.3s ease;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

@keyframes knicModalIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.knic-modal-close {
position: absolute;
top: 15px;
right: 20px;
background: none;
border: none;
font-size: 32px;
cursor: pointer;
color: #999;
line-height: 1;
padding: 0;
z-index: 10;
}

.knic-modal-close:hover {
color: #333;
}

/* Progress Bar */
.knic-progress-container {
margin-bottom: 30px;
}

.knic-progress-bar {
height: 8px;
background: #e0e0e0;
border-radius: 4px;
overflow: hidden;
}

.knic-progress-fill {
height: 100%;
background: linear-gradient(135deg, #00d4ff 0%, #0099cc 50%, #1a5276 100%);
width: 0%;
transition: width 0.4s ease;
border-radius: 4px;
}

.knic-progress-text {
text-align: center;
font-size: 14px;
color: #666;
margin-top: 10px;
font-weight: 600;
}

/* Carousel */
.knic-carousel {
position: relative;
overflow: hidden;
}

.knic-slide {
display: none;
animation: knicSlideIn 0.3s ease;
}

.knic-slide.active {
display: block;
}

@keyframes knicSlideIn {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}

.knic-slide h3 {
font-size: 26px;
margin: 0 0 8px 0;
color: #0099cc;
}

.knic-slide-intro {
font-size: 15px;
color: #666;
margin: 0 0 25px 0;
}

/* Form Styles */
.knic-form-group {
margin-bottom: 22px;
}

.knic-form-group label {
display: block;
font-weight: 600;
margin-bottom: 8px;
color: #1a1a1a;
font-size: 15px;
}

.knic-checkbox-group label {
display: flex;
align-items: flex-start;
cursor: pointer;
font-weight: normal;
}

.knic-checkbox-group input[type="checkbox"] {
margin-right: 10px;
margin-top: 3px;
width: 18px;
height: 18px;
cursor: pointer;
flex-shrink: 0;
}

.knic-form-group input[type="text"],
.knic-form-group input[type="email"],
.knic-form-group input[type="tel"],
.knic-form-group input[type="url"],
.knic-form-group select,
.knic-form-group textarea {
width: 100%;
padding: 12px 15px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 15px;
font-family: inherit;
transition: border-color 0.3s ease;
box-sizing: border-box;
}

.knic-form-group input:focus,
.knic-form-group select:focus,
.knic-form-group textarea:focus {
outline: none;
border-color: #0099cc;
box-shadow: 0 0 0 3px rgba(0, 153, 204, 0.1);
}

.knic-form-group textarea {
resize: vertical;
min-height: 100px;
}

.knic-char-count {
font-size: 12px;
color: #999;
text-align: right;
margin-top: 5px;
}

.knic-error {
display: block;
color: #dc3545;
font-size: 13px;
margin-top: 5px;
font-weight: 500;
}

.knic-form-group input.knic-field-error,
.knic-form-group select.knic-field-error,
.knic-form-group textarea.knic-field-error {
border-color: #dc3545;
}

/* Navigation Buttons */
.knic-nav-buttons {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 30px;
padding-top: 25px;
border-top: 2px solid #f0f0f0;
}

.knic-nav-btn {
padding: 12px 28px;
font-size: 16px;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
}

.knic-prev-btn {
background: #f0f0f0;
border: none;
color: #666;
}

.knic-prev-btn:hover {
background: #e0e0e0;
}

.knic-next-btn,
.knic-nav-buttons .knic-submit-btn {
background: linear-gradient(135deg, #00d4ff 0%, #0099cc 50%, #1a5276 100%);
border: none;
color: white;
}

.knic-next-btn:hover,
.knic-nav-buttons .knic-submit-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 153, 204, 0.4);
}

.knic-nav-buttons .knic-submit-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
box-shadow: none;
}

.knic-form-message {
margin-top: 20px;
padding: 15px;
border-radius: 8px;
font-size: 15px;
font-weight: 500;
text-align: center;
}

.knic-form-message.knic-success {
background: #d4edda;
color: #155724;
}

.knic-form-message.knic-error-msg {
background: #f8d7da;
color: #721c24;
}

body.knic-modal-open {
overflow: hidden;
}

@media (max-width: 768px) {
.knic-modal {
padding: 30px 20px;
margin: 10px;
max-height: 95vh;
}

.knic-nav-buttons {
flex-direction: column;
gap: 15px;
}

.knic-nav-btn {
width: 100%;
text-align: center;
}

.knic-prev-btn {
order: 2;
}
}
`;
return style;
};

// Validation
const validators = {
email: (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
url: (value) => {
if (!value) return true;
try { new URL(value); return true; } catch { return false; }
},
required: (value) => value && value.trim() !== ''
};

const showError = (fieldId, message) => {
const field = document.getElementById(fieldId);
const errorSpan = document.getElementById(`${fieldId}-error`);
if (field && errorSpan) {
field.classList.add('knic-field-error');
errorSpan.textContent = message;
}
};

const clearError = (fieldId) => {
const field = document.getElementById(fieldId);
const errorSpan = document.getElementById(`${fieldId}-error`);
if (field && errorSpan) {
field.classList.remove('knic-field-error');
errorSpan.textContent = '';
}
};

const validateField = (fieldId, fieldName, value, isRequired = false, validator = null) => {
clearError(fieldId);
if (isRequired && !validators.required(value)) {
showError(fieldId, `${fieldName} is required`);
return false;
}
if (value && validator && !validator(value)) {
showError(fieldId, `Please enter a valid ${fieldName.toLowerCase()}`);
return false;
}
return true;
};

const validateSlide = (slideIndex) => {
const form = document.getElementById('knic-application-form');
let isValid = true;

switch(slideIndex) {
case 0:
isValid = validateField('knic-full-name', 'Full name', form.fullName.value, true) && isValid;
isValid = validateField('knic-email', 'Email', form.email.value, true, validators.email) && isValid;
isValid = validateField('knic-phone', 'Phone', form.phone.value, true) && isValid;
isValid = validateField('knic-linkedin', 'LinkedIn', form.linkedin.value, false, validators.url) && isValid;
isValid = validateField('knic-location', 'Location', form.location.value, true) && isValid;
break;
case 1:
isValid = validateField('knic-company-name', 'Company name', form.companyName.value, true) && isValid;
isValid = validateField('knic-website', 'Website', form.website.value, false, validators.url) && isValid;
isValid = validateField('knic-industry', 'Industry', form.industry.value, true) && isValid;
if (form.industry.value === 'other') {
isValid = validateField('knic-industry-other', 'Industry', form.industryOther.value, true) && isValid;
}
isValid = validateField('knic-business-stage', 'Business stage', form.businessStage.value, true) && isValid;
break;
case 2:
isValid = validateField('knic-team-size', 'Team size', form.teamSize.value, true) && isValid;
isValid = validateField('knic-tech-team', 'Tech team', form.techTeam.value, true) && isValid;
isValid = validateField('knic-data-state', 'Data state', form.dataState.value, true) && isValid;
isValid = validateField('knic-ai-experience', 'AI experience', form.aiExperience.value, true) && isValid;
break;
case 3:
isValid = validateField('knic-elevator-pitch', 'Elevator pitch', form.elevatorPitch.value, true) && isValid;
isValid = validateField('knic-biggest-opportunity', 'Biggest opportunity', form.biggestOpportunity.value, true) && isValid;
break;
case 4:
isValid = validateField('knic-biggest-blocker', 'Biggest blocker', form.biggestBlocker.value, true) && isValid;
isValid = validateField('knic-implementation-readiness', 'Readiness', form.implementationReadiness.value, true) && isValid;
isValid = validateField('knic-investment-timeline', 'Timeline', form.investmentTimeline.value, true) && isValid;
break;
case 5:
if (!form.budgetConfirmed.checked) {
showError('knic-budget-confirmed', 'You must confirm your budget commitment');
isValid = false;
}
break;
}
return isValid;
};

const updateProgress = () => {
const percent = Math.round(((currentSlide + 1) / totalSlides) * 100);
const progressFill = document.getElementById('knic-progress-fill');
const progressPercent = document.getElementById('knic-progress-percent');
if (progressFill) progressFill.style.width = `${percent}%`;
if (progressPercent) progressPercent.textContent = percent;
};

const showSlide = (index) => {
const slides = document.querySelectorAll('.knic-slide');
slides.forEach((slide, i) => {
slide.classList.toggle('active', i === index);
});

const prevBtn = document.getElementById('knic-prev-btn');
const nextBtn = document.getElementById('knic-next-btn');
const submitBtn = document.getElementById('knic-submit-btn');

if (prevBtn) prevBtn.style.visibility = index === 0 ? 'hidden' : 'visible';

if (index === totalSlides - 1) {
if (nextBtn) nextBtn.style.display = 'none';
if (submitBtn) submitBtn.style.display = 'block';
} else {
if (nextBtn) nextBtn.style.display = 'block';
if (submitBtn) submitBtn.style.display = 'none';
}

currentSlide = index;
updateProgress();
};

const openModal = () => {
const overlay = document.getElementById('knic-modal-overlay');
if (overlay) {
overlay.classList.add('active');
document.body.classList.add('knic-modal-open');
currentSlide = 0;
showSlide(0);
}
};

const closeModal = () => {
const overlay = document.getElementById('knic-modal-overlay');
if (overlay) {
overlay.classList.remove('active');
document.body.classList.remove('knic-modal-open');
}
};

const handleSubmit = async (event) => {
event.preventDefault();

if (!validateSlide(currentSlide)) return;

const form = event.target;
const submitBtn = document.getElementById('knic-submit-btn');
const messageDiv = document.getElementById('knic-form-message');

if (messageDiv) messageDiv.style.display = 'none';

const formData = {
fullName: form.fullName.value.trim(),
email: form.email.value.trim(),
phone: form.phone.value.trim(),
linkedin: form.linkedin.value.trim(),
location: form.location.value,
companyName: form.companyName.value.trim(),
website: form.website.value.trim(),
industry: form.industry.value,
industryOther: form.industryOther ? form.industryOther.value.trim() : '',
businessStage: form.businessStage.value,
teamSize: form.teamSize.value,
techTeam: form.techTeam.value,
dataState: form.dataState.value.trim(),
aiExperience: form.aiExperience.value,
elevatorPitch: form.elevatorPitch.value.trim(),
biggestOpportunity: form.biggestOpportunity.value.trim(),
biggestBlocker: form.biggestBlocker.value.trim(),
implementationReadiness: form.implementationReadiness.value,
investmentTimeline: form.investmentTimeline.value,
budgetConfirmed: form.budgetConfirmed.checked,
referral: form.referral.value.trim(),
additionalInfo: form.additionalInfo.value.trim(),
submittedAt: new Date().toISOString()
};

if (submitBtn) {
submitBtn.disabled = true;
submitBtn.textContent = 'Submitting...';
}

try {
const response = await fetch(CONFIG.n8nWebhookUrl, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(formData)
});

if (!response.ok) throw new Error('Network error');

if (messageDiv) {
messageDiv.textContent = '✓ Application submitted! We\'ll be in touch within 3-5 business days.';
messageDiv.className = 'knic-form-message knic-success';
messageDiv.style.display = 'block';
}

setTimeout(() => {
closeModal();
form.reset();
currentSlide = 0;
showSlide(0);
if (messageDiv) messageDiv.style.display = 'none';
// Reset character counters
const counters = ['knic-elevator-pitch-count', 'knic-biggest-opportunity-count', 'knic-biggest-blocker-count'];
counters.forEach(id => {
const el = document.getElementById(id);
if (el) el.textContent = '0';
});
}, 3000);

} catch (error) {
console.error('Submission error:', error);
if (messageDiv) {
messageDiv.textContent = 'Error submitting. Please try again.';
messageDiv.className = 'knic-form-message knic-error-msg';
messageDiv.style.display = 'block';
}
} finally {
if (submitBtn) {
submitBtn.disabled = false;
submitBtn.textContent = 'Submit Application';
}
}
};

const setupCharacterCounters = () => {
const fields = [
{ id: 'knic-elevator-pitch', countId: 'knic-elevator-pitch-count' },
{ id: 'knic-biggest-opportunity', countId: 'knic-biggest-opportunity-count' },
{ id: 'knic-biggest-blocker', countId: 'knic-biggest-blocker-count' }
];
fields.forEach(({ id, countId }) => {
const field = document.getElementById(id);
const counter = document.getElementById(countId);
if (field && counter) {
field.addEventListener('input', () => counter.textContent = field.value.length);
}
});
};

const setupIndustryToggle = () => {
const industrySelect = document.getElementById('knic-industry');
const industryOtherGroup = document.getElementById('knic-industry-other-group');
if (industrySelect && industryOtherGroup) {
industrySelect.addEventListener('change', () => {
industryOtherGroup.style.display = industrySelect.value === 'other' ? 'block' : 'none';
});
}
};

const init = () => {
const rootElement = document.getElementById('knic-application-root');
if (!rootElement) {
console.error('KNiC Application: Root element #knic-application-root not found');
return;
}

// Add styles
document.head.appendChild(createStyles());

// Add modal HTML
rootElement.innerHTML = createModalHTML();

// Modal controls - bind to multiple possible trigger buttons
const triggerIds = ['open-modal-btn', 'open-modal-btn-2', 'open-modal-btn-3'];
triggerIds.forEach(id => {
const btn = document.getElementById(id);
if (btn) btn.addEventListener('click', openModal);
});

// Also bind to any element with class knic-open-modal
document.querySelectorAll('.knic-open-modal').forEach(btn => {
btn.addEventListener('click', openModal);
});

const closeBtn = document.getElementById('knic-modal-close');
if (closeBtn) closeBtn.addEventListener('click', closeModal);

const overlay = document.getElementById('knic-modal-overlay');
if (overlay) {
overlay.addEventListener('click', (e) => {
if (e.target.id === 'knic-modal-overlay') closeModal();
});
}

// Navigation
const nextBtn = document.getElementById('knic-next-btn');
if (nextBtn) {
nextBtn.addEventListener('click', () => {
if (validateSlide(currentSlide)) {
showSlide(currentSlide + 1);
}
});
}

const prevBtn = document.getElementById('knic-prev-btn');
if (prevBtn) {
prevBtn.addEventListener('click', () => {
showSlide(currentSlide - 1);
});
}

// Form
const form = document.getElementById('knic-application-form');
if (form) form.addEventListener('submit', handleSubmit);

setupCharacterCounters();
setupIndustryToggle();
updateProgress();

// Escape key
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') closeModal();
});

console.log('KNiC Application form initialized');
};

// Initialize when DOM is ready
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}

// Expose openModal globally for custom triggers
window.knicOpenApplicationModal = openModal;

})();