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

/* ---------- brand mark ---------- */
function MLBrand() {
  return (
    <a href="index.html" className="nav__brand" aria-label="Midorick — home" 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 &amp; CARIBBEAN</span>
    </a>
  );
}

/* ---------- top nav ---------- */
function MLSiteNav({ current, esHref }) {
  const [open, setOpen] = useState(false);
  const links = [
    { id: "home",      label: "Home",      href: "index.html" },
    { id: "services",  label: "Services",  href: "services.html" },
    { id: "tribe",     label: "Meet the Team", href: "tribe.html" },
    { id: "careers",   label: "Careers",   href: "careers.html" },
    { id: "blog",      label: "Blog",      href: "blog.html" },
    { id: "contact",   label: "Contact",   href: "contact.html" },
  ];
  const esMap = {
    home: "es.html", services: "servicios.html", tribe: "equipo.html",
    careers: "empleos.html", blog: "blog-es.html", contact: "contacto.html", faq: "faq-es.html",
  };
  const esTarget = esHref || esMap[current] || "es.html";
  return (
    <nav className="nav" data-screen-label="nav">
      <div className="container nav__inner">
        <MLBrand/>
        <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="contact.html" className="btn btn--primary">
            Book a consult <span className="arrow">→</span>
          </a>
          <a href={esTarget} aria-label="Ver en español" title="Ver en español"
             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
             }}>
            ES
          </a>
        </div>
      </div>
    </nav>
  );
}

/* ---------- footer ---------- */
function MLSiteFooter() {
  return (
    <footer className="footer" data-screen-label="footer">
      <div className="container">
        <div className="footer__grid">
          <div>
            <div style={{ marginBottom: 18 }}>
              <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 }}>
              Effortless offshore hiring across LatAm &amp; the Caribbean. A boutique
              Employer&nbsp;of&nbsp;Record built for companies who refuse to choose between
              cost and care. We handle compliance, payroll, and local HR so you can focus
              on building a happy, dedicated team — not navigating red tape.
            </p>
            <div style={{ marginTop: 28, display:"flex", gap:10 }}>
              <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> Accepting clients · Q2&nbsp;2026
              </span>
            </div>
          </div>

          <div>
            <h6>Company</h6>
            <ul style={{ listStyle:"none", padding:0, margin:0, display:"flex", flexDirection:"column", gap:10 }}>
              <li><a href="tribe.html">Meet the Team</a></li>
              <li><a href="services.html">Services</a></li>
              <li><a href="careers.html">Careers</a></li>
              <li><a href="blog.html">Blog</a></li>
              <li><a href="faq.html">FAQ</a></li>
            </ul>
          </div>

          <div>
            <h6>Social Media</h6>
            <ul style={{ listStyle:"none", padding:0, margin:0, display:"flex", flexDirection:"column", gap:10 }}>
              <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>Reach us</h6>
            <ul style={{ listStyle:"none", padding:0, margin:0, display:"flex", flexDirection:"column", gap:10 }}>
              <li><a href="contact.html">Book a consult</a></li>
              <li><a href="mailto:hola@midorick.com">hola@midorick.com</a></li>
            </ul>
          </div>

          <div>
            <h6>Offices</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 · DR</div>
                Santo Domingo<br/>Dominican Republic
              </li>
              <li>
                <div style={{ fontFamily:"var(--mono)", fontSize:".7rem", textTransform:"uppercase", letterSpacing:".12em", color:"oklch(62% 0.020 165)", marginBottom: 4 }}>Time zone</div>
                AST · year-round<br/>Aligned with US East Coast
              </li>
            </ul>
          </div>
        </div>

        <div className="footer__bottom">
          <span>© 2026 Midorick Solutions · All rights reserved</span>
          <span>
            <a href="#" style={{ marginRight: 18 }}>Privacy</a>
            <a href="#">Terms</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

/* ---------- shared page hero (joyful) ---------- */
function MLPageHero({ eyebrow, emoji = "🌿", 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: 32 }}>{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>
  );
}

/* expose */
Object.assign(window, { MLSiteNav, MLSiteFooter, MLPageHero, MLBrand, PH });