/* global React */

function HeroLux() {
  const isMobile = useIsMobile();
  return (
    <section data-screen-label="01 Hero" style={{
      position: 'relative',
      minHeight: '100vh',
      overflow: 'hidden',
      background: '#000',
      display: 'flex', flexDirection: 'column',
    }}>
      {/* Ken-burns hero image */}
      <KenBurns src="../../assets/interior-living.jpg" duration={26}
        from="scale(1.04) translate(0%, 0%)"
        to="scale(1.12) translate(-1.5%, -1.2%)"/>

      {/* Protection gradient — heavier for interior shot so type reads */}
      <div style={{
        position: 'absolute', inset: 0,
        background: `
          linear-gradient(to bottom,
            rgba(28, 26, 23, 0.55) 0%,
            rgba(28, 26, 23, 0.28) 22%,
            rgba(28, 26, 23, 0.32) 60%,
            rgba(28, 26, 23, 0.68) 100%)
        `,
      }}/>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse at 50% 55%, rgba(28,26,23,0.35) 0%, rgba(28,26,23,0) 60%)',
      }}/>

      {/* Top eyebrow */}
      <div style={{
        position: 'relative',
        padding: isMobile ? '100px 20px 0' : '120px 48px 0',
        textAlign: 'center', zIndex: 2,
      }}>
        <FadeIn delay={100}>
          <div style={{
            fontFamily: 'var(--font-body)', fontSize: 11,
            letterSpacing: '0.4em', textTransform: 'uppercase',
            color: 'rgba(251, 248, 242, 0.78)',
          }}>
            Co-hosting for short-term rental owners
          </div>
        </FadeIn>
      </div>

      {/* Centered main statement */}
      <div style={{
        position: 'relative',
        flex: '1 1 auto',
        display: 'flex', flexDirection: 'column', justifyContent: 'center',
        textAlign: 'center',
        padding: isMobile ? '40px 20px 60px' : '64px 48px 80px',
        zIndex: 2,
      }}>
        <FadeIn delay={240} y={28}>
          <h1 style={{
            fontFamily: 'var(--font-display)',
            fontSize: 'clamp(3rem, 6.5vw, 6.4rem)',
            fontWeight: 300,
            lineHeight: 1.04,
            letterSpacing: '-0.025em',
            color: 'var(--cream-50)',
            margin: 0,
            textWrap: 'balance',
            textShadow: '0 2px 40px rgba(0,0,0,0.4)',
            fontFeatureSettings: '"ss02", "liga"',
            maxWidth: 1180, marginLeft: 'auto', marginRight: 'auto',
          }}>
            You own the Airbnb. <span style={{ fontStyle: 'italic' }}>We do the work.</span>
          </h1>
        </FadeIn>
        <FadeIn delay={360}>
          <p style={{
            marginTop: 36,
            fontFamily: 'var(--font-body)',
            fontSize: 'clamp(1rem, 1.25vw, 1.1rem)',
            color: 'rgba(251, 248, 242, 0.84)',
            maxWidth: 760, margin: '36px auto 0',
            lineHeight: 1.65, textWrap: 'balance', fontWeight: 400,
          }}>
            You keep your listing, your reviews, your payouts, and your Superhost status. We handle pricing, guests, cleaning, and maintenance.
          </p>
        </FadeIn>

        {/* Stat strip — operational scale at a glance */}
        <FadeIn delay={420}>
          <div style={{
            marginTop: 56,
            maxWidth: 640, marginLeft: 'auto', marginRight: 'auto',
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
            borderTop: '1px solid rgba(251,248,242,0.18)',
            borderBottom: '1px solid rgba(251,248,242,0.18)',
            padding: '24px 0',
          }}>
            {[
              ['56',   'Properties'],
              ['13',   'States'],
              ['2021', 'Founded'],
            ].map(([n, l], i) => (
              <div key={l} style={{
                textAlign: 'center',
                borderLeft: i === 0 ? 'none' : '1px solid rgba(251,248,242,0.18)',
                padding: '0 12px',
              }}>
                <div style={{
                  fontFamily: 'var(--font-display)',
                  fontSize: 'clamp(1.8rem, 2.6vw, 2.6rem)',
                  fontWeight: 300, lineHeight: 1, color: 'var(--cream-50)',
                  letterSpacing: '-0.02em',
                }}>{n}</div>
                <div style={{
                  marginTop: 10,
                  fontFamily: 'var(--font-body)', fontSize: 10.5,
                  letterSpacing: '0.22em', textTransform: 'uppercase',
                  color: 'rgba(251,248,242,0.62)',
                }}>{l}</div>
              </div>
            ))}
          </div>
        </FadeIn>

        {/* CTAs */}
        <FadeIn delay={520}>
          <div style={{
            marginTop: 48,
            display: 'flex', justifyContent: 'center', alignItems: 'center',
            gap: isMobile ? 18 : 32,
            flexWrap: 'wrap',
          }}>
            <a href="#enquire" style={{
              fontFamily: 'var(--font-body)', fontSize: 12,
              letterSpacing: '0.24em', textTransform: 'uppercase',
              color: 'var(--ink-900)',
              background: 'var(--cream-50)',
              textDecoration: 'none',
              padding: '18px 32px',
              display: 'inline-flex', alignItems: 'center', gap: 14,
              border: '1px solid var(--cream-50)',
            }}>
              Get a property estimate
              <span style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', letterSpacing: 0, fontSize: 14 }}>—&nbsp;&rsaquo;</span>
            </a>
            <a href="#how" style={{
              fontFamily: 'var(--font-body)', fontSize: 12,
              letterSpacing: '0.24em', textTransform: 'uppercase',
              color: 'var(--cream-50)', textDecoration: 'none',
              paddingBottom: 6,
              borderBottom: '1px solid rgba(251,248,242,0.5)',
            }}>
              See how it works
            </a>
          </div>
        </FadeIn>
      </div>

      {/* Bottom — operational scale already shown in stat strip; no trust strip here */}
    </section>
  );
}

Object.assign(window, { HeroLux });