// Hero — animated backdrop, stacked headline with gold sheen word, stats.
const HERO_DEFAULT_SLIDES = [
  'assets/photos/hero-1.jpg',
  'assets/photos/hero-2.jpg',
  'assets/photos/hero-3.jpg',
  'assets/photos/hero-4.jpg',
];
const HERO_OV = (window.ARMAEK_OVERRIDES && window.ARMAEK_OVERRIDES.images) || {};
const HERO_SLIDES = HERO_DEFAULT_SLIDES.map((d, i) => (HERO_OV.hero && HERO_OV.hero[i]) || d);

function HeroSlides({ label }) {
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    const id = setInterval(() => setIdx((i) => (i + 1) % HERO_SLIDES.length), 5200);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="imgpanel hero-slides" role="img" aria-label={label || 'Armaek'}>
      {HERO_SLIDES.map((src, i) => (
        <img key={src} src={window.AURL(src)} alt="" className={i === idx ? 'on' : ''}
          loading={i === 0 ? 'eager' : 'lazy'} />
      ))}
      <div className="ip-shade" />
      <span className="ip-tick tl" /><span className="ip-tick tr" />
      <span className="ip-tick bl" /><span className="ip-tick br" />
    </div>
  );
}

function Hero({ onQuote }) {
  const { Icon } = window.ArmaekDesignSystem_06a5c5;
  const { useReveal, Counter } = window.ArmaekLib;
  const { lang } = window.ArmaekI18n.useLang();
  const t = window.ArmaekI18n.STR[lang].hero;
  const ref = useReveal();
  const statDefaults = [[3, ''], [8, ''], [3, ''], [100, '%']];
  const oStats = (window.ARMAEK_OVERRIDES || {}).stats;
  const stats = statDefaults.map((d, i) => {
    const v = oStats && oStats[i];
    if (!v) return d;
    const m = String(v).match(/^(\d+)\s*(.*)$/);
    return m ? [parseInt(m[1], 10), m[2]] : d;
  });
  return (
    <section id="domov" className="hero" ref={ref}>
      <div className="hero-bg">
        <div className="hero-grid" />
        <div className="hero-glow" />
        <div className="hero-ring"><div className="r2" /></div>
      </div>
      <div className="wrap" style={{ position: 'relative', paddingTop: 40, paddingBottom: 0 }}>
        <div className="hero-cols" style={{
          display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 56, alignItems: 'center',
          minHeight: 'calc(100vh - 220px)',
        }}>
          <div>
            <span className="kicker reveal">{t.kicker}</span>
            <h1 className="display reveal" data-d="1" style={{ fontSize: 'clamp(36px, 4.3vw, 60px)', margin: '22px 0 24px' }}>
              {t.h1a}<br /><span className="gold-text">{t.h1gold}</span>
            </h1>
            <p className="lead reveal m-hide" data-d="2" style={{ maxWidth: 480, marginBottom: 36 }}>{t.lead}</p>
            <div className="reveal m-hide" data-d="3" style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <a href="#sluzby-detail" className="btn btn-primary btn-lg">
                {t.more} <Icon name="arrow-right" size={17} className="arr" />
              </a>
              <button className="btn btn-ghost btn-lg" onClick={onQuote}>{window.ArmaekI18n.STR[lang].quote}</button>
            </div>
          </div>
          <div className="reveal hero-photo" data-d="2" style={{
            height: 480, borderRadius: 'var(--radius-md)', overflow: 'hidden',
            border: '1px solid var(--border-hairline)', boxShadow: 'var(--shadow-lg)',
          }}>
            <HeroSlides label={t.img} />
          </div>
          {/* Mobile-only CTA row: headline -> photo -> buttons */}
          <div className="m-only-flex hero-cta-m reveal" data-d="3">
            <a href="#sluzby-detail" className="btn btn-primary btn-lg">
              {t.more} <Icon name="arrow-right" size={17} className="arr" />
            </a>
            <button className="btn btn-ghost btn-lg" onClick={onQuote}>{window.ArmaekI18n.STR[lang].quote}</button>
          </div>
        </div>

        <div className="reveal stat-grid" data-d="3" style={{
          marginTop: 8, display: 'grid', gridTemplateColumns: 'repeat(4,1fr)',
          borderTop: '1px solid var(--border-hairline)',
        }}>
          {stats.map(([n, s], i) => (
            <div key={i} style={{
              padding: '28px 24px 34px',
              borderRight: i < 3 ? '1px solid var(--border-hairline)' : 'none',
            }}>
              <div className="display gold-text" style={{ fontSize: 'clamp(30px,3.4vw,44px)' }}>
                <Counter to={n} suffix={s} />
              </div>
              <div className="faint" style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase',
                letterSpacing: 'var(--tracking-wide)', fontSize: 'var(--text-xs)', marginTop: 6 }}>{t.stats[i]}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;