/* global React, Icon, FlagChip, CompassRose, WorldMapBg */
const { useState: useStateS, useEffect: useEffectS } = React;

/* ============================================================
   NAV
   ============================================================ */
const Nav = ({ onOpenModal }) => {
  const [scrolled, setScrolled] = useStateS(false);
  const [progress, setProgress] = useStateS(0);
  useEffectS(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 24);
      const h = document.documentElement.scrollHeight - window.innerHeight;
      setProgress(h > 0 ? (window.scrollY / h) * 100 : 0);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={`nav-root ${scrolled ? 'scrolled' : ''}`}>
      <div className="nav-inner">
        <Logo />
        <ul className="nav-links">
          <li><a href="#metodo">Método</a></li>
          <li><a href="#servicios">Servicios</a></li>
          <li><a href="#paises">Países</a></li>
          <li><a href="#testimonios">Testimonios</a></li>
          <li><a href="#faq">FAQ</a></li>
        </ul>
        <button className="btn btn-primary" onClick={onOpenModal}>
          Consulta gratuita
          <Icon name="arrowRight" size={16}/>
        </button>
      </div>
      <div className="scroll-progress" style={{ width: `${progress}%` }}/>
    </nav>
  );
};

/* ============================================================
   HERO — variants: editorial / centered / split
   ============================================================ */
const Hero = ({ variant = 'editorial', onOpenModal, videoOn = true }) => {
  return (
    <section className="hero" id="top">
      {videoOn && (
        <video className="hero-video" autoPlay muted loop playsInline>
          <source src="assets/hero-bg.mp4" type="video/mp4"/>
        </video>
      )}
      <div className="hero-overlay"/>
      <div className="ornament" style={{ right: '-200px', top: '50%', transform: 'translateY(-50%)' }}>
        <div className="spin-slower" style={{ display: 'inline-block' }}>
          <CompassRose size={780} opacity={0.05}/>
        </div>
      </div>

      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        {variant === 'editorial' && <HeroEditorial onOpenModal={onOpenModal}/>}
        {variant === 'centered' && <HeroCentered onOpenModal={onOpenModal}/>}
        {variant === 'split' && <HeroSplit onOpenModal={onOpenModal}/>}
      </div>
    </section>
  );
};

const HeroEditorial = ({ onOpenModal }) => (
  <div style={{ maxWidth: 920 }}>
    <span className="eyebrow">Firma boutique · Movilidad global</span>
    <h1 className="reveal is-visible">
      Tu visa, sin <span className="italic-fraunces gold-gradient-text">improvisaciones.</span>
    </h1>
    <p className="hero-sub">
      Somos especialistas migratorios a más de 6 destinos globales. Una sola firma boutique,
      con criterio jurídico verificable y acompañamiento personal en cada etapa del proceso.
    </p>
    <div className="flex gap-3" style={{ flexWrap: 'wrap' }}>
      <button className="btn btn-primary btn-hero" onClick={onOpenModal}>
        Agenda tu diagnóstico gratuito
        <Icon name="arrowRight" size={18}/>
      </button>
      <a href="#metodo" className="btn btn-ghost btn-hero">Conoce el método</a>
    </div>

    <div className="hero-meta">
      <div className="hero-meta-item">
        <span className="hero-meta-num">6</span>
        <span className="hero-meta-label">Países dominados</span>
      </div>
      <div className="hero-meta-item">
        <span className="hero-meta-num">82%</span>
        <span className="hero-meta-label">Tasa de aprobación</span>
      </div>
      <div className="hero-meta-item">
        <span className="hero-meta-num">12<span style={{ fontSize: '1.1rem', opacity: 0.7 }}>+</span></span>
        <span className="hero-meta-label">Consultores con experiencia</span>
      </div>
      <div className="hero-meta-item">
        <span className="hero-meta-num">7K<span style={{ fontSize: '1.1rem', opacity: 0.7 }}>+</span></span>
        <span className="hero-meta-label">Procesos exitosos</span>
      </div>
    </div>
  </div>
);

const HeroCentered = ({ onOpenModal }) => (
  <div style={{ maxWidth: 880, margin: '0 auto', textAlign: 'center' }}>
    <span className="eyebrow-plain">Firma boutique · Movilidad global</span>
    <h1 style={{ marginTop: '1.5rem' }}>
      Tu visa, sin<br/><span className="italic-fraunces gold-gradient-text">improvisaciones.</span>
    </h1>
    <p className="hero-sub" style={{ margin: '0 auto 2.5rem' }}>
      Especialistas migratorios a más de 6 destinos globales.
      Una sola firma boutique, criterio jurídico verificable.
    </p>
    <div className="flex gap-3 justify-center" style={{ flexWrap: 'wrap' }}>
      <button className="btn btn-primary btn-hero" onClick={onOpenModal}>
        Agenda tu diagnóstico gratuito
        <Icon name="arrowRight" size={18}/>
      </button>
      <a href="#metodo" className="btn btn-ghost btn-hero">Conoce el método</a>
    </div>
  </div>
);

const HeroSplit = ({ onOpenModal }) => (
  <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: '4rem', alignItems: 'center' }}>
    <div>
      <span className="eyebrow">Firma boutique · Movilidad global</span>
      <h1 style={{ marginTop: '1.5rem', fontSize: 'clamp(2.5rem, 5.5vw, 5rem)' }}>
        Tu visa, sin <span className="italic-fraunces gold-gradient-text">improvisaciones.</span>
      </h1>
      <p className="hero-sub">
        Especialistas migratorios a más de 6 destinos globales. Una sola firma boutique.
      </p>
      <button className="btn btn-primary btn-hero" onClick={onOpenModal}>
        Diagnóstico gratuito
        <Icon name="arrowRight" size={18}/>
      </button>
    </div>
    <div className="liquid-glass" style={{ padding: '2rem', borderRadius: '1.5rem' }}>
      <span className="eyebrow-plain">Indicadores</span>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1.5rem', marginTop: '1.5rem' }}>
        <div><div className="hero-meta-num">82%</div><div className="hero-meta-label">Aprobación</div></div>
        <div><div className="hero-meta-num">6+</div><div className="hero-meta-label">Destinos</div></div>
        <div><div className="hero-meta-num">12+</div><div className="hero-meta-label">Consultores</div></div>
        <div><div className="hero-meta-num">7K+</div><div className="hero-meta-label">Procesos</div></div>
      </div>
    </div>
  </div>
);

/* ============================================================
   TRUST STRIP
   ============================================================ */
const TrustStrip = () => (
  <div className="container">
    <div className="trust-strip">
      <div><Icon name="scale" size={20}/> Colegio de Abogados</div>
      <div><Icon name="award" size={20}/> AILA Member</div>
      <div><Icon name="shield" size={20}/> ISO 27001</div>
      <div><Icon name="globe" size={20}/> 6 jurisdicciones</div>
      <div><Icon name="book" size={20}/> Bar of England & Wales</div>
    </div>
  </div>
);

/* ============================================================
   METHOD / PROCESS
   ============================================================ */
const Method = () => {
  const steps = [
    { n: 'I', t: 'Diagnóstico', d: 'Una conversación de 45 minutos. Evaluamos viabilidad, riesgos y fortalezas. Honestidad por encima de cierre comercial — si no podemos ayudarte, te lo decimos.' },
    { n: 'II', t: 'Estrategia', d: 'Hoja de ruta por escrito: país, tipo de visa, cronograma realista y coste total cerrado. Sin sorpresas, sin tarifas escalonadas.' },
    { n: 'III', t: 'Ejecución', d: 'Construimos el expediente contigo — documentos, traducciones apostilladas, declaraciones, evidencia. Cada pieza revisada por dos abogados antes de presentar.' },
    { n: 'IV', t: 'Seguimiento', d: 'Te acompañamos hasta el sello en el pasaporte y, si aplica, en tu primer año de instalación. La relación no termina con la aprobación.' },
  ];
  return (
    <section id="metodo" style={{ padding: 'var(--section-py) 0' }}>
      <div className="container">
        <div className="section-label">
          <span className="eyebrow-plain">El método</span>
        </div>
        <h2 className="h2-display">
          Cuatro etapas. <span className="italic-fraunces" style={{ color: 'var(--foreground-muted)' }}>Cero atajos.</span>
        </h2>
        <p className="lede">
          La movilidad internacional no se gana con plantillas. Cada caso entra por diagnóstico antes
          de tocar un solo formulario.
        </p>
        <div style={{ marginTop: '4rem' }}>
          {steps.map(s => (
            <div className="process-row" key={s.n}>
              <div className="process-num">{s.n}</div>
              <div>
                <h3>{s.t}</h3>
                <p>{s.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ============================================================
   SERVICES
   ============================================================ */
const Services = () => {
  const items = [
    { icon: 'compass', t: 'Estrategia migratoria', d: 'Selección del país y tipo de visa con mayor probabilidad real, no la moda del momento.' },
    { icon: 'fileText', t: 'Preparación de expediente', d: 'Documentación, traducciones, declaraciones legales y cartas de soporte construidas con criterio.' },
    { icon: 'target', t: 'Reapertura de casos', d: 'Recursos, RFEs, apelaciones y reapertura cuando otro abogado dijo que no había nada que hacer.' },
    { icon: 'sparkles', t: 'Movilidad de talento', d: 'Visas para fundadores, ejecutivos, científicos y artistas con criterios de excelencia comprobables.' },
    { icon: 'shield', t: 'Cumplimiento corporativo', d: 'Acompañamos a empresas que trasladan equipos: H1B, ICT, Skilled Worker, Specified Skilled Worker.' },
    { icon: 'mapPin', t: 'Asentamiento post-visa', d: 'Apertura de cuentas, escolarización, alquileres, NIE/SSN/SIN — el primer año, resuelto.' },
  ];
  return (
    <section id="servicios" style={{ padding: 'var(--section-py) 0', background: 'var(--bg-elev)' }}>
      <div className="container">
        <div className="section-label"><span className="eyebrow-plain">Áreas de práctica</span></div>
        <h2 className="h2-display">
          Lo que hacemos <span className="italic-fraunces" style={{ color: 'var(--foreground-muted)' }}>de verdad.</span>
        </h2>
        <p className="lede">Seis especialidades. Sin plantillas, sin paquetes prearmados.</p>
        <div className="grid-3" style={{ marginTop: '4rem' }}>
          {items.map((s, i) => (
            <div key={i} className="liquid-glass" style={{ padding: '2rem', borderRadius: '1.25rem' }}>
              <div style={{ color: 'var(--primary)', marginBottom: '1.5rem' }}>
                <Icon name={s.icon} size={28} strokeWidth={1.2}/>
              </div>
              <h3 style={{ fontSize: '1.5rem', marginBottom: '0.75rem' }}>{s.t}</h3>
              <p style={{ color: 'var(--foreground-muted)', fontSize: '0.95rem', lineHeight: 1.6 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ============================================================
   COUNTRIES — section [5] full spec
   ============================================================ */
const COUNTRIES = [
  { id: 'us', name: 'Estados Unidos', visas: ['Turismo B1/B2', 'Estudio F1', 'Trabajo H1B', 'Inversión EB-5'] },
  { id: 'ca', name: 'Canadá',         visas: ['Express Entry', 'Permiso de Estudio', 'Visitor Visa', 'Work Permit'] },
  { id: 'au', name: 'Australia',      visas: ['Skilled Migration', 'Student Visa 500', 'Working Holiday 462'] },
  { id: 'gb', name: 'Reino Unido',    visas: ['Skilled Worker', 'Student Visa', 'Standard Visitor', 'Innovator Founder'] },
  { id: 'cn', name: 'China',          visas: ['Visa de Negocios M', 'Trabajo Z', 'Estudio X1/X2', 'Turismo L'] },
  { id: 'jp', name: 'Japón',          visas: ['Working Visa', 'Student Visa', 'Specified Skilled Worker', 'Highly Skilled Professional'] },
];

const Countries = ({ layout = 'grid' }) => {
  const containerCls =
    layout === 'scroll'   ? 'countries-scroll' :
    layout === 'masonry'  ? 'countries-masonry' :
                            'grid-3';
  return (
    <section id="paises" style={{ padding: 'var(--section-py) 0', position: 'relative', overflow: 'hidden' }}>
      <WorldMapBg/>
      <div className="ornament" style={{ left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }}>
        <div className="spin-slow" style={{ display: 'inline-block' }}>
          <CompassRose size={900} opacity={0.05}/>
        </div>
      </div>

      <div className="container" style={{ position: 'relative' }}>
        <div className="section-label"><span className="eyebrow-plain">Destinos que dominamos</span></div>
        <h2 className="h2-display">
          Especialistas, <span className="italic-fraunces gold-gradient-text">no generalistas.</span>
        </h2>
        <p className="lede">
          Trabajamos con seis jurisdicciones. Cada una tiene su propio equipo interno, sus precedentes,
          y una librería de casos que crece cada semana. No tomamos el caso siete.
        </p>

        <div className={containerCls} style={{ marginTop: '4rem' }}>
          {COUNTRIES.map((c, i) => (
            <article
              key={c.id}
              className={`country-card liquid-glass float-${i + 1}`}
            >
              <FlagChip country={c.id}/>
              <h3 className="font-fraunces" style={{ fontSize: '1.6rem', marginTop: '1rem' }}>{c.name}</h3>
              <ul className="visa-list">
                {c.visas.map((v, j) => <li key={j}>{v}</li>)}
              </ul>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ============================================================
   TESTIMONIALS
   ============================================================ */
const Testimonials = () => {
  const items = [
    { q: 'Recibí más claridad en una llamada de 45 minutos que en seis meses con otra firma. La cotización por escrito antes de cobrar fue lo que me convenció.', n: 'María G.', r: 'EB-5 · Estados Unidos · Aprobada 2025', a: 'M' },
    { q: 'Me dijeron que mi caso no era viable por la ruta que yo creía. Me propusieron otra y funcionó. Honestidad rara en este sector.', n: 'Daniel S.', r: 'Skilled Worker · Reino Unido · Aprobada 2024', a: 'D' },
    { q: 'El expediente lo revisaron dos abogados antes de presentar. Cero RFE. Cinco semanas hasta el sello.', n: 'Andrea R.', r: 'Express Entry · Canadá · Aprobada 2025', a: 'A' },
  ];
  return (
    <section id="testimonios" style={{ padding: 'var(--section-py) 0', background: 'var(--bg-elev)' }}>
      <div className="container">
        <div className="section-label"><span className="eyebrow-plain">Casos reales</span></div>
        <h2 className="h2-display">
          Lo que dicen <span className="italic-fraunces" style={{ color: 'var(--foreground-muted)' }}>quienes ya cruzaron.</span>
        </h2>
        <div className="grid-3" style={{ marginTop: '3rem' }}>
          {items.map((t, i) => (
            <div key={i} className="liquid-glass testimonial-card">
              <span className="quote-mark">"</span>
              <blockquote>{t.q}</blockquote>
              <div className="testimonial-meta">
                <div className="testimonial-avatar">{t.a}</div>
                <div>
                  <div className="name">{t.n}</div>
                  <div className="role">{t.r}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ============================================================
   FAQ
   ============================================================ */
const FAQ = () => {
  const [open, setOpen] = useStateS(0);
  const items = [
    { q: '¿Cuánto tarda en promedio un proceso de visa?', a: 'Depende del país y tipo de visa. Express Entry de Canadá puede cerrarse en 6 meses; un EB-5 estadounidense toma 2–4 años. En el diagnóstico te damos un cronograma realista — nunca optimista.' },
    { q: '¿Por qué cobran consulta diagnóstica gratuita?', a: 'Solo la primera, y solo para clientes nuevos. Es la forma más justa de evaluarnos mutuamente: tú decides si quieres trabajar con nosotros, y nosotros si tu caso encaja con lo que hacemos.' },
    { q: '¿Trabajan con casos rechazados previamente?', a: 'Sí. Una parte importante de nuestra práctica son recursos, RFEs y reapertura. Pedimos toda la documentación previa antes del diagnóstico para evaluar honestamente si vale la pena.' },
    { q: '¿Garantizan la aprobación?', a: 'Ningún abogado serio garantiza una decisión consular o migratoria. Lo que sí garantizamos es honestidad sobre tu probabilidad real, un expediente impecable y comunicación clara durante todo el proceso.' },
    { q: '¿Cómo se cobran sus honorarios?', a: 'Cuota fija por etapa, acordada antes de empezar y firmada por contrato. Sin facturación por hora, sin cargos sorpresa. Si tu caso requiere recursos adicionales, lo discutimos antes — nunca después.' },
    { q: '¿Atienden desde Latinoamérica?', a: 'Sí. Atención en español, reuniones por videollamada, y firma electrónica donde la jurisdicción lo permite. También recibimos clientes presencialmente en Bogotá y Madrid.' },
  ];
  return (
    <section id="faq" style={{ padding: 'var(--section-py) 0' }}>
      <div className="container-narrow">
        <div className="section-label"><span className="eyebrow-plain">Preguntas frecuentes</span></div>
        <h2 className="h2-display">
          Lo que <span className="italic-fraunces" style={{ color: 'var(--foreground-muted)' }}>siempre nos preguntan.</span>
        </h2>
        <div style={{ marginTop: '3rem' }}>
          {items.map((it, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                {it.q}
                <span className="faq-icon"><Icon name="plus" size={20}/></span>
              </button>
              <div className="faq-a">{it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Nav, Hero, TrustStrip, Method, Services, Countries, Testimonials, FAQ });