'use client';
import React, { useEffect, useState } from 'react';

const STORAGE_KEY = 'vaultfire_legal_consent_v1';

export default function ConsentBanner() {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    // Only run on client
    try {
      const accepted = window.localStorage.getItem(STORAGE_KEY);
      if (!accepted) {
        // Tiny delay so the banner doesn't pop in before the page paints
        const t = window.setTimeout(() => setVisible(true), 300);
        return () => window.clearTimeout(t);
      }
    } catch {
      // localStorage may be unavailable (private mode, etc.) — show banner anyway
      setVisible(true);
    }
  }, []);

  function accept() {
    try {
      window.localStorage.setItem(
        STORAGE_KEY,
        JSON.stringify({ acceptedAt: new Date().toISOString(), version: 1 })
      );
    } catch {
      // Best-effort persistence
    }
    setVisible(false);
  }

  if (!visible) return null;

  return (
    <div
      role="region"
      aria-label="Legal terms consent"
      style={{
        position: 'fixed',
        left: 12,
        right: 12,
        bottom: 12,
        zIndex: 10000,
        display: 'flex',
        justifyContent: 'center',
        pointerEvents: 'none',
      }}
    >
      <div
        style={{
          pointerEvents: 'auto',
          maxWidth: 720,
          width: '100%',
          backgroundColor: 'rgba(20, 20, 23, 0.96)',
          backdropFilter: 'blur(12px)',
          WebkitBackdropFilter: 'blur(12px)',
          border: '1px solid rgba(255, 140, 90, 0.25)',
          borderRadius: 14,
          padding: '14px 16px',
          boxShadow: '0 16px 48px rgba(0,0,0,0.45), 0 0 32px rgba(255,107,53,0.06)',
          display: 'flex',
          flexWrap: 'wrap',
          alignItems: 'center',
          gap: 12,
          color: '#F4F4F5',
          fontSize: 13,
          lineHeight: 1.5,
          animation: 'consentBannerIn 220ms ease-out',
        }}
      >
        <div style={{ flex: '1 1 360px', minWidth: 240 }}>
          By using theloopbreaker.com, you agree to our{' '}
          <a
            href="/terms"
            style={{ color: '#FF8C5A', textDecoration: 'underline' }}
          >
            Terms
          </a>
          ,{' '}
          <a
            href="/privacy"
            style={{ color: '#FF8C5A', textDecoration: 'underline' }}
          >
            Privacy Policy
          </a>
          , and{' '}
          <a
            href="/disclaimer"
            style={{ color: '#FF8C5A', textDecoration: 'underline' }}
          >
            Disclaimer
          </a>
          . The protocol is in alpha — bonds are performance collateral, not investments.
        </div>
        <button
          onClick={accept}
          style={{
            background: 'linear-gradient(135deg, #FF6B35, #E55A24)',
            color: 'white',
            border: 'none',
            borderRadius: 10,
            padding: '10px 18px',
            fontSize: 13,
            fontWeight: 600,
            cursor: 'pointer',
            letterSpacing: '0.01em',
            whiteSpace: 'nowrap',
            transition: 'transform 120ms, filter 120ms',
          }}
          onMouseEnter={(e) => {
            (e.currentTarget as HTMLElement).style.filter = 'brightness(1.1)';
          }}
          onMouseLeave={(e) => {
            (e.currentTarget as HTMLElement).style.filter = 'brightness(1)';
          }}
        >
          I agree
        </button>
        <style>{`
          @keyframes consentBannerIn {
            from { opacity: 0; transform: translateY(20px); }
            to   { opacity: 1; transform: translateY(0); }
          }
        `}</style>
      </div>
    </div>
  );
}
