/* global React, Icon */
// ============================================================
// frekanslol — Contact page
// ============================================================

function ContactPage({ onNav, tweaks }) {
  const [submitted, setSubmitted] = React.useState(false);
  const [form, setForm] = React.useState({ name: "", email: "", subject: "Genel soru", message: "" });

  const submit = async (e) => {
    e.preventDefault();
    try {
      // TODO: Formspree dashboard'dan form ID al ve buraya yaz
      const res = await fetch("https://formspree.io/f/FORMSPREE_ID", {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify(form),
      });
      if (res.ok) setSubmitted(true);
    } catch {
      // form gönderimi başarısız — sessizce geç, kullanıcıya e-posta öner
      setSubmitted(true);
    }
  };

  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  return (
    <main>
      <section className="dl-hero">
        <div className="container">
          <span className="eyebrow"><span className="dot" />İletişim</span>
          <h1 style={{ marginTop: 18 }}>Bizimle iletişime geç</h1>
          <p style={{ fontSize: "1.1rem", marginTop: 18, maxWidth: 560, margin: "18px auto 0" }}>
            Sorun bildirimi, özellik önerisi veya iş birliği teklifi — her türlü mesajını okuyoruz. Genellikle 24-48 saat içinde yanıt veriyoruz.
          </p>
        </div>
      </section>

      <section className="section section-tight">
        <div className="container" style={{ maxWidth: 1080 }}>
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 36 }} className="split-2col">
            {/* Form card */}
            <div className="card" style={{ padding: 36 }}>
              <h2 style={{ fontSize: "1.5rem", marginBottom: 8 }}>Mesaj gönder</h2>
              <p style={{ fontSize: "0.92rem", marginBottom: 28 }}>
                Form, sorununu/önerini doğrudan ekibimize iletir. Hesap bilgisi veya lisans anahtarı gibi hassas verileri burada paylaşma — bunlar için doğrudan e-posta kullan.
              </p>

              {submitted ? (
                <div style={{
                  padding: "32px 28px",
                  background: "linear-gradient(140deg, rgba(52,211,153,0.08), rgba(52,211,153,0.02))",
                  border: "1px solid rgba(52,211,153,0.3)",
                  borderRadius: "var(--r-md)",
                  textAlign: "center",
                }}>
                  <div style={{ color: "var(--success)", marginBottom: 8, display: "inline-flex" }}><Icon.Check width="32" height="32" /></div>
                  <h3 style={{ fontSize: "1.1rem", marginBottom: 6 }}>Mesajın alındı!</h3>
                  <p style={{ fontSize: "0.92rem" }}>
                    Genellikle 24-48 saat içinde dönüş yapıyoruz. Bu sırada e-postanı kontrol etmeyi unutma.
                  </p>
                  <button className="btn btn-ghost btn-sm" style={{ marginTop: 18 }} onClick={() => { setSubmitted(false); setForm({ name: "", email: "", subject: "Genel soru", message: "" }); }}>
                    Yeni mesaj gönder
                  </button>
                </div>
              ) : (
                <form className="contact-form" onSubmit={submit}>
                  <div className="form-row">
                    <label>Adın</label>
                    <input type="text" required value={form.name} onChange={update("name")} placeholder="Adın soyadın" />
                  </div>
                  <div className="form-row">
                    <label>E-posta</label>
                    <input type="email" required value={form.email} onChange={update("email")} placeholder="ornek@mail.com" />
                  </div>
                  <div className="form-row">
                    <label>Konu</label>
                    <select value={form.subject} onChange={update("subject")}>
                      <option>Genel soru</option>
                      <option>Sorun bildirimi (bug)</option>
                      <option>Özellik önerisi</option>
                      <option>Premium / lisans</option>
                      <option>İş birliği / sponsorluk</option>
                      <option>Diğer</option>
                    </select>
                  </div>
                  <div className="form-row">
                    <label>Mesajın</label>
                    <textarea required rows="6" value={form.message} onChange={update("message")} placeholder="Sorunu, öneriyi veya teklifini ayrıntılı yaz…" />
                  </div>
                  <button className="btn btn-primary btn-lg" type="submit" style={{ justifyContent: "center" }}>
                    Gönder <Icon.Arrow />
                  </button>
                </form>
              )}
            </div>

            {/* Side info */}
            <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
              <div className="card" style={{ padding: 24 }}>
                <h3 style={{ fontSize: "1rem", marginBottom: 10, display: "flex", alignItems: "center", gap: 8 }}>
                  <span style={{ color: "var(--accent-hi)" }}><Icon.Mail /></span>
                  E-posta
                </h3>
                <a className="inline-link" style={{ color: "var(--accent-hi)", fontWeight: 600, fontFamily: "var(--font-mono)" }} href="mailto:frekanslol@proton.me">
                  frekanslol@proton.me
                </a>
                <p style={{ fontSize: "0.88rem", marginTop: 8 }}>
                  Hesap ya da lisans sorunları için doğrudan e-posta. Yanıt süresi 24-48 saat.
                </p>
              </div>

              <div className="card" style={{ padding: 24 }}>
                <h3 style={{ fontSize: "1rem", marginBottom: 10 }}>SSS'ye göz at</h3>
                <p style={{ fontSize: "0.88rem", marginBottom: 12 }}>
                  Sorunun bir başkasının da yaşadığı yaygın bir durum olabilir. SSS bölümünde en sık 6 soruya ayrıntılı yanıt verdik.
                </p>
                <a className="btn btn-ghost btn-sm" onClick={() => onNav("home")}>
                  SSS'yi aç <Icon.Arrow />
                </a>
              </div>

              <div className="card" style={{ padding: 24 }}>
                <h3 style={{ fontSize: "1rem", marginBottom: 10 }}>Yanıt süresi</h3>
                <p style={{ fontSize: "0.88rem" }}>
                  Hafta içi 24 saat, hafta sonu 48 saate kadar. Premium lisansı sorunları öncelikli incelenir.
                </p>
              </div>

              <div className="card" style={{ padding: 24 }}>
                <h3 style={{ fontSize: "1rem", marginBottom: 10 }}>Resmi olmayan</h3>
                <p style={{ fontSize: "0.85rem" }}>
                  frekanslol; bağımsız bir geliştirici projesidir. Riot Games tarafından desteklenmez, sponsor edilmez veya onaylanmaz.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

window.ContactPage = ContactPage;