<?php
include_once '../config.php'; // adjust path as necessary
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Full Stack with AI — React • Node • Express • MySQL</title>
  <meta name="description" content="Full Stack development course from scratch: React, Node, Express, MySQL, JavaScript, jQuery plus AI tools and real-time projects. Job guidance and interview preparation included." />
  <style>
    :root{--accent:#2b8cff;--bg:#f6fbff;--card:#ffffff;--muted:#67728a}
    *{box-sizing:border-box}
    body{font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;line-height:1.6;color:#0b2538;background:var(--bg);margin:0}
    .container{max-width:1100px;margin:40px auto;padding:24px}
    header{display:flex;align-items:center;justify-content:space-between}
    .brand{display:flex;gap:12px;align-items:center}
    .logo{width:56px;height:56px;border-radius:10px;background:linear-gradient(135deg,var(--accent),#6dd3ff);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
    h1{font-size:28px;margin:0}
    p.lead{color:var(--muted);margin-top:8px}
    .hero{display:grid;grid-template-columns:1fr 360px;gap:24px;margin-top:28px}
    .card{background:var(--card);padding:22px;border-radius:12px;box-shadow:0 6px 22px rgba(10,20,40,0.06)}
    .cta-btn{display:inline-block;background:var(--accent);color:#fff;padding:12px 18px;border-radius:10px;text-decoration:none;font-weight:600}
    .meta{font-size:14px;color:var(--muted);margin-top:6px}
    ul.bullets{padding-left:18px}
    .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
    .feature{padding:14px;border-radius:10px;background:#fbfeff;text-align:center}
    .curriculum{margin-top:18px}
    .curriculum h3{margin:6px 0}
    .project-list{list-style:decimal;padding-left:20px}
    .instructor{display:flex;gap:14px;align-items:center}
    .avatar{width:88px;height:88px;border-radius:12px;background:#e6f3ff;display:flex;align-items:center;justify-content:center;font-weight:700}
    footer{margin-top:28px;text-align:center;color:var(--muted);font-size:14px}
    @media (max-width:900px){.hero{grid-template-columns:1fr} .grid-3{grid-template-columns:repeat(1,1fr)} .hero-right{order:-1}}
    .faq{margin-top:18px}
    .contact-row{display:grid;grid-template-columns:1fr 320px;gap:18px;margin-top:18px}
    form label{display:block;margin:8px 0 6px;font-weight:600}
    input,textarea,select{width:100%;padding:10px;border-radius:8px;border:1px solid #e6eef6}
    .small{font-size:13px;color:var(--muted)}

    .contact-row{display:grid;grid-template-columns:1fr 320px;gap:18px;margin-top:18px}
    form label{display:block;margin:8px 0 6px;font-weight:600}
    input,textarea,select{width:100%;padding:10px;border-radius:8px;border:1px solid #e6eef6}
    .small{font-size:13px;color:var(--muted)}
    @media (max-width:900px){
      .hero{grid-template-columns:1fr} 
      .grid-3{grid-template-columns:repeat(1,1fr)} 
      .hero-right{order:-1}
      .contact-row{grid-template-columns:1fr;gap:16px}
    }
    @media (max-width:600px){
      .container{padding:16px;margin:20px auto}
      .card{padding:16px}
      .hero{gap:16px}
      .grid-3{grid-template-columns:1fr}
      .instructor{flex-direction:column;text-align:center;gap:12px}
      .avatar{width:60px;height:60px}
      h1{font-size:22px}
      .brand{flex-direction:column;align-items:flex-start;gap:8px}
      header{flex-direction:column;align-items:flex-start;gap:16px}
      .contact-row > div:first-child{order:2}
      .contact-row > div:last-child{order:1}
    }
    @media (max-width:400px){
      .container{padding:12px;margin:10px auto}
      .card{padding:12px}
      h1{font-size:20px}
      .cta-btn{padding:10px 14px;font-size:14px}
      input,textarea{padding:8px;font-size:14px}
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <div class="brand">
        <div class="logo">FS</div>
        <div>
          <h1>Full Stack with AI — React • Node • Express • MySQL</h1>
          <p class="small">From scratch • Real-time projects • Job & interview guidance</p>
        </div>
      </div>
      <nav>
        <a class="cta-btn" href="#contact">Enroll Now</a>
      </nav>
    </header>

    <section class="hero">
      <div>
        <div class="card">
          <h2>Course Overview</h2>
          <p class="lead">A practical, job-oriented Full Stack development course that teaches React, Node.js, Express, MySQL, JavaScript and jQuery — with integrated AI-tool workflows and real-time projects. Perfect for freshers and job-seekers looking to enter the IT industry.</p>

          <div class="grid-3" style="margin-top:18px">
            <div class="feature">
              <strong>From Scratch</strong>
              <div class="small">No prior experience required — start with fundamentals.</div>
            </div>
            <div class="feature">
              <strong>Real-time Projects</strong>
              <div class="small">Build projects you can show in interviews and portfolios.</div>
            </div>
            <div class="feature">
              <strong>AI in Development</strong>
              <div class="small">Use AI tools to speed up coding, testing and documentation.</div>
            </div>
          </div>

          <h3 class="curriculum">What you'll learn</h3>
          <ul class="bullets">
            <li>Modern JavaScript (ES6+) & jQuery essentials</li>
            <li>React fundamentals, hooks, routing and state management</li>
            <li>Node.js and Express — REST APIs, authentication and middlewares</li>
            <li>MySQL — schema design, queries, joins, migrations</li>
            <li>Connecting React with APIs — full stack integration</li>
            <li>Using AI tools for code generation, testing, and documentation</li>
            <li>Deployment basics — hosting backend and frontend</li>
            <li>Interview preparation, resume review and mock interviews</li>
          </ul>

          <h3 style="margin-top:14px">Projects (sample)</h3>
          <ol class="project-list">
            <li>Employee Management System (React + Node + MySQL)</li>
            <li>Real-time Dashboard with charts and analytics</li>
            <li>Subscription & Payment flow (demo integration)</li>
            <li>Task Manager with authentication and role-based access</li>
          </ol>

          <p style="margin-top:16px" class="meta">Duration: Flexible — Batch & weekend options available. Mode: Online / Live classes.</p>

          <a class="cta-btn" href="#contact" style="margin-top:14px;display:inline-block">Reserve Seat</a>
          <p class="small" style="margin-top:10px">Seats are limited — beginners welcome.</p>
        </div>

        <div style="margin-top:18px" class="card">
          <h3>Who should join?</h3>
          <ul class="bullets">
            <li>Fresh graduates and students looking for their first IT job</li>
            <li>Developers who want to switch to full-stack roles</li>
            <li>Anyone who wants practical, interview-ready projects</li>
          </ul>

          <h3 style="margin-top:12px">Why this course?</h3>
          <p class="small">Classes are explained through real-time scenarios and industry use-cases. With 9+ years of IT experience, the instructor offers hands-on guidance for interview readiness, resume improvement and real job preparation.</p>
        </div>

        <div class="card" style="margin-top:18px">
          <h3>Course Benefits</h3>
          <ul class="bullets">
            <li>Live coding with step-by-step explanations</li>
            <li>Interview guidance and mock interviews</li>
            <li>Portfolio-ready projects and GitHub-ready code</li>
            <li>AI-assisted development techniques</li>
          </ul>
        </div>
      </div>

      <aside class="hero-right">
        <div class="card">
          <h3>Instructor</h3>
          <div class="instructor" style="margin-top:10px">
            <div class="avatar">D</div>
            <div>
              <strong>Dilli — Senior Full Stack Developer</strong>
              <div class="small" style="margin-top:6px">9+ years experience in React, Node, Express, MySQL, PHP and web systems. Passionate about teaching practical skills and helping students crack interviews.</div>
            </div>
          </div>

          <h3 style="margin-top:14px">Quick Facts</h3>
          <p class="small">Personalized feedback • CV & LinkedIn review • Mock interviews • Job interview guidance</p>

          <div style="margin-top:12px">
            <strong>Fee</strong>
            <div class="meta">Contact for batch details & fee structure.</div>
            <a class="cta-btn" href="#contact" style="margin-top:12px;display:inline-block">Contact Instructor</a>
          </div>
        </div>

        <div style="margin-top:18px; display: none;" class="card">
          <h3>Enroll</h3>
          <p class="small">Fill the form below and we'll contact you with batch timing and payment options.</p>
          <form id="enrollForm" action="#" onsubmit="alert('Form submitted — demo only');return false;">
            <label for="name">Full name</label>
            <input id="name" name="name" required />
            <label for="email">Email</label>
            <input id="email" name="email" type="email" required />
            <label for="phone">Phone</label>
            <input id="phone" name="phone" />
            <label for="message">Message (optional)</label>
            <textarea id="message" name="message" rows="3"></textarea>
            <button class="cta-btn" style="margin-top:10px">Request Info</button>
          </form>
        </div>
      </aside>
    </section>

    <section class="card" style="margin-top:18px">
      <h2>Detailed Curriculum</h2>
      <p class="small">Modules are incremental and practical — each module ends with a mini-project or assignment.</p>
      <div style="margin-top:10px">
        <h3>Module 1 — JavaScript & jQuery</h3>
        <ul class="bullets">
          <li>Basics to advanced JS (ES6+), DOM, events</li>
          <li>jQuery essentials for quick DOM manipulation and legacy systems</li>
        </ul>

        <h3>Module 2 — React</h3>
        <ul class="bullets">
          <li>Components, props, state, lifecycle and hooks</li>
          <li>Routing, forms, state management patterns</li>
        </ul>

        <h3>Module 3 — Node & Express</h3>
        <ul class="bullets">
          <li>Server setup, REST APIs, authentication (JWT/session)</li>
          <li>Middleware, file upload, email and third-party APIs</li>
        </ul>

        <h3>Module 4 — MySQL & Backend</h3>
        <ul class="bullets">
          <li>Schema design, queries, joins, indexing and optimization</li>
          <li>Data migrations and using MySQL with Node (mysql2 / ORM)</li>
        </ul>

        <h3>Module 5 — DevOps & Deployment</h3>
        <ul class="bullets">
          <li>Deploying backend and frontend, basic CI/CD, environment management</li>
        </ul>

        <h3>Module 6 — Interview Prep & AI Tools</h3>
        <ul class="bullets">
          <li>Algorithm & data-structure revision, commonly asked full-stack interview questions</li>
          <li>Mock interviews, resume & LinkedIn optimization</li>
          <li>How to use AI tools to speed up development and generate docs/tests</li>
        </ul>
      </div>
    </section>

    <section class="card" style="margin-top:18px">
      <h2>Frequently Asked Questions</h2>
      <div class="faq">
        <strong>Do I need prior programming experience?</strong>
        <p class="small">No. The course starts from fundamentals and moves to advanced topics with hands-on practice.</p>

        <strong>Will you help with job interviews?</strong>
        <p class="small">Yes — resume reviews, mock interviews and interview guidance are part of the course.</p>

        <strong>Are classes live or recorded?</strong>
        <p class="small">Live interactive classes.</p>
      </div>
    </section>

    <section class="card contact-row" id="contact">
      <div>
        <h2>Contact & Schedule</h2>
        <p class="small">Tell us your preferred timing (weekday/weekend) and we'll propose a batch. Customized corporate or private training is also available.</p>

        <h3 style="margin-top:12px">Quick contact</h3>
        <p class="small">Email: <a href="mailto:digitalweblab2025@gmail.com">digitalweblab2025@gmail.com</a></p>
        <p class="small">WhatsApp / Phone: +91 89853 25890 </p>
      </div>

      <div>
        <h3>Message</h3>
       <form id="contactForm" action="#" onsubmit="return false;" autocomplete="off">
  <label for="cname">Name</label>
  <input id="cname" name="name" required maxlength="30"/>

  <label for="cemail">Email</label>
  <input id="cemail" name="email" type="email" required maxlength="70"/>

  <!-- Mobile (only digits allowed). Use type="tel" so mobile keyboards show numeric keypad -->
  <label for="cphone">Mobile</label>
  <input id="cphone"
         name="phone"
         type="tel"
         inputmode="numeric"
         pattern="\d{10}"
         placeholder="10 digits"
         maxlength="10"
         aria-describedby="phoneHelp" />

  <small id="phoneHelp" class="small">Enter 10-digit mobile number (digits only)</small>

  <label for="ctext">Message</label>
  <textarea id="ctext" name="message" rows="5"></textarea>

  <div id="contactStatus" class="small" style="margin-top:8px"></div>

  <button class="cta-btn" id="sendBtn" type="submit" style="margin-top:10px">Send Message</button>
</form>
      </div>
    </section>

    <footer>
      <p>&copy; 2025 Digital Web Lab. All rights reserved. — Full Stack with AI course</p>
    </footer>
  

  <script>
  // Ajax submit for contact form with client-side validation
  document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('contactForm');
    const status = document.getElementById('contactStatus');
    const phone = document.getElementById('cphone');
    
    if (!form) return;
    const submitBtn = form.querySelector('button[type="submit"]');

    // Phone input validation - strip non-digits while typing
    phone.addEventListener('input', (e) => {
      let digits = e.target.value.replace(/\D/g, '');
      digits = digits.slice(0, 10); // enforce maxlength 10
      e.target.value = digits;
    });

    // Prevent non-numeric keys
    phone.addEventListener('keydown', (e) => {
      const allowed = ['Backspace','ArrowLeft','ArrowRight','Delete','Tab','Home','End'];
      if (allowed.includes(e.key)) return;
      if (!/^\d$/.test(e.key)) {
        e.preventDefault();
      }
    });

    function showMessage(text, color = 'crimson') {
      status.textContent = text;
      status.style.color = color;
    }

    function validate() {
      const name = form.name.value.trim();
      const email = form.email.value.trim();
      const phoneVal = form.phone.value.replace(/\D/g, ''); // digits only
      const message = form.message.value.trim();

      if (!name) { 
        showMessage('Please enter your name.'); 
        return false; 
      }
      if (name.length > 150) { 
        showMessage('Name is too long.'); 
        return false; 
      }

      const emailRe = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!email || !emailRe.test(email)) { 
        showMessage('Please enter a valid email address.'); 
        return false; 
      }

      if (phoneVal && !/^\d{10}$/.test(phoneVal)) { 
        showMessage('Please enter a valid 10-digit mobile number (digits only).'); 
        return false; 
      }

      if (message && message.length < 10) { 
        showMessage('Message should be at least 10 characters.'); 
        return false; 
      }

      return true;
    }

    form.addEventListener('submit', async function (e) {
      debugger;
      e.preventDefault();
      status.textContent = '';
      
      if (!validate()) return;

      submitBtn.disabled = true;
      const origText = submitBtn.textContent;
      submitBtn.textContent = 'Sending...';

      // endpoint from PHP config
      const endpoint = '<?php echo rtrim($base_url, "/");?>/contact/ajax.php';
      const formData = new FormData(form);
      
      // sanitize phone to digits only before sending
      formData.set('phone', (form.phone.value || '').replace(/\D/g, ''));

      try {
        const resp = await fetch(endpoint, {
          method: 'POST',
          body: formData,
        });

        let json = null;
        try { 
          json = await resp.json(); 
        } catch (_) { 
          /* ignore parse error */ 
        }

        if (resp.ok && (json === null || json.success === true)) {
          showMessage('Your message has been sent, we will contact you shortly. Thank you!', 'green');
          form.reset();
        } else {
          const err = (json && json.error) ? json.error : 'Failed to send message. Please try again later.';
          showMessage(err);
        }
      } catch (err) {
        console.error(err);
        showMessage('Network error. Please try again later.');
      } finally {
        submitBtn.disabled = false;
        submitBtn.textContent = origText;
      }
    });
  });
  </script>
</body>
</html>
