/* global React */

/* ---------- inline icons (rounded, friendly, shared) ---------- */
const PIco = {
  Globe: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18"/></svg>,
  Heart:  () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20.84 4.6a5.5 5.5 0 00-7.78 0L12 5.66l-1.06-1.07a5.5 5.5 0 10-7.78 7.78l1.06 1.07L12 21.23l7.78-7.78 1.06-1.07a5.5 5.5 0 000-7.78z"/></svg>,
  Sun:    () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>,
  Spark:  () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3l1.9 5.6L19.5 10l-5.6 1.9L12 17.5l-1.9-5.6L4.5 10l5.6-1.4z"/></svg>,
  Shield: () => <svg 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>,
  Users:  () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M17 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.87M16 3.13a4 4 0 010 7.75"/></svg>,
  Smile:  () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01"/></svg>,
  Coin:   () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v10M9 10h4.5a2 2 0 010 4H9"/></svg>,
  Doc:    () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6M9 13h6M9 17h6"/></svg>,
  Send:   () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/></svg>,
};

/* ============================================================
   ServicesGrid — joyful feat cards w/ colored icons + emojis
   ============================================================ */
function ServicesGrid() {
  const services = [
    { code: "S-01", emoji:"🤝", ico:"Shield", tone:"mint",   t: "Employer of Record (EOR)",
      d: "Empleamos legalmente a tu equipo en República Dominicana y en toda LatAm. Contratos, nómina, seguridad social, impuestos, desvinculaciones — todo resuelto.",
      bullets: ["Contratos locales conformes", "Nómina quincenal", "Beneficios de ley", "Desvinculación y liquidación"] },
    { code: "S-02", emoji:"🔎", ico:"Users",  tone:"peach",  t: "Búsqueda y selección de talento",
      d: "Búsqueda activa de candidatos usando redes locales — no un simple filtro de base de datos. De tres a cinco perfiles preseleccionados por rol, en promedio en diez días hábiles.",
      bullets: ["Evaluaciones técnicas", "Filtro de comunicación", "Entrevista de encaje cultural", "Verificación de referencias"] },
    { code: "S-03", emoji:"🎉", ico:"Spark",  tone:"butter", t: "Onboarding y equipo",
      d: "Listo desde el día uno significa listo desde el día uno. Adquisición de hardware, aprovisionamiento de cuentas, semana de bienvenida y un responsable de onboarding para cada nueva contratación.",
      bullets: ["Laptop y periféricos", "Cuentas y accesos", "Semana de bienvenida", "Plan 30-60-90"] },
    { code: "S-04", emoji:"💰", ico:"Coin",   tone:"sky",    t: "Nómina y beneficios",
      d: "Nómina quincenal en DOP o USD. Estructuras de salud, dental, vida y bonos diseñadas para competir con los líderes del mercado local, no para quedar por debajo de ellos.",
      bullets: ["Salud y dental", "Seguro de vida", "Regalía (13vo mes)", "Ciclos de evaluación de desempeño"] },
    { code: "S-05", emoji:"💚", ico:"Heart",  tone:"lilac",  t: "RR.HH. y gestión de personas",
      d: "Soporte continuo de RR.HH. para las conversaciones incómodas, las buenas y todo lo demás. Seguimientos trimestrales, encuestas de engagement, reportes de retención.",
      bullets: ["Soporte en reuniones 1:1", "Encuestas de engagement", "Resolución de conflictos", "Evaluaciones anuales"] },
    { code: "S-06", emoji:"📚", ico:"Doc",    tone:"mint",   t: "Cumplimiento y legal",
      d: "El derecho laboral local es nuestro terreno. Mantenemos a tu equipo — y a tu empresa — del lado correcto de cada regulación dominicana y regional.",
      bullets: ["Cumplimiento del código laboral", "Seguridad social (TSS)", "Reportes fiscales (DGII)", "Soporte en auditorías"] },
  ];

  return (
    <section className="section" data-screen-label="01 services-grid" style={{ position:"relative", overflow:"hidden" }}>
      <span className="blob blob--mint floaty" style={{ width: 320, height: 320, top: -100, right: -120, opacity:.35 }}/>
      <span className="blob blob--butter floaty-2" style={{ width: 240, height: 240, bottom: -80, left: -60, opacity:.35 }}/>
      <div className="container" style={{ position:"relative", zIndex:1 }}>
        <div className="grid grid-2" style={{ gap: 28 }}>
          {services.map(s => {
            const Icon = PIco[s.ico];
            return (
              <article key={s.code} className="feat" style={{ padding: 36 }}>
                <div className="row-between" style={{ alignItems: "flex-start", marginBottom: 8 }}>
                  <div className={`ico ico--${s.tone}`} style={{ marginBottom: 0, fontSize: "1.6rem" }}>
                    <span style={{ fontSize: "1.6rem" }}>{s.emoji}</span>
                  </div>
                  <span className="mono" style={{ fontSize: ".72rem", color: "var(--ink-3)", letterSpacing: ".1em" }}>{s.code}</span>
                </div>
                <h3 style={{ marginTop: 12, fontSize: "1.5rem", fontWeight: 500 }}>{s.t}</h3>
                <p className="muted" style={{ marginTop: 12, fontSize: "1rem", lineHeight: 1.55 }}>{s.d}</p>
                <ul style={{ listStyle: "none", padding: 0, margin: "22px 0 0", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
                  {s.bullets.map((b, j) => (
                    <li key={j} style={{
                      fontSize: ".88rem", color: "var(--ink-2)",
                      paddingLeft: 22, position: "relative",
                    }}>
                      <span style={{
                        position: "absolute", left: 0, top: 2,
                        width: 16, height: 16, borderRadius: "50%",
                        background: "var(--amber-soft)", color: "var(--amber-deep)",
                        display: "inline-flex", alignItems: "center", justifyContent: "center",
                        fontSize: ".7rem", fontWeight: 700,
                      }}>✓</span>
                      {b}
                    </li>
                  ))}
                </ul>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   ServicesPricing — soft mint section with playful price card
   ============================================================ */
function ServicesPricing() {
  return (
    <section className="section section--mint" data-screen-label="02 pricing" style={{ position:"relative", overflow:"hidden" }}>
      <span className="blob blob--mint floaty" style={{ width: 380, height: 380, top: -140, left: "55%" }}/>
      <span className="blob blob--peach floaty-2" style={{ width: 240, height: 240, bottom: -80, left: -60, opacity:.4 }}/>
      <div className="container" style={{ position:"relative", zIndex:1 }}>
        <div className="grid" style={{ gridTemplateColumns: "1fr 1.6fr", gap: 64, alignItems: "start" }}>
          <div>
            <div className="pill" style={{ marginBottom: 20 }}>
              <span className="emoji">💸</span> Cómo cobramos
            </div>
            <h2>Tarifa fija.<br/>Sin sorpresas.</h2>
            <p className="lead muted" style={{ marginTop: 24 }}>
              Una tarifa mensual transparente por cada contratación. Sin sobrecargos en beneficios, sin comisiones
              de aseguradoras, sin margen escondido en el recibo de nómina.
            </p>
          </div>

          <div className="price-card">
            <div className="row-between" style={{ position:"relative", zIndex:1 }}>
              <span className="pill"><span className="emoji">🌿</span> Tarifa EOR · por contratación / mes</span>
              <span className="chip">Actualizado T1 2026</span>
            </div>
            <div style={{ display: "flex", alignItems: "baseline", gap: 12, marginTop: 32 }}>
              <span style={{ fontSize: "5rem", fontWeight: 400, letterSpacing: "-0.04em", lineHeight: 1, color: "var(--amber-deep)" }}>$499</span>
              <span className="muted mono" style={{ fontSize: ".9rem" }}>USD / empleado / mes</span>
            </div>
            <p className="muted" style={{ marginTop: 18, maxWidth: "48ch" }}>
              Incluye contratos, nómina, beneficios de ley, RR.HH. y cumplimiento.
              El salario y los beneficios de ley se trasladan a costo. Precios por volumen
              disponibles desde cinco contrataciones.
            </p>
            <div className="ascii-rule" style={{ marginTop: 28, marginBottom: 28 }}>· · · · · · · · ·</div>
            <div className="row" style={{ gap: 32 }}>
              {[
                ["Configuración inicial", "$0"],
                ["Tarifa de reclutamiento", "1× salario mensual"],
                ["Compromiso mínimo", "3 meses"],
              ].map(([l,v]) => (
                <div key={l}>
                  <div className="mono muted" style={{ fontSize: ".7rem", letterSpacing: ".1em", textTransform: "uppercase" }}>{l}</div>
                  <div style={{ fontSize: "1.4rem", marginTop: 6, fontWeight: 500 }}>{v}</div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 32 }}>
              <a href="contacto.html" className="btn btn--primary">Solicita una cotización por escrito <span className="arrow">→</span></a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   ServicesCompare — joyful compare card
   ============================================================ */
function ServicesCompare() {
  const rows = [
    ["Punto de contacto dedicado",  "Sí — encargado de cuenta asignado", "Portal de tickets", "—"],
    ["Red de talento local",         "Búsqueda activa en RD y LatAm", "Base de datos",   "—"],
    ["Ritmo de onboarding",          "Listo desde el día uno, hardware enviado", "Autogestionado", "Autogestionado"],
    ["Ciclo de nómina",              "Quincenal · DOP o USD",       "Mensual",         "Varía"],
    ["Alcance de cumplimiento",      "Laboral · TSS · DGII",          "Genérico",        "Limitado"],
    ["Preselección promedio",        "10 días hábiles",               "30 días",         "No especificado"],
    ["Costo de configuración",       "$0",                            "$2,000–10,000",   "Según proyecto"],
  ];
  return (
    <section className="section" data-screen-label="03 compare">
      <div className="container">
        <div className="row-between" style={{ marginBottom: 40, alignItems: "flex-end" }}>
          <div>
            <div className="pill pill--butter" style={{ marginBottom: 20 }}>
              <span className="emoji">⚖️</span> Frente a las alternativas
            </div>
            <h2>Servicio boutique.<br/>Infraestructura empresarial.</h2>
          </div>
          <p className="muted" style={{ maxWidth: 360 }}>
            La mayoría de los "EOR globales" son solo un portal y una cola de tickets. La mayoría de las agencias locales no tienen
            el back-office para manejar nómina real. Nosotros estamos justo en el medio, a propósito.
          </p>
        </div>

        <div className="compare">
          <div className="compare__head">
            <span>Capacidad</span>
            <span>Midorick</span>
            <span>EOR global</span>
            <span>Agencia local</span>
          </div>
          {rows.map((r, i) => (
            <div className="compare__row" key={i}>
              <span style={{ color: "var(--ink-2)" }}>{r[0]}</span>
              <span style={{ fontWeight: 500, color: "var(--amber-deep)" }}>{r[1]}</span>
              <span className="muted">{r[2]}</span>
              <span className="muted">{r[3]}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   AboutStory — joyful with floating shapes
   ============================================================ */
function AboutStory() {
  return (
    <section className="section" data-screen-label="01 story" style={{ position:"relative", overflow:"hidden" }}>
      <span className="blob blob--mint floaty" style={{ width: 320, height: 320, top: 60, right: -80, opacity:.35 }}/>
      <span className="shape shape--squircle floaty-2" style={{ width: 70, height: 70, bottom: 120, left: "8%", opacity:.5 }}/>
      <div className="container" style={{ position:"relative", zIndex:1 }}>
        <div className="grid" style={{ gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "start" }}>
          <div style={{ position: "sticky", top: 100 }}>
            <div className="pill" style={{ marginBottom: 20 }}>
              <span className="emoji">🌱</span> La versión corta
            </div>
            <h2>Fundada en 2020.<br/>Boutique por diseño.</h2>
            <window.PH label="Fundadores, Santo Domingo" ratio="4/3" tone="amber" corner="DESDE 2020" style={{ marginTop: 36, borderRadius: "var(--r-3)" }}/>
          </div>

          <div className="stack-6" style={{ fontSize: "1.1rem", lineHeight: 1.7, color: "var(--ink-2)" }}>
            <p>
              Midorick nació en 2020 de la mano de un grupo de operadores que llevaban una década contratando
              talento en República Dominicana para empresas norteamericanas — y viendo cómo demasiado
              de ese talento renunciaba dentro del primer año, frustrado por agencias sin rostro y
              paquetes de beneficios genéricos.
            </p>
            <p>
              Creíamos que un Employer of Record podía ser diferente: lo suficientemente pequeño para conocer a cada
              empleado por su nombre, lo suficientemente técnico para manejar nómina y cumplimiento reales, y con
              criterio propio para cuestionar cuando la política de un cliente fuera a desmotivar a alguien en seis meses.
            </p>
            <p>
              Cinco años después, estamos orgullosamente arraigados en LatAm y el Caribe, trabajando con
              startups y scale-ups de rápido crecimiento que quieren una verdadera extensión de su equipo —
              no un proveedor que solo aparece en la factura.
            </p>

            <div className="grid grid-3" style={{ gap: 32, marginTop: 16 }}>
              {[
                ["2020", "Fundada"],
                ["5+", "Países atendidos"],
                ["94%", "Retención a 12 meses"],
              ].map(([v,l]) => (
                <div className="stat" key={l}>
                  <span className="v" style={{ color: "var(--amber-deep)" }}>{v}</span>
                  <span className="l">{l}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function AboutCredentials() {
  const team = [
    {
      name: "Eduardo Mejia",
      role: "Director Ejecutivo",
      photo: "assets/team/eduardo-mejia.jpg",
      bio: "Eduardo es Ingeniero Civil de formación, pero su trayectoria pronto se ramificó hacia algo mucho más dinámico. Comenzando en una empresa constructora familiar de tamaño mediano, descubrió una pasión por hacer que los negocios funcionen de forma más inteligente, no más dura. Ese impulso lo llevó a convertirse en Especialista en Innovación y Optimización de Procesos, donde ha ayudado a los equipos a desbloquear todo su potencial mediante mejores sistemas y flujos de trabajo más eficientes. Con un historial que incluye reducir los tiempos de finalización de tareas entre un 40% y 60% en los departamentos de Contabilidad, Ingeniería y Logística, Eduardo se destaca en la intersección entre estrategia y ejecución. Su enfoque está en construir equipos que trabajen con propósito y sistemas que funcionen con las personas.",
      personal: "Fuera de la oficina, Eduardo lidera con la misma pasión — literalmente. Es un cristiano devoto y líder de alabanza en su iglesia, un entusiasta del fitness y, más recientemente, un jugador de tenis en ascenso que siempre persigue el próximo ace."
    },
    {
      name: "Monica Mejia",
      role: "Directora de Recursos Humanos",
      photo: "assets/team/monica-mejia.jpg",
      bio: "Directora de Recursos Humanos comprometida con alinear la estrategia de talento humano con los objetivos del negocio. Lidera áreas clave como reclutamiento, desarrollo organizacional, compensación y cultura. Su enfoque está en construir equipos sostenibles, comprometidos y de alto desempeño a través de una visión estratégica del capital humano.",
      personal: "A Monica le apasiona la gastronomía, descubrir nuevos lugares y explorar sabores únicos."
    },
    {
      name: "Simba Mupfumira",
      role: "Director Financiero",
      photo: "assets/team/simba-mupfumira.png",
      bio: "Ejecutivo senior de finanzas y negocios comprometido con alinear la estrategia financiera con el crecimiento global del negocio. Lidera áreas estratégicas clave como captación de capital, gobernanza, ejecución operativa e iniciativas tecnológicas multifuncionales. Su enfoque está en escalar organizaciones financieras, optimizar estructuras de capital y construir equipos globales multidisciplinarios de alto desempeño que traduzcan operaciones técnicas complejas en retornos claros para los inversionistas.",
      personal: "A Simba le apasiona la educación y el alivio de la pobreza en África, compartir ideas en el circuito de transformación digital, y superar sus límites como ávido corredor de larga distancia."
    },
    {
      name: "Daniella Pe\u00f1al\u00f3",
      role: "Gerente de Relaciones Laborales y Compensación Total",
      photo: "assets/team/daniella-pe.jpg",
      bio: "Profesional de RR.HH. comprometida con construir culturas centradas en las personas donde tanto los individuos como las organizaciones prosperan. Con formación en psicología organizacional y recursos humanos, es apasionada y dedicada a mejorar la cultura organizacional, el bienestar de los empleados y la eficiencia operativa a través de sistemas bien pensados, comunicación sólida y aprendizaje continuo.",
      personal: "Ávida lectora, entusiasta de los juegos de mesa y profundamente energizada por el tiempo con sus seres queridos. Amante del buen café, las conversaciones profundas y encontrar belleza en lo cotidiano."
    },
    {
      name: "Lumi Esther Rodriguez",
      role: "Gerente de Éxito del Cliente y Reclutamiento",
      photo: "assets/team/lumi-rod.jpg",
      bio: "Profesional de marketing dinámica y colaborativa, con pasión por impulsar resultados y construir relaciones sólidas. Con experiencia en diversas áreas incluyendo marketing general, desarrollo de marca, éxito del cliente, ventas, reclutamiento y operaciones. Reconocida por su don de gente, se destaca en entornos de equipo y se adapta rápidamente a nuevos desafíos. Con muchas ganas de aprender, crecer y aportar en distintos campos, con una mentalidad proactiva y un fuerte compromiso con la excelencia en cada proyecto.",
      personal: "Lumi tiene un profundo aprecio por el vino, el café simple, las visitas al campo y las conversaciones interesantes sobre una amplia variedad de temas. Valora el tiempo de calidad con sus seres queridos, que es una fuente de inspiración y equilibrio tanto en su vida personal como profesional."
    },
    {
      name: "Ermis Reyes",
      role: "Gerente de Contabilidad",
      photo: "assets/team/ermis-reyes.jpg?v=1783947034",
      bio: "Ermis ha gestionado una cartera diversa de clientes utilizando sistemas contables como QuickBooks y Odoo. Sus responsabilidades han incluido el registro de transacciones financieras, conciliaciones bancarias, la preparación y presentación de formularios de impuestos internos de República Dominicana (DGII) y declaraciones juradas, la gestión de procesos ante la Tesorería de la Seguridad Social (TSS), la supervisión de cuentas por cobrar y por pagar, y el análisis financiero y preparación de estados financieros.",
      personal: "Fuera del trabajo, a Ermis le apasionan los deportes — tanto practicarlos como verlos. Sus deportes favoritos incluyen fútbol, baloncesto, Fórmula 1, boxeo, MMA, tenis y béisbol. También disfruta viendo películas y series, y jugando videojuegos en su tiempo libre."
    },
    {
      name: "Jean Parra",
      role: "Especialista en Onboarding y Gerente de Proyectos",
      photo: "assets/team/jean-parra.png",
      bio: "Jean es un Reclutador Senior y Especialista en Talento con formación en ingeniería y varios años de experiencia conectando talento de primer nivel con empresas líderes en distintos sectores de EE. UU. Le apasiona crear oportunidades de carrera significativas y fomentar el crecimiento profesional.",
      personal: "Fuera del trabajo, Jean disfruta tocar música y desafiar su mente con juegos de estrategia de mesa."
    },
    {
      name: "Laura Cuello",
      role: "Especialista en Adquisición de Talento",
      photo: "assets/team/laura-cuello.jpg",
      bio: "Laura es una apasionada profesional de Recursos Humanos con más de seis años de experiencia, especializada en adquisición de talento, comunicación interna, experiencia del empleado y HR business partnering. Tiene una Maestría en Gestión de Recursos Humanos y una Licenciatura en Psicología.",
      personal: "En su tiempo libre, Laura disfruta explorar nuevas formas de conectar con otros, mantenerse al día con las tendencias globales de RR.HH. y descubrir nuevas ideas para nutrir el talento y promover el bienestar."
    },
  ];
  return (
    <section className="section section--mint" data-screen-label="02 team" style={{ position:"relative", overflow:"hidden" }}>
      <span className="blob blob--peach floaty" style={{ width: 280, height: 280, top: 80, right: -80, opacity:.4 }}/>
      <span className="blob blob--mint floaty-2" style={{ width: 360, height: 360, bottom: -120, left: "30%", opacity:.35 }}/>
      <div className="container" style={{ position:"relative", zIndex:1 }}>
        <div style={{ textAlign:"center", marginBottom: 64, maxWidth: 760, marginInline: "auto" }}>
          <h2 style={{ fontSize: "clamp(2rem, 5vw, 3.4rem)" }}>Conoce al Equipo</h2>
          <p className="lead" style={{ marginTop: 20, color: "var(--ink-2)" }}>
            Nuestro equipo dedicado de Midorick para tus necesidades de contratación
          </p>
        </div>

        <div style={{ display:"flex", flexDirection:"column", gap:48 }}>
          {team.map((p, i) => (
            <article key={p.name} className="team-profile" style={{
              display:"flex",
              flexDirection: i % 2 === 0 ? "row" : "row-reverse",
              gap: 40,
              alignItems:"center",
              background:"var(--surface)",
              borderRadius:"var(--r-3)",
              padding: 32,
              boxShadow:"var(--shadow)"
            }}>
              <div style={{ flex:"0 0 280px", maxWidth:280 }}>
                <img src={p.photo} alt={p.name} style={{
                  width:"100%",
                  height: 360,
                  objectFit:"cover",
                  borderRadius:"var(--r-2)",
                  display:"block"
                }}/>
              </div>
              <div style={{ flex:1, minWidth: 0 }}>
                <div className="mono" style={{ fontSize:".78rem", letterSpacing:".1em", textTransform:"uppercase", color:"var(--moss)", fontWeight:600, marginBottom:8 }}>{p.role}</div>
                <h3 style={{ fontSize:"clamp(1.4rem, 3vw, 2rem)", fontWeight:700, marginBottom:16 }}>{p.name}</h3>
                <p style={{ fontSize:".95rem", lineHeight:1.7, color:"var(--ink-2)", marginBottom:14 }}>{p.bio}</p>
                <p style={{ fontSize:".9rem", lineHeight:1.6, color:"var(--ink-3)", fontStyle:"italic" }}>{p.personal}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   ContactForm
   ============================================================ */
function ContactForm() {
  // status: "idle" | "sending" | "ok" | "error"
  const [status, setStatus] = React.useState("idle");
  const [errorMsg, setErrorMsg] = React.useState("");
  const submitted = status === "ok";

  const handleSubmit = (e) => {
    e.preventDefault();
    const form = e.target;
    setStatus("sending");
    setErrorMsg("");
    const data = new FormData(form);
    fetch("send.php", { method: "POST", body: data })
      .then(async (res) => {
        let json = null;
        try { json = await res.json(); } catch (_) {}
        if (res.ok && json && json.ok) {
          setStatus("ok");
          form.reset();
        } else {
          setStatus("error");
          setErrorMsg((json && json.error) || "Algo salió mal. Por favor escribe a hola@midorick.com.");
        }
      })
      .catch(() => {
        setStatus("error");
        setErrorMsg("Error de red. Por favor escribe a hola@midorick.com.");
      });
  };

  return (
    <section className="section" data-screen-label="01 contact" style={{ position:"relative", overflow:"hidden" }}>
      <span className="blob blob--mint floaty" style={{ width: 340, height: 340, top: -100, right: -100, opacity:.35 }}/>
      <span className="blob blob--butter floaty-2" style={{ width: 240, height: 240, bottom: -80, left: -60, opacity:.35 }}/>
      <span className="sparkle floaty" style={{ position: "absolute", top: 120, left: "50%", color: "var(--amber)", width: 22, height: 22 }}/>
      <div className="container" style={{ position:"relative", zIndex:1 }}>
        <div className="grid" style={{ gridTemplateColumns: "1fr 1.3fr", gap: 80, alignItems: "start" }}>
          <div>
            <div className="pill" style={{ marginBottom: 20 }}>
              <span className="emoji">📍</span> Dos oficinas · un solo equipo
            </div>
            <h3 style={{ fontWeight: 500, fontSize: "1.6rem" }}>Dónde encontrarnos</h3>

            <div className="stack-6" style={{ marginTop: 28 }}>
              <div>
                <div className="mono muted" style={{ fontSize: ".72rem", letterSpacing: ".12em", textTransform: "uppercase" }}>Sede · República Dominicana</div>
                <div style={{ marginTop: 6, fontSize: "1.05rem", fontWeight: 500 }}>Santo Domingo, DR</div>
                <div className="muted">+1 (809) 000-0000</div>
              </div>
              <div>
                <div className="mono muted" style={{ fontSize: ".72rem", letterSpacing: ".12em", textTransform: "uppercase" }}>Correo</div>
                <a href="mailto:hola@midorick.com" style={{ marginTop: 6, fontSize: "1.05rem", display: "inline-block", color: "var(--amber-deep)", borderBottom: "1px solid currentColor", paddingBottom: 2 }}>hola@midorick.com</a>
              </div>
              <div>
                <div className="mono muted" style={{ fontSize: ".72rem", letterSpacing: ".12em", textTransform: "uppercase" }}>Zona horaria</div>
                <div style={{ marginTop: 6, fontSize: "1.05rem", fontWeight: 500 }}>AST · todo el año</div>
                <div className="muted">Alineado con la costa este de EE. UU.</div>
              </div>
              <div>
                <div className="mono muted" style={{ fontSize: ".72rem", letterSpacing: ".12em", textTransform: "uppercase" }}>Tiempo de respuesta</div>
                <div style={{ marginTop: 6, fontSize: "1.05rem", fontWeight: 500 }}>Dentro de 1 día hábil</div>
                <div className="muted">Cada consulta, siempre.</div>
              </div>
            </div>
          </div>

          <form
            className="card"
            style={{ padding: 40, background: "var(--paper)", borderRadius: "var(--r-3)" }}
            onSubmit={handleSubmit}
          >
            {submitted ? (
              <div style={{ textAlign: "center", padding: "60px 0" }}>
                <div style={{
                  width: 72, height: 72, borderRadius: "50%",
                  background: "var(--amber-soft)", color: "var(--amber-deep)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  fontSize: "2rem", fontWeight: 600, marginBottom: 20,
                }}>✓</div>
                <h3 style={{ fontWeight: 500 }}>Gracias — te contactaremos dentro de un día hábil.</h3>
                <p className="muted" style={{ marginTop: 12 }}>
                  Mientras tanto, recibirás un enlace de calendario para reservar un espacio de 30 minutos si prefieres saltarte la cola.
                </p>
              </div>
            ) : (
              <>
                <div className="row-between" style={{ marginBottom: 24 }}>
                  <span className="pill"><span className="emoji">📅</span> Agenda una consulta gratis</span>
                  <span className="mono muted" style={{ fontSize: ".7rem", letterSpacing: ".1em", textTransform: "uppercase" }}>30 min · sin presentaciones</span>
                </div>
                <div className="grid grid-2" style={{ gap: 18 }}>
                  <div className="field"><label>Nombre</label><input type="text" name="first_name" required/></div>
                  <div className="field"><label>Apellido</label><input type="text" name="last_name" required/></div>
                  <div className="field"><label>Correo laboral</label><input type="email" name="email" required/></div>
                  <div className="field"><label>Empresa</label><input type="text" name="company" required/></div>
                  <div className="field" style={{ gridColumn: "1 / -1" }}>
                    <label>¿Cuándo quieres contratar?</label>
                    <select name="timeline">
                      <option>Ayer — lo antes posible</option>
                      <option>1–2 semanas</option>
                      <option>1 mes</option>
                      <option>1–2 meses</option>
                      <option>Solo explorando</option>
                    </select>
                  </div>
                  <div className="field" style={{ gridColumn: "1 / -1" }}>
                    <label>Roles que buscas contratar</label>
                    <input type="text" name="roles" placeholder="ej. 2 desarrolladores senior + 1 diseñador"/>
                  </div>
                  <div className="field" style={{ gridColumn: "1 / -1" }}>
                    <label>¿Cuál es la pregunta que deberíamos responder?</label>
                    <textarea name="message" placeholder="Un presupuesto, un plazo, algo innegociable — cuéntanoslo todo."/>
                  </div>
                  {/* honeypot — bots fill this, humans don't see it */}
                  <input type="text" name="website" tabIndex="-1" autoComplete="off" style={{ position: "absolute", left: "-9999px", width: 1, height: 1, opacity: 0 }} aria-hidden="true"/>
                </div>
                {status === "error" && (
                  <div style={{
                    marginTop: 20, padding: "12px 16px", borderRadius: "var(--r-2)",
                    background: "oklch(95% 0.04 25)", color: "oklch(45% 0.15 25)",
                    fontSize: ".9rem",
                  }}>
                    {errorMsg}
                  </div>
                )}
                <div className="row-between" style={{ marginTop: 28 }}>
                  <span className="muted mono" style={{ fontSize: ".72rem", letterSpacing: ".08em" }}>
                    Al enviar, aceptas nuestra política de privacidad.
                  </span>
                  <button type="submit" className="btn btn--amber" disabled={status === "sending"} style={status === "sending" ? { opacity: .7, pointerEvents: "none" } : null}>
                    {status === "sending" ? "Enviando…" : <>Enviar consulta <span className="arrow">→</span></>}
                  </button>
                </div>
              </>
            )}
          </form>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   CareersList
   ============================================================ */
function CareersList() {
  const jobs = [
    { code: "ENG-201", t: "Ingeniero Full-Stack Senior (React · Node)", loc: "Santo Domingo · Híbrido", type: "Tiempo completo" },
    { code: "ENG-202", t: "Ingeniero Móvil (React Native)",            loc: "Remoto · LatAm",         type: "Tiempo completo" },
    { code: "DAT-203", t: "Analista de Datos",                         loc: "Santiago · Híbrido",    type: "Tiempo completo" },
    { code: "REC-204", t: "Reclutador Bilingüe",                       loc: "Santo Domingo · Presencial",type: "Tiempo completo" },
    { code: "DSG-205", t: "Diseñador de Marca y Web",                  loc: "Remoto · LatAm",         type: "Contrato → Planta" },
    { code: "OPS-206", t: "Especialista en Operaciones de Personas",   loc: "Santo Domingo · Híbrido",type: "Tiempo completo" },
    { code: "MKT-207", t: "Gerente de Marketing de Ciclo de Vida",     loc: "Remoto · LatAm",         type: "Tiempo completo" },
  ];
  return (
    <section className="section" data-screen-label="01 jobs" style={{ position:"relative", overflow:"hidden" }}>
      <span className="blob blob--mint floaty" style={{ width: 320, height: 320, top: -100, right: -100, opacity:.3 }}/>
      <span className="blob blob--butter floaty-2" style={{ width: 240, height: 240, bottom: -80, left: -80, opacity:.35 }}/>
      <div className="container" style={{ position:"relative", zIndex:1 }}>
        <div className="row-between" style={{ marginBottom: 32 }}>
          <div className="pill"><span className="emoji">🌟</span> Vacantes abiertas · {jobs.length}</div>
          <span className="mono muted" style={{ fontSize: ".75rem", letterSpacing: ".08em", textTransform: "uppercase" }}>
            Actualizado semanalmente · última actualización 28 de&nbsp;abril
          </span>
        </div>

        <div className="tlist tlist--joy">
          {jobs.map(j => (
            <a key={j.code} href="#" className="row" style={{ color: "inherit" }}>
              <span className="num">{j.code}</span>
              <h5>{j.t}</h5>
              <p>{j.loc}</p>
              <span className="meta">{j.type} <span style={{ marginLeft: 8, color: "var(--amber-deep)" }}>→</span></span>
            </a>
          ))}
        </div>

        <div className="nudge" style={{ marginTop: 56 }}>
          <div className="pill pill--butter" style={{ marginBottom: 14 }}>
            <span className="emoji">📮</span> ¿No ves tu rol?
          </div>
          <h4 style={{ fontWeight: 500 }}>Contratamos de forma continua. Envía tu CV de todas formas.</h4>
          <a href="mailto:careers@midorick.com" className="btn btn--ghost" style={{ marginTop: 20 }}>
            careers@midorick.com →
          </a>
        </div>
      </div>
    </section>
  );
}

function CareersCulture() {
  const values = [
    { n: "01", emoji:"🌿", tone:"mint",   t: "Boutique por diseño", d: "Solo crecemos cuando podemos mantener la experiencia personal — para clientes y empleados." },
    { n: "02", emoji:"🧘", tone:"peach",  t: "Operadores calmados", d: "Contratamos personas que reducen el drama en la sala, no que lo aumentan. Incluso el día de cierre de nómina." },
    { n: "03", emoji:"📈", tone:"butter", t: "Retención real",     d: "Nos medimos por la retención al tercer año, no al primero. El número honesto." },
    { n: "04", emoji:"🛡️", tone:"sky",    t: "El cumplimiento es cuidado", d: "Cumplir la ley no es un centro de costos; es cómo cuidamos a nuestra gente." },
  ];
  return (
    <section className="section section--mint" data-screen-label="02 culture" style={{ position:"relative", overflow:"hidden" }}>
      <span className="blob blob--peach floaty" style={{ width: 320, height: 320, top: -100, left: -80, opacity:.35 }}/>
      <span className="blob blob--mint floaty-2" style={{ width: 280, height: 280, bottom: -80, right: -80, opacity:.4 }}/>
      <div className="container" style={{ position:"relative", zIndex:1 }}>
        <div className="row-between" style={{ marginBottom: 40 }}>
          <div>
            <div className="pill" style={{ marginBottom: 20 }}>
              <span className="emoji">🌱</span> A lo que te unirías
            </div>
            <h2>Cuatro principios operativos.<br/>Colgados en la pared. Realmente usados.</h2>
          </div>
        </div>
        <div className="grid grid-2" style={{ gap: 24 }}>
          {values.map(v => (
            <div className="feat" key={v.n} style={{ padding: 36 }}>
              <div className={`ico ico--${v.tone}`} style={{ fontSize: "1.6rem" }}>{v.emoji}</div>
              <span className="mono muted" style={{ fontSize: ".72rem", letterSpacing: ".1em" }}>PRINCIPIO / {v.n}</span>
              <h4 style={{ marginTop: 8, fontWeight: 500 }}>{v.t}</h4>
              <p style={{ marginTop: 10, color: "var(--ink-2)" }}>{v.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   BlogIndex
   ============================================================ */
function BlogCover({ src, alt, ratio = "16/9", corner, style }) {
  return (
    <div style={{ position:"relative", aspectRatio: ratio, borderRadius: "var(--r-2)", overflow:"hidden", background:"var(--fog)", ...style }}>
      <img src={src} alt={alt} loading="lazy" style={{ width:"100%", height:"100%", objectFit:"cover", display:"block" }}/>
      {corner && <span className="mono" style={{ position:"absolute", top:12, right:14, fontSize:".68rem", color:"#fff", background:"rgba(20,20,20,.45)", padding:"3px 10px", borderRadius:999, letterSpacing:".06em", textTransform:"uppercase" }}>{corner}</span>}
    </div>
  );
}
function BlogIndex() {
  const posts = [
    {
      slug: "google-500m-nearshore-hiring-dr-es.html",
      cat: "Nearshoring · RD", emoji: "🌐", tone: "butter",
      title: "El Hub Digital de $500M de Google: Qué Significa para la Contratación Nearshore en República Dominicana",
      sub: "Una inversión de $500M en fibra submarina y centros de datos convierte a RD en una opción nearshore seria — pero la contratación conforme sigue siendo la parte difícil. Así es como un EOR cierra esa brecha.",
      date: "3 de julio de 2026", read: "2 min de lectura",
      author: "Midorick Team", role: "Análisis de Mercado",
      cover: "assets/blog/dr-digital-hub-cover.png",
      featured: true,
    },
    {
      slug: "eor-service-costs-es.html",
      cat: "EOR · Costos", emoji: "💰", tone: "butter",
      title: "Los Factores Clave que Influyen en el Costo de los Servicios EOR, Explicados",
      sub: "Descubre el potencial de los servicios EOR con un panorama completo de los costos típicos. Obtén información valiosa para tomar decisiones informadas para tu negocio.",
      date: "16 de junio de 2025", read: "9 min de lectura",
      author: "Midorick Team", role: "Contenido e Investigación",
      cover: "assets/blog/eor-costs-cover.jpg",
    },
    {
      slug: "employer-of-record-benefits-es.html",
      cat: "EOR · Operaciones", emoji: "🚀", tone: "peach",
      title: "Potencia las Capacidades de tu Negocio Usando un Servicio de Employer of Record",
      sub: "Maximiza el crecimiento de tu negocio aprovechando los servicios EOR. Conoce las ventajas clave, desde beneficios de cumplimiento hasta contratación simplificada.",
      date: "16 de junio de 2025", read: "10 min de lectura",
      author: "Midorick Team", role: "Contenido e Investigación",
      cover: "assets/blog/eor-capabilities-cover.jpg",
    },
    {
      slug: "eor-pitfalls-to-avoid-es.html",
      cat: "EOR · Riesgos", emoji: "⚠️", tone: "sky",
      title: "Posibles Riesgos al Contratar un Servicio de Employer of Record",
      sub: "Navega los riesgos de usar un Employer of Record (EOR) para tomar decisiones informadas para tu negocio.",
      date: "16 de junio de 2025", read: "11 min de lectura",
      author: "Midorick Team", role: "Contenido e Investigación",
      cover: "assets/blog/eor-pitfalls-cover.jpg",
    },
    {
      slug: "hiring-challenges-solutions-es.html",
      cat: "Contratación", emoji: "🧩", tone: "peach",
      title: "Algunos desafíos comunes de contratación y cómo superarlos",
      sub: "Muchas empresas enfrentan dificultades para encontrar buenos candidatos y cubrir vacantes. Aquí algunos desafíos comunes y recomendaciones para mejorar tu proceso.",
      date: "23 de agosto de 2022", read: "1 min de lectura",
      author: "Midorick Team", role: "Adquisición de Talento",
      cover: "assets/blog/hiring-challenges-cover.jpg",
    },
    {
      slug: "hiring-latam-caribbean-es.html",
      cat: "Contratación · LatAm", emoji: "🌎", tone: "butter",
      title: "Beneficios de contratar en LatAm y el Caribe",
      sub: "La mejor forma de contratar en LatAm y el Caribe es tercerizar con un socio local para reclutamiento, contratación, nómina e impuestos locales.",
      date: "23 de agosto de 2022", read: "1 min de lectura",
      author: "Midorick Team", role: "Adquisición de Talento",
      cover: "assets/blog/latam-benefits-cover.gif",
    },
    {
      slug: "hire-in-dominican-republic-es.html",
      cat: "Contratación · RD", emoji: "🇩🇴", tone: "sky",
      title: "Por qué contratar en República Dominicana",
      sub: "Algunos de los beneficios de contratar en República Dominicana, y cómo te ayudamos a establecer tu equipo de forma sencilla.",
      date: "23 de agosto de 2022", read: "1 min de lectura",
      author: "Midorick Team", role: "Adquisición de Talento",
      cover: "assets/blog/dr-hiring-cover.jpg",
    },
  ];

  const featured = posts.find(p => p.featured);
  const rest = posts.filter(p => !p.featured);

  return (
    <section className="section" data-screen-label="01 blog-index" style={{ position:"relative", overflow:"hidden" }}>
      <span className="blob blob--mint floaty" style={{ width: 360, height: 360, top: -120, right: -120, opacity:.3 }}/>
      <span className="blob blob--peach floaty-2" style={{ width: 240, height: 240, bottom: -80, left: -80, opacity:.35 }}/>
      <div className="container" style={{ position:"relative", zIndex:1 }}>
        {featured && (
          <a href={featured.slug} className="card card--hover" style={{ display: "block", padding: 0, overflow: "hidden", marginBottom: 64, borderRadius: "var(--r-4)" }}>
            <div className="grid" style={{ gridTemplateColumns: "1.2fr 1fr", gap: 0 }}>
              <div style={{ padding: 48, display: "flex", flexDirection: "column", justifyContent: "space-between", gap: 32 }}>
                <div>
                  <div className="row" style={{ gap: 12, marginBottom: 24 }}>
                    <span className="pill"><span className="emoji">⭐</span> Destacado</span>
                    <span className="pill pill--butter" style={{ fontSize: ".85rem" }}>
                      <span className="emoji">{featured.emoji}</span> {featured.cat}
                    </span>
                  </div>
                  <h3 style={{ fontSize: "2.1rem", fontWeight: 500, lineHeight: 1.15 }}>{featured.title}</h3>
                  <p className="muted" style={{ marginTop: 18, fontSize: "1.05rem", lineHeight: 1.55 }}>{featured.sub}</p>
                </div>
                <div className="row-between">
                  <div className="row" style={{ gap: 12 }}>
                    <span className="avatar avatar--mint" style={{ width: 40, height: 40, fontSize: ".85rem" }}>{featured.author.split(" ").map(s=>s[0]).join("")}</span>
                    <div>
                      <div style={{ fontWeight: 500, fontSize: ".95rem" }}>{featured.author}</div>
                      <div className="mono muted" style={{ fontSize: ".7rem", letterSpacing: ".08em", textTransform: "uppercase" }}>{featured.date} · {featured.read}</div>
                    </div>
                  </div>
                  <span className="mono" style={{ fontSize: ".8rem", color: "var(--amber-deep)", letterSpacing: ".08em", textTransform: "uppercase" }}>Leer →</span>
                </div>
              </div>
              <window.BlogCover src={featured.cover} alt={featured.title} ratio="auto" style={{ minHeight: 360 }} corner="PUB 01"/>
            </div>
          </a>
        )}

        <div className="grid grid-2" style={{ gap: 32 }}>
          {rest.map((p, i) => (
            <a key={i} href={p.slug} className="card card--hover" style={{ display: "flex", flexDirection: "column", gap: 18, padding: 28 }}>
              <window.BlogCover src={p.cover} alt={p.title} ratio="16/9" corner={`PUB 0${i + 2}`} style={{ borderRadius: "var(--r-2)" }}/>
              <div className={`pill ${p.tone === "peach" ? "pill--peach" : p.tone === "butter" ? "pill--butter" : p.tone === "sky" ? "pill--sky" : ""}`} style={{ alignSelf:"flex-start", fontSize:".82rem" }}>
                <span className="emoji">{p.emoji}</span> {p.cat}
              </div>
              <h4 style={{ fontSize: "1.4rem", fontWeight: 500, lineHeight: 1.2 }}>{p.title}</h4>
              <p className="muted" style={{ fontSize: ".98rem" }}>{p.sub}</p>
              <div className="row" style={{ marginTop: "auto", paddingTop: 16, borderTop: "1px solid var(--fog)", gap: 12 }}>
                <span className="avatar avatar--mint" style={{ width: 32, height: 32, fontSize: ".7rem" }}>{p.author.split(" ").map(s=>s[0]).join("")}</span>
                <div>
                  <div style={{ fontWeight: 500, fontSize: ".88rem" }}>{p.author}</div>
                  <div className="mono muted" style={{ fontSize: ".68rem", letterSpacing: ".08em", textTransform: "uppercase" }}>{p.date} · {p.read}</div>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   BlogPost (article body)
   ============================================================ */
function BlogPost({ meta, children }) {
  return (
    <>
      <header className="page-hero page-hero--joy" style={{ position: "relative", overflow: "hidden", paddingBottom: 48 }}>
        <span className="blob blob--mint floaty" style={{ width: 340, height: 340, top: -100, right: -100, opacity:.35 }}/>
        <span className="blob blob--butter floaty-2" style={{ width: 220, height: 220, bottom: -80, left: -60, opacity:.35 }}/>
        <div className="container pop-in" style={{ position:"relative", zIndex: 1 }}>
          <div className="row" style={{ gap: 12, marginBottom: 28 }}>
            <span className="pill"><span className="emoji">📚</span> {meta.cat}</span>
            <span className="mono muted" style={{ fontSize: ".72rem", letterSpacing: ".1em", textTransform: "uppercase" }}>
              {meta.date} · {meta.read}
            </span>
          </div>
          <h1 style={{ fontSize: "clamp(2rem, 5vw, 3.4rem)", maxWidth: "26ch", letterSpacing: "-0.03em", fontWeight: 400 }}>
            {meta.title}
          </h1>
          <p className="lead" style={{ marginTop: 24, maxWidth: "60ch" }}>{meta.sub}</p>
          <div className="row" style={{ marginTop: 36, gap: 14 }}>
            <span className="avatar avatar--mint" style={{ width: 44, height: 44, fontSize: ".95rem" }}>{meta.author.split(" ").map(s=>s[0]).join("")}</span>
            <div>
              <div style={{ fontWeight: 500 }}>{meta.author}</div>
              <div className="mono muted" style={{ fontSize: ".72rem", letterSpacing: ".08em", textTransform: "uppercase" }}>
                {meta.role}
              </div>
            </div>
          </div>
        </div>
      </header>

      <section className="section">
        <div className="container">
          <article className="post-body">
            {children}
          </article>
        </div>
      </section>

      <section className="section section--mint" style={{ position:"relative", overflow:"hidden" }}>
        <span className="blob blob--mint floaty" style={{ width: 320, height: 320, top: -100, left: "50%", opacity:.35 }}/>
        <span className="blob blob--peach floaty-2" style={{ width: 220, height: 220, bottom: -80, right: -60, opacity:.4 }}/>
        <div className="container" style={{ textAlign: "center", maxWidth: 720, position:"relative", zIndex:1 }}>
          <div className="pill" style={{ marginBottom: 20 }}>
            <span className="emoji">💌</span> ¿Te resultó útil?
          </div>
          <h3 style={{ fontWeight: 500 }}>Escribimos uno de estos cada dos viernes.</h3>
          <p className="muted" style={{ marginTop: 14 }}>Artículos prácticos sobre contratación, operaciones y back-office en LatAm. Sin relleno de marketing.</p>
          <div className="row" style={{ marginTop: 28, justifyContent: "center" }}>
            <a href="blog-es.html" className="btn btn--ghost">Todos los artículos</a>
            <a href="contacto.html" className="btn btn--amber">Habla con nosotros <span className="arrow">→</span></a>
          </div>
        </div>
      </section>
    </>
  );
}


/* ---------- FAQ page ---------- */
function FAQSection() {
  const faqs = [
    { q: "\u00bfQu\u00e9 es Midorick Solutions?", a: "Midorick Solutions es un proveedor nearshore de Employer of Record (EOR) y soluciones de fuerza laboral con sede en Rep\u00fablica Dominicana. Ayudamos a las empresas a contratar, incorporar, gestionar la n\u00f3mina y escalar equipos remotos en Am\u00e9rica Latina y el Caribe sin necesidad de abrir una entidad legal local." },
    { q: "\u00bfQu\u00e9 hace un Employer of Record (EOR)?", a: "Un Employer of Record emplea legalmente al personal en tu nombre mientras t\u00fa mantienes el control operativo. Midorick se encarga de contratos, procesamiento de n\u00f3mina, cumplimiento fiscal y de seguridad social, beneficios de ley y administraci\u00f3n de RR.HH. para garantizar el cumplimiento legal y normativo." },
    { q: "\u00bfD\u00f3nde est\u00e1 ubicada Midorick Solutions?", a: "Midorick Solutions fue fundada en 2020 y tiene su sede en Santo Domingo, Rep\u00fablica Dominicana. Atendemos a empleadores en Norteam\u00e9rica y otros mercados internacionales que buscan talento en LATAM y el Caribe." },
    { q: "\u00bfQu\u00e9 empresas se benefician de los servicios de Midorick?", a: "Empresas norteamericanas y globales que se expanden hacia Am\u00e9rica Latina y el Caribe \u2014 startups, empresas SaaS y tecnol\u00f3gicas, proveedores de servicios profesionales, operaciones de atenci\u00f3n al cliente y equipos de finanzas \u2014 usan Midorick para contratar y gestionar talento regional de forma r\u00e1pida y conforme a la ley." },
    { q: "\u00bfEn qu\u00e9 pa\u00edses tienen presencia?", a: "Nos especializamos en contrataci\u00f3n en toda Am\u00e9rica Latina y el Caribe, con una s\u00f3lida base operativa en Rep\u00fablica Dominicana. Cont\u00e1ctanos para conocer detalles de cobertura por pa\u00eds y cumplimiento local." },
    { q: "\u00bfQu\u00e9 roles puede ayudarme a contratar Midorick?", a: "Reclutamos y empleamos profesionales en distintas funciones, incluyendo desarrolladores de software, representantes de atenci\u00f3n al cliente, contadores, analistas de datos, dise\u00f1adores gr\u00e1ficos, reclutadores y especialistas en marketing \u2014 adem\u00e1s de muchos otros roles profesionales." },
    { q: "\u00bfPor qu\u00e9 contratar talento de Rep\u00fablica Dominicana?", a: "Rep\u00fablica Dominicana ofrece una fuerza laboral educada y con dominio del ingl\u00e9s, una alineaci\u00f3n horaria favorable con EE. UU. y Canad\u00e1, costos laborales competitivos y un creciente pool de talento en tecnolog\u00eda y servicios \u2014 lo que la convierte en una ubicaci\u00f3n nearshore atractiva." },
    { q: "\u00bfNecesito establecer una entidad legal local para contratar a trav\u00e9s de Midorick?", a: "No. Usar los servicios EOR de Midorick te permite contratar y pagar empleados legalmente en el pa\u00eds sin necesidad de formar una subsidiaria u oficina sucursal." },
    { q: "\u00bfQu\u00e9 servicios de RR.HH. ofrece Midorick?", a: "Ofrecemos servicios integrales de RR.HH.: onboarding, administraci\u00f3n de n\u00f3mina, gesti\u00f3n de beneficios de empleados, redacci\u00f3n de contratos laborales, presentaci\u00f3n de impuestos locales, monitoreo de cumplimiento y soporte y reportes continuos de RR.HH." },
    { q: "\u00bfMidorick maneja el procesamiento de n\u00f3mina y el cumplimiento fiscal?", a: "S\u00ed. Midorick gestiona las corridas de n\u00f3mina, deducciones de ley, contribuciones patronales, presentaciones fiscales locales y el cumplimiento de las leyes laborales y de seguridad social." },
    { q: "\u00bfC\u00f3mo funciona el proceso de reclutamiento de Midorick?", a: "Empezamos por entender tus necesidades de contrataci\u00f3n y tu cultura, luego buscamos y filtramos candidatos, realizamos evaluaciones y entrevistas, presentamos finalistas calificados y gestionamos el onboarding a trav\u00e9s de nuestro EOR una vez que eliges un candidato." },
    { q: "\u00bfPuedo usar Midorick solo para reclutamiento?", a: "S\u00ed. Ofrecemos servicios independientes de adquisici\u00f3n de talento y b\u00fasqueda de candidatos, as\u00ed como paquetes completos de EOR y gesti\u00f3n de fuerza laboral \u2014 elige la combinaci\u00f3n que mejor se ajuste a tu estrategia de contrataci\u00f3n." },
    { q: "\u00bfQu\u00e9 tan r\u00e1pido puedo contratar a trav\u00e9s de Midorick?", a: "Los plazos var\u00edan seg\u00fan el rol y el mercado, pero trabajar con un EOR normalmente acorta el tiempo de contrataci\u00f3n al eliminar la necesidad de establecer infraestructura legal y de RR.HH. local. Preg\u00fantanos por estimados espec\u00edficos por rol." },
    { q: "\u00bfOfrecen espacio de oficina o soluciones de coworking?", a: "S\u00ed. Midorick puede gestionar opciones de coworking y espacio de oficina en Rep\u00fablica Dominicana para apoyar equipos h\u00edbridos o en el pa\u00eds." },
    { q: "\u00bfC\u00f3mo apoya Midorick el compromiso y la retenci\u00f3n de empleados?", a: "Ofrecemos programas de engagement, experiencias de onboarding, actividades de team-building e iniciativas de RR.HH. dise\u00f1adas para mejorar la cultura laboral, el desempe\u00f1o y la retenci\u00f3n." },
    { q: "\u00bfA qu\u00e9 industrias atienden?", a: "Apoyamos a startups, empresas de tecnolog\u00eda y SaaS, operaciones de procesos de negocio y atenci\u00f3n al cliente, servicios profesionales, equipos de finanzas y contabilidad, y otras organizaciones que se expanden hacia LATAM y el Caribe." },
    { q: "\u00bfPor qu\u00e9 elegir Midorick en lugar de un EOR global grande?", a: "Midorick combina experiencia local en Rep\u00fablica Dominicana con un servicio personalizado tipo boutique. Los clientes se benefician de soporte cercano, conocimiento de cumplimiento regional y soluciones m\u00e1s r\u00e1pidas y flexibles que los proveedores globales gen\u00e9ricos." },
    { q: "\u00bfMidorick garantiza el cumplimiento legal y fiscal local?", a: "S\u00ed. Nuestro equipo mantiene conocimiento actualizado de las regulaciones laborales locales, obligaciones fiscales y requisitos de derecho laboral para reducir riesgos legales y financieros para los clientes." },
    { q: "\u00bfMidorick puede apoyar equipos completamente remotos y distribuidos?", a: "Por supuesto. Nos especializamos en construir y gestionar equipos remotos y distribuidos en toda Am\u00e9rica Latina y el Caribe, garantizando el cumplimiento local y la administraci\u00f3n de n\u00f3mina." },
    { q: "\u00bfQu\u00e9 hace de Rep\u00fablica Dominicana una ubicaci\u00f3n nearshore s\u00f3lida?", a: "Las ventajas clave incluyen un creciente pool de talento en tecnolog\u00eda y servicios, dominio del ingl\u00e9s, una conveniente superposici\u00f3n horaria con EE. UU., costos de personal competitivos y un clima de negocios estable." },
    { q: "\u00bfC\u00f3mo empiezo con Midorick Solutions?", a: "Agenda una consulta en nuestro sitio web o cont\u00e1ctanos por redes sociales. Cu\u00e9ntanos tus necesidades de contrataci\u00f3n y el pa\u00eds objetivo, y te compartiremos un plan y cronograma a la medida." },
  ];

  const [open, setOpen] = React.useState(null);

  return (
    <section className="section section--cream" id="faq">
      <div className="container" style={{ maxWidth: 820 }}>
        <div style={{ textAlign: "center", marginBottom: "var(--s-8)" }}>
          <h2 style={{ fontSize: "clamp(1.8rem, 4vw, 2.6rem)", fontWeight: 600, lineHeight: 1.15 }}>
            Preguntas frecuentes
          </h2>
          <p className="lead" style={{ marginTop: 16, color: "oklch(50% 0.02 165)" }}>
            Todo lo que necesitas saber sobre contratar a través de Midorick. ¿No encuentras una respuesta? <a href="contacto.html" style={{ color: "var(--moss)", fontWeight: 500 }}>Agenda una consulta</a>.
          </p>
        </div>

        <div className="faq-list">
          {faqs.map((item, i) => (
            <div key={i} className={`faq-item ${open === i ? "faq-item--open" : ""}`}>
              <button
                className="faq-question"
                onClick={() => setOpen(open === i ? null : i)}
                aria-expanded={open === i}
              >
                <span>{item.q}</span>
                <span className="faq-icon">{open === i ? "\u2212" : "+"}</span>
              </button>
              <div className="faq-answer">
                <p>{item.a}</p>
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: "var(--s-8)", textAlign: "center" }}>
          <p style={{ color: "oklch(50% 0.02 165)", fontSize: ".95rem" }}>
            Síguenos:
            {" "}
            <a href="https://www.linkedin.com/company/midoricksolutions/" target="_blank" rel="noreferrer">LinkedIn</a>
            {" \u00b7 "}
            <a href="https://www.instagram.com/midorick_solutionsdr/" target="_blank" rel="noreferrer">Instagram</a>
            {" \u00b7 "}
            <a href="https://www.facebook.com/midoricksolutions" target="_blank" rel="noreferrer">Facebook</a>
            {" \u00b7 "}
            <a href="https://x.com/MidorickSols" target="_blank" rel="noreferrer">X</a>
            {" \u00b7 "}
            <a href="https://www.youtube.com/@MidorickSolutions" target="_blank" rel="noreferrer">YouTube</a>
          </p>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  ServicesGrid, ServicesPricing, ServicesCompare,
  AboutStory, AboutCredentials,
  ContactForm,
  CareersList, CareersCulture,
  BlogIndex, BlogPost, BlogCover,
  FAQSection,
});
