/**
 * @license
 * Copyright (c) 2024 Božidar Mišković. All rights reserved.
 * Unauthorized copying of this file, via any medium is strictly prohibited.
 */

'use client';
import { useEffect } from 'react';
import Link from 'next/link';

export default function Usluge() {
  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('active');
        }
      });
    }, { threshold: 0.1 });

    document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
  }, []);

  return (
    <div className="page-content">
      <header className="page-header radionica-bg">
        <div className="container">
          <h1 className="reveal">Naše Usluge</h1>
          <p className="reveal">Sveobuhvatna rešenja za vaš dom, poslovni prostor i industriju.</p>
        </div>
      </header>

      <section className="section">
        <div className="container">
          <div className="contact-grid">
            <div className="reveal">
              <div className="image-placeholder" style={{height: '300px', marginBottom: '20px', backgroundImage: "url('/small-works.png')", backgroundSize: 'cover', backgroundPosition: 'center'}}></div>
              <h2 style={{textAlign: 'left'}}>Radionica</h2>
              <p style={{textAlign: 'left', marginBottom: '30px'}}>
                Specijalizovani smo za preciznu obradu materijala i izradu unikatnih elemenata. 
                Naša radionica kombinuje modernu tehnologiju sa tradicionalnim zanatstvom.
              </p>
              <div className="info-card">
                <h3>Nameštaj po meri</h3>
                <p>Kombinacija punog drveta i čelika za vrhunsku estetiku i dugotrajnost.</p>
              </div>
              <div className="info-card">
                <h3>Bravarski radovi</h3>
                <p>Izrada kapija, ograda, nadstrešnica i svih vrsta metalnih konstrukcija.</p>
              </div>
              <Link href="/namestaj-i-bravarija" className="btn" style={{border: '1px solid var(--primary-blue)'}}>Detaljnije o radionici</Link>
            </div>

            <div className="reveal">
              <div className="image-placeholder" style={{height: '300px', marginBottom: '20px', backgroundImage: "url('/large-works.png')", backgroundSize: 'cover', backgroundPosition: 'center'}}></div>
              <h2 style={{textAlign: 'left'}}>Građevina</h2>
              <p style={{textAlign: 'left', marginBottom: '30px'}}>
                Pružamo usluge projektovanja i montaže objekata različitih namena. 
                Fokusiramo se na brzinu, energetsku efikasnost i stabilnost konstrukcije.
              </p>
              <div className="info-card">
                <h3>Montažne kuće</h3>
                <p>Savremeni domovi izgrađeni u rekordnom roku sa vrhunskom izolacijom.</p>
              </div>
              <div className="info-card">
                <h3>Industrijske hale</h3>
                <p>Čelične konstrukcije za skladišta, proizvodne pogone i logističke centre.</p>
              </div>
              <Link href="/objekti" className="btn btn-red">Detaljnije o objektima</Link>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
