<%- include('partials/head', {title: 'Vianexu — Automation & AI'}) %>
<%- include('partials/nav') %>

<!-- HERO -->
<section id="hero">
  <div class="blob blob-1"></div>
  <div class="blob blob-2"></div>
  <div class="blob blob-3"></div>
  <div class="hero-content">
    <p class="hero-label"><%= t.hero.label %></p>
    <h1 class="hero-headline">
      <%= t.hero.headline1 %><br>
      <%= t.hero.headline2 %> <span class="rotating"><%= t.hero.rotating[0] %></span>
    </h1>
    <p class="hero-sub"><%= t.hero.sub %></p>
    <a href="#cta" class="btn btn-accent btn-lg hero-cta"><%= t.hero.cta %></a>
  </div>
  <div class="scroll-hint">scroll</div>
</section>

<!-- MARQUEE -->
<div class="marquee-wrap">
  <div class="marquee">
    <% t.services.items.concat(t.services.items).forEach(s => { %>
      <span><%= s.title.split(' ').slice(0,-1).join(' ') %> <b><%= s.title.split(' ').slice(-1)[0] %></b></span>
    <% }) %>
  </div>
</div>

<!-- SOLUTIONS / PLATFORMS -->
<section id="solutions">
  <div class="section-label"><%= t.solutions.label %></div>
  <div class="solutions-head">
    <h2 class="solutions-headline"><%= t.solutions.headline %></h2>
    <p class="solutions-sub"><%= t.solutions.sub %></p>
  </div>
  <div class="solutions-grid">
    <% t.solutions.items.forEach((s, idx) => { %>
    <div class="sol-card sol-card--<%= s.id %> <%= s.status %> reveal" style="--delay:<%=idx*80%>ms">
      <div class="sol-card-top">
        <div class="sol-icon sol-icon--<%= s.id %>">
          <% if (s.id === 'instagram') { %>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
            <defs><linearGradient id="ig-grad" x1="0%" y1="100%" x2="100%" y2="0%"><stop offset="0%" stop-color="#f09433"/><stop offset="50%" stop-color="#dc2743"/><stop offset="100%" stop-color="#bc1888"/></linearGradient></defs>
            <rect x="2" y="2" width="20" height="20" rx="6" stroke="url(#ig-grad)" stroke-width="2"/>
            <circle cx="12" cy="12" r="4" stroke="url(#ig-grad)" stroke-width="2"/>
            <circle cx="17.5" cy="6.5" r="1.2" fill="url(#ig-grad)"/>
          </svg>
          <% } else if (s.id === 'google') { %>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
            <path d="M22 12.2c0-.7-.1-1.4-.2-2H12v3.8h5.6c-.2 1.3-1 2.4-2.1 3.1v2.6h3.4c2-1.8 3.1-4.5 3.1-7.5z" fill="#4285F4"/>
            <path d="M12 23c2.7 0 5-.9 6.9-2.4l-3.4-2.6c-.9.6-2.1 1-3.5 1-2.7 0-5-1.8-5.8-4.3H2.7v2.7C4.6 20.9 8.1 23 12 23z" fill="#34A853"/>
            <path d="M6.2 14.7c-.2-.6-.3-1.2-.3-1.9s.1-1.3.3-1.9V8.2H2.7C2 9.6 1.5 11.3 1.5 13s.5 3.4 1.2 4.8l3.5-3.1z" fill="#FBBC05"/>
            <path d="M12 5.8c1.5 0 2.9.5 3.9 1.5l2.9-2.9C17 2.9 14.7 2 12 2 8.1 2 4.6 4.1 2.7 7.2l3.5 2.7C7 7.6 9.3 5.8 12 5.8z" fill="#EA4335"/>
          </svg>
          <% } else if (s.id === 'whatsapp') { %>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
            <path d="M12 2C6.477 2 2 6.477 2 12c0 1.89.525 3.66 1.438 5.168L2 22l4.94-1.42A9.953 9.953 0 0012 22c5.523 0 10-4.477 10-10S17.523 2 12 2z" fill="#25D366"/>
            <path d="M16.5 14.2c-.3-.15-1.7-.84-1.96-.94-.27-.1-.46-.15-.65.15-.2.3-.75.94-.92 1.13-.17.2-.34.22-.63.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.76-1.66-2.06-.17-.3-.02-.46.13-.6.13-.13.3-.34.44-.51.15-.17.2-.3.3-.5.1-.2.05-.38-.02-.53-.08-.15-.66-1.58-.9-2.17-.24-.57-.48-.5-.66-.51h-.56c-.2 0-.51.07-.78.38-.27.3-1.02 1-1.02 2.43s1.05 2.82 1.2 3.01c.14.2 2.07 3.16 5.01 4.43 2.94 1.27 2.94.85 3.47.8.53-.05 1.7-.7 1.95-1.37.24-.67.24-1.25.17-1.37-.08-.12-.27-.2-.57-.35z" fill="white"/>
          </svg>
          <% } else if (s.id === 'telegram') { %>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
            <circle cx="12" cy="12" r="10" fill="#229ED9"/>
            <path d="M17.47 7.1L5.37 11.7c-.83.32-.82.77.15 1.03l3.18.99 1.23 3.76c.17.47.09.65.59.65.39 0 .56-.18.78-.39l1.87-1.82 3.89 2.87c.72.4 1.23.19 1.41-.67l2.56-12.05c.26-1.04-.4-1.51-1.06-1.97z" fill="white"/>
          </svg>
          <% } %>
        </div>
        <span class="sol-tag tag-<%= s.status %>"><%= s.tag %></span>
      </div>
      <h3 class="sol-title"><%= s.title %></h3>
      <p class="sol-desc"><%= s.desc %></p>
      <ul class="sol-features">
        <% s.features.forEach(f => { %><li><%= f %></li><% }) %>
      </ul>
      <a href="<%= s.href %>" class="sol-cta-btn <%= s.status === 'active' ? 'sol-cta-btn--active' : 'sol-cta-btn--soon' %>" <%= s.status === 'active' && s.href && !s.href.startsWith('/') ? 'target="_blank" rel="noopener"' : '' %>><%= s.cta %> <% if (s.status === 'active') { %>→<% } %></a>
    </div>
    <% }) %>
  </div>
</section>

<!-- WHO WE ARE -->
<section id="about">
  <div class="section-label"><%= t.about.label %></div>
  <div class="about-grid">
    <div class="about-text reveal">
      <h2 class="about-headline"><%= t.about.headline %></h2>
      <p class="about-body"><%= t.about.body %></p>
      <p class="about-body"><%= t.about.body2 %></p>
    </div>
    <div class="about-stats reveal" style="--delay:150ms">
      <div class="about-stat">
        <div class="about-stat-value"><%= t.about.stat1_value %></div>
        <div class="about-stat-label"><%= t.about.stat1_label %></div>
      </div>
      <div class="about-stat">
        <div class="about-stat-value"><%= t.about.stat2_value %></div>
        <div class="about-stat-label"><%= t.about.stat2_label %></div>
      </div>
      <div class="about-stat">
        <div class="about-stat-value"><%= t.about.stat3_value %></div>
        <div class="about-stat-label"><%= t.about.stat3_label %></div>
      </div>
    </div>
  </div>
</section>

<!-- WORK / CASES -->
<section id="work">
  <div class="section-label"><%= t.work.label %></div>
  <p class="work-sub"><%= t.work.sub %></p>
  <div class="work-grid">
    <% t.work.cases.forEach((c, idx) => { %>
    <a href="<%= c.url %>" target="_blank" rel="noopener" class="work-card reveal" style="--delay:<%=idx*80%>ms">
      <div class="work-card-img" style="background:<%= c.bg %>">
        <% if (c.img) { %>
          <img src="/images/cases/<%= c.img %>" alt="<%= c.name %>" class="work-logo" />
        <% } else { %>
          <div class="work-logo-text"><%= c.logoText %></div>
        <% } %>
        <span class="work-tag-float"><%= c.tag %></span>
      </div>
      <div class="work-card-body">
        <h3 class="work-title"><%= c.name %></h3>
        <p class="work-desc"><%= c.desc %></p>
        <div class="work-footer">
          <div class="work-chips">
            <% c.chips.forEach(ch => { %><span class="chip"><%= ch %></span><% }) %>
          </div>
          <span class="work-visit"><%= c.domain %> ↗</span>
        </div>
      </div>
    </a>
    <% }) %>
  </div>
</section>

<!-- CTA -->
<section id="cta">
  <h2><%= t.cta.headline1 %><br><span class="accent"><%= t.cta.headline2 %></span></h2>
  <p><%= t.cta.sub %></p>
  <div class="cta-group">
    <a href="https://wa.me/351923199040" class="btn btn-accent btn-lg"><%= t.cta.whatsapp %></a>
    <a href="mailto:info@vianexu.com"    class="btn btn-ghost  btn-lg"><%= t.cta.email %></a>
  </div>
</section>

<%- include('partials/footer') %>

<!-- COOKIE BANNER -->
<div id="cookie-banner" class="cookie-banner">
  <p><%= t.cookie.text %> <a href="/<%= lang %>/privacy"><%= t.cookie.link %></a></p>
  <button class="cookie-btn" onclick="acceptCookies()"><%= t.cookie.btn %></button>
</div>

<script>
// ── Cookie consent ────────────────────────────────────────────────────────────
function acceptCookies() {
  const exp = new Date(); exp.setMonth(exp.getMonth() + 1);
  document.cookie = 'vx_ok=1;expires=' + exp.toUTCString() + ';path=/;SameSite=Lax';
  document.getElementById('cookie-banner').classList.remove('show');
}
if (!document.cookie.includes('vx_ok=1')) {
  setTimeout(() => document.getElementById('cookie-banner').classList.add('show'), 1200);
}

// ── Word rotator ──────────────────────────────────────────────────────────────
const words = <%- JSON.stringify(t.hero.rotating) %>;
let i = 0;
const el = document.querySelector('.rotating');
setInterval(() => {
  el.style.cssText = 'opacity:0;transform:translateY(10px);transition:all .35s';
  setTimeout(() => {
    i = (i+1) % words.length;
    el.textContent = words[i];
    el.style.cssText = 'opacity:1;transform:translateY(0);transition:all .35s';
  }, 350);
}, 2800);

// ── Scroll reveal ─────────────────────────────────────────────────────────────
const observer = new IntersectionObserver((entries) => {
  entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); observer.unobserve(e.target); } });
}, { threshold: 0.08 });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
</script>
</body></html>
