contact.astro raw
1 ---
2 export const prerender = false;
3 import Base from '../layouts/Base.astro';
4 ---
5 <Base title="Контакти" titleEn="Contact">
6 <main class="contact-page">
7 <section class="about-hero">
8 <div class="about-hero-bg" id="contact-hero-bg" style="background-image: url('/images/shop-hero.jpg')"></div>
9 <div class="container about-hero-content">
10 <h1 class="about-hero-title" style="color:var(--white)">КОНТАКТИ</h1>
11 </div>
12 </section>
13
14 <section class="section">
15 <div class="container">
16 <div class="contact-grid">
17 <div class="contact-form-col">
18 <h2 data-i18n="contactFormTitle">Изпратете ни съобщение</h2>
19 <form id="contact-form" class="contact-form" novalidate>
20 <div class="form-group">
21 <label data-i18n="name" for="c-name">Име</label>
22 <input type="text" id="c-name" required />
23 </div>
24 <div class="form-group">
25 <label data-i18n="email" for="c-email">Имейл</label>
26 <input type="email" id="c-email" required />
27 </div>
28 <div class="form-group">
29 <label data-i18n="contactSubject" for="c-subject">Относно</label>
30 <select id="c-subject">
31 <option value="general" data-i18n="contactGeneral">Общо запитване</option>
32 <option value="degustation" data-i18n="contactDegustation">Запазване на дегустация</option>
33 <option value="pickup" data-i18n="contactPickup">Вземане на поръчка от адрес</option>
34 </select>
35 </div>
36 <div class="form-group">
37 <label data-i18n="contactMessage" for="c-message">Съобщение</label>
38 <textarea id="c-message" rows="6" required></textarea>
39 </div>
40 <div class="form-group">
41 <button type="submit" class="btn btn-primary" id="contact-send" data-i18n="contactSend">Изпрати</button>
42 <span id="contact-status" style="margin-left:1rem;font-size:0.9rem"></span>
43 </div>
44 </form>
45 </div>
46
47 <div class="contact-info-col">
48 <h2 data-i18n="contactInfoTitle">Свържете се с нас</h2>
49 <div class="contact-details">
50 <div class="contact-item">
51 <span class="ion-android-call contact-icon"></span>
52 <div>
53 <strong data-i18n="contactPhoneLabel">Телефон</strong>
54 <p><a href="tel:+359896214445" id="contact-phone">+359 896 214 445</a></p>
55 </div>
56 </div>
57 <div class="contact-item">
58 <span class="ion-email contact-icon"></span>
59 <div>
60 <strong data-i18n="contactEmailLabel">Имейл</strong>
61 <p><a href="mailto:shop@zlattea.com" id="contact-email">shop@zlattea.com</a></p>
62 </div>
63 </div>
64 <div class="contact-item">
65 <span class="ion-location contact-icon"></span>
66 <div>
67 <strong data-i18n="contactAddressLabel">Адрес</strong>
68 <p id="contact-address" data-i18n="contactAddress">гр. София, бул. „Цар Борис“ III № 382</p>
69 </div>
70 </div>
71 </div>
72
73 <div class="contact-social">
74 <a href="https://www.facebook.com/people/zlatteacom/100090331006935/" target="_blank" rel="noopener" aria-label="Facebook" class="contact-social-link">
75 <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
76 </a>
77 <a href="https://www.instagram.com/zlattea.com_" target="_blank" rel="noopener" aria-label="Instagram" class="contact-social-link">
78 <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
79 </a>
80 <a href="https://www.tiktok.com/@zlattea.com" target="_blank" rel="noopener" aria-label="TikTok" class="contact-social-link">
81 <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg>
82 </a>
83 </div>
84
85 <div class="contact-actions">
86 <h3 data-i18n="contactActionsTitle">Услуги</h3>
87 <div class="contact-action-card md-content" id="contact-services"></div>
88 <div class="contact-action-card md-content" id="contact-pickup"></div>
89 </div>
90 </div>
91 </div>
92 </div>
93 </section>
94 </main>
95 </Base>
96
97 <script>
98 import { currentLang, t } from '../lib/i18n';
99 import { renderMarkdown } from '../lib/markdown';
100
101 async function load() {
102 try {
103 const r = await fetch('/api/options');
104 const opts = await r.json();
105 const lang = currentLang();
106 const phone = opts.contact_phone;
107 const email = opts.contact_email;
108 const addr = opts.contact_address;
109 const svcs = lang === 'en' ? (opts.contact_services_md_en || '') : (opts.contact_services_md_bg || '');
110 const pick = lang === 'en' ? (opts.contact_pickup_md_en || '') : (opts.contact_pickup_md_bg || '');
111
112 if (phone) {
113 const el = document.getElementById('contact-phone')!;
114 el.textContent = phone;
115 el.setAttribute('href', 'tel:' + phone.replace(/[^+\d]/g, ''));
116 }
117 if (email) {
118 const el = document.getElementById('contact-email')!;
119 el.textContent = email;
120 el.setAttribute('href', 'mailto:' + email);
121 }
122 // address: Bulgarian only in BG menu, English only in EN menu
123 const addrEl = document.getElementById('contact-address')!;
124 if (lang === 'bg') {
125 addrEl.textContent = addr || 'гр. София, бул. „Цар Борис“ III № 382';
126 } else {
127 addrEl.textContent = t('contactAddress');
128 }
129 document.getElementById('contact-services')!.innerHTML = svcs ? renderMarkdown(svcs) : '';
130 document.getElementById('contact-pickup')!.innerHTML = pick ? renderMarkdown(pick) : '';
131 } catch {}
132 }
133 load();
134 window.addEventListener('lang-changed', load);
135 </script>
136
137 <script>
138 import { t } from '../lib/i18n';
139
140 function escapeHtml(s: string) {
141 const d = document.createElement('div');
142 d.textContent = s;
143 return d.innerHTML;
144 }
145
146 const form = document.getElementById('contact-form')!;
147 const status = document.getElementById('contact-status')!;
148
149 form.addEventListener('submit', async (e) => {
150 e.preventDefault();
151 const btn = document.getElementById('contact-send') as HTMLButtonElement;
152 btn.disabled = true;
153 status.textContent = t('contactSending');
154 status.style.color = '';
155
156 try {
157 const resp = await fetch('/api/contact', {
158 method: 'POST',
159 headers: { 'Content-Type': 'application/json' },
160 body: JSON.stringify({
161 name: (document.getElementById('c-name') as HTMLInputElement).value.trim(),
162 email: (document.getElementById('c-email') as HTMLInputElement).value.trim(),
163 subject: (document.getElementById('c-subject') as HTMLSelectElement).value,
164 message: (document.getElementById('c-message') as HTMLTextAreaElement).value.trim(),
165 }),
166 });
167 const data = await resp.json();
168 if (resp.ok) {
169 status.textContent = t('contactSent');
170 status.style.color = 'var(--primary)';
171 form.reset();
172 } else {
173 status.textContent = data.error || t('contactError');
174 status.style.color = 'red';
175 }
176 } catch {
177 status.textContent = t('contactError');
178 status.style.color = 'red';
179 }
180 btn.disabled = false;
181 });
182 </script>
183
184 <script>
185 const bg = document.getElementById('contact-hero-bg');
186 if (bg) {
187 let factor = 0.5;
188 function parallax() {
189 bg.style.transform = `translateY(${window.scrollY * factor}px)`;
190 }
191 window.addEventListener('scroll', parallax, { passive: true });
192 parallax();
193 }
194 </script>
195
196 <style>
197 .contact-grid {
198 display: grid;
199 grid-template-columns: 1fr 1fr;
200 gap: 3rem;
201 align-items: start;
202 }
203 .contact-form input, .contact-form select, .contact-form textarea {
204 width: 100%;
205 padding: 0.65rem 0.75rem;
206 border: 2px solid #ddd;
207 border-radius: 8px;
208 font-size: 0.95rem;
209 font-family: inherit;
210 }
211 .contact-form textarea { resize: vertical; }
212 .contact-details { margin-bottom: 1.5rem; }
213 .contact-item { display: flex; gap: 1rem; margin-bottom: 1.2rem; align-items: flex-start; }
214 .contact-icon { font-size: 1.8rem; color: var(--primary); flex-shrink: 0; margin-top: 2px; }
215 .contact-item strong { display: block; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px; }
216 .contact-item p { margin: 0; }
217 .contact-item a { color: var(--text); text-decoration: none; }
218 .contact-item a:hover { color: var(--primary); }
219 .contact-social { display: flex; gap: 1rem; margin: 1.5rem 0 2rem; }
220 .contact-social-link { color: var(--primary); text-decoration: none; opacity: 0.85; transition: opacity 0.2s; display: inline-flex; align-items: center; }
221 .contact-social-link:hover { opacity: 1; }
222 .contact-social-link svg { width: 24px; height: 24px; }
223 .contact-actions h3 { margin-bottom: 1rem; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px; }
224 .contact-action-card {
225 background: #f7f9f5;
226 border: 1px solid #e5ebe0;
227 border-radius: 8px;
228 padding: 1rem 1.25rem;
229 margin-bottom: 0.75rem;
230 }
231 .contact-action-card :global(h1), .contact-action-card :global(h2), .contact-action-card :global(h3),
232 .contact-action-card :global(h4), .contact-action-card :global(h5), .contact-action-card :global(h6) { color: var(--primary); }
233 @media (max-width: 768px) {
234 .contact-grid { grid-template-columns: 1fr; }
235 }
236 </style>
237