function Hero() {
  const images = ['assets/hero-1.jpg', 'assets/hero-2.jpg', 'assets/hero-3.jpg', 'assets/hero-4.jpg'];
  const [idx, setIdx] = React.useState(0);
  const { t, lang } = useI18n();
  React.useEffect(() => {
    const tm = setInterval(() => setIdx(i => (i + 1) % images.length), 7000);
    return () => clearInterval(tm);
  }, []);

  const titleLines = t('hero.title');
  const subLines = t('hero.sub');

  return (
    <section className="hero" style={heroStyles.hero}>
      <div style={heroStyles.imageStack}>
        {images.map((src, i) => (
          <div key={src} style={{
            ...heroStyles.imageLayer,
            backgroundImage: `url(${src})`,
            opacity: i === idx ? 1 : 0,
            transform: i === idx ? 'scale(1.06)' : 'scale(1.0)',
          }} />
        ))}
        <div style={heroStyles.veil} />
        <div style={heroStyles.vignette} />
      </div>

      <svg style={heroStyles.wind} viewBox="0 0 1440 900" preserveAspectRatio="none">
        <g stroke="var(--kin)" strokeWidth="0.6" fill="none" opacity="0.18">
          <path d="M -50 200 Q 400 180 800 220 T 1500 200">
            <animate attributeName="d" dur="14s" repeatCount="indefinite"
              values="M -50 200 Q 400 180 800 220 T 1500 200;
                      M -50 210 Q 400 240 800 200 T 1500 220;
                      M -50 200 Q 400 180 800 220 T 1500 200" />
          </path>
          <path d="M -50 360 Q 400 340 800 380 T 1500 360" opacity="0.6">
            <animate attributeName="d" dur="18s" repeatCount="indefinite"
              values="M -50 360 Q 400 340 800 380 T 1500 360;
                      M -50 350 Q 400 400 800 360 T 1500 380;
                      M -50 360 Q 400 340 800 380 T 1500 360" />
          </path>
          <path d="M -50 580 Q 400 600 800 560 T 1500 590" opacity="0.4">
            <animate attributeName="d" dur="22s" repeatCount="indefinite"
              values="M -50 580 Q 400 600 800 560 T 1500 590;
                      M -50 590 Q 400 560 800 600 T 1500 580;
                      M -50 580 Q 400 600 800 560 T 1500 590" />
          </path>
        </g>
      </svg>

      <div style={heroStyles.heroInner} className="container">
        <div style={heroStyles.heroCenter}>
          {lang === 'ja' && (
            <div style={heroStyles.kanjiVertical} className="hero-kanji">
              <span style={heroStyles.kanjiChar} className="reveal in">風</span>
              <span style={heroStyles.kanjiSep}></span>
              <span style={heroStyles.kanjiChar} className="reveal in reveal-delay-1">都</span>
            </div>
          )}
          {lang === 'en' && (
            <div style={heroStyles.kanjiVertical} className="hero-kanji">
              <span style={{...heroStyles.kanjiChar, fontFamily:'var(--f-en-serif)', fontStyle:'italic', fontWeight:300}} className="reveal in">F</span>
              <span style={heroStyles.kanjiSep}></span>
              <span style={{...heroStyles.kanjiChar, fontFamily:'var(--f-en-serif)', fontStyle:'italic', fontWeight:300}} className="reveal in reveal-delay-1">u</span>
            </div>
          )}
          <div style={heroStyles.heroLeftBlock} className="hero-title-block">
            <div style={heroStyles.brand}>{t('hero.brand')}</div>
            <h1 style={heroStyles.heroTitle} className="reveal in reveal-delay-2">
              {titleLines[0]}<br />
              {titleLines[1]}
            </h1>
            <p style={heroStyles.heroSub} className="reveal in reveal-delay-3">
              {subLines[0]}<br />
              {subLines[1]}
            </p>
          </div>
        </div>

        <div style={heroStyles.heroBottom} className="hero-bottom-mobile">
          <div style={heroStyles.scrollHint}>
            <span>{t('hero.scroll')}</span>
            <span style={heroStyles.scrollLine}></span>
          </div>
          <div style={heroStyles.pagination}>
            {images.map((_, i) => (
              <button key={i} onClick={() => setIdx(i)}
                style={{
                  ...heroStyles.dot,
                  width: i === idx ? 32 : 18,
                  background: i === idx ? 'var(--kin)' : 'rgba(201,169,97,0.3)',
                }}
                aria-label={`slide ${i + 1}`}
              />
            ))}
          </div>
          <div style={heroStyles.heroIndex}>
            <span style={{ color: 'var(--kin)' }}>0{idx + 1}</span>
            <span style={{ opacity: 0.5 }}> / 0{images.length}</span>
          </div>
        </div>
      </div>
    </section>
  );
}

const heroStyles = {
  hero: { position: 'relative', minHeight: '100vh', width: '100%', overflow: 'hidden', background: 'var(--xuan)' },
  imageStack: { position: 'absolute', inset: 0 },
  imageLayer: { position: 'absolute', inset: 0, backgroundSize: 'cover', backgroundPosition: 'center', transition: 'opacity 1.6s ease, transform 8s linear' },
  veil: { position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(14,11,8,0.55) 0%, rgba(14,11,8,0.45) 40%, rgba(14,11,8,0.85) 100%)' },
  vignette: { position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at center, transparent 30%, rgba(14,11,8,0.7) 100%)' },
  wind: { position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none' },
  heroInner: { position: 'relative', zIndex: 2, minHeight: '100vh', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', paddingTop: '140px', paddingBottom: '48px' },
  heroTopMeta: { display: 'flex', alignItems: 'center', gap: 14, fontFamily: 'var(--f-mono)', fontSize: 11, letterSpacing: '0.24em', color: 'var(--kin)', textTransform: 'uppercase' },
  metaDot: { color: 'var(--nibi)' },
  heroCenter: { display: 'flex', alignItems: 'flex-end', gap: 'clamp(32px, 6vw, 80px)', flex: 1, paddingTop: 60, paddingBottom: 40 },
  kanjiVertical: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 },
  kanjiChar: { fontFamily: 'var(--f-jp-serif)', fontWeight: 600, fontSize: 'clamp(80px, 14vw, 180px)', color: 'var(--washi)', lineHeight: 0.9, textShadow: '0 4px 40px rgba(0,0,0,0.6)' },
  kanjiSep: { width: 1, height: 28, background: 'var(--kin)', opacity: 0.6 },
  heroLeftBlock: { flex: 1, paddingBottom: 24, maxWidth: 640 },
  brand: { fontFamily: 'var(--f-en-serif)', fontStyle: 'italic', fontWeight: 300, fontSize: 14, letterSpacing: '0.32em', color: 'var(--kin)', marginBottom: 24 },
  heroTitle: { fontFamily: 'var(--f-jp-serif)', fontWeight: 500, fontSize: 'clamp(28px, 4.2vw, 56px)', lineHeight: 1.35, color: 'var(--washi)', letterSpacing: '0.04em', marginBottom: 28 },
  heroSub: { fontFamily: 'var(--f-en-serif)', fontStyle: 'italic', fontWeight: 300, fontSize: 'clamp(15px, 1.4vw, 18px)', lineHeight: 1.7, color: 'var(--washi-dim)', maxWidth: 520 },
  heroBottom: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: 32, borderTop: '1px solid var(--hr)' },
  scrollHint: { display: 'flex', alignItems: 'center', gap: 14, fontFamily: 'var(--f-mono)', fontSize: 10, letterSpacing: '0.32em', color: 'var(--washi-dim)', textTransform: 'uppercase' },
  scrollLine: { width: 60, height: 1, background: 'linear-gradient(90deg, var(--kin), transparent)' },
  pagination: { display: 'flex', gap: 10 },
  dot: { height: 2, border: 'none', cursor: 'pointer', transition: 'all 0.4s ease' },
  heroIndex: { fontFamily: 'var(--f-mono)', fontSize: 11, letterSpacing: '0.2em' },
};

window.Hero = Hero;