// Kontaktai — contact page with form, office info, map

function ContactPage() {
  const url = window.__erp_url;
  const openBooking = () => window.__erp_book_demo && window.__erp_book_demo();

  return (
    <>
      <section className="erp-pagehead">
        <img src="assets/orbit-pattern.svg" className="erp-pagehead-orbit" alt="" />
        <div className="erp-container">
          <div className="erp-pagehead-inner">
            <div className="erp-breadcrumb">
              <a href={url('home')}>Pradžia</a>
              <span>/</span><span>Kontaktai</span>
            </div>
            <div className="erp-eyebrow">Kontaktai</div>
            <h1>Pakalbėkime apie jūsų ERP.</h1>
            <p>Atsakome į laiškus per darbo dieną. Demo užsakote — paskambiname per 2 val.</p>
          </div>
        </div>
      </section>

      <section className="erp-section" style={{paddingTop: 48}}>
        <div className="erp-container">
          <div className="erp-contact-grid">
            <div>
              <div className="erp-eyebrow">Susisiekite</div>
              <h2 className="erp-section-title erp-section-title-sm" style={{marginBottom: 28}}>Visi būdai pasiekti mus.</h2>

              <div className="erp-contact-card">
                <div className="erp-contact-icon"><i data-lucide="mail"></i></div>
                <div>
                  <h4>El. paštas</h4>
                  <p>Atsakome per darbo dieną.</p>
                  <a href="mailto:info@erp365.lt">info@erp365.lt</a>
                </div>
              </div>

              <div className="erp-contact-card">
                <div className="erp-contact-icon"><i data-lucide="phone"></i></div>
                <div>
                  <h4>Telefonas</h4>
                  <p>I–V, 9:00–18:00 val.</p>
                  <a href="tel:+37064060019">+370 640 60019</a>
                </div>
              </div>

              <div className="erp-contact-card">
                <div className="erp-contact-icon"><i data-lucide="map-pin"></i></div>
                <div>
                  <h4>Biuras Vilniuje</h4>
                  <p>Kareivių g. 11B<br/>LT-09109 Vilnius</p>
                  <a href="#" onClick={(e) => e.preventDefault()}>Atidaryti žemėlapyje →</a>
                </div>
              </div>

              <div className="erp-contact-card">
                <div className="erp-contact-icon" style={{background: 'var(--erp-yellow-100)', color: 'var(--erp-yellow-700)'}}><i data-lucide="life-buoy"></i></div>
                <div>
                  <h4>Klientų palaikymas</h4>
                  <p>Esamiems klientams — 24/7 per pagalbos centrą.</p>
                  <a href="#" onClick={(e) => e.preventDefault()}>help.erp365.lt →</a>
                </div>
              </div>
            </div>

            <div className="erp-form erp-booking-panel">
              <div className="erp-booking-panel-badge">
                <i data-lucide="calendar-check" style={{width: 18, height: 18}}></i>
                <span>Online kalendorius</span>
              </div>
              <h3>Išbandykite ERP365</h3>
              <p className="erp-form-lede">30 min. pokalbis. Parodysime, kaip ERP365 veiktų jūsų versle — pasirinkite jums tinkantį laiką.</p>

              <ul className="erp-booking-panel-list">
                <li><i data-lucide="clock" style={{width: 16, height: 16}}></i><span>Trunka 30 min. · vaizdo skambutis</span></li>
                <li><i data-lucide="user" style={{width: 16, height: 16}}></i><span>Kalbėsite su ERP konsultantu, ne pardavėju</span></li>
                <li><i data-lucide="shield-check" style={{width: 16, height: 16}}></i><span>Jokio spaudimo. Be įsipareigojimų.</span></li>
              </ul>

              <button type="button" onClick={openBooking} className="erp-btn erp-btn-primary erp-btn-full erp-btn-lg">
                Pasirinkti laiką →
              </button>
              <p className="erp-pricing-fine" style={{marginTop: 14}}>Arba parašykite <a href="mailto:info@erp365.lt" style={{color: 'var(--erp-freedom)'}}>info@erp365.lt</a> — atsakome per darbo dieną.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Map-like panel */}
      <section className="erp-section erp-section-gray">
        <div className="erp-container">
          <div className="erp-section-head">
            <div className="erp-eyebrow">Biuras</div>
            <h2 className="erp-section-title erp-section-title-sm">Aplankykite mūsų biurą Vilniuje.</h2>
            <p className="erp-section-lede">Kareivių g. 11B, LT-09109 Vilnius.</p>
          </div>
          <div className="erp-map">
            <svg className="erp-map-svg" viewBox="0 0 1200 500" preserveAspectRatio="xMidYMid slice">
              <rect width="1200" height="500" fill="#EDF1F7"/>
              {/* streets */}
              <g stroke="#DDE4ED" strokeWidth="3" fill="none">
                <path d="M0 120 L1200 90"/>
                <path d="M0 200 L1200 220"/>
                <path d="M0 340 L1200 310"/>
                <path d="M0 420 L1200 440"/>
                <path d="M200 0 L180 500"/>
                <path d="M480 0 L500 500"/>
                <path d="M760 0 L780 500"/>
                <path d="M1000 0 L1020 500"/>
              </g>
              {/* main avenue */}
              <path d="M0 255 L1200 260" stroke="#fff" strokeWidth="18"/>
              <path d="M0 255 L1200 260" stroke="#C3CDDB" strokeWidth="1" strokeDasharray="8 6"/>
              <text x="40" y="248" fill="#5A6B82" fontFamily="Inter" fontSize="12" fontWeight="600" letterSpacing="1.5">KAREIVIŲ G.</text>
              {/* blocks */}
              <g fill="#DDE4ED" opacity="0.6">
                <rect x="240" y="130" width="220" height="100" rx="4"/>
                <rect x="520" y="130" width="220" height="100" rx="4"/>
                <rect x="800" y="130" width="180" height="100" rx="4"/>
                <rect x="240" y="290" width="220" height="120" rx="4"/>
                <rect x="520" y="290" width="220" height="120" rx="4"/>
                <rect x="800" y="290" width="180" height="120" rx="4"/>
              </g>
            </svg>
            <div className="erp-map-pin">
              <div style={{background: 'var(--erp-freedom)', color: '#fff', padding: '8px 14px', borderRadius: 100, font: '600 13px/1 var(--erp-font-body)', boxShadow: '0 8px 20px rgba(0,128,255,0.35)', display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6}}>
                <i data-lucide="map-pin" style={{width: 14, height: 14}}></i>
                ERP365
              </div>
              <div style={{width: 2, height: 14, background: 'var(--erp-freedom)', margin: '0 auto'}}></div>
              <div style={{width: 12, height: 12, borderRadius: '50%', background: 'var(--erp-freedom)', border: '3px solid #fff', margin: '0 auto', boxShadow: '0 2px 6px rgba(0,0,0,0.2)'}}></div>
            </div>
          </div>
        </div>
      </section>

      <CTASection title="Skubate?" lede="Paskambinkite — 9:00–18:00, I–V. Dažniausiai pasiekiate iš karto." primary="+370 640 60019" secondary={null} />
    </>
  );
}

window.ContactPage = ContactPage;