import { useState } from "react";

const WA_NUM = "905470171915";

const WA_LINK = `https://wa.me/${WA_NUM}?text=${encodeURIComponent("Merhaba, ön kayıt olmak istiyorum")}`;

const WA_ELCI = `https://wa.me/${WA_NUM}?text=${encodeURIComponent("Merhaba, Apartman Elçisi olmak istiyorum. Bilgi alabilir miyim?")}`;

const WA_MERKEZ = `https://wa.me/${WA_NUM}?text=${encodeURIComponent("Merhaba, Teslimat Merkezi (bakkal/cafe) olmak istiyorum. Bilgi alabilir miyim?")}`;

const C = {

primary: "#1E6B55", primaryDark: "#154D3D", primaryLight: "#2A8A6E",

accent: "#D4412B", cream: "#F5EFE0", warmBg: "#EDE4D0",

text: "#1A1A1A", textLight: "#5A5A5A", border: "#D6CEB8",

};

const H = "'Merriweather', serif";

const B = "'DM Sans', sans-serif";

const faqs = [

{ q: "Neden Panayır?", a: "Bir domates tarladan sofraya gelene kadar 850 km yol yapar, 5 el değiştirir, 3 gün dolaşır. Biz bunun değişmesi gerektiğine inanıyoruz. Lojistik katmanları azaltırsak gıda fiyatları düşer — işte bunu kanıtlamak için buradayız." },

{ q: "Sadece domates mi satıyorsunuz?", a: "Şimdilik evet — ve bunu bilinçli olarak seçtik. Önce domatesi doğru yapmak, modeli kanıtlamak istiyoruz. Eğer tutarsa, sıradaki ürünü siz belirleyin. Talep ettiğiniz ürünleri WhatsApp'tan bize bildirin, en çok istenen ürün bir sonraki adımımız olsun." },

{ q: "Teslimat günleri neler?", a: "Haftanın 6 günü teslimat yapıyoruz. Hangi gün kapalı olduğumuzu sipariş sırasında bildiriyoruz. Teslimat saati akşam 18:00'dir." },

{ q: "Sipariş kesim saati nedir?", a: "Saat 10:00'a kadar verilen siparişler aynı gün akşam teslim edilir. 10:00'dan sonraki siparişler ertesi günün hasadıyla sevk edilir — yani yine taze, yine aynı gün tarladan sofraya." },

{ q: "Teslimat bölgeleri?", a: "Şu an Kepez ve Çanakkale Merkez bölgelerine teslimat planlıyoruz. Farklı bir bölgedeyseniz WhatsApp'tan yazın — talep yeterli olursa bölgenizi ekleyelim." },

{ q: "Ürünler ne kadar taze?", a: "Sabah hasat, aynı gün akşam 18:00'de kapınızda. Market raflarında 3-5 gün beklemez. Tarladan sofraya toplam süre 9 saatin altında." },

{ q: "Nasıl elçi olunur?", a: "Apartmanınızda komşularınıza tazelik ulaştırarak ek gelir kazanın. Elçi olmanın avantajları: ömür boyu ücretsiz kargo, her sipariş için komisyon ve hoş geldin hediyesi olarak 300 gr tahin. Detaylar ve başvuru için WhatsApp'tan yazın, biz sizinle iletişime geçelim." },

{ q: "Ödeme nasıl yapılır?", a: "Siparişinizi WhatsApp üzerinden onayladıktan sonra tarafınıza Masterpass veya PayTR ödeme linki gönderilir. Ödeme sipariş anında, güvenli şekilde tamamlanır. Kapıda ödeme kabul edilmemektedir." },

{ q: "İptal veya iade yapabilir miyim?", a: "Saat 10:00 kesim saatine kadar siparişinizi ücretsiz iptal edebilirsiniz. Teslimattan sonra ürünlerde kalite sorunu yaşarsanız fotoğraflı bildirimle aynı gün WhatsApp'tan bize ulaşın — iade veya bir sonraki siparişinizde telafi sağlıyoruz." },

{ q: "Minimum sipariş var mı?", a: "Minimum 1 paket (3 kg) sofralık domates. Apartman veya site genelinde toplu siparişlerde özel fiyat uygulanır." },

];

export default function PanayirLanding() {

const [form, setForm] = useState({ name: "", phone: "", address: "", tip: "" });

const [submitted, setSubmitted] = useState(false);

const [openFaq, setOpenFaq] = useState(null);

const [phoneError, setPhoneError] = useState(false);

const [menuOpen, setMenuOpen] = useState(false);

const handleSubmit = () => {

if (!form.name || !form.phone) return;

const cleanPhone = form.phone.replace(/\s/g, "");

if (!/^05\d{9}$/.test(cleanPhone)) { setPhoneError(true); return; }

setPhoneError(false);

let msg = `Merhaba! Ön kayıt olmak istiyorum.\n\nİsim: ${form.name}\nTelefon: ${form.phone}`;

if (form.address) msg += `\nAdres: ${form.address}`;

if (form.tip === "elci") msg += `\n\nApartman elçisi olmak istiyorum.`;

if (form.tip === "merkez") msg += `\n\nTeslimat merkezi olmak istiyorum.`;

window.open(`https://wa.me/${WA_NUM}?text=${encodeURIComponent(msg)}`, "_blank");

setSubmitted(true);

};

const scrollTo = (id) => { document.getElementById(id)?.scrollIntoView({ behavior: "smooth" }); setMenuOpen(false); };

return (

<style>{`

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700;9..40,800&family=Merriweather:wght@400;700;900&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: clamp(14px, 1.2vw, 18px); }

body { font-size: 1rem; }

input[type="text"], input[type="tel"] { width: 100%; padding: 0.85em 1.1em; border: 1.5px solid #D6CEB8; border-radius: 10px; font-size: 1rem; font-family: 'DM Sans', sans-serif; background: rgba(255,255,255,0.95); outline: none; color: #1A1A1A; }

input:focus { border-color: #1E6B55; box-shadow: 0 0 0 3px rgba(30,107,85,0.12); }

input::placeholder { color: #A0A0A0; }

.nav-link { color: #2A2A2A; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: color 0.2s; font-family: 'DM Sans', sans-serif; }

.nav-link:hover { color: #1E6B55; }

@media (max-width: 768px) {

html { font-size: clamp(13px, 4vw, 16px); }

.desktop-nav { display: none !important; }

.mobile-menu-btn { display: flex !important; }

.hero-inner { flex-direction: column !important; padding: 32px 20px !important; }

.hero-text h1 { font-size: clamp(22px, 6vw, 32px) !important; }

.hero-form { width: 100% !important; }

.nasil-grid { grid-template-columns: 1fr !important; gap: 28px !important; }

.step-cards { flex-direction: column !important; }

.paket-grid { grid-template-columns: 1fr !important; }

.paket-card-mid { transform: scale(1) !important; }

.elci-grid { grid-template-columns: 1fr !important; }

.kosunla-grid { grid-template-columns: 1fr !important; }

.cta-strip { flex-direction: column !important; align-items: flex-start !important; }

.section-pad { padding: 48px 20px !important; }

.nav-pad { padding: 14px 20px !important; }

}

@media (min-width: 769px) {

.mobile-menu-btn { display: none !important; }

.mobile-menu { display: none !important; }

}

`}</style>

{/* NAV */}

</svg>

<span style={{ fontFamily: H, fontSize: 22, fontWeight: 900, color: C.primary }}>panayır.co</span>

</div>

<span className="nav-link" onClick={() => scrollTo("nasil")}>Nasıl Çalışır?</span>

<span className="nav-link" onClick={() => scrollTo("siparis")}>Sipariş Ver</span>

<span className="nav-link" onClick={() => scrollTo("elcilik")}>Elçi Ol</span>

<button onClick={() => scrollTo("siparis")} style={{ padding: "12px 24px", background: C.primary, color: "#fff", borderRadius: 10, fontSize: 15, fontWeight: 700, cursor: "pointer", border: "none", fontFamily: B }}>Hemen Sipariş Ver</button>

</div>

<button className="mobile-menu-btn" onClick={() => setMenuOpen(!menuOpen)} style={{ background: "none", border: "none", cursor: "pointer", fontSize: 26, color: C.primary }}>

{menuOpen ? "✕" : "☰"}

</button>

</div>

{menuOpen && (

<span className="nav-link" onClick={() => scrollTo("nasil")}>Nasıl Çalışır?</span>

<span className="nav-link" onClick={() => scrollTo("siparis")}>Sipariş Ver</span>

<span className="nav-link" onClick={() => scrollTo("elcilik")}>Elçi Ol</span>

<button onClick={() => scrollTo("siparis")} style={{ padding: "13px", background: C.primary, color: "#fff", borderRadius: 10, fontSize: 15, fontWeight: 700, cursor: "pointer", border: "none", fontFamily: B }}>Hemen Sipariş Ver</button>

</div>

)}

</nav>

{/* HERO */}

{[...Array(7)].map((_, i) => (<div key={i} style={{ position: "absolute", left: `${i*8-4}%`, top: `${10+(i%3)*18}%`, width: 80+i*14, height: 50+i*10, background: `radial-gradient(ellipse, #${["3d7a1e","4a9022","52a028","3a6e1a"][i%4]} 60%, transparent 100%)`, borderRadius: "60% 40% 60% 40%", transform: `rotate(${-30+i*12}deg)`, opacity: 0.85 }} />))}

{[...Array(6)].map((_, i) => (<div key={i} style={{ position: "absolute", right: `${i*7}%`, top: `${5+(i%4)*15}%`, width: 70+i*16, height: 45+i*12, background: `radial-gradient(ellipse, #${["4a9022","3d7a1e","5aaa30","427010"][i%4]} 60%, transparent 100%)`, borderRadius: "40% 60% 40% 60%", transform: `rotate(${20-i*10}deg)`, opacity: 0.8 }} />))}

{[{l:"8%",t:"35%",s:28},{l:"14%",t:"55%",s:22},{r:"6%",t:"30%",s:32},{r:"12%",t:"50%",s:24}].map((d,i) => (<div key={i} style={{ position: "absolute", left: d.l, right: d.r, top: d.t, width: d.s, height: d.s, background: "radial-gradient(circle at 35% 35%, #ff6b4a, #cc2200)", borderRadius: "50%", boxShadow: "inset -3px -3px 6px rgba(0,0,0,0.3)" }} />))}

<span style={{ fontFamily: B, fontSize: 13, fontWeight: 700, color: "#F5D060", letterSpacing: 1.5, textTransform: "uppercase" }}>Dolaşmayan Domates</span>

</div><br/>

SABAH TARLADA,<br />

<span style={{ color: "#F5D060" }}>AKŞAM KAPINDA.</span><br />

<span style={{ fontSize: 30 }}>Panayır.co Çanakkale'de!</span>

</h1>

Aracıları, depoları ve market raflarını aradan çıkardık. Sabah hasat edilen domatesler akşam 18:00'de kapında.<br /><br />

Günlük sınırlı hasattan payınızı almak için telefonunuzu bırakın, WhatsApp'tan size ulaşalım.

</p>

</div>

{!submitted ? (<>

<h3 style={{ fontFamily: H, fontSize: 20, fontWeight: 700, textAlign: "center", marginBottom: 6, color: C.text }}>Yerinizi Şimdiden Ayırın</h3>

<p style={{ fontFamily: B, fontSize: 14, color: C.textLight, textAlign: "center", marginBottom: 22 }}>Liste dolmadan kaydolun — ilk 100 kişiye özel fiyat.</p>

<input type="text" placeholder="İsim Soyisim *" value={form.name} onChange={e => setForm({...form, name: e.target.value})} />

<div>

<input type="tel" placeholder="05XX XXX XX XX *" value={form.phone} onChange={e => { setForm({...form, phone: e.target.value}); setPhoneError(false); }} style={phoneError ? { borderColor: "#D4412B" } : {}} />

{phoneError ? <p style={{ fontFamily: B, fontSize: 12, color: "#D4412B", marginTop: 5 }}>Lütfen geçerli bir numara girin (05XX XXX XX XX)</p> : <p style={{ fontFamily: B, fontSize: 12, color: "#A0A0A0", marginTop: 4 }}>Örn: 0532 123 45 67</p>}

</div>

<div>

<input type="text" placeholder="Adres (Mahalle/Apartman) — opsiyonel" value={form.address} onChange={e => setForm({...form, address: e.target.value})} />

<p style={{ fontFamily: B, fontSize: 12, color: "#A0A0A0", marginTop: 4 }}>Adres bilgisi sonra da iletilebilir</p>

</div>

<p style={{ fontFamily: B, fontSize: 13, color: C.textLight, fontWeight: 600 }}>Ek gelir ister misiniz? (opsiyonel)</p>

{[

{ val: "elci", label: "🏆 Apartman Elçisi olmak istiyorum" },

{ val: "merkez", label: "🏪 Teslimat Merkezi olmak istiyorum" },

].map(opt => (

<label key={opt.val} onClick={() => setForm({...form, tip: form.tip === opt.val ? "" : opt.val})} style={{ display: "flex", alignItems: "center", gap: 10, padding: "12px 16px", borderRadius: 8, border: `1.5px solid ${form.tip === opt.val ? C.primary : C.border}`, background: form.tip === opt.val ? "#EFF5F0" : "#fff", cursor: "pointer", fontFamily: B, fontSize: 14, fontWeight: form.tip === opt.val ? 700 : 400, color: form.tip === opt.val ? C.primary : C.textLight, transition: "all 0.15s" }}>

{form.tip === opt.val && <div style={{ width: 7, height: 7, borderRadius: "50%", background: "#fff" }} />}

</div>

{opt.label}

</label>

))}

</div>

<button onClick={handleSubmit} style={{ padding: 16, background: C.primary, color: "#fff", border: "none", borderRadius: 8, fontFamily: B, fontSize: 16, fontWeight: 700, cursor: "pointer", marginTop: 4 }}>ÖN KAYIT OL</button>

<p style={{ fontFamily: B, fontSize: 12, color: C.textLight, textAlign: "center" }}>📲 WhatsApp'a yönlendirileceksiniz — mesaj hazır geliyor, sadece gönderin.</p>

<p style={{ fontFamily: B, fontSize: 12, color: "#A0A0A0", textAlign: "center" }}>Kayıt bağlayıcı değildir, sadece ilginizi gösterir.</p>

</div>

</>) : (

<h3 style={{ fontFamily: H, fontSize: 20, color: C.primary, marginBottom: 12 }}>Kaydınız Alındı!</h3>

<p style={{ fontFamily: B, fontSize: 15, color: C.textLight, lineHeight: 1.7 }}>Haziran'da teslimat başladığında sizinle iletişime geçeceğiz.</p>

</div>

)}

</div>

</section>

{/* NASIL ÇALIŞIR */}

<div>

<h2 style={{ fontFamily: H, fontSize: 28, fontWeight: 700, marginBottom: 16 }}>Nasıl Çalışır?</h2>

<p style={{ fontFamily: B, fontSize: 16, color: C.textLight, lineHeight: 1.85 }}>Çanakkale'nin en taze domateslerini sözleşmeli çiftçilerimizden topluyoruz. Aracıları tamamen devre dışı bırakarak, tarladan direkt sofranıza ulaştırıyoruz.</p>

</div>

<div>

<h2 style={{ fontFamily: H, fontSize: 28, fontWeight: 700, marginBottom: 16 }}>Elçilik Nedir?</h2>

<p style={{ fontFamily: B, fontSize: 16, color: C.textLight, lineHeight: 1.85 }}>Apartmanınızda veya sitenizde Panayır elçisi olun. Sipariş toplayın, teslimatı koordine edin. Her sipariş için komisyon kazanın.</p>

</div>

{[

{ icon: "🌿", title: "HASAT", desc: "Sabahın ilk ışıklarıyla sözleşmeli çiftçilerimizden taze domatesler toplanır." },

{ icon: "📦", title: "PAKETLEME", desc: "Domatesler hiçbir aracıya gitmeden Bayramiç merkezimizde en taze haliyle paketlenir." },

{ icon: "🚛", title: "HIZLI TESLİMAT", desc: "Sabah hasat edilen domatesler yere bile değmeden mahallenize ulaşır. Tarladan 9 saat sonra sofranızda!" },

{ icon: "🏠", title: "KAPINIZDA", desc: "Akşam 18:00'de taptaze Çanakkale domatesleri elektrikli araçlar ile kapınıza teslim edilir. Sıfır mazot, maksimum tazelik." },

].map((s, i) => (

<h4 style={{ fontFamily: H, fontSize: 13, fontWeight: 700, color: C.primary, marginBottom: 10 }}>{s.title}</h4>

</div>

))}

</div>

</section>

{/* FİYATLANDIRMA */}

<p style={{ fontFamily: B, fontSize: 13, fontWeight: 700, letterSpacing: 2, color: C.primary, textTransform: "uppercase", marginBottom: 12 }}>Paketler</p>

<h2 style={{ fontFamily: H, fontSize: 30, fontWeight: 700, marginBottom: 14 }}>Ne Kadar Alacaksın?</h2>

<p style={{ fontFamily: B, fontSize: 16, color: C.textLight, lineHeight: 1.7 }}>Küçük dene, beğen, büyüt. Her paket aynı gün hasattan geliyor.</p>

</div>

{[

{ isim: "Deneme", kg: "1 kg", icon: "🍅", desc: "İlk kez deneyenler için. Tazeliği hisset.", highlight: false },

{ isim: "Aile", kg: "3 kg", icon: "🍅🍅", desc: "Haftanın domatesini karşılar. En çok tercih edilen.", highlight: true },

{ isim: "Bolluk", kg: "5 kg", icon: "🍅🍅🍅", desc: "Bol bol domates, bol bol tazelik.", highlight: false },

].map((p, i) => (

{p.highlight && <div style={{ position: "absolute", top: -14, left: "50%", transform: "translateX(-50%)", background: C.accent, color: "#fff", fontFamily: B, fontSize: 12, fontWeight: 700, padding: "5px 16px", borderRadius: 20, whiteSpace: "nowrap" }}>EN POPÜLER</div>}

<p style={{ fontFamily: B, fontSize: 12, color: p.highlight ? "rgba(255,255,255,0.6)" : C.textLight, marginBottom: 4 }}>Fiyat</p>

<p style={{ fontFamily: H, fontSize: 22, fontWeight: 900, color: p.highlight ? "#fff" : C.primary }}>Yakında</p>

</div>

<button onClick={() => document.getElementById("siparis")?.scrollIntoView({ behavior: "smooth" })} style={{ padding: "12px 24px", background: p.highlight ? "#fff" : C.primary, color: p.highlight ? C.primary : "#fff", border: "none", borderRadius: 10, fontFamily: B, fontSize: 14, fontWeight: 700, cursor: "pointer" }}>Ön Kayıt Ol</button>

</div>

))}

</div>

</section>

{/* ELÇİLİK */}

<h2 style={{ fontFamily: H, fontSize: 30, fontWeight: 700, textAlign: "center", marginBottom: 40 }}>Elçilik Programı</h2>

{[

{ icon: "🏆", bg: C.primary, title: "Apartman Elçisi Ol", desc: "Sadece kendi apartmanınıza tazelik ulaştırarak ek gelir kazanın. Komşularınızın siparişlerini koordine edin, her sipariş için komisyon kazanın.", note: "🚚 Ücretsiz kargo · 💰 Komisyon · 🎁 Hoş geldin hediyesi ve daha fazlası için detayları öğren →", href: WA_ELCI, btnLabel: "Başvuru Yap", btnHint: "📲 WhatsApp'a yönlendirileceksiniz.", btnStyle: { background: C.accent, color: "#fff", border: "none" } },

{ icon: "🏪", bg: C.primaryLight, title: "Teslimat Merkezi Ol", desc: "Mahallenizdeki bir bakkal veya cafe misiniz? Panayır'ın teslimat noktası olun, taze gıda ağımızı genişletelim, birlikte kazanalım.", note: "📦 Teslimat noktası geliri · 🤝 Müşteri trafiği · 🎁 Hoş geldin hediyesi ve daha fazlası için detayları öğren →", href: WA_MERKEZ, btnLabel: "Bilgi Al", btnHint: "📲 WhatsApp'a yönlendirileceksiniz.", btnStyle: { background: "transparent", color: C.primary, border: `2px solid ${C.primary}` } },

].map((card, i) => (

<h3 style={{ fontFamily: H, fontSize: 19, fontWeight: 700, marginBottom: 12, color: C.primary }}>{card.title}</h3>

</div>

<a href={card.href} target="_blank" rel="noopener" style={{ display: "inline-block", padding: "13px 28px", borderRadius: 10, fontFamily: B, fontSize: 14, fontWeight: 700, textDecoration: "none", ...card.btnStyle }}>{card.btnLabel}</a>

<p style={{ fontFamily: B, fontSize: 12, color: C.textLight, marginTop: 12 }}>📲 WhatsApp'a yönlendirileceksiniz.</p>

</div>

))}

</div>

</section>

{/* KOMŞUNLA AL */}

<p style={{ fontFamily: B, fontSize: 13, fontWeight: 700, letterSpacing: 2, color: C.primary, textTransform: "uppercase", marginBottom: 12 }}>Toplu Alım Avantajı</p>

<h2 style={{ fontFamily: H, fontSize: 30, fontWeight: 700, marginBottom: 14 }}>Komşunla Al, Ucuza Al 🏘️</h2>

<p style={{ fontFamily: B, fontSize: 16, color: C.textLight, maxWidth: 540, margin: "0 auto", lineHeight: 1.85 }}>Aynı apartmandan haftada kaç kişi sipariş verirse o kadar çok kazanırsınız. Komşunu davet et, indirimi birlikte hak edin.</p>

</div>

{[

{ kisi: "2 – 4 kişi", indirim: "%5", icon: "👥", highlight: false },

{ kisi: "5 – 9 kişi", indirim: "%10", icon: "👨‍👩‍👧‍👦", highlight: true },

{ kisi: "10+ kişi", indirim: "%15", icon: "🏆", highlight: false },

].map((t, i) => (

<div style={{ fontFamily: H, fontSize: 44, fontWeight: 900, color: t.highlight ? "#F5D060" : C.primary, lineHeight: 1 }}>{t.indirim}</div>

<div style={{ fontFamily: B, fontSize: 15, fontWeight: 600, color: t.highlight ? "rgba(255,255,255,0.85)" : C.text, marginTop: 8 }}>indirim</div>

</div>

))}

</div>

<div>

<p style={{ fontFamily: B, fontWeight: 700, fontSize: 16, marginBottom: 6 }}>Apartman elçisi ol, komşularına tazelik getir 🍅</p>

<p style={{ fontFamily: B, fontSize: 14, color: C.textLight, lineHeight: 1.7 }}>Siparişleri sen organize et, hem komisyon kazan hem komşularına tarladan taze domates ulaştır.</p>

</div>

</div>

</section>

{/* MANİFESTO */}

<p style={{ fontFamily: B, fontSize: 13, fontWeight: 700, letterSpacing: 2, color: "rgba(255,255,255,0.5)", textTransform: "uppercase", marginBottom: 24 }}>Neden Panayır?</p>

Bir domates tarladan sofraya gelene kadar <span style={{ color: "#F5D060", fontWeight: 700 }}>850 km yol yapar, 5 el değiştirir, 3 gün dolaşır.</span> Biz bunun değişmesi gerektiğine inanıyoruz. Lojistik katmanları azaltırsak gıda fiyatları düşer — <span style={{ color: "#F5D060", fontWeight: 700 }}>işte bunu kanıtlamak için buradayız.</span>

</p>

</div>

</section>

{/* FARK TABLOSU */}

<h2 style={{ fontFamily: H, fontSize: 30, fontWeight: 700, textAlign: "center", marginBottom: 36 }}>Panayır.co Farkı</h2>

<span style={{ fontFamily: B, fontSize: 14, fontWeight: 700 }}>Pazar / Market</span>

<span style={{ fontFamily: B, fontSize: 14, fontWeight: 700, color: C.primary, textAlign: "right" }}>Panayır.co</span>

</div>

{[

{ left: "En az 3 günlük", icon: "⏰", right: "<9 Saat" },

{ left: "850 km yolculuk", icon: "🛣️", right: "75 km" },

{ left: "3-5 aracı katman", icon: "🔄", right: "Sıfır aracı" },

{ left: "Çiftçiye %13", icon: "💰", right: "Çiftçiye %35-40" },

{ left: "Soğuk hava deposu", icon: "❄️", right: "Tarladan direkt" },

{ left: "Mazot + karbon", icon: "🌱", right: "Sıfır karbon (EV)" },

].map((r, i) => (

<span style={{ fontFamily: B, fontSize: 14, fontWeight: 700, color: C.primary, textAlign: "right" }}>{r.right}</span>

</div>

))}

</div>

</section>

{/* SSS */}

<h2 style={{ fontFamily: H, fontSize: 30, fontWeight: 700, textAlign: "center", marginBottom: 36 }}>Sıkça Sorulan Sorular</h2>

{faqs.map((faq, i) => (

<button onClick={() => setOpenFaq(openFaq === i ? null : i)} style={{ width: "100%", padding: "18px 22px", border: "none", background: "transparent", display: "flex", justifyContent: "space-between", alignItems: "center", cursor: "pointer", fontFamily: B, fontSize: 15, fontWeight: 600, color: C.text, textAlign: "left" }}>

{faq.q}

</button>

{openFaq === i && <div style={{ padding: "0 22px 18px", fontFamily: B, fontSize: 15, color: C.textLight, lineHeight: 1.85 }}>{faq.a}</div>}

</div>

))}

</div>

</section>

{/* TESLİMAT BÖLGELERİ */}

<h2 style={{ fontFamily: H, fontSize: 28, fontWeight: 700, marginBottom: 24 }}>Teslimat Bölgelerimiz</h2>

{["Kepez", "Çanakkale Merkez"].map(loc => (

))}

</div>

<p style={{ fontFamily: B, fontSize: 15, color: C.textLight }}>Siteniz listede yok mu? <a href={WA_LINK} target="_blank" rel="noopener" style={{ color: C.primary, fontWeight: 700 }}>WhatsApp'tan yazın</a></p>

</div>

</section>

{/* CTA */}

<h2 style={{ fontFamily: H, fontSize: 34, fontWeight: 900, color: "#fff", marginBottom: 16, lineHeight: 1.2 }}>Dolaşmayan Domates<br />Bu Yaz Sofranızda</h2>

<p style={{ fontFamily: B, fontSize: 16, color: "rgba(255,255,255,0.72)", marginBottom: 36 }}>Haziran 2026 · İlk 100 kayda özel fiyat</p>

<button onClick={() => scrollTo("siparis")} style={{ padding: "18px 44px", background: "#fff", color: C.primary, borderRadius: 12, fontFamily: B, fontSize: 17, fontWeight: 700, cursor: "pointer", border: "none" }}>Hemen Sipariş Ver →</button>

</div>

</section>

{/* FOOTER */}

<div style={{ fontFamily: H, fontSize: 20, color: "rgba(255,255,255,0.75)", marginBottom: 12 }}>🍅 panayır.co</div>

<p style={{ fontFamily: B, fontSize: 14, color: "rgba(255,255,255,0.35)", marginBottom: 6 }}>Çanakkale / Lojistik ve Dağıtım Ağımız.</p>

</footer>

</div>

);

}