(() => {
  window.MamoruApp = window.MamoruApp || {};

  const { C, NS, Eyebrow, useIsMobile } = window.MamoruApp;

  window.MamoruApp.Hero = function Hero({ heroFont, setPage }) {
    const mobile = useIsMobile();
    const heroImage = "./assets/images/hero-night-walk-photo.png";
    const heroTags = ["女性向け", "夜道・帰宅時", "比較ガイド"];

    return (
      <section
        className="hero-split"
        style={{
          position: "relative",
          minHeight: mobile ? 620 : 760,
          backgroundImage: `linear-gradient(90deg, rgba(22, 22, 27, 0.68) 0%, rgba(22, 22, 27, 0.48) 34%, rgba(22, 22, 27, 0.18) 68%, rgba(22, 22, 27, 0.14) 100%), url(${heroImage})`,
          backgroundSize: "cover",
          backgroundPosition: mobile ? "74% center" : "center center",
          overflow: "hidden",
        }}
      >
        <div
          className="hero-photo__overlay"
          style={{
            padding: mobile ? "56px 28px 42px" : "84px 72px 76px",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            minHeight: "100%",
          }}
        >
          <div
            style={{
              width: mobile ? "100%" : "min(48vw, 620px)",
              padding: mobile ? "0" : "0",
            }}
          >
            <Eyebrow light>夜道を、あきらめないために。</Eyebrow>
            <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginBottom: 18 }}>
              {heroTags.map((tag) => (
                <span
                  key={tag}
                  style={{
                    fontSize: 11,
                    fontFamily: NS,
                    color: "rgba(255,255,255,0.92)",
                    border: "1px solid rgba(255,255,255,0.24)",
                    background: "rgba(255,255,255,0.08)",
                    padding: "7px 12px",
                    borderRadius: 999,
                    letterSpacing: "0.05em",
                    backdropFilter: "blur(6px)",
                  }}
                >
                  {tag}
                </span>
              ))}
            </div>
            <h1
              style={{
                fontSize: "clamp(40px,5.7vw,68px)",
                fontFamily: heroFont,
                color: "#fff",
                lineHeight: 1.34,
                letterSpacing: "0.04em",
                marginBottom: 20,
                textShadow: "0 10px 26px rgba(0,0,0,0.22)",
              }}
            >
              女性のための、
              <br />
              防犯グッズ選びガイド。
            </h1>
            <p
              style={{
                fontSize: 15,
                fontFamily: NS,
                color: "rgba(255,255,255,0.88)",
                lineHeight: 1.9,
                marginBottom: 18,
                maxWidth: 520,
              }}
            >
              夜道や帰宅時の不安に備えるために、
              <br />
              防犯ブザー・小型ライト・GPSタグなどの選び方を
              <br />
              やさしく整理して紹介します。
            </p>
            <div
              style={{
                display: "inline-flex",
                alignItems: "center",
                gap: 8,
                padding: "10px 14px",
                borderRadius: 14,
                background: "rgba(15, 17, 28, 0.28)",
                border: "1px solid rgba(255,255,255,0.16)",
                marginBottom: 24,
                maxWidth: 540,
              }}
            >
              <span
                style={{
                  width: 6,
                  height: 6,
                  borderRadius: "50%",
                  background: "rgba(255,255,255,0.82)",
                  flexShrink: 0,
                }}
              />
              <span
                style={{
                  fontSize: 12,
                  fontFamily: NS,
                  color: "rgba(255,255,255,0.82)",
                  lineHeight: 1.7,
                  letterSpacing: "0.03em",
                }}
              >
                ECサイトではなく、女性向け防犯グッズの情報・比較サイトです。
              </span>
            </div>
            <div style={{ display: "flex", gap: 14, flexWrap: "wrap", alignItems: "center" }}>
            <button
              onClick={() => setPage("guides")}
              style={{
                fontSize: 14,
                fontFamily: NS,
                fontWeight: 500,
                color: C.navy,
                background: "#fff",
                padding: "12px 28px",
                borderRadius: 40,
                letterSpacing: "0.05em",
                transition: "opacity 160ms",
              }}
              onMouseEnter={(e) => (e.currentTarget.style.opacity = 0.88)}
              onMouseLeave={(e) => (e.currentTarget.style.opacity = 1)}
            >
              防犯グッズの選び方を見る
            </button>
            <button
              onClick={() => setPage("products")}
              style={{
                fontSize: 14,
                fontFamily: NS,
                fontWeight: 500,
                color: "#fff",
                border: "1px solid rgba(255,255,255,0.36)",
                background: "rgba(255,255,255,0.08)",
                padding: "12px 24px",
                borderRadius: 40,
                letterSpacing: "0.04em",
                transition: "background 150ms, border-color 150ms",
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.background = "rgba(255,255,255,0.14)";
                e.currentTarget.style.borderColor = "rgba(255,255,255,0.5)";
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.background = "rgba(255,255,255,0.08)";
                e.currentTarget.style.borderColor = "rgba(255,255,255,0.36)";
              }}
            >
              種類別に比較する
            </button>
            </div>
          </div>
        </div>
      </section>
    );
  };
})();