// Hero Lamp — adapté du composant Hero (lamp effect) en pur N&B + Babel/JSX
// Animation : à l'apparition, les cônes coniques s'élargissent et la ligne de lumière s'étire.

const HeroLamp = ({
  ink = '#000', paper = '#fff', accent = '#fff',
  display, mono,
  eyebrow = '— No. 001 / Maison',
  title = 'Bespoke Operations',
  subtitle = "Cabinet privé d'opérations, taillé à la main.",
  height = 720,
  children,
}) => {
  const wrapRef = React.useRef(null);
  const [armed, setArmed] = React.useState(false);

  React.useEffect(() => {
    if (!wrapRef.current) return;
    const el = wrapRef.current;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { setArmed(true); io.disconnect(); } });
    }, { threshold: 0.15 });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  React.useEffect(() => {
    if (document.getElementById('bo-hero-lamp-kf')) return;
    const s = document.createElement('style');
    s.id = 'bo-hero-lamp-kf';
    s.textContent = `
      @keyframes boLampLineIn  { from { width: 12rem; opacity: 0.2; } to { width: 22rem; opacity: 0.55; } }
      @keyframes boLampGlowIn  { from { width: 6rem;  opacity: 0;   } to { width: 22rem; opacity: 0.22; } }
      @keyframes boLampGlowSm  { from { width: 4rem;  opacity: 0;   } to { width: 12rem; opacity: 0.18; } }
      @keyframes boLampConeIn  { from { width: 12rem; opacity: 0.15; } to { width: 22rem; opacity: 0.28; } }
      @keyframes boLampRise    { from { transform: translateY(60px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
      .bo-lamp-line[data-on="1"]  { animation: boLampLineIn 0.9s 0.3s cubic-bezier(.4,0,.2,1) both; }
      .bo-lamp-glow[data-on="1"]  { animation: boLampGlowIn 1.1s 0.2s cubic-bezier(.4,0,.2,1) both; }
      .bo-lamp-glow-sm[data-on="1"] { animation: boLampGlowSm 1.1s 0.2s cubic-bezier(.4,0,.2,1) both; }
      .bo-lamp-cone[data-on="1"]  { animation: boLampConeIn 0.9s 0.3s cubic-bezier(.4,0,.2,1) both; }
      .bo-lamp-text[data-on="1"]  { animation: boLampRise 0.9s 0.5s cubic-bezier(.4,0,.2,1) both; }
    `;
    document.head.appendChild(s);
  }, []);

  const cone = (side) => ({
    position: 'absolute',
    top: 0,
    [side === 'left' ? 'right' : 'left']: '50%',
    width: '22rem', height: '12rem',
    backgroundImage: side === 'left'
      ? `conic-gradient(from 70deg at center top, ${accent}, transparent 50%, transparent)`
      : `conic-gradient(from 290deg at center top, transparent, transparent 50%, ${accent})`,
    opacity: 0.28,
    pointerEvents: 'none',
  });

  return (
    <section
      ref={wrapRef}
      style={{
        position: 'relative', width: '100%', height,
        background: ink, color: paper, overflow: 'hidden',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}
    >
      {/* Lamp stage at top */}
      <div style={{ position: 'absolute', inset: 0, top: 0, zIndex: 0, display: 'flex', justifyContent: 'center' }}>
        {/* Soft blur backdrop */}
        <div style={{
          position: 'absolute', top: 0, height: 192, width: '100%',
          backdropFilter: 'blur(12px)', opacity: 0.1, pointerEvents: 'none',
        }} />

        {/* Main glow — toned down for a more discreet spot */}
        <div className="bo-lamp-glow" data-on={armed ? '1' : '0'} style={{
          position: 'absolute', top: 0, height: 120, width: '22rem',
          transform: 'translateY(30%)',
          borderRadius: 9999,
          background: accent, opacity: 0.22, filter: 'blur(90px)',
          pointerEvents: 'none', zIndex: 3,
        }} />

        {/* Lamp small glow — classe dédiée pour ne pas s'élargir comme le main */}
        <div className="bo-lamp-glow-sm" data-on={armed ? '1' : '0'} style={{
          position: 'absolute', top: 0, height: 120, width: '12rem',
          transform: 'translateY(-20%)',
          borderRadius: 9999,
          background: accent, opacity: 0.18, filter: 'blur(48px)',
          pointerEvents: 'none', zIndex: 2,
        }} />

        {/* Top hot line — fine et subtile */}
        <div className="bo-lamp-line" data-on={armed ? '1' : '0'} style={{
          position: 'absolute', top: 0, height: 1, width: '22rem',
          background: accent, opacity: 0.55,
          boxShadow: `0 0 12px ${accent}`,
          transform: 'translateY(-1px)',
          pointerEvents: 'none', zIndex: 4,
        }} />

        {/* Left cone */}
        <div className="bo-lamp-cone" data-on={armed ? '1' : '0'} style={cone('left')}>
          {/* mask the cone bottom into the bg */}
          <div style={{
            position: 'absolute', left: 0, bottom: 0, width: '100%', height: 160,
            background: ink,
            WebkitMaskImage: 'linear-gradient(to top, white, transparent)',
            maskImage: 'linear-gradient(to top, white, transparent)',
            zIndex: 2,
          }} />
          <div style={{
            position: 'absolute', left: 0, bottom: 0, width: 160, height: '100%',
            background: ink,
            WebkitMaskImage: 'linear-gradient(to right, white, transparent)',
            maskImage: 'linear-gradient(to right, white, transparent)',
            zIndex: 2,
          }} />
        </div>
        {/* Right cone */}
        <div className="bo-lamp-cone" data-on={armed ? '1' : '0'} style={cone('right')}>
          <div style={{
            position: 'absolute', right: 0, bottom: 0, width: '100%', height: 160,
            background: ink,
            WebkitMaskImage: 'linear-gradient(to top, white, transparent)',
            maskImage: 'linear-gradient(to top, white, transparent)',
            zIndex: 2,
          }} />
          <div style={{
            position: 'absolute', right: 0, bottom: 0, width: 160, height: '100%',
            background: ink,
            WebkitMaskImage: 'linear-gradient(to left, white, transparent)',
            maskImage: 'linear-gradient(to left, white, transparent)',
            zIndex: 2,
          }} />
        </div>
      </div>

      {/* Content */}
      <div className="bo-lamp-text" data-on={armed ? '1' : '0'} style={{
        position: 'relative', zIndex: 50, textAlign: 'center', padding: '0 48px',
        transform: 'translateY(40px)',
      }}>
        <div style={{ ...mono, color: 'rgba(255,255,255,0.6)', marginBottom: 24 }}>{eyebrow}</div>
        <h1 style={{
          ...display, fontSize: 108, lineHeight: 0.92, margin: 0, fontWeight: 300,
          letterSpacing: '-0.025em', whiteSpace: 'nowrap',
        }}>
          {title}
        </h1>
        {subtitle && (
          <p style={{
            ...display, fontSize: 24, fontStyle: 'italic',
            color: 'rgba(255,255,255,0.85)', marginTop: 28, maxWidth: 720, marginLeft: 'auto', marginRight: 'auto',
          }}>
            {subtitle}
          </p>
        )}
        {children && <div style={{ marginTop: 40 }}>{children}</div>}
      </div>
    </section>
  );
};

window.HeroLamp = HeroLamp;