<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sana — Conoce tu ciclo</title>

  <meta name="description" content="Seguimiento del ciclo con acompañamiento empático. Tus datos, solo en tu teléfono.">
  <meta name="theme-color" content="#5e3bdb">

  <!-- Open Graph -->
  <meta property="og:title" content="Sana — Conoce tu ciclo">
  <meta property="og:description" content="Seguimiento del ciclo con acompañamiento empático. Tus datos, solo en tu teléfono.">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://sana.kemegan.com">

  <!-- Fonts -->
  <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=Manrope:wght@400;500;600;700&family=Be+Vietnam+Pro:wght@400;500;600&display=swap" rel="stylesheet">

  <!-- Styles -->
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>

  <!-- Header -->
  <header>
    <div class="header-content">
      <div class="logo">
        <span class="logo-icon">♀︎</span>
        <span>Sana</span>
      </div>
      <nav class="nav-links">
        <li><a href="#values">Por qué Sana</a></li>
        <li><a href="#install">Instalar</a></li>
      </nav>
      <a href="/app/" class="cta-header">Abrir Sana</a>
    </div>
  </header>

  <!-- Hero Section -->
  <section class="hero">
    <div class="container">
      <div style="margin-bottom: 24px;">
        <span style="font-size: 48px; display: block;">♀︎</span>
      </div>
      <h1>Conoce tu ciclo con confianza</h1>
      <p class="subtitle">
        Sana es tu acompañante empático en el seguimiento del ciclo menstrual.
        Con IA que entiende lo que sientes, sin comprometer tu privacidad.
      </p>
      <a href="/app/" class="cta-button">Abrir Sana</a>
    </div>
  </section>

  <!-- Values Section -->
  <section class="values" id="values">
    <div class="container">
      <h2>Tres razones para elegir Sana</h2>
      <div class="values-grid">

        <!-- Privacy -->
        <div class="value-card">
          <div class="value-icon">🔒</div>
          <h3>Privacidad real</h3>
          <p>
            Tus datos nunca salen de tu teléfono. No hay servidores, no hay cuentas,
            no hay seguimiento. Lo que registras es tuyo.
          </p>
        </div>

        <!-- Empathy -->
        <div class="value-card">
          <div class="value-icon">💜</div>
          <h3>Acompañamiento empático</h3>
          <p>
            La IA entiende cómo te sientes cada día y te ofrece sugerencias cálidas
            de bienestar en los momentos que más importan.
          </p>
        </div>

        <!-- Free -->
        <div class="value-card">
          <div class="value-icon">✨</div>
          <h3>Gratis, sin suscripciones</h3>
          <p>
            Acceso completo sin anuncios, sin pagos, sin suscripciones ocultas.
            Todo lo que necesitas para conocer tu ciclo.
          </p>
        </div>

      </div>
    </div>
  </section>

  <!-- Installation Section -->
  <section class="installation" id="install">
    <div class="container">
      <h2>Instalar Sana</h2>

      <div class="installation-content">
        <div class="os-toggle">
          <button class="os-btn active" data-os="android">📱 Android</button>
          <button class="os-btn" data-os="ios">🍎 iPhone</button>
        </div>

        <!-- Android Instructions -->
        <div class="install-steps" id="android-steps" style="display: block;">
          <ol>
            <li>
              Abre Sana en <strong>Chrome</strong> o <strong>Edge</strong>
            </li>
            <li>
              Toca el menú <strong>⋮</strong> (tres puntos) en la esquina superior derecha
            </li>
            <li>
              Busca <strong>"Instalar app"</strong> o <strong>"Añadir a pantalla de inicio"</strong>
            </li>
            <li>
              Confirma y listo — Sana estará en tu pantalla de inicio
            </li>
          </ol>
        </div>

        <!-- iOS Instructions -->
        <div class="install-steps" id="ios-steps" style="display: none;">
          <ol>
            <li>
              Abre Sana en <strong>Safari</strong> (es importante: no Chrome, no Firefox)
            </li>
            <li>
              Toca el botón <strong>Compartir</strong> (□↑) en la barra inferior
            </li>
            <li>
              Desplázate hacia abajo y toca <strong>"Añadir a pantalla de inicio"</strong>
            </li>
            <li>
              Elige el nombre (puedes dejar "Sana") y toca <strong>Añadir</strong>
            </li>
          </ol>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer>
    <p>
      Sana · 2025
      <span style="margin: 0 8px;">·</span>
      <a href="/privacy" title="Política de privacidad">Privacidad</a>
    </p>
  </footer>

  <!-- Scripts -->
  <script>
    // Detect OS and show relevant instructions
    function detectOS() {
      const ua = navigator.userAgent;
      if (/iPad|iPhone|iPod/.test(ua)) {
        return 'ios';
      }
      if (/Android/.test(ua)) {
        return 'android';
      }
      return 'android'; // default
    }

    // Toggle installation instructions
    const osButtons = document.querySelectorAll('.os-btn');
    const androidSteps = document.getElementById('android-steps');
    const iosSteps = document.getElementById('ios-steps');

    function setOS(os) {
      // Update button states
      osButtons.forEach(btn => {
        if (btn.dataset.os === os) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      });

      // Show/hide instructions
      if (os === 'ios') {
        iosSteps.style.display = 'block';
        androidSteps.style.display = 'none';
      } else {
        androidSteps.style.display = 'block';
        iosSteps.style.display = 'none';
      }
    }

    // Event listeners
    osButtons.forEach(btn => {
      btn.addEventListener('click', () => {
        setOS(btn.dataset.os);
      });
    });

    // Auto-detect and set initial OS
    const detectedOS = detectOS();
    setOS(detectedOS);

    // Smooth scroll for internal links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function(e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
          target.scrollIntoView({ behavior: 'smooth' });
        }
      });
    });
  </script>

</body>
</html>
