---
import BaseLayout from '@/layouts/BaseLayout.astro';
import AtomGlitch from '@/components/AtomGlitch';
import '@/styles/global.css';
import '@/styles/home-workbench.css';
import SiteHeader from '@/components/SiteHeader.astro';
import { Hero } from '@/components/sections/Hero';
import { About } from '@/components/sections/About';
import { CaseStudies } from '@/components/sections/CaseStudies';
import { GraphicSprints } from '@/components/sections/GraphicSprints';
import Contact from '@/components/sections/Contact.astro';
import Faq from '@/components/sections/Faq.astro';
import { withSiteBase } from '@/lib/site';
import { TRACK_EVENTS, trackAttrs } from '@/lib/tracking';

const LAUNCH_DATE = new Date('2026-05-01T00:00:00+02:00');
const isLaunched = Date.now() >= LAUNCH_DATE.getTime();

const formationHref = withSiteBase('/formation/');
const mentionsHref = withSiteBase('/mentions-legales/');
const headerItems = [
  { href: '#a-propos', label: 'Approche' },
  { href: '#graphic-sprints-title', label: 'Missions' },
  { href: formationHref, label: 'Formation' },
  { href: '#faq', label: 'FAQ' },
  { href: '#contact', label: 'Contact', desktopOnly: true }
];

const title = isLaunched
  ? "Systèmes électroniques spécifiques | L'électron rare"
  : "L'Electron Rare — Bientôt";
const description = isLaunched
  ? "L'Électron Rare conçoit, met au point et fiabilise des systèmes électroniques spécifiques en électronique, automatisme, énergie et stockage."
  : "L'Electron Rare arrive. Systèmes électroniques spécifiques, formations, prototypage.";
---

<BaseLayout title={title} description={description}>
{isLaunched ? (
  <!-- ============ SITE COMPLET (après 1er mai) ============ -->
  <Fragment>
    <SiteHeader brandHref="#top" items={headerItems} quickHref="#contact" />

    <main id="main-content" class="site-shell studio-structure pb-12 pt-3">
      <!-- Hero avec WebGL en background -->
      <section class="structure-grid structure-grid--hero hero-webgl-wrapper" data-reveal>
        <div class="hero-webgl-bg">
          <AtomGlitch client:visible />
        </div>
        <div class="structure-cell structure-cell--hero hero-webgl-content">
          <Hero />
        </div>
      </section>

      <section class="structure-grid structure-grid--systems" data-reveal>
        <div class="structure-cell structure-cell--about">
          <About />
        </div>
      </section>

      <section class="structure-grid structure-grid--cases" data-reveal>
        <div class="structure-cell structure-cell--cases">
          <CaseStudies />
        </div>
      </section>

      <section class="photo-strip" aria-label="Photos de terrain" data-reveal>
        <div class="photo-strip-track">
          <img src={withSiteBase('/assets/photos/pcb-teensy-led-kxkm.webp')} alt="PCB custom Teensy LED — projet spectacle vivant KXKM" loading="lazy" decoding="async" width="280" height="190" class="photo-strip-img" />
          <img src={withSiteBase('/assets/photos/platine-automate-cablage.webp')} alt="Câblage automate industriel — intervention terrain" loading="lazy" decoding="async" width="280" height="190" class="photo-strip-img" />
          <img src={withSiteBase('/assets/photos/bench-bms-batteries-xt60.webp')} alt="Banc de test BMS batteries — prototypage" loading="lazy" decoding="async" width="280" height="190" class="photo-strip-img" />
          <img src={withSiteBase('/assets/photos/automate-siemens-s7.webp')} alt="Automate Siemens S7 — diagnostic industriel" loading="lazy" decoding="async" width="280" height="190" class="photo-strip-img" />
          <img src={withSiteBase('/assets/photos/soudure-pcb-composants.webp')} alt="Soudure PCB — formation et prototypage" loading="lazy" decoding="async" width="280" height="190" class="photo-strip-img" />
          <img src={withSiteBase('/assets/photos/oscilloscope-philips-vintage.webp')} alt="Instrumentation et mesure — oscilloscope" loading="lazy" decoding="async" width="280" height="190" class="photo-strip-img" />
          <img src={withSiteBase('/assets/photos/rack-cbtc-lon-connecteurs.webp')} alt="Rack CBTC transport — connectique industrielle" loading="lazy" decoding="async" width="280" height="190" class="photo-strip-img" />
          <img src={withSiteBase('/assets/photos/pcb-embarquee-boitier-test.webp')} alt="Carte embarquée en test — validation prototype" loading="lazy" decoding="async" width="280" height="190" class="photo-strip-img" />
          <img src={withSiteBase('/assets/photos/armoire-automate-schneider.webp')} alt="Armoire Schneider — automatisme industriel" loading="lazy" decoding="async" width="280" height="190" class="photo-strip-img" />
          <img src={withSiteBase('/assets/photos/outillage-atelier-pro.webp')} alt="Atelier professionnel — outillage organisé" loading="lazy" decoding="async" width="280" height="190" class="photo-strip-img" />
        </div>
      </section>

      <section class="video-strip" aria-label="Vidéos de terrain" data-reveal>
        <div class="video-strip-track">
          <video src={withSiteBase('/assets/videos/video-bench-electronique.mp4')} poster={withSiteBase('/assets/videos/video-bench-electronique-poster.webp')} controls muted loop playsinline preload="none" width="320" height="180" class="video-strip-clip" aria-label="Bench électronique en action"></video>
          <video src={withSiteBase('/assets/videos/video-test-prototype.mp4')} poster={withSiteBase('/assets/videos/video-test-prototype-poster.webp')} controls muted loop playsinline preload="none" width="320" height="180" class="video-strip-clip" aria-label="Test de prototype"></video>
          <video src={withSiteBase('/assets/videos/video-instrumentation.mp4')} poster={withSiteBase('/assets/videos/video-instrumentation-poster.webp')} controls muted loop playsinline preload="none" width="320" height="180" class="video-strip-clip" aria-label="Instrumentation et mesure"></video>
        </div>
      </section>

      <section class="structure-grid structure-grid--sprints" data-reveal>
        <div class="structure-cell structure-cell--sprints">
          <GraphicSprints />
        </div>
      </section>

      <section class="structure-grid structure-grid--faq" data-reveal>
        <div class="structure-cell structure-cell--faq">
          <Faq />
        </div>
      </section>

      <section class="structure-grid structure-grid--conversion" data-reveal>
        <div class="structure-cell structure-cell--contact">
          <Contact />
        </div>
      </section>
    </main>

    <footer class="site-footer border-t border-[var(--line)] py-6 text-sm text-[var(--text-muted)]">
      <div class="site-shell footer-grid footer-grid--enhanced">
        <div class="footer-col footer-col--brand">
          <p class="m-0 footer-title">L'électron rare</p>
          <div class="footer-brand-meta">
            <p class="mb-0 footer-copy">© 2026 Clément Saillant - systèmes électroniques spécifiques, conseil, formation — industrie, culture et projets multi-techniques.</p>
            <p class="mb-0 footer-copy footer-copy--right">Contact direct : LinkedIn DM ou contact@lelectronrare.fr</p>
          </div>
        </div>
        <nav aria-label="Ressources studio" class="footer-links footer-links--single-rail">
          <a href="#a-propos" class="footer-link">Approche</a>
          <a href="#graphic-sprints-title" class="footer-link">Missions</a>
          <a href={formationHref} class="footer-link">Formation</a>
          <a href="#faq" class="footer-link">FAQ</a>
          <a href="#contact" class="footer-link">Contact</a>
          <a href="https://fr.linkedin.com/in/electron-rare" target="_blank" rel="noopener noreferrer me" {...trackAttrs(TRACK_EVENTS.outboundLinkedinContact, 'linkedin.com')} class="footer-link">LinkedIn</a>
          <a href="https://github.com/electron-rare/" target="_blank" rel="noopener noreferrer me" {...trackAttrs(TRACK_EVENTS.outboundGithubContact, 'github.com')} class="footer-link">GitHub</a>
          <a href="https://blog.saillant.cc" target="_blank" rel="noopener noreferrer me" class="footer-link">Blog technique</a>
          <a href={mentionsHref} class="footer-link">Mentions légales</a>
        </nav>
      </div>
    </footer>
  </Fragment>
) : (
  <!-- ============ COUNTDOWN (avant 1er mai) ============ -->
  <main class="countdown-page">
    <div class="webgl-bg">
      <AtomGlitch client:load />
    </div>

    <div class="overlay">
      <div class="top-bar">
        <div class="logo-sprite" id="logo-sprite" aria-label="L'Electron Rare — logo animé"></div>
        <span class="brand-mark">L'ELECTRON RARE</span>
      </div>

      <div class="center-spacer">
        <div class="tagline-area" id="tagline-bubble" aria-live="polite">
          <span class="tagline-cursor">></span>
          <span class="tagline-text" id="tagline"></span>
        </div>
      </div>

      <div class="bottom-bar">
        <span class="bottom-left">electronique · automatisme · energie</span>
        <span class="bottom-right">mai 2026</span>
      </div>

      <!-- Cartouche footer -->
      <div class="cartouche">
        <p class="cartouche-title">L'électron rare</p>
        <p class="cartouche-copy">© 2026 Clément Saillant — systèmes électroniques spécifiques, conseil, formation — industrie, culture et projets multi-techniques.</p>
        <p class="cartouche-contact">Contact direct : <a href="https://fr.linkedin.com/in/electron-rare" target="_blank" rel="noopener">LinkedIn DM</a> ou <a href="mailto:contact@lelectronrare.fr">contact@lelectronrare.fr</a></p>
      </div>
    </div>
  </main>
)}
</BaseLayout>

{!isLaunched && (
<script>
  const messages = [
    "Charge des condensateurs en cours...",
    "Calibration de l'oscilloscope...",
    "Soudure des derniers composants...",
    "Vérification de la BOM...",
    "Flash du firmware en cours...",
    "Mesure de continuité... bip.",
    "Routage des dernières pistes...",
    "Test de la chaîne d'alimentation...",
    "Programmation du bootloader...",
    "Revue de schéma en cours...",
    "Placement des composants CMS...",
    "Passage au four de refusion...",
    "Debug JTAG en cours...",
    "Vérification du plan de masse...",
    "Analyse du spectre RF..."
  ];
  let msgIndex = Math.floor(Math.random() * messages.length);

  function rotateMessage() {
    const bubble = document.getElementById('tagline-bubble')!;
    const el = document.getElementById('tagline')!;
    bubble.style.opacity = '0';
    bubble.style.transform = 'translateY(4px)';
    setTimeout(() => {
      el.textContent = messages[msgIndex];
      bubble.style.opacity = '1';
      bubble.style.transform = 'translateY(0)';
      msgIndex = (msgIndex + 1) % messages.length;
    }, 400);
  }

  const sprite = document.getElementById('logo-sprite')!;
  sprite.style.backgroundImage = `url(/assets/brand/logo-mark.png)`;

  rotateMessage();
  setInterval(rotateMessage, 8000);
</script>
)}

<style>
  /* ============ COUNTDOWN STYLES ============ */
  .countdown-page {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: #000;
    font-family: 'Manrope', -apple-system, 'SF Pro Display', 'Helvetica Neue', sans-serif;
    color: #fff;
  }
  .webgl-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: auto;
  }
  .overlay {
    position: relative;
    z-index: 10;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(20px, 3vw, 40px) clamp(24px, 5vw, 60px);
    pointer-events: none;
  }
  .overlay > * { pointer-events: none; }
  .overlay a, .overlay .tagline-area { pointer-events: auto; }
  .top-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    animation: fade-in 0.8s ease both;
  }
  .logo-sprite {
    width: 48px;
    height: 48px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(1.2) drop-shadow(0 0 12px rgba(91, 209, 216, 0.4));
  }
  .brand-mark {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.25em;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
  }
  .center-spacer {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: clamp(20px, 3vw, 40px);
  }
  .tagline-area {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    transition: opacity 0.4s ease, transform 0.4s ease;
    animation: fade-in 0.8s 1.1s ease both;
  }
  .tagline-cursor {
    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
    font-size: 14px;
    color: #5bd1d8;
    animation: blink 1s step-end infinite;
  }
  @keyframes blink { 50% { opacity: 0; } }
  .tagline-text {
    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
    font-size: clamp(11px, 1.3vw, 14px);
    color: rgba(255, 255, 255, 0.4);
  }
  .bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    animation: fade-in 0.8s 1.2s ease both;
  }
  .bottom-left, .bottom-right {
    font-size: clamp(10px, 1.1vw, 12px);
    font-weight: 400;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.15);
    text-transform: uppercase;
  }
  @keyframes fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* ============ CARTOUCHE FOOTER ============ */
  .cartouche {
    position: fixed;
    bottom: clamp(16px, 2vw, 24px);
    right: clamp(16px, 2vw, 24px);
    max-width: 320px;
    padding: 14px 18px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    pointer-events: auto;
    animation: fade-in 0.8s 1.5s ease both;
  }
  .cartouche-title {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
  }
  .cartouche-copy {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.25);
    margin: 0 0 4px;
    line-height: 1.4;
  }
  .cartouche-contact {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.25);
    margin: 0;
    line-height: 1.4;
  }
  .cartouche-contact a {
    color: #5bd1d8;
    text-decoration: none;
  }
  .cartouche-contact a:hover {
    text-decoration: underline;
  }

  @media (max-width: 640px) {
    .cartouche {
      position: relative;
      bottom: auto;
      right: auto;
      max-width: 100%;
      margin-top: 12px;
      text-align: center;
    }
  }

  /* ============ HERO WEBGL (site complet) ============ */
  .hero-webgl-wrapper {
    position: relative;
    overflow: hidden;
  }
  .hero-webgl-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.25;
    pointer-events: none;
  }
  .hero-webgl-content {
    position: relative;
    z-index: 1;
  }

  @media (max-width: 640px) {
    .bottom-bar { flex-direction: column; align-items: center; gap: 4px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .logo-sprite, .top-bar, .tagline-area, .bottom-bar { animation: none; opacity: 1; }
    .webgl-bg, .hero-webgl-bg { display: none; }
  }
</style>
