/* global React */

// ===========================================================
// Área 7 — shared primitives (Logo, Icons, Button helpers)
// ===========================================================

const { useState, useEffect, useRef, useMemo, useCallback, useContext, createContext } = React;

// ---------- LOGO ----------
// Faithful recreation of the A7 emblem: green ring, italic "A7" black-italic glyph
function A7Logo({ size = 56, glow = true }) {
  return (
    <div
      style={{
        width: size, height: size, position: 'relative',
        filter: glow ? 'drop-shadow(0 0 14px var(--accent-glow))' : 'none'
      }}
    >
      <svg viewBox="0 0 120 120" width={size} height={size} aria-label="Área 7">
        <defs>
          <radialGradient id="a7bg" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#0f1a14"/>
            <stop offset="100%" stopColor="#000"/>
          </radialGradient>
        </defs>
        <circle cx="60" cy="60" r="58" fill="url(#a7bg)"/>
        <circle cx="60" cy="60" r="52" fill="none" stroke="var(--accent)" strokeWidth="4"/>
        <text
          x="60" y="78"
          textAnchor="middle"
          fontFamily="'Red Hat Display', sans-serif"
          fontWeight="900"
          fontStyle="italic"
          fontSize="50"
          fill="var(--accent)"
          letterSpacing="-2"
        >A7</text>
      </svg>
    </div>
  );
}

// ---------- ICONS (inline SVG strokes; single accent / currentColor) ----------
function Icon({ name, size = 20, stroke = 1.8, color = 'currentColor' }) {
  const common = {
    width: size, height: size, viewBox: '0 0 24 24',
    fill: 'none', stroke: color, strokeWidth: stroke,
    strokeLinecap: 'round', strokeLinejoin: 'round',
  };
  switch (name) {
    case 'arrow-right':
      return <svg {...common}><path d="M5 12h14M13 6l6 6-6 6"/></svg>;
    case 'arrow-left':
      return <svg {...common}><path d="M19 12H5M11 6l-6 6 6 6"/></svg>;
    case 'arrow-up-right':
      return <svg {...common}><path d="M7 17 17 7M9 7h8v8"/></svg>;
    case 'calendar':
      return <svg {...common}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M16 3v4M8 3v4M3 10h18"/></svg>;
    case 'clock':
      return <svg {...common}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>;
    case 'whatsapp':
      return <svg viewBox="0 0 24 24" width={size} height={size} fill={color}>
        <path d="M20.5 3.5A11.6 11.6 0 0 0 12 0C5.6 0 .3 5.2.3 11.6c0 2 .5 4 1.6 5.8L0 24l6.8-1.8a11.7 11.7 0 0 0 5.2 1.3h0c6.4 0 11.6-5.2 11.6-11.6 0-3.1-1.2-6-3.4-8.2zM12 21.5c-1.7 0-3.4-.5-4.8-1.3l-.3-.2-3.6 1 1-3.5-.2-.4a9.6 9.6 0 1 1 17.7-5.5c0 5.3-4.3 9.7-9.7 9.7zm5.3-7.3-.5-.2-2 1c-.4-.1-1.5-.6-2.8-1.7-1-1-1.7-2.2-2-2.6 0-.2 0-.4.1-.6l.6-.7.3-.5v-.5l-.7-1.7c-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.5 0-.7.3-.3.2-1 1-1 2.5s1 2.9 1.2 3.1c.1.2 2 3 4.7 4.2 1.7.7 2.4.8 3.2.7.5-.1 1.5-.6 1.7-1.2.2-.6.2-1 .1-1.2 0 0-.2-.2-.5-.3z"/>
      </svg>;
    case 'instagram':
      return <svg {...common}><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.5" fill={color}/></svg>;
    case 'check':
      return <svg {...common}><path d="m5 12 4 4L19 7"/></svg>;
    case 'check-circle':
      return <svg {...common}><circle cx="12" cy="12" r="9"/><path d="m8 12 3 3 5-6"/></svg>;
    case 'close':
      return <svg {...common}><path d="m6 6 12 12M18 6 6 18"/></svg>;
    case 'menu':
      return <svg {...common}><path d="M4 7h16M4 12h16M4 17h16"/></svg>;
    case 'pin':
      return <svg {...common}><path d="M12 22s8-7 8-13a8 8 0 1 0-16 0c0 6 8 13 8 13z"/><circle cx="12" cy="9" r="2.5"/></svg>;
    case 'video':
      return <svg {...common}><rect x="2" y="6" width="14" height="12" rx="2"/><path d="m16 10 6-3v10l-6-3z"/></svg>;
    case 'film':
      return <svg {...common}><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 7h4M3 12h4M3 17h4M17 7h4M17 12h4M17 17h4M7 3v18M17 3v18"/></svg>;
    case 'scissors':
      return <svg {...common}><circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="m20 4-12 8M20 20 8 12M14 12l6 4"/></svg>;
    case 'download':
      return <svg {...common}><path d="M12 4v12m-5-5 5 5 5-5M4 20h16"/></svg>;
    case 'sparkle':
      return <svg {...common}><path d="M12 3v6M12 15v6M3 12h6M15 12h6"/><path d="M5.5 5.5 9 9M15 15l3.5 3.5M5.5 18.5 9 15M15 9l3.5-3.5"/></svg>;
    case 'plus':
      return <svg {...common}><path d="M12 5v14M5 12h14"/></svg>;
    case 'minus':
      return <svg {...common}><path d="M5 12h14"/></svg>;
    case 'phone':
      return <svg {...common}><path d="M5 4h4l2 5-3 2a13 13 0 0 0 5 5l2-3 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/></svg>;
    case 'mail':
      return <svg {...common}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>;
    case 'user':
      return <svg {...common}><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>;
    case 'wifi':
      return <svg {...common}><path d="M2 9a16 16 0 0 1 20 0M5 12.5a11 11 0 0 1 14 0M8 16a6 6 0 0 1 8 0"/><circle cx="12" cy="20" r="1" fill={color}/></svg>;
    case 'parking':
      return <svg {...common}><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M9 17V8h4a3 3 0 0 1 0 6H9"/></svg>;
    case 'shower':
      return <svg {...common}><path d="M5 12V7a3 3 0 0 1 6 0v1"/><path d="M3 12h18M7 16v1M10 16v2M13 17v1M16 16v2M19 16v1"/></svg>;
    case 'grill':
      return <svg {...common}><path d="M4 9h16l-2 7H6L4 9zM7 9V4M12 9V4M17 9V4"/></svg>;
    case 'cake':
      return <svg {...common}><path d="M3 21v-7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v7M3 16h18M8 12V8M12 12V7M16 12V8"/><circle cx="8" cy="6" r="0.6" fill={color}/><circle cx="12" cy="5" r="0.6" fill={color}/><circle cx="16" cy="6" r="0.6" fill={color}/></svg>;
    case 'trophy':
      return <svg {...common}><path d="M6 4h12v4a6 6 0 0 1-12 0V4z"/><path d="M6 6H3v2a3 3 0 0 0 3 3M18 6h3v2a3 3 0 0 1-3 3M9 18h6M10 14h4l-1 4h-2l-1-4zM8 21h8"/></svg>;
    case 'students':
      return <svg {...common}><path d="M3 8 12 4l9 4-9 4-9-4z"/><path d="M7 10v4c0 1.5 2.2 3 5 3s5-1.5 5-3v-4"/></svg>;
    case 'paddle':
      return <svg {...common}><ellipse cx="9" cy="9" rx="6" ry="7"/><circle cx="9" cy="9" r="1.5" fill={color}/><path d="m13 13 7 7"/></svg>;
    case 'football':
      return <svg {...common}><circle cx="12" cy="12" r="9"/><path d="m12 7-4 3 1.5 5h5L16 10 12 7zM12 3v4M3 9l5 1M21 9l-5 1M6 18l3-3M18 18l-3-3"/></svg>;
    case 'edit':
      return <svg {...common}><path d="M4 20h4l10-10-4-4L4 16v4z"/><path d="m14 6 4 4"/></svg>;
    case 'trash':
      return <svg {...common}><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13M10 11v6M14 11v6"/></svg>;
    case 'info':
      return <svg {...common}><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8v.5"/></svg>;
    default: return <svg {...common}><circle cx="12" cy="12" r="9"/></svg>;
  }
}

// ---------- BUTTON ----------
function Button({ children, variant = 'primary', size, block, icon, iconAfter, ...rest }) {
  const cls = [
    'btn',
    `btn-${variant}`,
    size === 'sm' && 'btn-sm',
    block && 'btn-block',
  ].filter(Boolean).join(' ');
  return (
    <button className={cls} {...rest}>
      {icon && <Icon name={icon} size={size === 'sm' ? 14 : 18}/>}
      {children}
      {iconAfter && <Icon name={iconAfter} size={size === 'sm' ? 14 : 18}/>}
    </button>
  );
}

// ---------- TOAST ----------
const ToastCtx = createContext(null);
function ToastProvider({ children }) {
  const [toasts, setToasts] = useState([]);
  const push = useCallback((msg, kind = 'success') => {
    const id = Math.random().toString(36).slice(2);
    setToasts(t => [...t, { id, msg, kind }]);
    setTimeout(() => setToasts(t => t.filter(x => x.id !== id)), 3600);
  }, []);
  return (
    <ToastCtx.Provider value={push}>
      {children}
      <div style={{
        position: 'fixed', bottom: 24, left: 0, right: 0, zIndex: 1000,
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, pointerEvents: 'none',
      }}>
        {toasts.map(t => (
          <div key={t.id} className="fade-slide" style={{
            background: t.kind === 'error' ? 'rgba(244,63,94,0.18)' : 'rgba(10,10,10,0.95)',
            color: t.kind === 'error' ? '#fecdd3' : '#fbfbfb',
            border: `1px solid ${t.kind === 'error' ? 'rgba(244,63,94,0.4)' : 'var(--hair-3)'}`,
            backdropFilter: 'blur(12px)',
            padding: '12px 18px', borderRadius: 999,
            display: 'inline-flex', alignItems: 'center', gap: 10,
            fontWeight: 600, fontSize: 14, boxShadow: 'var(--shadow-card)',
          }}>
            <Icon name={t.kind === 'error' ? 'info' : 'check-circle'} size={16} color={t.kind === 'error' ? '#f87171' : 'var(--accent)'}/>
            {t.msg}
          </div>
        ))}
      </div>
    </ToastCtx.Provider>
  );
}
const useToast = () => useContext(ToastCtx);

// ---------- Confirmation Modal ----------
function Modal({ open, onClose, children, maxWidth = 540 }) {
  useEffect(() => {
    if (!open) return;
    const handler = e => e.key === 'Escape' && onClose();
    window.addEventListener('keydown', handler);
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', handler);
      document.body.style.overflow = '';
    };
  }, [open, onClose]);
  if (!open) return null;
  return (
    <div
      onClick={onClose}
      style={{
        position: 'fixed', inset: 0, zIndex: 800,
        background: 'rgba(0,0,0,0.72)', backdropFilter: 'blur(8px)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: 16, animation: 'fadeIn 200ms ease-out both',
      }}
    >
      <div
        onClick={e => e.stopPropagation()}
        className="fade-slide"
        style={{
          width: '100%', maxWidth, maxHeight: '92vh', overflow: 'auto',
          background: '#0a0a0a',
          border: '1px solid var(--hair-3)',
          borderRadius: 24,
          boxShadow: '0 30px 80px rgba(0,0,0,0.6)',
        }}
      >
        {children}
      </div>
    </div>
  );
}

// Expose globally
Object.assign(window, {
  A7Logo, Icon, Button, ToastProvider, useToast, Modal,
});