// Hero section.
const { Button: HButton, SectionLabel: HLabel, Stat: HStat } = window.DesignSystem_82a491;

function Hero() {
  const Icon = window.Icon;
  return (
    <section id="top" style={{ position: "relative", padding: "calc(var(--header-height) + 56px) 40px 72px", marginTop: "calc(var(--header-height) * -1)" }}>
      {/* full-bleed background photo (real, blurred — source thumbnails are low-res) */}
      <window.Photo src="../../assets/photos/naikan.png?hq2" cap="" blur={6} style={{ position: "absolute", inset: 0, zIndex: 0 }} />
      <div style={{ position: "absolute", inset: 0, zIndex: 1, background: "linear-gradient(100deg, rgba(18,38,56,0.94) 0%, rgba(18,38,56,0.80) 46%, rgba(18,38,56,0.55) 100%)" }} />
      <div style={{ position: "relative", zIndex: 2, maxWidth: "var(--container-lg)", margin: "0 auto" }}>
        <div style={{ maxWidth: 620 }}>
          <HLabel style={{ marginBottom: 22 }}>地域に根ざして35年</HLabel>
          <h1 style={{ fontFamily: "var(--font-mincho)", fontWeight: 800, fontSize: "clamp(40px, 5vw, 68px)", lineHeight: 1.2, letterSpacing: "var(--tracking-tight)", color: "#fff", margin: 0 }}>
            造り手の顔が見える、<br />心のこもった住まい造り。
          </h1>
          <p style={{ fontSize: "var(--text-lg)", lineHeight: "var(--leading-relaxed)", color: "rgba(255,255,255,0.86)", marginTop: 24, maxWidth: 520 }}>
            “小さな工務店”だからこそできる、ていねいな家づくり。新築・増改築・リフォームまで、家のことなら何でもご相談ください。
          </p>
          <div style={{ display: "flex", gap: 14, marginTop: 34, flexWrap: "wrap" }}>
            <HButton variant="accent" size="lg" href="contact.html" iconRight={<Icon name="arrow-right" size={18} stroke={2.2} />}>
              無料で相談する
            </HButton>
            <HButton variant="secondary" size="lg" href="works.html" style={{ background: "rgba(255,255,255,0.08)", color: "#fff", borderColor: "rgba(255,255,255,0.5)" }}>
              施工事例を見る
            </HButton>
          </div>
          <div style={{ display: "flex", gap: 44, marginTop: 48 }}>
            {[["35", "年", "創業からの歩み"], ["6", "市", "対応エリア"], ["無料", "", "見積・相談"]].map(([v, u, l], i) => (
              <div key={i} style={{ borderLeft: i ? "1px solid rgba(255,255,255,0.2)" : "none", paddingLeft: i ? 28 : 0 }}>
                <div style={{ display: "flex", alignItems: "baseline", gap: 3 }}>
                  <span style={{ fontFamily: "var(--font-mono)", fontWeight: 600, fontSize: 38, color: "#fff", lineHeight: 1 }}>{v}</span>
                  <span style={{ fontWeight: 700, fontSize: 16, color: "var(--kaki-300)" }}>{u}</span>
                </div>
                <div style={{ fontSize: "var(--text-sm)", color: "rgba(255,255,255,0.7)", marginTop: 6 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;