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

function ProstorCard({ data, idx, inView }) {
  return (
    <a
      href={`#kontakt?type=${data.type}`}
      className={`prostor-card ${inView ? 'is-in' : ''}`}
      style={{ '--i': idx }}
    >
      <div className="img-frame prostor-img">
        <img src={data.img} alt={data.imgAlt} loading="lazy" />
      </div>
      <div className="prostor-body">
        <h3 className="t-h3 prostor-title">{data.title}</h3>
        <div className="prostor-area t-mono">{data.area}</div>
        <p className="t-body prostor-desc">{data.desc}</p>
        <span className="prostor-cta">
          {data.cta}
          <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>
        </span>
      </div>
    </a>
  );
}

function SectionProstory() {
  const [headRef, headIn] = _useInView_p(0.2);
  const [gridRef, gridIn] = _useInView_p(0.15);

  const cards = [
    {
      type: 'sklad',
      img: 'assets/foto-pribram-sklady.jpg?v=2',
      imgAlt: 'Skladová budova v areálu BUS real',
      title: 'Skladovací prostory',
      area: 'od 15 m² do 1 400+ m²',
      desc: 'Suché, uzamykatelné jednotky pro malé i velké zboží. Od příručního skladu po haly s administrativním zázemím.',
      cta: 'Mám zájem o sklad',
    },
    {
      type: 'vyroba',
      img: 'assets/foto-pribram-vyroba.jpg?v=2',
      imgAlt: 'Výrobní hala a dílny v areálu',
      title: 'Výrobní prostory',
      area: 'od 40 m²',
      desc: 'Suché uzamykatelné prostory pro lehkou výrobu, montáže a řemeslnou dílnu. Stavební úpravy podle vašich potřeb.',
      cta: 'Mám zájem o výrobu',
    },
    {
      type: 'kancelar',
      img: 'assets/foto-pribram-budova-admin.jpg?v=2',
      imgAlt: 'Administrativní budova s kancelářemi',
      title: 'Kanceláře',
      area: 'od 15 m²',
      desc: 'Jednotlivé kanceláře dostupné samostatně ze společné chodby. Sociální zázemí a kuchyňka na každém patře.',
      cta: 'Mám zájem o kancelář',
    },
  ];

  return (
    <section id="prostory" className="sec sec-prostory">
      <div className="container">
        <header ref={headRef} className={`prostory-header ${headIn ? 'is-in' : ''}`}>
          <div className="t-eyebrow"><span className="dot"></span>Co u nás najdete</div>
          <h2 className="t-display t-h2 prostory-h2">Tři typy prostor. Jeden areál.</h2>
          <p className="t-body-l prostory-sub">
            Skladujeme, vyrábíme, kancelaříme. Vyberte si, nebo vám připravíme jednotku na míru.
          </p>
        </header>

        <div ref={gridRef} className="prostory-grid">
          {cards.map((c, i) => (
            <ProstorCard key={c.type} data={c} idx={i} inView={gridIn} />
          ))}
        </div>
      </div>

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

window.SectionProstory = SectionProstory;