// MissionQuoteAlt.jsx — big mission statement as a quote panel

const altMissionStyles = {
  section: { background: "#fff" },
  panel: {
    background: "linear-gradient(135deg, var(--gol-navy-50) 0%, #ffffff 100%)",
    border: "1px solid var(--gol-navy-100)",
    borderRadius: 28,
    padding: "64px 64px",
    display: "grid", gridTemplateColumns: "auto 1fr", gap: 56, alignItems: "center",
  },
  badge: {
    display: "inline-flex", flexDirection: "column", alignItems: "center", gap: 16,
    padding: "32px 36px",
    background: "var(--gol-navy-800)",
    color: "#fff",
    borderRadius: 20,
    minWidth: 200,
  },
  badgeIcon: { width: 64, height: 64, borderRadius: 16, background: "rgba(201,166,65,0.16)", color: "var(--gol-gold-400)", display: "inline-flex", alignItems: "center", justifyContent: "center" },
  badgeLabel: { fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--gol-gold-400)" },
  badgeText: { fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 18, color: "#fff", textAlign: "center", lineHeight: 1.2 },

  copy: { display: "flex", flexDirection: "column", gap: 22 },
  eyebrow: {},
  quote: {
    fontFamily: "var(--font-display)",
    fontWeight: 500,
    fontSize: "clamp(22px, 2.4vw, 30px)",
    lineHeight: 1.32,
    letterSpacing: "-0.01em",
    color: "var(--fg)",
  },
  accent: { color: "var(--gol-gold-700)" },
  by: { display: "flex", alignItems: "center", gap: 12, marginTop: 8 },
  byLogo: { height: 28 },
  bySep: { width: 1, height: 24, background: "var(--gol-navy-200)" },
  byText: { fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 13, color: "var(--fg-muted)" },
};

function MissionQuoteAlt() {
  return (
    <section className="section" style={altMissionStyles.section}>
      <div className="container">
        <div style={altMissionStyles.panel}>
          <div style={altMissionStyles.badge}>
            <span style={altMissionStyles.badgeIcon}><Icon name="compass" size={36} strokeWidth={1.5} /></span>
            <span style={altMissionStyles.badgeLabel}>МИССИЯ</span>
            <span style={altMissionStyles.badgeText}>Gold Orient<br />Logistics</span>
          </div>
          <div style={altMissionStyles.copy}>
            <span className="eyebrow">ПОЧЕМУ МЫ РАБОТАЕМ</span>
            <p style={altMissionStyles.quote}>
              Создавать <span style={altMissionStyles.accent}>безупречную логистическую связь</span> между
              бизнесом и возможностями Китая. Мы берём на себя всю сложность цепочки поставок, чтобы
              наши клиенты могли сосредоточиться на росте своего дела — будучи абсолютно уверенными
              в безопасности, сроках и честной цене каждого килограмма своего груза.
            </p>
            <div style={altMissionStyles.by}>
              <img src="assets/GOL-Blue.svg" alt="GOL" style={altMissionStyles.byLogo} />
              <span style={altMissionStyles.bySep} />
              <span style={altMissionStyles.byText}>Команда Gold Orient · 2026</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.MissionQuoteAlt = MissionQuoteAlt;