// Variación A — Sobria
// Paper-white, abundant whitespace, thin rules, brand color only on key accents

const SERVICIOS_SOBRIA = [
  {
    n: '01',
    title: 'Monetización de sistemas de almacenamiento',
    body: 'Estrategia de revenue stacking — arbitraje, servicios auxiliares y mercados de capacidad — modelada contra el caso base del cliente.',
  },
  {
    n: '02',
    title: 'Plan de augmentación de BESS',
    body: 'Cronograma de adiciones de capacidad para sostener la garantía contractual durante la vida del proyecto.',
  },
  {
    n: '03',
    title: 'Optimización del diseño PV + BESS',
    body: 'Dimensionamiento de inversores, DC/AC ratio y batería con un despacho que maximiza el NPV.',
  },
  {
    n: '04',
    title: 'Forecast preciso de degradación de BESS',
    body: 'Modelado físico de pérdida de capacidad por ciclos, calendario y perfil real de operación.',
  },
  {
    n: '05',
    title: 'Due diligence de BESS',
    body: 'Revisión técnica y financiera independiente para inversionistas, prestamistas y compradores.',
  },
];

function LandingSobria() {
  return (
    <div className="ls-root" data-screen-label="Variación Sobria">
      <style>{`
        .ls-root {
          --pad-x: 96px;
          font-family: var(--font-sans);
          background: #fff;
          color: var(--brand-black);
          width: 100%;
          min-height: 100%;
        }
        .ls-topbar {
          height: 6px;
          background: linear-gradient(to right, var(--brand-deep) 0 50%, var(--brand-electric) 50% 100%);
        }
        .ls-nav {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 28px var(--pad-x);
          border-bottom: 1px solid var(--neutral-100);
        }
        .ls-nav img { height: 28px; display: block; }
        .ls-nav-links {
          display: flex; align-items: center; gap: 40px;
          font-size: 13px; font-weight: 600;
          letter-spacing: 0.08em; text-transform: uppercase;
        }
        .ls-nav-links a {
          color: var(--brand-black);
          text-decoration: none;
          border: 0;
        }
        .ls-nav-links a:hover { color: var(--brand-electric); }
        .ls-nav-cta {
          font-size: 12px;
          font-weight: 700;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          padding: 12px 22px;
          border: 1.5px solid var(--brand-black);
          color: var(--brand-black) !important;
          background: transparent;
          transition: all 140ms ease;
        }
        .ls-nav-cta:hover { background: var(--brand-black); color: #fff !important; }

        /* HERO */
        .ls-hero {
          padding: 140px var(--pad-x) 160px;
          max-width: 1400px;
        }
        .ls-eyebrow {
          font-size: 12px;
          font-weight: 700;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: var(--brand-electric);
          margin-bottom: 36px;
          display: flex;
          align-items: center;
          gap: 14px;
        }
        .ls-eyebrow::before {
          content: '';
          display: block;
          width: 28px; height: 2px;
          background: var(--brand-electric);
        }
        .ls-hero h1 {
          font-size: 76px;
          font-weight: 900;
          line-height: 0.98;
          letter-spacing: -0.035em;
          text-transform: uppercase;
          margin: 0 0 40px;
          max-width: 14ch;
        }
        .ls-hero h1 .em { color: var(--brand-electric); }
        .ls-hero .lede {
          font-size: 22px;
          line-height: 1.45;
          font-weight: 300;
          color: var(--neutral-700);
          max-width: 56ch;
          margin: 0 0 56px;
        }
        .ls-hero-actions {
          display: flex; gap: 16px; align-items: center;
        }
        .ls-btn-primary {
          display: inline-flex; align-items: center; gap: 14px;
          padding: 18px 32px;
          background: var(--brand-black);
          color: #fff !important;
          font-size: 13px;
          font-weight: 700;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          border: 0;
          text-decoration: none;
          transition: background 140ms ease;
        }
        .ls-btn-primary:hover { background: var(--brand-electric); }
        .ls-btn-ghost {
          padding: 18px 28px;
          color: var(--brand-black) !important;
          font-size: 13px;
          font-weight: 700;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          text-decoration: none;
          border: 0;
        }
        .ls-btn-ghost:hover { color: var(--brand-electric) !important; }

        /* SECTION SHELL */
        .ls-section {
          padding: 120px var(--pad-x);
          border-top: 1px solid var(--neutral-100);
        }
        .ls-section-head {
          display: grid;
          grid-template-columns: 220px 1fr;
          gap: 60px;
          align-items: baseline;
          margin-bottom: 80px;
        }
        .ls-section-stamp {
          font-size: 12px;
          font-weight: 700;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: var(--brand-electric);
        }
        .ls-section-title {
          font-size: 44px;
          font-weight: 900;
          line-height: 1.02;
          letter-spacing: -0.025em;
          text-transform: uppercase;
          margin: 0;
          max-width: 18ch;
        }
        .ls-section-sub {
          margin-top: 24px;
          font-size: 17px;
          line-height: 1.5;
          font-weight: 300;
          color: var(--neutral-700);
          max-width: 56ch;
        }

        /* SERVICIOS */
        .ls-services {
          display: grid;
          grid-template-columns: 220px 1fr;
          gap: 60px;
        }
        .ls-services-list { display: flex; flex-direction: column; }
        .ls-service {
          display: grid;
          grid-template-columns: 80px 1fr;
          gap: 32px;
          padding: 36px 0;
          border-top: 1px solid var(--neutral-200);
          align-items: baseline;
        }
        .ls-service:last-child { border-bottom: 1px solid var(--neutral-200); }
        .ls-service-num {
          font-size: 14px;
          font-weight: 700;
          letter-spacing: 0.16em;
          color: var(--brand-electric);
        }
        .ls-service-title {
          font-size: 22px;
          font-weight: 700;
          letter-spacing: -0.01em;
          margin: 0 0 10px;
          color: var(--brand-black);
        }
        .ls-service-body {
          font-size: 15px;
          line-height: 1.55;
          font-weight: 400;
          color: var(--neutral-600);
          max-width: 60ch;
          margin: 0;
        }

        /* NOSOTROS */
        .ls-about {
          display: grid;
          grid-template-columns: 220px 1fr;
          gap: 60px;
        }
        .ls-about-body p {
          font-size: 19px;
          line-height: 1.55;
          font-weight: 300;
          color: var(--neutral-700);
          max-width: 56ch;
          margin: 0 0 22px;
        }
        .ls-about-body p:last-child { margin-bottom: 0; }
        .ls-about-body strong {
          color: var(--brand-black);
          font-weight: 600;
        }
        .ls-kpis {
          margin-top: 64px;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 1px;
          background: var(--neutral-200);
          border-top: 1px solid var(--neutral-200);
          border-bottom: 1px solid var(--neutral-200);
        }
        .ls-kpi {
          background: #fff;
          padding: 36px 28px;
        }
        .ls-kpi-num {
          font-size: 56px;
          font-weight: 900;
          line-height: 1;
          letter-spacing: -0.04em;
          color: var(--brand-black);
        }
        .ls-kpi-num .unit { color: var(--brand-electric); }
        .ls-kpi-label {
          margin-top: 12px;
          font-size: 12px;
          font-weight: 700;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: var(--neutral-500);
        }

        /* CONTACTO */
        .ls-contact {
          display: grid;
          grid-template-columns: 220px 1fr;
          gap: 60px;
          padding: 120px var(--pad-x);
          border-top: 1px solid var(--neutral-100);
        }
        .ls-contact-title {
          font-size: 44px;
          font-weight: 900;
          line-height: 1.02;
          letter-spacing: -0.025em;
          text-transform: uppercase;
          margin: 0 0 18px;
        }
        .ls-contact-sub {
          font-size: 17px;
          line-height: 1.5;
          font-weight: 300;
          color: var(--neutral-700);
          max-width: 56ch;
          margin: 0 0 48px;
        }
        .ls-contact-email {
          font-size: 18px;
          font-weight: 600;
          color: var(--brand-electric) !important;
          text-decoration: none;
          border: 0;
        }
        .ls-form {
          display: flex;
          flex-direction: column;
          gap: 24px;
          max-width: 560px;
        }
        .ls-field label {
          display: block;
          font-size: 11px;
          font-weight: 700;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: var(--neutral-500);
          margin-bottom: 10px;
        }
        .ls-field input,
        .ls-field textarea {
          width: 100%;
          font: inherit;
          font-size: 16px;
          color: var(--brand-black);
          background: transparent;
          border: 0;
          border-bottom: 1.5px solid var(--neutral-300);
          padding: 10px 0 14px;
          outline: none;
          transition: border-color 140ms ease;
          font-family: var(--font-sans);
        }
        .ls-field input:focus,
        .ls-field textarea:focus {
          border-color: var(--brand-electric);
        }
        .ls-field textarea {
          resize: vertical;
          min-height: 100px;
        }
        .ls-form-submit {
          align-self: flex-start;
          margin-top: 12px;
          display: inline-flex; align-items: center; gap: 14px;
          padding: 18px 32px;
          background: var(--brand-black);
          color: #fff;
          font-size: 13px;
          font-weight: 700;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          border: 0;
          cursor: pointer;
          transition: background 140ms ease;
          font-family: var(--font-sans);
        }
        .ls-form-submit:hover { background: var(--brand-electric); }

        /* FOOTER */
        .ls-footer {
          padding: 48px var(--pad-x);
          border-top: 1px solid var(--neutral-200);
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 12px;
          letter-spacing: 0.06em;
          color: var(--neutral-500);
        }
        .ls-footer img { height: 22px; }
        .ls-footer-meta { display: flex; gap: 32px; }
      `}</style>

      <div className="ls-topbar"></div>

      <nav className="ls-nav">
        <img src="assets/logo-full-color-tight.png" alt="Enerlytics Consulting" />
        <div className="ls-nav-links">
          <a href="#servicios">Servicios</a>
          <a href="#nosotros">Nosotros</a>
          <a href="#contacto">Contacto</a>
        </div>
        <a href="#contacto" className="ls-nav-cta">Hablemos</a>
      </nav>

      <header className="ls-hero">
        <div className="ls-eyebrow">Energy storage advisory</div>
        <h1>
          Decisiones <span className="em">bancables</span> para almacenamiento de energía.
        </h1>
        <p className="lede">
          Asesoría técnica y financiera para proyectos de baterías y PV+BESS — del modelado de degradación a la due diligence — con la independencia que exigen tus inversionistas.
        </p>
        <div className="ls-hero-actions">
          <a href="#contacto" className="ls-btn-primary">
            Agenda una llamada
            <span aria-hidden="true">→</span>
          </a>
          <a href="#servicios" className="ls-btn-ghost">Ver servicios</a>
        </div>
      </header>

      <section className="ls-section" id="servicios">
        <div className="ls-services">
          <div>
            <div className="ls-section-stamp">— Servicios</div>
          </div>
          <div>
            <h2 className="ls-section-title">Cinco frentes,<br/>una sola disciplina.</h2>
            <p className="ls-section-sub">
              Trabajamos sobre la economía y la física del activo. Cada entrega es un documento defendible — frente a un comité de inversión, un prestamista o un regulador.
            </p>
            <div className="ls-services-list" style={{marginTop: 56}}>
              {SERVICIOS_SOBRIA.map((s) => (
                <article key={s.n} className="ls-service">
                  <div className="ls-service-num">{s.n}</div>
                  <div>
                    <h3 className="ls-service-title">{s.title}</h3>
                    <p className="ls-service-body">{s.body}</p>
                  </div>
                </article>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="ls-section" id="nosotros">
        <div className="ls-about">
          <div>
            <div className="ls-section-stamp">— Nosotros</div>
          </div>
          <div className="ls-about-body">
            <h2 className="ls-section-title" style={{marginBottom: 32}}>Ingeniería energética, en lenguaje financiero.</h2>
            <p>
              <strong>Enerlytics Consulting</strong> es un equipo independiente de ingenieros y analistas dedicado al almacenamiento de energía a escala de red. Combinamos modelado físico de baterías con análisis de mercados eléctricos para responder la única pregunta que importa: <strong>¿este proyecto se sostiene?</strong>
            </p>
            <p>
              No vendemos equipos. No representamos fabricantes. Nuestra única lealtad es el rigor técnico.
            </p>

            <div className="ls-kpis">
              <div className="ls-kpi">
                <div className="ls-kpi-num">1.5<span className="unit">&nbsp;GWh</span></div>
                <div className="ls-kpi-label">Capacidad analizada</div>
              </div>
              <div className="ls-kpi">
                <div className="ls-kpi-num">40<span className="unit">+</span></div>
                <div className="ls-kpi-label">Proyectos asesorados</div>
              </div>
              <div className="ls-kpi">
                <div className="ls-kpi-num">6<span className="unit">&nbsp;años</span></div>
                <div className="ls-kpi-label">Experiencia</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="ls-contact" id="contacto">
        <div>
          <div className="ls-section-stamp">— Contacto</div>
        </div>
        <div>
          <h2 className="ls-contact-title">Cuéntanos<br/>tu proyecto.</h2>
          <p className="ls-contact-sub">
            Respuesta directa de un ingeniero senior en menos de 48 horas. Sin formularios largos, sin filtros de marketing.
          </p>
          <form className="ls-form" onSubmit={(e) => e.preventDefault()}>
            <div className="ls-field">
              <label htmlFor="ls-email">Correo electrónico</label>
              <input id="ls-email" type="email" placeholder="tu@empresa.com" />
            </div>
            <div className="ls-field">
              <label htmlFor="ls-msg">Mensaje</label>
              <textarea id="ls-msg" placeholder="Capacidad, ubicación, etapa del proyecto…"></textarea>
            </div>
            <button type="submit" className="ls-form-submit">
              Enviar <span aria-hidden="true">→</span>
            </button>
          </form>
          <div style={{marginTop: 56, fontSize: 13, letterSpacing: '0.06em', color: 'var(--neutral-500)'}}>
            ¿Prefieres correo directo?{' '}
            <a href="mailto:info@enerlytics-consulting.com" className="ls-contact-email">info@enerlytics-consulting.com</a>
          </div>
        </div>
      </section>

      <footer className="ls-footer">
        <img src="assets/logo-mark-color.png" alt="" />
        <div className="ls-footer-meta">
          <span>© 2026 Enerlytics Consulting</span>
          <span>info@enerlytics-consulting.com</span>
        </div>
      </footer>
    </div>
  );
}

window.LandingSobria = LandingSobria;