const DS = window.ConstruimosTuEdificioDesignSystem_3f039f;
const { Button, Eyebrow, SectionHeading, Stat, Figure, Pill, Icon, ServiceCard, ProjectCard, TeamMember, TestimonialCard, BlogCard, FaqItem, Hero, CTABanner, Breadcrumbs, Field, Input, Select, Textarea, Checkbox, FileDrop } = DS;
const D = window.CTE_DATA;

function TrustStrip() {
  return (
    <div style={{ background: "var(--concrete-950)", borderTop: "1px solid var(--border-inverse)" }}>
      <div className="container" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 32, flexWrap: "wrap", padding: "22px var(--gutter)" }}>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", textTransform: "uppercase", letterSpacing: "var(--track-eyebrow)", color: "var(--text-inverse-faint)" }}>Confían en nosotros propietarios, inversionistas y desarrolladores</span>
        <div style={{ display: "flex", alignItems: "center", gap: 38, flexWrap: "wrap" }}>
          {["Grupo Ventura", "Inmobiliaria Cedral", "Fondo Paralelo 20", "Constructora Andamio", "Patrimonio Norte"].map(n => (
            <span key={n} style={{ fontFamily: "var(--font-display)", fontSize: 15, fontWeight: 600, letterSpacing: "-0.02em", color: "rgba(255,255,255,.42)", whiteSpace: "nowrap" }}>{n}</span>
          ))}
        </div>
      </div>
    </div>
  );
}

function IntroSection({ onNavigate }) {
  return (
    <section className="section container reveal">
      <div className="split" style={{ alignItems: "start" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 22, paddingTop: 8 }}>
          <Eyebrow>Nosotros</Eyebrow>
          <h2 style={{ fontSize: "var(--text-display-m)", lineHeight: "var(--lh-display)", letterSpacing: "var(--track-display)", maxWidth: 520 }}>Construimos proyectos pensados para durar</h2>
          <p style={{ fontSize: "var(--text-md)", lineHeight: "var(--lh-body)", color: "var(--text-muted)", maxWidth: 520 }}>
            Participamos en todas las etapas de un proyecto: planeación, diseño, ingeniería, estructuras, construcción, supervisión y entrega. Esa continuidad permite decidir con información técnica desde el primer día y sostener el presupuesto hasta el cierre de obra.
          </p>
          <p style={{ fontSize: "var(--text-md)", lineHeight: "var(--lh-body)", color: "var(--text-muted)", maxWidth: 520 }}>
            Trabajamos con propietarios de terreno, inversionistas y desarrolladores que necesitan un solo responsable del proyecto, con reportes claros y documentación completa en cada entrega.
          </p>
          <div style={{ marginTop: 6 }}>
            <Button variant="dark" arrow onClick={() => onNavigate && onNavigate("/contacto/")}>Conoce a la empresa</Button>
          </div>
          <div className="stat-row" style={{ display: "flex", columnGap: 0, rowGap: 26, flexWrap: "wrap", marginTop: 26, paddingTop: 26, borderTop: "1px solid var(--border-subtle)" }}>
            {[["15+", "Años de experiencia"], ["100+", "Proyectos"], ["360°", "Desarrollo de proyectos"], ["1:1", "Atención personalizada"]].map(([v, l], i, a) => (
              <div key={v} style={{ paddingRight: 30, marginRight: 30, borderRight: i < a.length - 1 ? "1px solid var(--border-subtle)" : "none" }}>
                <Stat value={v} label={l} size="lg" />
              </div>
            ))}
          </div>
        </div>
        <div className="intro-collage" style={{ display: "grid", gridTemplateColumns: "1.25fr 1fr", gridTemplateRows: "auto auto", gap: "var(--grid-gap)" }}>
          <Figure src={D.photos.introMain} alt="Edificio contemporáneo" ratio="3 / 4" caption="FOTO · EDIFICIO" style={{ gridRow: "span 2" }} />
          <Figure src={D.photos.introA} alt="Planos de proyecto ejecutivo" ratio="4 / 3" caption="FOTO · PLANOS" />
          <Figure src={D.photos.introB} alt="Supervisión en obra" ratio="4 / 3" caption="FOTO · SUPERVISIÓN" />
        </div>
      </div>
    </section>
  );
}

function ServicesSection({ onNavigate }) {
  return (
    <section id="servicios" style={{ background: "var(--surface-inverse)" }}>
      <div className="section container reveal">
        <SectionHeading tone="dark" eyebrow="Nuestros servicios" title="Soluciones integrales para construir tu proyecto" subtitle="Desde el diseño hasta la construcción, desarrollamos soluciones para proyectos residenciales y verticales." />
        <div className="services-grid" style={{ display: "grid", gridTemplateColumns: "0.85fr 1fr 1fr", gap: "var(--grid-gap)", marginTop: 52 }}>
          <div className="services-photo" style={{ gridRow: "span 3" }}>
            <Figure src={D.photos.services} alt="Equipo revisando planos" ratio="3 / 4.4" radius="var(--radius-lg)" caption="FOTO · PROYECTO EJECUTIVO" overlay="linear-gradient(180deg,rgba(11,10,9,0) 40%,rgba(11,10,9,.75) 100%)" style={{ height: "100%" }}>
              <div style={{ position: "absolute", inset: "auto 24px 24px 24px", display: "flex", flexDirection: "column", gap: 10 }}>
                <Pill tone="glass">Servicio integral</Pill>
                <span style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-lg)", fontWeight: 600, letterSpacing: "var(--track-heading)", color: "var(--text-inverse)", lineHeight: 1.25 }}>Un solo equipo responsable del proyecto completo</span>
              </div>
            </Figure>
          </div>
          {D.services.map(s => (
            <ServiceCard key={s.title} icon={s.icon} title={s.title} description={s.desc} href={s.href}
              onClick={e => { if (onNavigate) { e.preventDefault(); onNavigate(s.href); } }} />
          ))}
        </div>
      </div>
    </section>
  );
}

function ProcessSection({ tone = "light" }) {
  const dark = tone === "dark";
  return (
    <section className="section container reveal">
      <SectionHeading align="left" tone={tone} eyebrow="Cómo trabajamos" title="Un proceso ordenado, de la planeación a la entrega" maxWidth={560} />
      <div className="grid g3" style={{ marginTop: 44 }}>
        {D.process.map(p => (
          <div key={p.n} style={{ padding: "26px 0 0", borderTop: "1px solid " + (dark ? "var(--border-inverse)" : "var(--border-default)"), display: "flex", flexDirection: "column", gap: 10 }}>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", letterSpacing: "var(--track-eyebrow)", color: "var(--amber-600)" }}>{p.n}</span>
            <h3 style={{ fontSize: "var(--text-lg)", color: dark ? "var(--text-inverse)" : "var(--text-strong)" }}>{p.title}</h3>
            <p style={{ fontSize: "var(--text-sm)", lineHeight: "var(--lh-body)", color: dark ? "var(--text-inverse-muted)" : "var(--text-muted)" }}>{p.desc}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function ProjectsSection({ onNavigate, limit = 3 }) {
  return (
    <section id="proyectos" style={{ background: "var(--surface-raised)" }}>
      <div className="section container reveal">
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 24, flexWrap: "wrap" }}>
          <SectionHeading align="left" eyebrow="Proyectos" title="Obra construida y proyectos en desarrollo" maxWidth={520} />
          <Button variant="secondary" arrow onClick={() => onNavigate && onNavigate("/proyectos/")}>Ver todos los proyectos</Button>
        </div>
        <div className="grid g3" style={{ marginTop: 48 }}>
          {D.projects.slice(0, limit).map(p => <ProjectCard key={p.name} {...p} description={p.desc} />)}
        </div>
      </div>
    </section>
  );
}

function TeamSection() {
  return (
    <section className="section container reveal">
      <SectionHeading eyebrow="Nuestro equipo" title="El equipo detrás de cada proyecto" subtitle="Arquitectos, ingenieros y supervisores que acompañan el proyecto desde el anteproyecto hasta la entrega." />
      <div className="grid g4" style={{ marginTop: 56 }}>
        {D.team.map(m => <TeamMember key={m.name} {...m} />)}
      </div>
    </section>
  );
}

function OfficeSection() {
  const rows = [
    { icon: "mail", label: "Escríbenos y te respondemos el mismo día", value: "contacto@construimostuedificio.mx" },
    { icon: "phone", label: "Lunes a viernes de 9:00 a 18:00 h", value: "+52 55 1234 5678" },
    { icon: "map-pin", label: "Oficina · agenda tu visita", value: "Av. Reforma 1290, Piso 8, Cuauhtémoc, CDMX" }
  ];
  return (
    <section style={{ position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, backgroundImage: "linear-gradient(180deg,rgba(11,10,9,.55),rgba(11,10,9,.68)),url(" + D.photos.office + ")", backgroundSize: "cover", backgroundPosition: "center" }}></div>
      <div className="section container reveal" style={{ position: "relative" }}>
        <div className="office-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1.05fr", gap: "var(--grid-gap)", alignItems: "stretch" }}>
          <div style={{ background: "var(--surface-card)", borderRadius: "var(--radius-xl)", padding: "clamp(28px,3vw,44px)", boxShadow: "var(--shadow-float)", display: "flex", flexDirection: "column", gap: 20 }}>
            <Eyebrow>Visita nuestra oficina</Eyebrow>
            <h2 style={{ fontSize: "var(--text-display-s)", letterSpacing: "var(--track-display)" }}>Del anteproyecto a la primera cimbra, empieza con una conversación</h2>
            <p style={{ fontSize: "var(--text-sm)", lineHeight: "var(--lh-body)", color: "var(--text-muted)" }}>Cuéntanos qué tienes en mente: un terreno, un proyecto en papel o una obra detenida. Escuchamos primero y luego proponemos.</p>
            <div style={{ display: "flex", flexDirection: "column", gap: 12, marginTop: 4 }}>
              {rows.map(r => (
                <div key={r.icon} style={{ display: "flex", gap: 14, alignItems: "center", padding: "14px 16px", borderRadius: "var(--radius-md)", border: "1px solid var(--border-subtle)", background: "var(--concrete-50)" }}>
                  <span style={{ display: "grid", placeItems: "center", width: 38, height: 38, flex: "none", borderRadius: "var(--radius-sm)", background: "var(--concrete-0)", boxShadow: "var(--shadow-xs)", color: "var(--amber-600)" }}><Icon name={r.icon} size={17} /></span>
                  <span style={{ display: "flex", flexDirection: "column", gap: 2 }}>
                    <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", textTransform: "uppercase", letterSpacing: "var(--track-eyebrow)", color: "var(--text-faint)" }}>{r.label}</span>
                    <span style={{ fontSize: "var(--text-sm)", fontWeight: "var(--weight-medium)", color: "var(--text-strong)" }}>{r.value}</span>
                  </span>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 6 }}><Button variant="primary" size="lg" arrow>Agenda una consulta</Button></div>
          </div>
          <div style={{ position: "relative", borderRadius: "var(--radius-xl)", overflow: "hidden", minHeight: 420, background: "var(--concrete-100)", boxShadow: "var(--shadow-float)" }}>
            <div style={{ position: "absolute", inset: 0, backgroundImage: "linear-gradient(rgba(20,19,17,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(20,19,17,.06) 1px,transparent 1px)", backgroundSize: "34px 34px" }}></div>
            <div style={{ position: "absolute", inset: 0, background: "linear-gradient(140deg,var(--concrete-100),var(--concrete-200))", opacity: .55 }}></div>
            <div style={{ position: "absolute", left: "22%", top: 0, bottom: 0, width: 26, background: "var(--concrete-0)", transform: "rotate(9deg)" }}></div>
            <div style={{ position: "absolute", left: 0, right: 0, top: "58%", height: 34, background: "var(--concrete-0)", transform: "rotate(-4deg)" }}></div>
            <div style={{ position: "absolute", left: "48%", top: "44%", transform: "translate(-50%,-100%)", display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
              <span style={{ display: "grid", placeItems: "center", width: 44, height: 44, borderRadius: "var(--radius-pill)", background: "var(--accent)", color: "#fff", boxShadow: "var(--shadow-md)" }}><Icon name="map-pin" size={20} /></span>
              <span style={{ padding: "6px 12px", borderRadius: "var(--radius-pill)", background: "var(--concrete-0)", boxShadow: "var(--shadow-sm)", fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", textTransform: "uppercase", letterSpacing: "var(--track-eyebrow)" }}>Oficina CDMX</span>
            </div>
            <span style={{ position: "absolute", left: 20, bottom: 18, fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", textTransform: "uppercase", letterSpacing: "var(--track-eyebrow)", color: "var(--text-faint)" }}>Espacio reservado para Google Maps</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function TestimonialsSection() {
  const [featured, ...rest] = D.testimonials;
  return (
    <section style={{ background: "var(--surface-page)" }}>
      <div className="section container reveal">
        <SectionHeading eyebrow="Testimonios" title="Lo que nuestros clientes dicen" subtitle="Comentarios de propietarios, inversionistas y desarrolladores con los que hemos trabajado." />
        <div style={{ maxWidth: 720, margin: "48px auto 0" }}><TestimonialCard {...featured} /></div>
        <div className="grid g4" style={{ marginTop: "var(--grid-gap)" }}>
          {rest.map(t => <TestimonialCard key={t.author} {...t} />)}
        </div>
      </div>
    </section>
  );
}

function FaqSection({ items, title = "Preguntas frecuentes sobre construcción y desarrollo", limit }) {
  const list = (items || D.faqs).slice(0, limit || undefined);
  return (
    <section id="faq" style={{ background: "var(--surface-page)" }}>
      <div className="section container-narrow reveal">
        <SectionHeading eyebrow="Preguntas frecuentes" title={title} subtitle="Si no encuentras tu respuesta aquí, escríbenos: contestamos con criterio técnico, no con promesas." />
        <div style={{ maxWidth: 860, margin: "48px auto 0", background: "var(--surface-card)", borderRadius: "var(--radius-xl)", border: "1px solid var(--border-subtle)", boxShadow: "var(--shadow-sm)", padding: "10px clamp(20px,3vw,40px)" }}>
          {list.map((f, i) => <FaqItem key={f.q} question={f.q} answer={f.a} defaultOpen={i === 0} style={i === list.length - 1 ? { borderBottom: "none" } : undefined} />)}
        </div>
      </div>
    </section>
  );
}

function PageHero({ image, eyebrow, title, subtitle, crumbs, primaryCta, secondaryCta, stats }) {
  return (
    <Hero image={image} height="min(70vh,620px)" title={title} subtitle={subtitle} stats={stats}
      primaryCta={primaryCta} secondaryCta={secondaryCta}
      overlay="linear-gradient(90deg,rgba(11,10,9,.90) 0%,rgba(11,10,9,.74) 45%,rgba(11,10,9,.38) 100%)">
      {crumbs ? <div style={{ order: -1 }}><Breadcrumbs tone="dark" items={crumbs} /></div> : null}
      {eyebrow ? <div style={{ order: -1 }}><Eyebrow tone="dark">{eyebrow}</Eyebrow></div> : null}
    </Hero>
  );
}

function FinalCTA({ onNavigate }) {
  return (
    <CTABanner image={D.photos.cta}
      title="¿Listo para construir tu próximo proyecto?"
      text="Cuéntanos qué tienes en mente y nuestro equipo analizará contigo la mejor manera de llevarlo a cabo."
      primaryCta={{ label: "Hablar con un especialista", href: "/contacto/" }}
      secondaryCta={{ label: "Solicitar cotización", href: "/contacto/" }}
      note="Respuesta en menos de 24 h hábiles · +52 55 1234 5678" />
  );
}

Object.assign(window, { TrustStrip, IntroSection, ServicesSection, ProcessSection, ProjectsSection, TeamSection, OfficeSection, TestimonialsSection, FaqSection, PageHero, FinalCTA, DS_CTE: DS });