// Product modules — CBAM, TSRS, CDP, KVKK with mini mock UI
function Modules({ t }) {
  const narrow = window.useNarrow(768);
  const [active, setActive] = React.useState(0);
  return (
    <Section id="modules">
      <SectionHead kicker={t.kicker} title={t.title} sub={t.sub}/>

      <div style={{ display: "grid", gridTemplateColumns: narrow ? "minmax(0,1fr)" : "1fr 1.2fr", gap: narrow ? 28 : 56, alignItems: "start", marginTop: 16 }}>
        <div style={{ minWidth: 0 }}>
          {t.cards.map((c, i) => (
            <button key={i} onClick={() => setActive(i)} style={{
              display: "block", width: "100%", textAlign: "left",
              padding: "20px 0",
              borderTop: i === 0 ? "1px solid var(--rule)" : "none",
              borderBottom: "1px solid var(--rule)",
              background: "transparent", border: "none",
              borderTopWidth: i === 0 ? 1 : 0,
              borderTopStyle: "solid",
              borderTopColor: "var(--rule)",
              borderBottomWidth: 1,
              borderBottomStyle: "solid",
              borderBottomColor: "var(--rule)",
              cursor: "pointer",
            }}>
              <div style={{ display: "flex", alignItems: "baseline", gap: 14, marginBottom: 8 }}>
                <span className="mono" style={{
                  fontSize: 11, color: active === i ? "var(--accent)" : "var(--ink-3)",
                  letterSpacing: "0.08em",
                }}>0{i + 1} · {c.tag}</span>
                {active === i && <span className="mono" style={{ fontSize: 10, color: "var(--ink-3)" }}>↳</span>}
              </div>
              <h3 className="serif" style={{
                fontSize: 30, lineHeight: 1.1, margin: "0 0 10px",
                fontWeight: 400, letterSpacing: "-0.015em",
                color: active === i ? "var(--ink)" : "var(--ink-3)",
                transition: "color .2s",
              }}>{c.title}</h3>
              {active === i && (
                <>
                  <p style={{ margin: "0 0 8px", fontSize: 14, color: "var(--ink-2)", lineHeight: 1.55 }}>{c.body}</p>
                  <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)" }}>{c.spec}</div>
                </>
              )}
            </button>
          ))}
        </div>

        <div style={{ position: narrow ? "static" : "sticky", top: 100, minWidth: 0 }}>
          <ModuleScreen which={active}/>
        </div>
      </div>
    </Section>
  );
}

// Per-module UI vignette
function ModuleScreen({ which }) {
  const narrow = window.useNarrow(768);
  return (
    <div style={{
      background: "var(--paper)", border: "1px solid var(--rule)", borderRadius: 12,
      overflow: "hidden",
      boxShadow: "0 24px 60px -24px rgba(20,20,15,0.18)",
      minHeight: narrow ? 400 : 460,
    }}>
      <div style={{
        display: "flex", justifyContent: "space-between", alignItems: "center",
        padding: "10px 14px", borderBottom: "1px solid var(--rule-2)",
      }}>
        <div className="mono" style={{ fontSize: 10, color: "var(--ink-3)", letterSpacing: "0.08em", textTransform: "uppercase" }}>
          GRENDEX / {["CBAM", "TSRS", "CDP", "KVKK"][which]}
        </div>
        <div style={{ display: "flex", gap: 5 }}>
          {[0,1,2].map(i => <i key={i} style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--rule)" }}/>)}
        </div>
      </div>
      {which === 0 && <CbamScreen/>}
      {which === 1 && <TsrsScreen/>}
      {which === 2 && <CdpScreen/>}
      {which === 3 && <KvkkScreen/>}
    </div>
  );
}

function CbamScreen() {
  const narrow = window.useNarrow(768);
  return (
    <div style={{ padding: narrow ? 16 : 22 }}>
      <div className="mono" style={{ fontSize: 10, color: "var(--ink-3)", letterSpacing: "0.06em" }}>Q1 2027 · CBAM REPORT</div>
      <div className="serif" style={{ fontSize: narrow ? 28 : 36, letterSpacing: "-0.02em", margin: "4px 0 2px" }}>
        € 1.842.310 <span style={{ fontSize: 13, color: "var(--ink-3)" }}>tahmini sertifika</span>
      </div>
      <div style={{ fontSize: 12, color: "var(--ink-3)" }}>↘ ETS düşümü uygulandı: − € 327.480</div>

      <div className="mono" style={{
        display: "inline-block", marginTop: 14, padding: "3px 8px",
        fontSize: 9.5, letterSpacing: "0.1em", textTransform: "uppercase",
        color: "var(--ink-3)", border: "1px dashed var(--rule)", borderRadius: 3,
      }}>ÖRNEK VERİ · ILLUSTRATIVE</div>

      <div style={{ display: "grid", gridTemplateColumns: narrow ? "minmax(0,1fr)" : "1fr 1fr 1fr", gap: 1, background: "var(--rule-2)", border: "1px solid var(--rule-2)", marginTop: 12 }}>
        {[
          { p: "Sıcak haddelenmiş rulo", c: "7208.39", e: "1,82 tCO₂e/t", q: "12.400 t" },
          { p: "Soğuk haddelenmiş rulo", c: "7209.16", e: "2,11 tCO₂e/t", q: "8.220 t" },
          { p: "Galvanizli sac",        c: "7210.49", e: "2,34 tCO₂e/t", q: "5.140 t" },
        ].map((r, i) => (
          <div key={i} style={{ background: "var(--paper)", padding: "12px 14px" }}>
            <div style={{ fontSize: 12, fontWeight: 500, marginBottom: 6 }}>{r.p}</div>
            <div className="mono" style={{ fontSize: 10, color: "var(--ink-3)" }}>CN {r.c}</div>
            <div className="mono" style={{ fontSize: 13, color: "var(--accent)", marginTop: 8 }}>{r.e}</div>
            <div className="mono" style={{ fontSize: 10, color: "var(--ink-3)" }}>{r.q}</div>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 20 }}>
        <div className="mono" style={{ fontSize: 10, color: "var(--ink-3)", letterSpacing: "0.06em", marginBottom: 8 }}>SERTİFİKA YOL HARİTASI · 12 AY</div>
        <div style={{ display: "flex", alignItems: "flex-end", gap: 4, height: 60 }}>
          {[0.4,0.5,0.55,0.6,0.65,0.7,0.85,0.9,0.95,1,0.92,0.88].map((h,i) => (
            <div key={i} style={{ flex: 1, height: `${h*100}%`, background: i < 3 ? "var(--ink-3)" : "var(--accent)", borderRadius: 1 }}/>
          ))}
        </div>
      </div>
    </div>
  );
}

function TsrsScreen() {
  const pillars = [
    { name: "Yönetişim", code: "S2 · 5–13", pct: 92, items: 18, done: 17 },
    { name: "Strateji",  code: "S2 · 14–22", pct: 78, items: 24, done: 19 },
    { name: "Risk Yön.",  code: "S2 · 25–28", pct: 64, items: 14, done: 9 },
    { name: "Metrik & Hedef", code: "S2 · 29–37", pct: 41, items: 32, done: 13 },
  ];
  return (
    <div style={{ padding: 22 }}>
      <div className="mono" style={{ fontSize: 10, color: "var(--ink-3)", letterSpacing: "0.06em" }}>TSRS GAP ANALYSIS · 2025 RAPORU</div>
      <div className="serif" style={{ fontSize: 30, margin: "4px 0 16px", letterSpacing: "-0.02em" }}>
        58 / 88 <span style={{ fontSize: 13, color: "var(--ink-3)" }}>açıklama tamam</span>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        {pillars.map((p, i) => (
          <div key={i}>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}>
              <div>
                <span style={{ fontSize: 13, fontWeight: 500 }}>{p.name}</span>
                <span className="mono" style={{ fontSize: 10, color: "var(--ink-3)", marginLeft: 8 }}>{p.code}</span>
              </div>
              <span className="mono" style={{ fontSize: 11, color: "var(--ink-2)" }}>{p.done}/{p.items}</span>
            </div>
            <div style={{ height: 6, background: "var(--bg-2)", borderRadius: 3, overflow: "hidden" }}>
              <div style={{ width: `${p.pct}%`, height: "100%", background: p.pct > 75 ? "var(--accent)" : p.pct > 50 ? "var(--ink-2)" : "var(--ink-3)" }}/>
            </div>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 20, padding: 12, background: "var(--bg-2)", borderRadius: 6, fontSize: 12, color: "var(--ink-2)" }}>
        <span className="mono" style={{ color: "var(--accent)", fontSize: 10, letterSpacing: "0.08em" }}>NEXT</span>{" "}
        <span style={{ marginLeft: 8 }}>Metrik & Hedef sütununda 19 açıklama eksik. AI önerilen kaynaklar hazır.</span>
      </div>
    </div>
  );
}

function CdpScreen() {
  return (
    <div style={{ padding: 22 }}>
      <div className="mono" style={{ fontSize: 10, color: "var(--ink-3)", letterSpacing: "0.06em" }}>CDP CLIMATE CHANGE 2026 · MAPPING</div>
      <div className="serif" style={{ fontSize: 30, margin: "4px 0 12px", letterSpacing: "-0.02em" }}>
        TSRS ↔ CDP eşleme
      </div>
      {[
        { cdp: "C6.1", q: "Scope 1 emissions", src: "TSRS S2 · 29(a)", auto: true },
        { cdp: "C6.3", q: "Scope 2 location-based", src: "TSRS S2 · 29(a)(ii)", auto: true },
        { cdp: "C2.3", q: "Risks with substantive financial impact", src: "TSRS S2 · 16", auto: true },
        { cdp: "C4.2", q: "Targets to reduce emissions", src: "TSRS S2 · 33", auto: true },
        { cdp: "C7.7", q: "Scope 3, purchased goods", src: "Faz 2 · Kategori 1", auto: false },
      ].map((r, i) => (
        <div key={i} style={{ display: "grid", gridTemplateColumns: "60px 1fr auto", gap: 12, padding: "10px 0", borderTop: "1px solid var(--rule-2)", fontSize: 12 }}>
          <span className="mono" style={{ color: "var(--accent)" }}>{r.cdp}</span>
          <div>
            <div style={{ color: "var(--ink)" }}>{r.q}</div>
            <div className="mono" style={{ fontSize: 10, color: "var(--ink-3)", marginTop: 2 }}>{r.src}</div>
          </div>
          <span className="mono" style={{ fontSize: 10, color: r.auto ? "var(--accent)" : "var(--ink-3)" }}>
            {r.auto ? "AUTO" : "FAZ 2"}
          </span>
        </div>
      ))}
    </div>
  );
}

function KvkkScreen() {
  return (
    <div style={{ padding: 22 }}>
      <div className="mono" style={{ fontSize: 10, color: "var(--ink-3)", letterSpacing: "0.06em" }}>VERİ İKAMETGAHI · KVKK</div>
      <div className="serif" style={{ fontSize: 30, margin: "4px 0 16px", letterSpacing: "-0.02em" }}>
        Veri Türkiye'de kalır.
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        {[
          { l: "Birincil bölge", v: "Türkiye (planlanan)" },
          { l: "Yedekleme", v: "Türkiye (planlanan)" },
          { l: "Yurt dışı aktarım", v: "Yok" },
          { l: "VERBIS", v: "Tüzel kuruluşta" },
          { l: "Çalışan PII", v: "Pseudonymize" },
          { l: "Audit log", v: "Append-only" },
        ].map((r, i) => (
          <div key={i} style={{ padding: "10px 12px", background: "var(--bg-2)", borderRadius: 6 }}>
            <div className="mono" style={{ fontSize: 9.5, color: "var(--ink-3)", letterSpacing: "0.06em", textTransform: "uppercase" }}>{r.l}</div>
            <div style={{ fontSize: 13, color: "var(--ink)", marginTop: 4 }}>{r.v}</div>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 16, padding: 12, border: "1px dashed var(--rule)", borderRadius: 6, fontSize: 11, color: "var(--ink-3)", lineHeight: 1.55 }}>
        Enterprise müşteriler için on-prem kurulum: Kubernetes operator + air-gapped vector DB. SAP / Logo / Netsis için VPN-only sürücüler.
      </div>
    </div>
  );
}

window.Modules = Modules;