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

'use client';

export default function Contact() {
  return (
    <div className="page-content">
      <header className="page-header">
        <div className="container">
          <h1>Kontakt</h1>
          <p>Vaš projekat počinje ovde. Pišite nam ili nas pozovite za besplatnu konsultaciju.</p>
        </div>
      </header>

      <section className="section">
        <div className="container">
          <div className="contact-grid">
            <div className="contact-info-premium">
              <h2>Podaci za kontakt</h2>
              
              <div className="info-card">
                <h3>Adresa</h3>
                <p>Ulica i broj, Grad, Srbija</p>
              </div>

              <div className="info-card">
                <h3>Telefon</h3>
                <p><a href="tel:+381600000000" className="contact-link">+381 60 000 0000</a></p>
                <p style={{fontSize: '0.8rem', color: '#666', textAlign: 'left'}}>Dostupni smo: Pon-Pet 08:00 - 17:00</p>
              </div>

              <div className="info-card">
                <h3>Email</h3>
                <p><a href="mailto:office@progrestim.rs" className="contact-link">office@progrestim.rs</a></p>
              </div>

              <div className="info-card">
                <h3>Instagram</h3>
                <p><a href="https://instagram.com" target="_blank" className="contact-link">@progres_tim</a></p>
              </div>
            </div>

            <div className="contact-form-premium">
              <div className="form-header">
                <h2>Pošaljite upit</h2>
                <p>Odgovorićemo vam u najkraćem mogućem roku.</p>
              </div>
              <form onSubmit={(e) => e.preventDefault()}>
                <div className="form-group">
                  <label>Ime i Prezime</label>
                  <input type="text" placeholder="Vaše ime..." required />
                </div>
                <div className="form-group">
                  <label>Email Adresa</label>
                  <input type="email" placeholder="Vaš email..." required />
                </div>
                <div className="form-group">
                  <label>Tip Projekta</label>
                  <select>
                    <option>Nameštaj po meri</option>
                    <option>Bravarija / Metalne konstrukcije</option>
                    <option>Montažna kuća</option>
                    <option>Industrijska hala</option>
                    <option>Ostalo</option>
                  </select>
                </div>
                <div className="form-group">
                  <label>Vaša Poruka</label>
                  <textarea rows={5} placeholder="Opišite vaše zahteve..."></textarea>
                </div>
                <button type="submit" className="submit-btn-premium">Pošalji poruku</button>
              </form>
            </div>
          </div>
        </div>
      </section>

      <section className="map-section">
        <iframe 
          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d181139.351096752!2d20.2825132!3d44.81516!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x475a7aa3d7b53fbd%3A0x1db8645cf9ccbc28!2zQmVsZ3JhZGUsIFNlcmJpYQ!5e0!3m2!1sen!2srs!4v1715810000000!5m2!1sen!2srs" 
          width="100%" 
          height="450" 
          style={{ border: 0 }} 
          allowFullScreen 
          loading="lazy" 
          referrerPolicy="no-referrer-when-downgrade"
        ></iframe>
      </section>
    </div>
  );
}
