// pages.jsx — /solutions /approach /products /insights /about /contact

// ── /solutions ──────────────────────────────────────────
function SolutionsPage({ 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>;
  // ── service-list primitives ──
  const SItem = ({ children }) =>
    <li style={{ display: "flex", alignItems: "baseline", gap: 10, padding: "9px 0", borderBottom: "1px solid var(--hp-line)", fontFamily: "var(--hp-body)", fontSize: 14.5, lineHeight: 1.5, color: "var(--hp-ink)" }}>
      <span aria-hidden="true" style={{ color: "var(--hp-green-3)", flexShrink: 0 }}>—</span>
      <span>{children}</span>
    </li>;
  const SList = ({ children }) => <ul style={{ listStyle: "none", margin: 0, padding: 0 }}>{children}</ul>;
  const GroupLabel = ({ children, top }) => <div className="hp-label" style={{ color: "var(--hp-ink-mute)", marginBottom: 6, marginTop: top ? 22 : 0 }}>{children}</div>;
  const Card = ({ id, name, tanim, kirilir, children }) =>
    <div id={id} style={{ background: "var(--hp-bg)", borderTop: "3px solid var(--hp-green-3)", padding: "34px 30px", display: "flex", flexDirection: "column" }}>
      <h3 style={{ fontFamily: "var(--hp-sans)", fontWeight: 600, fontSize: 26, letterSpacing: "-0.02em", margin: 0, color: "var(--hp-green-3)" }}>{name}</h3>
      <p style={{ fontFamily: "var(--hp-sans)", fontWeight: 600, fontSize: 16, lineHeight: 1.4, margin: "14px 0 0", color: "var(--hp-ink-strong)" }}>{tanim}</p>
      <div style={{ marginTop: 18, paddingTop: 16, borderTop: "1px solid var(--hp-line-strong)" }}>
        <GroupLabel>NE KIRILIR</GroupLabel>
        <p style={{ fontFamily: "var(--hp-body)", fontSize: 14.5, lineHeight: 1.55, margin: 0, color: "var(--hp-ink-dim)" }}>{kirilir}</p>
      </div>
      <div style={{ marginTop: 24 }}>{children}</div>
    </div>;

  return (
    <main>
      {/* HERO */}
      <section style={{ padding: "var(--hp-section) var(--hp-pad-x) var(--hp-section-sm)" }}>
        <div className="hp-shell" style={{ padding: 0 }}>
          <Eyebrow label="ÇÖZÜMLER" />
          <h1 className="hp-h1" style={{ maxWidth: "16ch" }}>Büyümeyi <span style={{ color: "var(--hp-green-3)" }}>üç alanda</span> çözeriz.</h1>
          <p className="hp-body-lg" style={{ marginTop: 32, maxWidth: 880, color: "var(--hp-ink)" }}>
            Demand, Conversion ve Systems. Bir büyüme problemi her zaman bu üçünden birinde başlar: ya talep yetersizdir, ya gelen talep karara dönmez, ya da büyüme ölçülemez ve sürdürülemez. İşe hangi alanın tıkandığını teşhis ederek başlarız.
          </p>
        </div>
      </section>

      {/* ÖZET GÖRSEL — akış şeması */}
      <section style={{ padding: "0 var(--hp-pad-x) var(--hp-section-sm)" }}>
        <div className="hp-shell" style={{ padding: 0 }}>
          <div style={{ border: "1px solid var(--hp-line-strong)", background: "var(--hp-bg-2)", padding: "clamp(20px, 3vw, 40px)" }}>
            <svg viewBox="0 0 1000 380" xmlns="http://www.w3.org/2000/svg" role="img"
              aria-label="GTM Advisory üç alanı okur; Demand, Conversion ve Systems birbirini besler, retention ve expansion büyümeyi döngüye sokar."
              style={{ display: "block", width: "100%", height: "auto" }}>
              <defs>
                <marker id="sol-arrow" markerWidth="9" markerHeight="9" refX="6" refY="3" orient="auto" markerUnits="userSpaceOnUse">
                  <path d="M0,0 L6,3 L0,6 Z" fill="var(--hp-green-3)" />
                </marker>
              </defs>
              {/* GTM advisory band */}
              <rect x="150" y="28" width="700" height="48" fill="rgba(64,157,112,0.06)" stroke="var(--hp-green-3)" strokeWidth="1" />
              <text x="500" y="57" textAnchor="middle" fontFamily="'Space Grotesk', sans-serif" fontSize="15" fontWeight="600" letterSpacing="0.06em" fill="var(--hp-green-3)">GTM ADVISORY · STRATEJİ VE TEŞHİS</text>
              {/* connectors band → blocks */}
              {[250, 500, 750].map((x) =>
                <line key={x} x1={x} y1="76" x2={x} y2="168" stroke="var(--hp-green-3)" strokeWidth="1" strokeDasharray="3 5" opacity="0.5" />
              )}
              {/* three blocks */}
              {[["Demand", "talep", 150], ["Conversion", "karar", 400], ["Systems", "ölçek + retention", 650]].map(([n, sub, x]) =>
                <g key={n}>
                  <rect x={x} y="168" width="200" height="96" fill="var(--hp-bg)" stroke="var(--hp-line-strong)" strokeWidth="1" />
                  <rect x={x} y="168" width="200" height="3" fill="var(--hp-green-3)" />
                  <text x={x + 100} y="212" textAnchor="middle" fontFamily="'Space Grotesk', sans-serif" fontSize="21" fontWeight="600" letterSpacing="-0.015em" fill="var(--hp-ink-strong)">{n}</text>
                  <text x={x + 100} y="238" textAnchor="middle" fontFamily="'Space Grotesk', sans-serif" fontSize="12" fontWeight="500" letterSpacing="0.02em" fill="var(--hp-green-3)">{sub}</text>
                </g>
              )}
              {/* forward arrows */}
              <line x1="352" y1="216" x2="396" y2="216" stroke="var(--hp-green-3)" strokeWidth="1.5" markerEnd="url(#sol-arrow)" />
              <line x1="602" y1="216" x2="646" y2="216" stroke="var(--hp-green-3)" strokeWidth="1.5" markerEnd="url(#sol-arrow)" />
              {/* return loop systems → demand */}
              <path d="M750,264 C750,348 250,348 250,266" fill="none" stroke="var(--hp-green-3)" strokeWidth="1.5" strokeDasharray="5 5" opacity="0.7" markerEnd="url(#sol-arrow)" />
              <text x="500" y="372" textAnchor="middle" fontFamily="'Space Grotesk', sans-serif" fontSize="12.5" fontWeight="500" letterSpacing="0.02em" fill="var(--hp-green-3)">retention &amp; expansion büyümeyi besler</text>
            </svg>
          </div>
        </div>
      </section>

      {/* KARTLAR */}
      <section style={{ padding: "0 var(--hp-pad-x) var(--hp-section)" }}>
        <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)" }}>

            <Card id="demand" name="Demand"
              tanim="Doğru kitlede talep yaratır, var olan talebi yakalarsınız."
              kirilir={<>Lead gelmiyor ya da niteliksiz; <G>CAC</G> kontrolden çıkıyor.</>}>
              <GroupLabel>HİZMETLER</GroupLabel>
              <SList>
                <SItem><G>ICP</G> ve konumlandırma</SItem>
                <SItem>İçerik, <G>SEO</G> ve <G>AEO</G></SItem>
                <SItem><G>Performans reklamları</G> (Google, Meta, LinkedIn)</SItem>
                <SItem><G>Outbound</G> ve <G>ABM</G></SItem>
                <SItem>Kanal stratejisi ve <G>CAC/LTV</G> modelleme</SItem>
              </SList>
            </Card>

            <Card id="conversion" name="Conversion"
              tanim="Gelen ilgiyi müşteriye ve gelire çevirirsiniz."
              kirilir={<>Trafik var, <G>dönüşüm</G> yok; funnel sızdırıyor.</>}>
              <GroupLabel>HİZMETLER</GroupLabel>
              <SList>
                <SItem>Funnel tasarımı ve haritalama</SItem>
                <SItem><G>Landing page</G> ve teklif mimarisi</SItem>
                <SItem><G>CRO</G> ve <G>A/B test</G></SItem>
                <SItem><G>Lead scoring</G> ve qualification</SItem>
                <SItem><G>Lead nurturing</G></SItem>
              </SList>
            </Card>

            <Card id="systems" name="Systems"
              tanim="Büyümeyi ölçülebilir, tekrarlanabilir ve sürdürülebilir kılar; mevcut müşteriden büyütür."
              kirilir={<>Veri dağınık, büyüme kişiye bağlı; müşteri sessizce kaçıyor.</>}>
              <GroupLabel>VERİ &amp; MÜHENDİSLİK</GroupLabel>
              <SList>
                <SItem><G>CRM</G> ve <G>ERP</G> entegrasyonu</SItem>
                <SItem><G>Attribution</G> ve dashboard</SItem>
                <SItem><G>Pazarlama otomasyonu</G></SItem>
                <SItem><G>API entegrasyonları</G> ve <G>custom yazılım</G></SItem>
              </SList>
              <GroupLabel top>RETENTION &amp; YAŞAM DÖNGÜSÜ</GroupLabel>
              <SList>
                <SItem><G>Onboarding</G> ve aktivasyon</SItem>
                <SItem><G>Lifecycle automation</G></SItem>
                <SItem><G>Churn</G> tahmini ve at-risk uyarı</SItem>
                <SItem><G>Upsell</G> ve <G>expansion</G> (<G>NRR</G>)</SItem>
              </SList>
            </Card>

          </div>
        </div>
      </section>

      {/* MATRIX — kapsama kanıtı */}
      <section style={{ padding: "var(--hp-section) var(--hp-pad-x)", borderTop: "1px solid var(--hp-line)" }}>
        <div className="hp-shell" style={{ padding: 0 }}>
          <h2 className="hp-h2" style={{ fontSize: "clamp(30px, 3.4vw, 46px)", margin: 0, maxWidth: "20ch" }}>Her alanı <span style={{ color: "var(--hp-green-3)" }}>dört fazda</span> ele alırız.</h2>
          <p className="hp-body-lg" style={{ marginTop: 16, marginBottom: 40, maxWidth: 720, color: "var(--hp-ink-dim)" }}>
            Demand, Conversion ve Systems; Diagnose, Design, Implement ve Optimize.
          </p>
          <div style={{ border: "1px solid var(--hp-line-strong)", padding: 4, background: "var(--hp-bg-2)" }}>
            <HeroMatrix lang={lang} />
          </div>
          <a href="#/approach" onClick={(e) => {e.preventDefault();navigate("/approach");}} className="hp-inline" style={{ display: "inline-block", marginTop: 24, fontFamily: "var(--hp-sans)", fontWeight: 600, fontSize: 14 }}>
            Süreci Yaklaşım'da görün →
          </a>
        </div>
      </section>

      {/* GTM ADVISORY — ayrı hizmet */}
      <section style={{ padding: "var(--hp-section) var(--hp-pad-x)", borderTop: "1px solid var(--hp-line)", background: "var(--hp-bg-2)" }}>
        <div className="hp-shell" style={{ padding: 0 }}>
          <div style={{ border: "1px solid var(--hp-green-3)", background: "var(--hp-tint-green)", padding: "clamp(32px, 4vw, 56px)", position: "relative", overflow: "hidden" }}>
            <span style={{ position: "absolute", top: 0, left: 0, right: 0, height: 3, background: "var(--hp-green-3)" }} />
            <div className="hp-split" style={{ display: "grid", gridTemplateColumns: "0.8fr 1.4fr", gap: 64, alignItems: "start" }}>
              <div>
                <span className="hp-label" style={{ color: "var(--hp-green-3)" }}>AYRI BİR HİZMET</span>
                <h2 className="hp-h3" style={{ fontSize: 34, margin: "18px 0 0", color: "var(--hp-ink-strong)" }}>GTM Advisory</h2>
                <p style={{ fontFamily: "var(--hp-sans)", fontWeight: 600, fontSize: 18, letterSpacing: "-0.015em", lineHeight: 1.3, margin: "16px 0 0", color: "var(--hp-ink-strong)" }}>Strateji ve mimari: uygulamadan önce, uygulamadan bağımsız.</p>
              </div>
              <div>
                <p style={{ fontFamily: "var(--hp-body)", fontSize: 17, lineHeight: 1.78, margin: 0, color: "var(--hp-ink)" }}>
                  Büyüme yapınızı uçtan uca okur, darboğazın hangi alanda olduğunu teşhis eder, üç alanın işinize özel nasıl bağlanacağını bir <G>büyüme mimarisi</G> olarak çıkarırız.
                </p>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 22 }}>
                  {["bottleneck haritası", "öncelikli yol haritası", "hedef metrikler"].map((c) =>
                    <span key={c} style={{ fontFamily: "var(--hp-mono)", fontSize: 11.5, letterSpacing: "0.02em", padding: "6px 12px", border: "1px solid var(--hp-green-3)", color: "var(--hp-green-3)", whiteSpace: "nowrap" }}>{c}</span>
                  )}
                </div>
                <p style={{ fontFamily: "var(--hp-body)", fontSize: 15, lineHeight: 1.7, margin: "22px 0 0", color: "var(--hp-ink-dim)" }}>
                  Mimariyi ister biz kurarız, ister ekibiniz. Her anlaşma buradan başlar; tek başına da alınabilir. Nasıl çalıştığımızı <a href="#/approach" onClick={(e) => {e.preventDefault();navigate("/approach");}} className="hp-inline">Yaklaşım</a> sayfasında görebilirsiniz.
                </p>
              </div>
            </div>
          </div>
        </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" }}>
            Probleminizin hangi <span style={{ color: "var(--hp-green-3)" }}>alanda</span> olduğunu birlikte 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>);

}

// ── /approach ───────────────────────────────────────────
function ApproachPage({ 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 overview = [
  { p: "Diagnose", l: "Büyüme bottleneck'ini tanımlar." },
  { p: "Design", l: "Mimariyi ve hipotez sırasını kurar." },
  { p: "Implement", l: "Mimariyi çalışan sisteme çevirir." },
  { p: "Optimize", l: "Ölçer, kalibre eder, compound eder." }];

  const phases = [
  { name: "Diagnose",
    exp: "Mevcut büyüme yapınız uçtan uca okunur. Growth model çıkarılır (acquisition, activation, retention, referral, revenue); GTM, funnel, CRM, automation, analytics ve operasyon akışları birlikte incelenir. Tracking ve attribution kurulumunun ölçüme hazır olup olmadığı denetlenir. Darboğaz hangi katmanda, sayıyla gösterilir.",
    methods: ["Growth model", "Funnel audit", "Veri & tracking denetimi", "Attribution hazırlığı", "North Star & metric tree", "Hipotez üretimi"],
    out: "Growth bottleneck haritası, öncelik sırası, önerilen müdahale alanı, önceliklendirilmiş hipotez listesi." },
  { name: "Design",
    exp: "Bottleneck'e göre mimari yazılır. Hangi kanalın, sistemin, verinin ve operasyon akışının hangi sırayla ele alınacağı netleşir. Hipotezler ICE ile önceliklendirilir; KPI ve metric tree tanımlanır; veri kaynaklarından dashboard'a uzanan sistem mimarisi çizilir.",
    methods: ["Mimari belge", "KPI / metric tree", "ICE önceliklendirme", "Hipotez backlog", "Sistem & veri mimarisi", "Experiment roadmap"],
    out: "Mimari belge, scope, KPI seti, önceliklendirilmiş backlog, teslim planı." },
  { name: "Implement",
    exp: "Mimari çalışan sisteme çevrilir. Kampanya, landing page, CRM akışı, automation, dashboard, data flow ve entegrasyonlar scope'a göre kurulur. Her bileşen modüler, dokümante ve güvenilir inşa edilir; ölçüm baştan gömülür.",
    methods: ["Kampanya & landing", "CRM & lifecycle", "Automation", "Data pipeline & entegrasyon", "Dashboard", "Tracking & attribution"],
    out: "Çalışan sistem, dokümante edilmiş workflow, ölçülebilir teslimler." },
  { name: "Optimize",
    exp: "Sistem kalibre edilir. Haftalık ritimde deneyler yürütülür; hangi kararın fayda ürettiği, hangi funnel noktasının sızdırdığı ve hangi operasyon adımının ölçeklenmeyi kestiği takip edilir. İşe yarayan compound edilir, sızdıran kapatılır; öğrenilenler modele geri beslenir.",
    methods: ["Experiment velocity", "Haftalık ritim", "Karar günlüğü", "CRO", "Compounding", "Model güncelleme"],
    out: "Karar günlüğü, performans okuması, iyileştirme backlog'u." }];

  return (
    <main>
      {/* HERO */}
      <section style={{ padding: "var(--hp-section) var(--hp-pad-x) var(--hp-section-sm)" }}>
        <div className="hp-shell" style={{ padding: 0 }}>
          <Eyebrow label="YAKLAŞIM" />
          <h1 className="hp-h1" style={{ maxWidth: "16ch" }}><span style={{ color: "var(--hp-green-3)" }}>Hornpiper</span> ile çalışmak</h1>
          <p className="hp-body-lg" style={{ marginTop: 32, maxWidth: 880, color: "var(--hp-ink)" }} data-comment-anchor="8920c7f0f5-p-118-11">
            Her strateji bir disiplinle ilerler: <G>DDIO</G>. Büyümeyi kampanya olarak değil, sistem olarak kurarız. Dört faz boyunca yapınızı önce <G>okuruz</G>, <G>mimarisini kurarız</G>, <G>çalışan sisteme çeviririz</G> ve <G>kalibre ederiz</G>.
          </p>
          <p className="hp-body-lg" style={{ marginTop: 24, maxWidth: 760, color: "var(--hp-ink-dim)", borderLeft: "2px solid var(--hp-green-3)", paddingLeft: 24 }}>
            Çalışmayan bir motoru otomatikleştirmek, hatayı ölçeklendirir. Bu yüzden önce <G>teşhis</G>, sonra inşa. Kampanya değil; modüler, dokümante, ölçülebilir ve kişiye bağlı olmayan bir sistem kurarız.
          </p>
        </div>
      </section>

      {/* DDIO OVERVIEW */}
      <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 }}>
          <Eyebrow label="DDIO METODOLOJİSİ" />
          <div className="hp-grid-4" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 1, background: "var(--hp-line-strong)", border: "1px solid var(--hp-line-strong)" }}>
            {overview.map((o, i) =>
            <div key={o.p} style={{ background: "var(--hp-bg)", borderTop: "3px solid var(--hp-green-3)", padding: "32px 28px", display: "flex", flexDirection: "column", gap: 12, minHeight: 180 }}>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                  <span style={{ fontFamily: "var(--hp-sans)", fontWeight: 600, fontSize: 24, letterSpacing: "-0.02em", color: "var(--hp-green-3)" }}>{o.p}</span>
                  {i < overview.length - 1 &&
                <span aria-hidden="true" style={{ color: "var(--hp-ink-mute)", fontSize: 18 }}>→</span>
                }
                </div>
                <p className="hp-body" style={{ margin: 0, fontSize: 15, lineHeight: 1.55, color: "var(--hp-ink-dim)" }}>{o.l}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* FAZ DETAYLARI */}
      {phases.map((s, i) =>
      <section key={s.name} style={{ padding: "var(--hp-section) var(--hp-pad-x)", borderTop: "1px solid var(--hp-line)", background: i % 2 === 0 ? "var(--hp-bg-2)" : "transparent" }}>
          <div className="hp-shell hp-split" style={{ padding: 0, display: "grid", gridTemplateColumns: "0.8fr 1.4fr", gap: 80, alignItems: "start" }}>
            <div>
              <h2 className="hp-h2" style={{ fontSize: "clamp(34px, 4vw, 52px)", margin: 0, color: "var(--hp-green-3)" }}>{s.name}</h2>
              <div style={{ marginTop: 28, padding: "24px 24px", border: "1px solid var(--hp-green-3)", background: "var(--hp-tint-green)" }}>
                <div className="hp-label" style={{ color: "var(--hp-green-3)" }}>ÇIKTI</div>
                <p className="hp-body" style={{ margin: "10px 0 0", color: "var(--hp-ink-strong)", fontWeight: 500, lineHeight: 1.55 }}>{s.out}</p>
              </div>
            </div>
            <div>
              <div className="hp-label" style={{ color: "var(--hp-ink-mute)" }}>NEYİ YAŞARSINIZ</div>
              <p className="hp-body-lg" style={{ marginTop: 14, color: "var(--hp-ink)" }}>{s.exp}</p>
              <div className="hp-label" style={{ color: "var(--hp-ink-mute)", marginTop: 32, marginBottom: 14 }}>YÖNTEM</div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                {s.methods.map((c) =>
                <span key={c} style={{ fontFamily: "var(--hp-mono)", fontSize: 11, letterSpacing: "0.02em", padding: "5px 10px", border: "1px solid var(--hp-line-strong)", color: "var(--hp-ink)", whiteSpace: "nowrap" }}>{c}</span>
                )}
              </div>
            </div>
          </div>
        </section>
      )}

      {/* MATRIX */}
      <section style={{ padding: "var(--hp-section) var(--hp-pad-x)", borderTop: "1px solid var(--hp-line)" }}>
        <div className="hp-shell" style={{ padding: 0 }}>
          <div style={{ border: "1px solid var(--hp-line-strong)", padding: 4, background: "var(--hp-bg-2)" }}>
            <HeroMatrix lang={lang} />
          </div>
        </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" }}>
            <span style={{ color: "var(--hp-green-3)" }}>Diagnose</span> ile başlayın. Geri kalanı yapısaldır.
          </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>);

}

// ── /products ──────────────────────────────────────────
function ProductsPage({ lang, navigate }) {
  const SHOW_PROTOTYPE_STATUS = true; // ürünler yayına alınınca false
  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 tools = [
  { name: "Kastelan", badge: "R&D · BI Engine",
    slogan: "Büyümenizin komuta merkezi.",
    body: <>Kastelan, dağınık büyüme verinizi tek <G>iş zekası</G> katmanında birleştiren bir <G>analitik ve raporlama</G> motorudur. GA4, Meta, reklam performansı, satış, CRM ve ERP verisini tek <G>dashboard</G>'da toplar; <G>insight</G> ve <G>attribution</G> üretir: ne oldu, nerede kırıldı, hangi metrik sapıyor.</> },
  { name: "Luna AI", badge: "R&D · AI Agent",
    slogan: "Sorularınızı kararlara çevirin.",
    body: <>Luna AI, Kastelan'ın analizini okuyan bir <G>yapay zeka asistanı</G> ve agent katmanıdır. Sorularınızı <G>doğal dilde</G> yorumlar, sistemi tarar, cevap üretir ve gerektiğinde aksiyon alır. <G>Konuşma tabanlı</G> arayüzle analiz ile aksiyon arasındaki mesafeyi kapatır.</> },
  { name: "Harvester", badge: "R&D · Data Mining",
    slogan: "Rakiplerinizi iş gücüne çevirin.",
    body: <>Harvester, dış kaynaklardan <G>veri madenciliği</G> ve <G>otomatik içerik üretimi</G> yapar. <G>Rakip analizi</G> ve pazar sinyallerini toplar; seçtiğiniz bir kaynaktan markanızın sesine ve <G>SEO</G>'ya uygun içerik ve raporlar çıkarır. <G>Makine öğrenmesi</G> ile ham veriyi kullanılabilir çıktıya çevirir.</> }];

  return (
    <main>
      {/* HERO */}
      <section style={{ padding: "var(--hp-section) var(--hp-pad-x) var(--hp-section-sm)" }}>
        <div className="hp-shell" style={{ padding: 0 }}>
          <Eyebrow label="TEKNOLOJİ" />
          <h1 className="hp-h1" style={{ maxWidth: "18ch" }}><span style={{ color: "var(--hp-green-3)" }}>Çözdüğümüz</span> problemleri <span style={{ color: "var(--hp-green-3)" }}>ürüne</span> çeviriyoruz.</h1>
          <p className="hp-body-lg" style={{ marginTop: 32, maxWidth: 880, color: "var(--hp-ink)" }}>
            <span style={{ color: "var(--hp-green-3)", fontWeight: 500 }}>Hornpiper</span> sadece strateji önermez; sahada çözdüğü problemleri kendi <G>Growth araçlarına</G> dönüştürür. Kastelan, Luna AI ve Harvester bu <G>mühendislik, veri bilimi ve AI</G> kasının çıktısıdır. Standart araç yetmediğinde size özel çözümler de geliştiririz.
          </p>
          {SHOW_PROTOTYPE_STATUS &&
          <p style={{ marginTop: 20, fontFamily: "var(--hp-mono)", fontSize: 14, letterSpacing: "0.02em", lineHeight: 1.6, color: "var(--hp-ink-mute)" }}>
            Ar-Ge projesi kapsamında olan araçlarımız, şu anda prototip aşamasındadır.
          </p>
          }
        </div>
      </section>

      {/* 3 ARAÇ */}
      <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)" }}>
            {tools.map((t) =>
            <div key={t.name} role="link" tabIndex={0}
            onClick={() => {/* placeholder — /technology/[slug] ileride */}}
            style={{
              background: "var(--hp-bg)", borderTop: "3px solid var(--hp-green-3)",
              padding: "40px 32px", display: "flex", flexDirection: "column",
              minHeight: 440, cursor: "pointer", transition: "background 140ms, transform 140ms, box-shadow 140ms"
            }}
            onMouseEnter={(e) => {e.currentTarget.style.background = "var(--hp-bg-3)";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";}}>
                <div style={{ marginBottom: 24 }}>
                  <span style={{ fontFamily: "var(--hp-mono)", fontSize: 10, letterSpacing: "0.08em", textTransform: "uppercase", padding: "4px 9px", lineHeight: 1.9, border: "1px solid var(--hp-line-strong)", color: "var(--hp-ink-strong)", boxDecorationBreak: "clone", WebkitBoxDecorationBreak: "clone" }}>{t.badge}</span>
                </div>
                <div className="hp-h2" style={{ fontSize: 30, color: "var(--hp-green-3)", marginBottom: 10 }}>{t.name}</div>
                <div style={{ fontFamily: "var(--hp-sans)", fontWeight: 600, fontSize: 22, letterSpacing: "-0.02em", lineHeight: 1.25, color: "var(--hp-ink-strong)", marginBottom: 16 }}>{t.slogan}</div>
                <p className="hp-body" style={{ margin: 0, fontSize: 14.5, lineHeight: 1.6, color: "var(--hp-ink-dim)" }}>{t.body}</p>
                <div style={{ marginTop: "auto", paddingTop: 28 }}>
                  {SHOW_PROTOTYPE_STATUS &&
                <span style={{ display: "inline-block", marginBottom: 18, whiteSpace: "nowrap", fontFamily: "var(--hp-mono)", fontSize: 10, letterSpacing: "0.08em", textTransform: "uppercase", padding: "4px 10px", border: "1px solid var(--hp-green-3)", color: "var(--hp-green-3)" }}>Prototip · Yakında</span>
                }
                  <div className="hp-label" style={{ color: "var(--hp-green-3)" }}>İncele →</div>
                </div>
              </div>
            )}
          </div>

          <p className="hp-body-lg" style={{ marginTop: 48, maxWidth: 880, color: "var(--hp-ink)" }} data-comment-anchor="a8fc9f09c7-p-205-11">
            Üçü farklı işi yapar: <G>Harvester</G> dışarıdan veri ve içerik üretir, <G>Kastelan</G> tüm verinizi tek BI katmanında analiz eder, <G>Luna AI</G> bu analizi konuşulabilir ve uygulanabilir kılar.
          </p>
        </div>
      </section>

      {/* CUSTOM ÇÖZÜMLER */}
      <section style={{ padding: "var(--hp-section) var(--hp-pad-x)", borderTop: "1px solid var(--hp-line)", background: "var(--hp-bg-2)" }}>
        <div className="hp-shell hp-split" style={{ padding: 0, display: "grid", gridTemplateColumns: "0.8fr 1.4fr", gap: 80, alignItems: "start" }}>
          <h2 className="hp-h3" style={{ fontSize: 30, margin: 0, maxWidth: "16ch", color: "var(--hp-green-3)" }}>Hazır araç yetmediğinde, size özel geliştiririz.</h2>
          <p className="hp-body-lg" style={{ margin: 0, color: "var(--hp-ink)" }}>
            Üç araç standart ihtiyaçları karşılar; ama her büyüme problemi standart değildir. Gerektiğinde <G>özel yazılım geliştirme</G>, <G>sistem entegrasyonu</G> ve <G>süreç otomasyonu</G> yaparız: CRM ve ERP entegrasyonları, custom dashboard'lar, <G>API entegrasyonları</G> ve veri akışları. Mühendislik kasımız tam da bunun için var.
          </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" }}>
            Büyüme sisteminizin <span style={{ color: "var(--hp-green-3)" }}>teknoloji katmanını</span> birlikte kuralım.
          </h2>
          <div style={{ marginTop: 44 }}>
            <a href="#/contact" onClick={(e) => {e.preventDefault();navigate("/contact");}}
            className="hp-btn" style={{ fontSize: 16, padding: "20px 32px" }}>
              Görüşme Talebi Gönder <ArrowR size={16} />
            </a>
          </div>
        </div>
      </section>
    </main>);

}

// ── /insights ──────────────────────────────────────────
function InsightsPage({ 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 cats = ["Tümü", "Strateji & Yaklaşım", "Demand", "Conversion", "Systems"];
  const posts = [
    { id: "p1", cat: "Strateji & Yaklaşım", title: "Büyüme problemi çoğu zaman göründüğü yerde değildir.", excerpt: "Yüzeydeki semptom ile yapısal darboğaz nadiren aynı katmandadır. Brief'i uygulamaya almadan önce sorunun gerçekte nerede kırıldığını okumak gerekir.", date: "Mayıs 2026", read: "6 dk",
      body: [
        { p: "Çoğu büyüme talebi bir semptomla gelir: \"Lead az\", \"reklam pahalı\", \"satış düşük\". Semptom gerçektir, ama nedeni değildir. Aynı semptom üç farklı katmanda kırılan bir sistemden de gelebilir; doğru müdahale ancak hangi katmanın sızdırdığı okunduktan sonra mümkündür." },
        { h: "Semptom katman değildir", p: "Düşük dönüşüm bir Demand problemi gibi görünür, oysa çoğu zaman Conversion katmanında offer ve funnel yapısında kırılır. Yüksek CAC bir kanal problemi sanılır, oysa attribution kurulmadığı için hangi kanalın gerçekten kazandırdığı bilinmiyordur. Katmanı semptoma göre seçmek, yanlış yere bütçe akıtmaktır." },
        { h: "Önce okuruz, sonra öneririz", p: "Hornpiper bir brief'i doğrudan uygulamaya almadan önce mevcut büyüme yapısını okur: Demand, Conversion ve Systems katmanları birlikte incelenir, darboğazın hangi hücrede olduğu sayıyla gösterilir. Teşhis, hizmet listesinden değil; yapının kendisinden çıkar." },
        { h: "Doğru müdahale tek bir yerden başlar", p: "Üç katman aynı anda elden geçirilmez. Bottleneck hangi hücrede ise müdahale oradan başlar; gerisi sıraya girer. Bu, hem bütçeyi korur hem de iyileştirmenin gerçekten görünür olmasını sağlar." },
      ] },
    { id: "p2", cat: "Demand", title: "Pazarın çoğu henüz alıcı değil: talep yaratmanın matematiği.", excerpt: "Yalnızca anında alıma hazır kesime oynamak CAC'i şişirir ve büyümeyi tavanlar. Talep hem yaratılmalı hem yakalanmalı.", date: "Mayıs 2026", read: "7 dk",
      body: [
        { p: "Herhangi bir pazarda, şu an satın almaya hazır olanların oranı küçüktür. Geri kalan büyük kesim ya problemini henüz tanımlamamıştır ya da çözüm arayışına girmemiştir. Sadece hazır kesime oynayan bir strateji, dar bir havuzda artan rekabetle CAC'i yukarı iter." },
        { h: "Yaratmak ve yakalamak ayrı işlerdir", p: "Talep yakalama (SEM, retargeting, outbound) var olan niyeti hasat eder. Talep yaratma (içerik, brand, organik ve paid sosyal) ise henüz alıcı olmayan kesimde niyeti inşa eder. İkisi farklı metriklerle ölçülür ve farklı zaman ufkuyla çalışır; birini diğerinin yerine koymak büyümeyi tavanlar." },
        { h: "Tek CAC/LTV mantığı", p: "Kanallar birbirinden bağımsız optimize edildiğinde, yaratma faaliyetinin yakalama performansına katkısı görünmez olur. Doğru kurulum, kanalları tek bir CAC/LTV çerçevesinde birbirine bağlar; brand'in arama hacmine, içeriğin dönüşüm oranına etkisi okunur hale gelir." },
      ] },
    { id: "p3", cat: "Conversion", title: "Funnel nereden sızıyor? CRO'dan önceki beş soru.", excerpt: "Test kurmadan önce funnel'ın hangi aşamasında kohort tutarlılığının kaybolduğunu görmek, kazanan deneylerin ön koşuludur.", date: "Nisan 2026", read: "5 dk",
      body: [
        { p: "CRO çoğu zaman buton rengiyle başlatılır ve sonuç üretmez. Çünkü asıl sızıntı genellikle test edilen yerde değildir. Test kurmadan önce funnel'ı uçtan uca haritalamak ve hangi aşamada kohort tutarlılığının bozulduğunu görmek gerekir." },
        { h: "Beş soru", p: "ICP yazılı mı? Mesaj kanaldan kanala aynı mı? Funnel aşamaları tanımlı mı? Kalifikasyon eşiği belirli mi? Retention eğrisi okunuyor mu? Beş sorudan en az üçüne hayır yanıtı, CRO'dan önce yapısal bir eksik olduğunu gösterir." },
        { h: "Önce yapı, sonra test", p: "Offer net, landing güçlü ve mesaj-pazar uyumu kurulduktan sonra yapılan testler bileşik kazanır. Yapı kurulmadan yapılan testler ise yalnızca gürültü ölçer." },
      ] },
    { id: "p4", cat: "Systems", title: "Attribution'ı vendor raporuna bırakmak neden yanıltır.", excerpt: "Her vendor conversion'ı kendi modeline göre sayar; toplam sapma %30'u geçer. Tek gerçek warehouse'ta kurulur.", date: "Nisan 2026", read: "8 dk",
      body: [
        { p: "Üç farklı reklam platformu aynı dönüşümü kendi attribution modeline göre kendine yazar. Raporları topladığınızda gerçek conversion sayısının çok üstüne çıkarsınız. Bu bir hata değil; her platformun kendi lehine kurguladığı bir satış argümanıdır." },
        { h: "Warehouse-native çözüm", p: "Server-side event akışı warehouse'a yazılır; anonim ve kayıtlı kimlikler identity stitching ile birleşir. Attribution modeli veri katmanında, sürümlenebilir biçimde tanımlanır. Böylece kaynak tek olur, model şeffaf kalır." },
        { h: "Tek gerçek kaynağı", p: "Vendor raporu bir referans noktası olarak kalır; karar ise warehouse'taki tek gerçeğe dayanır. Hangi kanalın gerçekten kazandırdığı ancak bu kurulumdan sonra güvenle söylenebilir." },
      ] },
    { id: "p5", cat: "Systems", title: "Churn'ün büyük kısmı ilk hafta yaşanır.", excerpt: "Aktivasyon kurulmadan retention öngörülemez. Yeni müşteri pahalıyken mevcut müşteriyi sessizce kaybetmek en pahalı sızıntıdır.", date: "Mart 2026", read: "6 dk",
      body: [
        { p: "Yeni müşteri kazanmak, mevcut müşteriyi elde tutmaktan kat kat pahalıdır. Buna rağmen çoğu büyüme bütçesi kazanıma akar, retention ise hijyen işi sayılır. Oysa churn'ün büyük kısmı ilk günlerde, aktivasyon kurulmadığı için yaşanır." },
        { h: "Aktivasyon ölçülmeden retention öngörülemez", p: "Kullanıcının değeri ilk kez deneyimlediği an (aktivasyon) tanımlı değilse, onboarding'i iyileştirmek körlemesinedir. Aktivasyon eşiği belirlenir, ölçülür ve onboarding bu eşiğe göre kurulur." },
        { h: "Retention en ucuz büyüme kaldıracı", p: "Lifecycle automation, at-risk erken uyarı, expansion ve win-back birlikte kurgulandığında, retention bir maliyet kalemi olmaktan çıkıp en ucuz büyüme kaynağına dönüşür." },
      ] },
    { id: "p6", cat: "Strateji & Yaklaşım", title: "DDIO: önce teşhis, sonra inşa.", excerpt: "Çalışmayan bir motoru otomatikleştirmek hatayı ölçeklendirir. Tasarımdan önce karar, uygulamadan önce mimari gelir.", date: "Mart 2026", read: "5 dk",
      body: [
        { p: "DDIO bir süreç şeması değil, bir disiplindir: tekliften önce tanı, tasarımdan önce karar, uygulamadan önce mimari, optimizasyondan önce ölçüm. Sıra atlandığında sistem değil, semptom üretilir." },
        { h: "Dört faz", p: "Diagnose mevcut yapıyı okur. Design mimariyi ve hipotez sırasını belirler. Implement mimariyi çalışan sisteme çevirir. Optimize zamanla kalibre eder ve compound eder. Her faz bir öncekinin çıktısına dayanır." },
        { h: "Otomasyon hatayı ölçeklendirir", p: "Çalışmayan bir süreci otomatikleştirmek, yalnızca hatayı daha hızlı tekrarlatır. Bu yüzden önce teşhis, sonra inşa. Kampanya değil; modüler, dokümante ve ölçülebilir bir sistem kurarız." },
      ] },
    { id: "p7", cat: "Demand", title: "ICP yazılı değilse kanal seçimi tesadüftür.", excerpt: "Kime sattığını yazılı tarif edemeyen şirkette paid bütçe vergiye dönüşür. Konumlandırma kanaldan önce gelir.", date: "Şubat 2026", read: "4 dk",
      body: [
        { p: "Kanal seçimi çoğu zaman \"rakip oradaydı\" ya da \"ajans önerdi\" diye yapılır. Oysa kanal, kitlenin nerede olduğuna ve mesajın ne olduğuna bağlıdır. ICP yazılı değilse, kanal seçimi tesadüftür ve bütçe sızdırır." },
        { h: "Konumlandırma kanaldan önce gelir", p: "Kime, hangi problemde, hangi alternatife karşı sattığınız netleşmeden hiçbir kanal verimli çalışmaz. ICP ve konumlandırma yazılı hale geldiğinde, kanal karması bir tahmin değil, bir sonuç olur." },
        { h: "Yazılı olmak test edilebilir olmaktır", p: "Yazılı bir ICP, ekibin ortak bir hedefe nişan almasını ve mesajın kanaldan kanala tutarlı kalmasını sağlar. Test edilebilir, geliştirilebilir ve devredilebilir olur." },
      ] },
  ];
  const [active, setActive] = React.useState("Tümü");
  const [sel, setSel] = React.useState(null);
  const filtered = active === "Tümü" ? posts : posts.filter((p) => p.cat === active);
  const featured = filtered[0];
  const rest = filtered.slice(1);
  const Tag = ({ children }) => <span style={{ fontFamily: "var(--hp-mono)", fontSize: 10.5, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--hp-green-3)" }}>{children}</span>;
  const Meta = ({ p }) => <div style={{ fontFamily: "var(--hp-mono)", fontSize: 11.5, letterSpacing: "0.03em", color: "var(--hp-ink-mute)" }}>Hornpiper · {p.date} · {p.read}</div>;

  // ── Article detail view ──
  if (sel) {
    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, margin: "0 auto" }}>
            <button onClick={() => setSel(null)} style={{ cursor: "pointer", background: "none", border: "none", padding: 0, marginBottom: 32, fontFamily: "var(--hp-mono)", fontSize: 12, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--hp-green-3)" }}>← İçgörüler</button>
            <div style={{ marginBottom: 18 }}><Tag>{sel.cat}</Tag></div>
            <h1 style={{ fontFamily: "var(--hp-sans)", fontWeight: 700, fontSize: "clamp(32px, 4vw, 56px)", letterSpacing: "-0.025em", lineHeight: 1.1, margin: 0, color: "var(--hp-ink-strong)" }}>{sel.title}</h1>
            <div style={{ marginTop: 22 }}><Meta p={sel} /></div>
          </div>
        </section>
        <section style={{ padding: "0 var(--hp-pad-x)" }}>
          <div className="hp-shell" style={{ padding: 0, maxWidth: 980, margin: "0 auto" }}>
            <img src={`covers/insight-${sel.id}.png`} alt="" style={{ display: "block", width: "100%", height: "auto", border: "1px solid var(--hp-line-strong)" }} />
          </div>
        </section>
        <section style={{ padding: "var(--hp-section-sm) var(--hp-pad-x) var(--hp-section)" }}>
          <div className="hp-shell" style={{ padding: 0, maxWidth: 760, margin: "0 auto" }}>
            {sel.body.map((s, i) => (
              <div key={i} style={{ marginTop: i === 0 ? 0 : 36 }}>
                {s.h && <h2 style={{ fontFamily: "var(--hp-sans)", fontWeight: 600, fontSize: 24, letterSpacing: "-0.015em", margin: "0 0 14px", color: "var(--hp-ink-strong)" }}><span style={{ color: "var(--hp-green-3)" }}>—</span> {s.h}</h2>}
                <p style={{ fontFamily: "var(--hp-body)", fontSize: 17, lineHeight: 1.75, margin: 0, color: i === 0 ? "var(--hp-ink)" : "var(--hp-ink-dim)" }}>{s.p}</p>
              </div>
            ))}
            <div style={{ marginTop: 48, paddingTop: 32, borderTop: "1px solid var(--hp-line-strong)" }}>
              <a href="#/contact" onClick={(e) => {e.preventDefault();navigate("/contact");}} className="hp-btn">
                Diagnose Talebi Gönder <ArrowR />
              </a>
            </div>
          </div>
        </section>
      </main>);
  }

  return (
    <main>
      {/* HERO */}
      <section style={{ padding: "var(--hp-section) var(--hp-pad-x) var(--hp-section-sm)" }}>
        <div className="hp-shell" style={{ padding: 0 }}>
          <Eyebrow label="İÇGÖRÜLER" />
          <h1 className="hp-h1" style={{ maxWidth: "16ch" }}>Büyüme üzerine, <span style={{ color: "var(--hp-green-3)" }}>mühendis gözüyle</span>.</h1>
          <p className="hp-body-lg" style={{ marginTop: 32, maxWidth: 820, color: "var(--hp-ink)" }}>
            Demand, Conversion ve Systems üzerine sahadan notlar. Growth hacking sloganı değil; <G>teşhise, veriye ve sisteme</G> dayalı, uygulanabilir yazılar.
          </p>
          {/* KATEGORİ FİLTRESİ */}
          <div style={{ display: "flex", flexWrap: "wrap", gap: 28, marginTop: 44, borderBottom: "1px solid var(--hp-line-strong)", paddingBottom: 0 }}>
            {cats.map((c) => {
              const on = active === c;
              return (
                <button key={c} onClick={() => setActive(c)}
                  style={{ cursor: "pointer", background: "none", border: "none", padding: "0 0 14px", marginBottom: -1,
                    fontFamily: "var(--hp-sans)", fontSize: 14, fontWeight: 500,
                    color: on ? "var(--hp-green-3)" : "var(--hp-ink-dim)",
                    borderBottom: on ? "2px solid var(--hp-green-3)" : "2px solid transparent", transition: "color 120ms" }}>
                  {c}
                </button>
              );
            })}
          </div>
        </div>
      </section>

      {/* ÖNE ÇIKAN */}
      {featured &&
      <section style={{ padding: "var(--hp-section-sm) var(--hp-pad-x) 0" }}>
        <div className="hp-shell" style={{ padding: 0 }}>
          <div role="link" tabIndex={0} onClick={() => setSel(featured)}
            className="hp-split" style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 0, border: "1px solid var(--hp-line-strong)", cursor: "pointer" }}>
            <img src={`covers/insight-${featured.id}.png`} alt="" style={{ display: "block", width: "100%", height: "100%", minHeight: 320, objectFit: "cover", background: "var(--hp-bg-2)" }} />
            <div style={{ padding: "44px 44px", display: "flex", flexDirection: "column", justifyContent: "center", gap: 18 }}>
              <Tag>{featured.cat}</Tag>
              <h2 className="hp-h3" style={{ fontSize: "clamp(26px, 2.6vw, 36px)", margin: 0, lineHeight: 1.2, color: "var(--hp-ink-strong)" }}>{featured.title}</h2>
              <p className="hp-body" style={{ margin: 0, fontSize: 16, lineHeight: 1.6, color: "var(--hp-ink-dim)" }}>{featured.excerpt}</p>
              <Meta p={featured} />
            </div>
          </div>
        </div>
      </section>
      }

      {/* GRID */}
      <section style={{ padding: "var(--hp-section-sm) var(--hp-pad-x) var(--hp-section)" }}>
        <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)" }}>
            {rest.map((p) => (
              <div key={p.id} role="link" tabIndex={0} onClick={() => setSel(p)}
                style={{ background: "var(--hp-bg)", display: "flex", flexDirection: "column", cursor: "pointer", transition: "background 140ms" }}
                onMouseEnter={(e) => e.currentTarget.style.background = "var(--hp-bg-2)"}
                onMouseLeave={(e) => e.currentTarget.style.background = "var(--hp-bg)"}>
                <img src={`covers/insight-${p.id}.png`} alt="" style={{ display: "block", width: "100%", height: 180, objectFit: "cover", background: "var(--hp-bg-2)", borderBottom: "1px solid var(--hp-line-strong)" }} />
                <div style={{ padding: "26px 26px 30px", display: "flex", flexDirection: "column", gap: 12, flex: 1 }}>
                  <Tag>{p.cat}</Tag>
                  <h3 style={{ margin: 0, fontFamily: "var(--hp-sans)", fontWeight: 600, fontSize: 20, letterSpacing: "-0.015em", lineHeight: 1.25, color: "var(--hp-ink-strong)" }}>{p.title}</h3>
                  <p className="hp-body" style={{ margin: 0, fontSize: 14.5, lineHeight: 1.55, color: "var(--hp-ink-dim)" }}>{p.excerpt}</p>
                  <div style={{ marginTop: "auto", paddingTop: 14 }}><Meta p={p} /></div>
                </div>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 40, display: "flex", justifyContent: "center" }}>
            <button style={{ cursor: "pointer", fontFamily: "var(--hp-sans)", fontWeight: 600, fontSize: 14, color: "var(--hp-green-3)", background: "none", border: "1px solid var(--hp-line-strong)", padding: "14px 28px" }}>
              Daha fazla
            </button>
          </div>
        </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" }}>
            <span style={{ color: "var(--hp-green-3)" }}>Büyüme sisteminizi</span> konuşalım.
          </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 InsightDetail({ lang, navigate, slug }) {
  const I = HP_DATA.insights;
  const entry = I.entries.find((f) => f.slug === slug) || I.entries[0];

  // Real body content keyed by slug; falls back to a generic structural template.
  const BODIES = {
    "growth-bottleneck-haritasi": [
    { h: "01 · Tanım", p: "Growth bottleneck, büyüme mimarisinin belirli bir katmanında ve fazında oluşan yapısal sızıntı noktasıdır. Hornpiper Matrix'inin 12 hücresinden biri olarak konumlandırılır. Yanlış hücreye yapılan müdahale fayda üretmez; sadece geçici sinyal oluşturur." },
    { h: "02 · Tespit", p: "Bottleneck'i okuyan üç sinyal birlikte değerlendirilir. Kanal performansı standart sapma dışına çıkıyor; conversion path bir noktada kohort tutarlılığını kaybediyor; Systems katmanında karar günlüğü güncellenemiyor. Üçünden biri eksikse okuma kesin değildir." },
    { h: "03 · Karar", p: "Tespit edilen bottleneck'in hangi katmanda ve hangi fazda çözüleceği yazılı olarak belirlenir. Phase atlanırsa müdahale geçici olur. Doğru phase önerisi diagnostic engagement'ın temel çıktısıdır." }],

    "ddio-cercevesi": [
    { h: "01 · Çerçevenin nedeni", p: "DDIO bir süreç şeması değildir. Tekliften önce tanı, tasarımdan önce karar, uygulamadan önce mimari, optimizasyondan önce ölçüm gerektiren bir disiplindir." },
    { h: "02 · Faz mantığı", p: "Diagnose mevcut yapıyı okur. Design mimariyi belirler. Implement çalışan sisteme çevirir. Optimize zamanla compound eder. Sıra atlanırsa sistem üretilmez; semptom üretilir." },
    { h: "03 · Üç vaka", p: "Üç şirkette aynı problem üç ayrı katmandan çözüldü. Diagnose adımı yapılmamış olsaydı, üçü de yanlış hücreye müdahale ederdi." }],

    "demand-vs-conversion": [
    { h: "01 · Okuma", p: "Lead düşüklüğü her zaman talep problemi değildir. Trafik var ama conversion düşükse, Conversion katmanı sızdırıyor demektir. Trafik kendisi yoksa, Demand katmanı eksik." },
    { h: "02 · Kontrol listesi", p: "ICP yazılı mı? Mesaj kanaldan kanala aynı mı? Funnel aşamaları tanımlı mı? Kalifikasyon eşiği belirli mi? Retention eğrisi okunuyor mu? Beş sorudan en az üçüne hayır yanıtı katman seçimini netleştirir." },
    { h: "03 · Karar", p: "İki katmandan hangisi sızdırırsa müdahale o katmana yapılır. Yanlış katmana yapılan iyileştirme, doğru katmanı maskelemekten başka bir şey üretmez." }],

    "warehouse-attribution": [
    { h: "01 · Vendor sapması", p: "Üç farklı reklam vendor'ı aynı conversion'ı kendi attribution modeline göre raporlar. Toplam %30+ sapma normaldir. Bu rapor değil, satış argümanıdır." },
    { h: "02 · Pipeline çözümü", p: "Server-side event akışı warehouse'a yazılır. Identity stitching ile anonim ve kayıtlı kimlikler birleşir. Attribution model dbt katmanında yazılır; sürüm git ile takip edilir." },
    { h: "03 · Tek gerçek", p: "Warehouse-native attribution tek bir gerçek üretir. Vendor raporlama bir referans noktası, gerçek değil." }],

    "gtm-engineering": [
    { h: "01 · Tanım", p: "GTM Engineering, growth sisteminin yazılım sistemi olarak inşa edilmesidir. Manuel akışlar otomasyonla, dağınık veri pipeline'la, scriptsiz operasyon karar günlüğüyle değiştirilir." },
    { h: "02 · Üç katman", p: "Custom Tooling karar girdilerini üretir. AI Agent operasyonu içerik ve qualification'ı taşır. Data Flow warehouse-native attribution ve identity stitching'i kurar." },
    { h: "03 · Sahip olunabilirlik", p: "Sistem müşteride çalışır. Hornpiper bağımlılık üretmez. Devirde kaynak kod, modeller ve runbook müşteriye geçer." }],

    "icp-recalibration": [
    { h: "01 · Belirtiler", p: "ICP belirsizleştiğinde kanal seçimi tesadüfileşir, mesaj kanaldan kanala dağılır, attribution güvenilmez hale gelir. Üçü birlikte ortaya çıkarsa ICP recalibration zamanı gelmiştir." },
    { h: "02 · Protokol", p: "Kayıp müşteri taraması yapılır. Operatör mülakatları açılır. Kohort özellikleri yeniden analiz edilir. Yeni ICP doctrine'ı tek sayfaya yazılır." },
    { h: "03 · Çıktı", p: "ICP doctrine sözleşmenin maddesidir. Tüm Demand katmanı bu belgeyi referans alır." }]

  };
  const body = BODIES[entry.slug] || BODIES["ddio-cercevesi"];
  const related = I.entries.filter((f) => f.slug !== entry.slug).slice(0, 3);

  return (
    <main>
      <section style={{ padding: "var(--hp-section) var(--hp-pad-x) var(--hp-section-sm)" }}>
        <div className="hp-shell" style={{ padding: 0 }}>
          <a href="#/insights" onClick={(e) => {e.preventDefault();navigate("/insights");}} className="hp-label hp-inline">← /insights</a>
          <div style={{ display: "flex", gap: 16, marginTop: 24, flexWrap: "wrap" }}>
            <span className="hp-eyebrow">{entry.n}</span>
            <span className="hp-label" style={{ color: "var(--hp-gold)" }}>{entry.tag}</span>
            <span className="hp-label">{entry.date}</span>
            <span className="hp-label" style={{ marginLeft: "auto" }}>{entry.read} READ</span>
          </div>
          <h1 className="hp-h1" style={{ marginTop: 24, fontSize: "clamp(32px, 5vw, 72px)" }}>{entry.title}</h1>
          <p className="hp-body-lg" style={{ marginTop: 24, maxWidth: 820 }}>{entry.sum}</p>
        </div>
      </section>

      <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, display: "grid", gridTemplateColumns: "1fr 240px", gap: 64 }} className2="hp-split">
          <article style={{ maxWidth: 820 }}>
            {body.map((b, i) =>
            <React.Fragment key={i}>
                <h2 className="hp-h3" style={{ marginTop: i === 0 ? 0 : 40, color: "var(--hp-gold)", fontSize: 14, fontFamily: "var(--hp-mono)", letterSpacing: "0.1em", textTransform: "uppercase" }}>{b.h}</h2>
                <p className="hp-body" style={{ marginTop: 14, fontSize: 17 }}>{b.p}</p>
              </React.Fragment>
            )}
            <div style={{ marginTop: 56, padding: 24, border: "1px solid var(--hp-line-strong)", background: "var(--hp-bg-2)" }}>
              <div className="hp-label" style={{ color: "var(--hp-gold)" }}>İLGİLİ PILLAR</div>
              <a href="#/solutions" onClick={(e) => {e.preventDefault();navigate("/solutions");}} className="hp-h3" style={{ display: "block", marginTop: 8 }}>
                Solutions · /solutions →
              </a>
            </div>
          </article>

          <aside className="hp-mobile-hide">
            <div className="hp-label" style={{ color: "var(--hp-gold)", marginBottom: 14 }}>İLGİLİ YAZILAR</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, border: "1px solid var(--hp-line)" }}>
              {related.map((f, i) =>
              <li key={f.slug} style={{ borderBottom: i < related.length - 1 ? "1px solid var(--hp-line)" : "none" }}>
                  <a href={`#/insights/${f.slug}`} onClick={(e) => {e.preventDefault();navigate(`/insights/${f.slug}`);}}
                style={{ display: "block", padding: "14px 16px" }}>
                    <span className="hp-label" style={{ display: "block", color: "var(--hp-ink-mute)" }}>{f.n} · {f.date}</span>
                    <span style={{ display: "block", marginTop: 4, fontSize: 14, fontWeight: 500 }}>{f.title}</span>
                  </a>
                </li>
              )}
            </ul>
          </aside>
        </div>
      </section>
    </main>);

}

// ── /about ─────────────────────────────────────────────
function AboutPage({ lang, navigate }) {
  const SHOW_TEAM = true; // publish öncesi false yapılacak
  const SHOW_REFERENCES = false; // gelecekte açılacak
  const SHOW_ADDRESS = false; // gelecekte açılacak
  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: 24 }}>
      <span style={{ width: 32, height: 2, background: "var(--hp-green-3)" }} />
      <span className="hp-label" style={{ color: "var(--hp-green-3)" }} data-comment-anchor="78073d4737-span-344-7">{label}</span>
    </div>;

  const para = { margin: 0, fontFamily: "var(--hp-body)", fontSize: 17, lineHeight: 1.7, color: "var(--hp-ink)" };
  const principles = [
  { subj: "Tanı", rest: " önce gelir.", d: "Hizmet tarif edilmeden önce darboğaz teşhis edilir." },
  { subj: "Strateji", rest: " uygulamaya bağlanır.", d: "Kanal, Funnel, CRM ve operasyona bağlanmayan strateji sahaya inmez." },
  { subj: "Veri", rest: " karar üretir.", d: "Karar ritmine bağlanmayan ölçüm yalnızca rapordur." },
  { subj: "Sistem", rest: " kişiye bağlı kalmaz.", d: "Kişiye bağımlı manuel operasyon ölçeklenmez." },
  { subj: "Mimari", rest: " müşteride kalır.", d: "Bağımlılık değil, devredilebilir bir sistem kurulur." }];

  const team = [
  { n: "Göktuğ Göktepe", r: "Growth Architect, Co-founder" },
  { n: "Furkan Göktepe", r: "Network & System Engineer, Co-founder" },
  { n: "Mustafa Tuğrul Göktepe", r: "Operations Director, Co-founder" },
  { n: "Furkan Coşkun", r: "Full-Stack Developer" },
  { n: "Ahmet Emre Karaca", r: "AI Developer" },
  { n: "Enes Bozkurt", r: "Web Developer" },
  { n: "Nazmi Cihan Daştan", r: "Growth Strategist" },
  { n: "Onur Erdoğan", r: "Test Engineer" },
  { n: "Baran İmamoğlu", r: "Business Analyst" },
  { n: "Batuhan Tüzün", r: "Brand Owner" },
  { n: "Gyuli Mekhtievi", r: "Brand Owner" },
  { n: "Nil Özgür", r: "Brand Associate" },
  { n: "İlkim Karabayraktar", r: "Growth Associate" }];

  return (
    <main>
      {/* HERO */}
      <section style={{ padding: "var(--hp-section) var(--hp-pad-x) var(--hp-section-sm)" }} data-comment-anchor="91960029a2-section-473-7">
        <div className="hp-shell" style={{ padding: 0 }}>
          <Eyebrow label="Hakkımızda" />
          <h1 className="hp-h1" style={{ maxWidth: "20ch" }}>Ticaretin içinden geldik, <span style={{ color: "var(--hp-green-3)" }}>büyümeyi sistemle</span> kurduk.</h1>
          <p className="hp-body-lg" style={{ marginTop: 32, maxWidth: 880, color: "var(--hp-ink)" }}>
            <span style={{ color: "var(--hp-green-3)", fontWeight: 500 }}>Hornpiper</span>, ticaret ve üretim deneyimini mühendislik ve veri bilimiyle birleştiren bir <G>Growth Architecture firmasıdır</G>.
          </p>
        </div>
      </section>

      {/* NEREDEN GELDİK */}
      <section style={{ padding: "var(--hp-section-sm) var(--hp-pad-x) var(--hp-section)", borderTop: "1px solid var(--hp-line)" }}>
        <div className="hp-shell hp-split" style={{ padding: 0, display: "grid", gridTemplateColumns: "0.7fr 1.6fr", gap: 80, alignItems: "start" }}>
          <div>
            <h2 className="hp-h2" style={{ fontSize: "clamp(34px, 4vw, 52px)", margin: 0, maxWidth: "10ch", color: "var(--hp-green-3)" }}>Nereden geldik.</h2>
          </div>
          <div style={{ display: "grid", gap: 26 }}>
            <p style={para}>Hornpiper'ın kurucu kadrosu sistem mühendisliği, veri bilimi, lojistik, dış ticaret ve işletme disiplinlerinden gelir. Ortak noktamız teorik danışmanlık değil, <G>sahada iş yürütmüş</G> olmamızdır.</p>
            <p style={para}>Hornpiper 2020 yılında dış ticaret ve üretim odağıyla kuruldu. Ürün geliştirdik, satış yaptık, markaları yeni pazarlara taşıdık ve ticari sonuç ürettik. Bu süreç bize büyümenin masa başında tasarlanan bir sunumla değil, gerçek işletme dinamikleriyle şekillendiğini gösterdi. Rekabet baskısı, <G>nakit akışı</G>, <G>kur hareketleri</G>, tedarik sorunları, operasyonel gecikmeler ve yanlış zamanlanmış kararlar büyümenin doğrudan parçasıdır. Bir şirketi ileri taşıyan şey yalnızca iyi fikir değildir; doğru zamanda alınan doğru karar ve <G>bu kararı taşıyan sistemdir</G>.</p>
            <p style={para}>Markaları yeni pazarlara taşırken birlikte çalıştığımız şirketleri yakından gözlemledik. Tekrar eden iki problem vardı. Birincisi, büyüme problemlerinin çoğu yalnızca pazarlama kaynaklı değildi; sorun çoğu zaman şirketin <G>sistem yapısındaydı</G>. İkincisi, bu şirketlerin çalıştığı <G>ajanslar yapısal çözüm üretmekte zorlanıyordu</G>: kanal yönetiyor, fakat CRM, veri, operasyon ve teknoloji tarafını aynı büyüme mimarisine bağlayamıyordu.</p>
            <p style={para}>Bu noktada Hornpiper'ın yaklaşımı şekillendi. Ticari deneyimden gelen sezgiyi mühendislik ve veri bilimiyle birleştirdiğimizde, büyüme daha yönetilebilir bir sisteme dönüşüyordu. Veri burada raporlama aracı değil, <G>karar mekanizmasıydı</G>.</p>
            <p style={para}>2025 yılında Hornpiper bugünkü yapısına evrildi. Dış ticaret ve lojistik faaliyetlerini ayırarak; stratejik danışmanlık, Growth Marketing, CRM, Automation, Analytics ve GTM Engineering katmanlarını birleştiren bir <G>Growth Architecture firması</G> haline geldik.</p>
            <p style={para}>Bir ticaret ve üretim geçmişinden gelmemiz, özellikle KOBİ'lerin gerçekliğini yakından bilmemizi sağlar. Sınırlı kaynak, nakit akışı baskısı, operasyonel yük, <G>karar yorgunluğu</G> ve <G>her hatanın bilançoya yansıdığı</G> işletme dinamiğini dışarıdan okumayız. Bu gerçekliğin içinden geldik.</p>
            <p style={para}>Bugün Hornpiper bu yaklaşımı Ar-Ge ile derinleştiriyor. Danışmanlık süreçlerinden doğan iç araçlarımız Kastelan, Luna AI ve Harvester üzerinde çalışıyoruz. Bu araçlar Hornpiper'ın strateji, veri ve operasyon katmanını güçlendiren <G>proprietary tooling</G> yapılarıdır.</p>
            <p style={para}>Hornpiper'ın yönü nettir. Büyümeyi kampanya faaliyeti olarak değil, <G>veriyle taşınan ve sistemle yönetilen bir işletme mimarisi</G> olarak ele alır.</p>
          </div>
        </div>
      </section>

      {/* NASIL ÇALIŞIRIZ */}
      <section style={{ padding: "var(--hp-section-sm) var(--hp-pad-x) var(--hp-section)", borderTop: "1px solid var(--hp-line)", background: "var(--hp-bg-2)" }} data-comment-anchor="3160cb73fe-section-403-7">
        <div className="hp-shell hp-split" style={{ padding: 0, display: "grid", gridTemplateColumns: "0.7fr 1.6fr", gap: 80, alignItems: "start" }}>
          <div>
            <h2 className="hp-h3" style={{ fontSize: 32, margin: 0, maxWidth: "12ch", color: "var(--hp-green-3)" }}>Nasıl çalışırız?</h2>
          </div>
          <div style={{ display: "grid", gap: 28 }}>
            <p style={para}><G>Önce teşhis koyarız</G>. Sonra büyüme stratejisini GTM, müşteri kazanımı, CRM, Automation ve Analytics sistemlerine çeviririz. Gerektiğinde stratejik danışmanlık verir, gerektiğinde Growth Marketing uygular, gerektiğinde CRM, Automation ve custom tooling kurarız. Bunlar ayrı servis kutuları değil, <G>aynı mimarinin parçalarıdır</G>.</p>
            <div>
              <a href="#/approach" onClick={(e) => {e.preventDefault();navigate("/approach");}} className="hp-btn hp-btn-ghost" style={{ color: "var(--hp-green-3)" }}>
                Yaklaşımı incele <ArrowR />
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* İLKELERİMİZ */}
      <section style={{ padding: "var(--hp-section-sm) var(--hp-pad-x) var(--hp-section)", borderTop: "1px solid var(--hp-line)" }} data-comment-anchor="cd6ad76af9-section-421-7">
        <div className="hp-shell" style={{ padding: 0 }}>
          <h2 className="hp-h3" style={{ fontSize: 32, margin: "0 0 40px", color: "var(--hp-green-3)" }}>İlkelerimiz.</h2>
          <div style={{ borderTop: "1px solid var(--hp-line-strong)" }}>
            {principles.map((p, i) =>
            <div key={i} style={{
              padding: "32px 0",
              borderBottom: i < principles.length - 1 ? "1px solid var(--hp-line)" : "none"
            }}>
              <h3 style={{ margin: 0, fontFamily: "var(--hp-sans)", fontWeight: 600, fontSize: 24, letterSpacing: "-0.015em", color: "var(--hp-ink-strong)" }}>
                <span style={{ color: "var(--hp-green-3)" }}>{p.subj}</span>{p.rest}
              </h3>
              <p style={{ margin: "10px 0 0", fontFamily: "var(--hp-body)", fontSize: 16, lineHeight: 1.6, color: "var(--hp-ink-dim)", maxWidth: "60ch" }}>{p.d}</p>
            </div>
            )}
          </div>
        </div>
      </section>

      {/* EKİP */}
      {SHOW_TEAM &&
      <section style={{ padding: "var(--hp-section-sm) var(--hp-pad-x) var(--hp-section)", borderTop: "1px solid var(--hp-line)", background: "var(--hp-bg-2)" }} data-comment-anchor="50e0f124c7-section-441-7">
        <div className="hp-shell" style={{ padding: 0 }} data-comment-anchor="33a85c68f0-div-442-9">
          <h2 className="hp-h3" style={{ fontSize: 32, margin: "0 0 40px" }} data-comment-anchor="454d32cee5-h2-442-11"><span style={{ color: "var(--hp-green-3)" }}>Hornpiper</span> Growth Squad.</h2>
          <div className="hp-team-marquee">
            <div className="hp-team-track">
              {team.concat(team).map((m, i) =>
              <div key={i} className="hp-team-card" aria-hidden={i >= team.length ? "true" : undefined}>
                  <image-slot id={"team-" + (i % team.length + 1)} shape="rect" placeholder="Foto"
                style={{ display: "block", width: "100%", aspectRatio: "4 / 5" }}></image-slot>
                  <div style={{ padding: "18px 20px 24px" }}>
                    <div className="hp-team-name" style={{ fontFamily: "var(--hp-sans)", fontWeight: 600, fontSize: 17, letterSpacing: "-0.015em", color: "var(--hp-ink-strong)" }}>{m.n}</div>
                    <div style={{ marginTop: 6, fontFamily: "var(--hp-mono)", fontSize: 12, letterSpacing: "0.02em", lineHeight: 1.45, color: "var(--hp-green-3)", opacity: 0.85 }}>{m.r}</div>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>
      }

      {/* REFERANSLAR */}
      {SHOW_REFERENCES &&
      <section style={{ padding: "var(--hp-section-sm) var(--hp-pad-x) var(--hp-section)", borderTop: "1px solid var(--hp-line)" }} data-comment-anchor="e1f61220ce-section-463-7">
        <div className="hp-shell" style={{ padding: 0 }}>
          <h2 className="hp-h3" style={{ fontSize: 32, margin: "0 0 40px", maxWidth: "20ch" }}>Birlikte Çalıştığımız <span style={{ color: "var(--hp-green-3)" }}>Marka</span> ve <span style={{ color: "var(--hp-green-3)" }}>Çözüm Ortakları</span></h2>
          <div className="hp-logo-marquee">
            <div className="hp-logo-track">
              {Array.from({ length: 16 }).map((_, i) =>
              <image-slot key={i} id={"ref-" + (i % 8 + 1)} shape="rect" placeholder="Logo"
              aria-hidden={i >= 8 ? "true" : undefined}></image-slot>
              )}
            </div>
          </div>
          <p className="hp-body" style={{ marginTop: 20, maxWidth: 720, color: "var(--hp-ink-mute)", fontFamily: "var(--hp-mono)", fontSize: 12, letterSpacing: "0.04em" }} data-comment-anchor="ddbe373617-p-474-11">
            Logo alanları yayın öncesi gerçek referanslarla doldurulacaktır.
          </p>
        </div>
      </section>
      }

      {/* ADRES */}
      {SHOW_ADDRESS &&
      <section style={{ padding: "var(--hp-section-sm) var(--hp-pad-x) var(--hp-section)", borderTop: "1px solid var(--hp-line)" }} data-comment-anchor="7014855015-section-483-7">
        <div className="hp-shell" style={{ padding: 0 }}>
          <h2 className="hp-h3" style={{ fontSize: 32, margin: "0 0 48px" }} data-comment-anchor="e07a5dfea5-h2-485-11"><span style={{ color: "var(--hp-green-3)" }}>Nerede</span> çalışıyoruz?</h2>
          <div className="hp-split" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1, background: "var(--hp-line-strong)", border: "1px solid var(--hp-line-strong)" }}>
            {[
            { k: "MERKEZ OFİS", a: "Workinton, İstanbul", d: "Operasyon ve müşteri görüşmeleri", q: "Workinton İstanbul" },
            { k: "AR-GE MERKEZİ", a: "Ankara Üniversitesi Gölbaşı Teknokent", d: "Ürün ve R&D geliştirme", q: "Ankara Üniversitesi Gölbaşı Teknokent" }].
            map((b) =>
            <div key={b.k} style={{ background: "var(--hp-bg)", display: "flex", flexDirection: "column" }}>
                <div style={{ padding: "36px 32px", display: "flex", flexDirection: "column", gap: 14 }}>
                  <span style={{ fontFamily: "var(--hp-mono)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--hp-green-3)", opacity: 0.85 }}>{b.k}</span>
                  <div style={{ fontFamily: "var(--hp-sans)", fontWeight: 600, fontSize: 20, letterSpacing: "-0.015em", color: "var(--hp-ink-strong)", lineHeight: 1.3 }}>{b.a}</div>
                  <p style={{ margin: 0, fontFamily: "var(--hp-body)", fontSize: 15, color: "var(--hp-ink-dim)" }}>{b.d}</p>
                </div>
                <iframe title={b.k} src={`https://maps.google.com/maps?q=${encodeURIComponent(b.q)}&z=14&output=embed`}
              loading="lazy" referrerPolicy="no-referrer-when-downgrade"
              style={{ width: "100%", height: 220, border: "none", borderTop: "1px solid var(--hp-line-strong)", filter: "invert(0.92) hue-rotate(180deg) brightness(0.9) contrast(0.9)" }}></iframe>
              </div>
            )}
          </div>
          <div style={{ marginTop: 28, display: "flex", flexWrap: "wrap", alignItems: "center", gap: "8px 18px", fontFamily: "var(--hp-mono)", fontSize: 13, letterSpacing: "0.02em", color: "var(--hp-ink)" }}>
            <a href="mailto:info@hornpiper.com" style={{ color: "var(--hp-green-3)" }}>info@hornpiper.com</a>
            <span style={{ color: "var(--hp-ink-mute)" }}>·</span>
            <span style={{ color: "var(--hp-ink-mute)" }}>+90 (000) 000 00 00</span>
          </div>
        </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" }}>
              Teşhis Talebi Gönder <ArrowR size={16} />
            </a>
          </div>
        </div>
      </section>
    </main>);

}

// ── /contact ───────────────────────────────────────────
function ContactPage({ lang, navigate }) {
  const C = HP_DATA.contact;
  const [form, setForm] = React.useState({
    name: "", company: "", email: "",
    stage: C.fields.stage.options[0],
    problem: "",
    budget: C.fields.budget.options[1],
    engage: C.fields.engage.options[0],
    consent: false
  });
  const [stage, setStage] = React.useState("form");
  const set = (k, v) => setForm((f) => ({ ...f, [k]: v }));

  return (
    <main>
      <section style={{ padding: "var(--hp-section) var(--hp-pad-x) var(--hp-section-sm)" }}>
        <div className="hp-shell" style={{ padding: 0 }}>
          <div className="hp-eyebrow" style={{ marginBottom: 28 }}>§ 06 · DIAGNOSE INTAKE</div>
          <h1 className="hp-h1" style={{ maxWidth: "16ch" }}>{C.headline}</h1>
          <p className="hp-body-lg" style={{ marginTop: 32, maxWidth: 880 }}>{C.intro}</p>
        </div>
      </section>

      <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: "var(--hp-section-sm) 0 0", display: "grid", gridTemplateColumns: "260px 1fr", gap: 64 }}>
          <aside>
            <div className="hp-label" style={{ color: "var(--hp-gold)", marginBottom: 16 }}>SÜREÇ</div>
            <ol style={{ listStyle: "none", padding: 0, margin: 0, border: "1px solid var(--hp-line)" }}>
              {[
              ["01", "Talep gönderildi"],
              ["02", "24 saat içinde yazılı yanıt"],
              ["03", "Qualification görüşmesi · 30 dk"],
              ["04", "Diagnose oturumu · 90 dk"],
              ["05", "Bottleneck raporu · yazılı"]].
              map(([n, t], i, arr) =>
              <li key={n} style={{
                padding: "14px 16px", display: "flex", gap: 14, alignItems: "center",
                borderBottom: i < arr.length - 1 ? "1px solid var(--hp-line)" : "none",
                background: i === 0 ? "var(--hp-green)" : "transparent"
              }}>
                  <span className="hp-eyebrow">{n}</span>
                  <span style={{ fontSize: 14, color: i === 0 ? "var(--hp-ink-strong)" : "var(--hp-ink)" }}>{t}</span>
                </li>
              )}
            </ol>
          </aside>

          <form onSubmit={(e) => {e.preventDefault();setStage("submitted");}}>
            {stage !== "submitted" &&
            <div className="hp-card" style={{ padding: 0 }}>
                <div style={{ padding: "32px 32px", borderBottom: "1px solid var(--hp-line)" }}>
                  <div className="hp-eyebrow">§ A · OPERATOR</div>
                  <div style={{ marginTop: 24, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                    <Field l={C.fields.name.l_tr}><input className="hp-input" required value={form.name} onChange={(e) => set("name", e.target.value)} placeholder="Adın soyadın" /></Field>
                    <Field l={C.fields.company.l_tr}><input className="hp-input" required value={form.company} onChange={(e) => set("company", e.target.value)} placeholder="Firma" /></Field>
                    <Field l={C.fields.email.l_tr}><input type="email" className="hp-input" required value={form.email} onChange={(e) => set("email", e.target.value)} placeholder="operator@firma.com" /></Field>
                    <Field l={C.fields.stage.l_tr}>
                      <select className="hp-input" value={form.stage} onChange={(e) => set("stage", e.target.value)}>
                        {C.fields.stage.options.map((o) => <option key={o} value={o}>{o}</option>)}
                      </select>
                    </Field>
                  </div>
                </div>

                <div style={{ padding: "32px 32px", borderBottom: "1px solid var(--hp-line)" }}>
                  <div className="hp-eyebrow">§ B · SITUATION</div>
                  <Field l={C.fields.problem.l_tr} style={{ marginTop: 24 }}>
                    <textarea className="hp-input" required value={form.problem} onChange={(e) => set("problem", e.target.value)} placeholder="Yapısal olarak nerede tıkandığınızı üç cümlede yazın." />
                  </Field>
                </div>

                <div style={{ padding: "32px 32px", borderBottom: "1px solid var(--hp-line)" }}>
                  <div className="hp-eyebrow">§ C · SCOPE</div>
                  <div style={{ marginTop: 24, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                    <Field l={C.fields.budget.l_tr}>
                      <select className="hp-input" value={form.budget} onChange={(e) => set("budget", e.target.value)}>
                        {C.fields.budget.options.map((o) => <option key={o} value={o}>{o}</option>)}
                      </select>
                    </Field>
                    <Field l={C.fields.engage.l_tr}>
                      <select className="hp-input" value={form.engage} onChange={(e) => set("engage", e.target.value)}>
                        {C.fields.engage.options.map((o) => <option key={o} value={o}>{o}</option>)}
                      </select>
                    </Field>
                  </div>
                </div>

                <div style={{ padding: "24px 32px", display: "flex", justifyContent: "space-between", alignItems: "center", background: "var(--hp-bg-3)", gap: 24 }}>
                  <label style={{ display: "flex", gap: 10, alignItems: "flex-start", maxWidth: 480, fontSize: 13, color: "var(--hp-ink-dim)" }}>
                    <input type="checkbox" required checked={form.consent} onChange={(e) => set("consent", e.target.checked)} style={{ marginTop: 4, accentColor: "var(--hp-gold)" }} />
                    Bu talep sözleşme önerisi değildir. Hornpiper bu talebi KVKK kapsamında işler.
                  </label>
                  <button type="submit" className="hp-btn">Diagnose'a Başla <ArrowR /></button>
                </div>
              </div>
            }

            {stage === "submitted" &&
            <div className="hp-card" style={{ background: "var(--hp-green)", borderColor: "var(--hp-gold)" }}>
                <div className="hp-label" style={{ color: "var(--hp-gold)" }}>STATUS · 200 · DIAGNOSE QUEUED</div>
                <h3 className="hp-h2" style={{ marginTop: 16, fontSize: 36 }}>Talep alındı. Yazılı yanıt 24 saat içinde.</h3>
                <p className="hp-body" style={{ marginTop: 16, maxWidth: 560 }}>Uygunluk varsa 30 dakikalık qualification görüşmesi, sonrasında 90 dakikalık Diagnose oturumu planlanır. Aksi durumda gerekçeli yanıt yazılı olarak gönderilir.</p>
                <button onClick={() => setStage("form")} className="hp-btn hp-btn-ghost" style={{ marginTop: 28 }}>Yeni talep <ArrowR /></button>
              </div>
            }
          </form>
        </div>
      </section>
    </main>);

}

function Field({ l, children, style }) {
  return (
    <label style={{ display: "block", ...style }}>
      <div className="hp-label" style={{ marginBottom: 8 }}>{l}</div>
      {children}
    </label>);

}

function NotFound({ lang, navigate }) {
  return (
    <main style={{ padding: "160px var(--hp-pad-x)", textAlign: "center" }}>
      <div className="hp-shell" style={{ padding: 0 }}>
        <div className="hp-eyebrow">STATUS · 404 · NO ROUTE</div>
        <h1 className="hp-h1" style={{ marginTop: 16 }}>Belge yok.</h1>
        <a href="#/" onClick={(e) => {e.preventDefault();navigate("/");}} className="hp-btn" style={{ marginTop: 32 }}>Ana sayfa <ArrowR /></a>
      </div>
    </main>);

}

Object.assign(window, { SolutionsPage, ApproachPage, ProductsPage, InsightsPage, InsightDetail, AboutPage, ContactPage, NotFound });