/* global React, ReactDOM, useReveal, Header, NAV, FloatingWA,
   Hero, OfficialChannels, About, Lines, Specimens, Pricing, Process,
   ShipMap, Dynamics, Care, Legal, Faq, Blog, Contact, Footer, EjemplarModal */
const { useState: useSP } = React;

/* Tarjetas de navegación del home (cuida la home: enlaza a páginas) */
const SECTION_CARDS = [
  ["Ejemplares disponibles", "Catálogo con líneas, edades y disponibilidad.", "ejemplares.html", "M4 7h16M4 12h16M4 17h10"],
  ["Lista de precios 2026", "Precios oficiales en MXN. No incluyen envío.", "precios.html", "M12 3v18M7 7h7a3 3 0 0 1 0 6H7m0 0h8"],
  ["Líneas disponibles", "Dos sangres y líneas puras seleccionadas.", "lineas.html", "M6 3v12a3 3 0 0 0 6 0V7a3 3 0 0 1 6 0v12"],
  ["Proceso de compra", "Seis pasos claros, directos y seguros.", "proceso.html", "M5 12l4 4L19 6"],
  ["Mapa de envíos", "Cobertura por ruta y conexión aérea.", "envios.html", "M9 3 3 6v15l6-3 6 3 6-3V3l-6 3-6-3Zm0 0v15m6-12v15"],
  ["Dinámicas oficiales", "Grilla 00–99 y reglas transparentes.", "dinamicas.html", "M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z"],
  ["Crianza y cuidado", "Cómo trabajamos cada ejemplar.", "crianza.html", "M12 3l8 4v5c0 4-3.5 7.5-8 9-4.5-1.5-8-5-8-9V7l8-4Z"],
  ["Legalidad informativa", "Operación responsable y orientación.", "legalidad.html", "M12 3l8 4v5c0 4-3.5 7.5-8 9-4.5-1.5-8-5-8-9V7l8-4ZM12 8v5M12 16h.01"],
  ["Guías del rancho", "Información para compradores y seguidores.", "blog.html", "M5 4h11l3 3v13H5zM9 9h7M9 13h7M9 17h4"],
  ["Contacto oficial", "Atención directa por canales verificados.", "contacto.html", "M4 5h16v14H4zM4 7l8 6 8-6"],
];

function SectionsNav() {
  return (
    <section className="section-pad wood" id="secciones">
      <div className="wrap">
        <div className="heading center reveal">
          <p className="eyebrow">Explora el rancho</p>
          <h2 className="gold-text heading-title">Todo Rancho La Vega</h2>
          <span className="heading-rule" />
        </div>
        <div className="snav-grid reveal">
          {SECTION_CARDS.map(([t, d, href, icon]) => (
            <a className="snav-card" href={href} key={href}>
              <span className="snav-ico">
                <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d={icon} /></svg>
              </span>
              <span className="snav-text">
                <strong>{t}</strong>
                <em>{d}</em>
              </span>
              <span className="snav-arrow">→</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* Migas para subpáginas */
function Breadcrumb({ label }) {
  return (
    <div className="breadcrumb">
      <div className="wrap">
        <a href="Rancho%20La%20Vega.html">Inicio</a>
        <span className="bc-sep">›</span>
        <span className="bc-cur">{label}</span>
      </div>
    </div>
  );
}

const PAGE_LABEL = {
  rancho: "Rancho La Vega", ejemplares: "Ejemplares", precios: "Lista de precios",
  lineas: "Líneas disponibles", proceso: "Proceso de compra", envios: "Mapa de envíos",
  dinamicas: "Dinámicas", crianza: "Crianza y cuidado", legalidad: "Legalidad", blog: "Guías", contacto: "Contacto",
};

function PageApp() {
  const root = document.getElementById("root");
  const page = root.dataset.page || "home";
  const [spec, setSpec] = useSP(null);
  useReveal();

  let body;
  switch (page) {
    case "home": body = <React.Fragment><Hero /><OfficialChannels /><About /><SectionsNav /></React.Fragment>; break;
    case "rancho": body = <React.Fragment><About /><Care /></React.Fragment>; break;
    case "ejemplares": body = <Specimens onSelect={setSpec} />; break;
    case "precios": body = <Pricing />; break;
    case "lineas": body = <Lines />; break;
    case "proceso": body = <Process />; break;
    case "envios": body = <ShipMap />; break;
    case "dinamicas": body = <Dynamics />; break;
    case "crianza": body = <Care />; break;
    case "legalidad": body = <Legal />; break;
    case "blog": body = <Blog />; break;
    case "contacto": body = <React.Fragment><Contact /><Faq /></React.Fragment>; break;
    default: body = <Hero />;
  }

  return (
    <React.Fragment>
      <Header />
      {page !== "home" && <Breadcrumb label={PAGE_LABEL[page] || ""} />}
      {body}
      <Footer />
      <FloatingWA />
      <EjemplarModal spec={spec} onClose={() => setSpec(null)} />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<PageApp />);