const { useState: useStateHero, useEffect: useEffectHero } = React;

const Hero = ({ lang, onNav }) => {
  const t = window.DICT[lang].hero;
  const [revealed, setRevealed] = useStateHero(false);

  useEffectHero(() => {
    const id = setTimeout(() => setRevealed(true), 280);
    return () => clearTimeout(id);
  }, []);

  return (
    <section
      className="hero"
      id="top"
      data-screen-label="01 Hero"
      style={{
        borderTop: 0,
        borderBottom: 0,
        background: '#0a0c0f',
        backgroundImage: "linear-gradient(180deg, rgba(10,12,15,0.55) 0%, rgba(10,12,15,0.78) 60%, rgba(10,12,15,0.95) 100%), url('assets/hero-bg.png')",
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        backgroundRepeat: 'no-repeat',
        minHeight: '100vh',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'flex-start',
        paddingTop: 140,
        paddingBottom: 120,
        position: 'relative',
      }}
    >
      <div className="container" style={{ width: '100%', opacity: revealed ? 1 : 0, transform: revealed ? 'translateY(0)' : 'translateY(36px)', transition: 'opacity 1100ms cubic-bezier(.22,.61,.36,1), transform 1100ms cubic-bezier(.22,.61,.36,1)' }}>
        <h1
          style={{
            fontFamily: "'Cormorant Garamond', Georgia, serif",
            fontWeight: 400,
            color: '#ffffff',
            fontSize: 'clamp(48px, 7.4vw, 112px)',
            lineHeight: 1.02,
            letterSpacing: '-0.025em',
            maxWidth: '18ch',
          }}
        >
          {t.headline1}<br />{t.headline2}
        </h1>

        <p
          style={{
            marginTop: 32,
            color: '#c4c8d2',
            fontFamily: "'Inter', sans-serif",
            fontWeight: 300,
            fontSize: 'clamp(15px, 1.3vw, 20px)',
            lineHeight: 1.55,
          }}
        >
          {t.sub}
        </p>

        <div style={{ marginTop: 56, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
          <a
            href="#services"
            onClick={(e) => { e.preventDefault(); onNav('services'); }}
            style={{
              display: 'inline-flex',
              alignItems: 'center',
              gap: 14,
              padding: '16px 26px',
              fontFamily: "'IBM Plex Mono', monospace",
              fontSize: 12,
              letterSpacing: '0.18em',
              textTransform: 'uppercase',
              textDecoration: 'none',
              border: '1px solid #ffffff',
              background: 'transparent',
              color: '#ffffff',
              transition: 'all 200ms ease',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.background = '#ffffff'; e.currentTarget.style.color = '#0a0c0f'; }}
            onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = '#ffffff'; }}
          >
            {t.cta1}
          </a>
          <a
            href="#contact"
            onClick={(e) => { e.preventDefault(); onNav('contact'); }}
            style={{
              display: 'inline-flex',
              alignItems: 'center',
              gap: 14,
              padding: '16px 26px',
              fontFamily: "'IBM Plex Mono', monospace",
              fontSize: 12,
              letterSpacing: '0.18em',
              textTransform: 'uppercase',
              textDecoration: 'none',
              border: '1px solid #ffffff',
              background: '#ffffff',
              color: '#0a0c0f',
              transition: 'all 200ms ease',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = '#ffffff'; }}
            onMouseLeave={(e) => { e.currentTarget.style.background = '#ffffff'; e.currentTarget.style.color = '#0a0c0f'; }}
          >
            {t.cta2}
          </a>
        </div>
      </div>
    </section>
  );
};

window.Hero = Hero;