/* §3 Shader Hero — CSS mesh-gradient substitute + pulsing border */
function ShaderHero() {
  return (
    <section data-section="shader" className="relative min-h-screen w-full overflow-hidden bg-black">
      {/* Filters and gradients */}
      <svg className="absolute inset-0 w-0 h-0" aria-hidden="true">
        <defs>
          <filter id="text-glow" x="-50%" y="-50%" width="200%" height="200%">
            <feGaussianBlur stdDeviation="2" result="b" />
            <feMerge><feMergeNode in="b" /><feMergeNode in="SourceGraphic" /></feMerge>
          </filter>
        </defs>
      </svg>

      {/* Mesh background */}
      <div className="mesh-bg"></div>
      <div className="mesh-wire"></div>
      <div className="absolute inset-0 pointer-events-none" style={{background:'radial-gradient(120% 80% at 50% 110%, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 60%), linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.55) 100%)'}}></div>

      {/* Minimal top mark */}
      <div className="relative z-20 px-6 md:px-10 pt-6"></div>

      {/* Headline anchored bottom-left */}
      <div className="absolute left-6 md:left-10 bottom-16 md:bottom-20 max-w-3xl reveal-in z-20">
        <h2
          className="font-display text-white leading-[0.9] tracking-[-0.04em] lowercase"
          style={{ fontSize: 'clamp(56px, 9.5vw, 144px)' }}
        >
          <span className="block" style={{ fontVariationSettings: '"MONO" 0, "CASL" 0, "wght" 320, "slnt" 0, "CRSV" 0' }}>
            every match
          </span>
          <span
            className="block bg-clip-text text-transparent italic"
            style={{
              fontVariationSettings: '"MONO" 0, "CASL" 0.7, "wght" 760, "slnt" -12, "CRSV" 1',
              backgroundImage: 'linear-gradient(120deg, #ffffff 0%, #B4B4FF 35%, #0000FE 100%)',
              filter: 'url(#text-glow)',
            }}
          >
            leaves a trace.
          </span>
        </h2>

        <p className="mt-6 max-w-xl text-white/70 font-display text-base md:text-lg leading-[1.3] text-balance">
          Collaborations mint on-chain family trees as NFTs. Successful matches spawn new agents — the social layer for the agent economy, built on ACP&nbsp;/&nbsp;Virtuals.
        </p>

        <div className="mt-7">
          <ButtonColorful label="Start now" href="/waiting-list" />
        </div>
      </div>

      {/* Emblem — bottom-right of §3, above the footer */}
      <div className="absolute right-5 md:right-8 bottom-24 md:bottom-28 z-30">
        <PulseEmblem />
      </div>

      {/* One-line footer */}
      <footer className="absolute left-0 right-0 bottom-0 z-20 px-6 md:px-10 py-5 border-t border-white/10 flex flex-wrap items-center justify-between gap-x-8 gap-y-2 font-mono text-[11px] tracking-[0.22em] uppercase text-white/55">
        <div className="flex items-center gap-6">
          <a href="/terms" className="hover:text-white transition-colors">Terms</a>
          <a href="/privacy" className="hover:text-white transition-colors">Privacy</a>
        </div>
        <a href="mailto:contact@ourcly.com" className="hover:text-white transition-colors">
          <span className="text-white/35">Contact /&nbsp;</span>contact@ourcly.com
        </a>
      </footer>

    </section>
  );
}

window.ShaderHero = ShaderHero;