/* İletişim sayfası — adres, telefon, e-posta, form, harita */

function ContactForm() {
  const [state, setState] = React.useState({ ad: "", buro: "", tel: "", email: "", konu: "demo", mesaj: "" });
  const [sent, setSent] = React.useState(false);
  const onChange = (k) => (e) => setState((s) => ({ ...s, [k]: e.target.value }));
  const onSubmit = (e) => { e.preventDefault(); setSent(true); };

  if (sent) {
    return (
      <div style={{ textAlign: "center", padding: "60px 20px" }}>
        <div style={{ width: 72, height: 72, borderRadius: "50%", background: "color-mix(in oklch, var(--success-green) 14%, white)", color: "var(--success-green)", display: "inline-flex", alignItems: "center", justifyContent: "center", margin: "0 auto 20px", fontSize: 32 }}>✓</div>
        <h3 style={{ fontSize: 24, fontWeight: 800, letterSpacing: "-0.5px" }}>Mesajınız ulaştı.</h3>
        <p style={{ marginTop: 10, color: "var(--text-muted)", fontSize: 14.5 }}>
          1 iş günü içinde <strong style={{ color: "var(--brand-700)" }}>{state.email}</strong> adresine döneceğiz.
        </p>
        <button onClick={() => { setSent(false); setState({ ad: "", buro: "", tel: "", email: "", konu: "demo", mesaj: "" }); }} className="kb-btn-secondary" style={{ marginTop: 24 }}>
          Yeni mesaj yaz
        </button>
      </div>
    );
  }

  return (
    <form onSubmit={onSubmit} style={{ display: "flex", flexDirection: "column", gap: 16 }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }} className="form-row">
        <div>
          <label className="form-label">Ad Soyad</label>
          <input className="form-input" type="text" required value={state.ad} onChange={onChange("ad")} placeholder="Mehmet Yılmaz" />
        </div>
        <div>
          <label className="form-label">Mali Müşavir Bürosu</label>
          <input className="form-input" type="text" value={state.buro} onChange={onChange("buro")} placeholder="Yılmaz SMMM Bürosu" />
        </div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }} className="form-row">
        <div>
          <label className="form-label">Telefon</label>
          <input className="form-input" type="tel" required value={state.tel} onChange={onChange("tel")} placeholder="0532 XXX XX XX" />
        </div>
        <div>
          <label className="form-label">E-posta</label>
          <input className="form-input" type="email" required value={state.email} onChange={onChange("email")} placeholder="mehmet@yilmaz-smmm.com" />
        </div>
      </div>
      <div>
        <label className="form-label">Konu</label>
        <select className="form-input" value={state.konu} onChange={onChange("konu")}>
          <option value="demo">Demo talep et</option>
          <option value="fiyat">Fiyatlandırma sorusu</option>
          <option value="teknik">Teknik destek</option>
          <option value="entegrasyon">Entegrasyon (Zirve / Luca / Mikro)</option>
          <option value="kurumsal">Kurumsal teklif</option>
          <option value="diger">Diğer</option>
        </select>
      </div>
      <div>
        <label className="form-label">Mesajınız</label>
        <textarea className="form-input form-textarea" required value={state.mesaj} onChange={onChange("mesaj")} placeholder="Mükellef sayınız, kullandığınız muhasebe programı, sorularınız..." />
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 6 }}>
        <button type="submit" className="kb-btn-primary">Mesajı Gönder →</button>
        <span style={{ fontSize: 12, color: "var(--text-muted)" }}>Yanıt süresi: 1 iş günü</span>
      </div>
      <style>{`
        @media (max-width: 720px) { .form-row { grid-template-columns: 1fr !important; } }
      `}</style>
    </form>
  );
}

function StaticMap() {
  // SVG map illustration with pin
  return (
    <svg viewBox="0 0 600 400" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" style={{ display: "block" }}>
      <defs>
        <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
          <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#e2e8f0" strokeWidth="1" />
        </pattern>
      </defs>
      <rect width="600" height="400" fill="#f3f6fa" />
      <rect width="600" height="400" fill="url(#grid)" />
      {/* roads */}
      <path d="M 50 100 L 550 130" stroke="#cbd5e1" strokeWidth="8" fill="none" />
      <path d="M 100 50 L 130 380" stroke="#cbd5e1" strokeWidth="8" fill="none" />
      <path d="M 400 80 L 380 380" stroke="#cbd5e1" strokeWidth="8" fill="none" />
      <path d="M 50 250 L 550 280" stroke="#cbd5e1" strokeWidth="6" fill="none" />
      <path d="M 200 60 L 260 380" stroke="#cbd5e1" strokeWidth="5" fill="none" />
      <path d="M 50 180 L 550 200" stroke="#dbe3ec" strokeWidth="4" fill="none" />
      {/* blocks (gray rectangles) */}
      <g fill="#e2e8f0">
        <rect x="150" y="120" width="40" height="55" rx="2" />
        <rect x="210" y="130" width="50" height="40" rx="2" />
        <rect x="280" y="125" width="35" height="50" rx="2" />
        <rect x="340" y="135" width="45" height="40" rx="2" />
        <rect x="150" y="210" width="55" height="35" rx="2" />
        <rect x="220" y="215" width="35" height="30" rx="2" />
        <rect x="290" y="210" width="45" height="40" rx="2" />
        <rect x="425" y="220" width="40" height="35" rx="2" />
        <rect x="155" y="295" width="45" height="40" rx="2" />
        <rect x="225" y="295" width="35" height="45" rx="2" />
        <rect x="285" y="295" width="55" height="40" rx="2" />
      </g>
      {/* street names */}
      <text x="240" y="98" fontSize="9" fill="#94a3b8" fontFamily="Montserrat">1859. Sk.</text>
      <text x="240" y="195" fontSize="9" fill="#94a3b8" fontFamily="Montserrat">1856. Sk.</text>
      <text x="240" y="275" fontSize="9" fill="#94a3b8" fontFamily="Montserrat">Şht. Hanifi Mutlu Cd.</text>
      {/* park */}
      <rect x="420" y="285" width="100" height="80" rx="6" fill="#dcfce7" />
      <text x="440" y="330" fontSize="9" fill="#22c55e" fontFamily="Montserrat" fontWeight="700">PARK</text>
      {/* pin */}
      <g transform="translate(360 235)">
        <ellipse cx="0" cy="14" rx="14" ry="4" fill="rgba(0,0,0,.15)" />
        <path d="M 0 -30 C -16 -30 -24 -18 -24 -8 C -24 6 0 22 0 22 C 0 22 24 6 24 -8 C 24 -18 16 -30 0 -30 Z" fill="#ef4444" stroke="#fff" strokeWidth="3" />
        <circle cx="0" cy="-12" r="6" fill="#fff" />
      </g>
      {/* info card */}
      <g transform="translate(20 20)">
        <rect width="260" height="74" rx="10" fill="#fff" stroke="#e2e8f0" />
        <text x="14" y="22" fontSize="11" fill="#5b6577" fontFamily="Montserrat" fontWeight="700">📍 OfisimNet Genel Merkez</text>
        <text x="14" y="40" fontSize="10" fill="#0e1423" fontFamily="Montserrat">Küçük Kayaş Mah.</text>
        <text x="14" y="54" fontSize="10" fill="#0e1423" fontFamily="Montserrat">Şehit Hanifi Mutlu Cad. No: 61/F</text>
        <text x="14" y="68" fontSize="10" fill="#5b6577" fontFamily="Montserrat">Mamak / ANKARA</text>
      </g>
    </svg>
  );
}

function ContactPage() {
  const cards = [
    {
      icon: "☎",
      bg: "color-mix(in oklch, var(--brand-500) 12%, white)",
      color: "var(--brand-500)",
      h: "TELEFON",
      v: "0532 560 03 46",
      a: "Aramak için tıkla →",
      href: "tel:+905325600346",
    },
    {
      icon: "📍",
      bg: "color-mix(in oklch, var(--ai-purple) 14%, white)",
      color: "var(--ai-purple)",
      h: "ADRES",
      v: "Küçük Kayaş Mah. Şehit Hanifi Mutlu Cad. Çelikler Apt. Kapı No: 61 F",
      sub: "Mamak / ANKARA",
      a: "Yol tarifini gör →",
      href: "https://maps.google.com/?q=K%C3%BC%C3%A7%C3%BCk+Kaya%C5%9F+Mah.+%C5%9Eehit+Hanifi+Mutlu+Cad.+%C3%87elikler+Apt.+No+61+F+Mamak+Ankara",
    },
    {
      icon: "✉",
      bg: "color-mix(in oklch, var(--success-green) 14%, white)",
      color: "var(--success-green)",
      h: "E-POSTA",
      v: "iletisim@ofisimnet.com",
      a: "Mesaj yaz →",
      href: "mailto:iletisim@ofisimnet.com",
    },
  ];

  return (
    <>
      {/* Hero */}
      <section style={{ background: "linear-gradient(180deg, color-mix(in oklch, var(--brand-500) 6%, white), white 70%)" }}>
        <div className="container-kolaybi" style={{ paddingTop: 56, paddingBottom: 32 }}>
          <div style={{ fontSize: 12, color: "var(--text-muted)", marginBottom: 14 }}>
            <a href="/" style={{ color: "var(--text-muted)" }}>Anasayfa</a> / <span style={{ color: "var(--brand-700)", fontWeight: 700 }}>İletişim</span>
          </div>
          <span className="section-eyebrow">İletişim</span>
          <h1 className="h-section" style={{ marginTop: 12, fontSize: 38, lineHeight: 1.1, letterSpacing: "-1.2px" }}>
            Sorunuz var? <span className="ink-bar"><span style={{ color: "var(--brand-500)" }}>Bize yazın.</span></span>
          </h1>
          <p className="body-lg" style={{ marginTop: 14, maxWidth: 680, color: "var(--text-muted)" }}>
            Demo talep edin, fiyatlandırma sorularınızı sorun veya kurumsal teklif isteyin — 1 iş günü içinde döneceğiz. Mali müşavirler tarafından kurulan ekibimiz Türkiye'den yanıt verir.
          </p>
        </div>
      </section>

      {/* Contact cards + Map */}
      <section style={{ paddingTop: 40, paddingBottom: 64, background: "#fff" }}>
        <div className="container-kolaybi">
          <div className="contact-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 32 }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            {cards.map((c) => (
              <a key={c.h} href={c.href} target={c.href.startsWith("http") ? "_blank" : undefined} rel="noreferrer" className="card-pop" style={{ padding: 22, display: "flex", flexDirection: "column", gap: 8 }}>
                <div style={{ width: 44, height: 44, borderRadius: 10, background: c.bg, color: c.color, display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 22 }}>{c.icon}</div>
                <div style={{ fontSize: 11, fontWeight: 800, color: "var(--text-muted)", letterSpacing: ".1em", marginTop: 8 }}>{c.h}</div>
                <div style={{ fontSize: 17, fontWeight: 700, color: "var(--brand-700)", lineHeight: 1.4 }}>{c.v}</div>
                {c.sub && <div style={{ fontSize: 13, color: "var(--text-muted)" }}>{c.sub}</div>}
                <div style={{ fontSize: 12.5, fontWeight: 600, color: c.color, marginTop: 4 }}>{c.a}</div>
              </a>
            ))}
          </div>

          <div className="card-pop" style={{ overflow: "hidden", padding: 0, minHeight: 540 }}>
            <StaticMap />
          </div>
          </div>
        </div>
        <style>{`
          @media (max-width: 992px) { .contact-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </section>

      {/* Form section */}
      <section id="demo" style={{ background: "var(--bg-muted)", padding: "64px 0" }}>
        <div className="container-kolaybi">
          <div className="form-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 56 }}>
          <div>
            <span className="section-eyebrow">Bize Yazın</span>
            <h2 className="h-section" style={{ marginTop: 14, fontSize: 36 }}>
              Demo veya <span className="ink-bar"><span style={{ color: "var(--brand-500)" }}>teklif</span></span> mi istiyorsunuz?
            </h2>
            <p style={{ marginTop: 14, fontSize: 15, lineHeight: 1.6, color: "var(--text-muted)" }}>
              Mali müşavir ofisinize özel demo veya 150+ mükellef için kurumsal teklif almak isterseniz formu doldurun. Mükellef sayınızı, kullandığınız muhasebe programını (Zirve/Luca/Mikro) yazarsanız hazırlığımızı yapıp döneriz.
            </p>
            <div style={{ marginTop: 28, display: "flex", flexDirection: "column", gap: 14 }}>
              {[
                { i: "✓", t: "Demo süresi: 30 dakika", d: "Online · ekran paylaşımı ile." },
                { i: "✓", t: "Yanıt süresi: 1 iş günü", d: "Mesai saatleri dışında ertesi gün." },
                { i: "✓", t: "Türkçe destek", d: "Tüm görüşmeler Türkçe — Türkiye'den." },
              ].map((b, i) => (
                <div key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                  <span style={{ flexShrink: 0, width: 24, height: 24, borderRadius: "50%", background: "color-mix(in oklch, var(--success-green) 14%, white)", color: "var(--success-green)", display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 12, fontWeight: 800 }}>{b.i}</span>
                  <div>
                    <div style={{ fontWeight: 700, fontSize: 14, color: "var(--brand-700)" }}>{b.t}</div>
                    <div style={{ fontSize: 12.5, color: "var(--text-muted)" }}>{b.d}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div className="card-pop" style={{ padding: 32 }}>
            <ContactForm />
          </div>
          </div>
        </div>
        <style>{`
          @media (max-width: 900px) { .form-grid { grid-template-columns: 1fr !important; gap: 32px !important; } }
        `}</style>
      </section>
    </>
  );
}

function App() {
  return (
    <>
      <PromoBar />
      <Navbar active="iletisim" />
      <main>
        <ContactPage />
      </main>
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);