// QuoteCalcAlt.jsx — interactive calculator embedded in hero

const altQuoteStyles = {
  wrap: {
    background: "rgba(255,255,255,0.04)",
    border: "1px solid rgba(255,255,255,0.08)",
    backdropFilter: "blur(10px)",
    borderRadius: 20,
    overflow: "hidden",
    color: "#fff",
  },
  header: {
    padding: "20px 24px 0",
    display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 12,
  },
  title: { fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 14, color: "rgba(255,255,255,0.85)", letterSpacing: 0 },
  badge: { fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--gol-gold-400)" },
  modes: {
    display: "grid",
    gridTemplateColumns: "repeat(4, 1fr)",
    gap: 6,
    padding: "16px 16px 0",
  },
  mode: (active) => ({
    height: 44, display: "inline-flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 4,
    border: "1px solid " + (active ? "var(--gol-gold-500)" : "rgba(255,255,255,0.08)"),
    background: active ? "rgba(201,166,65,0.12)" : "transparent",
    color: active ? "#fff" : "rgba(255,255,255,0.6)",
    borderRadius: 10,
    fontFamily: "var(--font-display)",
    fontWeight: active ? 500 : 400,
    fontSize: 12,
    transition: "all 140ms",
  }),
  modeLabel: { fontSize: 11, letterSpacing: "0.04em" },

  fields: { padding: 16, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 },
  field: { display: "flex", flexDirection: "column", gap: 6 },
  label: { fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(255,255,255,0.5)" },
  fieldFull: { gridColumn: "1 / -1" },

  weightRow: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 },

  result: {
    margin: "0 16px 16px",
    background: "var(--gol-navy-800)",
    borderRadius: 14,
    padding: 18,
    display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, flexWrap: "wrap",
  },
  resultLeft: { display: "flex", flexDirection: "column", gap: 4 },
  resultLabel: { fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--gol-gold-400)" },
  resultPrice: { fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 30, color: "#fff", letterSpacing: "-0.01em", fontVariantNumeric: "tabular-nums" },
  resultMeta: { fontFamily: "var(--font-mono)", fontSize: 12, color: "rgba(255,255,255,0.55)" },
  ctaBtn: {
    height: 44, padding: "0 18px", borderRadius: 10,
    background: "var(--gol-gold-500)", color: "var(--gol-navy-900)", border: "none",
    fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 14,
    display: "inline-flex", alignItems: "center", gap: 8, cursor: "pointer",
    transition: "background 140ms",
  },
};

function QuoteCalcAlt() {
  const modes = [
    { id: "air",  label: "АВИА",  icon: "plane",       perKg: 480, days: "16–20", terms: "DDP", units: "₽" },
    { id: "sea",  label: "МОРЕ",  icon: "ship",        perKg: 195, days: "32–38", terms: "FCL/LCL", units: "₽" },
    { id: "road", label: "АВТО",  icon: "truck",       perKg: 320, days: "14–18", terms: "DDP", units: "₽" },
    { id: "rail", label: "Ж/Д",   icon: "train-front", perKg: 260, days: "20–26", terms: "DAP", units: "₽" },
  ];
  const [modeId, setModeId] = React.useState("road");
  const [from, setFrom] = React.useState("Гуанчжоу");
  const [to, setTo] = React.useState("Алматы");
  const [weight, setWeight] = React.useState("240");
  const [volume, setVolume] = React.useState("1,86");
  const mode = modes.find((m) => m.id === modeId);
  const total = (parseFloat(weight.replace(",", ".")) || 0) * mode.perKg;
  const totalFmt = total.toLocaleString("ru-RU", { maximumFractionDigits: 0 });

  return (
    <div style={altQuoteStyles.wrap}>
      <div style={altQuoteStyles.header}>
        <span style={altQuoteStyles.title}>Расчёт за 30 секунд</span>
        <span style={altQuoteStyles.badge}>LIVE</span>
      </div>
      <div style={altQuoteStyles.modes}>
        {modes.map((m) => (
          <button key={m.id} style={altQuoteStyles.mode(m.id === modeId)} onClick={() => setModeId(m.id)}>
            <Icon name={m.icon} size={14} />
            <span style={altQuoteStyles.modeLabel}>{m.label}</span>
          </button>
        ))}
      </div>
      <div style={altQuoteStyles.fields}>
        <div style={altQuoteStyles.field}>
          <span style={altQuoteStyles.label}>Откуда</span>
          <input className="input input--dark" value={from} onChange={(e) => setFrom(e.target.value)} />
        </div>
        <div style={altQuoteStyles.field}>
          <span style={altQuoteStyles.label}>Куда</span>
          <input className="input input--dark" value={to} onChange={(e) => setTo(e.target.value)} />
        </div>
        <div style={{ ...altQuoteStyles.field, ...altQuoteStyles.fieldFull }}>
          <span style={altQuoteStyles.label}>Вес и объём</span>
          <div style={altQuoteStyles.weightRow}>
            <div style={{ position: "relative" }}>
              <input className="input input--dark" value={weight} onChange={(e) => setWeight(e.target.value)} style={{ paddingRight: 36 }} />
              <span style={{ position: "absolute", right: 14, top: "50%", transform: "translateY(-50%)", fontFamily: "var(--font-mono)", fontSize: 12, color: "rgba(255,255,255,0.5)" }}>кг</span>
            </div>
            <div style={{ position: "relative" }}>
              <input className="input input--dark" value={volume} onChange={(e) => setVolume(e.target.value)} style={{ paddingRight: 36 }} />
              <span style={{ position: "absolute", right: 14, top: "50%", transform: "translateY(-50%)", fontFamily: "var(--font-mono)", fontSize: 12, color: "rgba(255,255,255,0.5)" }}>м³</span>
            </div>
          </div>
        </div>
      </div>
      <div style={altQuoteStyles.result}>
        <div style={altQuoteStyles.resultLeft}>
          <span style={altQuoteStyles.resultLabel}>{mode.label} · {mode.terms} · {mode.days} дней</span>
          <span style={altQuoteStyles.resultPrice} className="numeric">от {totalFmt} ₽</span>
          <span style={altQuoteStyles.resultMeta}>{mode.perKg} ₽/кг · {from} → {to}</span>
        </div>
        <button style={altQuoteStyles.ctaBtn}>
          Получить расчёт
          <Icon name="arrow-right" size={16} />
        </button>
      </div>
    </div>
  );
}

window.QuoteCalcAlt = QuoteCalcAlt;