const { Badge, Button, Logo } = window.NoahBOXDesignSystem_a2fe90;

function Hero() {
  return (
    <section style={{ position: "relative", overflow: "hidden", background: "var(--gradient-hero)" }}>
      <div style={{ position: "absolute", right: "-6%", top: "-18%", width: 520, height: 520, borderRadius: "50%", background: "rgba(255,214,80,0.9)", filter: "blur(0px)", opacity: 0.85 }} />
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(100deg, var(--cyan-500) 0%, rgba(21,101,192,0.92) 46%, rgba(11,42,91,0.92) 100%)" }} />
      <div style={{ position: "relative", maxWidth: "var(--container-wide)", margin: "0 auto", padding: "var(--space-16) var(--gutter)", display: "grid", gridTemplateColumns: "minmax(0,1fr) minmax(0,600px)", gap: "var(--space-4)", alignItems: "center" }}>
        <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", gap: "var(--space-4)" }}>
          <Badge tone="orange" size="lg">請求書管理をもっと簡単に</Badge>
          <Badge tone="cyan">電子帳簿保存法対応</Badge>
          <h1 style={{ fontSize: 46, color: "var(--white)", lineHeight: 1.3, marginTop: "var(--space-2)" }}>
            請求書も、<br />ファイル共有も、<br />社内チャットも。<br />ひとつの箱で、すっきり管理。
          </h1>
          <p style={{ font: "var(--type-body-lg)", color: "rgba(255,255,255,0.92)" }}>
            必要な情報がすぐ見つかる。<br />中小企業の業務をシンプルにするクラウドストレージ。
          </p>
          <div style={{ display: "flex", gap: "var(--space-4)", marginTop: "var(--space-2)", flexWrap: "wrap" }}>
            <Button size="lg" icon="chevron-right" style={{ background: "var(--blue-700)" }}>無料で相談する</Button>
            <Button size="lg" variant="onDark" icon="download" iconPosition="left">資料をダウンロード</Button>
          </div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginTop: "var(--space-4)", padding: "10px 22px", borderRadius: "var(--radius-pill)", background: "rgba(255,255,255,0.92)", boxShadow: "var(--shadow-card)" }}>
            <span style={{ font: "var(--type-body)", fontWeight: "var(--weight-bold)", color: "var(--text-heading)" }}>月額</span>
            <span style={{ fontFamily: "var(--font-number)", fontWeight: "var(--weight-bold)", fontSize: 32, color: "var(--text-heading)", letterSpacing: "var(--tracking-latin)" }}>6,600</span>
            <span style={{ font: "var(--type-body)", fontWeight: "var(--weight-bold)", color: "var(--text-heading)" }}>円</span>
            <span style={{ font: "var(--type-caption)", color: "var(--text-muted)" }}>(税込)〜</span>
          </div>
        </div>
        <div style={{ position: "relative", minHeight: 560, marginLeft: -171 }}>
          {/* Background-removed cutout (assets/hero-photo-cutout.png) generated from the
              reference photo crop so it floats directly on the hero gradient. Still a
              reference-quality source photo — swap for the licensed photograph when available.
              Sized up and pulled left (negative margin) so her raised palm sits close to the
              end of the headline, per the requested "手のひらをすっきり管理に近づける" layout. */}
          <img
            src="/assets/hero-photo-cutout.png"
            alt=""
            style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "contain", objectPosition: "center bottom", filter: "drop-shadow(0 24px 32px rgba(11,42,91,0.35))" }}
          />
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Hero });