import { useParams } from 'react-router-dom';
import { motion } from 'framer-motion';

/**
 * VaultPublicPage
 * Public-facing brochure link — no auth required.
 * Accessed via: /vault/:trackingHash
 * Renders the property brochure in a clean, branded experience.
 * Tracks open event server-side via the hash; broker is notified via Sentinel.
 */
export default function VaultPublicPage() {
  const { trackingHash } = useParams<{ trackingHash: string }>();

  return (
    <div style={{
      minHeight: '100vh',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      background: 'var(--color-base-bg)',
      flexDirection: 'column',
      gap: 'var(--space-6)',
      padding: 'var(--space-8)',
    }}>
      <motion.div
        className="glass-heavy"
        style={{
          maxWidth: 480,
          width: '100%',
          padding: 'var(--space-10)',
          borderRadius: 'var(--radius-2xl)',
          textAlign: 'center',
        }}
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.4 }}
      >
        <div style={{
          width: 48, height: 48,
          borderRadius: 'var(--radius-md)',
          background: 'var(--color-violet)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          margin: '0 auto var(--space-6)',
          boxShadow: 'var(--glass-shadow-violet)',
        }}>
          <span style={{ color: 'white', fontWeight: 700, fontSize: 20 }}>V</span>
        </div>
        <h1 style={{
          fontSize: 'var(--text-2xl)',
          fontWeight: 'var(--font-bold)',
          color: 'var(--color-text-primary)',
          margin: '0 0 var(--space-3)',
        }}>
          Property Brochure
        </h1>
        <p style={{
          fontSize: 'var(--text-sm)',
          color: 'var(--color-text-secondary)',
          margin: '0 0 var(--space-6)',
        }}>
          Loading your exclusive property details…
        </p>
        <div className="shimmer" style={{
          height: 200,
          borderRadius: 'var(--radius-lg)',
          background: 'var(--glass-bg)',
        }} />
      </motion.div>
    </div>
  );
}
