<?php
session_start(); // Iniciar sesión para almacenar el token

// Generar el token si no existe
if (!isset($_SESSION['form_token'])) {
    $_SESSION['form_token'] = bin2hex(random_bytes(32));
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mofci - Mapa interactivo de financiamiento para gobiernos subnacionales</title>
  <!-- Incluir Font Awesome para los íconos -->
  <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> -->
  <link rel="stylesheet" href="css/all.min.css">
  <!-- Incluir el archivo CSS -->
  <!-- <link rel="stylesheet" href="css/styles.css"> -->
  <link rel="stylesheet" href="css/styles.css?v=20240403c">
  <link rel="icon" href="src/img/favicon.png" type="image/png">
</head>
<body>
  <!-- Header -->
  <header>
    <div class="logo">
      <a href="index.php">
        Mof<span class="highlight">ci</span>
      </a>
    </div>
    <div class="language-selector">
      <!-- Selector de idiomas -->
      <select id="languageSwitcher">
        <option value="en">eng</option>
        <option value="es">esp</option>
        <option value="it">ita</option>
        <option value="zh">中文</option>
        <option value="ar">العربية</option>
      </select>
    </div>
    <!-- Botón de menú para móviles -->
    <button id="menuToggle" class="menu-toggle" aria-label="Toggle Menu">
      <i class="fas fa-bars"></i>
    </button>
    <nav id="mainMenu" class="collapsed">
      <a href="#" data-translate="home">Home</a>
      <a href="#about" data-translate="about">About Us</a>
      <!-- <a href="#services" data-translate="services">Our Services</a> -->
      <!-- <a href="#clients" data-translate="clients">Our Clients</a> -->
      <a href="#projects" data-translate="projects">Opportunities</a>
      <a href="#contact" data-translate="contact">Contact Us</a>
    </nav>
  </header>

  <!-- Hero Section -->
  <div id="hero" class="hero">
    <h1 data-translate="heroTitle">Welcome to Brandit</h1>
    <h2 data-translate="heroSubtitle">Sales & Marketing Technologies.</h2>
    <!--
    <p data-translate="heroText">
      Our website is currently under construction. For inquiries, please contact us at: info@brandit.com.ar
    </p>
    -->
  </div>

  <div id="map" class="section">
      <h2 data-translate="map">About Us</h2>
      <p data-translate="mapText">
      At Brandit, we are a dynamic marketing and technology company dedicated to transforming businesses through innovation and creativity. Whether you need to create a brand from scratch or refresh an existing one, we combine cutting-edge technology, strategic marketing, and impactful design to bring your vision to life. Our multidisciplinary team specializes in digital campaigns, public relations, web development, social media management, software implementation, and strategic growth solutions. Passion drives every project we undertake, ensuring tailored strategies that deliver results.
      </p>
      <?php include 'map.php'; ?>

  </div>

        <div class="map-legend">
        Mapa de Oportunidades de Financiamiento y Cooperación Internacional
      </div>

  <div id="projects" class="section">
      <h2 data-translate="projects">Our Projects</h2>
      <p data-translate="projectsText">
        Discover the Opportunities.
      </p>
      <div class="container">
        <!-- Formulario (Izquierda) -->
        <div class="form-section">
            <?php include('formopp.php'); ?>
        </div>
        
        <!-- Resultados (Derecha) -->
        <div class="results-section">
            <div id="results-container">
                <!-- Aquí se cargarán los resultados de la consulta -->
            </div>
        </div>
      </div>
    </div>

  <!-- Secciones -->
  <div class="sections">
    <div id="about" class="section">
      <h2 data-translate="about">About Us</h2>
      <p data-translate="aboutText">
      At Brandit, we are a dynamic marketing and technology company dedicated to transforming businesses through innovation and creativity. Whether you need to create a brand from scratch or refresh an existing one, we combine cutting-edge technology, strategic marketing, and impactful design to bring your vision to life. Our multidisciplinary team specializes in digital campaigns, public relations, web development, social media management, software implementation, and strategic growth solutions. Passion drives every project we undertake, ensuring tailored strategies that deliver results.
      </p>
      <div style="margin-top: 20px;"></div> <!-- Espacio entre el texto y el formulario -->
        <div class="gallery">
          <img src="src/img/projects/p1.jpeg" alt="Project 1">
          <img src="src/img/projects/p2.jpeg" alt="Project 2">
          <img src="src/img/projects/p3.jpeg" alt="Project 3">
          <img src="src/img/projects/p4.jpeg" alt="Project 4">
          <!-- Puedes añadir más imágenes aquí -->
        </div>
      <h2 data-translate="about2">About Us</h2>
      <p data-translate="aboutText2">
      At Brandit, we are a dynamic marketing and technology company dedicated to transforming businesses through innovation and creativity. Whether you need to create a brand from scratch or refresh an existing one, we combine cutting-edge technology, strategic marketing, and impactful design to bring your vision to life. Our multidisciplinary team specializes in digital campaigns, public relations, web development, social media management, software implementation, and strategic growth solutions. Passion drives every project we undertake, ensuring tailored strategies that deliver results.
      </p>
      <p style="text-align: center; margin-top: 20px;">
        <a href="https://cyt.unlam.edu.ar/descargas/755_VINCULAR7.pdf" target="_blank">
          Programa Vincular (PDF)
        </a>
      </p>
    </div>
    
    <div id="services" class="section">
    <h2 data-translate="services">Our Services</h2>
    <div style="margin-top: 20px;"></div> <!-- Espacio entre el texto y el formulario -->

    <div class="services-container">
        <!-- Digital Solutions -->
        <div class="service-category">
            <div class="service-item">
                <div class="service-media">
                    <i class="feature-icon fas fa-solid fa-display "></i>
                </div>
                <div class="service-content">
                    <h3 data-translate="serviceDigitalSolutions">Digital Solutions</h3>
                    <ul>
                        <li data-translate="serviceDigitalStrategy">Digital Strategy for Growth & Retention</li>
                        <li data-translate="serviceMediaBuying">Media Buying</li>
                        <li data-translate="serviceDataAnalytics">Data Analytics & Visualization</li>
                        <li data-translate="serviceConversionOptimization">Conversion Optimization</li>
                        <li data-translate="servicePerformanceMarketing">Performance Marketing</li>
                        <li data-translate="serviceSEO">SEO</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Social Media -->
        <div class="service-category">
            <div class="service-item">
                <div class="service-media">
                    <i class="feature-icon fa fa-solid fa-share-alt"></i>
                </div>
                <div class="service-content">
                    <h3 data-translate="serviceSocialMedia">Social Media</h3>
                    <ul>
                        <li data-translate="serviceSocialMediaStrategy">Social Media Strategy</li>
                        <li data-translate="serviceContentCreation">Content Creation</li>
                        <li data-translate="serviceCommunityManagement">Community Management</li>
                        <li data-translate="serviceInfluencerMarketing">Influencer Marketing</li>
                        <li data-translate="serviceGrowthHacking">Growth Hacking</li>
                        <li data-translate="serviceCampaignDesign">Campaign Design</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Public Relations -->
        <div class="service-category">
            <div class="service-item">
                <div class="service-media">
                    <i class="feature-icon fa fa-solid fa-bullhorn "></i>
                </div>
                <div class="service-content">
                    <h3 data-translate="servicePublicRelations">Public Relations</h3>
                    <ul>
                        <li data-translate="serviceMediaPitching">Media Pitching locally & regionally</li>
                        <li data-translate="servicePRStrategy">PR Strategy</li>
                        <li data-translate="servicePressRelease">Press Release and Distribution</li>
                        <li data-translate="servicePartnerships">Partnerships & Co-Branding Opportunities</li>
                        <li data-translate="serviceExecutiveBrandBuilding">C-suite & Executive Brand Building</li>
                        <li data-translate="serviceCrisisManagement">Crisis & Reputation Management</li>
                        <li data-translate="serviceConferenceRoadshows">Conference Roadshows</li>
                        <li data-translate="serviceSpeakingOpportunities">Speaking Opportunities</li>
                        <li data-translate="serviceMediaTraining">Media Training</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Branding -->
        <div class="service-category">
            <div class="service-item">
                <div class="service-media">
                    <i class="feature-icon fa fa-solid fa-pencil-alt "></i>
                </div>
                <div class="service-content">
                    <h3 data-translate="serviceBranding">Branding</h3>
                    <ul>
                        <li data-translate="serviceEstablishingIdentity">Establishing brand identity</li>
                        <li data-translate="serviceConsistency">Consistency across platforms</li>
                        <li data-translate="serviceDevelopingStrategy">Developing brand strategy</li>
                        <li data-translate="serviceRebranding">Rebranding</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Event Management -->
        <div class="service-category">
            <div class="service-item">
                <div class="service-media">
                    <i class="feature-icon fa fa-solid fa-calendar-alt "></i>
                </div>
                <div class="service-content">
                    <h3 data-translate="serviceEventManagement">Event Management</h3>
                    <ul>
                        <li data-translate="serviceVenueGuestlist">Venue & Guestlist</li>
                        <li data-translate="serviceEntertainment">Entertainment</li>
                        <li data-translate="serviceMediaSponsors">Media & Sponsors</li>
                        <li data-translate="serviceStaffManagement">Staff Management</li>
                        <li data-translate="serviceOrganisationBudgeting">Organisation & Budgeting</li>
                    </ul>
                </div>
            </div>
        </div>
        
        <!-- Investor Relations -->
        <div class="service-category">
            <div class="service-item">
                <div class="service-media">
                    <i class="feature-icon fa fa-solid fa-users "></i>
                </div>
                <div class="service-content">
                    <h3 data-translate="serviceInvestorRelations">Investor Relations</h3>
                    <ul>
                        <li data-translate="serviceCompetitorAnalysis">Competitor Analysis</li>
                        <li data-translate="serviceStrategicPartnerships">Strategic Partnerships</li>
                        <li data-translate="serviceNetworkingEvents">Networking Events</li>
                        <li data-translate="serviceRoadshows">Roadshows</li>
                        <li data-translate="servicePitchDeckCreation">Pitch Deck Creation & Design</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Product Development -->
        <div class="service-category">
            <div class="service-item">
                <div class="service-media">
                    <i class="feature-icon fas fa-cogs"></i>  <!-- Puedes elegir un ícono que se relacione con desarrollo -->
                </div>
                <div class="service-content">
                    <h3 data-translate="serviceProductDevelopment">Product Development</h3>
                    <ul>
                        <li data-translate="serviceProductDesign">Product Design</li>
                        <li data-translate="servicePrototyping">Prototyping & Testing</li>
                        <li data-translate="serviceMarketResearch">Market Research & Analysis</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Software, Technologies & Web Development -->
        <div class="service-category">
            <div class="service-item">
                <div class="service-media">
                    <i class="feature-icon fas fa-laptop-code"></i>  <!-- Puedes elegir otro ícono relacionado con tecnología -->
                </div>
                <div class="service-content">
                    <h3 data-translate="serviceSoftwareTechWebDevelopment">Software, Technologies & Web Development</h3>
                    <ul>
                        <li data-translate="serviceWebDevelopment">Web Development</li>
                        <li data-translate="serviceMobileApps">Mobile App Development</li>
                        <li data-translate="serviceCustomSoftware">Custom Software Solutions</li>
                    </ul>
                </div>
            </div>
        </div>
      </div>
    </div>


    <div id="clients" class="section">
      <h2 data-translate="clients">Our Clients</h2>
      <p data-translate="clientsText">
        We have partnered with a wide range of businesses across various industries. Here are some of the clients we’ve worked with:
      </p>
      <div style="margin-top: 20px;"></div> <!-- Espacio entre el texto y el formulario -->
      <div class="clients-logos">
        <img src="src/img/clients/c1.png?v=1.1" alt="Gelateria Due">
        <img src="src/img/clients/c2.png?v=1.1" alt="Anaeli S.A.">
        <img src="src/img/clients/c3.png?v=1.1" alt="Bernardino Rivadavia">
        <img src="src/img/clients/c4.png?v=1.1" alt="Degac S.A.">
      </div>
    </div>



    <div id="contact" class="section">
      <h2 data-translate="contact">Contact Us</h2>
      <p data-translate="contactText">
        Get in touch with us through our contact form or email.
      </p>
      <div style="margin-top: 20px;"></div> <!-- Espacio entre el texto y el formulario -->

      <!-- Formulario -->
      <?php include('form.php'); ?>
      
      <!-- Correo electrónico y WhatsApp con iconos -->
      <div class="contact-links">
        <p>
          <a href="mailto:info@mofci.com.ar" title="Send Email">
            <i class="fas fa-envelope"></i> Send us an email to info@mofci.com.ar
          </a>
        </p>
        <!--
        <p>
          <a href="https://wa.me/549110669988" target="_blank" title="WhatsApp">
            <i class="fab fa-whatsapp"></i> Chat with us on WhatsApp
          </a>
        </p>
        -->
      </div>


      <div style="margin-top: 20px;"></div> <!-- Espacio entre el texto y el formulario -->
      

      <!-- Redes Sociales -->
      <div class="social-media-icons">
          <a href="https://www.facebook.com/" target="_blank" class="social-icon">
              <!-- <img src="src/img/redes/facebook-icon.png" alt="Facebook" /> -->
              <i class="fab fa-facebook"></i> <!-- Icono de Facebook -->
          </a>
          <a href="https://www.instagram.com/" target="_blank" class="social-icon">
              <!-- <img src="src/img/redes/instagram-icon.png" alt="Instagram" /> -->
              <i class="fab fa-instagram"></i> <!-- Icono de Instagram -->
          </a>
          <a href="https://www.tiktok.com/@" target="_blank" class="social-icon">
              <!-- <img src="src/img/redes/tiktok-icon.png" alt="TikTok" /> -->
              <i class="fab fa-tiktok"></i> <!-- Icono de TikTok -->
          </a>
      </div>
    </div>
  </div>

  <!-- Footer -->
  <footer class="footer-bar">
    <div class="footer-content">
      <a href="https://www.unlam.edu.ar/" target="_blank" rel="noopener noreferrer">
        <img src="src/img/organizations/unlamlogo.png" alt="UNLaM" class="footer-logo">
      </a>
      <div class="footer-texts">
        <p>&copy; 2025 MOFCI. All rights reserved.</p> 
        <p>Powered by <a href="https://institutotecnologicopyme.com.ar/" target="_blank" rel="noopener noreferrer">Instituto Tecnologico Pyme</a></p>
      </div>
    </div>
  </footer>

  <!-- Incluir los archivos JavaScript -->
  <script src="js/language.js?v=20240403"></script>
  <!-- <script src="script.js"></script> -->
  <script src="js/form.js?v=20240403"></script>
  <script src="js/script.js?v=20240403"></script>
</body>
</html>