/* global React, Icon, Button, Eyebrow, Grain, useLanguage */
const { useState, useEffect, useRef } = React;

const HERO_SLIDES = [
  {
    src: 'assets/photos/hero-webp/01-central-park-photographer.webp',
    width: 1916,
    height: 821,
    eyebrow: 'central park · autumn',
    meta: 'frame 042 · canon · 35mm',
    position: 'center 38%',
    mobilePosition: '65% 38%'
  },
  {
    src: 'assets/photos/hero-webp/02-long-beach-seated.webp',
    width: 1920,
    height: 1280,
    eyebrow: 'long beach · quiet tide',
    meta: 'frame 052 · long beach · ny',
    position: 'center 48%',
    mobilePosition: '56% 48%'
  },
  {
    src: 'assets/photos/hero-webp/03-waterfront-portrait.webp',
    width: 2010,
    height: 1248,
    eyebrow: 'waterfront · winter light',
    meta: 'frame 001 · waterfront · ny',
    position: 'center 48%',
    mobilePosition: '58% 48%'
  },
  {
    src: 'assets/photos/hero-webp/04-long-beach-walking.webp',
    width: 1920,
    height: 1280,
    eyebrow: 'long beach · ocean air',
    meta: 'frame 072 · long beach · ny',
    position: 'center 48%',
    mobilePosition: '56% 48%'
  },
  {
    src: 'assets/photos/hero-webp/05-times-square-closeup.webp',
    width: 1920,
    height: 1280,
    eyebrow: 'times square · city light',
    meta: 'frame 024 · midtown · ny',
    position: 'center 42%',
    mobilePosition: '58% 42%'
  },
  {
    src: 'assets/photos/hero-webp/06-times-square-wide.webp',
    width: 1920,
    height: 1280,
    eyebrow: 'times square · city rhythm',
    meta: 'frame 010 · midtown · ny',
    position: 'center 44%',
    mobilePosition: '58% 44%'
  },
  {
    src: 'assets/photos/hero-webp/07-central-park-spring.webp',
    width: 1500,
    height: 1000,
    eyebrow: 'central park · spring',
    meta: 'frame 061 · uptown · ny',
    position: 'center 48%',
    mobilePosition: '46% 48%'
  }
];


function Hero({ openBooking, scrollTo }) {
  const { isPortuguese } = useLanguage();
  const [idx, setIdx] = useState(0);
  const [paused, setPaused] = useState(false);
  const timerRef = useRef(null);

  // Auto-advance every 5s, pause on hover.
  useEffect(() => {
    if (paused || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    timerRef.current = setInterval(() => {
      setIdx((i) => (i + 1) % HERO_SLIDES.length);
    }, 5000);
    return () => clearInterval(timerRef.current);
  }, [paused]);

  const current = HERO_SLIDES[idx];

  return (
    <section
      data-screen-label="01 Hero"
      id="top"
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
      style={{
        position: 'relative', height: '100vh', minHeight: 720, width: '100%',
        overflow: 'hidden', background: 'var(--asphalt)'
      }}>
      
      {/* Every frame loads eagerly and remains mounted for a true overlapping dissolve. */}
      {HERO_SLIDES.map((slide, slideIndex) => {
        const active = slideIndex === idx;
        return (
          <div key={slide.src} className="tb-hero-layer" aria-hidden style={{
            position: 'absolute', inset: 0,
            opacity: active ? 1 : 0,
            visibility: 'visible',
          }}>
            <img className="tb-hero-image"
              src={slide.src}
              alt=""
              aria-hidden="true"
              width={slide.width}
              height={slide.height}
              loading="eager"
              fetchPriority={slideIndex === 0 ? 'high' : 'auto'}
              decoding="async"
              style={{
                position: 'absolute', inset: 0, width: '100%', height: '100%',
                objectFit: 'cover',
                '--hero-position': slide.position,
                '--hero-mobile-position': slide.mobilePosition,
              }} />
          </div>
        );
      })}

      <Grain opacity={0.10} />

      {/* Protection gradients */}
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'linear-gradient(180deg, rgba(22,21,19,0.62) 0%, rgba(22,21,19,0.05) 22%, rgba(22,21,19,0.0) 50%, rgba(22,21,19,0.55) 78%, rgba(22,21,19,0.92) 100%)' }} />

      <div className="tb-hero-content" style={{
        position: 'absolute', inset: 0, padding: '120px 32px 96px',
        maxWidth: 1440, margin: '0 auto', boxSizing: 'border-box',
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between'
      }}>
        {/* Top eyebrow row */}
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 24, flexWrap: 'wrap',
          opacity: 1
        }}>
          <Eyebrow dark>{current.eyebrow}</Eyebrow>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'rgba(232,226,212,0.62)', textAlign: 'right' }}>
            est. 2019<br />brooklyn, ny
          </span>
        </div>

        {/* Headline block — animates only on first load, content stays fixed across slides */}
        <div className="tb-hero-copy" data-comment-anchor="0b9f845f6d-div-113-9">
          <h1 style={{
            margin: 0,
            fontFamily: 'var(--font-display)', fontWeight: 900,

            letterSpacing: '-0.045em',
            color: 'var(--limestone)', textWrap: 'balance', maxInlineSize: '12ch',
            opacity: 1, lineHeight: 0.9,
            fontSize: 'clamp(56px, 9vw, 132px)'
          }}>
            {isPortuguese ? <>Guarde o Momento<br />em Nova<br />York</> : <>Save the Moment<br />in New<br />York</>}<span style={{ color: 'var(--taxi)' }}>.</span>
          </h1>

          <div className="tb-hero-actions-row" style={{
            display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
            gap: 32, marginTop: 32, flexWrap: 'wrap',
            opacity: 1
          }}>
            <p style={{
              fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 18, lineHeight: 1.45,
              color: '#E8E2D4', maxInlineSize: '40ch', margin: 0, opacity: 0.92
            }}>
              {isPortuguese ? 'Fotografia natural em Nova York para casais, famílias e viajantes. Histórias autênticas entre parques, ruas, praias e táxis amarelos.' : 'Natural New York City photography for couples, families, and travelers. Authentic stories captured in parks, city streets, and at the beach.'}
            </p>
            <div className="tb-hero-buttons" style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <Button variant="accent" size="lg" href="Projects.html" icon={<Icon name="arrow-up-right" size={16} />}>
                {isPortuguese ? 'Ver trabalhos' : 'See the work'}
              </Button>
              <Button variant="ghost" size="lg" dark onClick={openBooking} icon={<Icon name="calendar" size={16} />}>
                {isPortuguese ? 'Agendar conversa' : 'Book a call'}
              </Button>
            </div>
          </div>
        </div>
      </div>

      {/* Dot indicators — bottom-center, click to jump, softly animate */}
      <div style={{
        position: 'absolute', left: '50%', bottom: 32, transform: 'translateX(-50%)',
        display: 'inline-flex', alignItems: 'center', gap: 14, zIndex: 4,
        opacity: 1
      }}>
        {HERO_SLIDES.map((_, i) => {
          const active = i === idx;
          return (
            <button
              key={i}
              onClick={() => setIdx(i)}
              aria-label={`${isPortuguese ? 'Mostrar imagem' : 'Show image'} ${i + 1} ${isPortuguese ? 'de' : 'of'} ${HERO_SLIDES.length}`}
              aria-current={active ? 'true' : undefined}
              style={{
                width: active ? 32 : 8,
                height: 8,
                padding: 0,
                borderRadius: 999,
                border: 'none',
                background: active ? 'var(--taxi)' : 'rgba(244,239,229,0.40)',
                cursor: 'pointer',
                transition: 'width 520ms var(--ease-cinematic), background 320ms var(--ease-out)'
              }} />);


        })}
      </div>

      {/* Frame meta — bottom-left, swaps with the active slide */}
      <div key={`meta-${idx}`} style={{
        position: 'absolute', left: 32, bottom: 36, zIndex: 4,
        fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.22em',
        textTransform: 'uppercase', color: 'rgba(244,239,229,0.55)',
        animation: 'tbHeroMetaIn 700ms var(--ease-out)'
      }}>
        {current.meta}
      </div>

      {/* Slide counter — bottom-right */}
      <div style={{
        position: 'absolute', right: 32, bottom: 36, zIndex: 4,
        fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.22em',
        textTransform: 'uppercase', color: 'rgba(244,239,229,0.55)'
      }}>
        0{idx + 1} <span style={{ opacity: 0.5, margin: '0 6px' }}>/</span> 0{HERO_SLIDES.length}
      </div>

      <style>{`
        @keyframes tbHeroMetaIn { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: translateY(0) } }
        .tb-hero-layer {
          transition: opacity 1800ms cubic-bezier(0.22, 1, 0.36, 1);
          will-change: opacity;
        }
        .tb-hero-image { object-position: var(--hero-position); image-rendering: auto; }
        @media (max-width: 720px) {
          .tb-hero-image { object-position: var(--hero-mobile-position); }
        }
        @media (prefers-reduced-motion: reduce) {
          .tb-hero-layer { transition: none; }
        }
      `}</style>
    </section>);

}

window.Hero = Hero;