// Preloader component
// White background, 180x180 box, 4 teal border lines draw clockwise via CSS animation
// Logo fades in at 1200ms, overlay fades out at 1800ms then is removed from DOM

function Preloader({ onComplete, logoSrc }) {
  const overlayRef = React.useRef(null);

  React.useEffect(() => {
    // Line draw: 4 × 300ms = 1200ms
    // Logo fade-in: 500ms (starts at 1200ms, ends at 1700ms)
    // Fade-out at 1800ms over 600ms, remove at 2450ms
    const exitTimer = setTimeout(() => {
      const el = overlayRef.current;
      if (el) {
        el.style.opacity = '0';
        el.style.transition = 'opacity 600ms ease';
        el.style.pointerEvents = 'none';
      }
      const removeTimer = setTimeout(() => {
        if (onComplete) onComplete();
      }, 650);
      return () => clearTimeout(removeTimer);
    }, 1900);

    return () => clearTimeout(exitTimer);
  }, []);

  return (
    <div
      ref={overlayRef}
      style={{
        position: 'fixed',
        inset: 0,
        zIndex: 1000,
        background: '#ffffff',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
      aria-hidden="true"
    >
      <style>{`
        .pre__box {
          position: relative;
          width: 180px;
          height: 180px;
        }
        .pre__line {
          position: absolute;
          background: #2E8FA6;
        }
        /* Clockwise: left-down → bottom-right → right-up → top-left */
        .pre__line--left {
          left: 0; top: 0;
          width: 2px; height: 0;
          animation: pre-line-down 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms forwards;
        }
        .pre__line--bottom {
          left: 0; bottom: 0;
          height: 2px; width: 0;
          animation: pre-line-right 300ms cubic-bezier(0.4, 0, 0.2, 1) 300ms forwards;
        }
        .pre__line--right {
          right: 0; bottom: 0;
          width: 2px; height: 0;
          animation: pre-line-up 300ms cubic-bezier(0.4, 0, 0.2, 1) 600ms forwards;
        }
        .pre__line--top {
          right: 0; top: 0;
          height: 2px; width: 0;
          animation: pre-line-left 300ms cubic-bezier(0.4, 0, 0.2, 1) 900ms forwards;
        }
        .pre__logo {
          position: absolute;
          inset: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          opacity: 0;
          animation: pre-fade-in 500ms ease 1200ms forwards;
        }
        .pre__logo img {
          width: 130px;
          height: 130px;
          object-fit: contain;
        }
        @keyframes pre-line-down  { to { height: 100%; } }
        @keyframes pre-line-right { to { width: 100%; } }
        @keyframes pre-line-up    { from { height: 0; bottom: 0; } to { height: 100%; bottom: 0; } }
        @keyframes pre-line-left  { from { width: 0; right: 0; } to { width: 100%; right: 0; } }
        @keyframes pre-fade-in    { to { opacity: 1; } }
      `}</style>

      <div className="pre__box">
        <span className="pre__line pre__line--left"></span>
        <span className="pre__line pre__line--bottom"></span>
        <span className="pre__line pre__line--right"></span>
        <span className="pre__line pre__line--top"></span>
        <div className="pre__logo">
          <img src={logoSrc} alt="Sunset Cafe &amp; Restaurant" />
        </div>
      </div>
    </div>
  );
}