// sections-b.jsx — remaining sections: editorial system, stationery, web mockup, claim.

// ────────────────────────────────────────────────────────────────────────────
// 05 — SISTEMA EDITORIAL
// ────────────────────────────────────────────────────────────────────────────

function EditorialSection({ density }) {
  // density: 'minima' | 'media' | 'rica'
  const showRich = density === "rica";
  const showAny = density !== "minima";

  return (
    <section className="sec" id="editorial" data-screen-label="05 Editorial">
      <SecHead num="05" kicker="Sistema editorial" title="Fichas técnicas de proyecto."
        lede="Cada promoción se presenta con rigor técnico: ficha, datos, certificaciones. Sin decoración, solo información útil para inversor y comprador."
      />

      {/* Aplicación 1 — Ficha técnica de promoción */}
      <div style={{ display: "grid", gridTemplateColumns: "180px 1fr", gap: 32, alignItems: "start", marginBottom: 64 }}>
        <div>
          <div className="mono">Aplicación 01</div>
          <div style={{ fontFamily: "var(--f-serif)", fontSize: 18, fontStyle: "italic", color: "var(--verde)", marginTop: 8, fontWeight: 300 }}>
            Ficha técnica de promoción
          </div>
        </div>
        <div style={{ background: "#fff", border: "1px solid var(--linea-soft)", borderRadius: 6, padding: 40 }}>
          <div style={{ display: "flex", gap: 32, alignItems: "flex-start" }}>
            <PCell num="01" sym="Te" mass="MAD·24" name="ALCALÁ 138" group="I" size={1.4} />
            <div>
              <div className="mono">Promoción · vivienda colectiva</div>
              <div style={{ fontFamily: "var(--f-main)", fontWeight: 700, fontSize: 38, letterSpacing: -1, color: "var(--carbon)", marginTop: 8, lineHeight: 1 }}>
                Residencial Alcalá 138
              </div>
              <div style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 300, fontSize: 18, color: "var(--verde)", marginTop: 12, maxWidth: "52ch" }}>
                Cuarenta y dos viviendas de obra nueva en el corazón del barrio de Salamanca, Madrid.
              </div>
            </div>
          </div>
          <div style={{ borderTop: "1px solid var(--linea-soft)", marginTop: 32, paddingTop: 24, display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 20 }}>
            {[
              ["UNIDADES","42"],
              ["TIPOLOGÍA","2–4 dorm."],
              ["SUPERFICIE","85–240 m²"],
              ["SELLO","BREEAM Very Good"],
              ["ENTREGA","Q4 2027"],
            ].map(([k,v]) => (
              <div key={k}>
                <div className="mono" style={{ fontSize: 9 }}>{k}</div>
                <div style={{ fontFamily: "var(--f-main)", fontWeight: 600, fontSize: 16, color: "var(--carbon)", marginTop: 6 }}>{v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Aplicación 2 — Cifras destacadas (KPI cards usando fichas) */}
      {showAny && (
        <div style={{ display: "grid", gridTemplateColumns: "180px 1fr", gap: 32, alignItems: "start", marginBottom: 64 }}>
          <div>
            <div className="mono">Aplicación 02</div>
            <div style={{ fontFamily: "var(--f-serif)", fontSize: 18, fontStyle: "italic", color: "var(--verde)", marginTop: 8, fontWeight: 300 }}>
              Cifras de compañía
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
            {[
              { num:"01", sym:"€420M", mass:"GAV", name:"BAJO GESTIÓN" },
              { num:"02", sym:"1.240", mass:"VIVIENDAS", name:"EN CARTERA" },
              { num:"03",  sym:"7",     mass:"HOTELES", name:"4★ / 5★" },
              { num:"04", sym:"100%",  mass:"BREEAM",  name:"NUEVA OBRA" },
            ].map((k) => (
              <div key={k.sym} style={{ background: "var(--piedra)", border: "1px solid var(--linea-soft)", borderRadius: 6, padding: 24, position: "relative", minHeight: 200 }}>
                <div style={{ display: "flex", justifyContent: "space-between", fontFamily: "var(--f-mono)", fontSize: 10, color: "var(--gris)", letterSpacing: 1.5 }}>
                  <span>{k.num}</span>
                  <span>{k.mass}</span>
                </div>
                <div style={{ height: 1, background: "var(--verde)", opacity: .4, margin: "8px 0 24px" }} />
                <div style={{ fontFamily: "var(--f-main)", fontWeight: 700, fontSize: 36, color: "var(--verde)", letterSpacing: -1, lineHeight: 1 }}>{k.sym}</div>
                <div className="mono" style={{ marginTop: 14, color: "var(--carbon)" }}>{k.name}</div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Aplicación 3 — Numeración editorial */}
      {showRich && (
        <div style={{ display: "grid", gridTemplateColumns: "180px 1fr", gap: 32, alignItems: "start" }}>
          <div>
            <div className="mono">Aplicación 03</div>
            <div style={{ fontFamily: "var(--f-serif)", fontSize: 18, fontStyle: "italic", color: "var(--verde)", marginTop: 8, fontWeight: 300 }}>
              Numeración de capítulos
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 24 }}>
            {[
              { n: "01", t: "Compromiso ambiental", body: "Todos los proyectos certificados BREEAM o LEED desde su fase de diseño." },
              { n: "02", t: "Calidad como método", body: "Auditoría externa en cada hito constructivo. Materiales con trazabilidad." },
              { n: "03", t: "Relación con el inversor", body: "Reporting trimestral. Acceso al portal del propietario en tiempo real." },
            ].map((c) => (
              <article key={c.n} style={{ background: "#fff", border: "1px solid var(--linea-soft)", borderRadius: 6, padding: 28, position: "relative" }}>
                <div style={{ position: "absolute", top: 18, right: 18, width: 40, height: 40, border: "1.5px solid var(--verde)", borderRadius: 3, display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <div style={{ fontFamily: "var(--f-mono)", fontSize: 16, fontWeight: 600, color: "var(--verde)" }}>{c.n}</div>
                </div>
                <div className="mono" style={{ marginTop: 2 }}>Capítulo · {c.n}</div>
                <h3 style={{ fontFamily: "var(--f-main)", fontWeight: 700, fontSize: 22, color: "var(--carbon)", margin: "12px 0 10px", letterSpacing: -.3, maxWidth: "14ch" }}>{c.t}</h3>
                <p style={{ fontSize: 14, lineHeight: 1.6, color: "var(--carbon)", margin: 0, maxWidth: "32ch" }}>{c.body}</p>
              </article>
            ))}
          </div>
        </div>
      )}
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// 06 — PAPELERÍA
// ────────────────────────────────────────────────────────────────────────────

function StationerySection({ route = "estrella" }) {
  return (
    <section className="sec" id="papeleria" data-screen-label="06 Papelería" style={{ background: "var(--piedra)" }}>
      <SecHead num="06" kicker="Aplicaciones · papelería" title="Papelería corporativa."
        lede="Sobre fondo piedra, el logotipo respira. La papelería rehúye el negro: usa carbón solo para tipografía y reserva el verde bosque para sellos, filetes y datos clave."
      />

      {/* Tarjetas */}
      <div className="mono" style={{ marginBottom: 18 }}>Tarjeta personal · 85 × 55 mm · anverso / reverso</div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, marginBottom: 64 }}>
        {/* Anverso */}
        <BusinessCard side="front" route={route} />
        {/* Reverso */}
        <BusinessCard side="back" route={route} />
      </div>

      {/* Membrete + sobre */}
      <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 32, marginBottom: 64 }}>
        <div>
          <div className="mono" style={{ marginBottom: 18 }}>Membrete · DIN A4 · 210 × 297 mm</div>
          <Letterhead route={route} />
        </div>
        <div>
          <div className="mono" style={{ marginBottom: 18 }}>Sobre americano · 220 × 110 mm</div>
          <Envelope route={route} />
        </div>
      </div>

      {/* Firma email */}
      <div className="mono" style={{ marginBottom: 18 }}>Firma de correo electrónico · 540 × 180 px</div>
      <EmailSignature route={route} />
    </section>
  );
}

function BusinessCard({ side, route = "estrella" }) {
  if (side === "front") {
    return (
      <div style={{ aspectRatio: "85/55", background: "#FFFFFF", border: "1px solid var(--linea-soft)", borderRadius: 6, padding: 26, display: "flex", flexDirection: "column", justifyContent: "space-between", position: "relative", boxShadow: "0 30px 60px -30px rgba(45,74,62,.18)" }}>
        <div style={{ position: "absolute", top: 0, left: 26, right: 26, height: 3, background: "var(--verde)" }} />
        <div style={{ display: "flex", gap: 18, alignItems: "flex-start", marginTop: 8 }}>
          <MiniMark size={56} color="#2D4A3E" textColor="#1A1F1C" route={route} showWordmark={false} />
          <div style={{ paddingTop: 4 }}>
            <div className="mono" style={{ fontSize: 9, color: "var(--gris)" }}>GRUPO</div>
            <div style={{ fontFamily: "var(--f-main)", fontWeight: 700, fontSize: 22, letterSpacing: 2, color: "var(--carbon)", lineHeight: 1 }}>TÉRREO</div>
            <div className="mono" style={{ fontSize: 7.5, color: "var(--gris)", marginTop: 5, letterSpacing: 2 }}>INNOVACIÓN RESPONSABLE</div>
          </div>
        </div>
        <div>
          <div style={{ fontFamily: "var(--f-main)", fontWeight: 600, fontSize: 17, color: "var(--carbon)" }}>David Santirso</div>
          <div style={{ fontFamily: "var(--f-mono)", fontSize: 10, color: "var(--verde)", letterSpacing: 1.5, marginTop: 4 }}>FUNDADOR · CEO</div>
          <div style={{ borderTop: "1px dashed var(--linea)", marginTop: 14, paddingTop: 10, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6, fontFamily: "var(--f-mono)", fontSize: 10, color: "var(--carbon)" }}>
            <div>david.santirso@ksanet.es</div>
            <div>+34 600 00 00 00</div>
            <div>grupotereo.es</div>
            <div>Madrid · Marbella</div>
          </div>
        </div>
      </div>
    );
  }
  return (
    <div style={{ aspectRatio: "85/55", background: "#2D4A3E", borderRadius: 6, padding: 0, display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", position: "relative", overflow: "hidden", boxShadow: "0 30px 60px -30px rgba(45,74,62,.4)" }}>
      <div style={{ position: "absolute", inset: 14, border: "1px solid rgba(200,184,154,.25)", borderRadius: 3 }} />
      <div style={{ position: "absolute", top: 18, left: 24, right: 24, display: "flex", justifyContent: "space-between", fontFamily: "var(--f-mono)", fontSize: 9, color: "rgba(200,184,154,.6)", letterSpacing: 2 }}>
        <span>GRUPO TÉRREO</span>
        <span>EST. 2026</span>
      </div>
      <LogoMark route={route} size={108} color="#EAE5DC" />
      <div className="mono" style={{ color: "#C8B89A", marginTop: 12, letterSpacing: 3 }}>TÉRREO</div>
      <div style={{ position: "absolute", bottom: 16, left: 24, right: 24, display: "flex", justifyContent: "space-between", fontFamily: "var(--f-mono)", fontSize: 9, color: "rgba(200,184,154,.6)", letterSpacing: 2 }}>
        <span>grupotereo.es</span>
        <span>MADRID</span>
      </div>
    </div>
  );
}

function Letterhead({ route = "estrella" }) {
  return (
    <div style={{ aspectRatio: "210/297", background: "#FFFFFF", border: "1px solid var(--linea-soft)", borderRadius: 4, padding: "28px 32px 32px", position: "relative", boxShadow: "0 40px 80px -40px rgba(45,74,62,.18)" }}>
      {/* top rule */}
      <div style={{ position: "absolute", top: 0, left: 32, right: 32, height: 2, background: "var(--verde)" }} />
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
        <div style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
          <MiniMark size={36} route={route} showWordmark={false} />
          <div style={{ paddingTop: 4 }}>
            <div className="mono" style={{ fontSize: 7 }}>GRUPO</div>
            <div style={{ fontFamily: "var(--f-main)", fontWeight: 700, fontSize: 14, letterSpacing: 2, color: "var(--carbon)", lineHeight: 1 }}>TÉRREO</div>
            <div className="mono" style={{ fontSize: 5.5, marginTop: 3, letterSpacing: 2 }}>INNOVACIÓN RESPONSABLE</div>
          </div>
        </div>
        <div style={{ textAlign: "right", fontFamily: "var(--f-mono)", fontSize: 7, color: "var(--gris)", letterSpacing: 1, lineHeight: 1.7 }}>
          C/ Serrano 88 · 28006 Madrid<br />
          +34 91 000 00 00 · grupotereo.es
        </div>
      </div>

      <div style={{ marginTop: 56, fontFamily: "var(--f-mono)", fontSize: 7, color: "var(--gris)", letterSpacing: 1 }}>
        Madrid, a 15 de mayo de 2026
      </div>
      <div style={{ marginTop: 32, fontFamily: "var(--f-main)", fontSize: 9, color: "var(--carbon)" }}>
        Estimado/a inversor/a,
      </div>
      <div style={{ marginTop: 12, fontFamily: "var(--f-main)", fontSize: 8.5, color: "var(--carbon)", lineHeight: 1.7, columnFill: "balance" }}>
        Le adjuntamos la memoria correspondiente al ejercicio anterior, así como el detalle de las
        nuevas promociones incorporadas a la cartera de Grupo Térreo durante el primer trimestre de 2026.
        <br /><br />
        Las cifras consolidadas reflejan el cumplimiento del plan a tres años en términos de crecimiento
        de activos bajo gestión, así como la certificación BREEAM en la totalidad de los proyectos de
        obra nueva entregados durante el periodo.
        <br /><br />
        Quedamos a su disposición para cuanto considere oportuno.
      </div>

      <div style={{ marginTop: 28, fontFamily: "var(--f-main)", fontSize: 9, color: "var(--carbon)" }}>
        Atentamente,
      </div>
      <div style={{ marginTop: 24, fontFamily: "var(--f-main)", fontWeight: 600, fontSize: 9, color: "var(--carbon)" }}>
        David Santirso
      </div>
      <div className="mono" style={{ fontSize: 6.5, marginTop: 2 }}>FUNDADOR · CEO</div>

      {/* bottom periodic ribbon */}
      <div style={{ position: "absolute", bottom: 20, left: 32, right: 32, display: "flex", justifyContent: "space-between", alignItems: "center", fontFamily: "var(--f-mono)", fontSize: 6, color: "var(--gris)", letterSpacing: 2 }}>
        <span>Pág. 01 / 01</span>
      </div>
    </div>
  );
}

function Envelope({ route = "estrella" }) {
  return (
    <div style={{ aspectRatio: "220/110", background: "#FFFFFF", border: "1px solid var(--linea-soft)", borderRadius: 4, padding: 22, position: "relative", boxShadow: "0 30px 60px -30px rgba(45,74,62,.18)" }}>
      <div style={{ position: "absolute", top: 0, left: 22, right: 22, height: 2, background: "var(--verde)" }} />
      <div style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
        <MiniMark size={32} route={route} showWordmark={false} />
        <div style={{ paddingTop: 4 }}>
          <div className="mono" style={{ fontSize: 6 }}>GRUPO</div>
          <div style={{ fontFamily: "var(--f-main)", fontWeight: 700, fontSize: 12, letterSpacing: 2, color: "var(--carbon)", lineHeight: 1 }}>TÉRREO</div>
        </div>
      </div>
      <div style={{ position: "absolute", left: 22, bottom: 16, fontFamily: "var(--f-mono)", fontSize: 7, color: "var(--gris)", letterSpacing: 1, lineHeight: 1.7 }}>
        C/ Serrano 88 · 28006 Madrid<br />
        grupotereo.es
      </div>
      <div style={{ position: "absolute", right: 22, top: 22, width: 56, height: 28, border: "1px dashed var(--linea)", borderRadius: 2 }} />
    </div>
  );
}

function EmailSignature({ route = "estrella" }) {
  return (
    <div style={{ background: "#fff", border: "1px solid var(--linea-soft)", borderRadius: 8, padding: 28, maxWidth: 720, display: "flex", gap: 22, alignItems: "stretch", boxShadow: "0 20px 40px -30px rgba(45,74,62,.15)" }}>
      <MiniMark size={72} route={route} />
      <div style={{ borderLeft: "1px solid var(--linea)", paddingLeft: 22 }}>
        <div style={{ fontFamily: "var(--f-main)", fontWeight: 600, fontSize: 16, color: "var(--carbon)" }}>David Santirso</div>
        <div className="mono" style={{ fontSize: 10, color: "var(--verde)", marginTop: 2 }}>FUNDADOR · CEO</div>
        <div style={{ height: 1, background: "var(--linea-soft)", margin: "10px 0" }} />
        <div style={{ fontFamily: "var(--f-mono)", fontSize: 11, color: "var(--carbon)", letterSpacing: .5, lineHeight: 1.7 }}>
          <div>Grupo Térreo · Promotora Inmobiliaria</div>
          <div style={{ color: "var(--gris)" }}>C/ Serrano 88 · 28006 Madrid</div>
          <div style={{ marginTop: 6 }}>
            <a href="mailto:david.santirso@ksanet.es" style={{ color: "var(--verde)" }}>david.santirso@ksanet.es</a>
            <span style={{ color: "var(--gris)" }}> &nbsp;·&nbsp; +34 600 00 00 00</span>
          </div>
          <div><a href="#" style={{ color: "var(--verde)" }}>grupotereo.es</a></div>
        </div>
        <div style={{ display: "flex", gap: 10, marginTop: 14, alignItems: "center" }}>
          <span style={{ display: "inline-block", padding: "3px 9px", border: "1px solid var(--verde)", borderRadius: 3, fontFamily: "var(--f-main)", fontSize: 9, fontWeight: 700, color: "var(--verde)", letterSpacing: 1 }}>BREEAM</span>
          <span style={{ display: "inline-block", padding: "3px 9px", border: "1px solid var(--verde)", borderRadius: 3, fontFamily: "var(--f-main)", fontSize: 9, fontWeight: 700, color: "var(--verde)", letterSpacing: 1 }}>LEED</span>
          <span className="mono" style={{ fontSize: 8 }}>Construcción de máxima calidad y sostenibilidad</span>
        </div>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// 07 — WEB MOCKUP
// ────────────────────────────────────────────────────────────────────────────

function WebSection({ density, route = "estrella" }) {
  return (
    <section className="sec" id="web" data-screen-label="07 Web">
      <SecHead num="07" kicker="Aplicaciones · digital" title="Web corporativa."
        lede="La presencia digital traduce el sistema editorial a pantalla. Tipografía generosa, fotografía de arquitectura a sangre, datos en monoespaciada. Ningún elemento decorativo."
      />

      <div className="mono" style={{ marginBottom: 16 }}>grupotereo.es · página inicio · 1440 × 900</div>

      <div style={{ background: "#FFFFFF", borderRadius: 10, padding: 0, overflow: "hidden", boxShadow: "0 40px 80px -40px rgba(45,74,62,.25)", border: "1px solid var(--linea-soft)" }}>
        {/* Browser chrome */}
        <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "10px 14px", background: "#F7F6F3", borderBottom: "1px solid var(--linea-soft)" }}>
          <span style={{ width: 10, height: 10, borderRadius: 5, background: "#E07A5F" }} />
          <span style={{ width: 10, height: 10, borderRadius: 5, background: "#E0C16F" }} />
          <span style={{ width: 10, height: 10, borderRadius: 5, background: "#81B29A" }} />
          <div style={{ flex: 1, marginLeft: 16, height: 22, borderRadius: 4, background: "#FFFFFF", border: "1px solid var(--linea-soft)", display: "flex", alignItems: "center", padding: "0 12px", fontFamily: "var(--f-mono)", fontSize: 10, color: "var(--gris)" }}>
            grupotereo.es
          </div>
        </div>

        {/* Nav */}
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "20px 40px", borderBottom: "1px solid var(--linea-soft)" }}>
          <div style={{ display: "flex", gap: 14, alignItems: "center" }}>
            <MiniMark size={32} route={route} showWordmark={false} />
            <div>
              <div className="mono" style={{ fontSize: 7 }}>GRUPO</div>
              <div style={{ fontFamily: "var(--f-main)", fontWeight: 700, fontSize: 13, letterSpacing: 2, color: "var(--carbon)" }}>TÉRREO</div>
            </div>
          </div>
          <nav style={{ display: "flex", gap: 28, fontFamily: "var(--f-main)", fontSize: 12, color: "var(--carbon)" }}>
            <span style={{ color: "var(--verde)", fontWeight: 600 }}>Inicio</span>
            <span>Promociones</span>
            <span>Hoteles</span>
            <span>Compromiso</span>
            <span>Inversores</span>
            <span>Contacto</span>
          </nav>
          <div style={{ padding: "8px 16px", border: "1px solid var(--verde)", borderRadius: 999, fontFamily: "var(--f-main)", fontSize: 11, fontWeight: 600, color: "var(--verde)", letterSpacing: 1 }}>
            Portal del propietario →
          </div>
        </div>

        {/* Hero */}
        <div style={{ padding: "60px 40px 40px", display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 40, alignItems: "end" }}>
          <div>
            <div className="mono" style={{ marginBottom: 18 }}>Grupo Térreo · Innovación responsable</div>
            <h1 style={{ fontFamily: "var(--f-main)", fontWeight: 200, fontSize: 64, lineHeight: .98, letterSpacing: "-.04em", color: "var(--carbon)", margin: 0 }}>
              Construimos<br /><b style={{ fontWeight: 700, letterSpacing: "-.045em" }}>lo permanente.</b>
            </h1>
            <p style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 300, fontSize: 17, color: "var(--verde)", marginTop: 22, maxWidth: "44ch" }}>
              Vivienda y hotelería de alta gama en España. Certificación BREEAM y LEED en cada proyecto. Reporting transparente al inversor.
            </p>
            <div style={{ display: "flex", gap: 10, marginTop: 26 }}>
              <span style={{ padding: "10px 18px", background: "var(--verde)", color: "var(--piedra)", borderRadius: 999, fontFamily: "var(--f-main)", fontSize: 12, fontWeight: 600, letterSpacing: 1 }}>Ver promociones →</span>
              <span style={{ padding: "10px 18px", border: "1px solid var(--verde)", color: "var(--verde)", borderRadius: 999, fontFamily: "var(--f-main)", fontSize: 12, fontWeight: 600, letterSpacing: 1 }}>Portfolio para inversores</span>
            </div>
          </div>
          {/* Hero image placeholder — architecture render */}
          <div style={{ aspectRatio: "5 / 6", borderRadius: 6, position: "relative", overflow: "hidden", background: "linear-gradient(180deg, #d8cdb2 0%, #C8B89A 40%, #b5a481 100%)" }}>
            <ArchSilhouette />
            <div style={{ position: "absolute", top: 16, left: 16, right: 16, display: "flex", justifyContent: "space-between", fontFamily: "var(--f-mono)", fontSize: 10, color: "rgba(45,74,62,.7)", letterSpacing: 2 }}>
              <span>01 / 06</span>
              <span>RESIDENCIAL ALCALÁ 138 · MADRID</span>
            </div>
            <div style={{ position: "absolute", bottom: 16, left: 16, right: 16, display: "flex", justifyContent: "space-between", color: "#2D4A3E" }}>
              <div>
                <div className="mono" style={{ color: "rgba(45,74,62,.7)" }}>OBRA NUEVA · 2027</div>
                <div style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontSize: 22, fontWeight: 400, lineHeight: 1.1, marginTop: 4 }}>42 viviendas en el<br />Barrio de Salamanca</div>
              </div>
              <div style={{ width: 38, height: 38, borderRadius: 999, border: "1px solid #2D4A3E", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 16 }}>→</div>
            </div>
          </div>
        </div>

        {/* Strip of data */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", borderTop: "1px solid var(--linea-soft)", borderBottom: "1px solid var(--linea-soft)" }}>
          {[
            ["GAV BAJO GESTIÓN","€420M"],
            ["VIVIENDAS EN CARTERA","1.240"],
            ["HOTELES 4★ / 5★","7"],
            ["OBRA CERTIFICADA","100%"],
          ].map(([k,v], i) => (
            <div key={k} style={{ padding: "22px 24px", borderLeft: i ? "1px solid var(--linea-soft)" : "none" }}>
              <div className="mono" style={{ fontSize: 9 }}>{k}</div>
              <div style={{ fontFamily: "var(--f-main)", fontWeight: 700, fontSize: 28, color: "var(--verde)", letterSpacing: -.5, marginTop: 6 }}>{v}</div>
            </div>
          ))}
        </div>

        {/* Projects grid teaser */}
        <div style={{ padding: "40px 40px 56px" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 22 }}>
            <div>
              <div className="mono" style={{ marginBottom: 8 }}>02 · Promociones</div>
              <h2 style={{ fontFamily: "var(--f-main)", fontWeight: 700, fontSize: 30, margin: 0, color: "var(--carbon)", letterSpacing: -.5 }}>Selección actual.</h2>
            </div>
            <span className="mono">VER TODAS · 14 →</span>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
            {[
              { tag: "MADRID", name: "Alcalá 138", t: "Residencial · 42 viviendas", grad: "linear-gradient(180deg, #d8cdb2, #b5a481)" },
              { tag: "MARBELLA", name: "Torre Marítima", t: "Hotel 5★ · 96 llaves", grad: "linear-gradient(180deg, #c4d4cc, #8fa89c)" },
              { tag: "BARCELONA", name: "Diagonal 412", t: "Residencial · 28 viviendas", grad: "linear-gradient(180deg, #dcd0b8, #b09a78)" },
            ].map((p) => (
              <div key={p.name} style={{ borderRadius: 6, overflow: "hidden" }}>
                <div style={{ aspectRatio: "4 / 3", background: p.grad, position: "relative" }}>
                  <ArchSilhouette small />
                  <div style={{ position: "absolute", top: 12, left: 12, fontFamily: "var(--f-mono)", fontSize: 9, color: "rgba(45,74,62,.8)", letterSpacing: 2 }}>{p.tag}</div>
                </div>
                <div style={{ background: "#fff", padding: 18 }}>
                  <div style={{ fontFamily: "var(--f-main)", fontWeight: 700, fontSize: 17, color: "var(--carbon)", letterSpacing: -.2 }}>{p.name}</div>
                  <div className="mono" style={{ marginTop: 4 }}>{p.t}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Mobile + module callout */}
      <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "260px 1fr", gap: 32, alignItems: "center" }}>
        <PhoneMock route={route} />
        <div>
          <div className="mono">07.b · responsive</div>
          <h3 style={{ fontFamily: "var(--f-main)", fontWeight: 700, fontSize: 32, color: "var(--carbon)", margin: "8px 0 12px", letterSpacing: -.5 }}>
            La marca se mantiene legible en móvil.
          </h3>
          <p style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontSize: 17, color: "var(--verde)", margin: 0, fontWeight: 300, maxWidth: "52ch" }}>
            La ficha periódica se reduce a sello fijo en cabecera. Las cifras se apilan en columna. La tipografía editorial se preserva.
          </p>
        </div>
      </div>
    </section>
  );
}

// Architectural silhouette placeholder used in web mocks
function ArchSilhouette({ small }) {
  return (
    <svg viewBox="0 0 400 480" preserveAspectRatio="xMidYMax slice" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: small ? .55 : .65 }}>
      <defs>
        <linearGradient id="bldg" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor="#2D4A3E" stopOpacity=".55"/>
          <stop offset="1" stopColor="#2D4A3E" stopOpacity=".9"/>
        </linearGradient>
      </defs>
      {/* sky tones */}
      <rect x="0" y="0" width="400" height="280" fill="rgba(255,255,255,.15)" />
      {/* back building */}
      <rect x="40" y="180" width="100" height="300" fill="url(#bldg)" />
      {/* mid building (tall) */}
      <rect x="150" y="100" width="120" height="380" fill="url(#bldg)" />
      {/* front building */}
      <rect x="280" y="220" width="90" height="260" fill="url(#bldg)" />
      {/* windows pattern */}
      {Array.from({ length: 9 }).map((_, r) => (
        Array.from({ length: 4 }).map((_, c) => (
          <rect key={`w${r}-${c}`} x={158 + c*28} y={120 + r*38} width="14" height="22" fill="rgba(234,229,220,.35)" />
        ))
      ))}
      {Array.from({ length: 7 }).map((_, r) => (
        Array.from({ length: 3 }).map((_, c) => (
          <rect key={`b${r}-${c}`} x={50 + c*30} y={200 + r*38} width="14" height="22" fill="rgba(234,229,220,.28)" />
        ))
      ))}
    </svg>
  );
}

function PhoneMock({ route = "estrella" }) {
  return (
    <div style={{ width: 240, aspectRatio: "9/19", background: "#1A1F1C", borderRadius: 32, padding: 8, boxShadow: "0 30px 60px -30px rgba(45,74,62,.4)" }}>
      <div style={{ width: "100%", height: "100%", background: "var(--piedra)", borderRadius: 26, overflow: "hidden", position: "relative" }}>
        {/* status bar */}
        <div style={{ height: 24, display: "flex", justifyContent: "space-between", alignItems: "center", padding: "6px 16px", fontFamily: "var(--f-mono)", fontSize: 8, color: "var(--carbon)" }}>
          <span>09:41</span>
          <span style={{ width: 60, height: 16, borderRadius: 8, background: "#1A1F1C" }} />
          <span>●●● ▮</span>
        </div>
        {/* nav */}
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 14px", borderBottom: "1px solid var(--linea-soft)" }}>
          <MiniMark size={24} route={route} showWordmark={false} />
          <span style={{ fontSize: 14 }}>≡</span>
        </div>
        {/* hero */}
        <div style={{ padding: "16px 14px" }}>
          <div className="mono" style={{ fontSize: 7 }}>Innovación responsable</div>
          <div style={{ fontFamily: "var(--f-main)", fontWeight: 200, fontSize: 26, lineHeight: 1, color: "var(--carbon)", marginTop: 8, letterSpacing: "-.04em" }}>
            Construimos<br /><b style={{ fontWeight: 700 }}>lo permanente.</b>
          </div>
          <div style={{ aspectRatio: "5/6", marginTop: 14, borderRadius: 4, position: "relative", overflow: "hidden", background: "linear-gradient(180deg, #d8cdb2, #b5a481)" }}>
            <ArchSilhouette small />
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, marginTop: 14 }}>
            <div>
              <div className="mono" style={{ fontSize: 6 }}>GAV</div>
              <div style={{ fontFamily: "var(--f-main)", fontWeight: 700, fontSize: 18, color: "var(--verde)" }}>€420M</div>
            </div>
            <div>
              <div className="mono" style={{ fontSize: 6 }}>VIVIENDAS</div>
              <div style={{ fontFamily: "var(--f-main)", fontWeight: 700, fontSize: 18, color: "var(--verde)" }}>1.240</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────────────
// 08 — TONO Y CLAIM
// ────────────────────────────────────────────────────────────────────────────

function VoiceSection() {
  const claims = [
    { c: "Construimos lo permanente.", n: "Actual · línea principal", note: "Apela a la herencia material. Funciona en titular y firma." },
    { c: "Materia de ciudad.",          n: "Alternativa A · arquitectónica", note: "Acentúa el rol urbano. Para campañas institucionales." },
    { c: "Cada metro, una decisión.",   n: "Alternativa B · operativa",      note: "Subraya el rigor del proceso. Útil con inversores." },
    { c: "La piedra es paciente.",      n: "Alternativa C · editorial",      note: "Tono más literario. Para campañas de marca." },
  ];

  const principles = [
    { k: "Hablamos en concreto", t: "Cifras, calidades, certificaciones. La retórica es para los demás." },
    { k: "Decimos lo justo", t: "Frases cortas, períodos cerrados, sin adjetivos huecos." },
    { k: "Nunca decimos lujo", t: "Decimos prestaciones, materiales, oficio, durabilidad." },
    { k: "Ponemos al inversor a la altura del comprador", t: "Una sola voz para los dos públicos." },
  ];

  return (
    <section className="sec" id="voz" data-screen-label="08 Voz" style={{ background: "var(--piedra)" }}>
      <SecHead num="08" kicker="Tono de voz · claim" title="Cómo suena Grupo Térreo."
        lede="Una voz adulta, contenida y precisa. Como un ingeniero que escribe bien."
      />

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "start" }}>
        <div>
          <div className="mono" style={{ marginBottom: 18 }}>Claims · alternativas a estudio</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
            {claims.map((c, i) => (
              <div key={i} style={{ borderTop: "1px solid var(--linea)", paddingTop: 18 }}>
                <div className="mono">{c.n}</div>
                <div style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", fontWeight: 300, fontSize: 32, color: "var(--carbon)", lineHeight: 1.1, marginTop: 8, letterSpacing: -.3 }}>
                  {c.c}
                </div>
                <div style={{ fontSize: 13, color: "var(--gris)", marginTop: 8, maxWidth: "44ch" }}>{c.note}</div>
              </div>
            ))}
          </div>
        </div>

        <div>
          <div className="mono" style={{ marginBottom: 18 }}>Principios de redacción</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
            {principles.map((p, i) => (
              <div key={i} style={{ background: "#fff", border: "1px solid var(--linea-soft)", borderRadius: 6, padding: 20, display: "grid", gridTemplateColumns: "32px 1fr", gap: 16 }}>
                <div className="mono" style={{ color: "var(--verde)", fontSize: 10 }}>{String(i+1).padStart(2,"0")}</div>
                <div>
                  <div style={{ fontFamily: "var(--f-main)", fontWeight: 600, fontSize: 16, color: "var(--carbon)" }}>{p.k}</div>
                  <div style={{ fontSize: 14, color: "var(--carbon)", marginTop: 6, lineHeight: 1.55 }}>{p.t}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="rule" />
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48 }}>
        <div>
          <div className="mono" style={{ color: "var(--verde)", marginBottom: 12 }}>Sí escribimos</div>
          <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 10 }}>
            {["Viviendas de altas prestaciones.","Certificación BREEAM Very Good.","Promoción de obra nueva en el barrio de Salamanca.","Reporting trimestral al inversor."].map((s,i)=>(
              <li key={i} style={{ fontFamily: "var(--f-serif)", fontWeight: 400, fontSize: 17, color: "var(--carbon)", borderLeft: "2px solid var(--verde)", paddingLeft: 14 }}>{s}</li>
            ))}
          </ul>
        </div>
        <div>
          <div className="mono" style={{ color: "#B23A3A", marginBottom: 12 }}>No escribimos</div>
          <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 10 }}>
            {["Viviendas de lujo de ensueño.","Construimos tus sueños sostenibles.","Una experiencia única que no olvidarás.","Apuesta segura para tu dinero."].map((s,i)=>(
              <li key={i} style={{ fontFamily: "var(--f-serif)", fontWeight: 400, fontSize: 17, color: "var(--gris)", borderLeft: "2px solid #B23A3A", paddingLeft: 14, textDecoration: "line-through", textDecorationColor: "rgba(178,58,58,.4)" }}>{s}</li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

// Footer
function Footer() {
  return (
    <footer style={{ padding: "40px 80px 56px", background: "var(--piedra-2)", borderTop: "1px solid var(--linea-soft)" }}>
      <div style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 16, fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: 2, color: "var(--gris)" }}>
        <span>GRUPO TÉRREO · MANUAL DE IDENTIDAD CORPORATIVA · v1.0 · 2026</span>
        <span style={{ color: "var(--verde)" }}>Innovación Responsable</span>
        <span>CONFIDENCIAL</span>
      </div>
    </footer>
  );
}

Object.assign(window, { EditorialSection, StationerySection, WebSection, VoiceSection, Footer });