// chrome.jsx — logo mark, nav, footer, age gate, ticker
const { useState: useState_c, useEffect: useEffect_c } = React;

// Inline brand mark — uses the cleaned PNG (black ink on transparent)
function CoyoteMark({ size = 28, color }) {
  return (
    <img src="assets/coyote-mark.png" alt="" aria-hidden="true"
      style={{
        width: size, height: size, objectFit: "contain",
        // tint via filter when a non-default color is provided
        filter: color === "var(--c-bg)" || color === "var(--c-paper)" ? "invert(1)" : "none",
      }} />
  );
}

function Nav({ page, setPage, lang, setLang, t }) {
  const [open, setOpen] = useState_c(false);
  const links = [
    ["home", t(COPY.nav.home)],
    ["agaves", t(COPY.nav.agaves)],
    ["blog", t(COPY.nav.blog)],
    ["contact", t(COPY.nav.contact)],
  ];
  const onNav = (k) => {
    setOpen(false);
    if (k === "agaves") {
      setPage("home");
      setTimeout(() => {
        const el = document.getElementById("agaves");
        if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: "smooth" });
      }, 50);
    } else {
      setPage(k);
      window.scrollTo({ top: 0, behavior: "instant" });
    }
  };
  return (
    <nav className="nav">
      <div className="nav-inner">
        <div className="nav-left">
          {links.slice(0, 2).map(([k, label]) => (
            <span key={k} className={"nav-link" + (page === k || (k === "agaves" && page === "home") ? "" : "")} onClick={() => onNav(k)}>{label}</span>
          ))}
        </div>
        <div className="nav-mark" onClick={() => onNav("home")}>
          <CoyoteMark size={30} color="var(--c-oxblood)" glyphColor="var(--c-ink)" />
          <div className="col" style={{ lineHeight: 1.05 }}>
            <span className="name">Coyote Emplumado</span>
            <span className="sub">Mezcal · Puebla</span>
          </div>
        </div>
        <div className="nav-right">
          {links.slice(2).map(([k, label]) => (
            <span key={k} className={"nav-link" + (page === k ? " active" : "")} onClick={() => onNav(k)}>{label}</span>
          ))}
          <span className="nav-link" style={{ fontWeight: 500 }} onClick={() => setLang(lang === "es" ? "en" : "es")}>
            {lang === "es" ? "EN" : "ES"}
          </span>
        </div>
        <button className="nav-burger" aria-label="Menu" onClick={() => setOpen(o => !o)}>
          {open ? (
            <svg width="22" height="22" viewBox="0 0 22 22" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
              <path d="M5 5 L17 17 M17 5 L5 17" />
            </svg>
          ) : (
            <svg width="22" height="22" viewBox="0 0 22 22" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
              <path d="M3 7 H19 M3 15 H19" />
            </svg>
          )}
        </button>
      </div>
      <div className="nav-mobile-panel" data-open={open}>
        {links.map(([k, label]) => (
          <span key={k} className={"nav-link" + (page === k ? " active" : "")} onClick={() => onNav(k)}>{label}</span>
        ))}
        <span className="nav-link" style={{ fontWeight: 500 }} onClick={() => { setLang(lang === "es" ? "en" : "es"); setOpen(false); }}>
          {lang === "es" ? "English" : "Español"}
        </span>
      </div>
    </nav>
  );
}

function Ticker({ items }) {
  const list = [...items, ...items, ...items, ...items];
  return (
    <div className="ticker">
      <div className="ticker-track">
        {list.map((s, i) => (
          <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 16 }}>
            <span className="dot" /> {s}
          </span>
        ))}
      </div>
    </div>
  );
}

function Footer({ t, lang }) {
  return (
    <footer className="foot wrap">
      <div className="foot-grid">
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }}>
            <CoyoteMark size={32} color="var(--c-oxblood)" glyphColor="var(--c-ink)" />
            <div className="col" style={{ lineHeight: 1.1 }}>
              <span style={{ fontFamily: "var(--serif)", fontSize: 18 }}>Coyote Emplumado</span>
              <span style={{ fontSize: 9, letterSpacing: ".24em", textTransform: "uppercase", color: "var(--c-ink-3)" }}>Mezcal artesanal · Puebla</span>
            </div>
          </div>
          <p style={{ maxWidth: 320, lineHeight: 1.7, fontFamily: "var(--sans)", fontSize: 12 }}>
            {t([
              "Av. 25 de Agosto 903, Tecali de Herrera, Puebla, México. C.P. 75240. Denominación de Origen Protegida.",
              "Av. 25 de Agosto 903, Tecali de Herrera, Puebla, Mexico. ZIP 75240. Protected Designation of Origin.",
            ])}
          </p>
        </div>
        <div>
          <h4>{t(["Producto", "Product"])}</h4>
          <ul>
            <li>Espadilla</li>
            <li>Papalometl</li>
            <li>Coyote</li>
            <li>{t(["Edición de cosecha", "Harvest release"])}</li>
          </ul>
        </div>
        <div>
          <h4>{t(["Casa", "House"])}</h4>
          <ul>
            <li>{t(["Historia", "Story"])}</li>
            <li>{t(["Proceso", "Process"])}</li>
            <li>{t(["Bitácora", "Journal"])}</li>
            <li>{t(["Visita al palenque", "Palenque visit"])}</li>
          </ul>
        </div>
        <div>
          <h4>{t(["Contacto", "Contact"])}</h4>
          <ul>
            <li>hola@coyoteemplumado.mx</li>
            <li>+52 222 000 0000</li>
            <li>@coyoteemplumado</li>
          </ul>
        </div>
      </div>
      <div className="legal">
        <span>© 2026 Mezcal Coyote Emplumado · Hecho en Puebla</span>
        <span>{t(["“El abuso en el consumo de este producto es nocivo para la salud.”", "“Excessive consumption of this product is harmful to your health.”"])}</span>
      </div>
    </footer>
  );
}

function AgeGate({ onPass }) {
  return (
    <div className="gate">
      <div className="gate-card">
        <CoyoteMark size={56} color="var(--c-paper)" glyphColor="var(--c-rose)" />
        <h2>¿Eres mayor de edad?</h2>
        <p>
          Para entrar a Coyote Emplumado debes tener al menos 18 años.<br />
          You must be of legal drinking age to enter.
        </p>
        <div className="gate-row">
          <button className="btn solid" onClick={onPass}>Sí · Yes</button>
          <button className="btn" onClick={() => location.href = "https://www.google.com"}>No</button>
        </div>
        <p style={{ marginTop: 32, fontSize: 10, letterSpacing: ".18em", textTransform: "uppercase", color: "rgba(245,237,225,.4)" }}>
          El abuso en el consumo de este producto es nocivo para la salud
        </p>
      </div>
    </div>
  );
}

Object.assign(window, { CoyoteMark, Nav, Ticker, Footer, AgeGate });