const DSS = window.ConstruimosTuEdificioDesignSystem_3f039f;
const D_S = window.CTE_DATA;

const SERVICE_CONTENT = {
  "/constructora-de-edificios/": {
    eyebrow: "Constructora de edificios",
    title: "Construimos edificios completos, con un solo responsable de obra",
    subtitle: "Planeación, presupuesto, ingeniería, coordinación, supervisión y entrega de edificios habitacionales, mixtos y corporativos.",
    problem: "Un edificio se encarece cuando el proyecto, la estructura y la obra los llevan equipos que no se hablan.",
    solution: "Integramos las tres disciplinas bajo un mismo programa de obra: el proyecto ejecutivo se revisa contra el presupuesto y contra el calendario antes de romper el primer metro cúbico.",
    bullets: ["Planeación y factibilidad", "Presupuesto y catálogo de conceptos", "Ingeniería y coordinación", "Ejecución y control de calidad", "Supervisión con bitácora", "Entrega y documentación"],
    types: [["Edificios habitacionales", "De 4 a 15 niveles, con o sin planta baja comercial."], ["Edificios mixtos", "Vivienda, oficina y comercio en un mismo predio."], ["Edificios corporativos", "Estructura metálica, claros largos y fachadas ventiladas."], ["Ampliaciones y remodelación", "Intervención sobre estructura existente con dictamen previo."]],
    faqs: [0, 4, 5, 9]
  },
  "/constructora-de-departamentos/": {
    eyebrow: "Constructora de departamentos",
    title: "Desarrollos verticales construidos por etapas y con control de costos",
    subtitle: "Torres de departamentos, conjuntos residenciales y edificios habitacionales, con programa de obra por etapas.",
    problem: "En un desarrollo vertical, cada semana de retraso y cada cambio de proyecto se multiplican por el número de unidades.",
    solution: "Construimos por etapas con entregables definidos, control de costos por partida y reportes semanales, de modo que la comercialización pueda avanzar en paralelo a la obra.",
    bullets: ["Construcción por etapas", "Control de costos por partida", "Programa de obra y ruta crítica", "Calidad de acabados", "Supervisión permanente", "Entrega por unidad"],
    types: [["Torres de departamentos", "Desarrollos de una o varias torres con amenidades."], ["Conjuntos residenciales", "Varios edificios de baja altura sobre un mismo predio."], ["Vivienda vertical media", "Proyectos de 20 a 60 unidades."], ["Departamentos en preventa", "Obra coordinada con el calendario comercial."]],
    faqs: [1, 5, 6, 10]
  },
  "/diseno-de-edificios/": {
    eyebrow: "Diseño de edificios",
    title: "Diseño arquitectónico orientado a normativa y a rentabilidad",
    subtitle: "Anteproyecto y proyecto ejecutivo completo, con distribución, fachadas, ingenierías y cumplimiento normativo.",
    problem: "Un proyecto bonito que no cumple normativa o que desperdicia el terreno se paga durante toda la vida del edificio.",
    solution: "Diseñamos desde el uso de suelo hacia adentro: primero lo que el predio permite, después el programa, y sólo entonces la fachada.",
    bullets: ["Anteproyecto", "Proyecto ejecutivo", "Distribución de espacios", "Diseño de fachadas", "Coordinación de ingenierías", "Revisión normativa"],
    types: [["Uso habitacional", "Optimización de unidades por nivel."], ["Uso mixto", "Accesos y circulaciones independientes."], ["Corporativo", "Plantas libres y núcleos eficientes."], ["Reconversión", "Adecuación de inmuebles existentes."]],
    faqs: [2, 4, 6, 8]
  },
  "/diseno-de-departamentos/": {
    eyebrow: "Diseño de departamentos",
    title: "Distribución funcional pensada para vivir y para vender",
    subtitle: "Diseño residencial vertical: unidades, áreas comunes, circulaciones, estacionamientos y aprovechamiento del terreno.",
    problem: "Los metros mal repartidos se notan en el recorrido de venta antes que en el plano.",
    solution: "Trabajamos la mezcla de unidades contra la demanda de la zona y revisamos cada circulación, cajón y área común en función del costo por m² vendible.",
    bullets: ["Mezcla de unidades", "Áreas comunes y amenidades", "Circulaciones y núcleos", "Estacionamientos", "Aprovechamiento del predio", "Diseño orientado a mercado"],
    types: [["Departamentos tipo", "Prototipos repetibles por nivel."], ["Penthouse y unidades premium", "Doble altura y terrazas."], ["Amenidades", "Roof garden, coworking, gimnasio."], ["Accesibilidad", "Rutas y unidades adaptadas."]],
    faqs: [1, 2, 3, 9]
  },
  "/estructuras-para-edificios/": {
    eyebrow: "Estructuras para edificios",
    title: "Diseño y cálculo estructural con criterio de seguridad y de costo",
    subtitle: "Cimentaciones, estructura de concreto, estructura metálica y sistemas mixtos, con memoria de cálculo firmada.",
    problem: "La estructura es la partida donde más dinero se pierde por sobrediseño y donde menos margen hay para errores.",
    solution: "Calculamos con el sistema estructural que corresponde a la altura, los claros y el suelo del predio, y optimizamos materiales sin tocar los factores de seguridad.",
    bullets: ["Estudio de mecánica de suelos", "Diseño de cimentación", "Cálculo estructural", "Estructura de concreto", "Estructura metálica", "Memoria y planos estructurales"],
    types: [["Cimentación profunda", "Pilotes y pilas en suelos blandos."], ["Concreto reforzado", "Marcos y muros de cortante."], ["Estructura metálica", "Claros largos y montaje rápido."], ["Sistemas mixtos", "Losacero y columnas compuestas."]],
    faqs: [3, 4, 5, 9]
  },
  "/estructuras-para-departamentos/": {
    eyebrow: "Estructuras para departamentos",
    title: "Estructura residencial optimizada en material y en costo",
    subtitle: "Cimentación, losas, columnas, trabes y muros estructurales para desarrollos verticales de vivienda.",
    problem: "En vivienda vertical, cada centímetro de peralte se repite en todos los niveles y en todo el presupuesto.",
    solution: "Ajustamos peraltes, claros y armados al prototipo del edificio, buscando repetibilidad constructiva y ahorro acumulado por nivel.",
    bullets: ["Cimentación residencial", "Diseño de losas", "Columnas y trabes", "Muros estructurales", "Repetibilidad por nivel", "Optimización de acero"],
    types: [["Losa maciza", "Claros cortos y acabado directo."], ["Losa aligerada", "Ahorro de peso en claros medios."], ["Muros de concreto", "Sistema industrializado por niveles."], ["Refuerzo sísmico", "Revisión y dictamen estructural."]],
    faqs: [3, 1, 6, 10]
  }
};

function ServicePage({ route, onNavigate }) {
  const { Button, Icon, SectionHeading, Eyebrow, Figure, Pill } = DSS;
  const c = SERVICE_CONTENT[route] || SERVICE_CONTENT["/constructora-de-edificios/"];
  const faqs = c.faqs.map(i => D_S.faqs[i]);
  return (
    <React.Fragment>
      <PageHero image={D_S.photos.serviceHero} title={c.title} subtitle={c.subtitle}
        crumbs={[{ label: "Inicio", href: "/" }, { label: "Servicios", href: "/#servicios" }, { label: c.eyebrow }]}
        primaryCta={{ label: "Solicitar cotización", href: "/contacto/" }}
        secondaryCta={{ label: "Ver proyectos", href: "/proyectos/" }} />
      <section className="section container reveal">
        <div className="split" style={{ alignItems: "start" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
            <Eyebrow>El problema</Eyebrow>
            <h2 style={{ fontSize: "var(--text-display-s)", letterSpacing: "var(--track-display)" }}>{c.problem}</h2>
            <p style={{ fontSize: "var(--text-md)", lineHeight: "var(--lh-body)", color: "var(--text-muted)" }}>{c.solution}</p>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginTop: 12 }}>
              {c.bullets.map(b => (
                <span key={b} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: "var(--text-sm)", color: "var(--text-body)" }}>
                  <Icon name="check" size={16} color="var(--amber-600)" style={{ marginTop: 3 }} />{b}
                </span>
              ))}
            </div>
          </div>
          <Figure src={D_S.photos.introMain} alt="" ratio="4 / 3.4" caption="FOTO · OBRA" />
        </div>
      </section>
      <ProcessSection />
      <section style={{ background: "var(--surface-inverse)" }}>
        <div className="section container reveal">
          <SectionHeading tone="dark" align="left" eyebrow="Alcance" title="Tipos de proyecto que atendemos" maxWidth={520} />
          <div className="grid g2" style={{ marginTop: 44 }}>
            {c.types.map(([t, d]) => (
              <div key={t} style={{ padding: "26px 28px", borderRadius: "var(--radius-lg)", background: "var(--concrete-800)", border: "1px solid var(--border-inverse)" }}>
                <h3 style={{ fontSize: "var(--text-lg)", color: "var(--text-inverse)", marginBottom: 8 }}>{t}</h3>
                <p style={{ fontSize: "var(--text-sm)", lineHeight: "var(--lh-body)", color: "var(--text-inverse-muted)" }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
      <ProjectsSection onNavigate={onNavigate} />
      <TestimonialsSection />
      <FinalCTA onNavigate={onNavigate} />
      <FaqSection items={faqs} title={"Preguntas sobre " + c.eyebrow.toLowerCase()} />
    </React.Fragment>
  );
}
Object.assign(window, { ServicePage, SERVICE_CONTENT });