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

/* ============================================================
   Stylized SVG flag chips — minimal luxe, no emoji
   ============================================================ */
const FlagChip = ({ country }) => {
  const flags = {
    us: (
      <svg viewBox="0 0 64 64" width="56" height="56" aria-hidden="true">
        <defs><clipPath id="c-us"><circle cx="32" cy="32" r="30"/></clipPath></defs>
        <circle cx="32" cy="32" r="30" fill="#0F1828"/>
        <g clipPath="url(#c-us)">
          {Array.from({length:7}).map((_,i)=>(
            <rect key={i} x="0" y={4 + i*8} width="64" height="4" fill="#C9A961" opacity="0.85"/>
          ))}
          <rect x="0" y="0" width="28" height="32" fill="#0B1220"/>
          {Array.from({length:9}).map((_,i)=>(
            <circle key={i} cx={4 + (i%3)*9} cy={6 + Math.floor(i/3)*9} r="0.9" fill="#E5C97D"/>
          ))}
        </g>
        <circle cx="32" cy="32" r="29.5" fill="none" stroke="#C9A961" strokeOpacity="0.5"/>
      </svg>
    ),
    ca: (
      <svg viewBox="0 0 64 64" width="56" height="56" aria-hidden="true">
        <defs><clipPath id="c-ca"><circle cx="32" cy="32" r="30"/></clipPath></defs>
        <circle cx="32" cy="32" r="30" fill="#0F1828"/>
        <g clipPath="url(#c-ca)">
          <rect x="0" y="0" width="16" height="64" fill="#C9A961" opacity="0.7"/>
          <rect x="48" y="0" width="16" height="64" fill="#C9A961" opacity="0.7"/>
          <path d="M32 18 L34 24 L40 22 L37 28 L42 31 L36 33 L37 39 L32 36 L27 39 L28 33 L22 31 L27 28 L24 22 L30 24 Z" fill="#E5C97D"/>
          <rect x="31" y="36" width="2" height="8" fill="#E5C97D"/>
        </g>
        <circle cx="32" cy="32" r="29.5" fill="none" stroke="#C9A961" strokeOpacity="0.5"/>
      </svg>
    ),
    au: (
      <svg viewBox="0 0 64 64" width="56" height="56" aria-hidden="true">
        <defs><clipPath id="c-au"><circle cx="32" cy="32" r="30"/></clipPath></defs>
        <circle cx="32" cy="32" r="30" fill="#0F1828"/>
        <g clipPath="url(#c-au)">
          <rect x="0" y="0" width="32" height="32" fill="#0B1220"/>
          <path d="M0 0 L32 32 M32 0 L0 32" stroke="#C9A961" strokeWidth="1.5" opacity="0.7"/>
          <path d="M0 16 L32 16 M16 0 L16 32" stroke="#C9A961" strokeWidth="2" opacity="0.7"/>
          <circle cx="48" cy="48" r="4" fill="none" stroke="#E5C97D" strokeWidth="1"/>
          <circle cx="48" cy="32" r="2" fill="#E5C97D"/>
          <circle cx="56" cy="44" r="1.5" fill="#E5C97D"/>
          <circle cx="40" cy="48" r="1.5" fill="#E5C97D"/>
          <circle cx="50" cy="56" r="1.2" fill="#E5C97D"/>
        </g>
        <circle cx="32" cy="32" r="29.5" fill="none" stroke="#C9A961" strokeOpacity="0.5"/>
      </svg>
    ),
    gb: (
      <svg viewBox="0 0 64 64" width="56" height="56" aria-hidden="true">
        <defs><clipPath id="c-gb"><circle cx="32" cy="32" r="30"/></clipPath></defs>
        <circle cx="32" cy="32" r="30" fill="#0F1828"/>
        <g clipPath="url(#c-gb)">
          <path d="M0 0 L64 64 M64 0 L0 64" stroke="#C9A961" strokeWidth="2" opacity="0.6"/>
          <path d="M32 0 L32 64 M0 32 L64 32" stroke="#E5C97D" strokeWidth="3"/>
          <path d="M32 0 L32 64 M0 32 L64 32" stroke="#0B1220" strokeWidth="1"/>
        </g>
        <circle cx="32" cy="32" r="29.5" fill="none" stroke="#C9A961" strokeOpacity="0.5"/>
      </svg>
    ),
    cn: (
      <svg viewBox="0 0 64 64" width="56" height="56" aria-hidden="true">
        <defs><clipPath id="c-cn"><circle cx="32" cy="32" r="30"/></clipPath></defs>
        <circle cx="32" cy="32" r="30" fill="#0F1828"/>
        <g clipPath="url(#c-cn)">
          <path d="M16 18 L18 23 L23 23 L19 26 L20.5 31 L16 28 L11.5 31 L13 26 L9 23 L14 23 Z" fill="#E5C97D"/>
          <path d="M28 12 L29 14 L31 14 L29.5 15.5 L30 17.5 L28 16.5 L26 17.5 L26.5 15.5 L25 14 L27 14 Z" fill="#C9A961"/>
          <path d="M34 16 L35 18 L37 18 L35.5 19.5 L36 21.5 L34 20.5 L32 21.5 L32.5 19.5 L31 18 L33 18 Z" fill="#C9A961"/>
          <path d="M34 22 L35 24 L37 24 L35.5 25.5 L36 27.5 L34 26.5 L32 27.5 L32.5 25.5 L31 24 L33 24 Z" fill="#C9A961"/>
          <path d="M28 28 L29 30 L31 30 L29.5 31.5 L30 33.5 L28 32.5 L26 33.5 L26.5 31.5 L25 30 L27 30 Z" fill="#C9A961"/>
        </g>
        <circle cx="32" cy="32" r="29.5" fill="none" stroke="#C9A961" strokeOpacity="0.5"/>
      </svg>
    ),
    jp: (
      <svg viewBox="0 0 64 64" width="56" height="56" aria-hidden="true">
        <defs><clipPath id="c-jp"><circle cx="32" cy="32" r="30"/></clipPath></defs>
        <circle cx="32" cy="32" r="30" fill="#0F1828"/>
        <g clipPath="url(#c-jp)">
          <circle cx="32" cy="32" r="14" fill="#C9A961" opacity="0.18"/>
          <circle cx="32" cy="32" r="11" fill="none" stroke="#E5C97D" strokeWidth="0.8"/>
          <circle cx="32" cy="32" r="7" fill="#E5C97D" opacity="0.85"/>
        </g>
        <circle cx="32" cy="32" r="29.5" fill="none" stroke="#C9A961" strokeOpacity="0.5"/>
      </svg>
    ),
  };
  return flags[country] || null;
};

/* ============================================================
   Compass-rose ornament (gold, slow rotation)
   ============================================================ */
const CompassRose = ({ size = 600, opacity = 0.06 }) => (
  <svg
    viewBox="0 0 200 200"
    width={size}
    height={size}
    style={{ opacity }}
    aria-hidden="true"
  >
    <defs>
      <radialGradient id="cr-grad" cx="50%" cy="50%" r="50%">
        <stop offset="0%" stopColor="#E5C97D" stopOpacity="0.8"/>
        <stop offset="100%" stopColor="#C9A961" stopOpacity="0"/>
      </radialGradient>
    </defs>
    <circle cx="100" cy="100" r="98" fill="none" stroke="#C9A961" strokeWidth="0.5"/>
    <circle cx="100" cy="100" r="78" fill="none" stroke="#C9A961" strokeWidth="0.3"/>
    <circle cx="100" cy="100" r="50" fill="none" stroke="#C9A961" strokeWidth="0.3"/>
    <circle cx="100" cy="100" r="20" fill="url(#cr-grad)"/>
    {/* 8 main points */}
    {Array.from({length: 8}).map((_,i) => {
      const a = (i * 45) * Math.PI / 180;
      const x2 = 100 + Math.cos(a) * 95;
      const y2 = 100 + Math.sin(a) * 95;
      return <line key={i} x1="100" y1="100" x2={x2} y2={y2} stroke="#C9A961" strokeWidth="0.6"/>
    })}
    {/* 32 tick marks */}
    {Array.from({length: 32}).map((_,i) => {
      const a = (i * 11.25) * Math.PI / 180;
      const x1 = 100 + Math.cos(a) * 92;
      const y1 = 100 + Math.sin(a) * 92;
      const x2 = 100 + Math.cos(a) * 98;
      const y2 = 100 + Math.sin(a) * 98;
      return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="#C9A961" strokeWidth="0.4"/>
    })}
    {/* Diamond compass needle */}
    <polygon points="100,18 106,100 100,98 94,100" fill="#E5C97D" opacity="0.5"/>
    <polygon points="100,182 106,100 100,102 94,100" fill="#C9A961" opacity="0.35"/>
    <polygon points="18,100 100,94 102,100 100,106" fill="#C9A961" opacity="0.35"/>
    <polygon points="182,100 100,94 98,100 100,106" fill="#C9A961" opacity="0.35"/>
    <text x="100" y="13" textAnchor="middle" fontFamily="Fraunces, serif" fontStyle="italic" fontSize="11" fill="#E5C97D">N</text>
    <text x="100" y="194" textAnchor="middle" fontFamily="Fraunces, serif" fontStyle="italic" fontSize="11" fill="#C9A961">S</text>
    <text x="9" y="104" textAnchor="middle" fontFamily="Fraunces, serif" fontStyle="italic" fontSize="11" fill="#C9A961">W</text>
    <text x="191" y="104" textAnchor="middle" fontFamily="Fraunces, serif" fontStyle="italic" fontSize="11" fill="#C9A961">E</text>
  </svg>
);

/* ============================================================
   World map watermark (subtle dotted continents)
   ============================================================ */
const WorldMapBg = () => (
  <svg
    viewBox="0 0 1200 600"
    style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.04, pointerEvents: 'none' }}
    aria-hidden="true"
  >
    {/* Generated dotted continent shapes */}
    {(() => {
      const dots = [];
      const continents = [
        // North America
        { cx: 220, cy: 200, rx: 130, ry: 110 },
        // South America
        { cx: 320, cy: 420, rx: 60, ry: 100 },
        // Europe
        { cx: 600, cy: 180, rx: 90, ry: 60 },
        // Africa
        { cx: 640, cy: 360, rx: 90, ry: 130 },
        // Asia
        { cx: 850, cy: 220, rx: 200, ry: 130 },
        // Australia
        { cx: 1000, cy: 460, rx: 70, ry: 50 },
      ];
      let key = 0;
      continents.forEach(c => {
        for (let i = 0; i < 200; i++) {
          const angle = Math.random() * Math.PI * 2;
          const r = Math.sqrt(Math.random());
          const x = c.cx + Math.cos(angle) * c.rx * r;
          const y = c.cy + Math.sin(angle) * c.ry * r;
          dots.push(<circle key={key++} cx={x} cy={y} r="1.2" fill="#C9A961"/>);
        }
      });
      return dots;
    })()}
  </svg>
);

/* ============================================================
   Lucide-like icons (inline, no CDN required)
   ============================================================ */
const Icon = ({ name, size = 20, strokeWidth = 1.5, ...props }) => {
  const paths = {
    check: <polyline points="20 6 9 17 4 12"/>,
    plus: <><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></>,
    x: <><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></>,
    arrowRight: <><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></>,
    arrowDown: <><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></>,
    lock: <><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></>,
    calendar: <><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"/></>,
    globe: <><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15 15 0 0 1 0 20 15 15 0 0 1 0-20"/></>,
    shield: <path d="M12 2 4 6v6c0 5 3.5 9 8 10 4.5-1 8-5 8-10V6l-8-4Z"/>,
    award: <><circle cx="12" cy="8" r="6"/><polyline points="8.21 13.89 7 22 12 19 17 22 15.79 13.88"/></>,
    book: <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20V3H6.5A2.5 2.5 0 0 0 4 5.5v14ZM4 19.5A2.5 2.5 0 0 0 6.5 22H20"/>,
    compass: <><circle cx="12" cy="12" r="10"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/></>,
    target: <><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></>,
    fileText: <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="13" y2="17"/></>,
    mail: <><rect x="2" y="4" width="20" height="16" rx="2"/><polyline points="22,6 12,13 2,6"/></>,
    phone: <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"/>,
    mapPin: <><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></>,
    sparkles: <path d="m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3Z"/>,
    scale: <><path d="M16 16.5 12 8l-4 8.5"/><path d="M3 8h18"/><path d="M12 3v18"/><path d="M8 21h8"/></>,
  };
  return (
    <svg
      width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth={strokeWidth}
      strokeLinecap="round" strokeLinejoin="round"
      {...props}
    >
      {paths[name]}
    </svg>
  );
};

/* ============================================================
   Logo
   ============================================================ */
const Logo = () => (
  <a href="#top" className="logo-mark" aria-label="Visas Lex Consultores">
    <img src="assets/visas-lex-logo.png?v=2" alt="Visas Lex Consultores" className="logo-img"/>
  </a>
);

/* Export */
Object.assign(window, { FlagChip, CompassRose, WorldMapBg, Icon, Logo });
