/* global React */
const _useInView_v = window.useInView;

const VYHODY = [
  {
    title: 'Strategická poloha',
    body: 'Příbram – Březové Hory, hned u dvouproudové komunikace I/18. Praha 60 km, dálnice D4 v dosahu, autobusové i vlakové spojení v blízkosti.',
  },
  {
    title: 'Snadný přístup',
    body: 'Vjezd nákladních vozidel přímo do areálu. Vlastní parkování pro zaměstnance i návštěvy. Žádné fronty a žádná omezení.',
  },
  {
    title: 'Flexibilita prostor',
    body: 'Stavební úpravy a dispozice řešíme s každým nájemcem individuálně. Když nám řeknete, co potřebujete, postavíme to.',
  },
  {
    title: 'Bezpečnost',
    body: 'Uzamykatelné jednotky s vlastními zámky. Areál pod stálým dohledem, oplocený, s kontrolovaným vjezdem.',
  },
  {
    title: 'Kompletní zázemí',
    body: 'Voda, elektřina, vytápění, sociální zázemí, kuchyňky. Vlastní kotelna v areálu. Nemusíte řešit, co zatím není připojené.',
  },
  {
    title: 'Osobní přístup',
    body: 'Jsme přímí vlastníci areálu, tudíž budete komunikovat přímo s majitelem areálu. Dlouhodobé vztahy s nájemci jsou pro nás důležitější než krátkodobý zisk.',
  },
];

function VyhodaItem({ data, idx, inView }) {
  const num = String(idx + 1).padStart(2, '0');
  return (
    <li
      className={`vyhoda ${inView ? 'is-in' : ''}`}
      style={{ '--enter-delay': `${idx * 80}ms` }}
    >
      <span className="vyhoda-num t-mono" aria-hidden="true">{num}</span>
      <span className="vyhoda-tick" aria-hidden="true" />
      <h3 className="vyhoda-title">{data.title}</h3>
      <p className="vyhoda-body">{data.body}</p>
    </li>
  );
}

function SectionVyhody() {
  const [headRef, headIn] = _useInView_v(0.2);
  const [gridRef, gridIn] = _useInView_v(0.1);
  const [ctaRef, ctaIn] = _useInView_v(0.4);

  return (
    <section id="vyhody" className="sec sec-vyhody">
      <div className="container">
        <header ref={headRef} className={`vyhody-header ${headIn ? 'is-in' : ''}`}>
          <div className="t-eyebrow"><span className="dot"></span>Proč si vybrat nás</div>
          <h2 className="t-display t-h2 vyhody-h2">Proč si vybrat nás.</h2>
          <p className="t-body vyhody-sub">
            Drobní podnikatelé i regionální firmy si areál vybírají pro to, co se nedá napsat do nabídky.
          </p>
        </header>

        <ol ref={gridRef} className="vyhody-list" aria-label="Šest důvodů, proč si vybrat areál BUS real">
          {VYHODY.map((v, i) => (
            <VyhodaItem key={v.title} data={v} idx={i} inView={gridIn} />
          ))}
        </ol>

        <div ref={ctaRef} className={`vyhody-cta-wrap ${ctaIn ? 'is-in' : ''}`}>
          <a href="#kontakt?intent=prohlidka" className="vyhody-cta">
            Domluvit prohlídku areálu
            <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 className="container about-rail-wrap">
        <div className="rail" />
      </div>
    </section>
  );
}

window.SectionVyhody = SectionVyhody;