/* Hakkımızda — story + tech stack + values + team */

function StoryPage() {
  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 }}>Hakkımızda</span>
          </div>
          <div style={{ maxWidth: 900, margin: "0 auto", textAlign: "center" }}>
            <span className="section-eyebrow">Hakkımızda</span>
            <h1 className="h-section" style={{ marginTop: 12, fontSize: 38, lineHeight: 1.1, letterSpacing: "-1.2px" }}>
              Mali müşavirler için, <br/><span className="ink-bar"><span style={{ color: "var(--brand-500)" }}>mali müşavirler tarafından</span></span>
            </h1>
            <p className="body-lg" style={{ marginTop: 18, color: "var(--text-muted)", maxWidth: 720, margin: "18px auto 0" }}>
              OfisimNet, Ankara Mamak'ta kurulan bir mali müşavir ofisinin günlük yorgunluğundan doğdu. Beyanname son tarihleri, mükellef şifreleri, CAPTCHA'lar, DVD oturum hataları… hepsi tek bir asistanda toplandı.
            </p>
          </div>
        </div>
      </section>

      {/* Story */}
      <section style={{ padding: "64px 0", background: "#fff", position: "relative", overflow: "hidden" }}>
        <div aria-hidden style={{ position: "absolute", top: -120, right: -160, width: 380, height: 380, borderRadius: "50%", background: "color-mix(in oklch, var(--brand-500) 6%, transparent)", filter: "blur(80px)", zIndex: 0 }} />
        <div aria-hidden style={{ position: "absolute", bottom: -120, left: -160, width: 320, height: 320, borderRadius: "50%", background: "color-mix(in oklch, var(--ai-purple) 8%, transparent)", filter: "blur(70px)", zIndex: 0 }} />
        <div className="container-kolaybi" style={{ maxWidth: 1000, margin: "0 auto", position: "relative", zIndex: 1 }}>
          <div style={{ textAlign: "center", maxWidth: 720, margin: "0 auto" }}>
            <span className="section-eyebrow">Hikaye</span>
            <h2 className="h-section" style={{ marginTop: 14 }}>
              Nasıl <span className="ink-bar"><span style={{ color: "var(--brand-500)" }}>başladık?</span></span>
            </h2>
            <p style={{ marginTop: 16, fontSize: 16, lineHeight: 1.7, color: "var(--text-muted)" }}>
              Mali müşavir bürosunda günlük rutin sayılarla nasıl görünür?
              Yüz mükellefli orta ölçekli bir ofis aşağıdaki tabloya alışkın.
            </p>
          </div>

          {/* Rutinin boyutu — stats grid */}
          <div style={{ marginTop: 48, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }} className="story-stats">
            {[
              { n: "400+", l: "işlem / ay", d: "100 mükellef × 4 beyanname türü", c: "var(--brand-500)" },
              { n: "90 dk", l: "her sabah", d: "DVD'den tebligat + vergi borcu sorgusu", c: "var(--ai-purple)" },
              { n: "6 / 7", l: "gün rutinde", d: "Aynı tıkır iş, aynı CAPTCHA, aynı kopyala-yapıştır", c: "#22c55e" },
            ].map((s) => (
              <div key={s.l} className="card-pop" style={{ padding: 24, borderTop: `3px solid ${s.c}` }}>
                <div style={{ fontSize: 36, fontWeight: 800, color: s.c, letterSpacing: "-1.2px", lineHeight: 1 }}>{s.n}</div>
                <div style={{ marginTop: 6, fontSize: 13, fontWeight: 700, color: "var(--brand-700)", textTransform: "uppercase", letterSpacing: ".06em" }}>{s.l}</div>
                <div style={{ marginTop: 8, fontSize: 13.5, lineHeight: 1.5, color: "var(--text-muted)" }}>{s.d}</div>
              </div>
            ))}
          </div>

          {/* Pull quote */}
          <div style={{ marginTop: 56, padding: "32px 36px", background: "linear-gradient(135deg, var(--brand-900), #1e2a5e)", color: "#fff", borderRadius: 16, position: "relative", overflow: "hidden" }}>
            <div aria-hidden style={{ position: "absolute", top: -40, right: -40, fontSize: 200, opacity: .08, fontFamily: "Georgia, serif", lineHeight: 1, color: "#fff" }}>"</div>
            <p style={{ margin: 0, fontSize: 19, lineHeight: 1.55, color: "#fff", fontWeight: 500, position: "relative", zIndex: 1 }}>
              Ay sonları işler katlanıyor. KDV1, MUHSGK, Geçici aynı haftaya düşüyor; personel sabahlıyor, hata payı artıyor. <span style={{ color: "#fcd34d", fontWeight: 700 }}>Bir gün anlaşılıyor ki bu işlerin neredeyse tamamı algoritmik — robot yapabilir.</span>
            </p>
          </div>

          {/* Çözüm kartları */}
          <div style={{ marginTop: 56, textAlign: "center" }}>
            <h3 style={{ fontSize: 22, fontWeight: 800, color: "var(--brand-700)", letterSpacing: "-.5px" }}>
              OfisimNet bunun için yazıldı
            </h3>
            <p style={{ marginTop: 10, fontSize: 14, color: "var(--text-muted)", maxWidth: 580, margin: "10px auto 0" }}>
              Rutinin algoritmik kısmını arka plana taşıyan, mali müşavir ofisi için özel tasarlanmış asistan.
            </p>
          </div>

          <div style={{ marginTop: 36, display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 }} className="story-cards">
            {[
              { icon: "🌙", h: "Gece taraması", d: "Beyanname tahakkukları her gece otomatik çekilir, PDF'ler arşive yüklenir, mükellefe WhatsApp'tan tahakkuk + vade gönderilir.", c: "var(--brand-500)" },
              { icon: "🔍", h: "DVD otomasyonu", d: "Tebligat ve vergi borcu sorgusu her gün otomatik çalışır. GİB'in oturum-IP'ye-bağlı sorununu sabit IP altyapımız çözer.", c: "#22c55e" },
              { icon: "🤖", h: "CAPTCHA çözümü", d: "GİB CAPTCHA'ları yapay zekâ ile saniyeler içinde çözülür. Login → sorgu → PDF: tam akış 5 saniyede.", c: "#f59e0b" },
              { icon: "✨", h: "AL · WhatsApp fatura", d: "Mükellefin WhatsApp'a gönderdiği fatura fotoğrafı veya PDF, AL ile üç saniyede e-fatura olarak hazırlanır.", c: "var(--ai-purple)" },
            ].map((c) => (
              <div key={c.h} className="card-pop" style={{ padding: 22, display: "flex", gap: 16, alignItems: "flex-start" }}>
                <div style={{ flexShrink: 0, width: 44, height: 44, borderRadius: 11, background: `color-mix(in oklch, ${c.c} 14%, white)`, color: c.c, display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 22 }}>{c.icon}</div>
                <div>
                  <h4 style={{ fontSize: 15, fontWeight: 700, color: "var(--brand-700)" }}>{c.h}</h4>
                  <p style={{ marginTop: 6, fontSize: 13.5, lineHeight: 1.55, color: "var(--text-muted)" }}>{c.d}</p>
                </div>
              </div>
            ))}
          </div>

          {/* Closing */}
          <div style={{ marginTop: 56, textAlign: "center", maxWidth: 720, margin: "56px auto 0" }}>
            <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--text-body)", fontWeight: 500 }}>
              Bugün OfisimNet, mali müşavir ofisinin <span style={{ color: "var(--brand-500)", fontWeight: 700 }}>arka planda 7/24 çalışan asistanı</span>. Gece beyannameleri tarar, sabah özet rapor bırakır, gün boyunca rutini sessizce halleder.
            </p>
            <p style={{ marginTop: 14, fontSize: 15, color: "var(--text-muted)" }}>
              Siz mükellefinize odaklanın.
            </p>
          </div>
        </div>
        <style>{`
          @media (max-width: 768px) {
            .story-stats { grid-template-columns: 1fr !important; }
            .story-cards { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </section>

      {/* Mission + Values */}
      <section style={{ padding: "64px 0", background: "var(--bg-muted)" }}>
        <div className="container-kolaybi">
          <div style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 48px" }}>
            <span className="section-eyebrow">Değerlerimiz</span>
            <h2 className="h-section" style={{ marginTop: 14 }}>Hangi prensiplerle çalışıyoruz</h2>
          </div>
          <div className="grid-3">
            {[
              { i: "🇹🇷", h: "Türkiye'de hosted", d: "Tüm veriler Türkiye coğrafyasında — Türkiye + Türkiye. KVKK ve VERBİS uyumu temel." },
              { i: "🤝", h: "Mali müşavir öncelikli", d: "Her özelliği gerçek bir SMMM ofisinde test ediyoruz. UI/UX kararlarımızda müşavir akışları belirleyici." },
              { i: "🔐", h: "Şifre güvenliği", d: "GİB ve SGK şifreleri güçlü şifreleme ile encrypt. Frontend hiç görmüyor. Backend erişim kontrolü altında." },
              { i: "⚡", h: "Hız ve güvenilirlik", d: "Adaptive backoff, retry mantığı, self-healing PDF tamiri. Tek bir hata tüm işi durdurmaz." },
              { i: "🛠", h: "Açık çekirdek mimari", d: "sunucu tarafı + veritabanımız + güvenli bulut depolama + Node.js. Modern, ölçeklenebilir, açık standartlar." },
              { i: "💬", h: "Türkçe destek", d: "Tüm görüşmeler Türkçe — telefon, e-posta, panel içi. Mali müşavir terminolojisi tanıdık." },
            ].map((v) => (
              <div key={v.h} className="card-pop" style={{ padding: 24 }}>
                <div style={{ fontSize: 32, marginBottom: 12 }}>{v.i}</div>
                <h3 style={{ fontSize: 17, fontWeight: 800, color: "var(--brand-700)" }}>{v.h}</h3>
                <p style={{ marginTop: 8, fontSize: 14, lineHeight: 1.6, color: "var(--text-muted)" }}>{v.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Numbers */}
      <section style={{ padding: "48px 0", background: "var(--brand-900)", color: "#fff" }}>
        <div className="container-kolaybi">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16, textAlign: "center" }} className="num-grid">
            {[
              { n: "Her gece", l: "GİB e-Beyanname taraması" },
              { n: "Saatlik", l: "DVD karşıt inceleme kontrolü" },
              { n: "7 yıl", l: "arşivde PDF arşiv saklama" },
              { n: "İstanbul", l: "DC · Türkiye · KVKK uyumlu" },
            ].map((s) => (
              <div key={s.l}>
                <div style={{ fontSize: 28, fontWeight: 800, letterSpacing: "-1px", color: "var(--ai-purple)" }}>{s.n}</div>
                <div style={{ marginTop: 6, fontSize: 13, color: "rgba(255,255,255,.7)" }}>{s.l}</div>
              </div>
            ))}
          </div>
          <style>{`
            @media (max-width: 700px) { .num-grid { grid-template-columns: 1fr 1fr !important; gap: 24px !important; } }
          `}</style>
        </div>
      </section>

      {/* Address + CTA */}
      <section style={{ padding: "64px 0", background: "#fff" }}>
        <div className="container-kolaybi">
          <div className="cta-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }}>
          <div className="card-pop" style={{ padding: 32 }}>
            <span className="section-eyebrow">Genel Merkez</span>
            <h3 style={{ marginTop: 14, fontSize: 22, fontWeight: 800 }}>Ankara · Mamak</h3>
            <p style={{ marginTop: 10, fontSize: 14.5, lineHeight: 1.6, color: "var(--text-body)" }}>
              <strong>Adres:</strong> Küçük Kayaş Mah. Şehit Hanifi Mutlu Cad. Çelikler Apt. Kapı No: 61 F · Mamak / ANKARA
            </p>
            <div style={{ marginTop: 16, display: "flex", flexDirection: "column", gap: 8, fontSize: 14 }}>
              <a href="tel:+905325600346" style={{ color: "var(--brand-500)", fontWeight: 600 }}>☎ 0532 560 03 46</a>
              <a href="mailto:iletisim@ofisimnet.com" style={{ color: "var(--brand-500)", fontWeight: 600 }}>✉ iletisim@ofisimnet.com</a>
            </div>
            <div style={{ marginTop: 24, display: "flex", gap: 10 }}>
              <a href="Iletisim.html" className="kb-btn-secondary">İletişim sayfası</a>
              <a 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" target="_blank" rel="noreferrer" className="kb-btn-secondary">Haritada gör →</a>
            </div>
          </div>

          <div style={{ background: "linear-gradient(135deg, var(--brand-500), var(--ai-purple))", color: "#fff", padding: 36, borderRadius: 14, display: "flex", flexDirection: "column", justifyContent: "center" }}>
            <h3 style={{ color: "#fff", fontSize: 24, fontWeight: 800, letterSpacing: "-0.6px" }}>Ofisimizi 14 günde tanıyın.</h3>
            <p style={{ marginTop: 12, fontSize: 14.5, opacity: .9, lineHeight: 1.5 }}>
              Kredi kartı sorulmaz. Tüm modüller açık. İstediğinizde iptal.
            </p>
            <div style={{ marginTop: 24, display: "flex", gap: 10, flexWrap: "wrap" }}>
              <a href="/kayit" style={{ padding: "12px 22px", borderRadius: 10, background: "#fff", color: "var(--brand-500)", fontWeight: 700, fontSize: 14 }}>14 gün ücretsiz dene →</a>
              <a href="Iletisim.html#demo" style={{ padding: "12px 22px", borderRadius: 10, background: "rgba(255,255,255,.12)", color: "#fff", border: "1px solid rgba(255,255,255,.25)", fontWeight: 600, fontSize: 14 }}>Demo iste</a>
            </div>
          </div>
          </div>
        </div>
        <style>{`
          @media (max-width: 900px) { .cta-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </section>
    </>
  );
}

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

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