// Footer with KVKK lock-up
function Footer({ t, lang }) {
  const narrow = window.useNarrow(768);
  const linksA = lang === "tr"
    ? ["CBAM Modülü", "TSRS Çerçevesi", "CDP Veri Katmanı", "KVKK Mimarisi", "Hesaplayıcı"]
    : ["CBAM Module", "TSRS Framework", "CDP Data Layer", "KVKK Architecture", "Calculator"];
  const linksB = lang === "tr"
    ? ["Hakkımızda", "Yaklaşım", "Kariyer", "İletişim"]
    : ["About", "Approach", "Careers", "Contact"];
  const linksC = lang === "tr"
    ? ["TSRS Rehberi", "CBAM Karnesi", "Türkçe Belge Örnekleri", "Webinarlar"]
    : ["TSRS Guide", "CBAM Brief", "Document Samples", "Webinars"];

  const disclosure = lang === "tr"
    ? "Grendex, sürdürülebilirlik ve uyumluluk süreçlerini kurumlar için sadeleştirmeyi hedefleyen bir teknoloji girişimidir. Platform şu anda geliştirme aşamasındadır ve kamuya açılış MVP tamamlandıktan sonra gerçekleştirilecektir."
    : "Grendex is a technology venture focused on simplifying sustainability and compliance workflows for organizations. The platform is currently in development and will be publicly released after the MVP is completed.";
  return (
    <footer style={{ background: "var(--bg)", borderTop: "1px solid var(--rule)" }}>
      <div className="wrap" style={{ padding: narrow ? "24px 0 0" : "32px 32px 0" }}>
        <div className="mono" style={{
          fontSize: 11, lineHeight: 1.6, color: "var(--ink-3)",
          padding: "16px 18px", border: "1px dashed var(--rule)", borderRadius: 6,
          maxWidth: 760, letterSpacing: "0.01em",
        }}>
          {disclosure}
        </div>
      </div>
      <div className="wrap" style={{ padding: narrow ? "24px 16px 20px" : "32px 32px 28px" }}>
        {/* lock-up */}
        <div style={{
          display: "flex", flexDirection: narrow ? "column" : "row", alignItems: narrow ? "flex-start" : "center", gap: 14,
          padding: "16px 20px",
          border: "1px solid var(--rule)",
          borderRadius: 8,
          background: "var(--paper)",
          marginBottom: narrow ? 32 : 56,
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 14, width: "100%" }}>
            <LockIcon/>
            <div className="mono" style={{ fontSize: 11, letterSpacing: "0.08em", color: "var(--ink-2)" }}>
              {t.lock}
            </div>
          </div>
          <div style={{ flex: 1, display: narrow ? "none" : "block" }}/>
          <div className="mono" style={{ fontSize: 10, color: "var(--ink-3)", letterSpacing: "0.06em" }}>
            {lang === "tr" ? "TÜRKİYE'DE BARINDIRMA (PLANLI)" : "TR-RESIDENT (PLANNED)"}
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: narrow ? "minmax(0,1fr)" : "1.4fr 1fr 1fr 1fr", gap: narrow ? 28 : 40 }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14 }}>
              <Logomark size={32}/>
              <span className="serif" style={{ fontSize: 28, letterSpacing: "-0.01em" }}>Grendex</span>
            </div>
            <p style={{ fontSize: 13, color: "var(--ink-3)", lineHeight: 1.55, maxWidth: 320, margin: 0, textWrap: "pretty" }}>
              {lang === "tr"
                ? "Türkiye'nin AI-native ESG uyumluluk platformu. TSRS, CBAM, CDP, tek çatı, Türkçe, KVKK uyumlu."
                : "Türkiye's AI-native ESG compliance platform. TSRS, CBAM, CDP, one platform, Turkish, KVKK-compliant."}
            </p>
            <div className="mono" style={{ fontSize: 11, color: "var(--ink-4)", letterSpacing: "0.04em", marginTop: 18 }}>
              {t.addr}
            </div>
          </div>

          <FootCol title={t.links_a} links={linksA} lang={lang}/>
          <FootCol title={t.links_b} links={linksB} lang={lang}/>
          <FootCol title={t.links_c} links={linksC} lang={lang}/>
        </div>

        <div style={{
          marginTop: 56, paddingTop: 20,
          borderTop: "1px solid var(--rule-2)",
          display: "flex", flexDirection: narrow ? "column" : "row",
          justifyContent: "space-between", alignItems: narrow ? "flex-start" : "center",
          gap: narrow ? 8 : 0,
          fontSize: 12, color: "var(--ink-3)",
        }}>
          <div className="mono" style={{ letterSpacing: "0.04em" }}>{t.legal}</div>
          <div className="mono" style={{ letterSpacing: "0.06em", fontSize: 10, color: "var(--ink-4)" }}>
            {lang === "tr" ? "NİSAN 2026 · v0.3" : "APRIL 2026 · v0.3"}
          </div>
        </div>
      </div>
    </footer>
  );
}

function FootCol({ title, links, lang }) {
  const soon = lang === "tr" ? "Yakında" : "Coming soon";
  return (
    <div>
      <div className="mono" style={{
        fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase",
        color: "var(--ink-3)", marginBottom: 14,
      }}>{title}</div>
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
        {links.map((l, i) => (
          <li key={i} style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
            <span style={{ fontSize: 13, color: "var(--ink-3)", opacity: 0.6 }}>{l}</span>
            <span className="mono" style={{ fontSize: 9, color: "var(--ink-4)", letterSpacing: "0.06em", textTransform: "uppercase" }}>· {soon}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

function LockIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
      <rect x="4" y="10" width="16" height="11" rx="2" stroke="currentColor" strokeWidth="1.5"/>
      <path d="M8 10V7a4 4 0 0 1 8 0v3" stroke="currentColor" strokeWidth="1.5"/>
      <circle cx="12" cy="15.5" r="1.2" fill="var(--accent)"/>
    </svg>
  );
}

window.Footer = Footer;