// Shared UI components
const { useState, useEffect, useRef } = React;

// Subtle ornamental divider with gold diamond in center
function Ornament({ onDark }) {
  const color = onDark ? 'rgba(201, 166, 97, 0.6)' : 'rgba(161, 130, 63, 0.5)';
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12, margin: '0 auto' }}>
      <span style={{ width: 80, height: 1, background: `linear-gradient(90deg, transparent, ${color})` }} />
      <span style={{ width: 6, height: 6, transform: 'rotate(45deg)', background: color }} />
      <span style={{ width: 80, height: 1, background: `linear-gradient(90deg, ${color}, transparent)` }} />
    </div>
  );
}

// Logo component that reads current variant from app state
function Logo({ variant = 'abogados', size = 56, mode = 'on-dark' }) {
  // Three variants from client:
  // - 'abogados' = full legal abogados (with scales)
  // - 'legal' = simpler LEGAL wordmark + wreath
  // - 'mark' = just the mark (ID-1433-03 — transparent/white)
  const srcMap = {
    abogados: 'assets/logo-full.png',
    legal: 'assets/logo-legal.png',
    mark: 'assets/logo-mark.png',
  };
  const src = srcMap[variant] || srcMap.abogados;
  return (
    <img
      src={src}
      alt="Legal Abogados"
      style={{
        height: size,
        width: 'auto',
        display: 'block',
        filter: mode === 'on-dark' ? 'drop-shadow(0px 4px 24px rgba(255, 255, 255, 0.4)) drop-shadow(0px 0px 8px rgba(255, 255, 255, 0.6))' : 'none',
      }}
    />
  );
}

// Mini wordmark (icon only) used in nav/footer
function LogoMark({ size = 40 }) {
  return (
    <img
      src="assets/logo-mark.png"
      alt="Legal"
      style={{ height: size, width: size, objectFit: 'contain' }}
    />
  );
}

// Button
function Button({ children, variant = 'primary', onClick, href, type }) {
  const base = {
    display: 'inline-flex',
    alignItems: 'center',
    gap: 10,
    padding: '15px 28px',
    fontSize: 12,
    fontWeight: 500,
    letterSpacing: '0.22em',
    textTransform: 'uppercase',
    fontFamily: 'Inter, sans-serif',
    border: '1px solid',
    cursor: 'pointer',
    transition: 'all 0.3s ease',
    textDecoration: 'none',
    background: 'none',
  };
  const variants = {
    primary: {
      background: 'linear-gradient(180deg, #e8cf94 0%, #c9a661 50%, #a1823f 100%)',
      color: '#0b0b0d',
      borderColor: '#c9a661',
    },
    ghost: {
      background: 'transparent',
      color: 'var(--cream)',
      borderColor: 'rgba(201, 166, 97, 0.5)',
    },
    'ghost-dark': {
      background: 'transparent',
      color: 'var(--ink)',
      borderColor: 'rgba(11, 11, 13, 0.25)',
    },
  };
  const style = { ...base, ...variants[variant] };
  if (href) {
    return <a href={href} style={style} onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-2px)'} onMouseLeave={e => e.currentTarget.style.transform = 'translateY(0)'}>{children}</a>;
  }
  return <button type={type} onClick={onClick} style={style} onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-2px)'} onMouseLeave={e => e.currentTarget.style.transform = 'translateY(0)'}>{children}</button>;
}

// In-view animation hook
function useInView(options = {}) {
  const ref = useRef(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setInView(true);
        obs.unobserve(el);
      }
    }, { threshold: 0.15, ...options });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return [ref, inView];
}

function Reveal({ children, delay = 0, as: Tag = 'div', style = {}, ...rest }) {
  const [ref, inView] = useInView();
  return (
    <Tag
      ref={ref}
      style={{
        opacity: inView ? 1 : 0,
        transform: inView ? 'translateY(0)' : 'translateY(24px)',
        transition: `opacity 0.8s ease ${delay}ms, transform 0.8s ease ${delay}ms`,
        ...style,
      }}
      {...rest}
    >
      {children}
    </Tag>
  );
}

// SVG placeholder for imagery (striped, elegant)
function Placeholder({ label, height = 320, dark = false }) {
  const bg = dark ? '#15151a' : '#ebe3d3';
  const stripe = dark ? 'rgba(201, 166, 97, 0.08)' : 'rgba(11, 11, 13, 0.04)';
  const fg = dark ? '#9b9285' : '#6b6258';
  return (
    <div
      style={{
        height,
        width: '100%',
        background: `repeating-linear-gradient(135deg, ${bg} 0 20px, ${stripe} 20px 22px)`,
        backgroundColor: bg,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        position: 'relative',
        overflow: 'hidden',
      }}
    >
      <div style={{
        fontFamily: 'ui-monospace, Menlo, monospace',
        fontSize: 11,
        letterSpacing: '0.2em',
        color: fg,
        padding: '8px 16px',
        background: dark ? 'rgba(11, 11, 13, 0.6)' : 'rgba(251, 248, 242, 0.8)',
        border: `1px solid ${fg}`,
        textTransform: 'uppercase',
      }}>
        {label}
      </div>
    </div>
  );
}

Object.assign(window, { Ornament, Logo, LogoMark, Button, Reveal, useInView, Placeholder });