// pages-extra.jsx — Sectors page + Privacy + Terms

function SectorsPage({ lang, navigate }) {
  const G = ({ children }) => <span style={{ color: "var(--hp-green-3)", fontWeight: 500 }}>{children}</span>;
  const Eyebrow = ({ label }) =>
  <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 28 }}>
      <span style={{ width: 40, height: 3, background: "var(--hp-green-3)" }} />
      <span className="hp-label" style={{ color: "var(--hp-green-3)" }}>{label}</span>
    </div>;
  const models = [
  { name: "B2B ve Endüstriyel",
    body: <>Satış döngüsü uzun, anlaşmalar az ama yüksek değerli; büyüme ilişki ve <G>pipeline</G> yönetimine bağlıdır. Lead gelir ama çoğu nitelikli değildir veya takip edilmez; satış ve pazarlama aynı sistemde çalışmaz. Darboğaz çoğu zaman <G>lead kalitesi</G> ve <G>takip sistemindedir</G>.</> },
  { name: "SaaS, Teknoloji ve AI",
    body: <>Müşteri kazanmak işin yarısıdır; asıl büyüme <G>aktivasyon</G>, <G>retention</G> ve <G>NRR</G> ile belirlenir. Kullanıcı kaydolur ama aktive olmaz, <G>churn</G> büyümeyi yer. Sorun çoğu zaman <G>onboarding ve lifecycle</G>'da kırılır.</> },
  { name: "B2C, E-Ticaret ve Tüketici Markaları",
    body: <>Hacim oyunu; <G>CAC/LTV</G> dengesi ve <G>tekrar satın alma</G> kazandırır. Trafik gelir ama kârlı dönüşmez, ya da tek seferlik alıcı geri gelmez. <G>Conversion</G> ve <G>retention</G> katmanı öne çıkar. Moda, wellness ve lifestyle bu modele girer.</> },
  { name: "Finans, Medya ve Abonelik",
    body: <>Güven, uyum ve <G>yinelenen gelir</G> esastır; satın alma kararı güvene dayalıdır. Trafik ilgilenir ama <G>aboneliğe</G> dönmez. <G>Mesaj ve funnel yapısı</G> sonucu taşır.</> },
  { name: "Eğitim, Bilgi Ürünleri ve Creator",
    body: <>İçerik, <G>talep yaratma</G> ve <G>yaşam boyu değer</G> eksenlidir; kitle vardır ama gelire dönmez. Takipçi ile müşteri arasındaki köprü kurulmamıştır. <G>Demand</G> ve <G>conversion</G> bu modelde farklı kurulur.</> },
  { name: "Reklam ve Creative Ajansları",
    body: <>Rakip değil, tamamlayıcıyız. Ajanslar kanal ve kreatif tarafında güçlüdür; biz <G>veri, ölçümleme, automation</G> ve <G>custom tooling</G> tarafında devreye gireriz. İhtiyaca göre <G>white-label partner</G> olarak arka planda çalışırız.</> }];

  return (
    <main>
      {/* HERO */}
      <section style={{ padding: "var(--hp-section) var(--hp-pad-x) var(--hp-section-sm)" }} data-comment-anchor="69e6fc6f80-section-27-7">
        <div className="hp-shell" style={{ padding: 0 }}>
          <Eyebrow label="Faaliyet Alanları" />
          <h1 className="hp-h1" style={{ maxWidth: "18ch" }}><span style={{ color: "var(--hp-green-3)" }}>Büyüme</span> her iş modelinde aynı kurulmaz.</h1>
          <p className="hp-body-lg" style={{ marginTop: 32, maxWidth: 880, color: "var(--hp-ink)" }}>
            Bir şirketin satış yapısı, operasyonu ve veri kapasitesi iş modeline göre değişir. Hornpiper sektör kalıbı değil, <G>modele göre uyarlanan bir büyüme mimarisi</G> kurar. Önce darboğazın hangi katmanda olduğunu okur.
          </p>
        </div>
      </section>

      {/* 6 İŞ MODELİ */}
      <section style={{ padding: "var(--hp-section-sm) var(--hp-pad-x) var(--hp-section)", borderTop: "1px solid var(--hp-line)" }}>
        <div className="hp-shell" style={{ padding: 0 }}>
          <div className="hp-grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1, background: "var(--hp-line-strong)", border: "1px solid var(--hp-line-strong)" }}>
            {models.map((m) =>
            <div key={m.name} role="link" tabIndex={0}
            onClick={() => {/* placeholder — /industries/[slug] ileride */}}
            style={{
              background: "var(--hp-bg)", borderTop: "3px solid var(--hp-green-3)",
              padding: "36px 32px", display: "flex", flexDirection: "column",
              minHeight: 300, cursor: "pointer", transition: "background 140ms, transform 140ms, box-shadow 140ms"
            }}
            onMouseEnter={(e) => {e.currentTarget.style.background = "var(--hp-tint-green)";e.currentTarget.style.transform = "translateY(-2px)";e.currentTarget.style.boxShadow = "0 14px 36px -20px rgba(64,157,112,0.6)";}}
            onMouseLeave={(e) => {e.currentTarget.style.background = "var(--hp-bg)";e.currentTarget.style.transform = "none";e.currentTarget.style.boxShadow = "none";}}>
                <h3 style={{ margin: 0, fontFamily: "var(--hp-sans)", fontWeight: 600, fontSize: 24, letterSpacing: "-0.02em", lineHeight: 1.2, color: "var(--hp-ink-strong)" }}>{m.name}</h3>
                <p className="hp-body" style={{ margin: "16px 0 0", fontSize: 15, lineHeight: 1.6, color: "var(--hp-ink-dim)" }}>{m.body}</p>
                <div className="hp-label" style={{ marginTop: "auto", paddingTop: 28, color: "var(--hp-green-3)" }}>İncele →</div>
              </div>
            )}
          </div>

          <p className="hp-body-lg" style={{ marginTop: 48, maxWidth: 820, color: "var(--hp-ink)" }}>
            Modeliniz hangisi olursa olsun, hazır reçete uygulamayız. Önce yapınızı okuruz, darboğazı teşhis ederiz, <G>mimariyi modelinize göre kurarız</G>.
          </p>
        </div>
      </section>

      {/* CTA */}
      <section style={{ padding: "var(--hp-section) var(--hp-pad-x)", borderTop: "1px solid var(--hp-green-3)", background: "var(--hp-bg)" }}>
        <div className="hp-shell" style={{ padding: 0 }}>
          <h2 className="hp-h1" style={{ fontSize: "clamp(36px, 5vw, 72px)", maxWidth: "20ch" }}>
            Önce <span style={{ color: "var(--hp-green-3)" }}>büyüme sisteminizin</span> nerede tıkandığını görelim.
          </h2>
          <div style={{ marginTop: 44 }}>
            <a href="#/contact" onClick={(e) => {e.preventDefault();navigate("/contact");}}
            className="hp-btn" style={{ fontSize: 16, padding: "20px 32px" }}>
              Diagnose Talebi Gönder <ArrowR size={16} />
            </a>
          </div>
        </div>
      </section>
    </main>);

}

function PrivacyPage({ lang, navigate }) {
  return (
    <main>
      <section style={{ padding: "var(--hp-section) var(--hp-pad-x) var(--hp-section-sm)" }}>
        <div className="hp-shell" style={{ padding: 0, maxWidth: 820 }}>
          <div className="hp-eyebrow" style={{ marginBottom: 28 }}>§ GİZLİLİK · KVKK</div>
          <h1 className="hp-h1">Gizlilik Politikası</h1>
          <p className="hp-body" style={{ marginTop: 32, color: "var(--hp-ink-dim)" }}>Son güncelleme: 2026.05.28 · KVKK ve GDPR uyumlu.</p>

          <h2 className="hp-h3" style={{ marginTop: 56, color: "var(--hp-gold)" }}>01 · Veri Toplama</h2>
          <p className="hp-body" style={{ marginTop: 12 }}>
            Hornpiper yalnızca site üzerinden gönderdiğiniz iletişim ve teşhis talep formları ile size ulaşmak için gerekli kişisel verileri toplar. Pazarlama, profil oluşturma veya üçüncü taraflarla veri satışı yapılmaz. Çerez kullanılmaz.
          </p>

          <h2 className="hp-h3" style={{ marginTop: 32, color: "var(--hp-gold)" }}>02 · Veri Saklama</h2>
          <p className="hp-body" style={{ marginTop: 12 }}>
            Formlar üzerinden gelen veri yalnızca yanıt sürecini tamamlamak için saklanır. Anlaşma kurulmazsa 90 gün içinde silinir. Anlaşma kurulursa sözleşme süresince + 2 yıl yasal saklama gereği uygulanır.
          </p>

          <h2 className="hp-h3" style={{ marginTop: 32, color: "var(--hp-gold)" }}>03 · Veri Hakları</h2>
          <p className="hp-body" style={{ marginTop: 12 }}>
            KVKK madde 11 kapsamında verilerinizi sorgulama, düzeltme, silme ve aktarma haklarına sahipsiniz. Talepleriniz için info@hornpiper.com adresinden iletişime geçebilirsiniz.
          </p>

          <h2 className="hp-h3" style={{ marginTop: 32, color: "var(--hp-gold)" }}>04 · İzleme</h2>
          <p className="hp-body" style={{ marginTop: 12 }}>
            Site Plausible Analytics ile çalışır. IP adresleri saklanmaz, çerez yerleştirilmez, takip pikseli kullanılmaz. Sosyal medya butonları yalnızca yönlendirme amaçlı linklerdir; iframe gömme yoktur.
          </p>
        </div>
      </section>
    </main>);

}

function TermsPage({ lang, navigate }) {
  return (
    <main>
      <section style={{ padding: "var(--hp-section) var(--hp-pad-x) var(--hp-section-sm)" }}>
        <div className="hp-shell" style={{ padding: 0, maxWidth: 820 }}>
          <div className="hp-eyebrow" style={{ marginBottom: 28 }}>§ KULLANIM ŞARTLARI</div>
          <h1 className="hp-h1">Şartlar</h1>
          <p className="hp-body" style={{ marginTop: 32, color: "var(--hp-ink-dim)" }}>Son güncelleme: 2026.05.28</p>

          <h2 className="hp-h3" style={{ marginTop: 56, color: "var(--hp-gold)" }}>01 · İçerik</h2>
          <p className="hp-body" style={{ marginTop: 12 }}>
            Bu sitede yayınlanan tüm metin, görsel ve içeriklerin telif hakkı Hornpiper'a aittir. Yazılı izin alınmaksızın kopyalanamaz, ticari amaçla kullanılamaz.
          </p>

          <h2 className="hp-h3" style={{ marginTop: 32, color: "var(--hp-gold)" }}>02 · Hizmet</h2>
          <p className="hp-body" style={{ marginTop: 12 }}>
            Sitede yayınlanan hiçbir bilgi sözleşme önerisi değildir. Hizmet kapsamı, fiyatlandırma ve teslim süreleri yalnızca yazılı önerinin içeriğinde belirlenir.
          </p>

          <h2 className="hp-h3" style={{ marginTop: 32, color: "var(--hp-gold)" }}>03 · Sorumluluk</h2>
          <p className="hp-body" style={{ marginTop: 12 }}>
            Hornpiper, yazılı sözleşme dışında verilen sözlü, çevrimiçi veya bilgilendirme amaçlı içerikten dolayı sorumlu tutulamaz. İçgörü yazıları halka açık veri, hesaplama veya vakaya dayanır; tavsiye niteliği taşımaz.
          </p>

          <h2 className="hp-h3" style={{ marginTop: 32, color: "var(--hp-gold)" }}>04 · Uyuşmazlık</h2>
          <p className="hp-body" style={{ marginTop: 12 }}>
            Bu site ve hizmetlerden doğan uyuşmazlıklarda Türkiye Cumhuriyeti yasaları uygulanır. Yetkili mahkeme İstanbul Anadolu Mahkemeleri'dir.
          </p>
        </div>
      </section>
    </main>);

}

Object.assign(window, { SectorsPage, PrivacyPage, TermsPage });