// About + Contact pages
const AboutPage = ({ lang, ccy, onSearch, onContact }) => {
  return (
    <div>
      <section className="about-hero">
        <div className="container">
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: ".14em", color: "var(--red-bright)", textTransform: "uppercase", marginBottom: 14 }}>Hakkımızda · Hizmetler</div>
          <h1>Antalya kıyısının sessiz kahramanı: <em style={{ color: "var(--red-bright)", fontStyle: "normal" }}>ENG Transfer</em>.</h1>
          <p>2014'ten bu yana 200.000+ misafiri Antalya Havalimanı'ndan otellerine, villalarına ve uçuşlarına ulaştırdık. Bizim için transfer; sadece A'dan B'ye değil, tatilinizin ilk ve son izlenimi.</p>
        </div>
      </section>

      {/* Stats strip */}
      <section style={{ padding: "0 32px", background: "var(--navy-950)", marginTop: -1 }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 1, background: "rgba(255,255,255,.08)", borderRadius: "var(--r-lg)", overflow: "hidden", transform: "translateY(-50%)", boxShadow: "var(--shadow-lg)" }}>
            {[
              { n: "200K+", l: "Tamamlanan transfer" },
              { n: "12 yıl", l: "Sektör tecrübesi" },
              { n: "65+", l: "Araçlık modern filo" },
              { n: "4.9 ★", l: "Müşteri puanı" },
            ].map((s, i) => (
              <div key={i} style={{ background: "var(--navy-900)", padding: "32px 28px" }}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 44, fontWeight: 700, letterSpacing: "-.025em", color: "white", lineHeight: 1 }}>{s.n}</div>
                <div style={{ fontSize: 13.5, color: "var(--gray-300)", marginTop: 8 }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Story split */}
      <section className="section section-light" style={{ paddingTop: 24 }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
          <div>
            <div className="section-eyebrow">Hikayemiz</div>
            <h2 className="section-title">Alanya'dan başlayan bir güven hikayesi.</h2>
            <p style={{ color: "var(--gray-700)", fontSize: 16, lineHeight: 1.7, marginBottom: 16 }}>
              ENG Transfer, 2014 yılında Alanya'da küçük bir filo ile başladı. Bugün Antalya'nın dört bir yanına — Lara'dan Kalkan'a, Belek'ten Side'ye — premium transfer hizmeti veriyoruz.
            </p>
            <p style={{ color: "var(--gray-700)", fontSize: 16, lineHeight: 1.7, marginBottom: 24 }}>
              4 dilde hizmet veren operasyon ekibimiz, uçuşları gerçek zamanlı takip eder; gecikmelerde ek ücret almaz. Şoförlerimiz minimum 8 yıl deneyimli, üniformalı ve çok dilli profesyonellerdir.
            </p>
            <div style={{ display: "flex", gap: 12 }}>
              <button className="btn btn-primary" onClick={onSearch}>Rezervasyon Yap <Icon name="arrowRight" size={15}/></button>
              <button className="btn btn-ghost" onClick={onContact}>Bize Ulaşın</button>
            </div>
          </div>
          <div style={{ position: "relative", height: 460 }}>
            <div style={{ position: "absolute", inset: 0, borderRadius: 24, overflow: "hidden", background: "linear-gradient(135deg, rgba(11,61,145,.15), rgba(185,28,28,.05))", border: "1px solid var(--gray-200)" }}>
              <div className="placeholder-img light" style={{ borderRadius: 0 }}>PLACEHOLDER<br/>Filo arşiv fotoğrafı<br/>Alanya garaj / şoför ekibi</div>
            </div>
            <div style={{ position: "absolute", bottom: -20, left: -20, padding: 22, background: "var(--navy-900)", borderRadius: 16, color: "white", boxShadow: "var(--shadow-lg)", maxWidth: 240 }}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--red-bright)", letterSpacing: ".12em", textTransform: "uppercase" }}>2014 — bugün</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 700, marginTop: 6, lineHeight: 1.3 }}>Alanya'dan Antalya geneline 12 yılda ulaştık.</div>
            </div>
          </div>
        </div>
      </section>

      {/* Values */}
      <section className="section section-light" style={{ paddingTop: 32 }}>
        <div className="container">
          <div className="section-head">
            <div className="section-eyebrow">Değerlerimiz</div>
            <h2 className="section-title">Premium hizmetin üç temeli.</h2>
          </div>
          <div className="values-grid">
            <div className="value-card">
              <span className="value-num">01 · GÜVENİLİRLİK</span>
              <h3>Gece yarısı bile, dakikası dakikasına.</h3>
              <p style={{ color: "var(--gray-500)", fontSize: 14.5, lineHeight: 1.6 }}>Tüm transferlerimiz uçuş takibiyle planlanır; geç kalan uçuşları ücretsiz bekleriz.</p>
            </div>
            <div className="value-card">
              <span className="value-num">02 · KONFOR</span>
              <h3>Her araç, lüks bir oda gibi.</h3>
              <p style={{ color: "var(--gray-500)", fontSize: 14.5, lineHeight: 1.6 }}>Klimalı, geniş bagajlı, Wi-Fi destekli ve haftalık dezenfekte edilen filomuz.</p>
            </div>
            <div className="value-card">
              <span className="value-num">03 · ŞEFFAFLIK</span>
              <h3>Sürpriz ücret yok. Hiçbir zaman.</h3>
              <p style={{ color: "var(--gray-500)", fontSize: 14.5, lineHeight: 1.6 }}>Rezervasyonda gördüğünüz fiyat, ödediğinizdir. Trafik, gece, bayram fark etmez.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Services */}
      <section className="section section-gray">
        <div className="container">
          <div className="section-head">
            <div className="section-eyebrow">Hizmetlerimiz</div>
            <h2 className="section-title">Her ihtiyaca, her bütçeye.</h2>
          </div>
          <div className="svc-grid">
            <div className="svc-card">
              <div className="svc-icon"><Icon name="users" size={26}/></div>
              <div>
                <h3>Shuttle Transfer</h3>
                <p>Bütçe dostu, 16 kişilik paylaşımlı transfer. Belirli güzergahlarda saat başı kalkışlar.</p>
                <ul>
                  <li><Icon name="check" size={13} className="icon"/> A/C</li>
                  <li><Icon name="check" size={13} className="icon"/> Wi-Fi</li>
                  <li><Icon name="check" size={13} className="icon"/> Kişi başı fiyat</li>
                </ul>
              </div>
            </div>
            <div className="svc-card">
              <div className="svc-icon" style={{ background: "linear-gradient(135deg, var(--blue) 0%, var(--navy-700) 100%)" }}><Icon name="car" size={26}/></div>
              <div>
                <h3>Özel Taksi Transfer</h3>
                <p>Sedan araçlarla 1–3 kişilik özel transfer. Otellere veya adreslere kapıdan kapıya.</p>
                <ul>
                  <li><Icon name="check" size={13} className="icon"/> 3 yolcu / 3 bagaj</li>
                  <li><Icon name="check" size={13} className="icon"/> Özel transfer</li>
                  <li><Icon name="check" size={13} className="icon"/> Sabit fiyat</li>
                </ul>
              </div>
            </div>
            <div className="svc-card">
              <div className="svc-icon" style={{ background: "linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%)" }}><Icon name="sparkle" size={26}/></div>
              <div>
                <h3>VIP Car Transfer</h3>
                <p>Mercedes E-Class ve üzeri, premium deri döşeme, lüks şoför hizmeti, su & atıştırmalık ikramı.</p>
                <ul>
                  <li><Icon name="check" size={13} className="icon"/> Lüks araç</li>
                  <li><Icon name="check" size={13} className="icon"/> Karşılama</li>
                  <li><Icon name="check" size={13} className="icon"/> İkram</li>
                </ul>
              </div>
            </div>
            <div className="svc-card">
              <div className="svc-icon" style={{ background: "linear-gradient(135deg, #4F46A8, #2D2A6B)" }}><Icon name="bag" size={26}/></div>
              <div>
                <h3>Minivan Transfer</h3>
                <p>Mercedes Vito ve VW Caravelle gibi 6–8 kişilik minivanlarla aile ve grup transferi.</p>
                <ul>
                  <li><Icon name="check" size={13} className="icon"/> 6–8 yolcu</li>
                  <li><Icon name="check" size={13} className="icon"/> Geniş bagaj</li>
                  <li><Icon name="check" size={13} className="icon"/> Bebek koltuğu</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: "0 32px 96px", background: "var(--gray-50)" }}>
        <div className="container">
          <div className="cta-banner">
            <div>
              <h2>Antalya'da konforlu bir başlangıç için hazır mısınız?</h2>
              <p>Birkaç dakika içinde rezervasyon yapın, gerisini biz halledelim.</p>
            </div>
            <div className="cta-banner-actions">
              <button className="btn btn-primary btn-lg" onClick={onSearch}>Rezervasyon Yap <Icon name="arrowRight" size={16}/></button>
              <button className="btn btn-secondary btn-lg" style={{ background: "rgba(255,255,255,.1)" }} onClick={onContact}>İletişim</button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

const ContactPage = ({ lang, ccy, onSearch }) => {
  const [form, setForm] = React.useState({ name: "", email: "", phone: "+90 ", subject: "general", message: "" });
  const [sent, setSent] = React.useState(false);
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  return (
    <div>
      {/* Hero */}
      <section style={{ background: "linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 100%)", color: "white", padding: "72px 32px 56px" }}>
        <div className="container">
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: ".14em", color: "var(--red-bright)", textTransform: "uppercase", marginBottom: 14 }}>İletişim</div>
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: 56, letterSpacing: "-.03em", lineHeight: 1.05, margin: "0 0 18px", maxWidth: 800 }}>
            Sorularınız için 7/24 buradayız.
          </h1>
          <p style={{ fontSize: 17, color: "var(--gray-300)", maxWidth: 640, margin: 0 }}>
            Telefon, WhatsApp, e-posta veya formdan ulaşın — operasyon ekibimiz dakikalar içinde geri döner.
          </p>
        </div>
      </section>

      {/* Quick contact cards */}
      <section style={{ padding: "0 32px", marginTop: -40, position: "relative", zIndex: 5 }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
          {[
            { icon: "phone", accent: "var(--red)", title: "Telefon", val: "+90 539 431 13 08", sub: "7/24 destek hattı", href: "tel:+905394311308" },
            { icon: "whatsapp", accent: "#25D366", title: "WhatsApp", val: "+90 539 431 13 08", sub: "Anında yanıt", href: "https://wa.me/905394311308" },
            { icon: "mail", accent: "var(--blue)", title: "E-posta", val: "info@engtransfer.com", sub: "Rezervasyon & destek", href: "mailto:info@engtransfer.com" },
            { icon: "pin", accent: "var(--navy-700)", title: "Adres", val: "Oba Mah. · Alanya", sub: "Detaylar aşağıda", href: "#address" },
          ].map((c, i) => (
            <a key={i} href={c.href} style={{ background: "white", padding: 24, borderRadius: "var(--r-lg)", border: "1px solid var(--gray-200)", boxShadow: "var(--shadow-md)", display: "flex", flexDirection: "column", gap: 10, transition: "transform .15s" }}>
              <div style={{ width: 44, height: 44, borderRadius: 12, background: c.accent + "15", color: c.accent, display: "grid", placeItems: "center" }}>
                <Icon name={c.icon} size={22}/>
              </div>
              <div>
                <div style={{ fontSize: 11.5, fontFamily: "var(--font-mono)", color: "var(--gray-500)", textTransform: "uppercase", letterSpacing: ".1em" }}>{c.title}</div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 17, fontWeight: 700, letterSpacing: "-.015em", margin: "4px 0 2px" }}>{c.val}</div>
                <div style={{ fontSize: 12.5, color: "var(--gray-500)" }}>{c.sub}</div>
              </div>
            </a>
          ))}
        </div>
      </section>

      {/* Form + map */}
      <section className="section section-light" style={{ paddingTop: 64 }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 48 }}>
          {/* Form */}
          <div className="booking-card" style={{ marginBottom: 0 }}>
            <h2>Bize yazın</h2>
            <p className="sub">Form üzerinden iletişime geçin — operasyon ekibimiz 1 saat içinde döner.</p>

            {sent ? (
              <div style={{ padding: 32, background: "rgba(22,163,74,.06)", border: "1px solid rgba(22,163,74,.2)", borderRadius: 12, textAlign: "center" }}>
                <div style={{ width: 56, height: 56, margin: "0 auto 14px", background: "#16A34A", color: "white", borderRadius: 999, display: "grid", placeItems: "center" }}>
                  <Icon name="check" size={28}/>
                </div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 700, marginBottom: 6 }}>Mesajınız iletildi!</div>
                <p style={{ color: "var(--gray-500)", margin: 0 }}>En kısa sürede e-posta veya telefonla size dönüş yapacağız.</p>
                <button className="btn btn-ghost" style={{ marginTop: 18 }} onClick={() => { setSent(false); setForm({ name: "", email: "", phone: "+90 ", subject: "general", message: "" }); }}>Yeni mesaj gönder</button>
              </div>
            ) : (
              <>
                <div className="form-grid">
                  <div className="form-field">
                    <label>Ad Soyad *</label>
                    <input value={form.name} onChange={e => set("name", e.target.value)} placeholder="Mehmet Yılmaz"/>
                  </div>
                  <div className="form-field">
                    <label>Telefon</label>
                    <input value={form.phone} onChange={e => set("phone", e.target.value)} placeholder="+90 5XX XXX XX XX"/>
                  </div>
                  <div className="form-field span-2">
                    <label>E-posta *</label>
                    <input type="email" value={form.email} onChange={e => set("email", e.target.value)} placeholder="ornek@email.com"/>
                  </div>
                  <div className="form-field span-2">
                    <label>Konu</label>
                    <select value={form.subject} onChange={e => set("subject", e.target.value)}>
                      <option value="general">Genel Bilgi</option>
                      <option value="reservation">Rezervasyon Hakkında</option>
                      <option value="cancel">İptal / Değişiklik</option>
                      <option value="corporate">Kurumsal Anlaşma</option>
                      <option value="complaint">Şikayet / Geri Bildirim</option>
                    </select>
                  </div>
                  <div className="form-field span-2">
                    <label>Mesajınız *</label>
                    <textarea rows="5" value={form.message} onChange={e => set("message", e.target.value)} placeholder="Sizinle nasıl yardımcı olabiliriz?"></textarea>
                  </div>
                </div>
                <label className="checkbox-row" style={{ marginTop: 16 }}>
                  <input type="checkbox" defaultChecked/>
                  <div>
                    <div className="name">Kişisel verilerimin işlenmesine onay veriyorum (KVKK).</div>
                    <div className="desc">Sadece talebinize geri dönüş için kullanılır.</div>
                  </div>
                </label>
                <div style={{ display: "flex", gap: 12, justifyContent: "flex-end", marginTop: 18 }}>
                  <button className="btn btn-ghost" onClick={() => setForm({ name: "", email: "", phone: "+90 ", subject: "general", message: "" })}>Temizle</button>
                  <button className="btn btn-primary btn-lg" onClick={() => setSent(true)}>
                    Mesajı Gönder <Icon name="arrowRight" size={15}/>
                  </button>
                </div>
              </>
            )}
          </div>

          {/* Address + map */}
          <div id="address">
            <div style={{ background: "var(--navy-900)", color: "white", padding: 28, borderRadius: "var(--r-lg)", marginBottom: 16 }}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, color: "var(--red-bright)", letterSpacing: ".14em", textTransform: "uppercase", marginBottom: 12 }}>Merkez Ofis</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 700, letterSpacing: "-.02em", marginBottom: 14 }}>ENG Transfer · Alanya</div>
              <div style={{ display: "flex", gap: 12, alignItems: "start", paddingBottom: 16, borderBottom: "1px solid rgba(255,255,255,.1)" }}>
                <div style={{ width: 36, height: 36, borderRadius: 10, background: "rgba(220,38,38,.15)", color: "var(--red-bright)", display: "grid", placeItems: "center", flexShrink: 0 }}>
                  <Icon name="pin" size={18}/>
                </div>
                <div>
                  <div style={{ fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--gray-400)", textTransform: "uppercase", letterSpacing: ".1em" }}>Adres</div>
                  <div style={{ fontSize: 14.5, lineHeight: 1.55, marginTop: 4 }}>
                    Oba Mah. Fabrika Cad.<br/>
                    Seven Trio Park Sit. No:11/B<br/>
                    Alanya / Antalya — Türkiye
                  </div>
                </div>
              </div>
              <div style={{ display: "flex", gap: 12, alignItems: "start", paddingTop: 16, paddingBottom: 16, borderBottom: "1px solid rgba(255,255,255,.1)" }}>
                <div style={{ width: 36, height: 36, borderRadius: 10, background: "rgba(11,61,145,.25)", color: "#7DA8F0", display: "grid", placeItems: "center", flexShrink: 0 }}>
                  <Icon name="phone" size={18}/>
                </div>
                <div>
                  <div style={{ fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--gray-400)", textTransform: "uppercase", letterSpacing: ".1em" }}>Telefon · 7/24</div>
                  <a href="tel:+905394311308" style={{ fontSize: 16, fontWeight: 700, fontFamily: "var(--font-mono)", letterSpacing: ".05em", marginTop: 4, display: "block", color: "white" }}>+90 539 431 13 08</a>
                </div>
              </div>
              <div style={{ display: "flex", gap: 12, alignItems: "start", paddingTop: 16, paddingBottom: 16, borderBottom: "1px solid rgba(255,255,255,.1)" }}>
                <div style={{ width: 36, height: 36, borderRadius: 10, background: "rgba(37,211,102,.2)", color: "#25D366", display: "grid", placeItems: "center", flexShrink: 0 }}>
                  <Icon name="whatsapp" size={18}/>
                </div>
                <div>
                  <div style={{ fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--gray-400)", textTransform: "uppercase", letterSpacing: ".1em" }}>WhatsApp</div>
                  <a href="https://wa.me/905394311308" style={{ fontSize: 16, fontWeight: 700, fontFamily: "var(--font-mono)", letterSpacing: ".05em", marginTop: 4, display: "block", color: "white" }}>+90 539 431 13 08</a>
                </div>
              </div>
              <div style={{ display: "flex", gap: 12, alignItems: "start", paddingTop: 16 }}>
                <div style={{ width: 36, height: 36, borderRadius: 10, background: "rgba(255,255,255,.08)", color: "white", display: "grid", placeItems: "center", flexShrink: 0 }}>
                  <Icon name="mail" size={18}/>
                </div>
                <div>
                  <div style={{ fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--gray-400)", textTransform: "uppercase", letterSpacing: ".1em" }}>E-posta</div>
                  <a href="mailto:info@engtransfer.com" style={{ fontSize: 14.5, fontWeight: 600, marginTop: 4, display: "block", color: "white" }}>info@engtransfer.com</a>
                  <a href="mailto:rezervasyon@engtransfer.com" style={{ fontSize: 13.5, marginTop: 2, display: "block", color: "var(--gray-300)" }}>rezervasyon@engtransfer.com</a>
                </div>
              </div>
            </div>

            {/* Hours */}
            <div style={{ background: "white", padding: 22, borderRadius: "var(--r-lg)", border: "1px solid var(--gray-200)", marginBottom: 16 }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 17, fontWeight: 700 }}>
                  <Icon name="clock" size={16} style={{ verticalAlign: "middle", color: "var(--red)", marginRight: 6 }}/>
                  Çalışma Saatleri
                </div>
                <span style={{ padding: "3px 10px", background: "rgba(22,163,74,.12)", color: "#16A34A", fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 700, borderRadius: 999, letterSpacing: ".08em" }}>● ŞU AN AÇIK</span>
              </div>
              {[
                { d: "Pazartesi — Cuma", h: "00:00 – 24:00 (7/24)" },
                { d: "Cumartesi — Pazar", h: "00:00 – 24:00 (7/24)" },
                { d: "Resmi Tatiller", h: "Açık · Tatil ücreti yok" },
              ].map((row, i) => (
                <div key={i} style={{ display: "flex", justifyContent: "space-between", padding: "10px 0", borderTop: i ? "1px solid var(--gray-100)" : "none", fontSize: 13.5 }}>
                  <span style={{ color: "var(--gray-700)" }}>{row.d}</span>
                  <span style={{ fontWeight: 600, fontFamily: "var(--font-mono)" }}>{row.h}</span>
                </div>
              ))}
            </div>

            {/* Map placeholder */}
            <div style={{ borderRadius: "var(--r-lg)", overflow: "hidden", border: "1px solid var(--gray-200)", height: 280, position: "relative", background: "linear-gradient(135deg, #DCEAFB 0%, #C5D9F1 50%, #B5C9E5 100%)" }}>
              {/* schematic streets */}
              <svg width="100%" height="100%" style={{ position: "absolute", inset: 0 }}>
                <defs>
                  <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
                    <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,.5)" strokeWidth="1"/>
                  </pattern>
                </defs>
                <rect width="100%" height="100%" fill="url(#grid)"/>
                <path d="M 0 140 Q 200 110 400 150 T 800 130" stroke="white" strokeWidth="6" fill="none" opacity=".7"/>
                <path d="M 240 0 L 240 280" stroke="white" strokeWidth="4" fill="none" opacity=".5"/>
                <path d="M 0 200 L 600 200" stroke="white" strokeWidth="3" fill="none" opacity=".4"/>
              </svg>
              {/* Pin */}
              <div style={{ position: "absolute", top: "45%", left: "50%", transform: "translate(-50%, -100%)" }}>
                <div style={{ position: "relative", width: 44, height: 44 }}>
                  <div style={{ position: "absolute", inset: 0, background: "var(--red)", borderRadius: "999px 999px 999px 0", transform: "rotate(-45deg)", boxShadow: "0 8px 20px rgba(185,28,28,.5)", display: "grid", placeItems: "center" }}>
                    <span style={{ transform: "rotate(45deg)", color: "white", fontWeight: 800, fontFamily: "var(--font-display)" }}>E</span>
                  </div>
                </div>
              </div>
              <div style={{ position: "absolute", bottom: 12, left: 12, right: 12, padding: "10px 14px", background: "white", borderRadius: 10, boxShadow: "var(--shadow-md)", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 10 }}>
                <div style={{ fontSize: 12.5 }}>
                  <div style={{ fontWeight: 700 }}>Seven Trio Park, Oba</div>
                  <div style={{ color: "var(--gray-500)", fontSize: 11.5 }}>Alanya · 36.55°N, 32.00°E</div>
                </div>
                <a href="#" className="btn btn-secondary" style={{ padding: "8px 14px", fontSize: 12.5 }}>
                  <Icon name="map" size={13}/> Yol tarifi
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Service area / FAQ */}
      <section className="section section-gray" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="section-head" style={{ marginBottom: 32 }}>
            <div className="section-eyebrow">Sıkça Sorulan Sorular</div>
            <h2 className="section-title">Hızlı cevaplar.</h2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
            {[
              { q: "Antalya Havalimanı'nda nerede karşılarsınız?", a: "Pasaport kontrolünden sonra çıkış kapısında, isminizin yazılı olduğu tabela ile karşılarız. Şoför bilgileri yolculuktan 2 saat önce SMS ile gönderilir." },
              { q: "Uçuşum gecikirse ek ücret ödüyor muyum?", a: "Hayır. Uçuşunuzu canlı takip ederiz; gecikmelerde 90 dakikaya kadar ücretsiz bekleriz." },
              { q: "İptal politikası nedir?", a: "Yolculuk başlangıcına 24 saat kalaya kadar ücretsiz iptal ya da değişiklik hakkınız vardır." },
              { q: "Hangi bölgelere transfer yapıyorsunuz?", a: "Antalya il geneli: Alanya, Belek, Side, Kemer, Kalkan, Kaş, Lara ve tüm otel bölgeleri. Şehirlerarası transfer için bizimle iletişime geçin." },
              { q: "Bebek koltuğu temin ediyor musunuz?", a: "Evet. ECE R44/04 sertifikalı 0–6 yaş bebek/çocuk koltuklarımız vardır. Rezervasyon sırasında ek hizmet olarak ekleyebilirsiniz." },
              { q: "Ödeme nasıl yapılır?", a: "Online kredi/banka kartı, PayPal veya şoföre nakit (TRY/EUR/USD) seçeneklerinden tercih edebilirsiniz." },
            ].map((f, i) => (
              <div key={i} style={{ background: "white", padding: 22, borderRadius: 14, border: "1px solid var(--gray-200)" }}>
                <div style={{ display: "flex", gap: 12, marginBottom: 8 }}>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 700, color: "var(--red)", letterSpacing: ".1em" }}>{String(i + 1).padStart(2, "0")}</span>
                  <span style={{ fontFamily: "var(--font-display)", fontSize: 16.5, fontWeight: 700, letterSpacing: "-.015em" }}>{f.q}</span>
                </div>
                <p style={{ color: "var(--gray-700)", fontSize: 14, lineHeight: 1.6, margin: 0, paddingLeft: 28 }}>{f.a}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: "0 32px 96px", background: "var(--gray-50)" }}>
        <div className="container">
          <div className="cta-banner">
            <div>
              <h2>Hemen rezervasyon yapın</h2>
              <p>Form veya telefondan değil, doğrudan rezervasyondan başlayın.</p>
            </div>
            <div className="cta-banner-actions">
              <button className="btn btn-primary btn-lg" onClick={onSearch}>Rezervasyon Yap <Icon name="arrowRight" size={16}/></button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

window.AboutPage = AboutPage;
window.ContactPage = ContactPage;