/* global React */
const { useState, useEffect, useRef } = React;

// ============================================
// SVG ICONS
// ============================================
const Icon = {
  Phone: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0 1 22 16.92z"/>
    </svg>
  ),
  Arrow: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <line x1="5" y1="12" x2="19" y2="12"/>
      <polyline points="12 5 19 12 12 19"/>
    </svg>
  ),
  ArrowLeft: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      <line x1="19" y1="12" x2="5" y2="12"/>
      <polyline points="12 19 5 12 12 5"/>
    </svg>
  ),
  X: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      <line x1="18" y1="6" x2="6" y2="18"/>
      <line x1="6" y1="6" x2="18" y2="18"/>
    </svg>
  ),
  Menu: ({ size = 22 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round">
      <line x1="3" y1="7" x2="21" y2="7"/>
      <line x1="3" y1="17" x2="21" y2="17"/>
    </svg>
  ),
  Check: ({ size = 28 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="20 6 9 17 4 12"/>
    </svg>
  ),
  Instagram: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2" y="2" width="20" height="20" rx="0"/>
      <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
      <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
    </svg>
  ),
  LinkedIn: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6z"/>
      <rect x="2" y="9" width="4" height="12"/>
      <circle cx="4" cy="4" r="2"/>
    </svg>
  ),
  // Difference column icons (line, geometric, gold)
  Loupe: ({ size = 44 }) => (
    <svg width={size} height={size} viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="20" cy="20" r="11"/>
      <line x1="28" y1="28" x2="40" y2="40"/>
      <circle cx="20" cy="20" r="6"/>
    </svg>
  ),
  Document: ({ size = 44 }) => (
    <svg width={size} height={size} viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 6h18l8 8v28H12z"/>
      <polyline points="30 6 30 14 38 14"/>
      <line x1="18" y1="22" x2="32" y2="22"/>
      <line x1="18" y1="28" x2="32" y2="28"/>
      <line x1="18" y1="34" x2="26" y2="34"/>
    </svg>
  ),
  Vault: ({ size = 44 }) => (
    <svg width={size} height={size} viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="6" y="10" width="36" height="28"/>
      <circle cx="24" cy="24" r="7"/>
      <line x1="24" y1="17" x2="24" y2="14"/>
      <line x1="24" y1="34" x2="24" y2="31"/>
      <line x1="17" y1="24" x2="14" y2="24"/>
      <line x1="34" y1="24" x2="31" y2="24"/>
    </svg>
  ),
  Watch: ({ size = 22 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="6"/>
      <polyline points="12 9 12 12 14 14"/>
      <path d="M9 6 9 3 15 3 15 6"/>
      <path d="M9 18 9 21 15 21 15 18"/>
    </svg>
  ),
  Gem: ({ size = 22 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      <polygon points="6 3 18 3 22 9 12 22 2 9"/>
      <line x1="6" y1="3" x2="2" y2="9"/>
      <line x1="18" y1="3" x2="22" y2="9"/>
      <line x1="2" y1="9" x2="22" y2="9"/>
      <line x1="12" y1="22" x2="12" y2="9"/>
      <line x1="6" y1="3" x2="12" y2="9"/>
      <line x1="18" y1="3" x2="12" y2="9"/>
    </svg>
  ),
  Bag: ({ size = 22 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 8h14l-1 13H6z"/>
      <path d="M9 8V5a3 3 0 0 1 6 0v3"/>
    </svg>
  ),
};

const FFMark = () => (
  <svg viewBox="0 0 455.22 455.22" xmlns="http://www.w3.org/2000/svg">
    <path d="M250.59,303.32h-45.97c-2.5,0-4.97-.82-6.98-2.31l-30.69-22.87c-2.94-2.19-4.7-5.69-4.7-9.36v-82.32c0-3.67,1.76-7.17,4.7-9.36l30.69-22.87c2-1.49,4.48-2.31,6.98-2.31h45.97c2.5,0,4.97.82,6.98,2.31l30.69,22.87c2.94,2.19,4.7,5.69,4.7,9.36v82.32c0,3.67-1.76,7.17-4.7,9.36l-30.68,22.87c-2,1.49-4.48,2.31-6.98,2.31ZM204.63,157.02c-1.4,0-2.8.46-3.92,1.3l-30.68,22.87c-1.65,1.23-2.64,3.2-2.64,5.26v82.32c0,2.06.99,4.03,2.64,5.26h0l30.69,22.87c1.13.84,2.52,1.3,3.92,1.3h45.97c1.4,0,2.8-.46,3.92-1.3l30.68-22.87c1.65-1.23,2.64-3.2,2.64-5.26v-82.32c0-2.06-.99-4.03-2.64-5.26l-30.68-22.87c-1.13-.84-2.52-1.3-3.92-1.3h-45.97Z"/>
    <path d="M252.75,219.3l3.28-12.46c.46-1.81.96-3.75,1.71-5.85.72-2.1,3.02-7.91,6.16-10.39.61-.52,2.44-1.64,4.24-1.66,3.27-.05,4.23,1.76,4.33,1.96-1.08.97-1.65,2.48-1.27,4.1.38,1.6,1.72,2.87,3.33,3.16,2.71.49,5.02-1.61,5.02-4.22,0-3.24-3.2-6.93-11.33-6.93-3.15,0-6.04.72-9.27,2.72-3.08,1.89-5.69,4.29-7.83,7.28-3.79,5.31-7.29,15.66-8.92,22.3h-14.37l-.58,2.33h14.38l-6.61,26.13-3.28,12.45c-.46,1.81-.96,3.75-1.71,5.85-.72,2.1-3.02,7.91-6.16,10.39h.03c-.63.53-2.49,1.46-4.24,1.46-3.02,0-4.31-1.7-4.36-1.78,1.08-.97,1.66-2.48,1.28-4.1-.38-1.6-1.72-2.87-3.33-3.16-2.71-.5-5.02,1.61-5.02,4.22,0,2.78,3.41,7.08,10.93,6.97,3.61-.05,6.48-.72,9.73-2.73v-.04c3.06-1.88,5.64-4.26,7.76-7.23,3.79-5.31,7.25-14.79,8.88-21.43l6.65-27h14.33l.59-2.33h-14.36Z"/>
    <path d="M220.18,207.45l3.28-12.46c.46-1.81.96-3.75,1.71-5.85.72-2.1,3.02-7.91,6.16-10.39.61-.52,2.44-1.64,4.24-1.66,3.27-.05,4.23,1.76,4.33,1.96-1.08.97-1.65,2.48-1.27,4.1.38,1.6,1.72,2.87,3.33,3.16,2.71.49,5.02-1.61,5.02-4.22,0-3.24-3.2-6.93-11.33-6.93-3.15,0-6.04.72-9.27,2.72-3.08,1.89-5.69,4.29-7.83,7.28-3.79,5.31-7.29,15.66-8.92,22.3h-14.37l-.58,2.33h14.38l-6.61,26.13-3.28,12.45c-.46,1.81-.96,3.75-1.71,5.85-.72,2.1-3.02,7.91-6.16,10.39h.03c-.63.53-2.49,1.46-4.24,1.46-3.02,0-4.31-1.7-4.36-1.78,1.08-.97,1.66-2.48,1.28-4.1-.38-1.6-1.72-2.87-3.33-3.16-2.71-.5-5.02,1.61-5.02,4.22,0,2.78,3.41,7.08,10.93,6.97,3.61-.05,6.48-.72,9.73-2.73v-.04c3.06-1.88,5.64-4.26,7.76-7.23,3.79-5.31,7.25-14.79,8.88-21.43l6.65-27h14.33l.59-2.33h-14.36Z"/>
  </svg>
);

Object.assign(window, { Icon, FFMark });
