// Source-traceability section — every number locked to its document
function Trace({ t }) {
  const narrow = window.useNarrow(768);
  return (
    <Section id="trace" style={{ background: "var(--bg-2)" }}>
      <div style={{ display: "grid", gridTemplateColumns: narrow ? "minmax(0,1fr)" : "1fr 1fr", gap: narrow ? 36 : 64, alignItems: "start" }}>
        <div style={{ minWidth: 0 }}>
          <Kicker>{t.kicker}</Kicker>
          <h2 className="serif" style={{
            fontSize: "clamp(36px, 4.5vw, 56px)",
            lineHeight: 1.04, letterSpacing: "-0.02em",
            margin: "16px 0 18px", fontWeight: 400,
          }}>
            {t.title_a}<br/>
            <em style={{ fontStyle: "italic", color: "var(--accent)" }}>{t.title_b}</em>
          </h2>
          <p style={{ fontSize: 16, color: "var(--ink-3)", lineHeight: 1.6, margin: "0 0 28px", textWrap: "pretty" }}>{t.sub}</p>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 }}>
            {t.bullets.map((b, i) => (
              <li key={i} style={{ display: "flex", gap: 12, alignItems: "baseline", fontSize: 14, color: "var(--ink-2)" }}>
                <span className="mono" style={{ fontSize: 10, color: "var(--ink-3)" }}>0{i + 1}</span>
                <span style={{ textWrap: "pretty" }}>{b}</span>
              </li>
            ))}
          </ul>
        </div>

        <TraceVisual/>
      </div>
    </Section>
  );
}

function TraceVisual() {
  const narrow = window.useNarrow(768);
  return (
    <div style={{
      position: "relative",
      background: "var(--paper)", border: "1px solid var(--rule)", borderRadius: 10,
      padding: narrow ? 16 : 24,
      boxShadow: "0 24px 60px -24px rgba(20,20,15,0.16)",
      minWidth: 0, overflow: "hidden",
    }}>
      <div className="mono" style={{ fontSize: 10, color: "var(--ink-3)", letterSpacing: "0.08em", marginBottom: 14 }}>
        SUSTAINABILITY-REPORT-2024.PDF · PAGE 47
      </div>

      {/* mock document text with one highlighted line */}
      <div style={{ fontFamily: "Inter", fontSize: 12.5, lineHeight: 1.7, color: "var(--ink-3)" }}>
        <p style={{ margin: "0 0 10px" }}>
          <span style={{ background: "var(--bg-2)", padding: "0 2px" }}>...şirketimizin 2024 yılı toplam enerji tüketimi raporlama dönemi içerisinde önemli ölçüde değerlendirilmiştir. </span>
        </p>
        <p style={{ margin: "0 0 10px", position: "relative" }}>
          Üretim tesislerimizden alınan veriler ışığında,{" "}
          <span style={{
            background: "var(--accent-soft)",
            outline: "1.5px solid var(--accent)", outlineOffset: 2,
            padding: "0 3px", borderRadius: 1, color: "var(--ink)", fontWeight: 500,
          }}>
            Scope 1 doğrudan emisyonlarımız 8.421 tCO₂e
          </span>
          {" "}olarak ölçülmüş, Scope 2 dolaylı emisyonlarımız ise yıl sonunda netleştirilmiştir...
          {/* connector arrow */}
          {!narrow && (
          <span style={{
            position: "absolute", right: -16, top: 18,
            width: 32, height: 1, background: "var(--accent)",
          }}/>
          )}
        </p>
        <p style={{ margin: "0 0 10px" }}>
          Enerji yönetim sistemimiz <span style={{ color: "var(--ink-2)" }}>ISO 50001</span> standardına göre denetlenmiştir...
        </p>
      </div>

      {/* extracted card */}
      <div style={{
        marginTop: 18, padding: "14px 16px",
        border: "1px solid var(--accent)",
        background: "color-mix(in srgb, var(--accent-soft) 50%, var(--paper))",
        borderRadius: 8,
      }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 6 }}>
          <span className="mono" style={{ fontSize: 10, color: "var(--accent)", letterSpacing: "0.08em" }}>EXTRACTED</span>
          <span className="mono" style={{ fontSize: 10, color: "var(--ink-3)" }}>conf 0.97</span>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: narrow ? "minmax(0,1fr)" : "auto 1fr auto", gap: 12, alignItems: "center" }}>
          <div>
            <div className="mono" style={{ fontSize: 10, color: "var(--ink-3)", letterSpacing: "0.06em", textTransform: "uppercase" }}>Scope 1</div>
            <div className="serif" style={{ fontSize: 28, letterSpacing: "-0.02em", lineHeight: 1 }}>8.421 <span style={{ fontSize: 11, color: "var(--ink-3)" }}>tCO₂e</span></div>
          </div>
          <div className="mono" style={{ fontSize: 10, color: "var(--ink-3)", textAlign: "center" }}>
            p.47 · ¶3<br/>bbox 412 · 308<br/>w 218 · h 18
          </div>
          <div style={{ display: "flex", gap: 6 }}>
            <button style={{
              border: "1px solid var(--rule)", background: "var(--paper)", borderRadius: 6,
              padding: "6px 10px", fontSize: 11, color: "var(--ink-2)",
            }} className="mono">VIEW</button>
            <button style={{
              border: "1px solid var(--ink)", background: "var(--ink)", color: "var(--bg)", borderRadius: 6,
              padding: "6px 10px", fontSize: 11,
            }} className="mono">ACCEPT</button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.Trace = Trace;