<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stormcrest | Unified Energy Solutions</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header>
        <div class="nav-container">
            <div class="logo-container" onclick="showView('home')">
                <img src="logo.png" alt="Stormcrest Logo" class="logo-img">
            </div>
            <button class="nav-toggle" id="navToggle" aria-label="Toggle navigation" onclick="toggleNav()">
                <span></span><span></span><span></span>
            </button>
            <nav class="nav-links" id="navLinks">
                <button onclick="window.location.href='opsadmin.html'">OpsAdmin</button>
                <button onclick="window.location.href='services.html'">Services</button>
                <button onclick="window.location.href='certifications.html'">Certifications</button>
                <button class="nav-cta" onclick="openDemoModal();closeNav()">Request a Demo</button>
                <button class="theme-toggle" id="themeToggleBtn" onclick="toggleTheme()"
                    aria-label="Toggle Theme">☀️</button>
            </nav>
        </div>
    </header>

    <div id="demoModal" class="modal">
        <div class="modal-content" style="max-width:780px; max-height:90vh; overflow-y:auto;">
            <span class="close-modal" onclick="closeDemoModal()">&times;</span>
            <h2 style="color: var(--primary-green); margin-bottom: 6px;">Stormcrest Demo Evaluation</h2>
            <p style="color: var(--text-gray); margin-bottom: 6px; font-size:0.9rem;">When we present OpsAdmin to our
                potential customers, we like to collect information that will help us better understand your company,
                processes and pain points in order to deliver a more effective demo. All the information will remain
                confidential and will only be used to maximize our demonstration time and focus in the areas that are
                more important to you. OpsAdmin is a robust system and it is inevitable that we will get sidetracked on
                different functionalities when discussions take place. Thank you in advance for your help.</p>
            <p style="color:var(--primary-blue); font-size:0.8rem; margin-bottom:20px;">* Indicates required question
            </p>

            <form class="contact-form" style="margin-top:0; display:flex; flex-direction:column; gap:22px;"
                action="https://formspree.io/f/xreawwjv" method="POST">

                <!-- Name / Company / Email row -->
                <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px;">
                    <div class="form-group">
                        <label>Your Name <span style="color:#dc3545">*</span></label>
                        <input type="text" id="demo-name" name="name" placeholder="John Doe" required>
                    </div>
                    <div class="form-group">
                        <label>Company <span style="color:#dc3545">*</span></label>
                        <input type="text" id="demo-company" name="company" placeholder="Energy Corp LLC" required>
                    </div>
                </div>
                <div class="form-group">
                    <label>Email <span style="color:#dc3545">*</span></label>
                    <input type="email" id="demo-email" name="email" placeholder="you@company.com" required>
                </div>

                <!-- Customer segment -->
                <div class="form-group">
                    <label>Do you focus more on Residential / Small Business or Large Commercial? <span
                            style="color:#dc3545">*</span></label>
                    <div style="display:flex; flex-direction:column; gap:8px; margin-top:8px;">
                        <label class="note-check"><input type="radio" name="segment"
                                value="Residential / Small Business" required> Residential / Small Business</label>
                        <label class="note-check"><input type="radio" name="segment" value="Large Commercial"> Large
                            Commercial</label>
                        <label class="note-check"><input type="radio" name="segment" value="Both equally"> Both
                            equally</label>
                    </div>
                </div>

                <!-- Internal system -->
                <div class="form-group">
                    <label>Do you currently use an internal (in-house) system to handle any of your operational
                        processes, regulatory compliance controls, document management, contract management, or other
                        processes?</label>
                    <div style="display:flex; gap:24px; margin-top:8px;">
                        <label class="note-check"><input type="radio" name="inhouse" value="Yes"
                                onchange="toggleInhouseDetail(this)"> Yes</label>
                        <label class="note-check"><input type="radio" name="inhouse" value="No"
                                onchange="toggleInhouseDetail(this)"> No</label>
                    </div>
                </div>
                <div class="form-group" id="inhouse-detail" style="display:none;">
                    <label>If yes, please tell us a little about the tools you currently use:</label>
                    <textarea id="demo-inhouse" name="inhouse_details" rows="3"
                        placeholder="Describe your current tools..."></textarea>
                </div>

                <!-- Billing system -->
                <div class="form-group">
                    <label>What billing system do you currently use or plan to use?</label>
                    <div style="display:flex; flex-direction:column; gap:8px; margin-top:8px;">
                        <label class="note-check"><input type="radio" name="billing" value="ESG (P2C)"> ESG
                            (P2C)</label>
                        <label class="note-check"><input type="radio" name="billing" value="VertexOne/ECI (UtiliBill)">
                            VertexOne/ECI (UtiliBill)</label>
                        <label class="note-check" style="display:flex; align-items:center; gap:8px;">
                            <input type="radio" name="billing" value="Other" onchange="toggleBillingOther(this)"> Other:
                            <input type="text" id="billing-other-text" name="billing_other" placeholder="Please specify"
                                style="flex:1; display:none; padding:6px 10px; background:rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.1); border-radius:6px; color:#fff;">
                        </label>
                    </div>
                </div>

                <!-- Pain points -->
                <div class="form-group">
                    <label>Please describe the issues you face operationally or your biggest "pain points" that exist
                        today in your organization. This will help us focus in on functionality that will help with
                        those current problems.</label>
                    <textarea id="demo-pain" name="pain_points" rows="4"
                        placeholder="Describe your operational challenges..."></textarea>
                </div>

                <!-- Demo focus checkboxes -->
                <div class="form-group">
                    <label>Please check off the items that are most important to you and what you would prefer to focus
                        on in our demo. You may check all if you so choose.</label>
                    <div style="display:flex; flex-direction:column; gap:10px; margin-top:10px;">
                        <label class="note-check"><input type="checkbox" name="focus"
                                value="Enrollment Journey (Full Lifecycle)"> Enrollment Journey (Full Lifecycle)</label>
                        <label class="note-check"><input type="checkbox" name="focus"
                                value="Drops, Winbacks and Retention"> Drops, Winbacks and Retention</label>
                        <label class="note-check"><input type="checkbox" name="focus" value="Customer Support"> Customer
                            Support</label>
                        <label class="note-check"><input type="checkbox" name="focus"
                                value="Front End - Enrollment Wizard and My Account Portal"> Front End – Enrollment
                            Wizard and My Account Portal</label>
                        <label class="note-check"><input type="checkbox" name="focus"
                                value="Document Management / Regulatory Compliance"> Document Management / Regulatory
                            Compliance</label>
                        <label class="note-check"><input type="checkbox" name="focus"
                                value="Plan / Product Organization and Rate Management"> Plan / Product Organization and
                            Rate Management</label>
                        <label class="note-check"><input type="checkbox" name="focus"
                                value="Data Integrity, Permissions, and Security"> Data Integrity, Permissions, and
                            Security</label>
                    </div>
                </div>

                <button type="submit" class="submit-btn" style="grid-column:unset;">Request Demo</button>
            </form>
        </div>
    </div>


    <div id="home" class="view-section active-view">
        <section class="hero" id="heroSection">
            <!-- Animated canvas overlay -->
            <canvas id="heroCanvas"
                style="position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;"></canvas>
            <!-- CSS animated decorations -->
            <div class="hero-scan-line"></div>
            <div class="hero-glow hero-glow-tl"></div>
            <div class="hero-glow hero-glow-br"></div>
            <div class="hero-grid-overlay"></div>
            <!-- Content -->
            <div style="position:relative;z-index:2;">
                <h1>The Energy Operations Hub</h1>
                <p>One unified ecosystem combining innovative software, regulatory compliance, and expert operations
                    consulting.</p>
            </div>
        </section>

        <section class="grid-section">
            <div class="grid-container">
                <div class="business-card" onclick="window.location.href='opsadmin.html'">
                    <img src="bg_stats.jpg" class="card-image" alt="Data">
                    <div class="card-content">
                        <div class="card-role">PURPOSE-BUILT RETAIL ENERGY SOFTWARE</div>
                        <h3 class="card-title">OpsAdmin</h3>
                        <p class="card-text">Automate the full enrollment lifecycle, manage offers, generate dynamic
                            documents during fulfillment, maintain compliance with a built-in CRM, and integrate
                            seamlessly with a REP’s billing system, all within one centralized platform designed to
                            scale your operations</p>
                        <span class="card-btn">View Platform Features &rarr;</span>
                    </div>
                </div>

                <div class="business-card" onclick="window.location.href='services.html'">
                    <img src="ProfService.png" class="card-image" alt="Meeting">
                    <div class="card-content">
                        <div class="card-role">Consulting & Custom Projects</div>
                        <h3 class="card-title">Professional Services</h3>
                        <p class="card-text">Professional Services exists to make sure the software actually drives
                            results. We work directly with retail energy leadership teams to refine operational
                            strategy, optimize workflows, and implement systems that reduce friction and increase
                            margin. This is not generic consulting. It is industry-specific execution.</p>
                        <span class="card-btn" style="color: var(--primary-gold);">View Services &rarr;</span>
                    </div>
                </div>

                <div class="business-card" onclick="window.location.href='certifications.html'">
                    <img src="GetCert.png" class="card-image" alt="Certification">
                    <div class="card-content">
                        <div class="card-role">OpsAdmin Certification</div>
                        <h3 class="card-title">Get Certified </h3>
                        <p class="card-text">The Ops Admin Certification Program validates real-world proficiency in Ops
                            Admin for retail energy professionals. Through tiered certification levels, individuals
                            demonstrate increasing mastery of the platform, operational workflows, and industry best
                            practices, providing a meaningful credential that enhances credibility, career growth, and
                            organizational efficiency.</p>
                        <span class="card-btn" style="color: var(--primary-purple);">View Certifications &rarr;</span>
                    </div>
                </div>
            </div>
        </section>

        <section class="advantage-section">
            <div style="margin-bottom: 50px;">
                <h2 style="font-size: 2.5rem; margin-bottom: 15px;">The Stormcrest Advantage</h2>
                <p style="color: var(--text-gray); max-width: 700px; margin: 0 auto;">
                    We don't just write code. We understand the energy business because we have lived it.
                </p>
            </div>

            <div class="stats-container">
                <div class="stat-item">
                    <span class="stat-number">2M+</span>
                    <span class="stat-label">Enrollments &<br>Renewals Processed</span>
                </div>
                <div class="stat-item">
                    <span class="stat-number">5M+</span>
                    <span class="stat-label">Welcome Letters &<br>Expiration Notifications Sent</span>
                </div>
                <div class="stat-item">
                    <span class="stat-number">50M+</span>
                    <span class="stat-label">System Logs &<br>Triggers Generated</span>
                </div>
            </div>

            <div class="value-props">
                <div class="prop-card">
                    <span class="prop-icon">⚡</span>
                    <h3 style="color: #fff; margin-bottom: 10px;">Speed to Market</h3>
                    <p style="color: var(--text-gray); font-size: 0.9rem;">Because our Software and Services teams work
                        in unison, we can deploy new markets and brands significantly faster than disjointed vendors.
                    </p>
                </div>
                <div class="prop-card">
                    <span class="prop-icon">🛡️</span>
                    <h3 style="color: #fff; margin-bottom: 10px;">Regulatory Safety</h3>
                    <p style="color: var(--text-gray); font-size: 0.9rem;">Our compliance engines are built by experts
                        who monitor regulatory shifts daily. We build safety directly into the workflow.</p>
                </div>
                <div class="prop-card">
                    <span class="prop-icon">🧩</span>
                    <h3 style="color: #fff; margin-bottom: 10px;">Seamless Integration</h3>
                    <p style="color: var(--text-gray); font-size: 0.9rem;">No more "vendor blame game." Our Enrollment
                        Wizard, Billing Integrations, and Customer Care tools talk to each other perfectly.</p>
                </div>
            </div>
        </section>

        <section class="affiliates-section">
            <div class="content-container" style="padding: 0;">
                <h3
                    style="color: var(--text-gray); font-size: 1rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px;">
                    System Integrations
                </h3>
                <div class="logo-row">
                    <img src="https://esgglobal.com/wp-content/uploads/2020/12/ESG-Logo.svg" alt="Partner 1"
                        class="affiliate-logo">
                    <img src="https://www.vertexone.ai/hubfs/2024-Pike-website/logos/logo-VertexOne-full-color.svg"
                        alt="Partner 2" class="affiliate-logo">
                    <img src="https://www.transunion.com/content/dam/transunion/global/common/logos/logo.svg"
                        alt="Partner 3" class="affiliate-logo">
                    <img src="forte.png" alt="Partner 4" class="affiliate-logo">
                    <img src="https://support.authorize.net/anetheaderlogo.jpg" alt="Partner 5" class="affiliate-logo">
                </div>
            </div>
        </section>

        <section class="contact-hub">
            <div class="contact-container">
                <h2 style="font-size: 2.2rem; margin-bottom: 10px;">Get Started</h2>
                <p style="color: var(--text-gray);">Select your area of interest and our team will connect you with the
                    right experts.</p>

                <form class="contact-form" action="https://formspree.io/f/xreawwjv" method="POST">
                    <div class="form-group">
                        <label>Your Name</label>
                        <input type="text" id="name" name="name" placeholder="John Doe" required>
                    </div>
                    <div class="form-group">
                        <label>Company</label>
                        <input type="text" id="company" name="company" placeholder="Energy Corp LLC" required>
                    </div>
                    <div class="form-group full-width">
                        <label>I am interested in...</label>
                        <select id="topic" name="topic" required>
                            <option value="General Inquiry">General Inquiry</option>
                            <option value="OpsAdmin Demo">OpsAdmin Platform Demo</option>
                            <option value="Software Development">Software Development Projects</option>
                            <option value="Consulting Services">Professional Consulting Services</option>
                        </select>
                    </div>
                    <div class="form-group full-width">
                        <label>Message</label>
                        <textarea id="message" name="message" rows="4" placeholder="How can we help you today?"
                            required></textarea>
                    </div>
                    <button type="submit" class="submit-btn">Send Inquiry</button>
                    <p class="contact-note">
                        * All inquiries are routed to the central Stormcrest Team.
                    </p>
                </form>
            </div>
        </section>
    </div>

    <footer>
        <p>&copy; Copyright 2012 - 2026 | Ops Admin by Stormcrest Software | All Rights Reserved | Powered by Stormcrest
            Software Development | <a href="corporate.html">Corporate</a></p>
    </footer>

    <script>
        // Hero canvas particle system
        (function () {
            const canvas = document.getElementById('heroCanvas');
            if (!canvas) return;
            const ctx = canvas.getContext('2d');

            function resize() {
                const hero = document.getElementById('heroSection');
                canvas.width = hero ? hero.offsetWidth : window.innerWidth;
                canvas.height = hero ? hero.offsetHeight : window.innerHeight * 0.6;
            }
            resize();
            window.addEventListener('resize', resize);

            // Particle configs
            const PARTICLE_COUNT = 55;
            const LINE_COUNT = 12;
            const colors = ['rgba(0,232,168,', 'rgba(0,168,232,', 'rgba(0,201,167,'];

            // Floating dots
            const particles = Array.from({ length: PARTICLE_COUNT }, () => ({
                x: Math.random() * canvas.width,
                y: Math.random() * canvas.height,
                r: Math.random() * 1.8 + 0.4,
                vx: (Math.random() - 0.5) * 0.25,
                vy: (Math.random() - 0.5) * 0.25,
                color: colors[Math.floor(Math.random() * colors.length)],
                alpha: Math.random() * 0.5 + 0.2,
                alphaDir: Math.random() > 0.5 ? 1 : -1,
            }));

            // Drifting data-line segments
            const lines = Array.from({ length: LINE_COUNT }, () => ({
                x: Math.random() * canvas.width,
                y: Math.random() * canvas.height,
                len: Math.random() * 60 + 20,
                angle: Math.random() * Math.PI * 2,
                speed: Math.random() * 0.3 + 0.1,
                color: colors[Math.floor(Math.random() * colors.length)],
                alpha: Math.random() * 0.2 + 0.05,
            }));

            function draw() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);

                // Draw data lines
                lines.forEach(l => {
                    ctx.save();
                    ctx.strokeStyle = l.color + l.alpha + ')';
                    ctx.lineWidth = 0.8;
                    ctx.beginPath();
                    ctx.moveTo(l.x, l.y);
                    ctx.lineTo(l.x + Math.cos(l.angle) * l.len, l.y + Math.sin(l.angle) * l.len);
                    ctx.stroke();
                    ctx.restore();
                    l.x += Math.cos(l.angle) * l.speed;
                    l.y += Math.sin(l.angle) * l.speed;
                    if (l.x < -100 || l.x > canvas.width + 100 || l.y < -100 || l.y > canvas.height + 100) {
                        l.x = Math.random() * canvas.width;
                        l.y = Math.random() * canvas.height;
                    }
                });

                // Draw particles
                particles.forEach(p => {
                    // Pulse alpha
                    p.alpha += p.alphaDir * 0.004;
                    if (p.alpha > 0.7 || p.alpha < 0.1) p.alphaDir *= -1;

                    ctx.beginPath();
                    ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
                    ctx.fillStyle = p.color + p.alpha + ')';
                    ctx.shadowColor = p.color + '0.6)';
                    ctx.shadowBlur = 6;
                    ctx.fill();

                    p.x += p.vx;
                    p.y += p.vy;
                    if (p.x < 0) p.x = canvas.width;
                    if (p.x > canvas.width) p.x = 0;
                    if (p.y < 0) p.y = canvas.height;
                    if (p.y > canvas.height) p.y = 0;
                });

                // Connect nearby particles with faint lines
                for (let i = 0; i < particles.length; i++) {
                    for (let j = i + 1; j < particles.length; j++) {
                        const dx = particles[i].x - particles[j].x;
                        const dy = particles[i].y - particles[j].y;
                        const dist = Math.sqrt(dx * dx + dy * dy);
                        if (dist < 90) {
                            ctx.strokeStyle = 'rgba(0,201,167,' + (0.12 * (1 - dist / 90)) + ')';
                            ctx.lineWidth = 0.5;
                            ctx.beginPath();
                            ctx.moveTo(particles[i].x, particles[i].y);
                            ctx.lineTo(particles[j].x, particles[j].y);
                            ctx.stroke();
                        }
                    }
                }
                requestAnimationFrame(draw);
            }
            draw();
        })();
    </script>
    <script src="script.js"></script>

    <script>
        // Simple Math CAPTCHA for all contact forms
        function initCaptchas() {
            const forms = document.querySelectorAll('form.contact-form');
            forms.forEach(form => {
                const num1 = Math.floor(Math.random() * 10) + 1;
                const num2 = Math.floor(Math.random() * 10) + 1;
                const answer = num1 + num2;
                form.dataset.captchaAnswer = answer;

                const captchaContainer = document.createElement('div');
                captchaContainer.className = 'form-group full-width captcha-container';
                captchaContainer.style.marginBottom = '15px';

                const label = document.createElement('label');
                label.innerHTML = `Security Check: What is <strong>${num1} + ${num2}</strong>? <span style="color:#dc3545">*</span>`;

                const input = document.createElement('input');
                input.type = 'number';
                input.className = 'captcha-input';
                input.placeholder = 'Enter the sum';
                input.required = true;
                input.style.marginTop = '8px';
                input.style.maxWidth = '150px';

                captchaContainer.appendChild(label);
                captchaContainer.appendChild(input);

                const submitBtn = form.querySelector('.submit-btn') || form.querySelector('button[type="submit"]');
                if (submitBtn) {
                    form.insertBefore(captchaContainer, submitBtn);
                }

                form.addEventListener('submit', function (e) {
                    const userAnswer = parseInt(form.querySelector('.captcha-input').value);
                    const expectedAnswer = parseInt(form.dataset.captchaAnswer);

                    if (userAnswer !== expectedAnswer) {
                        e.preventDefault();
                        e.stopImmediatePropagation();
                        alert('Incorrect security check answer. Please try again.');
                        // Regenerate
                        const n1 = Math.floor(Math.random() * 10) + 1;
                        const n2 = Math.floor(Math.random() * 10) + 1;
                        form.dataset.captchaAnswer = n1 + n2;
                        label.innerHTML = `Security Check: What is <strong>${n1} + ${n2}</strong>? <span style="color:#dc3545">*</span>`;
                        form.querySelector('.captcha-input').value = '';
                        return false;
                    }
                });
            });
        }
        window.addEventListener('DOMContentLoaded', initCaptchas);
    </script>
</body>

</html>