<!DOCTYPE html>
<html lang="<%= lang || 'en' %>">
<head>
    <!-- Basic Meta -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="index, follow">

    <!-- Primary SEO Tags -->
    <title><%= t.title || 'Vianexu | Web Design, Instagram Growth & AI Automation' %></title>
    <meta name="description" content="<%= t.description || 'Transform your digital presence with Vianexu. Expert web development, AI automation, and Instagram strategy.' %>">
    <meta name="keywords" content="web design, web development, AI automation, Instagram growth, digital agency, Azores Portugal, responsive websites, SEO optimization">

    <!-- Open Graph / Social -->
    <meta property="og:title" content="<%= t.title || 'Vianexu | Web Design, Instagram Growth & AI Automation' %>">
    <meta property="og:description" content="<%= t.description || 'Transform your digital presence with Vianexu. Expert web development, AI automation, and Instagram strategy.' %>">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://vianexu.com/<%= lang %>">
    <meta property="og:image" content="https://vianexu.com/src/assets/images/og-image.jpg">
    <meta property="og:site_name" content="Vianexu">

    <!-- Canonical & Hreflang -->
    <link rel="canonical" href="https://vianexu.com/<%= lang %>">
    <link rel="alternate" hreflang="x-default" href="https://vianexu.com/en">
    <link rel="alternate" hreflang="en" href="https://vianexu.com/en">
    <link rel="alternate" hreflang="pt" href="https://vianexu.com/pt">
    <link rel="alternate" hreflang="es" href="https://vianexu.com/es">
    <link rel="alternate" hreflang="nl" href="https://vianexu.com/nl">
    <link rel="alternate" hreflang="it" href="https://vianexu.com/it">
    <link rel="alternate" hreflang="fr" href="https://vianexu.com/fr">
    <link rel="alternate" hreflang="de" href="https://vianexu.com/de">

    <!-- Favicons (recommended to add real ones) -->
    <link rel="icon" href="/favicon.ico" type="image/x-icon">

    <!-- Styles -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-..." crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Tektur:wght@700&family=Poppins:wght@400;600&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">
    <style>
        body{font-family:'Poppins',sans-serif;font-weight:400;margin:0;color:#333;overflow-x:hidden}
        h1,h2,h3,h4,.navbar-brand,.nav-link{font-family:'Tektur',sans-serif;font-weight:700}
       
        .landing{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:linear-gradient(120deg,#ffd6d6,#ffe5b4,#fffacd,#d4f4dd,#cce0ff,#d1c4ff,#f5d9ff);background-size:600% 600%;animation:pastelFlow 20s linear infinite}
        @keyframes pastelFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
       
        .slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease-in-out;display:flex;align-items:center;justify-content:center;text-align:center;padding:2rem;pointer-events:none}
        .slide.active{opacity:1;pointer-events:all;z-index:1}
       
        .hero-title{font-size: clamp(2.5rem, 8vw, 4.5rem); line-height: 1.1; overflow: hidden;}
        .hero-title span { display: inline-block; transform: translateY(100%); transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1); }
        .slide.active .hero-title span { transform: translateY(0); }
        .slide.active .hero-title span:nth-child(2) { transition-delay: 0.1s; }
        .hero-desc { opacity: 0; transform: translateY(20px); transition: all 0.8s ease 0.4s; font-size: 1.25rem; color: #555; max-width: 700px; margin: 1.5rem auto; }
        .slide.active .hero-desc { opacity: 1; transform: translateY(0); }
        .gradient-text{background:linear-gradient(to right,#b19cd9,#7e57c2);-webkit-background-clip:text;color:transparent}
       
        .btn-pastel-purple{background:#b19cd9;border:none;color:#fff;border-radius:12px;transition:0.3s;font-weight:600;padding: 12px 32px}
        .btn-pastel-purple:hover{background:#7e57c2;color:#fff;transform:translateY(-2px)}
       
        .about-card{background:rgba(255,255,255,0.8);border-radius:24px;box-shadow:0 10px 30px rgba(0,0,0,0.05);backdrop-filter:blur(10px);border: 1px solid rgba(255,255,255,0.3)}
       
        .cube-container{height:350px;display:flex;align-items:center;justify-content:center}
        .c{width:180px;height:180px;transform-style:preserve-3d;animation:spin 30s linear infinite}
        .c i{position:absolute;inset:0;background:rgba(126,87,194,0.03);border:2px solid #7e57c2}
        .c i:nth-child(1){transform:translateZ(90px)}
        .c i:nth-child(2){transform:rotateY(90deg) translateZ(90px)}
        .c i:nth-child(3){transform:rotateY(180deg) translateZ(90px)}
        .c i:nth-child(4){transform:rotateY(-90deg) translateZ(90px)}
        .c i:nth-child(5){transform:rotateX(90deg) translateZ(90px)}
        .c i:nth-child(6){transform:rotateX(-90deg) translateZ(90px)}
        @keyframes spin{to{transform:rotateX(360deg) rotateY(360deg)}}
       
        .service-card, .example-card { background:#fff; border-radius:20px; padding:0; overflow:hidden; transition:.3s; height:100%; border: 1px solid #eee; }
        .service-card { padding: 2rem; }
        .service-card:hover, .example-card:hover { transform:translateY(-10px); border-color: #b19cd9; box-shadow:0 15px 35px rgba(126,87,194,0.1); }
        .service-icon{font-size:3.5rem;color:#7e57c2;margin-bottom:1rem}
       
        .example-img { width: 100%; height: 200px; object-fit: cover; border-bottom: 1px solid #eee; }
        .example-body { padding: 1.5rem; }
        .example-logo { max-height: 40px; margin-bottom: 1rem; }
        .form-control-custom{background:transparent;border:none;border-bottom:2px solid #b19cd9;border-radius:0;padding:0.8rem 0;transition:0.3s}
        .form-control-custom:focus{outline:none;border-bottom-color:#7e57c2;box-shadow:none}
       
        .mask{position:fixed;inset:0;background:rgba(255,255,255,0.8);z-index:10000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:.3s}
        .mask.show{opacity:1;visibility:visible}
        .toast-msg{position:fixed;top:100px;right:20px;background:#2e7d32;color:#fff;padding:12px 24px;border-radius:8px;z-index:10001;opacity:0;transform:translateX(20px);transition:.3s}
        .toast-msg.show{opacity:1;transform:translateX(0)}
       
        #cookie-banner{position:fixed;bottom:20px;left:20px;right:20px;background:#111;color:#fff;padding:1.2rem;border-radius:16px;z-index:9999;box-shadow:0 10px 30px rgba(0,0,0,0.2); transition: 0.3s;}
        .hidden { display: none !important; }
        footer { background: #111; color: #888; padding: 40px 0; }
    </style>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-light py-3 fixed-top shadow-sm">
    <div class="container">
        <a class="navbar-brand" href="/<%= lang %>" aria-label="Vianexu Home"><img src="https://vianexu.com/src/assets/images/l.png" alt="Vianexu Logo" style="height:35px"></a>
       
        <div class="d-flex align-items-center gap-2 order-lg-last">
            <div class="dropdown">
                <button class="btn btn-link p-0" id="langDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    <img id="currentFlag" src="https://flagcdn.com/w40/gb.png" alt="Current language flag" style="width:28px; border-radius:2px">
                </button>
                <ul class="dropdown-menu dropdown-menu-end shadow border-0 p-2" aria-labelledby="langDropdown">
                    <li><a class="dropdown-item d-flex align-items-center gap-2" href="/en" data-lang="en"><img src="https://flagcdn.com/w20/gb.png" alt=""> English</a></li>
                    <li><a class="dropdown-item d-flex align-items-center gap-2" href="/pt" data-lang="pt"><img src="https://flagcdn.com/w20/br.png" alt=""> Português</a></li>
                    <li><a class="dropdown-item d-flex align-items-center gap-2" href="/es" data-lang="es"><img src="https://flagcdn.com/w20/es.png" alt=""> Español</a></li>
                    <li><a class="dropdown-item d-flex align-items-center gap-2" href="/nl" data-lang="nl"><img src="https://flagcdn.com/w20/nl.png" alt=""> Nederlands</a></li>
                    <li><a class="dropdown-item d-flex align-items-center gap-2" href="/it" data-lang="it"><img src="https://flagcdn.com/w20/it.png" alt=""> Italiano</a></li>
                    <li><a class="dropdown-item d-flex align-items-center gap-2" href="/fr" data-lang="fr"><img src="https://flagcdn.com/w20/fr.png" alt=""> Français</a></li>
                    <li><a class="dropdown-item d-flex align-items-center gap-2" href="/de" data-lang="de"><img src="https://flagcdn.com/w20/de.png" alt=""> Deutsch</a></li>
                </ul>
            </div>
            <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#nav" aria-controls="nav" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="nav">
            <ul class="navbar-nav ms-auto gap-3">
                <li class="nav-item"><a class="nav-link" href="#services-section" data-i18n="nav_services">Services</a></li>
                <li class="nav-item"><a class="nav-link" href="#portfolio" data-i18n="nav_portfolio">Portfolio</a></li>
                <li class="nav-item"><a class="nav-link" href="#about" data-i18n="nav_about">About</a></li>
                <li class="nav-item"><a class="btn btn-pastel-purple" href="#contact" data-i18n="get_started">Get Started</a></li>
            </ul>
        </div>
    </div>
</nav>

<main>
    <section class="landing" aria-labelledby="hero-heading">
        <div class="slide active">
            <div class="container">
                <h1 id="hero-heading" class="hero-title" data-i18n-html="hero1_title">Transform Your<br><span class="gradient-text">Digital Presence</span></h1>
                <p class="hero-desc" data-i18n="hero1_desc">Websites, Instagram growth, and AI automation designed to scale your business.</p>
                <a href="#contact" class="btn btn-pastel-purple btn-lg mt-3" data-i18n="get_started">Get Started</a>
            </div>
        </div>
        <div class="slide">
            <div class="container">
                <h1 class="hero-title" data-i18n-html="hero2_title">Scale Your<br><span class="gradient-text">Operations</span></h1>
                <p class="hero-desc" data-i18n="hero2_desc">Intelligent systems that automate workflows and unlock massive growth.</p>
                <a href="#contact" class="btn btn-pastel-purple btn-lg mt-3" data-i18n="get_started">Get Started</a>
            </div>
        </div>
        <div class="slide">
            <div class="container">
                <h1 class="hero-title" data-i18n-html="hero3_title">Modern<br><span class="gradient-text">Websites</span></h1>
                <p class="hero-desc" data-i18n="hero3_desc">Conversion-focused, fast, responsive websites.</p>
                <a href="#contact" class="btn btn-pastel-purple btn-lg mt-3" data-i18n="get_started">Get Started</a>
            </div>
        </div>
    </section>

    <section class="py-5 bg-white" id="about">
        <div class="container py-5">
            <div class="about-card p-4 p-md-5">
                <div class="row align-items-center">
                    <div class="col-lg-5">
                        <div class="cube-container" aria-hidden="true">
                            <div class="c"><i></i><i></i><i></i><i></i><i></i><i></i></div>
                        </div>
                    </div>
                    <div class="col-lg-7">
                        <h2 class="about-title mb-3" data-i18n="about_title">About Vianexu</h2>
                        <p class="mb-4" data-i18n="about_text">A digital agency based in the Azores, helping brands globally bridge the gap between design and high-tech automation.</p>
                        <h3 class="h4" data-i18n="about_vitor_title">The Vision</h3>
                        <p data-i18n="about_vitor_text">Led by Vitor, we bring 9+ years of engineering and creative strategy to every project.</p>
                        <a href="#contact" class="btn btn-pastel-purple mt-3" data-i18n="lets_work">Work with us</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="py-5 bg-light" id="services-section">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 mb-3" data-i18n="what_we_do">What We Do</h2>
                <div style="width: 50px; height: 3px; background: #b19cd9; margin: 0 auto;"></div>
            </div>
            <div class="row g-4" id="services"></div>
        </div>
    </section>

    <section class="py-5 bg-white" id="portfolio">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5" data-i18n="real_projects">Featured Work</h2>
            </div>
            <div class="row g-4" id="examples"></div>
        </div>
    </section>

    <section class="py-5 bg-light" id="contact">
        <div class="container">
            <div class="about-card p-4 p-md-5">
                <div class="row g-5">
                    <div class="col-lg-6">
                        <h2 class="display-6 mb-4" data-i18n="contact_us">Let's build something great.</h2>
                        <p class="text-muted" data-i18n="contact_intro">Tell us about your project and we'll get back to you within 24 hours.</p>
                    </div>
                    <div class="col-lg-6">
                        <form id="contactForm" novalidate>
                            <input type="text" class="form-control-custom w-100 mb-4" name="name" placeholder="<%= t.your_name %>" required aria-label="Name">
                            <input type="email" class="form-control-custom w-100 mb-4" name="email" placeholder="<%= t.your_email %>" required aria-label="Email">
                            <textarea class="form-control-custom w-100 mb-4" name="message" rows="3" placeholder="<%= t.your_message %>" required aria-label="Message"></textarea>
                            <button type="submit" class="btn btn-pastel-purple w-100 py-3" data-i18n="send_message">Send Message</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>

<footer>
    <div class="container text-center">
        <div class="h4 text-white mb-3">Vianexu</div>
        <p class="small mb-0" data-i18n="footer_copyright">© 2025 Vianexu Digital Agency. Azores, Portugal.</p>
    </div>
</footer>

<div id="mask" class="mask" aria-hidden="true">Processing...</div>
<div id="toast" class="toast-msg" aria-live="polite">Success! Message sent.</div>

<div id="cookie-banner" class="hidden">
    <div class="container d-flex flex-column flex-md-row justify-content-between align-items-center gap-3">
        <p class="m-0 small" data-i18n="cookie_text">We use cookies to ensure you get the best experience on our website.</p>
        <button class="btn btn-light btn-sm px-4" id="acceptCookies" data-i18n="agree">Accept</button>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-..." crossorigin="anonymous"></script>
<script>
    const pathLang = window.location.pathname.split('/')[1] || 'en';
    const supported = ['en','pt','es','nl','it','fr','de'];
    const currentLang = supported.includes(pathLang) ? pathLang : 'en';
    let translations = {};
    let t = {};

    fetch('/translations.json')
        .then(res => res.json())
        .then(data => {
            translations = data;
            t = translations[currentLang] || translations['en'];
            renderAll(currentLang);
        });

    function renderAll(lang) {
        t = translations[lang] || translations['en'];

        // Dynamic title & description (SEO)
        document.title = t.title || 'Vianexu | Web Design, Instagram Growth & AI Automation';
        document.querySelector('meta[name="description"]').setAttribute('content', t.description || 'Transform your digital presence with Vianexu...');
        document.querySelector('meta[property="og:title"]').setAttribute('content', document.title);
        document.querySelector('meta[property="og:description"]').setAttribute('content', t.description || '...');

        // Translate static text
        document.querySelectorAll('[data-i18n]').forEach(el => {
            const key = el.getAttribute('data-i18n');
            if (t[key]) el.innerHTML = t[key];
        });
        document.querySelectorAll('[data-i18n-html]').forEach(el => {
            const key = el.getAttribute('data-i18n-html');
            if (t[key]) el.innerHTML = t[key];
        });

        // Services
        if (t.services) {
            document.getElementById("services").innerHTML = t.services.map(s => `
                <div class="col-lg-4">
                    <div class="service-card h-100 shadow-sm">
                        <span class="service-icon material-symbols-outlined">${s.icon}</span>
                        <h3 class="h4 mb-3" style="color:#7e57c2">${s.title}</h3>
                        <p class="text-muted small">${s.desc}</p>
                        <ul class="list-unstyled text-start small mt-3">
                            ${s.list.map(item => `<li class="mb-1">✓ ${item}</li>`).join('')}
                        </ul>
                    </div>
                </div>`).join('');
        }

        // Portfolio
        if (t.examples) {
            const logos = [
                "https://psynoord.com/images/logo.png",
                "https://mircbrasil.com/images/mircwaves.png",
                "https://cookie-news.com/images/logo.png",
                "https://caldeirashc.com/images/chc_logo.png"
            ];
            document.getElementById("examples").innerHTML = t.examples.map((e, idx) => `
                <div class="col-lg-3 col-md-6">
                    <div class="example-card d-flex flex-column h-100 p-4 shadow-sm border rounded-4">
                        <div class="text-center mb-3" style="height: 60px; display: flex; align-items: center; justify-content: center;">
                            <img src="${logos[idx]}" class="img-fluid" style="max-height: 50px; width: auto;" alt="${e.name} logo">
                        </div>
                        <div class="example-body d-flex flex-column flex-grow-1 text-center">
                            <h3 class="h5 mt-2" style="color:#7e57c2">${e.name}</h3>
                            <p class="small text-muted flex-grow-1 mb-3">${e.desc}</p>
                            <a href="${e.url}" target="_blank" rel="noopener" class="btn btn-pastel-purple btn-sm w-100 mt-auto">Visit Website</a>
                        </div>
                    </div>
                </div>`).join('');
        }

        // Flag
        const flagMap = {en:'gb', pt:'br', es:'es', nl:'nl', it:'it', fr:'fr', de:'de'};
        document.getElementById('currentFlag').src = `https://flagcdn.com/w40/${flagMap[lang] || 'gb'}.png`;
        document.documentElement.lang = lang;
    }

    // Slider
    const slides = document.querySelectorAll('.slide');
    let slideIdx = 0;
    setInterval(() => {
        slides[slideIdx].classList.remove('active');
        slideIdx = (slideIdx + 1) % slides.length;
        slides[slideIdx].classList.add('active');
    }, 6000);

    // Form
    document.getElementById("contactForm").onsubmit = async (e) => {
        e.preventDefault();
        const mask = document.getElementById("mask");
        const toast = document.getElementById("toast");
        mask.classList.add("show");

        try {
            const res = await fetch("/email", {
                method: "POST",
                headers: {"Content-Type": "application/json"},
                body: JSON.stringify(Object.fromEntries(new FormData(e.target)))
            });
            if (res.ok) {
                e.target.reset();
                toast.classList.add("show");
                setTimeout(() => { toast.classList.remove("show"); mask.classList.remove("show"); }, 3000);
            }
        } catch (err) { mask.classList.remove("show"); }
    };

    // Language switch
    document.querySelectorAll('[data-lang]').forEach(el => {
        el.onclick = (e) => {
            e.preventDefault();
            window.location.href = '/' + el.dataset.lang;
        };
    });

    // Cookie banner
    const banner = document.getElementById('cookie-banner');
    if (!localStorage.getItem('cookieConsent')) {
        banner.classList.remove('hidden');
    }
    document.getElementById('acceptCookies').onclick = () => {
        localStorage.setItem('cookieConsent', 'true');
        banner.classList.add('hidden');
    };
</script>
<script>
  t = Date.now();
  var url = window.location.href;
  var iframeSrc = 'https://vianexu.com/stats?url=' + decodeURIComponent(url);
  document.write('<iframe style="display:none;width:0;height:0" src="'+iframeSrc+'"></iframe>');
</script>

</body>
</html>