<%
  // Small inline SVG icons (stroke style, 24x24)
  const icon = {
    arrowDown: '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>',
    calendar: '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="17" rx="2"/><path d="M3 10h18"/></svg>',
    mail: '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 6L2 7"/></svg>',
    menu: '<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h16"/></svg>',
    close: '<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg>',
    researchgate: '<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="3" fill="currentColor" opacity=".85"/><text x="12" y="16" text-anchor="middle" font-size="9" font-family="Arial" font-weight="700" fill="#3a2e25">R<tspan font-size="6" dy="-3">G</tspan></text></svg>',
    scholar: '<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" aria-hidden="true"><path d="M12 3 1 9l11 6 9-4.91V17h2V9L12 3z"/><path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82z"/></svg>',
    linkedin: '<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" aria-hidden="true"><path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z"/></svg>',
    x: '<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" aria-hidden="true"><path d="M18.9 2H22l-6.77 7.74L23.2 22h-6.26l-4.9-6.41L6.44 22H3.3l7.24-8.28L2.8 2h6.42l4.43 5.86L18.9 2zm-1.1 18h1.74L7.33 3.9H5.47L17.8 20z"/></svg>'
  };
%>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title><%= site.meta.title %></title>
  <meta name="description" content="<%= site.meta.description %>" />
  <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=Lora:wght@500;600;700&family=Source+Sans+3:wght@400;600;700&family=Noto+Sans+Devanagari:wght@400;600;700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="/css/styles.css" />
</head>
<body>

  <!-- ============ HEADER ============ -->
  <header class="site-header" id="top">
    <div class="header-inner">
      <a href="/" class="brand">
        <span class="brand-name"><%= site.brand.name %></span>
        <span class="brand-tagline"><%= site.brand.tagline %></span>
      </a>

      <nav class="main-nav" aria-label="Main">
        <% site.nav.forEach(item => { %>
          <a href="<%= item.href %>"><%= item.label %></a>
        <% }) %>
      </nav>

      <button class="menu-toggle" aria-label="Open menu" aria-expanded="false" aria-controls="mobile-nav">
        <span class="icon-open"><%- icon.menu %></span>
        <span class="icon-close"><%- icon.close %></span>
      </button>
    </div>

    <nav class="mobile-nav" id="mobile-nav" aria-label="Mobile">
      <% site.nav.forEach(item => { %>
        <a href="<%= item.href %>"><%= item.label %></a>
      <% }) %>
    </nav>
  </header>

  <main>

    <!-- ============ HERO ============ -->
    <section id="home" class="hero">
      <div class="hero-circle hero-circle--top" aria-hidden="true"></div>
      <div class="hero-circle hero-circle--bottom" aria-hidden="true"></div>

      <div class="container-wide hero-inner">
        <div class="hero-text reveal">
          <p class="eyebrow"><%= site.hero.eyebrow %></p>
          <h1 class="hero-name"><%= site.hero.name %></h1>
          <p class="hero-role"><%= site.hero.role %></p>
          <p class="hero-position"><%= site.hero.position %></p>
          <p class="hero-intro"><%= site.hero.intro %></p>
          <a href="<%= site.hero.buttonHref %>" class="btn btn-primary">
            <%= site.hero.buttonLabel %> <%- icon.arrowDown %>
          </a>
        </div>

        <div class="hero-photo reveal">
          <div class="photo-ring">
            <img src="<%= site.hero.image %>" alt="<%= site.hero.imageAlt %>" />
          </div>
        </div>
      </div>
    </section>

    <!-- ============ ABOUT ============ -->
    <section id="bio" class="section bg-cream">
      <div class="container-narrow">
        <div class="section-head reveal">
          <p class="eyebrow"><%= site.about.eyebrow %></p>
          <h2 class="section-title"><%= site.about.title %></h2>
        </div>

        <div class="about-card reveal">
          <div class="about-text">
            <% site.about.paragraphs.forEach(p => { %>
              <p><%= p %></p>
            <% }) %>
          </div>
          <div class="about-image">
            <img src="<%= site.about.image %>" alt="<%= site.about.imageAlt %>" loading="lazy" />
          </div>
        </div>

        <blockquote class="about-quote reveal">“<%= site.about.quote %>”</blockquote>
      </div>
    </section>

    <!-- ============ RESEARCH ============ -->
    <section id="research" class="section bg-light">
      <div class="container-wide">
        <div class="section-head reveal">
          <p class="eyebrow"><%= site.research.eyebrow %></p>
          <h2 class="section-title"><%= site.research.title %></h2>
        </div>

        <div class="research-grid">
          <% site.research.areas.forEach(area => { %>
            <article class="research-card reveal">
              <h3><%= area.title %><% if (area.subtitle) { %><br /><%= area.subtitle %><% } %></h3>
              <p><%= area.text %></p>
            </article>
          <% }) %>
        </div>
      </div>
    </section>

    <!-- ============ QUOTE BANNER ============ -->
    <section class="banner">
      <p class="banner-text reveal"><%= site.banner %></p>
    </section>

    <!-- ============ PUBLICATIONS ============ -->
    <section id="publications" class="section bg-cream">
      <div class="container-narrow">
        <div class="section-head reveal">
          <p class="eyebrow"><%= site.publications.eyebrow %></p>
          <h2 class="section-title"><%= site.publications.title %></h2>
        </div>

        <div class="pub-list">
          <% site.publications.items.forEach(pub => { %>
            <a href="<%= pub.link %>" class="pub-card reveal">
              <span class="pill pill-solid"><%= pub.type %></span>
              <div class="pub-body">
                <h3><%= pub.title %></h3>
                <p class="pub-venue"><%= pub.venue %></p>
                <p class="pub-authors"><%= pub.authors %></p>
              </div>
            </a>
          <% }) %>
        </div>
      </div>
    </section>

    <!-- ============ LECTURES ============ -->
    <section id="lectures" class="section bg-light">
      <div class="container-narrow">
        <div class="section-head reveal">
          <p class="eyebrow"><%= site.lectures.eyebrow %></p>
          <h2 class="section-title"><%= site.lectures.title %></h2>
        </div>

        <ol class="timeline">
          <% site.lectures.items.forEach(talk => { %>
            <li class="timeline-item reveal">
              <span class="timeline-dot"><%- icon.calendar %></span>
              <div class="talk-card">
                <div class="talk-meta">
                  <span class="pill pill-soft"><%= talk.type %></span>
                  <span class="talk-date"><%= talk.date %></span>
                </div>
                <h3><%= talk.title %></h3>
                <p class="talk-venue">
                  <% talk.venue.forEach((line, i) => { %><%= line %><% if (i < talk.venue.length - 1) { %><br /><% } %><% }) %>
                </p>
              </div>
            </li>
          <% }) %>
        </ol>
      </div>
    </section>

    <!-- ============ SOCIAL ACTIVITIES ============ -->
    <section id="activities" class="section bg-cream">
      <div class="container-wide">
        <div class="section-head reveal">
          <p class="eyebrow"><%= site.activities.eyebrow %></p>
          <h2 class="section-title"><%= site.activities.title %></h2>
        </div>

        <div class="activity-grid">
          <% site.activities.items.forEach(act => { %>
            <article class="activity-card reveal">
              <div class="activity-image">
                <img src="<%= act.image %>" alt="<%= act.title %>" loading="lazy" />
              </div>
              <div class="activity-body">
                <h3><%= act.title %></h3>
                <p><%= act.text %></p>
              </div>
            </article>
          <% }) %>
        </div>
      </div>
    </section>

    <!-- ============ GALLERY ============ -->
    <section id="gallery" class="section bg-light">
      <div class="container-wide">
        <div class="section-head reveal">
          <p class="eyebrow"><%= site.gallery.eyebrow %></p>
          <h2 class="section-title"><%= site.gallery.title %></h2>
          <p class="section-intro"><%= site.gallery.intro %></p>
        </div>

        <div class="gallery-grid">
          <% site.gallery.items.forEach(item => { %>
            <figure class="gallery-item <%= item.tall ? 'is-tall' : '' %> reveal">
              <img src="<%= item.image %>" alt="<%= item.caption %>" loading="lazy" />
              <figcaption><%= item.caption %></figcaption>
            </figure>
          <% }) %>
        </div>
      </div>
    </section>

    <!-- ============ CONTACT ============ -->
    <section id="contact" class="section bg-cream">
      <div class="container-contact">
        <div class="contact-card reveal">
          <div class="contact-left">
            <p class="eyebrow"><%= site.contact.eyebrow %></p>
            <h2 class="section-title"><%= site.contact.title %></h2>
            <p class="contact-lines">
              <% site.contact.lines.forEach((line, i) => { %><%= line %><% if (i < site.contact.lines.length - 1) { %><br /><% } %><% }) %>
            </p>
            <a href="<%= site.contact.emailHref %>" class="btn btn-primary btn-email">
              <%- icon.mail %> <%= site.contact.emailLabel %>
            </a>
          </div>

          <div class="contact-right">
            <div class="info-box">
              <p class="eyebrow">Office</p>
              <p class="info-value"><%= site.contact.office %></p>
            </div>
            <div class="info-box">
              <p class="eyebrow">Academic Profiles</p>
              <div class="profile-links">
                <% site.contact.profiles.forEach(p => { %>
                  <a href="<%= p.href %>" target="_blank" rel="noopener"><%= p.label %></a>
                <% }) %>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

  </main>

  <!-- ============ FOOTER ============ -->
  <footer class="site-footer">
    <div class="container-wide">
      <div class="footer-grid">
        <div>
          <p class="footer-name"><%= site.footer.name %></p>
          <p class="footer-about"><%= site.footer.about %></p>
          <a href="mailto:<%= site.footer.email %>" class="footer-email"><%= site.footer.email %></a>
        </div>

        <div>
          <p class="footer-heading">Quick Links</p>
          <ul class="footer-links">
            <% site.nav.filter(n => n.label !== 'Home').forEach(item => { %>
              <li><a href="<%= item.href %>"><%= item.label %></a></li>
            <% }) %>
          </ul>
        </div>

        <div>
          <p class="footer-heading">Connect</p>
          <ul class="footer-links footer-social">
            <% site.footer.social.forEach(s => { %>
              <li><a href="<%= s.href %>" target="_blank" rel="noopener"><%- icon[s.icon] %> <%= s.label %></a></li>
            <% }) %>
          </ul>
        </div>
      </div>

      <div class="footer-bottom">
        <span><%= site.footer.copyright %></span>
        <span><%= site.meta.domain %></span>
      </div>
    </div>
  </footer>

  <!-- ============ COOKIE BANNER ============ -->
  <div class="cookie-banner" id="cookie-banner" role="dialog" aria-label="Cookie consent" hidden>
    <div class="cookie-text">
      <p class="cookie-title"><%= site.cookie.title %></p>
      <p><%= site.cookie.text %></p>
    </div>
    <div class="cookie-actions">
      <button type="button" class="btn-cookie btn-decline" data-consent="declined">Decline</button>
      <button type="button" class="btn-cookie btn-accept" data-consent="accepted">Accept</button>
    </div>
  </div>

  <script src="/js/main.js"></script>
</body>
</html>
