/* global React, Heading, WAButton, PRICING, PROCESS, BRAND */

/* ===================== LISTA DE PRECIOS 2026 ===================== */
function Pricing() {
  return (
    <section className="section-pad wood-dark" id="precios">
      <div className="wrap">
        <Heading kicker={"Precios oficiales " + BRAND.year} title={"Lista de Precios " + BRAND.year} center />
        <p className="sec-intro center reveal">
          Consulta la lista oficial de precios de Rancho La Vega. Los precios pueden cambiar según
          disponibilidad, línea, edad, características del ejemplar y condiciones de entrega.
          <strong> Nuestros precios no incluyen envío.</strong>
        </p>

        <div className="price-cartel parchment reveal">
          <span className="cartel-seal">Lista oficial {BRAND.year}</span>
          <div className="cartel-head">
            <span>Categoría</span><span>Condición</span><span>Precio</span>
          </div>
          <ul className="cartel-list">
            {PRICING.map((p) => (
              <li key={p.cat} className={p.featured ? "feat" : ""}>
                <span className="c-cat">{p.cat}</span>
                <span className="c-cond">{p.cond}</span>
                <span className="c-price">{p.price}<em> MXN</em></span>
              </li>
            ))}
          </ul>
          <div className="cartel-avisos">
            <p>• Nuestros precios no incluyen envío.</p>
            <p>• Consulta disponibilidad antes de apartar.</p>
            <p>• El costo de entrega o traslado depende del destino, ruta disponible y condiciones logísticas.</p>
          </div>
        </div>

        <div className="price-ctas reveal">
          <WAButton msg="Hola, quiero consultar disponibilidad de ejemplares en Rancho La Vega.">Consultar disponibilidad</WAButton>
          <WAButton msg="Hola, quiero preguntar por las líneas disponibles." variant="ghost">Preguntar por líneas</WAButton>
          <WAButton msg="Hola, quiero cotizar el envío a mi ciudad." variant="ghost">Cotizar envío a mi ciudad</WAButton>
        </div>
      </div>
    </section>
  );
}

/* ===================== PROCESO DE COMPRA ===================== */
function Process() {
  return (
    <section className="section-pad wood" id="proceso">
      <div className="wrap">
        <Heading kicker="Compra clara y segura" title="Proceso de compra" />
        <p className="sec-intro reveal">
          Comprar con Rancho La Vega debe ser claro, directo y seguro. Por eso toda consulta,
          apartado o confirmación se realiza únicamente por nuestros canales oficiales.
        </p>

        <ol className="timeline reveal">
          {PROCESS.map((step, i) => (
            <li className="tl-step" key={i}>
              <span className="tl-num">{String(i + 1).padStart(2, "0")}</span>
              <div className="tl-body">
                <h4>{step.t}</h4>
                <p>{step.d}</p>
              </div>
            </li>
          ))}
        </ol>

        <p className="aviso reveal">Toda operación debe realizarse únicamente por los canales oficiales de Rancho La Vega.</p>
        <div className="reveal center-cta">
          <WAButton msg="Hola, quiero conocer el proceso de compra de Rancho La Vega.">Hablar con Rancho La Vega</WAButton>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Pricing, Process });