<?php
/* Template Name: Homepage Personalizzata */
get_header();
?>

<style>
  /* ===== HERO VIDEO (solo homepage) ===== */
  #home.hero{
    position: relative;
    height: 80vh; /* puoi variare 70–90vh */
    min-height: 420px;
    overflow: hidden;
    display: grid;
    place-items: center;
    margin-top: -24px; /* alza l’hero (riduce lo spazio sotto l’header) */
  }
  @media (max-width: 782px){
    #home.hero{ margin-top: -12px; }
  }
  #home.hero video{
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
  }
  #home.hero::before{
    content:''; position:absolute; inset:0; z-index:1;
    background: linear-gradient(to bottom,
      rgba(0,0,0,.35) 0%,
      rgba(0,0,0,.25) 40%,
      rgba(0,0,0,.15) 70%,
      rgba(0,0,0,0) 100%);
  }
  #home.hero .hero-content{
    position: relative; z-index: 2; text-align: center; color: #fff;
    padding: 0 16px; max-width: 1000px;
  }
  #home.hero .hero-content h1{
    font-size: clamp(28px, 5vw, 56px); line-height: 1.1; margin: 0 0 .4rem;
  }
  #home.hero .hero-content .subtext{
    font-size: clamp(16px, 2vw, 22px); opacity: .95; margin: 0 0 1.2rem; transition: opacity .25s ease;
  }
  #home.hero .hero-content .subtext.visible{ opacity: 1; }
  #home.hero .cta{
    display:inline-block; padding:.7rem 1.2rem; border:2px solid #fff; color:#fff; text-decoration:none;
    font-weight:700; border-radius:10px; transition: background .2s, color .2s, transform .05s;
  }
  #home.hero .cta:hover{ background:#fff; color:#111; }

  /* Migliora lo scroll sugli anchor con header fisso */
  #features, #newsletter, #partners{ scroll-margin-top: 120px; }
  @media (max-width: 782px){
    #features, #newsletter, #partners{ scroll-margin-top: 96px; }
  }

  /* ===== Cards features ===== */
  .features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:24px}
  @media(max-width:992px){.features{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:640px){.features{grid-template-columns:1fr}}
  .features .card{position:relative;display:block;border-radius:14px;overflow:hidden;min-height:200px;background:#0b1d51;color:#fff;text-decoration:none}
  .features .card img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.8)}
  .features .card .card-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 100%)}
  .features .card h3{margin:0 0 .25rem;font-size:20px}
  .features .card p{margin:0;opacity:.9}

  /* ===== Partners carousel ===== */
  #partners{padding:24px}
  #partners h2{margin:0 0 12px;text-align:center}
  .partners-viewport{overflow:hidden}
  .partners-track{
    display:flex; align-items:center; gap:48px;
    will-change: transform;
    animation: crmi-marquee 40s linear infinite;
  }
  .partners-track:hover{ animation-play-state: paused; }
  .partner-item{flex:0 0 auto; display:flex; align-items:center; justify-content:center; min-width:160px}
  .partner-item img{
    max-height:64px; width:auto; height:auto; display:block;
    filter: grayscale(100%) brightness(1.05);
    opacity:.9; transition: filter .2s, opacity .2s, transform .2s;
  }
  .partner-item img:hover{ filter:none; opacity:1; transform: translateY(-2px); }
  @keyframes crmi-marquee{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); } /* scorri fino a metà: abbiamo duplicato gli elementi */
  }
</style>

<!-- HERO con video -->
<section id="home" class="hero" aria-label="Hero">
  <div class="hero-content">
    <h1 id="dynamic-text"></h1>
    <p id="dynamic-subtext" class="subtext"></p>
    <a href="#features" class="cta">Scopri Highlights</a>
  </div>
  <video id="homeHeroVideo" autoplay muted loop playsinline preload="auto">
    <source src="https://cameramodaitalia.it/wp-content/uploads/2025/09/Promuoviamo-lEccellenza-Italiana.mp4" type="video/mp4">
    Il tuo browser non supporta i video HTML5.
  </video>
</section>

<?php
  /* URL destinazioni card */
  // Gallery
  $gallery_page = get_page_by_path('gallery');
  $gallery_url  = $gallery_page ? get_permalink($gallery_page) : home_url('/gallery/');

  // News (priorità alla pagina articoli impostata in Impostazioni > Lettura)
  $posts_page_id = (int) get_option('page_for_posts');
  if ($posts_page_id) {
    $news_url = get_permalink($posts_page_id);
  } else {
    $news_page = get_page_by_path('news') ?: get_page_by_path('notizie');
    $news_url  = $news_page ? get_permalink($news_page) : home_url('/news/');
  }

  // Premio Gioconda (Eventi & Workshop)
  $premio_page = get_page_by_path('premio-gioconda') ?: get_page_by_path('premio-gioconda-comunicativa');
  $premio_url  = $premio_page ? get_permalink($premio_page) : home_url('/premio-gioconda/');
?>

<section id="features" class="features">
  <!-- Card Gallery -->
  <a class="card" href="<?php echo esc_url($gallery_url); ?>" aria-label="Vai alla Gallery Fotografica">
    <img src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/gallery-card.png' ); ?>" alt="Gallery Fotografica">
    <div class="card-overlay">
      <h3>Gallery Fotografica</h3>
      <p>Un tour visivo degli eventi e delle sfilate.</p>
    </div>
  </a>

  <!-- Card News -->
  <a class="card" href="<?php echo esc_url($news_url); ?>" aria-label="Vai alle News">
    <img src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/news-card-2.png' ); ?>" alt="Ultime News">
    <div class="card-overlay">
      <h3>Ultime News</h3>
      <p>Aggiornamenti dal mondo della moda.</p>
    </div>
  </a>

  <!-- Card Eventi → Premio Gioconda -->
  <a class="card" href="<?php echo esc_url($premio_url); ?>" aria-label="Vai alla pagina Premio Gioconda">
    <img src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/events-card.png' ); ?>" alt="Eventi & Workshop">
    <div class="card-overlay">
      <h3>Eventi &amp; Workshop</h3>
      <p>Partecipa alle nostre prossime iniziative creative.</p>
    </div>
  </a>
</section>

<?php
  /* ===== Carosello loghi: scandisce /assets/images/Carosello (o carosello) ===== */
  function crmi_scan_loghi_dirs(){
    $exts = ['svg','png','jpg','jpeg','webp','gif','SVG','PNG','JPG','JPEG','WEBP','GIF'];
    $dirs = [
      [ trailingslashit(get_stylesheet_directory()) . 'assets/images/Carosello', trailingslashit(get_stylesheet_directory_uri()) . 'assets/images/Carosello' ],
      [ trailingslashit(get_stylesheet_directory()) . 'assets/images/carosello', trailingslashit(get_stylesheet_directory_uri()) . 'assets/images/carosello' ],
      [ trailingslashit(get_template_directory())   . 'assets/images/Carosello', trailingslashit(get_template_directory_uri())   . 'assets/images/Carosello' ],
      [ trailingslashit(get_template_directory())   . 'assets/images/carosello', trailingslashit(get_template_directory_uri())   . 'assets/images/carosello' ],
    ];
    foreach($dirs as [$dir,$url]){
      if(!is_dir($dir)) continue;
      $files = [];
      foreach($exts as $e){
        $found = glob($dir . '/*.' . $e);
        if(is_array($found)) $files = array_merge($files, $found);
      }
      if(!empty($files)){
        natsort($files);
        $out = [];
        foreach($files as $f){
          $rel  = ltrim(str_replace($dir, '', $f), '/\\');
          $part = preg_split('#[\\\\/]#', $rel);
          $part = array_map('rawurlencode', $part);
          $u    = trailingslashit($url) . implode('/', $part);
          $name = pathinfo($f, PATHINFO_FILENAME);
          $alt  = ucwords(str_replace(['-','_'], ' ', $name));
          $out[] = ['url'=>$u, 'alt'=>$alt];
        }
        if(!empty($out)) return $out;
      }
    }
    // Fallback manuale se la scansione non va
    $fallback = [
      get_template_directory_uri() . '/assets/images/Carosello/image004.jpg',
    ];
    return array_map(function($u){
      return ['url'=>$u, 'alt'=>'Partner'];
    }, $fallback);
  }
  $CRMI_LOGHI = crmi_scan_loghi_dirs();
  // duplichiamo per il loop infinito
  $CRMI_LOGHI_DUP = array_merge($CRMI_LOGHI, $CRMI_LOGHI);
?>

<section id="partners">
  <h2>Official Partners</h2>
  <div class="partners-viewport" aria-label="Carosello loghi partner">
    <ul class="partners-track">
      <?php foreach($CRMI_LOGHI_DUP as $logo): ?>
        <li class="partner-item">
          <img src="<?php echo esc_url($logo['url']); ?>" alt="<?php echo esc_attr($logo['alt']); ?>">
        </li>
      <?php endforeach; ?>
    </ul>
  </div>
</section>

<section id="newsletter" class="newsletter">
  <h2>Iscriviti alla nostra newsletter</h2>
  <form>
    <input type="text" name="name" placeholder="Il tuo nome" required>
    <input type="email" name="email" placeholder="La tua email" required>
    <button type="submit">Iscriviti</button>
  </form>
</section>

<script>
  // Testo dinamico (typing)
  (function(){
    const texts = [
      'Benvenuti al CRMI',
      'Promuoviamo l\'eccellenza',
      'Celebriamo la creatività italiana'
    ];
    const subtexts = [
      'Entra nel mondo del fashion regionale.',
      'Scopri progetti e iniziative esclusive.',
      'Unisciti a eventi e workshop unici.'
    ];
    let idx = 0;
    const dynamicText = document.getElementById('dynamic-text');
    const dynamicSub = document.getElementById('dynamic-subtext');

    function updateHero() {
      dynamicText.textContent = '';
      dynamicSub.textContent = '';
      dynamicSub.classList.remove('visible');

      const text = texts[idx];
      const sub = subtexts[idx];
      let t = 0;

      function typeChar() {
        if (t < text.length) {
          dynamicText.textContent += text.charAt(t++);
          setTimeout(typeChar, 100);
        } else {
          dynamicSub.textContent = sub;
          dynamicSub.classList.add('visible');
          setTimeout(() => {
            idx = (idx + 1) % texts.length;
            updateHero();
          }, 2000);
        }
      }
      typeChar();
    }
    document.addEventListener('DOMContentLoaded', updateHero);
  })();

  // Fallback loop per il video
  (function(){
    const v = document.getElementById('homeHeroVideo');
    if(!v) return;
    v.addEventListener('ended', function(){
      try { v.currentTime = 0; v.play(); } catch(e){}
    }, false);
  })();
</script>

<?php get_footer(); ?>