const Hero = ({ onRequest, showImagery }) => {
  return (
    <section id="top" className="hero-section" style={{ paddingTop: 48, paddingBottom: 80, position: "relative", overflow: "hidden" }}>
      <div className="wrap" style={{ position: "relative" }}>
        <div style={{
          display: "grid", gridTemplateColumns: "minmax(0, 1.35fr) minmax(0, 1fr)", gap: 48, alignItems: "stretch",
        }} className="hero-grid">
          {/* LEFT — Slate hero panel */}
          <div className="hero-panel" style={{
            background: "var(--bg-slate)",
            color: "#fff",
            borderRadius: 28,
            padding: "52px 44px 44px",
            display: "grid",
            gap: 28,
            position: "relative",
            overflow: "hidden",
            minHeight: 560,
            minWidth: 0,
          }}>
            {/* Big watermark mark in corner */}
            <div aria-hidden style={{
              position: "absolute", right: -40, top: -40, opacity: .12,
            }}>
              <CraneMark size={320} color="#fff" accent="#fff"/>
            </div>

            <div style={{ display: "grid", gap: 28, position: "relative" }}>
              <span style={{
                display: "inline-flex", width: "fit-content",
                background: "rgba(255,255,255,.16)", color: "#fff",
                padding: "8px 14px", borderRadius: 999,
                fontSize: "calc(12px * var(--scale))", fontWeight: 600,
                letterSpacing: ".14em", textTransform: "uppercase",
                gap: 8, alignItems: "center",
              }}>
                <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--accent)" }}/>
                {t("hero.badge")}
              </span>

              <h1 className="hero-title" style={{
                fontSize: "clamp(40px, 6.4vw, 82px)",
                fontWeight: 800,
                lineHeight: 1.0,
                letterSpacing: "-0.04em",
                color: "#fff",
                overflowWrap: "break-word",
              }}>
                {t("hero.title1")}<br/>
                {t("hero.title2")} <span style={{ color: "var(--accent)" }}>{t("hero.titleAccent")}</span>.
              </h1>

              <p style={{ fontSize: "calc(19px * var(--scale))", color: "rgba(255,255,255,.85)", lineHeight: 1.5, maxWidth: 520 }}>
                {t("hero.subtitle")}
              </p>

              <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 12 }}>
                <button className="btn btn-mint btn-large" onClick={onRequest}>
                  {t("common.requestRide")} <Icon.arrow size={20}/>
                </button>
                <a href="tel:+4961511234567" className="btn btn-large" style={{ background: "rgba(255,255,255,.12)", color: "#fff", border: "1.5px solid rgba(255,255,255,.24)" }}>
                  <Icon.phone size={20}/> {t("common.phone")}
                </a>
              </div>

              <div style={{
                display: "flex", gap: 22, flexWrap: "wrap",
                marginTop: "auto", paddingTop: 24,
                borderTop: "1px solid rgba(255,255,255,.16)",
                fontSize: "calc(14px * var(--scale))", fontWeight: 500,
                color: "rgba(255,255,255,.9)",
              }}>
                {["shield", "clock", "doc"].map((ic, i) => {
                  const C = Icon[ic];
                  const label = t("hero.features")[i];
                  return (
                    <span key={ic} style={{ display: "inline-flex", gap: 8, alignItems: "center" }}>
                      <C size={18} stroke="var(--accent)" /> {label}
                    </span>
                  );
                })}
              </div>
            </div>
          </div>

          {/* RIGHT — Visual side */}
          <div style={{ position: "relative", display: "grid", gridTemplateColumns: "minmax(0, 1fr)", gap: 16, minWidth: 0 }}>
            {showImagery ? (
              <div style={{
                aspectRatio: "4 / 5", borderRadius: 28, minHeight: 360, flex: 1,
                overflow: "hidden", minWidth: 0,
              }}>
                <img src="images/mainpage/hero_v1.webp" alt={t("hero.heroImgLabel")}
                  width="1120" height="1400" fetchpriority="high"
                  style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>
              </div>
            ) : (
              <div className="ph-mint" style={{
                aspectRatio: "4 / 5", borderRadius: 28, minHeight: 360,
                display: "flex", alignItems: "center", justifyContent: "center",
                position: "relative", overflow: "hidden",
              }}>
                <CraneMark size={180} color="#fff" accent="rgba(255,255,255,.5)"/>
              </div>
            )}

            {/* Bottom row — 2 small cards */}
            <div className="hero-cards" style={{ display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)", gap: 16, alignItems: "stretch" }}>
              <div className="card" style={{ padding: 20, display: "flex", flexDirection: "column", justifyContent: "center" }}>
                <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
                  <div style={{
                    width: 40, height: 40, borderRadius: 12,
                    background: "var(--accent-soft)", color: "var(--accent-ink)",
                    display: "flex", alignItems: "center", justifyContent: "center",
                    flexShrink: 0,
                  }}>
                    <Icon.check size={20}/>
                  </div>
                  <div>
                    <div style={{ fontWeight: 700, fontSize: "calc(16.5px * var(--scale))" }}>{t("hero.cardTitle")}</div>
                    <div style={{ fontSize: "calc(14.5px * var(--scale))", color: "var(--ink-2)", marginTop: 2, fontWeight: 500 }}>
                      {t("hero.cardSub")}
                    </div>
                  </div>
                </div>
              </div>

              <div className="card" style={{ padding: 20, display: "flex", flexDirection: "column", justifyContent: "center" }}>
                <div style={{ display: "flex", gap: 10, alignItems: "center", marginBottom: 6 }}>
                  <div style={{ display: "flex", gap: 3 }} className="hero-stars">
                    {[1,2,3,4,5].map(i => (
                      <Icon.star key={i} size={18} fill="var(--accent)" stroke="var(--accent)"/>
                    ))}
                  </div>
                  <span style={{ fontWeight: 800, fontSize: "calc(18px * var(--scale))" }}>{t("hero.ratingValue")}</span>
                </div>
                <div style={{ fontSize: "calc(14.5px * var(--scale))", color: "var(--ink-2)", lineHeight: 1.4, fontWeight: 500 }}>
                  {t("hero.ratingSub")}
                </div>
              </div>
            </div>
          </div>
        </div>

        <style>{`
          @media (max-width: 960px) {
            .hero-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; }
          }
          /* Desktop: larger, higher-impact rating stars. */
          @media (min-width: 961px) {
            .hero-stars svg { width: 22px !important; height: 22px !important; }
          }
          @media (max-width: 640px) {
            .hero-section { padding-top: 0 !important; }
            .hero-panel { padding: 52px 24px 24px !important; }
            .hero-title { hyphens: auto; }
            .hero-cards { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </div>

      {/* Trust strip */}
      <div className="wrap" style={{ marginTop: 56 }}>
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0,
          background: "var(--surface)", borderRadius: 20,
          border: "1px solid var(--line)", overflow: "hidden",
        }} className="trust-strip">
          {t("hero.stats").map(([k, v], i) => (
            <div key={i} style={{
              padding: "28px 24px",
              borderRight: i < 3 ? "1px solid var(--line-soft)" : "none",
              textAlign: "center",
            }} className="trust-cell">
              <div style={{
                fontSize: "clamp(32px, 3.6vw, 44px)",
                fontWeight: 800,
                color: "var(--ink)",
                letterSpacing: "-0.035em",
                lineHeight: 1,
              }}>{k}</div>
              <div style={{ color: "var(--ink-2)", marginTop: 6, fontSize: "calc(14.5px * var(--scale))", fontWeight: 600, letterSpacing: ".01em" }}>{v}</div>
            </div>
          ))}
        </div>
        <style>{`
          @media (max-width: 720px) {
            .trust-strip { grid-template-columns: repeat(2, 1fr) !important; }
            .trust-cell { border-right: none !important; border-bottom: 1px solid var(--line-soft); }
          }
        `}</style>
      </div>
    </section>
  );
};

Object.assign(window, { Hero });