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

  const handleSubmit = async (e) => {
    e.preventDefault();
    setSending(true);
    await new Promise(r => setTimeout(r, 800)); // simülasyon
    setSent(true);
    setSending(false);
  };

  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>

      {/* Hızlı iletişim kartları */}
      <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: "rezervasyon@engtransfer.com", sub: "Rezervasyon & destek", href: "mailto:rezervasyon@engtransfer.com" },
            { icon: "pin",      accent: "var(--navy-700)", title: "Adres", val: "Oba Mah. · Alanya",  sub: "Seven Trio Park Sit. No:11/B", 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, textDecoration: "none", color: "inherit", transition: "transform .15s" }}>
              <div style={{ width: 44, height: 44, borderRadius: 12, background: c.accent + "20", display: "grid", placeItems: "center" }}>
                <Icon name={c.icon} size={22} style={{ color: c.accent }}/>
              </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: 15, fontWeight: 700, letterSpacing: "-.015em", margin: "4px 0 2px", wordBreak: "break-all" }}>{c.val}</div>
                <div style={{ fontSize: 12.5, color: "var(--gray-500)" }}>{c.sub}</div>
              </div>
            </a>
          ))}
        </div>
      </section>

      {/* Form + Adres */}
      <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>
            ) : (
              <form onSubmit={handleSubmit}>
                <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" required/>
                  </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" required/>
                  </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?" required></textarea>
                  </div>
                </div>
                <label className="checkbox-row" style={{ marginTop: 16 }}>
                  <input type="checkbox" required/>
                  <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 type="button" className="btn btn-ghost" onClick={() => setForm({ name: "", email: "", phone: "+90 ", subject: "general", message: "" })}>Temizle</button>
                  <button type="submit" className="btn btn-primary btn-lg" disabled={sending}>
                    {sending ? "Gönderiliyor..." : <>Mesajı Gönder <Icon name="arrowRight" size={15}/></>}
                  </button>
                </div>
              </form>
            )}
          </div>

          {/* Adres ve harita */}
          <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: 18 }}>ENG Transfer · Alanya</div>

              {[
                { icon: "pin",      accent: "rgba(220,38,38,.15)",    c: "var(--red-bright)", label: "Adres",         lines: ["Oba Mah. Fabrika Cad.", "Seven Trio Park Sit. No:11/B", "Alanya / Antalya — Türkiye"] },
                { icon: "phone",    accent: "rgba(11,61,145,.25)",    c: "#7DA8F0",           label: "Telefon · 7/24", lines: ["+90 539 431 13 08"], href: "tel:+905394311308" },
                { icon: "whatsapp", accent: "rgba(37,211,102,.2)",    c: "#25D366",           label: "WhatsApp",      lines: ["+90 539 431 13 08"], href: "https://wa.me/905394311308" },
                { icon: "mail",     accent: "rgba(255,255,255,.08)",  c: "white",             label: "E-posta",       lines: ["rezervasyon@engtransfer.com", "info@engtransfer.com"] },
              ].map((row, i) => (
                <div key={i} style={{ display: "flex", gap: 12, alignItems: "start", padding: "14px 0", borderTop: i ? "1px solid rgba(255,255,255,.1)" : "none" }}>
                  <div style={{ width: 36, height: 36, borderRadius: 10, background: row.accent, color: row.c, display: "grid", placeItems: "center", flexShrink: 0 }}>
                    <Icon name={row.icon} size={18}/>
                  </div>
                  <div>
                    <div style={{ fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--gray-400)", textTransform: "uppercase", letterSpacing: ".1em" }}>{row.label}</div>
                    {row.lines.map((ln, j) => (
                      <div key={j} style={{ marginTop: 4 }}>
                        {row.href ? (
                          <a href={row.href} style={{ fontSize: 15, fontWeight: 700, fontFamily: "var(--font-mono)", color: "white", textDecoration: "none" }}>{ln}</a>
                        ) : (
                          <div style={{ fontSize: 14, lineHeight: 1.5 }}>{ln}</div>
                        )}
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>

            {/* Çalışma saatleri */}
            <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>
              {[
                ["Pazartesi — Cuma", "00:00 – 24:00 (7/24)"],
                ["Cumartesi — Pazar", "00:00 – 24:00 (7/24)"],
                ["Resmi Tatiller", "Açık · Tatil ücreti yok"],
              ].map(([d, h], 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)" }}>{d}</span>
                  <span style={{ fontWeight: 600, fontFamily: "var(--font-mono)" }}>{h}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* SSS */}
      <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 }}>
            {[
              ["Antalya Havalimanı'nda nerede karşılarsınız?", "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."],
              ["Uçuşum gecikirse ek ücret ödüyor muyum?", "Hayır. Uçuşunuzu canlı takip ederiz; gecikmelerde 90 dakikaya kadar ücretsiz bekleriz."],
              ["İptal politikası nedir?", "Yolculuk başlangıcına 24 saat kalaya kadar ücretsiz iptal ya da değişiklik hakkınız vardır."],
              ["Hangi bölgelere transfer yapıyorsunuz?", "Alanya, Belek, Side, Kemer, Kalkan, Kaş, Lara ve Antalya il genelindeki tüm otel bölgeleri."],
              ["Bebek koltuğu temin ediyor musunuz?", "Evet. ECE R44/04 sertifikalı 0–6 yaş bebek/çocuk koltuklarımız vardır. Rezervasyon sırasında ekleyebilirsiniz."],
              ["Ödeme nasıl yapılır?", "Online kredi/banka kartı, PayPal veya şoföre nakit (TRY/EUR/USD) seçeneklerinden tercih edebilirsiniz."],
            ].map(([q, a], i) => (
              <div key={i} style={{ background: "white", padding: 22, borderRadius: 14, border: "1px solid var(--gray-200)" }}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 16.5, fontWeight: 700, letterSpacing: "-.015em", marginBottom: 8 }}>{q}</div>
                <p style={{ color: "var(--gray-700)", fontSize: 14, lineHeight: 1.6, margin: 0 }}>{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>Dakikalar içinde transfer rezervasyonunuzu tamamlayı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.ContactPage = ContactPage;