/* global React */
const { useState } = React;

/* ---------- brand mark ---------- */
function MLBrandES() {
  return (
    <a href="es.html" className="nav__brand" aria-label="Midorick — inicio" style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
      <img src="assets/logo.png" alt="Midorick Solutions" style={{ height: 32, width: "auto", display: "block" }}/>
      <span className="tag">— LATAM Y EL CARIBE</span>
    </a>
  );
}

/* ---------- top nav (Spanish) ---------- */
function MLSiteNavES({ current, enHref }) {
  const links = [
    { id: "home",      label: "Inicio",           href: "es.html" },
    { id: "services",  label: "Servicios",        href: "servicios.html" },
    { id: "tribe",     label: "Conoce al Equipo",  href: "equipo.html" },
    { id: "careers",   label: "Empleos",           href: "empleos.html" },
    { id: "blog",      label: "Blog",              href: "blog-es.html" },
    { id: "contact",   label: "Contacto",          href: "contacto.html" },
  ];
  const enMap = {
    home: "index.html", services: "services.html", tribe: "tribe.html",
    careers: "careers.html", blog: "blog.html", contact: "contact.html", faq: "faq.html",
  };
  const enTarget = enHref || enMap[current] || "index.html";
  return (
    <nav className="nav" data-screen-label="nav">
      <div className="container nav__inner">
        <MLBrandES/>
        <div className="nav__links">
          {links.map(l => (
            <a key={l.id} href={l.href} className={current === l.id ? "is-current" : ""}>
              {l.label}
            </a>
          ))}
        </div>
        <div className="nav__cta" style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <a href="contacto.html" className="btn btn--primary">
            Agenda una consulta <span className="arrow">→</span>
          </a>
          <a href={enTarget} aria-label="Switch to English" title="Switch to English"
             style={{
               display: "inline-flex", alignItems: "center", justifyContent: "center",
               width: 36, height: 36, borderRadius: "50%",
               border: "1.5px solid var(--ink)", fontFamily: "var(--mono)",
               fontSize: ".72rem", fontWeight: 600, letterSpacing: ".02em",
               color: "var(--ink)", flexShrink: 0
             }}>
            EN
          </a>
        </div>
      </div>
    </nav>
  );
}

/* ---------- footer (Spanish) ---------- */
function MLSiteFooterES() {
  return (
    <footer className="footer" data-screen-label="footer">
      <div className="container" style={{paddingInline:"clamp(40px, 8vw, 120px)"}}>
        <div className="footer__grid">
          <div>
            <div style={{ marginBottom: 10 }}>
              <img src="assets/logo-on-dark.png" alt="Midorick Solutions" style={{ height: 40, width: "auto", display: "block" }}/>
            </div>
            <p style={{ maxWidth: "52ch", color: "oklch(75% 0.020 165)", lineHeight:1.6 }}>
              Contratación offshore sin complicaciones en LatAm y el Caribe. Un Employer&nbsp;of&nbsp;Record
              boutique creado para empresas que se niegan a elegir entre costo y cuidado. Nos encargamos
              del cumplimiento legal, la nómina y RR.HH. local para que tú puedas enfocarte en construir
              un equipo feliz y dedicado — sin lidiar con burocracia.
            </p>
            <div style={{ marginTop: 28, display:"flex", gap:6 }}>
              <span className="chip chip--solid" style={{ background:"transparent", borderColor:"oklch(38% 0.030 165)", color:"oklch(72% 0.020 165)" }}>
                <span className="dot" style={{ background:"var(--moss)" }}></span> Aceptando clientes · T2&nbsp;2026
              </span>
            </div>
          </div>

          <div>
            <h6>Empresa</h6>
            <ul style={{ listStyle:"none", padding:0, margin:0, display:"flex", flexDirection:"column", gap:6 }}>
              <li><a href="equipo.html">Conoce al Equipo</a></li>
              <li><a href="servicios.html">Servicios</a></li>
              <li><a href="empleos.html">Empleos</a></li>
              <li><a href="blog-es.html">Blog</a></li>
              <li><a href="faq-es.html">Preguntas Frecuentes</a></li>
            </ul>
          </div>

          <div>
            <h6>Redes Sociales</h6>
            <ul style={{ listStyle:"none", padding:0, margin:0, display:"flex", flexDirection:"column", gap:6 }}>
              <li><a href="https://www.linkedin.com/company/midoricksolutions/" target="_blank" rel="noreferrer">LinkedIn</a></li>
              <li><a href="https://www.instagram.com/midorick_solutionsdr/" target="_blank" rel="noreferrer">Instagram</a></li>
              <li><a href="https://www.facebook.com/midoricksolutions" target="_blank" rel="noreferrer">Facebook</a></li>
              <li><a href="https://x.com/MidorickSols" target="_blank" rel="noreferrer">X (Twitter)</a></li>
              <li><a href="https://www.youtube.com/@MidorickSolutions" target="_blank" rel="noreferrer">YouTube</a></li>
            </ul>
          </div>

          <div>
            <h6>Contáctanos</h6>
            <ul style={{ listStyle:"none", padding:0, margin:0, display:"flex", flexDirection:"column", gap:6 }}>
              <li><a href="contacto.html">Agenda una consulta</a></li>
              <li><a href="mailto:info@midorick.com">info@midorick.com</a></li>
            </ul>
          </div>

          <div>
            <h6>Oficinas</h6>
            <ul style={{ listStyle:"none", padding:0, margin:0, display:"flex", flexDirection:"column", gap:14, color:"oklch(75% 0.020 165)" }}>
              <li>
                <div style={{ fontFamily:"var(--mono)", fontSize:".7rem", textTransform:"uppercase", letterSpacing:".12em", color:"oklch(62% 0.020 165)", marginBottom: 4 }}>HQ · RD</div>
                Santo Domingo<br/>República Dominicana
              </li>
              <li>
                <div style={{ fontFamily:"var(--mono)", fontSize:".7rem", textTransform:"uppercase", letterSpacing:".12em", color:"oklch(62% 0.020 165)", marginBottom: 4 }}>Zona horaria</div>
                AST · todo el año<br/>Alineado con la costa este de EE.&nbsp;UU.
              </li>
            </ul>
          </div>
        </div>

        <div className="footer__bottom">
          <span>© 2026 Midorick Solutions · Todos los derechos reservados</span>
          <span>
            <a href="#" style={{ marginRight: 18 }}>Privacidad</a>
            <a href="#">Términos</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

/* expose */

/* ---------- page hero (shared, language-agnostic) ---------- */
function MLPageHero({ eyebrow, emoji = "\ud83c\udf3f", title, sub, kicker, tone = "mint", center = false }) {
  return (
    <header className="page-hero page-hero--joy" data-screen-label="page-hero" style={{ position: "relative", overflow: "hidden" }}>
      <span className={`blob blob--${tone === "peach" ? "peach" : tone === "butter" ? "butter" : "mint"} floaty`} style={{ width: 360, height: 360, top: -120, right: -80 }}/>
      <span className="blob blob--butter floaty-2" style={{ width: 220, height: 220, bottom: -80, left: -60, opacity: .35 }}/>
      <span className="shape shape--squircle floaty" style={{ width: 56, height: 56, top: 80, right: "12%", opacity: .55 }}/>
      <span className="sparkle floaty-2" style={{ position: "absolute", top: 140, left: "8%", color: "var(--amber)", width: 22, height: 22 }}/>

      <div className="container pop-in" style={{ position: "relative", zIndex: 1, textAlign: center ? "center" : undefined }}>
        {eyebrow && (
          <div className={`pill ${tone === "peach" ? "pill--peach" : tone === "butter" ? "pill--butter" : ""}`} style={{ marginBottom: 28 }}>
            <span className="emoji">{emoji}</span> {eyebrow}
          </div>
        )}
        <h1 style={{ marginInline: center ? "auto" : undefined, maxWidth: center ? "18ch" : undefined }}>{title}</h1>
        {sub && <p className="lead" style={{ marginTop: 28, marginInline: center ? "auto" : undefined, maxWidth: center ? 680 : undefined }}>{sub}</p>}
        {kicker && <div style={{ marginTop: 28 }}>{kicker}</div>}
      </div>
    </header>
  );
}

/* ---------- placeholder image (named slot) ---------- */
function PH({ label, ratio = "16/9", tone = "default", corner, children, style }) {
  const cls = "ph " + (tone === "dark" ? "ph--dark" : tone === "amber" ? "ph--amber" : "");
  return (
    <div className={cls} style={{ aspectRatio: ratio, ...style }}>
      {corner && <span className="corner">{corner}</span>}
      {children}
      {label && <span>{label}</span>}
    </div>
  );
}

Object.assign(window, { MLSiteNavES, MLSiteFooterES, MLBrandES, MLPageHero, PH });