/* ── DominiTrip UI Primitives ── */

/* ── Scroll Animation Hook ── */
function useScrollReveal(ref) {
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setVisible(true); obs.disconnect(); } }, { threshold: 0.12 });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, [ref]);
  return visible;
}

function AnimatedSection({ children, className = '', style = {}, delay = 0 }) {
  const ref = React.useRef(null);
  const visible = useScrollReveal(ref);
  return (
    <div ref={ref} className={className} style={{
      ...style,
      opacity: visible ? 1 : 0,
      transform: visible ? 'translateY(0)' : 'translateY(36px)',
      transition: `all 0.75s cubic-bezier(0.22,1,0.36,1) ${delay}s`,
    }}>{children}</div>
  );
}

/* ── Section Header ── */
function SectionHeader({ tag, title, subtitle, align = 'center', light = false }) {
  const sectionHeaderStyles = {
    wrapper: { textAlign: align, marginBottom: 48, maxWidth: 680, marginLeft: align === 'center' ? 'auto' : 0, marginRight: align === 'center' ? 'auto' : 0 },
    tag: {
      display: 'inline-block', fontFamily: 'var(--font-display)', fontSize: 13, fontWeight: 700,
      textTransform: 'uppercase', letterSpacing: '0.12em', color: light ? 'rgba(255,255,255,0.7)' : 'var(--primary)',
      background: light ? 'rgba(255,255,255,0.12)' : 'var(--primary-glow)',
      padding: '6px 16px', borderRadius: 100, marginBottom: 14,
    },
    title: {
      fontSize: 'clamp(28px, 4.5vw, 44px)', fontWeight: 800, lineHeight: 1.12,
      color: light ? '#fff' : 'var(--text)', marginBottom: subtitle ? 14 : 0,
    },
    subtitle: { fontSize: 17, color: light ? 'rgba(255,255,255,0.75)' : 'var(--text-secondary)', lineHeight: 1.6, maxWidth: 560, margin: align === 'center' ? '0 auto' : 0 },
  };
  return (
    <div style={sectionHeaderStyles.wrapper}>
      {tag && <span style={sectionHeaderStyles.tag}>{tag}</span>}
      <h2 style={sectionHeaderStyles.title}>{title}</h2>
      {subtitle && <p style={sectionHeaderStyles.subtitle}>{subtitle}</p>}
    </div>
  );
}

/* ── Button ── */
function Btn({ children, variant = 'primary', size = 'md', onClick, style = {}, icon, full }) {
  const [hovered, setHovered] = React.useState(false);
  const base = {
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
    fontFamily: 'var(--font-display)', fontWeight: 600, cursor: 'pointer',
    border: 'none', borderRadius: 'var(--radius-sm)', transition: 'all 0.25s ease',
    textDecoration: 'none', whiteSpace: 'nowrap', width: full ? '100%' : 'auto',
  };
  const sizes = {
    sm: { fontSize: 13, padding: '8px 18px' },
    md: { fontSize: 15, padding: '12px 28px' },
    lg: { fontSize: 17, padding: '16px 36px' },
  };
  const variants = {
    primary: { background: 'var(--primary)', color: 'var(--text-on-primary)', transform: hovered ? 'translateY(-2px)' : 'none', boxShadow: hovered ? '0 8px 24px var(--primary-glow)' : 'none' },
    accent: { background: 'var(--accent)', color: '#fff', transform: hovered ? 'translateY(-2px)' : 'none', boxShadow: hovered ? '0 8px 24px rgba(251,146,60,0.3)' : 'none' },
    outline: { background: 'transparent', color: 'var(--primary)', border: '2px solid var(--primary)', transform: hovered ? 'translateY(-2px)' : 'none' },
    ghost: { background: hovered ? 'var(--primary-glow)' : 'transparent', color: 'var(--primary)' },
    white: { background: '#fff', color: 'var(--primary)', transform: hovered ? 'translateY(-2px)' : 'none', boxShadow: hovered ? '0 8px 24px rgba(0,0,0,0.15)' : 'none' },
    whatsapp: { background: '#25D366', color: '#fff', transform: hovered ? 'translateY(-2px)' : 'none', boxShadow: hovered ? '0 8px 24px rgba(37,211,102,0.35)' : 'none' },
  };
  return (
    <button onClick={onClick} onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}
      style={{ ...base, ...sizes[size], ...variants[variant], ...style }}>
      {icon && <span style={{ display: 'flex', fontSize: size === 'lg' ? 20 : 16 }}>{icon}</span>}
      {children}
    </button>
  );
}

/* ── Wave Divider ── */
function WaveDivider({ flip, color, style = {} }) {
  return (
    <div style={{ lineHeight: 0, overflow: 'hidden', transform: flip ? 'rotate(180deg)' : 'none', marginTop: flip ? -1 : -1, marginBottom: -1, ...style }}>
      <svg viewBox="0 0 1440 60" xmlns="http://www.w3.org/2000/svg" style={{ display: 'block', width: '100%', height: 'clamp(30px, 4vw, 60px)' }}>
        <path d="M0,24 C240,48 480,0 720,24 C960,48 1200,0 1440,24 L1440,60 L0,60 Z" fill={color || 'var(--wave-fill)'} />
      </svg>
    </div>
  );
}

/* ── Badge ── */
function Badge({ children, style = {} }) {
  return (
    <span style={{
      display: 'inline-block', fontSize: 12, fontWeight: 700, fontFamily: 'var(--font-display)',
      background: 'var(--badge-bg)', color: 'var(--badge-text)',
      padding: '4px 12px', borderRadius: 100, ...style,
    }}>{children}</span>
  );
}

/* ── Star Rating ── */
function Stars({ rating = 5, size = 16 }) {
  return (
    <div style={{ display: 'flex', gap: 2 }}>
      {Array.from({ length: 5 }, (_, i) => (
        <svg key={i} width={size} height={size} viewBox="0 0 20 20" fill={i < rating ? '#FBBF24' : 'var(--text-muted)'}>
          <path d="M10 1.5l2.47 5.01 5.53.8-4 3.9.94 5.49L10 14.27 5.06 16.7 6 11.21l-4-3.9 5.53-.8z" />
        </svg>
      ))}
    </div>
  );
}

/* ── Card ── */
function Card({ children, style = {}, onClick, hoverable = true }) {
  const [hovered, setHovered] = React.useState(false);
  return (
    <div onClick={onClick}
      onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}
      style={{
        background: 'var(--surface)', borderRadius: 'var(--radius)',
        boxShadow: hovered && hoverable ? 'var(--card-shadow-hover)' : 'var(--card-shadow)',
        transition: 'all 0.35s cubic-bezier(0.22,1,0.36,1)',
        transform: hovered && hoverable ? 'translateY(-4px)' : 'none',
        overflow: 'hidden', cursor: onClick ? 'pointer' : 'default', ...style,
      }}>{children}</div>
  );
}

/* ── SVG Icons ── */
const Icons = {
  plane: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M17.8 19.2L16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z"/></svg>,
  van: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 17h1m16 0h1M5.6 17H2V7a1 1 0 011-1h9v11m0-11h4l3 5m0 0v6h-3m-4 0H9m8 0a2 2 0 11-4 0m4 0a2 2 0 10-4 0M9 17a2 2 0 11-4 0m4 0a2 2 0 10-4 0"/></svg>,
  hotel: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 21V7a2 2 0 012-2h6v16M21 21V11a2 2 0 00-2-2h-4v12"/><path d="M7 9h2m-2 4h2m4 0h2m-2 4h2"/></svg>,
  users: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M17 21v-2a4 4 0 00-3-3.87M9 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>,
  clock: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>,
  wifi: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12.55a11 11 0 0114 0M8.53 16.11a6 6 0 016.95 0M12 20h.01"/></svg>,
  shield: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4"/></svg>,
  globe: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10A15.3 15.3 0 0112 2z"/></svg>,
  drink: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M8 2h8l-1 9H9L8 2z"/><path d="M12 11v8"/><path d="M8 22h8"/><path d="M5 2h14"/></svg>,
  heart: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>,
  phone: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"/></svg>,
  chevDown: <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 7.5l5 5 5-5"/></svg>,
  mapPin: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>,
  close: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>,
  menu: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>,
  calendar: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>,
  check: <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M4 10.5l4 4 8-8.5"/></svg>,
  arrowRight: <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 10h12m-5-5l5 5-5 5"/></svg>,
  car: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 17h2m10 0h2M3 11l2-6h14l2 6M3 11v6h18v-6M3 11h18"/><circle cx="7" cy="17" r="1"/><circle cx="17" cy="17" r="1"/></svg>,
  tag: <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M2 10V3a1 1 0 011-1h7l8 8-8 8-8-8z"/><circle cx="6" cy="6" r="1" fill="currentColor"/></svg>,
};

/* ── Currency Formatter ── */
const CAD_RATE = 1.37;
function formatPrice(usd, currency = 'USD') {
  if (currency === 'CAD') return `C$${Math.round(usd * CAD_RATE)}`;
  return `$${usd}`;
}
function formatPriceLabel(usd, currency = 'USD') {
  if (currency === 'CAD') return `C$${Math.round(usd * CAD_RATE)}`;
  return `$${usd}`;
}

/* ── Currency Toggle Pill ── */
function CurrencyToggle({ currency, onChange }) {
  const active = { background: 'var(--primary)', color: 'var(--text-on-primary)' };
  const inactive = { background: 'transparent', color: 'var(--text-secondary)' };
  const btnBase = {
    padding: '4px 12px', borderRadius: 100, border: 'none', cursor: 'pointer',
    fontFamily: 'var(--font-display)', fontSize: 12, fontWeight: 700, transition: 'all 0.2s',
  };
  return (
    <div style={{ display: 'inline-flex', borderRadius: 100, background: 'var(--primary-glow)', padding: 2, gap: 2 }}>
      <button onClick={() => onChange('USD')} style={{ ...btnBase, ...(currency === 'USD' ? active : inactive) }}>USD</button>
      <button onClick={() => onChange('CAD')} style={{ ...btnBase, ...(currency === 'CAD' ? active : inactive) }}>CAD</button>
    </div>
  );
}

/* ── Export to window ── */
Object.assign(window, {
  useScrollReveal, AnimatedSection, SectionHeader, Btn, WaveDivider,
  Badge, Stars, Card, Icons, formatPrice, formatPriceLabel, CurrencyToggle, CAD_RATE,
});