// Hero — name + tagline + marquee + stamp + glitch
const { useEffect: useEffectHero, useRef: useRefHero, useState: useStateHero } = React;

function Hero({ t, lang }) {
  const [time, setTime] = useStateHero(new Date());
  useEffectHero(() => {
    const i = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(i);
  }, []);

  const tStr = time.toLocaleTimeString('hu-HU', { hour12: false });

  return (
    <div
      id="top"
      data-screen-label="Hero"
      style={{
        position: 'relative',
        background: 'var(--paper)',
        color: 'var(--ink)',
        paddingTop: 56,
        minHeight: '100vh',
        display: 'flex',
        flexDirection: 'column',
        overflow: 'hidden',
      }}
    >
      {/* TOP MARQUEE */}
      <Marquee items={t.marquee} speed={42} />

      {/* status bar */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
        padding: '10px clamp(20px,4vw,56px)',
        borderBottom: '1px solid var(--ink)',
        overflow: 'hidden',
        flexWrap: 'wrap',
        gap: 8,
      }}>
        <span style={{ whiteSpace: 'nowrap' }}>BUDAPEST / HU — 47.4979° N, 19.0402° E</span>
        <span style={{ display: 'flex', gap: 16, whiteSpace: 'nowrap' }}>
          <span>SYS:: ONLINE</span>
          <span>{tStr}</span>
        </span>
      </div>

      {/* MAIN HERO GRID */}
      <Container style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '60px clamp(20px,4vw,56px)' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1fr) auto',
          gap: 24,
          alignItems: 'end',
        }}>
          <div>
            <div style={{
              fontFamily: 'var(--mono)', fontSize: 13, letterSpacing: '0.18em',
              textTransform: 'uppercase', marginBottom: 28,
              display: 'flex', alignItems: 'center', gap: 12,
            }}>
              <span style={{ width: 32, height: 1, background: 'currentColor' }}></span>
              {t.hero.eyebrow}
            </div>

            <h1 style={{
              fontFamily: 'var(--display)',
              fontSize: 'clamp(80px, 18vw, 280px)',
              lineHeight: 0.85,
              letterSpacing: '-0.035em',
              textTransform: 'uppercase',
              margin: 0,
            }}>
              <span style={{ display: 'block' }}>
                <Glitch>{t.hero.name1}</Glitch>
              </span>
              <span style={{
                display: 'block',
                color: 'var(--paper)',
                WebkitTextStroke: '2px var(--ink)',
                textShadow: '6px 6px 0 var(--accent)',
                marginLeft: '0.15em',
              }}>
                <Glitch>{t.hero.name2}</Glitch>
              </span>
            </h1>
          </div>

          <div className="hero-stamp-wrap" style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 14 }}>
            <Stamp rotate={-14} size={150} accent>
              {(lang === 'hu' ? '★ BORBÁS ÁBEL ★ HITELESÍTVE ★ ' : '★ BORBÁS ÁBEL ★ CERTIFIED ★ ').toUpperCase()}
            </Stamp>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 11, textAlign: 'right', maxWidth: 180, lineHeight: 1.5, opacity: .7 }}>
              {t.hero.sinceYear} {t.hero.since}
            </div>
          </div>
        </div>

        {/* BOTTOM ROW — tagline + CTAs */}
        <div style={{
          marginTop: 56,
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1.4fr) minmax(0, 1fr)',
          gap: 'clamp(24px, 4vw, 64px)',
          alignItems: 'end',
          borderTop: '2px solid var(--ink)',
          paddingTop: 28,
        }} className="hero-bottom-row">
          <p style={{
            fontFamily: 'var(--sans)',
            fontSize: 'clamp(18px, 1.6vw, 24px)',
            lineHeight: 1.4,
            maxWidth: 720,
            textWrap: 'pretty',
            fontWeight: 500,
          }}>
            {t.hero.tagline}
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'stretch' }}>
            <BtnBlock href="#contact" accent>{t.hero.ctaPrimary}</BtnBlock>
            <BtnBlock href="#about" ghost>{t.hero.ctaSecondary}</BtnBlock>
          </div>
        </div>
      </Container>

      <style>{`
        @media (max-width: 720px) {
          .hero-stamp-wrap { display: none !important; }
          .hero-bottom-row { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </div>
  );
}

window.Hero = Hero;