// Hero — kinetic, scroll-driven joinery assembly.
// The mark assembles as you scroll the hero; headline beams slide in.

const Hero = () => {
  const ref = React.useRef(null);
  const scrollY = useScrollY();

  const p = Math.min(1, scrollY / 600);
  const vP = easeOut(Math.min(1, p / 0.3));
  const hP = easeOut(Math.max(0, Math.min(1, (p - 0.18) / 0.27)));
  const wellP = easeOut(Math.max(0, Math.min(1, (p - 0.4) / 0.2)));
  const keyP = easeOut(Math.max(0, Math.min(1, (p - 0.55) / 0.25)));

  const vT = "scaleY(" + vP + ")";
  const vOrigin = "center top";
  const hT = "scaleX(" + hP + ")";
  const hOrigin = "left center";

  return (
    <section ref={ref} style={{
      minHeight: "120vh",
      padding: "32px 48px 96px",
      position: "relative",
      display: "flex",
      flexDirection: "column",
    }}>
      <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: "48px", alignItems: "center", flex: 1, paddingTop: "80px", paddingLeft: "32px" }}>
        <div>
          <div className="km-eyebrow">PRIVATE BORROWING PROTOCOL · ETHEREUM MAINNET</div>
          <h1 className="km-display-xl" style={{ marginTop: "24px", marginBottom: "32px" }}>
            <JoinReveal delay={100}><span style={{ display: "block" }}>Borrow</span></JoinReveal>
            <JoinReveal delay={220}><span style={{ display: "block" }}>privately.</span></JoinReveal>
            <JoinReveal delay={340}><span style={{ display: "block" }}>Earn from</span></JoinReveal>
            <JoinReveal delay={460}><span style={{ display: "block" }}>liquidations<span style={{ color: "#B04A3A" }}>.</span></span></JoinReveal>
          </h1>
          <JoinReveal delay={380}>
            <p style={{
              fontFamily: '"EB Garamond", serif',
              fontSize: "22px",
              lineHeight: 1.5,
              color: "#1A1613",
              maxWidth: "520px",
              margin: "0 0 40px",
            }}>
              Borrow against staked ETH at <span className="km-data-inline">~0.5%</span>. Earn from
              liquidations you'll never see. Neither side loses.
            </p>
          </JoinReveal>
          <JoinReveal delay={500}>
            <div style={{ display: "flex", gap: "12px", alignItems: "center" }}>
              <a href="#waitlist" className="km-btn km-btn-primary km-btn-lg">Join waitlist →</a>
              <a href="#protocol" className="km-btn km-btn-ghost">How it works</a>
            </div>
          </JoinReveal>

          <div style={{ marginTop: "80px", display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "32px", maxWidth: "560px" }}>
            {[
              ["~0.5%", "Borrow rate, fixed"],
              ["10%", "Liquidation premium"],
              ["22.53%", "Backtest, annualised"],
            ].map(([n, l], i) => (
              <JoinReveal delay={620 + i * 100} key={l}>
                <div>
                  <div className="km-data-md">{n}</div>
                  <div className="km-label-mono">{l}</div>
                </div>
              </JoinReveal>
            ))}
          </div>
        </div>

        <div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "min(560px, 70vh)" }}>
          <div style={{ position: "relative", width: "min(480px, 90%)", aspectRatio: "1/1" }}>
            <svg viewBox="0 0 100 100" width="100%" height="100%" style={{ overflow: "visible", display: "block" }}>
              <g style={{ transform: vT, transformOrigin: vOrigin, transition: "none" }}>
                <rect x={37} y={0} width={26} height={100} fill="#1B2845" />
              </g>
              <g style={{ transform: hT, transformOrigin: hOrigin, transition: "none" }}>
                <rect x={0} y={37} width={100} height={26} fill="#1B2845" />
              </g>
              {wellP > 0 && (
                <rect x={50 - 15 * wellP} y={50 - 15 * wellP} width={30 * wellP} height={30 * wellP} fill="#FAF7F0" />
              )}
              {keyP > 0 && (
                <rect x={50 - 9 * keyP} y={50 - 9 * keyP} width={18 * keyP} height={18 * keyP} fill="#B04A3A" />
              )}
            </svg>
            <div style={{
              position: "absolute",
              bottom: "-48px",
              left: 0,
              right: 0,
              textAlign: "center",
            }}>
              <span className="km-eyebrow">SCROLL TO ASSEMBLE THE JOINT ↓</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Hero });