function Hero() {
  const { t } = useI18n();
  const slideTexts = t('hero.slides');
  // Full-bleed cinematic scenes. Each is a layered composition:
  // a moody interior gradient backdrop + ambient glow + the lamp + scene caption.
  const slides = [
  {
    id: 'product-silver',
    eyebrow: slideTexts[1].eyebrow,
    sceneTitle: slideTexts[1].title,
    sceneCaption: slideTexts[1].caption,
    bgImage: 'assets/hero/silver-product.jpeg',
    copyOnDark: true
  },
  {
    id: 'sunset',
    eyebrow: slideTexts[2].eyebrow,
    sceneTitle: slideTexts[2].title,
    sceneCaption: slideTexts[2].caption,
    bgImage: 'assets/hero-amber-sunset-wide.png',
    copyOnDark: false
  },
  {
    id: 'sunlike',
    eyebrow: slideTexts[3].eyebrow,
    sceneTitle: slideTexts[3].title,
    sceneCaption: slideTexts[3].caption,
    bg: 'radial-gradient(ellipse at 65% 40%, #FFFDF8 0%, #F4EEE4 35%, #D9CFBC 70%, #A8987A 100%)',
    streaks: 'linear-gradient(115deg, transparent 0%, transparent 35%, rgba(255,255,255,0.45) 50%, transparent 65%, transparent 100%)',
    glow: 'radial-gradient(circle at 65% 42%, rgba(255,255,255,0.95), rgba(244,238,228,0.4) 30%, transparent 60%)',
    lampFilter: 'saturate(0.4) brightness(1.08) hue-rotate(-12deg)',
    bgImage: 'assets/hero-sunlike-daylight-wide.png',
    copyOnDark: true
  },
  {
    // 노을 이미지 — 요청에 따라 마지막 순서로 배치
    id: 'amber-coast',
    eyebrow: slideTexts[0].eyebrow,
    sceneTitle: slideTexts[0].title,
    sceneCaption: slideTexts[0].caption,
    bgImage: 'assets/hero/hero-amber-coast.png',
    copyOnDark: true
  }];


  const [idx, setIdx] = React.useState(0);

  React.useEffect(() => {
    const t = setInterval(() => setIdx((i) => (i + 1) % slides.length), 5600);
    return () => clearInterval(t);
  }, []);

  const slide = slides[idx];
  const onDark = slide.copyOnDark;

  // Subtle Ken-Burns drift on each slide (re-keys per index)
  const kenBurnsKey = `kb-${idx}`;

  return (
    <section id="hero" data-section="hero" data-screen-label="01 Hero"
    style={{
      position: 'relative',
      minHeight: '100vh',
      height: '100vh',
      width: '100%',
      overflow: 'hidden',
      color: onDark ? 'var(--bone)' : 'var(--ink)',
      transition: 'color 1200ms var(--ease-settled)'
    }}>

      {/* Full-bleed slide stack */}
      {slides.map((s, i) =>
      <div key={s.id} aria-hidden={idx !== i}
      style={{
        position: 'absolute', inset: 0,
        opacity: idx === i ? 1 : 0,
        transition: 'opacity 1400ms var(--ease-settled)',
        pointerEvents: idx === i ? 'auto' : 'none'
      }}>
          {/* Photo backdrop OR layered gradient */}
          {s.bgImage ?
        <div key={kenBurnsKey + s.id}
        style={{
          position: 'absolute', inset: 0,
          backgroundImage: `url(${s.bgImage})`,
          backgroundSize: 'cover',
          backgroundPosition: 'center center',
          backgroundColor: '#0F0805',
          animation: idx === i ? 'heroKB 9000ms var(--ease-settled) both' : 'none',
          transformOrigin: '50% 50%'
        }} /> :

        <>
              {/* backdrop with slow zoom */}
              <div key={kenBurnsKey + s.id}
          style={{
            position: 'absolute', inset: 0,
            background: s.bg,
            animation: idx === i ? 'heroKB 9000ms var(--ease-settled) both' : 'none',
            transformOrigin: '60% 40%'
          }} />
              {/* light streak overlay */}
              <div style={{
            position: 'absolute', inset: 0,
            background: s.streaks,
            mixBlendMode: 'screen',
            opacity: 0.9
          }} />
              {/* big amber/white halo behind lamp */}
              <div className="ds-glow-pulse" style={{
            position: 'absolute',
            right: '8%', top: '8%',
            width: 'min(72vh, 820px)',
            height: 'min(72vh, 820px)',
            borderRadius: '50%',
            background: s.glow,
            filter: 'blur(12px)',
            pointerEvents: 'none'
          }} />
              {/* lamp render */}
              <img
            src="assets/products/soladuo-19332-gold.png"
            alt=""
            style={{
              position: 'absolute',
              right: 'clamp(160px, 12vw, 220px)',
              bottom: 'clamp(40px, 8vh, 100px)',
              height: 'min(86vh, 880px)',
              width: 'auto',
              filter: s.lampFilter,
              transition: 'filter 1400ms var(--ease-settled)',
              animation: idx === i ? 'heroLampIn 1400ms var(--ease-settled) both' : 'none'
            }} />
          
            </>
        }
          {/* film grain on dark slides */}
          {s.copyOnDark &&
        <div style={{
          position: 'absolute', inset: 0, pointerEvents: 'none',
          backgroundImage: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1   0 0 0 0 1   0 0 0 0 1   0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>\")",
          mixBlendMode: 'overlay', opacity: 0.4
        }} />
        }
          {/* left-side darkening for copy legibility on light slides */}
          {!s.copyOnDark &&
        <div style={{
          position: 'absolute', inset: 0, pointerEvents: 'none',
          background: s.bgImage ?
          'linear-gradient(90deg, rgba(244,238,228,0.92) 0%, rgba(244,238,228,0.65) 28%, rgba(244,238,228,0.15) 55%, rgba(244,238,228,0) 75%)' :
          'linear-gradient(90deg, rgba(244,238,228,0.85) 0%, rgba(244,238,228,0.5) 30%, rgba(244,238,228,0) 55%)'
        }} />
        }
          {s.copyOnDark &&
        <div style={{
          position: 'absolute', inset: 0, pointerEvents: 'none',
          background: s.bgImage ?
          'linear-gradient(90deg, rgba(11,8,5,0.78) 0%, rgba(11,8,5,0.55) 28%, rgba(11,8,5,0.15) 55%, rgba(11,8,5,0) 75%)' :
          'linear-gradient(90deg, rgba(11,8,5,0.7) 0%, rgba(11,8,5,0.45) 30%, rgba(11,8,5,0) 55%)'
        }} />
        }
        </div>
      )}

      {/* CONTENT — overlaid */}
      <div className="hero-content" style={{
        position: 'relative', zIndex: 3,
        minHeight: '100vh',
        height: '100%',
        width: '100%',
        padding: '120px clamp(40px, 6vw, 96px) 120px clamp(40px, 6vw, 96px)',
        paddingRight: 'calc(132px + clamp(40px, 6vw, 96px))',
        display: 'flex', flexDirection: 'column', justifyContent: 'center'
      }}>
        <div className="hero-content-inner" style={{ maxWidth: 640 }}>
          <h1 className="hero-title" style={{ font: '300 clamp(64px, 9.2vw, 132px)/0.94 var(--font-display)', letterSpacing: '0.005em',
            color: onDark ? 'var(--bone)' : 'var(--ink)',
            margin: '0 0 14px',
            textWrap: 'balance',
            transition: 'color 1200ms var(--ease-settled)',
            textShadow: onDark ? '0 2px 24px rgba(0,0,0,0.35)' : 'none', fontSize: "clamp(64px, 13vw, 100px)"
          }}>
            SOLADUO
          </h1>
          <div className="hero-subtitle" style={{
            font: '300 clamp(18px, 1.9vw, 28px)/1.2 var(--font-display)',
            fontStyle: 'normal',
            letterSpacing: '0.01em',
            color: onDark ? 'rgba(244,238,228,0.86)' : 'var(--fg-2)',
            margin: '0 0 40px',
            textShadow: onDark ? '0 1px 8px rgba(0,0,0,0.25)' : 'none', fontSize: "clamp(20px, 4.2vw, 32px)"
          }}>
            {t('hero.subtitle')}
          </div>

          {/* Scene caption — moved below the title */}
          <div style={{
            maxWidth: 420,
            textAlign: 'left',
          }}>
            <div style={{
              font: '600 11px/1 var(--font-nav)',
              letterSpacing: '0',
              textTransform: 'uppercase',
              color: onDark ? 'var(--champagne-60)' : 'var(--champagne)',
              marginBottom: 14,
              transition: 'color 1200ms var(--ease-settled)',
              fontSize: '13px',
              textShadow: onDark ? '0 1px 4px rgba(0,0,0,0.4)' : 'none',
            }}>
              {t('hero.tagline')}
            </div>
            <div style={{
              font: '700 22px/1.2 var(--font-nav)',
              fontStyle: 'normal',
              letterSpacing: '-0.01em',
              color: onDark ? 'var(--bone)' : 'var(--ink)',
              margin: '0 0 10px',
              transition: 'color 1200ms var(--ease-settled)',
              textShadow: onDark ? '0 1px 8px rgba(0,0,0,0.45)' : 'none',
            }}>
              {slide.sceneTitle}
            </div>
            <div style={{
              font: '400 13px/1.55 var(--font-nav)',
              color: onDark ? 'rgba(244,238,228,0.88)' : 'var(--fg-3)',
              transition: 'color 1200ms var(--ease-settled)',
              textShadow: onDark ? '0 1px 4px rgba(0,0,0,0.4)' : 'none',
            }}>
              {slide.sceneCaption}
            </div>

          </div>

        </div>

      </div>

      {/* Slide indicator — dots with progress fill */}
      <div style={{
        position: 'absolute',
        left: '50%',
        bottom: 'clamp(28px, 4.5vh, 56px)',
        transform: 'translateX(-50%)',
        display: 'flex',
        alignItems: 'center',
        gap: 14,
        zIndex: 5,
      }}>
        {slides.map((s, i) => {
          const active = idx === i;
          const trackBg = onDark ? 'rgba(244,238,228,0.28)' : 'rgba(22,19,16,0.18)';
          const fill = onDark ? 'var(--bone)' : 'var(--ink)';
          return (
            <button key={s.id} onClick={() => setIdx(i)}
              aria-label={t('hero.goToSlide', { number: i + 1, title: s.sceneTitle })}
              style={{
                position: 'relative',
                width: active ? 64 : 18,
                height: 2,
                padding: 0,
                background: trackBg,
                border: 'none',
                cursor: 'pointer',
                transition: 'width 600ms var(--ease-settled), background-color 600ms var(--ease-settled)',
              }}>
              {active && (
                <span key={`prog-${idx}`} aria-hidden="true" style={{
                  position: 'absolute', inset: 0,
                  background: fill,
                  transformOrigin: 'left center',
                  animation: 'heroSlideProgress 5600ms linear forwards',
                }} />
              )}
            </button>
          );
        })}
        <span className="ds-mono" style={{
          marginLeft: 8,
          fontSize: 10,
          letterSpacing: '0.16em',
          color: onDark ? 'rgba(244,238,228,0.7)' : 'var(--fg-3)',
          transition: 'color 1200ms var(--ease-settled)',
        }}>
          {String(idx + 1).padStart(2, '0')} / {String(slides.length).padStart(2, '0')}
        </span>
      </div>

      <style>{`
        @keyframes heroSlideProgress {
          from { transform: scaleX(0); }
          to   { transform: scaleX(1); }
        }
      `}</style>

      <style>{`
        @keyframes heroProgress {
          from { transform: scaleX(0); }
          to   { transform: scaleX(1); }
        }
        @keyframes heroKB {
          from { transform: scale(1.04) translate(-1%, -1%); }
          to   { transform: scale(1.0) translate(0, 0); }
        }
        @keyframes heroLampIn {
          from { transform: translateY(18px) scale(0.985); opacity: 0; }
          to   { transform: translateY(0) scale(1); opacity: 1; }
        }
        @media (max-width: 860px) {
          #hero .hero-content {
            padding: 92px 24px 100px !important;
            justify-content: flex-end !important;
          }
          #hero .hero-content-inner { max-width: 100% !important; }
        }
        @media (max-width: 760px) {
          #hero img { right: -8% !important; height: 60vh !important; opacity: 0.6; }
        }
      `}</style>
    </section>);

}

function ctrlBtn(onDark) {
  return {
    width: 36, height: 36, padding: 0,
    background: 'transparent',
    border: '1px solid ' + (onDark ? 'rgba(244,238,228,0.4)' : 'rgba(22,19,16,0.3)'),
    color: onDark ? 'var(--bone)' : 'var(--ink)',
    cursor: 'pointer',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    borderRadius: 0,
    transition: 'background 240ms, border-color 240ms'
  };
}

window.Hero = Hero;