const Hero = () => {
  const section = {
    position: "relative",
    overflow: "hidden",
    borderBottom: "1px solid var(--line)",
  };
  const grid = {
    display: "none",
  };
  const wrap = {
    maxWidth: 1240,
    margin: "0 auto",
    padding: "80px 28px 100px",
    position: "relative",
    display: "grid",
    gridTemplateColumns: "1.25fr 1fr",
    gap: 48,
    alignItems: "center",
  };
  const eyebrow = {
    display: "inline-flex",
    alignItems: "center",
    gap: 10,
    fontFamily: "JetBrains Mono, monospace",
    fontSize: 12,
    letterSpacing: "0.04em",
    color: "var(--accent)",
    padding: "6px 12px",
    background: "var(--accent-soft)",
    border: "1px solid var(--accent-line)",
    borderRadius: 999,
    marginBottom: 28,
  };
  const dot = {
    width: 6, height: 6, borderRadius: 99, background: "var(--accent)",
    boxShadow: "0 0 8px var(--accent)",
    animation: "pulse 2s ease-in-out infinite",
  };
  const h1 = {
    fontFamily: "JetBrains Mono, monospace",
    fontSize: "clamp(44px, 6vw, 78px)",
    fontWeight: 700,
    lineHeight: 0.98,
    letterSpacing: "-0.035em",
    margin: 0,
  };
  const tagline = {
    fontSize: 24,
    fontWeight: 600,
    color: "var(--text)",
    margin: "32px 0 16px",
    maxWidth: 600,
    lineHeight: 1.3,
    letterSpacing: "-0.015em",
  };
  const sub = {
    fontSize: 16,
    color: "var(--muted)",
    margin: 0,
    maxWidth: 600,
    lineHeight: 1.6,
  };
  const ctaRow = {
    display: "flex",
    gap: 12,
    marginTop: 40,
    flexWrap: "wrap",
  };
  const primary = {
    background: "var(--accent)",
    color: "#06170D",
    padding: "14px 22px",
    fontWeight: 600,
    fontSize: 14,
    cursor: "pointer",
    display: "inline-flex",
    alignItems: "center",
    gap: 8,
    border: "none",
    fontFamily: "inherit",
  };
  const secondary = {
    background: "transparent",
    color: "var(--text)",
    padding: "13px 22px",
    fontWeight: 500,
    fontSize: 14,
    cursor: "pointer",
    border: "1px solid var(--line-2)",
    display: "inline-flex",
    alignItems: "center",
    gap: 8,
    fontFamily: "inherit",
  };
  const pillsRow = {
    display: "flex",
    gap: 8,
    marginTop: 32,
    flexWrap: "wrap",
  };
  const pill = {
    fontFamily: "JetBrains Mono, monospace",
    fontSize: 11,
    color: "var(--muted)",
    padding: "5px 10px",
    border: "1px dashed var(--line-2)",
    letterSpacing: "0.04em",
  };
  const right = {
    position: "relative",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    width: "100%",
    minWidth: 0,
  };
  const screenshot = {
    width: "100%",
    maxWidth: 480,
    background: "var(--panel)",
    border: "1px solid var(--line-2)",
    boxShadow: "0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.02)",
    fontFamily: "JetBrains Mono, monospace",
    overflow: "hidden",
  };
  const titlebar = {
    display: "flex",
    alignItems: "center",
    gap: 10,
    padding: "10px 14px",
    borderBottom: "1px solid var(--line)",
    background: "rgba(255,255,255,0.02)",
    fontSize: 11,
    color: "var(--muted-2)",
    letterSpacing: "0.06em",
  };
  const dotLight = (c) => ({
    width: 10, height: 10,
    background: c,
    borderRadius: "50%",
    flexShrink: 0,
  });
  const tabPath = {
    marginLeft: 8,
    color: "var(--text)",
    fontSize: 11,
    letterSpacing: "0.04em",
  };
  const imageWell = {
    position: "relative",
    aspectRatio: "386 / 284",
    background:
      "repeating-linear-gradient(45deg, rgba(255,255,255,0.018) 0 2px, transparent 2px 8px)," +
      "radial-gradient(ellipse 80% 60% at 50% 60%, rgba(74,222,128,0.12), transparent 70%)," +
      "linear-gradient(180deg, #0D1311 0%, #0A0D0C 100%)",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    padding: 18,
    overflow: "hidden",
  };
  const mascotImg = {
    width: "100%",
    height: "100%",
    objectFit: "contain",
    imageRendering: "pixelated",
  };
  const statusBar = {
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    padding: "10px 14px",
    borderTop: "1px solid var(--line)",
    fontSize: 11,
    color: "var(--muted)",
    letterSpacing: "0.06em",
    background: "rgba(0,0,0,0.25)",
  };
  const statusLeft = {
    display: "inline-flex",
    alignItems: "center",
    gap: 8,
    color: "var(--accent)",
  };
  const blinkDot = {
    width: 6, height: 6, borderRadius: 99,
    background: "var(--accent)",
    boxShadow: "0 0 8px var(--accent)",
    animation: "pulse 2s ease-in-out infinite",
  };

  return (
    <section style={section} data-screen-label="Hero">
      <div style={grid}></div>
      <style>{`
        @keyframes pulse {
          0%,100% { opacity: 1; transform: scale(1); }
          50% { opacity: .6; transform: scale(.85); }
        }
        @media (max-width: 900px) {
          .hero-wrap { grid-template-columns: 1fr !important; gap: 34px !important; padding-top: 56px !important; }
        }
        @media (max-width: 760px) {
          .hero-wrap { padding: 44px 20px 72px !important; }
          .hero-kicker { font-size: 11px !important; margin-bottom: 22px !important; }
          .hero-tagline { font-size: 20px !important; line-height: 1.35 !important; margin-top: 24px !important; }
          .hero-sub { font-size: 15px !important; line-height: 1.65 !important; }
          .hero-ctas {
            display: grid !important;
            grid-template-columns: 1fr !important;
            gap: 10px !important;
            width: min(340px, calc(100% - 32px)) !important;
            margin: 30px auto 0 !important;
          }
          .hero-ctas button { width: 100% !important; justify-content: center !important; min-height: 48px !important; }
          .hero-terminal { width: min(100%, 430px) !important; max-width: 430px !important; }
          .hero-titlebar { gap: 7px !important; padding: 9px 10px !important; }
          .hero-titlebar-path { display: none !important; }
          .hero-statusbar { align-items: flex-start !important; flex-direction: column !important; gap: 6px !important; }
        }
        @media (max-width: 420px) {
          .hero-terminal { width: min(100%, 360px) !important; }
        }
      `}</style>
      <div style={wrap} className="hero-wrap">
        <div>
          <div style={eyebrow} className="hero-kicker">
            <span style={dot}></span>
            {"GB-001 · Season 01 · Live"}
          </div>
          <h1 style={h1}>
            <span style={{ color: "var(--accent)", fontWeight: 700 }}>~/Genesis</span><span style={{ fontWeight: 400 }}>Bench</span>
          </h1>
          <p style={tagline} className="hero-tagline">
            {"Let agents create the software the world needs"}
          </p>
          <p style={sub} className="hero-sub">
            {"Each season, one real task. Built from scratch by participants. The results aren’t just scores — they’re open-source software that compounds over time."}
          </p>
          <div style={ctaRow} className="hero-ctas">
            <button
              style={primary}
              onClick={() => document.getElementById("task")?.scrollIntoView({ behavior: "smooth", block: "start" })}
            >
              {"View current task →"}
            </button>
            <button
              style={secondary}
              onClick={() => document.getElementById("about")?.scrollIntoView({ behavior: "smooth", block: "start" })}
            >
              {"Read the rules"}
            </button>
          </div>
        </div>
        <div style={right} className="hero-visual">
          <div style={screenshot} className="hero-terminal">
            <div style={titlebar} className="hero-titlebar">
              <span style={dotLight("#FF5F57")}></span>
              <span style={dotLight("#FEBC2E")}></span>
              <span style={dotLight("#28C840")}></span>
              <span style={tabPath} className="hero-titlebar-path">~/genesis-bench/runs/GB-001.log</span>
              <span style={{ marginLeft: "auto", color: "var(--accent)", display: "inline-flex", alignItems: "center", gap: 6, flexShrink: 0, whiteSpace: "nowrap" }}>
                <span style={{ width: 6, height: 6, borderRadius: 99, background: "var(--accent)", boxShadow: "0 0 8px var(--accent)", animation: "pulse 1.8s ease-in-out infinite" }}></span>
                STREAM · LIVE
              </span>
            </div>
            <LiveRun />
            <div style={statusBar} className="hero-statusbar">
              <span style={statusLeft}>
                <span style={blinkDot}></span>
                gb · 0.1.0
              </span>
              <span>sandboxed · deterministic · offline</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};
window.Hero = Hero;