function Hero() {
  const isMobile = useMediaQuery("(max-width: 768px)");
  return (
    <section
      style={{
        padding: isMobile ? "96px 20px 56px" : "100px 48px 80px",
        background: "var(--bg-base)",
        position: "relative",
        overflow: "hidden",
      }}
    >
      {/* ===== Background layers (warm, light) ===== */}
      {/* soft peach/cream wash — top right */}
      <div style={{
        position: "absolute",
        top: -200, right: -180,
        width: 680, height: 680,
        borderRadius: "50%",
        background: "radial-gradient(circle at center, rgba(255,232,210,0.55) 0%, rgba(255,232,210,0.0) 65%)",
        pointerEvents: "none",
        filter: "blur(12px)",
      }} />
      {/* soft purple accent — bottom left, subtle */}
      <div style={{
        position: "absolute",
        bottom: -100, left: -140,
        width: 420, height: 420,
        borderRadius: "50%",
        background: "radial-gradient(circle at center, rgba(232,224,255,0.5) 0%, transparent 70%)",
        pointerEvents: "none",
        filter: "blur(10px)",
      }} />
      {/* subtle dot grid — warm tone */}
      <div style={{
        position: "absolute",
        inset: 0,
        backgroundImage: "radial-gradient(rgba(168,140,100,0.18) 1px, transparent 1px)",
        backgroundSize: "28px 28px",
        maskImage: "radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 80%)",
        WebkitMaskImage: "radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 80%)",
        opacity: 0.5,
        pointerEvents: "none",
      }} />
      {/* oversized watermark type — warm, very subtle */}
      <div style={{
        position: "absolute",
        top: 40, right: 32,
        fontFamily: 'var(--font-serif)',
        fontStyle: "italic",
        fontSize: isMobile ? 120 : 220,
        color: "rgba(124,92,255,0.08)",
        lineHeight: 0.9,
        fontWeight: 400,
        pointerEvents: "none",
        userSelect: "none",
        writingMode: "vertical-rl",
        letterSpacing: "-0.04em",
        display: isMobile ? "none" : "block",
      }}>AI</div>

      <div style={{ maxWidth: 1280, margin: "0 auto", position: "relative" }}>
        <Reveal delay={80}>
          <h1
            style={{
              fontFamily: 'var(--font-serif)',
              fontSize: "clamp(56px, 7.2vw, 104px)",
              lineHeight: 1.04,
              fontWeight: 400,
              color: "#1A1A1A",
              margin: 0,
              letterSpacing: "-0.02em",
              maxWidth: 1100,
            }}
          >
            <span style={{ fontFamily: 'var(--font-serif)', fontStyle: "italic" }}>From</span> SIer<br />
            to <span style={{ fontFamily: 'var(--font-serif)', fontStyle: "italic", color: "var(--purple)" }}>AIer</span><em style={{ fontFamily: 'var(--font-serif)', fontStyle: "italic", color: "var(--purple)" }}>.</em>
          </h1>
        </Reveal>

        <Reveal delay={160}>
          <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1.2fr 1fr", gap: isMobile ? 36 : 64, alignItems: "end", marginTop: isMobile ? 32 : 48 }}>
            <div>
              <div style={{
                fontFamily: 'var(--font-serif)',
                fontSize: 26,
                fontWeight: 500,
                color: "#1A1A1A",
                lineHeight: 1.55,
                letterSpacing: "0.01em",
              }}>
                SIer から、AIer へ。
              </div>
              <p style={{
                fontFamily: 'var(--font-sans)',
                fontSize: 16,
                lineHeight: 1.9,
                color: "#6B6B6B",
                marginTop: 24,
                maxWidth: 540,
              }}>
                AIエージェントと人が協働して、会社は動く。<br />
                私たちはそれを自社で実践しながら、AI時代の人材のかたちをつくる。
              </p>
              <div style={{ display: "flex", gap: 12, marginTop: 40, flexWrap: "wrap" }}>
                <Button variant="primary" href="recruit/index.html">採用情報を見る</Button>
                <Button variant="secondary" href="contact.html">お問い合わせ</Button>
              </div>
            </div>

            {/* Right: compact meta card */}
            <div style={{
              display: "grid",
              gridTemplateColumns: "1fr 1fr",
              gap: isMobile ? 12 : 16,
              maxWidth: isMobile ? "none" : 440,
              width: "100%",
              justifySelf: isMobile ? "stretch" : "end",
            }}>
              <MetaTile k="FOUNDED" v="2024" sub="Tokyo, Japan" />
              <MetaTile k="BACKED BY" img="uploads/eastventures-logo.png" imgAlt="East Ventures" />
              <MetaTile k="AI USAGE" v="90%" sub="日常的に活用" accent />
              <MetaTile k="MODEL" v="AIer" sub="agents × people" dark />
            </div>
          </div>
        </Reveal>

      </div>

      {/* Photo marquee — full-bleed, 2 rows, endless scroll */}
      <Reveal delay={240}>
        <div style={{ marginTop: isMobile ? 52 : 96, position: "relative" }}>
          <PhotoMarquee row="a" direction="left" />
          <div style={{ height: 14 }} />
          <PhotoMarquee row="b" direction="right" />
        </div>
      </Reveal>
    </section>
  );
}

function PhotoMarquee({ row, direction }) {
  // Natural-color photos (no overlay). Each row uses a different mix and position.
  const setA = [
    { src: "uploads/photos/team-formal.jpg",     pos: "50% 35%" },
    { src: "uploads/photos/team-working.jpg",    pos: "50% 50%" },
    { src: "uploads/photos/pair-meeting-1.jpg",  pos: "50% 45%" },
    { src: "uploads/photos/team-discussion.jpg", pos: "50% 45%" },
    { src: "uploads/photos/team-cheer.jpg",      pos: "50% 45%" },
    { src: "uploads/photos/team-seated.jpg",     pos: "50% 45%" },
    { src: "uploads/photos/pair-meeting-2.jpg",  pos: "50% 45%" },
    { src: "uploads/photos/team-outdoor.jpg",    pos: "50% 45%" },
  ];
  const setB = [
    { src: "uploads/photos/team-outdoor.jpg",    pos: "50% 50%" },
    { src: "uploads/photos/team-discussion.jpg", pos: "50% 45%" },
    { src: "uploads/photos/pair-meeting-2.jpg",  pos: "50% 45%" },
    { src: "uploads/photos/team-working.jpg",    pos: "50% 50%" },
    { src: "uploads/photos/team-seated.jpg",     pos: "50% 45%" },
    { src: "uploads/photos/team-formal.jpg",     pos: "50% 35%" },
    { src: "uploads/photos/pair-meeting-1.jpg",  pos: "50% 45%" },
    { src: "uploads/photos/team-cheer.jpg",      pos: "50% 45%" },
  ];
  const items = row === "a" ? setA : setB;
  // Duplicate for seamless loop
  const loop = [...items, ...items];
  const animName = direction === "left" ? "marqueeLeft" : "marqueeRight";
  const duration = row === "a" ? 60 : 70;

  return (
    <div style={{ position: "relative", width: "100%", overflow: "hidden" }}>
      <style>{`
        @keyframes marqueeLeft {
          from { transform: translateX(0); }
          to   { transform: translateX(-50%); }
        }
        @keyframes marqueeRight {
          from { transform: translateX(-50%); }
          to   { transform: translateX(0); }
        }
        .photo-marquee-track { animation-play-state: running; }
        .photo-marquee-track:hover { animation-play-state: paused; }
      `}</style>
      {/* Edge fades */}
      <div style={{ position: "absolute", inset: 0, pointerEvents: "none", zIndex: 2,
        background: "linear-gradient(90deg, var(--bg-base) 0%, transparent 6%, transparent 94%, var(--bg-base) 100%)" }} />
      <div
        className="photo-marquee-track"
        style={{
          display: "flex",
          gap: 14,
          width: "fit-content",
          animation: `${animName} ${duration}s linear infinite`,
        }}
      >
        {loop.map((it, i) => (
          <div key={i} style={{
            flex: "0 0 auto",
            width: 300,
            height: 200,
            borderRadius: 10,
            overflow: "hidden",
            position: "relative",
            background: "#EDE7DD",
            boxShadow: "0 4px 16px rgba(26,21,48,0.06)",
          }}>
            <img src={it.src} alt=""
              style={{
                width: "100%", height: "100%",
                objectFit: "cover",
                objectPosition: it.pos,
                display: "block",
              }}
            />
          </div>
        ))}
      </div>
    </div>
  );
}

function MetaTile({ k, v, sub, accent, dark, img, imgAlt, imgHeight = 26 }) {
  const plain = !dark && !accent;
  const bg = dark ? "#1A1530" : (accent ? "linear-gradient(135deg,#7C5CFF 0%,#E8E0FF 100%)" : "var(--glass-bg-strong)");
  const color = dark || accent ? "#fff" : "#1A1A1A";
  const labelColor = dark ? "#B0A8CC" : (accent ? "rgba(255,255,255,0.85)" : "#6B6B6B");
  return (
    <div style={{
      background: bg,
      border: plain ? "var(--glass-border)" : "none",
      backdropFilter: plain ? "var(--glass-blur)" : "none",
      WebkitBackdropFilter: plain ? "var(--glass-blur)" : "none",
      boxShadow: plain ? "var(--glass-shadow)" : "none",
      borderRadius: "var(--radius-md)",
      padding: 18,
      color,
      minHeight: 92,
      display: "flex",
      flexDirection: "column",
      justifyContent: "space-between",
    }}>
      <div style={{ fontFamily: 'var(--font-mono-label)', fontSize: 10, letterSpacing: "0.18em", color: labelColor, fontWeight: 500 }}>{k}</div>
      {img ? (
        <div style={{ display: "flex", alignItems: "center" }}>
          <img src={img} alt={imgAlt || k} style={{ height: imgHeight, width: "auto", display: "block" }} />
        </div>
      ) : (
        <div>
          <span style={{ fontFamily: 'var(--font-serif)', fontSize: 24, fontWeight: 500, lineHeight: 1 }}>{v}</span>
          <span style={{ fontFamily: 'var(--font-sans)', fontSize: 12, marginLeft: 8, opacity: 0.8 }}>{sub}</span>
        </div>
      )}
    </div>
  );
}

function EngineerTile({ n, role, tags, tone }) {
  const [hover, setHover] = React.useState(false);
  // Tiles use "working moment" crops — emphasis on work, not identity.
  // objectPosition controls where the photo gets cropped within the tile.
  const tiles = [
    { img: "uploads/photos/team-working.jpg",    pos: "50% 50%" },  // チームでPC作業
    { img: "uploads/photos/pair-meeting-1.jpg",  pos: "50% 45%" },  // ミーティング
    { img: "uploads/photos/team-discussion.jpg", pos: "50% 45%" },  // ディスカッション
    { img: "uploads/photos/team-formal.jpg",     pos: "50% 35%" },  // チーム集合
  ];
  const t = tiles[tone % tiles.length];
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        aspectRatio: "3 / 4",
        borderRadius: 12,
        background: "#1A1530",
        position: "relative",
        overflow: "hidden",
        transform: hover ? "translateY(-4px)" : "translateY(0)",
        transition: "transform 320ms cubic-bezier(0.22,1,0.36,1), box-shadow 320ms",
        boxShadow: hover ? "0 20px 40px rgba(124,92,255,0.22)" : "0 4px 20px rgba(0,0,0,0.05)",
        cursor: "pointer",
      }}
    >
      <img src={t.img} alt={role}
        style={{
          position: "absolute", inset: 0,
          width: "100%", height: "100%",
          objectFit: "cover",
          objectPosition: t.pos,
          // Duotone-ish: desaturate slightly and warm shadows toward purple
          filter: hover
            ? "saturate(0.9) contrast(1.02) brightness(0.95)"
            : "saturate(0.75) contrast(1.05) brightness(0.9)",
          transform: hover ? "scale(1.04)" : "scale(1)",
          transition: "transform 600ms cubic-bezier(0.22,1,0.36,1), filter 320ms",
        }}
      />
      {/* purple duotone wash */}
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(180deg, rgba(124,92,255,0.18) 0%, rgba(26,21,48,0.15) 50%, rgba(26,21,48,0.85) 100%)",
        mixBlendMode: "multiply",
      }} />
      {/* subtle grid overlay */}
      <div style={{
        position: "absolute", inset: 0,
        backgroundImage: "linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px)",
        backgroundSize: "100% 24px",
        pointerEvents: "none",
        opacity: 0.6,
      }} />
      {/* frame number large */}
      <div style={{
        position: "absolute",
        top: 14, right: 14,
        fontFamily: 'var(--font-serif)',
        fontStyle: "italic",
        fontSize: 40,
        color: "rgba(255,255,255,0.85)",
        lineHeight: 1,
        fontWeight: 400,
      }}>
        {n}
      </div>
      {/* top label */}
      <div style={{
        position: "absolute",
        top: 18, left: 14,
        fontFamily: 'var(--font-mono-label)',
        fontSize: 9.5,
        letterSpacing: "0.2em",
        color: "rgba(255,255,255,0.95)",
        fontWeight: 500,
      }}>
        ENGINEER
      </div>
      {/* bottom content */}
      <div style={{
        position: "absolute",
        bottom: 16, left: 16, right: 16,
        color: "#fff",
      }}>
        <div style={{
          width: 28, height: 1,
          background: "var(--purple-light)",
          marginBottom: 10,
        }} />
        <div style={{ fontFamily: 'var(--font-serif)', fontSize: 15, fontWeight: 500, lineHeight: 1.3 }}>{role}</div>
        <div style={{ fontFamily: 'var(--font-mono-label)', fontSize: 9.5, letterSpacing: "0.15em", color: "#E8E0FF", marginTop: 6, fontWeight: 500 }}>{tags}</div>
      </div>
    </div>
  );
}

Object.assign(window, { Hero });