const Vehicle = ({ showImagery }) => {
  const features = t("vehicle.features");
  return (
    <section id="vehicle">
      <div className="wrap">
        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 56, alignItems: "center",
        }} className="veh-grid">
          <div>
            <div style={{ position: "relative" }}>
              {showImagery ? (
                <div style={{ aspectRatio: "5 / 4", borderRadius: 24, overflow: "hidden", minWidth: 0 }}>
                  <img src="images/mainpage/car_v1.webp" alt={t("vehicle.imgLabel")}
                    width="1302" height="1042" loading="lazy" decoding="async"
                    style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>
                </div>
              ) : (
                <div className="ph-slate" style={{
                  aspectRatio: "5 / 4", borderRadius: 24,
                  display: "flex", alignItems: "center", justifyContent: "center",
                  color: "#fff",
                }}>
                  <Icon.car size={140} strokeWidth={1.25}/>
                </div>
              )}
            </div>
          </div>

          <div>
            <span className="eyebrow">{t("vehicle.eyebrow")}</span>
            <h2 style={{ fontSize: "clamp(32px, 4.4vw, 48px)", fontWeight: 800, marginTop: 16, marginBottom: 16, lineHeight: 1.0, letterSpacing: "-0.035em" }}>
              {t("vehicle.title")}
            </h2>
            <p style={{ color: "var(--ink-2)", fontSize: "calc(18px * var(--scale))", marginBottom: 32 }}>
              {t("vehicle.body")}
            </p>

            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }} className="veh-feat">
              {features.map((f, i) => {
                const C = Icon[f.ic];
                return (
                  <div key={i} style={{ display: "grid", gap: 10 }}>
                    <div style={{
                      width: 44, height: 44, borderRadius: 12,
                      background: "var(--accent-soft)", color: "var(--accent-ink)",
                      display: "flex", alignItems: "center", justifyContent: "center",
                    }}><C size={22}/></div>
                    <div>
                      <div style={{ fontWeight: 600, fontSize: "calc(16px * var(--scale))" }}>{f.t}</div>
                      <div style={{ color: "var(--ink-3)", fontSize: "calc(14px * var(--scale))", lineHeight: 1.5 }}>{f.d}</div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
        <style>{`
          @media (max-width: 960px) {
            .veh-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
            .veh-feat { grid-template-columns: 1fr 1fr !important; }
          }
        `}</style>
      </div>
    </section>
  );
};

Object.assign(window, { Vehicle });