/* =====================================================================
   ed-app.jsx — Versión Sell-U Laravel: SOLO el contenido del SPA.
   El Nav y Footer del sitio público (Blade <x-nav /> y <x-footer />)
   los wrapping en cotizador-web.blade.php — aquí solo renderizamos
   la sección hub/categoría/cotizador con hash routing.
   ===================================================================== */
const { useState: useSt, useEffect: useEf } = React;

function useHashRoute() {
  const [hash, setHash] = useSt(() => window.location.hash || "#/");
  useEf(() => {
    const on = () => { setHash(window.location.hash || "#/"); window.scrollTo({ top: 0, behavior: "auto" }); };
    window.addEventListener("hashchange", on);
    return () => window.removeEventListener("hashchange", on);
  }, []);
  return hash;
}

function parseRoute(hash) {
  const path = hash.replace(/^#/, "").replace(/^\//, "");
  const seg = path.split("/").filter(Boolean);
  if (seg.length === 0) return { name: "hub" };
  if (seg[0] === "paginas-web") return { name: "paginas-web" };
  if (seg[0] === "tipo") return { name: "tipo", key: seg[1] };
  if (seg[0] === "plataforma") return { name: "plataforma", key: seg[1] };
  if (seg[0] === "cotizador") return { name: "cotizador", key: seg[1] };
  if (["contenido", "linkedin", "seo", "email"].includes(seg[0])) return { name: seg[0] };
  return { name: "404" };
}

/* ---- Wrapper de cotizador con breadcrumb + volver ---- */
function CotizadorPage({ cfgKey }) {
  const cfg = window.ED.quoters[cfgKey];
  if (!cfg) return <NotFound />;
  const typeLabel = { landing: "Landing Page", ventas: "Página de Ventas", embudo: "Embudo de Ventas" }[cfgKey];
  return (
    <div className="ed-view">
      <div className="ed-container" style={{ paddingTop: 28, paddingBottom: 64, maxWidth: 820 }}>
        <Breadcrumb trail={[{ label: "Ecosistemas Digitales", href: "#/" }, { label: "Páginas Web", href: "#/paginas-web" }, { label: typeLabel + " · Cotizador" }]} />
        <div style={{ marginTop: 20, marginBottom: 28, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <span style={{ width: 40, height: 40, borderRadius: "var(--r-md)", background: "var(--navy-900)", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name={cfg.icon} size={20} color="var(--white)" /></span>
            <div>
              <h1 style={{ fontSize: 22, fontWeight: 600 }}>{cfg.title}</h1>
              <div style={{ fontSize: 13, color: "var(--fg-tertiary)" }}>Estimado en menos de un minuto · sin compromiso</div>
            </div>
          </div>
          <BackBtn href="#/paginas-web" label="Cambiar tipo" />
        </div>
        <Quoter cfgKey={cfgKey} />
      </div>
    </div>
  );
}

/* ---- App ---- */
function App() {
  const hash = useHashRoute();
  const route = parseRoute(hash);
  const [cal, setCal] = useSt(null);

  useEf(() => { window.__edCal = (ctx) => setCal(ctx || "Consulta"); }, []);
  useEf(() => { if (window.lucide) window.lucide.createIcons(); });

  let view;
  switch (route.name) {
    case "hub": view = <Hub />; break;
    case "paginas-web": view = <PaginasWeb />; break;
    case "tipo": view = <TipoView tkey={route.key} />; break;
    case "plataforma": view = <PlatformView pkey={route.key} />; break;
    case "cotizador": view = <CotizadorPage cfgKey={route.key} />; break;
    case "contenido": view = <Contenido />; break;
    case "linkedin": view = <LinkedInView />; break;
    case "seo": view = <SeoView />; break;
    case "email": view = <EmailView />; break;
    default: view = <NotFound />;
  }

  return (
    <div style={{ minHeight: "100vh" }} key={hash}>
      <main>{view}</main>
      <CalendlyModal open={cal !== null} onClose={() => setCal(null)} context={cal} />
    </div>
  );
}

window.EcosistemasApp = App;