<!doctype html>
<html lang="en" class="scroll-smooth">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Jwalant Baria – Academic Website</title>
    <meta name="description" content="Official academic website of Jwalant Baria: teaching, research, administrative activities, and contact." />

    <!-- Tailwind (CDN) -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      // Tailwind dark mode setup
      tailwind.config = { darkMode: 'class' }
    </script>

    <!-- Alpine.js for interactivity -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

    <!-- Site config -->
    <script src="./config.js"></script>
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4118154766510009"
     crossorigin="anonymous"></script>

    <style>
      .card { @apply rounded-2xl border bg-white/70 dark:bg-neutral-900/70 shadow-sm p-5; }
      .badge { @apply inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium bg-white/60 dark:bg-neutral-900/60; }
      .navlink { @apply py-2 text-sm hover:underline underline-offset-4; }
    </style>
  </head>

  <body x-data="siteApp()" x-init="init()" :class="theme" class="min-h-screen bg-gradient-to-b from-white to-neutral-50 dark:from-neutral-950 dark:to-neutral-950 text-neutral-900 dark:text-neutral-100">
    <!-- Navbar -->
    <div class="sticky top-0 z-40 border-b backdrop-blur bg-white/70 dark:bg-neutral-950/70">
      <div class="max-w-6xl mx-auto px-4 h-16 flex items-center justify-between">
        <a href="#about" class="font-semibold tracking-tight" x-text="profile.name">Jwalant Baria</a>
        <div class="flex items-center gap-2">
          <button @click="toggleTheme" aria-label="Toggle theme" class="h-9 w-9 inline-flex items-center justify-center rounded-xl border">
            <span x-show="theme==='dark'">☀️</span>
            <span x-show="theme==='light'">🌙</span>
          </button>
          <button class="h-9 w-9 inline-flex items-center justify-center rounded-xl border md:hidden" @click="open = !open">
            <span x-show="!open">☰</span><span x-show="open">✕</span>
          </button>
        </div>
      </div>
      <div class="md:block border-t md:border-0" :class="open ? 'block' : 'hidden'">
        <div class="max-w-6xl mx-auto px-4 py-2 flex flex-col md:flex-row md:items-center md:gap-6">
          <a href="#about" class="navlink" @click="open=false">About</a>
          <a href="#teaching" class="navlink" @click="open=false">Teaching</a>
          <a href="#admin" class="navlink" @click="open=false">Administrative</a>
          <a href="#research" class="navlink" @click="open=false">Research</a>
          <a href="#contact" class="navlink" @click="open=false">Contact</a>
          <div class="md:ml-auto flex items-center gap-3 py-2">
            <a :href="profile.cv" class="text-sm inline-flex items-center gap-1 rounded-xl border px-3 py-1.5">⬇️ CV</a>
            <a :href="profile.scholar" class="text-sm inline-flex items-center gap-1 rounded-xl border px-3 py-1.5">🎓 Scholar</a>
            <a :href="profile.linkedin" class="text-sm inline-flex items-center gap-1 rounded-xl border px-3 py-1.5">🌐 LinkedIn</a>
          </div>
        </div>
      </div>
    </div>

    <!-- About -->
    <section id="about" class="scroll-mt-24 py-12">
      <div class="max-w-6xl mx-auto px-4">
        <div class="grid md:grid-cols-3 gap-6 items-center">
          <div class="md:col-span-2">
            <h1 class="text-3xl md:text-5xl font-semibold tracking-tight" x-text="profile.name"></h1>
            <p class="mt-3 text-base md:text-lg text-neutral-600 dark:text-neutral-300">
              <span x-text="profile.role"></span> · <span x-text="profile.org"></span>
            </p>
            <p class="mt-4 text-neutral-700 dark:text-neutral-300 leading-relaxed" x-text="profile.bio"></p>
            <div class="mt-5 flex flex-wrap gap-2">
              <span class="badge">Blockchain</span>
              <span class="badge">Cyber Security</span>
              <span class="badge">Distributed Systems</span>
              <span class="badge">Web Programming</span>
            </div>
          </div>
          <div class="card md:col-span-1">
            <h3 class="font-medium mb-3">Quick Links</h3>
            <div class="space-y-2 text-sm">
              <a class="flex items-center gap-2 hover:underline" :href="profile.scholar">🎓 Google Scholar</a>
              <a class="flex items-center gap-2 hover:underline" :href="profile.orcid">🧬 ORCID</a>
              <a class="flex items-center gap-2 hover:underline" :href="profile.researchgate">🧪 ResearchGate</a>
              <a class="flex items-center gap-2 hover:underline" :href="profile.linkedin">🌐 LinkedIn</a>
            </div>
            <div class="mt-4 text-sm space-y-2">
              <div class="flex items-center gap-2">✉️ <a class="hover:underline" :href="'mailto:'+profile.email" x-text="profile.email"></a></div>
              <div class="flex items-center gap-2">📞 <span x-text="profile.phone"></span></div>
              <div class="flex items-center gap-2">📍 <span x-text="profile.location"></span></div>
            </div>
          </div>
        </div>

        <div class="card mt-6">
          <div class="grid md:grid-cols-3 gap-5">
            <div>
              <h4 class="font-medium mb-2">Academic Summary</h4>
              <p class="text-sm text-neutral-700 dark:text-neutral-300">
                Teaching & mentoring undergraduate students; coordinating NBA SAR preparation and industry‑linked trainings; research in blockchain privacy and cyber security education.
              </p>
            </div>
            <div>
              <h4 class="font-medium mb-2">Current Focus</h4>
              <ul class="text-sm list-disc pl-5 space-y-1">
                <li>Publishing EMR privacy results on Ethereum testnets</li>
                <li>Designing CO‑PO mapping tools & rubrics</li>
                <li>Cyber Security lab case‑studies for BE 5th sem</li>
              </ul>
            </div>
            <div>
              <h4 class="font-medium mb-2">Quick Actions</h4>
              <div class="flex flex-wrap gap-2">
                <a href="#teaching" class="inline-flex items-center gap-2 rounded-xl border px-3 py-2">📘 Teaching</a>
                <a href="#research" class="inline-flex items-center gap-2 rounded-xl border px-3 py-2">🎓 Research</a>
                <a href="#contact" class="inline-flex items-center gap-2 rounded-xl border px-3 py-2">✉️ Contact</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Teaching -->
    <section id="teaching" class="scroll-mt-24 py-12">
      <div class="max-w-6xl mx-auto px-4">
        <div class="flex items-center gap-3 mb-6">
          <span class="inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-neutral-100 dark:bg-neutral-800">📚</span>
          <h2 class="text-2xl md:text-3xl font-semibold tracking-tight">Teaching Related Activities</h2>
        </div>
        <div class="grid md:grid-cols-2 gap-5" id="courses">
          <!-- Rendered by Alpine from config -->
          <template x-for="c in courses" :key="c.code">
            <div class="card">
              <div class="flex items-start justify-between gap-3">
                <div>
                  <h3 class="font-semibold text-lg" x-text="c.name"></h3>
                  <p class="text-sm text-neutral-600 dark:text-neutral-400"><span x-text="c.code"></span> • <span x-text="c.term"></span></p>
                </div>
                <span class="badge">Active</span>
              </div>
              <ul class="list-disc pl-5 mt-3 text-sm space-y-1">
                <template x-for="co in c.cos"><li x-text="co"></li></template>
              </ul>
              <div class="flex flex-wrap gap-2 mt-4">
                <template x-for="r in c.resources">
                  <a :href="r.href" class="text-sm inline-flex items-center gap-1 rounded-xl border px-3 py-1.5 hover:underline">🔗 <span x-text="r.label"></span></a>
                </template>
              </div>
            </div>
          </template>
        </div>
      </div>
    </section>

    <!-- Administrative -->
    <section id="admin" class="scroll-mt-24 py-12">
      <div class="max-w-6xl mx-auto px-4">
        <div class="flex items-center gap-3 mb-6">
          <span class="inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-neutral-100 dark:bg-neutral-800">🏫</span>
          <h2 class="text-2xl md:text-3xl font-semibold tracking-tight">Administrative Activities</h2>
        </div>
        <div class="grid md:grid-cols-2 gap-5">
          <div class="card">
            <h3 class="font-medium mb-3">Departmental Roles</h3>
            <ul class="space-y-3 text-sm">
              <li><strong>NBA SAR Coordinator:</strong> CO/PO/PSO attainment (Sections 8.1–8.4), audits, documentation.</li>
              <li><strong>Councilor‑cum‑Mentor (CCM):</strong> Mentoring 29 students; roadmap, remedial planning, parent connect.</li>
              <li><strong>RUSA/IGTR Training Coordination:</strong> Industry training scheduling, communications, logistics.</li>
              <li><strong>Procurement & CWAN:</strong> UPS, CCTV, switches; GeM specifications; lab allocations.</li>
              <li><strong>Placement/Events:</strong> Dept‑level fairs, expert talks, workshops, industrial visits.</li>
            </ul>
          </div>
          <div class="card">
            <h3 class="font-medium mb-3">Events Organized</h3>
            <ul class="space-y-3 text-sm">
              <li><a class="hover:underline" href="#">Expert Talk – Web Mining</a> <span class="text-neutral-600 dark:text-neutral-400">• Apr 2025 • Organizer</span></li>
              <li><a class="hover:underline" href="#">Cyber Security Club Launch</a> <span class="text-neutral-600 dark:text-neutral-400">• Mar 2025 • Coordinator</span></li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <!-- Research -->
    <section id="research" class="scroll-mt-24 py-12" x-data="{ q:'', year:'all' }">
      <div class="max-w-6xl mx-auto px-4">
        <div class="flex items-center gap-3 mb-6">
          <span class="inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-neutral-100 dark:bg-neutral-800">🔬</span>
          <h2 class="text-2xl md:text-3xl font-semibold tracking-tight">Research</h2>
        </div>

        <div class="card mb-6">
          <h3 class="font-medium mb-3">Areas of Interest</h3>
          <div class="flex flex-wrap gap-2">
            <template x-for="a in research.areas"><span class="badge" x-text="a"></span></template>
          </div>
        </div>

        <div class="card mb-6">
          <div class="flex flex-col md:flex-row md:items-center gap-3 mb-4">
            <div class="relative md:w-1/2">
              <input placeholder="Search publications (title, venue, tag)"
                     class="w-full pl-3 pr-3 py-2 rounded-xl border bg-transparent"
                     x-model="q" />
            </div>
            <div class="relative md:w-48">
              <select class="w-full pl-3 pr-3 py-2 rounded-xl border bg-transparent" x-model="year">
                <option value="all">All years</option>
                <template x-for="y in [...new Set(research.publications.map(p => p.year))].sort((a,b)=>b-a)">
                  <option :value="y" x-text="y"></option>
                </template>
              </select>
            </div>
            <span class="text-sm text-neutral-600 dark:text-neutral-400" 
              x-text="filteredPublications(q,year).length + ' result(s)'"></span>
          </div>

          <div class="space-y-4">
            <template x-for="p in filteredPublications(q,year)">
              <div class="grid md:grid-cols-[64px_1fr] gap-3 md:gap-5 items-start">
                <div class="h-16 w-16 rounded-xl border flex items-center justify-center font-semibold" x-text="p.year"></div>
                <div>
                  <a :href="p.url || '#'" class="font-medium hover:underline" x-text="p.title"></a>
                  <p class="text-sm text-neutral-600 dark:text-neutral-400" x-text="p.venue"></p>
                  <div class="mt-2 flex flex-wrap gap-2">
                    <template x-for="t in (p.tags || [])"><span class="badge" x-text="t"></span></template>
                  </div>
                  <div class="mt-2 text-xs text-neutral-500" x-show="p.doi">DOI: <span x-text="p.doi"></span></div>
                </div>
              </div>
            </template>
          </div>
        </div>

        <div class="card">
          <h3 class="font-medium mb-3">Projects & Grants</h3>
          <div class="grid md:grid-cols-2 gap-4">
            <template x-for="pr in research.projects">
              <div class="p-3 rounded-xl bg-neutral-50 dark:bg-neutral-900/50 border">
                <p class="font-medium" x-text="pr.title"></p>
                <p class="text-sm text-neutral-600 dark:text-neutral-400" x-text="pr.desc"></p>
                <div class="mt-2 flex items-center gap-2 flex-wrap">
                  <span class="badge" x-text="pr.year"></span>
                  <template x-for="l in pr.links">
                    <a :href="l.href" class="text-xs inline-flex items-center gap-1 rounded-xl border px-2.5 py-1 hover:underline">🔗 <span x-text="l.label"></span></a>
                  </template>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </section>

    <!-- Contact -->
    <section id="contact" class="scroll-mt-24 py-12">
      <div class="max-w-6xl mx-auto px-4">
        <div class="flex items-center gap-3 mb-6">
          <span class="inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-neutral-100 dark:bg-neutral-800">📞</span>
          <h2 class="text-2xl md:text-3xl font-semibold tracking-tight">Contact Me</h2>
        </div>
        <div class="grid md:grid-cols-2 gap-5">
          <div class="card">
            <h3 class="font-medium mb-3">Get in touch</h3>
            <form :action="contact.formAction" method="POST" class="space-y-3">
              <div>
                <label class="text-sm">Name</label>
                <input name="name" required class="w-full mt-1 rounded-xl border px-3 py-2 bg-transparent"/>
              </div>
              <div>
                <label class="text-sm">Email</label>
                <input name="email" type="email" required class="w-full mt-1 rounded-xl border px-3 py-2 bg-transparent"/>
              </div>
              <div>
                <label class="text-sm">Message</label>
                <textarea name="message" required rows="4" class="w-full mt-1 rounded-xl border px-3 py-2 bg-transparent"></textarea>
              </div>
              <button class="inline-flex items-center gap-2 rounded-xl border px-4 py-2">✉️ Send</button>
              <p class="text-xs text-neutral-500">This uses Formspree—update the endpoint in <code>config.js</code>.</p>
            </form>
          </div>
          <div class="card">
            <h3 class="font-medium mb-3">Contacts</h3>
            <div class="space-y-2 text-sm">
              <div class="flex items-center gap-2">✉️ <a class="hover:underline" :href="'mailto:'+profile.email" x-text="profile.email"></a></div>
              <div class="flex items-center gap-2">📞 <span x-text="profile.phone"></span></div>
              <div class="flex items-center gap-2">📍 <span x-text="profile.location"></span></div>
            </div>
            <div class="mt-6">
              <img src="./assets/sitemap.png" alt="Sitemap" class="rounded-xl border" onerror="this.style.display='none'"/>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Footer -->
    <footer class="mt-16 border-t py-8">
      <div class="max-w-6xl mx-auto px-4 text-sm text-neutral-600 dark:text-neutral-400 flex flex-col md:flex-row items-center justify-between gap-2">
        <p>© <span x-text="new Date().getFullYear()"></span> <span x-text="profile.name"></span>. All rights reserved.</p>
        <div class="flex items-center gap-3">
          <a class="hover:underline" :href="profile.scholar">Scholar</a>
          <a class="hover:underline" :href="profile.orcid">ORCID</a>
          <a class="hover:underline" :href="profile.researchgate">ResearchGate</a>
          <a class="hover:underline" :href="profile.linkedin">LinkedIn</a>
        </div>
      </div>
    </footer>

    <script>
      function siteApp() {
        return {
          // state
          open: false,
          theme: 'light',
          profile: {},
          courses: [],
          research: { areas: [], publications: [], projects: [] },
          contact: { formAction: '#' },
          // init
          init() {
            const stored = localStorage.getItem('theme');
            const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
            this.theme = stored || (prefersDark ? 'dark' : 'light');
            const cfg = window.SITE_CONFIG || {};
            this.profile = cfg.profile || this.profile;
            this.courses = cfg.courses || this.courses;
            this.research = cfg.research || this.research;
            this.contact = cfg.contact || this.contact;
          },
          toggleTheme() {
            this.theme = this.theme === 'dark' ? 'light' : 'dark';
            document.documentElement.classList.toggle('dark', this.theme === 'dark');
            localStorage.setItem('theme', this.theme);
          },
          filteredPublications(q, year) {
            const test = (p) => {
              const hay = `${p.title} ${p.venue} ${(p.tags||[]).join(' ')}`.toLowerCase();
              const okYear = (year === 'all') || (String(p.year) === String(year));
              return okYear && hay.includes((q||'').toLowerCase());
            };
            return this.research.publications.filter(test);
          }
        };
      }
    </script>
  </body>
</html>