<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Origami Agentic Solutions - Business analysis, project discovery, and AI automation solutions. Folding chaos into clarity.">
    <title>Origami Agentic Solutions | Business & AI Consulting</title>
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <nav class="navbar">
        <div class="nav-container">
            <a href="#" class="logo">
                <svg class="logo-icon" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="32" cy="32" r="26" fill="none" stroke="#ffffff" stroke-width="1.5"/>
                    <path d="M32 8L18 46L32 34Z" fill="#ffffff" fill-opacity="0.4"/>
                    <path d="M32 8L46 46L32 34Z" fill="#ffffff"/>
                    <path d="M32 34L18 46L32 54L46 46Z" fill="#ffffff" fill-opacity="0.25"/>
                    <path d="M32 8L18 46L32 54L46 46Z" fill="none" stroke="#ffffff" stroke-width="1.5" stroke-linejoin="round"/>
                    <path d="M32 8L32 54" stroke="#ffffff" stroke-width="1.5"/>
                </svg>
                <span class="logo-text">
                    <span class="logo-name">Origami Agentic</span>
                    <span class="logo-suffix">Solutions</span>
                </span>
            </a>
            <button type="button" class="nav-toggle" aria-label="Toggle menu">
                <span></span>
                <span></span>
                <span></span>
            </button>
            <ul class="nav-links">
                <li><a href="#services">Services</a></li>
                <li><a href="#products">Products</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact" class="nav-cta">Get in Touch</a></li>
            </ul>
        </div>
    </nav>

    <section class="hero">
        <div class="hero-bg">
            <div class="fold fold-1"></div>
            <div class="fold fold-2"></div>
            <div class="fold fold-3"></div>
            <div class="fold fold-4"></div>
        </div>
        <div class="hero-content">
            <div class="hero-logo">
                <div class="hero-logo-circle">
                    <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="32" cy="32" r="26" fill="none" stroke="#ffffff" stroke-width="1.5"/>
                    </svg>
                </div>
                <div class="hero-logo-plane">
                    <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M32 8L18 46L32 34Z" fill="#ffffff" fill-opacity="0.5"/>
                        <path d="M32 8L46 46L32 34Z" fill="#ffffff"/>
                        <path d="M32 34L18 46L32 54L46 46Z" fill="#ffffff" fill-opacity="0.3"/>
                        <path d="M32 8L18 46L32 54L46 46Z" fill="none" stroke="#ffffff" stroke-width="1.5" stroke-linejoin="round"/>
                        <path d="M32 8L32 54" stroke="#ffffff" stroke-width="1.5"/>
                    </svg>
                </div>
            </div>
            <h1>folding chaos into clarity</h1>
            <p class="hero-subtitle">ai-first. human-refined.</p>
            <a href="#contact" class="btn btn-primary">
                <span class="btn-fold btn-fold-tl"></span>
                <span class="btn-fold btn-fold-br"></span>
                <span class="btn-text">Join Waitlist</span>
            </a>
        </div>
    </section>

    <section id="services" class="services">
        <div class="container">
            <h2>What We're Building</h2>
            <p class="section-subtitle">Game-changing services launching soon</p>

            <div class="rolodex-container">
                <button type="button" class="rolodex-nav rolodex-prev" aria-label="Previous">‹</button>

                <div class="rolodex-viewport">
                    <div class="rolodex-track">
                        <!-- Card 1: Agentic Analysis -->
                        <div class="service-card" data-index="0">
                            <div class="card-inner">
                                <div class="card-front">
                                    <span class="coming-soon-badge">Coming Soon</span>
                                    <div class="service-icon">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                            <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                                            <path d="M10 7v6M7 10h6"/>
                                        </svg>
                                    </div>
                                    <h3>Agentic Analysis</h3>
                                    <p>AI agents that dive deep into your operations—uncovering hidden inefficiencies and opportunities humans miss.</p>
                                </div>
                                <div class="card-back">
                                    <h3>Agentic Analysis</h3>
                                    <p>Imagine AI agents systematically analyzing your workflows, data pipelines, and team dynamics while you sleep. Insights that would take consultants weeks, delivered in days. Be first in line when we launch.</p>
                                    <a href="#contact" class="card-cta">Get Early Access</a>
                                </div>
                            </div>
                        </div>

                        <!-- Card 2: Rapid AI Prototyping -->
                        <div class="service-card" data-index="1">
                            <div class="card-inner">
                                <div class="card-front">
                                    <span class="coming-soon-badge">Coming Soon</span>
                                    <div class="service-icon">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                            <path d="M13 10V3L4 14h7v7l9-11h-7z"/>
                                        </svg>
                                    </div>
                                    <h3>Rapid AI Prototyping</h3>
                                    <p>From idea to working demo faster than you can schedule a kickoff meeting. See your vision come alive.</p>
                                </div>
                                <div class="card-back">
                                    <h3>Rapid AI Prototyping</h3>
                                    <p>We're perfecting a process that turns your concepts into testable prototypes at unprecedented speed. Touch and test your vision before committing to full development. Fail fast, learn faster, ship fastest.</p>
                                    <a href="#contact" class="card-cta">Get Early Access</a>
                                </div>
                            </div>
                        </div>

                        <!-- Card 3: AI Automation -->
                        <div class="service-card" data-index="2">
                            <div class="card-inner">
                                <div class="card-front">
                                    <span class="coming-soon-badge">Coming Soon</span>
                                    <div class="service-icon">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                            <path d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                                            <path d="M12 8v2m0 2h.01"/>
                                        </svg>
                                    </div>
                                    <h3>AI Automation</h3>
                                    <p>Stop paying humans to do robot work. Custom AI that handles tedious tasks while your team focuses on what matters.</p>
                                </div>
                                <div class="card-back">
                                    <h3>AI Automation</h3>
                                    <p>We're building automations that eliminate the repetitive tasks draining your team's energy. Reclaim hours every week. Join the waitlist to be notified when we're ready to transform your workflow.</p>
                                    <a href="#contact" class="card-cta">Get Early Access</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <button type="button" class="rolodex-nav rolodex-next" aria-label="Next">›</button>

                <div class="rolodex-dots">
                    <button type="button" class="rolodex-dot active" data-index="0" aria-label="Go to card 1"></button>
                    <button type="button" class="rolodex-dot" data-index="1" aria-label="Go to card 2"></button>
                    <button type="button" class="rolodex-dot" data-index="2" aria-label="Go to card 3"></button>
                </div>
            </div>
        </div>
    </section>

    <section id="products" class="products">
        <div class="container">
            <h2>AI Agents</h2>
            <p class="section-subtitle">Meet the autonomous specialists in final development</p>

            <div class="rolodex-container" id="products-rolodex">
                <button type="button" class="rolodex-nav rolodex-prev" aria-label="Previous">‹</button>

                <div class="rolodex-viewport">
                    <div class="rolodex-track">
                        <!-- Card 1: VERA -->
                        <div class="product-card" data-index="0">
                            <div class="card-inner">
                                <div class="card-front">
                                    <span class="coming-soon-badge">In Development</span>
                                    <div class="product-avatar">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                            <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                        </svg>
                                    </div>
                                    <h3>VERA</h3>
                                    <p class="product-subtitle">Verification & Regression Authority</p>
                                    <p>Autonomous QA that validates, tests, and fixes bugs while you sleep. No more manual testing bottlenecks.</p>
                                </div>
                                <div class="card-back">
                                    <h3>VERA</h3>
                                    <p>We're finalizing an AI that handles your entire QA pipeline: 3-tier validation, auto-generated tests, cryptographic attestations, and autonomous bug fixing. When something breaks, VERA fixes it. Be among the first to deploy her.</p>
                                    <a href="#contact" class="card-cta">Reserve Your Spot</a>
                                </div>
                            </div>
                        </div>

                        <!-- Card 2: AIDEN -->
                        <div class="product-card" data-index="1">
                            <div class="card-inner">
                                <div class="card-front">
                                    <span class="coming-soon-badge">In Development</span>
                                    <div class="product-avatar">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                            <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/>
                                        </svg>
                                    </div>
                                    <h3>AIDEN</h3>
                                    <p class="product-subtitle">AI-Driven Enterprise Navigator</p>
                                    <p>Autonomous PM that transforms visions into sprint-ready backlogs in minutes—not weeks of grooming sessions.</p>
                                </div>
                                <div class="card-back">
                                    <h3>AIDEN</h3>
                                    <p>We're building a product manager that never sleeps. 6 specialized agents decompose your vision into epics, features, and tasks—complete with acceptance criteria. Skip weeks of planning meetings. Get notified when AIDEN is ready.</p>
                                    <a href="#contact" class="card-cta">Reserve Your Spot</a>
                                </div>
                            </div>
                        </div>

                        <!-- Card 3: HALO -->
                        <div class="product-card" data-index="2">
                            <div class="card-inner">
                                <div class="card-front">
                                    <span class="coming-soon-badge">In Development</span>
                                    <div class="product-avatar">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                            <path d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                                        </svg>
                                    </div>
                                    <h3>HALO</h3>
                                    <p class="product-subtitle">Autonomous Threat Protection</p>
                                    <p>Your cybersecurity guardian. 12 AI agents form a protective ring, detecting and neutralizing threats before they reach you.</p>
                                </div>
                                <div class="card-back">
                                    <h3>HALO</h3>
                                    <p>A swarm of 12 specialized AI agents working 24/7 to protect you. 5-tier response escalation. Self-improving threat detection. Multi-source intelligence. We're putting the finishing touches on your autonomous security team.</p>
                                    <a href="#contact" class="card-cta">Reserve Your Spot</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <button type="button" class="rolodex-nav rolodex-next" aria-label="Next">›</button>

                <div class="rolodex-dots">
                    <button type="button" class="rolodex-dot active" data-index="0" aria-label="Go to VERA"></button>
                    <button type="button" class="rolodex-dot" data-index="1" aria-label="Go to AIDEN"></button>
                    <button type="button" class="rolodex-dot" data-index="2" aria-label="Go to HALO"></button>
                </div>
            </div>
        </div>
    </section>

    <section id="about" class="about">
        <div class="about-fold"></div>
        <div class="container">
            <div class="about-content">
                <h2>About Origami Agentic Solutions</h2>
                <p>The era of AI has transformed what's possible in product delivery. Those who deploy it effectively will thrive. Those who resist will fall behind. AI doesn't think sequentially like humans—and agentic swarms don't storm before they form. At Origami Agentic Solutions, we deliver solutions sooner and with fewer resources than traditional project teams. Guaranteed.</p>
                <p>We bring nearly three decades of experience in software delivery, technology optimization, and harmonizing teams to help organizations navigate complexity with confidence.</p>
                <p>Whether you're streamlining operations, launching a new initiative, or exploring how AI can transform your workflow, we're here to guide the way.</p>
            </div>
        </div>
    </section>

    <footer id="contact" class="footer">
        <div class="footer-fold"></div>
        <div class="container">
            <div class="footer-content">
                <svg class="footer-logo" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="32" cy="32" r="26" fill="none" stroke="#666666" stroke-width="1.5"/>
                    <path d="M32 8L18 46L32 34Z" fill="#666666" fill-opacity="0.4"/>
                    <path d="M32 8L46 46L32 34Z" fill="#666666"/>
                    <path d="M32 34L18 46L32 54L46 46Z" fill="#666666" fill-opacity="0.25"/>
                    <path d="M32 8L18 46L32 54L46 46Z" fill="none" stroke="#666666" stroke-width="1.5" stroke-linejoin="round"/>
                    <path d="M32 8L32 54" stroke="#666666" stroke-width="1.5"/>
                </svg>
                <p>&copy; 2026 Origami Agentic Solutions LLC. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <!-- Chat Widget -->
    <button type="button" id="chat-fab" class="chat-fab" aria-label="Open chat">
        <svg class="chat-fab-icon" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M32 8L18 46L32 34Z" fill="#ffffff" fill-opacity="0.5"/>
            <path d="M32 8L46 46L32 34Z" fill="#ffffff"/>
            <path d="M32 34L18 46L32 54L46 46Z" fill="#ffffff" fill-opacity="0.3"/>
        </svg>
        <svg class="chat-fab-close" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M6 18L18 6M6 6l12 12"/>
        </svg>
    </button>

    <div id="chat-window" class="chat-window">
        <div class="chat-header">
            <div class="chat-header-info">
                <svg class="chat-header-icon" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M32 8L18 46L32 34Z" fill="#ffffff" fill-opacity="0.5"/>
                    <path d="M32 8L46 46L32 34Z" fill="#ffffff"/>
                    <path d="M32 34L18 46L32 54L46 46Z" fill="#ffffff" fill-opacity="0.3"/>
                </svg>
                <span>Chat with Origami</span>
            </div>
            <button type="button" class="chat-close" aria-label="Close chat">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>
        <div class="chat-messages" id="chat-messages">
            <div class="chat-message assistant">
                <div class="chat-bubble">Hi! I'm the Origami assistant. How can I help you learn about our AI services and products?</div>
            </div>
        </div>
        <div id="chat-contact-form" class="chat-contact-form hidden">
            <p>Share your info and we'll follow up!</p>
            <input type="text" id="contact-name" class="chat-input" placeholder="Your name" autocomplete="name">
            <input type="email" id="contact-email" class="chat-input" placeholder="Your email" autocomplete="email">
            <div class="chat-contact-buttons">
                <button type="button" id="contact-submit" class="btn-contact-submit">Send</button>
                <button type="button" id="contact-cancel" class="btn-contact-cancel">Cancel</button>
            </div>
        </div>
        <div class="chat-input-area">
            <button type="button" id="chat-contact-btn" class="chat-contact-btn" aria-label="Share contact info" title="Share your contact info">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                    <circle cx="12" cy="7" r="4"/>
                </svg>
            </button>
            <input type="text" id="chat-input" class="chat-input" placeholder="Ask about our services..." autocomplete="off">
            <button type="button" id="chat-send" class="chat-send" aria-label="Send message">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/>
                </svg>
            </button>
        </div>
    </div>

    <script>
        const navToggle = document.querySelector('.nav-toggle');
        const navLinks = document.querySelector('.nav-links');

        navToggle.addEventListener('click', () => {
            navLinks.classList.toggle('nav-open');
            navToggle.classList.toggle('nav-open');
        });

        // Close menu when clicking a link
        navLinks.querySelectorAll('a').forEach(link => {
            link.addEventListener('click', () => {
                navLinks.classList.remove('nav-open');
                navToggle.classList.remove('nav-open');
            });
        });

        // ===== Rolodex Factory =====
        function initRolodex(containerSelector, cardSelector) {
            const container = document.querySelector(containerSelector);
            if (!container) return null;

            const cards = container.querySelectorAll(cardSelector);
            const dots = container.querySelectorAll('.rolodex-dot');
            const prevBtn = container.querySelector('.rolodex-prev');
            const nextBtn = container.querySelector('.rolodex-next');
            let activeIndex = 0;
            const totalCards = cards.length;

            function update() {
                cards.forEach((card, index) => {
                    let diff = index - activeIndex;

                    // Normalize for circular wrapping
                    if (Math.abs(diff) > totalCards / 2) {
                        diff = diff > 0 ? diff - totalCards : diff + totalCards;
                    }

                    const xOffset = diff * 280;
                    const zOffset = -Math.abs(diff) * 100;
                    const rotation = diff * -15;
                    const scale = 1 - Math.abs(diff) * 0.15;
                    const opacity = 1 - Math.abs(diff) * 0.4;

                    card.style.transform = `translateX(${xOffset}px) translateZ(${zOffset}px) rotateY(${rotation}deg) scale(${scale})`;
                    card.style.opacity = opacity;
                    card.style.zIndex = 10 - Math.abs(diff);
                    card.style.pointerEvents = 'auto';

                    card.classList.toggle('active', index === activeIndex);

                    if (index !== activeIndex) {
                        card.classList.remove('flipped');
                    }
                });

                dots.forEach((dot, index) => {
                    dot.classList.toggle('active', index === activeIndex);
                });
            }

            function goToCard(index) {
                activeIndex = ((index % totalCards) + totalCards) % totalCards;
                update();
            }

            // Navigation
            prevBtn.addEventListener('click', () => goToCard(activeIndex - 1));
            nextBtn.addEventListener('click', () => goToCard(activeIndex + 1));

            // Dot navigation
            dots.forEach((dot, index) => {
                dot.addEventListener('click', () => goToCard(index));
            });

            // Card click: flip if active, navigate if not
            cards.forEach((card, index) => {
                card.addEventListener('click', (e) => {
                    if (e.target.classList.contains('card-cta')) return;

                    if (index === activeIndex) {
                        card.classList.toggle('flipped');
                    } else {
                        goToCard(index);
                    }
                });
            });

            // Initialize
            update();

            return { goToCard, update };
        }

        // Initialize both rolodexes
        const servicesRolodex = initRolodex('#services .rolodex-container', '.service-card');
        const productsRolodex = initRolodex('#products-rolodex', '.product-card');

        // ===== Chat Widget =====
        const CHAT_API_URL = 'https://origami-chat-api.ambitiousrock-8a50786f.southcentralus.azurecontainerapps.io/api';
        // const CHAT_API_URL = 'http://localhost:7071/api'; // For local dev

        const chatFab = document.getElementById('chat-fab');
        const chatWindow = document.getElementById('chat-window');
        const chatClose = document.querySelector('.chat-close');
        const chatInput = document.getElementById('chat-input');
        const chatSend = document.getElementById('chat-send');
        const chatMessages = document.getElementById('chat-messages');

        let chatOpen = false;
        let sessionId = localStorage.getItem('origami-chat-session') || null;

        // Toggle chat window
        function toggleChat() {
            chatOpen = !chatOpen;
            chatFab.classList.toggle('open', chatOpen);
            chatWindow.classList.toggle('open', chatOpen);
            if (chatOpen) {
                chatInput.focus();
            }
        }

        chatFab.addEventListener('click', toggleChat);
        chatClose.addEventListener('click', toggleChat);

        // Send message
        async function sendMessage() {
            const message = chatInput.value.trim();
            if (!message) return;

            // Add user message to chat
            addMessage(message, 'user');
            chatInput.value = '';

            // Show typing indicator
            const typingId = showTyping();

            try {
                // Try API first, fall back to mock if unavailable
                let response;
                try {
                    const result = await fetch(`${CHAT_API_URL}/chat`, {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ message, sessionId })
                    });

                    if (result.ok) {
                        const data = await result.json();
                        response = data.response;
                        if (data.sessionId) {
                            sessionId = data.sessionId;
                            localStorage.setItem('origami-chat-session', sessionId);
                        }
                    } else {
                        throw new Error('API error');
                    }
                } catch (apiError) {
                    // Fall back to mock responses if API unavailable
                    console.log('API unavailable, using mock response');
                    response = await mockChatResponse(message);
                }

                removeTyping(typingId);
                addMessage(response, 'assistant');
            } catch (error) {
                removeTyping(typingId);
                addMessage('Sorry, I encountered an error. Please try again or email us at info@origamias.com.', 'assistant');
            }
        }

        function addMessage(text, role) {
            const messageDiv = document.createElement('div');
            messageDiv.className = `chat-message ${role}`;
            messageDiv.innerHTML = `<div class="chat-bubble">${escapeHtml(text)}</div>`;
            chatMessages.appendChild(messageDiv);
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }

        function showTyping() {
            const id = 'typing-' + Date.now();
            const typingDiv = document.createElement('div');
            typingDiv.id = id;
            typingDiv.className = 'chat-message assistant typing';
            typingDiv.innerHTML = `<div class="chat-bubble"><span class="typing-dot"></span><span class="typing-dot"></span><span class="typing-dot"></span></div>`;
            chatMessages.appendChild(typingDiv);
            chatMessages.scrollTop = chatMessages.scrollHeight;
            return id;
        }

        function removeTyping(id) {
            const el = document.getElementById(id);
            if (el) el.remove();
        }

        function escapeHtml(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }

        // Mock responses until backend is ready
        async function mockChatResponse(message) {
            await new Promise(resolve => setTimeout(resolve, 800 + Math.random() * 400));

            const lowerMessage = message.toLowerCase();

            if (lowerMessage.includes('service') || lowerMessage.includes('what do you do') || lowerMessage.includes('help')) {
                return 'We offer three core services: Agentic Analysis (AI-powered operational insights), Rapid AI Prototyping (fast concept-to-demo development), and AI Automation (custom solutions for repetitive tasks). Which interests you most?';
            }
            if (lowerMessage.includes('product') || lowerMessage.includes('vera') || lowerMessage.includes('aiden') || lowerMessage.includes('halo')) {
                return 'We have three AI agents coming soon: VERA (autonomous QA), AIDEN (AI Product Manager), and HALO (cybersecurity protection). Would you like early access to any of these?';
            }
            if (lowerMessage.includes('price') || lowerMessage.includes('cost') || lowerMessage.includes('how much')) {
                return 'Pricing depends on the scope of your project. We\'d love to discuss your needs and provide a tailored quote. Would you like to share your email so we can follow up?';
            }
            if (lowerMessage.includes('contact') || lowerMessage.includes('email') || lowerMessage.includes('reach')) {
                return 'You can reach us at info@origamias.com. We typically respond within one business day. Or share your email here and we\'ll reach out to you!';
            }
            if (lowerMessage.includes('hello') || lowerMessage.includes('hi') || lowerMessage.includes('hey')) {
                return 'Hello! Great to meet you. I\'m here to help you learn about Origami\'s AI services and products. What would you like to know?';
            }

            return 'Thanks for your question! For detailed inquiries, our team would love to help. Would you like to share your email so we can follow up, or you can reach us directly at info@origamias.com?';
        }

        // Contact form elements
        const chatContactBtn = document.getElementById('chat-contact-btn');
        const chatContactForm = document.getElementById('chat-contact-form');
        const contactName = document.getElementById('contact-name');
        const contactEmail = document.getElementById('contact-email');
        const contactSubmit = document.getElementById('contact-submit');
        const contactCancel = document.getElementById('contact-cancel');

        // Toggle contact form
        chatContactBtn.addEventListener('click', () => {
            chatContactForm.classList.toggle('hidden');
        });

        contactCancel.addEventListener('click', () => {
            chatContactForm.classList.add('hidden');
        });

        // Submit contact info
        contactSubmit.addEventListener('click', async () => {
            const name = contactName.value.trim();
            const email = contactEmail.value.trim();

            if (!email || !email.includes('@')) {
                alert('Please enter a valid email address');
                return;
            }

            contactSubmit.disabled = true;
            contactSubmit.textContent = 'Sending...';

            try {
                const result = await fetch(`${CHAT_API_URL}/contact`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ sessionId, name, email })
                });

                if (result.ok) {
                    chatContactForm.classList.add('hidden');
                    addMessage(`Thanks ${name || 'friend'}! We've got your info (${email}) and will be in touch soon.`, 'assistant');
                    contactName.value = '';
                    contactEmail.value = '';
                } else {
                    throw new Error('Failed to submit');
                }
            } catch (error) {
                addMessage('Sorry, there was an error submitting your info. Please email us directly at info@origamias.com.', 'assistant');
            }

            contactSubmit.disabled = false;
            contactSubmit.textContent = 'Send';
        });

        // Event listeners
        chatSend.addEventListener('click', sendMessage);
        chatInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') sendMessage();
        });
    </script>
</body>
</html>
