---
// PopupOnboarding - micro-resume premier visit, localStorage flag tf-onboarded
// Le micro-resume est une PROPOSITION Opus a iterer avec Jules.
// Stocke en constante en tete pour iteration facile.
const microResume = `Architecture, ecologie, politique : un commun a construire ensemble.
Reapproprions-nous nos infrastructures vitales en repartant de l'existant.
Ce site, c'est le journal vivant de cette bifurcation.`;
---
<div
  id="onboarding-popup"
  class="fixed inset-0 z-[60] hidden bg-black/50 backdrop-blur-sm items-center justify-center p-4"
  role="dialog"
  aria-modal="true"
  aria-labelledby="onboarding-text"
>
  <div class="bg-white rounded-xl max-w-md w-full p-6 md:p-7 shadow-2xl relative animate-fade-in">
    <button
      id="onboarding-close"
      type="button"
      class="absolute top-3 right-3 w-8 h-8 flex items-center justify-center text-neutral-400 hover:text-neutral-800 text-2xl leading-none rounded-md hover:bg-neutral-100 transition-colors"
      aria-label="Fermer"
    >
      &times;
    </button>
    <p
      id="onboarding-text"
      class="text-base md:text-lg leading-relaxed text-neutral-800 whitespace-pre-line pr-6"
    >{microResume}</p>
    <button
      id="onboarding-cta"
      type="button"
      class="mt-5 px-4 py-2.5 bg-neutral-900 text-white rounded-lg w-full font-medium hover:bg-neutral-700 transition-colors"
    >
      Entrer
    </button>
  </div>
</div>

<style>
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-in {
    animation: fadeIn 0.25s ease-out;
  }
</style>

<script>
  const STORAGE_KEY = 'tf-onboarded';
  const popup = document.getElementById('onboarding-popup');
  const closeBtn = document.getElementById('onboarding-close');
  const ctaBtn = document.getElementById('onboarding-cta');

  let alreadyOnboarded = false;
  try {
    alreadyOnboarded = !!localStorage.getItem(STORAGE_KEY);
  } catch {
    // mode prive : on affiche quand meme, sans persistence
    alreadyOnboarded = false;
  }

  if (!alreadyOnboarded && popup) {
    requestAnimationFrame(() => {
      popup.classList.remove('hidden');
      popup.classList.add('flex');
    });
  }

  const dismiss = () => {
    if (!popup) return;
    popup.classList.remove('flex');
    popup.classList.add('hidden');
    try {
      localStorage.setItem(STORAGE_KEY, '1');
    } catch {
      // mode prive : pas de persistence
    }
    window.removeEventListener('scroll', onScroll);
  };

  closeBtn?.addEventListener('click', dismiss);
  ctaBtn?.addEventListener('click', dismiss);

  // Dismiss implicite au scroll 200px (engagement implicite)
  const onScroll = () => {
    if (window.scrollY > 200) {
      dismiss();
    }
  };
  if (!alreadyOnboarded) {
    window.addEventListener('scroll', onScroll, { passive: true });
  }

  // ESC pour fermer
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && popup && !popup.classList.contains('hidden')) {
      dismiss();
    }
  });
</script>