/* global React */
const { useState, useEffect, useRef } = React;

// useInView – respektuje prefers-reduced-motion
function useInView(threshold = 0.18) {
  const ref = useRef(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce) { setInView(true); return; }
    const obs = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) { setInView(true); obs.disconnect(); } },
      { threshold }
    );
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, [threshold]);
  return [ref, inView];
}

// Count-up hook – animates a number from 0 → target over `duration` ms
function useCountUp(target, active, duration = 1500) {
  const [val, setVal] = useState(0);
  useEffect(() => {
    if (!active) return;
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce) { setVal(target); return; }
    let start = null;
    let raf;
    const step = (ts) => {
      if (start === null) start = ts;
      const t = Math.min((ts - start) / duration, 1);
      // easeOutCubic
      const eased = 1 - Math.pow(1 - t, 3);
      setVal(Math.round(eased * target));
      if (t < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [target, active, duration]);
  return val;
}

// Lucide-style icons (inline SVG, stroke 1.6)
const Icon = {
  Calendar: (p) => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
    </svg>
  ),
  Ruler: (p) => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M21.3 8.7 8.7 21.3a2.4 2.4 0 0 1-3.4 0L2.7 18.7a2.4 2.4 0 0 1 0-3.4L15.3 2.7a2.4 2.4 0 0 1 3.4 0l2.6 2.6a2.4 2.4 0 0 1 0 3.4Z"/><path d="m7.5 10.5 2 2"/><path d="m10.5 7.5 2 2"/><path d="m13.5 4.5 2 2"/><path d="m4.5 13.5 2 2"/>
    </svg>
  ),
  Building2: (p) => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/>
    </svg>
  ),
  Clock: (p) => (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
    </svg>
  ),
};

// Single stat tile with count-up
function StatTile({ icon: IconComp, target, suffix, label, format, active, delayMs }) {
  const v = useCountUp(target, active, 1500);
  const display = format ? format(v) : `${v}${suffix || ''}`;
  return (
    <div
      className="stat about-stat"
      style={{ '--i': delayMs / 100 }}
    >
      <span className="about-stat-icon" aria-hidden="true"><IconComp /></span>
      <span className="stat-num t-mono">{display}</span>
      <span className="stat-label">{label}</span>
    </div>
  );
}

function SectionOArealu() {
  const [textRef, textIn] = useInView(0.2);
  const [photoRef, photoIn] = useInView(0.2);
  const [statsRef, statsIn] = useInView(0.25);

  const stats = [
    { Icon: Icon.Calendar,  target: 1958, suffix: '',     label: 'Rok vzniku areálu' },
    { Icon: Icon.Ruler,     target: 15,   suffix: ' m²',  label: 'Nejmenší jednotka' },
    { Icon: Icon.Building2, target: 1400, suffix: '',     format: (v) => `${v.toLocaleString('cs-CZ')}+\u00A0m²`, label: 'Největší hala' },
    { Icon: Icon.Clock,     target: 24,   suffix: '/7',   label: 'Přístup pro nájemce' },
  ];

  return (
    <section id="o-arealu" className="sec sec-about">
      <div className="container">
        <div className="about-grid">
          <div ref={textRef} className={`about-text ${textIn ? 'is-in' : ''}`}>
            <div className="t-eyebrow"><span className="dot"></span>O areálu</div>
            <h2 className="t-display t-h2 about-h2">
              Šest desetiletí v jednom rytmu.
            </h2>
            <div className="about-body">
              <p className="t-body-l">
                Areál v ulici K&nbsp;Podlesí vyrostl v&nbsp;roce 1958 jako garáže ČSAD
                pro nově zavedenou městskou hromadnou dopravu v&nbsp;Příbrami. Stál
                tu, když odsud do práce vyjížděla celá Příbram, viděl uranový boom
                70.&nbsp;let i&nbsp;privatizaci 90.&nbsp;let. A&nbsp;zatímco se okolí měnilo,
                on jel dál.
              </p>
              <p className="t-body-l">
                Dnes pod značkou BUS&nbsp;real,&nbsp;s.r.o. provozujeme komerční areál
                pro firmy, živnostníky a&nbsp;řemeslníky – sklady, dílny a&nbsp;kanceláře
                k&nbsp;pronájmu od&nbsp;15&nbsp;m² do&nbsp;1&nbsp;400+&nbsp;m². Vlastní parkování,
                sociální zázemí, plné technické připojení, přístup 24&nbsp;hodin denně.
                Pod našima rukama je celý areál o&nbsp;pohybu – jenom dnes přidává
                k&nbsp;autobusům i&nbsp;nové firmy.
              </p>
            </div>
            <div className="about-cta">
              <a href="#prostory" className="btn btn-primary">
                Prohlédnout prostory
                <svg className="arrow" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
              </a>
            </div>
          </div>

          <div ref={photoRef} className={`about-photo ${photoIn ? 'is-in' : ''}`}>
            <div className="about-photo-frame">
              <img src="assets/foto-pribram-administrativa.jpg?v=2" alt="Letecký pohled na areál BUS real v Příbrami – Březových Horách" loading="lazy" />
              <div className="about-photo-shade" aria-hidden="true" />
            </div>
          </div>
        </div>

        <div ref={statsRef} className={`about-stats-row ${statsIn ? 'is-in' : ''}`}>
          {stats.map((s, i) => (
            <StatTile
              key={i}
              icon={s.Icon}
              target={s.target}
              suffix={s.suffix}
              format={s.format}
              label={s.label}
              active={statsIn}
              delayMs={i * 100}
            />
          ))}
        </div>
      </div>

      <div className="container about-rail-wrap">
        <div className="rail" />
      </div>
    </section>
  );
}

window.SectionOArealu = SectionOArealu;
window.useInView = useInView;