// CBAM free calculator wedge — interactive mini-tool
function Calculator({ t }) {
  const narrow = window.useNarrow(768);
  const [sector, setSector] = React.useState("steel");
  const [tons, setTons] = React.useState(20000);
  const [method, setMethod] = React.useState("eaf"); // eaf vs bof

  // very rough emission factors — illustrative
  const factor = {
    steel:    { eaf: 0.4, bof: 1.9, label: "Demir-çelik" },
    cement:   { eaf: 0.6, bof: 0.85, label: "Çimento" },
    fert:     { eaf: 1.6, bof: 2.4, label: "Gübre" },
    alu:      { eaf: 1.5, bof: 11.6, label: "Alüminyum" },
  }[sector];

  const ef = factor[method];
  const tco2 = tons * ef;
  const cbamPrice = 85; // EUR/tCO2 (illustrative 2027 estimate)
  const etsTr = 12;     // EUR/tCO2 Türkiye ETS
  const gross = tco2 * cbamPrice;
  const net = tco2 * (cbamPrice - etsTr);

  return (
    <Section id="calc" style={{ background: "var(--ink)", color: "var(--bg)", borderTop: "1px solid var(--ink)" }}>
      <div style={{ display: "grid", gridTemplateColumns: narrow ? "minmax(0,1fr)" : "1fr 1.1fr", gap: narrow ? 36 : 64, alignItems: "center" }}>
        <div>
          <span className="kicker" style={{ color: "var(--bg-2)" }}>
            <i className="dot" style={{ background: "var(--accent-2)" }}/>{t.kicker}
          </span>
          <h2 className="serif" style={{
            fontSize: "clamp(40px, 5vw, 64px)", lineHeight: 1.02, letterSpacing: "-0.02em",
            margin: "16px 0 18px", fontWeight: 400, color: "var(--bg)",
          }}>
            {t.title_a}<br/>
            <em style={{ fontStyle: "italic", color: "var(--accent-2)" }}>{t.title_b}</em>
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.6, color: "color-mix(in srgb, var(--bg) 70%, transparent)", margin: "0 0 24px", maxWidth: 460, textWrap: "pretty" }}>{t.sub}</p>
          <div className="mono" style={{ fontSize: 11, letterSpacing: "0.06em", color: "color-mix(in srgb, var(--bg) 50%, transparent)", marginBottom: 24 }}>
            {t.meta}
          </div>
          <a className="btn" href="#demo" style={{
            background: "var(--bg)", color: "var(--ink)", border: "1px solid var(--bg)",
          }}>{t.cta} →</a>
        </div>

        {/* live calculator */}
        <div style={{
          background: "color-mix(in srgb, var(--bg) 6%, transparent)",
          border: "1px solid color-mix(in srgb, var(--bg) 20%, transparent)",
          borderRadius: 12, padding: 24,
          backdropFilter: "blur(8px)",
        }}>
          <div className="mono" style={{ fontSize: 10, letterSpacing: "0.08em", color: "color-mix(in srgb, var(--bg) 50%, transparent)", marginBottom: 16 }}>
            CBAM COST ESTIMATOR · v0.3 · İLLÜSTRATİF
          </div>

          <Field label="Sektör">
            <Segmented value={sector} onChange={setSector} dark options={[
              { v: "steel", l: "Demir-çelik" }, { v: "cement", l: "Çimento" },
              { v: "fert", l: "Gübre" }, { v: "alu", l: "Alüminyum" },
            ]}/>
          </Field>

          <Field label="Yıllık ihracat hacmi" right={<span className="mono" style={{ fontSize: 12, color: "var(--bg)" }}>{tons.toLocaleString("tr-TR")} t</span>}>
            <input type="range" min={1000} max={500000} step={1000} value={tons}
              onChange={e => setTons(Number(e.target.value))}
              style={{ width: "100%", accentColor: "var(--accent-2)" }}/>
          </Field>

          <Field label="Üretim metodu">
            <Segmented value={method} onChange={setMethod} dark options={
              sector === "steel" ? [{ v: "eaf", l: "EAF (elektrik ark)" }, { v: "bof", l: "BOF (entegre)" }]
              : sector === "cement" ? [{ v: "eaf", l: "Karbon yakalamalı" }, { v: "bof", l: "Standart" }]
              : sector === "fert" ? [{ v: "eaf", l: "Mavi amonyak" }, { v: "bof", l: "Gri amonyak" }]
              : [{ v: "eaf", l: "Hidroelektrik" }, { v: "bof", l: "Karışık şebeke" }]
            }/>
          </Field>

          <hr style={{ border: 0, borderTop: "1px solid color-mix(in srgb, var(--bg) 18%, transparent)", margin: "20px 0" }}/>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
            <Stat label="Gömülü emisyon" v={tco2.toLocaleString("tr-TR", { maximumFractionDigits: 0 })} u="tCO₂e"/>
            <Stat label="Brüt CBAM bedeli" v={`€ ${(gross / 1e6).toFixed(2)}M`} u={`@ €${cbamPrice}/t`}/>
          </div>
          <div style={{ marginTop: 14, padding: "14px 16px", background: "var(--accent)", borderRadius: 8 }}>
            <div className="mono" style={{ fontSize: 10, letterSpacing: "0.08em", color: "color-mix(in srgb, var(--bg) 70%, transparent)" }}>
              TR ETS DÜŞÜMÜ SONRASI · NET YIL
            </div>
            <div className="serif" style={{ fontSize: narrow ? 30 : 36, lineHeight: 1, marginTop: 6, color: "var(--bg)", letterSpacing: "-0.02em" }}>
              € {(net / 1e6).toFixed(2)}M <span className="mono" style={{ fontSize: 12 }}>/ yıl</span>
            </div>
          </div>
          <div className="mono" style={{ fontSize: 10, letterSpacing: "0.04em", color: "color-mix(in srgb, var(--bg) 40%, transparent)", marginTop: 12 }}>
            Tahminler 2027 piyasa ortalamalarına dayanır. Tam hesap için belge yükleyin.
          </div>
        </div>
      </div>
    </Section>
  );
}

function Field({ label, right, children }) {
  return (
    <div style={{ marginBottom: 14 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 6 }}>
        <span className="mono" style={{ fontSize: 10, letterSpacing: "0.08em", color: "color-mix(in srgb, var(--bg) 60%, transparent)", textTransform: "uppercase" }}>{label}</span>
        {right}
      </div>
      {children}
    </div>
  );
}

function Segmented({ value, onChange, options, dark }) {
  return (
    <div style={{
      display: "flex", padding: 3,
      background: dark ? "color-mix(in srgb, var(--bg) 8%, transparent)" : "var(--bg-2)",
      borderRadius: 8,
      gap: 2,
    }}>
      {options.map(o => (
        <button key={o.v} onClick={() => onChange(o.v)} style={{
          flex: 1, border: 0, padding: "8px 6px", borderRadius: 6,
          background: value === o.v ? (dark ? "var(--bg)" : "var(--paper)") : "transparent",
          color: value === o.v ? (dark ? "var(--ink)" : "var(--ink)") : (dark ? "color-mix(in srgb, var(--bg) 70%, transparent)" : "var(--ink-3)"),
          fontSize: 12, fontWeight: 500,
          transition: "all .15s",
        }}>{o.l}</button>
      ))}
    </div>
  );
}

function Stat({ label, v, u }) {
  return (
    <div>
      <div className="mono" style={{ fontSize: 10, letterSpacing: "0.06em", color: "color-mix(in srgb, var(--bg) 55%, transparent)", textTransform: "uppercase" }}>{label}</div>
      <div className="serif" style={{ fontSize: 28, lineHeight: 1.1, marginTop: 4, color: "var(--bg)", letterSpacing: "-0.01em" }}>{v}</div>
      <div className="mono" style={{ fontSize: 10, color: "color-mix(in srgb, var(--bg) 45%, transparent)", marginTop: 2 }}>{u}</div>
    </div>
  );
}

window.Calculator = Calculator;