/* §2 Lamp — auto-opens when scrolled into view */
const { useRef: useRefL, useEffect: useEffectL, useState: useStateL } = React;

function LampSection() {
  const ref = useRefL(null);
  const [inView, setInView] = useStateL(false);

  useEffectL(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(
      (entries) => entries.forEach(e => { if (e.isIntersecting) setInView(true); }),
      { threshold: 0.25 }
    );
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);

  return (
    <section
      data-section="lamp"
      ref={ref}
      className={`lamp-stage relative flex min-h-screen w-full flex-col items-center justify-center overflow-hidden ${inView ? 'lamp-in' : ''}`}
    >
      {/* Minimal top mark */}
      <div className="absolute top-0 left-0 right-0 z-50 px-6 md:px-10 pt-6"></div>

      {/* The cone rig */}
      <div className="relative flex w-full flex-1 scale-y-125 items-center justify-center isolate z-0">
        <div
          className="lamp-cone-left absolute inset-auto right-1/2 h-56 overflow-visible w-[15rem] text-white"
          style={{ ['--conic-position']: 'from 70deg at center top' }}
        >
          <div className="absolute w-full left-0 lamp-stage h-40 bottom-0 z-20 mask-fade-top" style={{background:'#05050a'}}></div>
          <div className="absolute w-40 h-full left-0 lamp-stage bottom-0 z-20 mask-fade-right" style={{background:'#05050a'}}></div>
        </div>
        <div
          className="lamp-cone-right absolute inset-auto left-1/2 h-56 w-[15rem] text-white"
          style={{ ['--conic-position']: 'from 290deg at center top' }}
        >
          <div className="absolute w-40 h-full right-0 lamp-stage bottom-0 z-20 mask-fade-left" style={{background:'#05050a'}}></div>
          <div className="absolute w-full right-0 lamp-stage h-40 bottom-0 z-20 mask-fade-top" style={{background:'#05050a'}}></div>
        </div>

        <div className="absolute top-1/2 h-48 w-full translate-y-12 scale-x-150 blur-2xl" style={{background:'#05050a'}}></div>
        <div className="absolute top-1/2 z-50 h-48 w-full bg-transparent opacity-10 backdrop-blur-md"></div>
        <div className="lamp-dot absolute inset-auto z-50 h-36 w-24 -translate-y-1/2 rounded-full opacity-60 blur-3xl" style={{background:'#0000FE'}}></div>
        <div className="lamp-dot absolute inset-auto z-30 h-36 w-24 -translate-y-[6rem] rounded-full blur-2xl" style={{background:'#4A4AFF'}}></div>
        <div className="lamp-line absolute inset-auto z-50 h-0.5 w-48 -translate-y-[7rem]" style={{background:'#4A4AFF', boxShadow:'0 0 20px 1px #0000FE'}}></div>
        <div className="absolute inset-auto z-40 h-44 w-full -translate-y-[12.5rem]" style={{background:'#05050a'}}></div>
      </div>

      {/* Headline */}
      <div className="relative z-50 flex -translate-y-80 flex-col items-center px-5 text-center">
        <div className="lamp-headline opacity-0">
          <h2
            className="font-display tracking-[-0.035em] leading-[0.95] text-white lowercase"
            style={{ fontSize: 'clamp(48px, 7.2vw, 112px)', fontVariationSettings: '"MONO" 0, "CASL" 0, "wght" 480, "slnt" 0, "CRSV" 0' }}
          >
            agents settle<br/>
            <span
              className="bg-clip-text text-transparent italic"
              style={{
                backgroundImage: 'linear-gradient(120deg, #ffffff 0%, #7878FF 45%, #0000FE 100%)',
                fontVariationSettings: '"MONO" 0, "CASL" 0.5, "wght" 480, "slnt" -12, "CRSV" 1',
              }}
            >in real money.</span>
          </h2>
          <p className="mt-8 max-w-xl mx-auto text-white/65 font-display text-base md:text-lg leading-snug text-balance">
            Agent-to-agent commerce over x402 on Base. The protocol takes a sliver — token holders take the rest.
          </p>
        </div>
      </div>
    </section>
  );
}

window.LampSection = LampSection;