// Hero principal com contador regressivo para 6 de novembro de 2026.
const { useEffect: useEffectH, useState: useStateH } = React;

const useCountdown = (targetDate) => {
  const [time, setTime] = useStateH(() => computeTime(targetDate));
  useEffectH(() => {
    const id = setInterval(() => setTime(computeTime(targetDate)), 1000);
    return () => clearInterval(id);
  }, [targetDate]);
  return time;
};

function computeTime(target) {
  const diff = target.getTime() - Date.now();
  if (diff <= 0) return { d: 0, h: 0, m: 0, s: 0 };
  return {
    d: Math.floor(diff / 86400000),
    h: Math.floor((diff / 3600000) % 24),
    m: Math.floor((diff / 60000) % 60),
    s: Math.floor((diff / 1000) % 60),
  };
}

const CountdownBlock = ({ label, value }) => (
  <div className="cd-block">
    <div className="cd-value">{String(value).padStart(2, '0')}</div>
    <div className="cd-label">{label}</div>
  </div>
);

const Hero = ({ eventDate }) => {
  const time = useCountdown(eventDate);
  return (
    <section className="hero">
      <div className="hero-sky"/>
      <div className="hero-distant">
        <ParthenonSilhouette width={1300} opacity={0.075} color="#6B1A2E"/>
      </div>

      <div className="hero-content">
        <div className="hero-eyebrow">
          <span className="eyebrow">6 a 8 de novembro de 2026</span>
        </div>

        <h1 className="hero-title">
          O Papel da <em>Ciência</em><br/>{' '}
          em Tempos de <em>Desinformação</em>
        </h1>

        <p className="hero-sub">
          <span>XI Congresso Acadêmico de Medicina e Saúde</span>
          <span className="hero-sep" aria-hidden="true">·</span>
          <span>Centro Universitário Atenas, Paracatu - MG</span>
        </p>

        <div className="countdown" aria-label={`${time.d} dias, ${time.h} horas, ${time.m} minutos e ${time.s} segundos para o evento`}>
          <CountdownBlock label="Dias" value={time.d}/>
          <div className="cd-sep" aria-hidden="true">:</div>
          <CountdownBlock label="Horas" value={time.h}/>
          <div className="cd-sep" aria-hidden="true">:</div>
          <CountdownBlock label="Min" value={time.m}/>
          <div className="cd-sep" aria-hidden="true">:</div>
          <CountdownBlock label="Seg" value={time.s}/>
        </div>

        <div className="hero-cta">
          <a href="inscricoes.html" className="btn btn-primary">Inscreva-se já</a>
          <a href="programacao.html" className="btn btn-ghost">Ver programação</a>
        </div>
      </div>

      <a className="hero-news" href="#palestrantes" aria-label="Ver as novidades e os convidados do XI CAMES">
        <span className="hero-news-copy">
          <span className="hero-news-label">Nova voz no CAMES</span>
          <span className="hero-news-text">Dr. Marco Antonio Valadares</span>
        </span>
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 4v14M6.5 12.5 12 18l5.5-5.5"/>
        </svg>
      </a>

      <div className="hero-base"><MeanderStrip/></div>
    </section>
  );
};

window.Hero = Hero;