/* Hero.jsx — full-viewport hero with dark-tinted video bg */

const Hero = () => {
  const sectionStyle = {
    position: 'relative',
    minHeight: '100vh',
    display: 'flex',
    alignItems: 'center',
    color: '#fff',
    overflow: 'hidden',
    background: '#0a0a0a',
  };

  const videoStyle = {
    position: 'absolute',
    inset: 0,
    width: '100%',
    height: '100%',
    objectFit: 'cover',
    objectPosition: 'center',
    zIndex: 0,
    // Warm desk scene — preserve the mood, only touch contrast slightly
    filter: 'brightness(0.92) contrast(1.04)',
  };

  const overlayStyle = {
    position: 'absolute',
    inset: 0,
    // Stronger, layered overlay so the white headline always sits on a dark base,
    // even where the steam/cup highlights flare. Three layers:
    //  1) horizontal — dim the left where text sits
    //  2) bottom-up — protect text block, soft fade up
    //  3) overall vignette — dial down everything by ~25 %
    background:
      'linear-gradient(90deg, rgba(8,10,12,0.92) 0%, rgba(8,10,12,0.78) 30%, rgba(8,10,12,0.45) 55%, rgba(8,10,12,0.15) 80%, rgba(8,10,12,0) 100%), ' +
      'linear-gradient(180deg, rgba(8,10,12,0.55) 0%, rgba(8,10,12,0.15) 25%, rgba(8,10,12,0.05) 55%, rgba(8,10,12,0.55) 100%), ' +
      'radial-gradient(120% 80% at 50% 50%, transparent 0%, rgba(8,10,12,0.25) 100%)',
    zIndex: 1,
  };

  const contentStyle = {
    position: 'relative',
    zIndex: 2,
    width: '100%',
    paddingTop: 'clamp(96px, 14vw, 120px)',
    paddingBottom: 'clamp(64px, 10vw, 80px)',
  };

  const eyebrowStyle = {
    display: 'inline-flex',
    alignItems: 'center',
    gap: 10,
    fontSize: 12,
    fontWeight: 500,
    letterSpacing: '0.14em',
    textTransform: 'uppercase',
    color: 'rgba(255,255,255,0.75)',
    marginBottom: 36,
  };

  const headlineStyle = {
    fontFamily: 'var(--font-sans)',
    fontSize: 'clamp(34px, 7.2vw, 84px)',
    fontWeight: 500,
    lineHeight: 1.04,
    letterSpacing: '-0.025em',
    color: '#fff',
    margin: 0,
    maxWidth: '14ch',
    textWrap: 'balance',
    overflowWrap: 'break-word',
    hyphens: 'auto',
    textShadow: '0 2px 32px rgba(0,0,0,0.65), 0 1px 4px rgba(0,0,0,0.55)',
  };

  const accentWord = {
    fontFamily: 'var(--font-serif)',
    fontStyle: 'italic',
    fontWeight: 400,
    letterSpacing: '-0.015em',
  };

  const sublineStyle = {
    fontSize: 'clamp(18px, 1.5vw, 22px)',
    lineHeight: 1.45,
    color: 'rgba(255,255,255,0.92)',
    marginTop: 32,
    maxWidth: '44ch',
    fontWeight: 300,
    letterSpacing: '-0.005em',
    textShadow: '0 2px 24px rgba(0,0,0,0.65), 0 1px 3px rgba(0,0,0,0.5)',
  };

  const ctaRowStyle = {
    display: 'flex',
    alignItems: 'center',
    gap: 24,
    marginTop: 56,
    flexWrap: 'wrap',
  };

  const secondaryStyle = {
    color: 'rgba(255,255,255,0.85)',
    fontSize: 15,
    fontWeight: 500,
    display: 'inline-flex',
    alignItems: 'center',
    gap: 8,
    borderBottom: '1px solid rgba(255,255,255,0.3)',
    paddingBottom: 3,
    transition: 'border-color 220ms var(--ease-out)',
  };

  const metaRowStyle = {
    position: 'absolute',
    left: 0, right: 0, bottom: 40,
    zIndex: 2,
    color: 'rgba(255,255,255,0.55)',
    fontSize: 12,
    letterSpacing: '0.12em',
    textTransform: 'uppercase',
    fontWeight: 500,
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'flex-end',
  };

  return (
    <section style={sectionStyle} data-screen-label="Hero">
      <video
        autoPlay
        muted
        loop
        playsInline
        poster="assets/hero-desk.jpg"
        style={videoStyle}
        aria-hidden
      >
        <source src="assets/hero.webm" type="video/webm" />
        <source src="assets/hero.mp4" type="video/mp4" />
      </video>
      <div style={overlayStyle} />

      <div className="container" style={contentStyle}>
        <div className="reveal reveal-1" style={eyebrowStyle}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#fff' }} />
          KI-Transformation für den Mittelstand
        </div>

        <h1 className="reveal reveal-2" style={headlineStyle}>
          <em style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400, letterSpacing: '-0.015em' }}>KI-Transformation</em><br />für inhabergeführte KMU.
        </h1>

        <p className="reveal reveal-3" style={sublineStyle}>
          In 28&nbsp;Tagen wissen Sie, wo KI in Ihrem Unternehmen Zeit und Geld spart.
        </p>

        <div className="reveal reveal-4" style={ctaRowStyle}>
          <a href="kontakt.html" className="btn btn-white" style={{ whiteSpace: 'nowrap' }}>
            Kostenloses Erstgespräch buchen
            <span className="arrow" aria-hidden>→</span>
          </a>
          <a href="#ansatz" style={{ ...secondaryStyle, whiteSpace: 'nowrap' }} className="hero-secondary">
            Mehr erfahren
            <span aria-hidden>↓</span>
          </a>
        </div>
      </div>

      <div className="container reveal reveal-5" style={{ ...metaRowStyle, paddingLeft: 'var(--gutter)', paddingRight: 'var(--gutter)' }}>
        <span>Fritzlar · Hessen</span>
        <span>Seit 2020</span>
      </div>

      <style>{`
        .hero-secondary:hover { border-bottom-color: #fff !important; opacity: 1; }
      `}</style>
    </section>
  );
};

window.Hero = Hero;