/* global React, Heading, WAButton, LINES_TWO, LINES_PURE, CARE */

/* ===================== LÍNEAS DISPONIBLES ===================== */
function Lines() {
  return (
    <section className="section-pad wood" id="lineas">
      <div className="wrap">
        <Heading kicker="Genética y linaje" title="Líneas disponibles" />
        <p className="sec-intro reveal">
          En Rancho La Vega trabajamos con distintas líneas y combinaciones de sangre,
          seleccionadas con cuidado para mantener presencia, calidad y características
          deseadas en cada ejemplar.
        </p>

        <div className="lines-grid reveal">
          <div className="lines-block gold-frame corners">
            <i className="tl" /><i className="tr" /><i className="bl" /><i className="br" />
            <h3 className="lines-h"><span className="nameplate">Dos sangres</span></h3>
            <ul className="lines-list">
              {LINES_TWO.map((l) => <li key={l}>{l}</li>)}
            </ul>
          </div>
          <div className="lines-block gold-frame corners">
            <i className="tl" /><i className="tr" /><i className="bl" /><i className="br" />
            <h3 className="lines-h"><span className="nameplate">En línea</span></h3>
            <ul className="lines-list">
              {LINES_PURE.map((l) => <li key={l}>{l}</li>)}
            </ul>
          </div>
        </div>

        <div className="lines-feature parchment reveal">
          <div>
            <span className="lines-feature-k">Destacado</span>
            <strong>Macho Asil en línea</strong>
          </div>
          <span className="lines-feature-price">$10,000 <em>MXN</em></span>
        </div>

        <p className="aviso reveal">
          La disponibilidad de líneas puede cambiar. Para confirmar ejemplares activos, edades,
          fotografías y videos recientes, comunícate directamente por WhatsApp oficial.
        </p>
        <div className="reveal center-cta">
          <WAButton msg="Hola, quiero preguntar por las líneas disponibles en Rancho La Vega.">Preguntar por líneas disponibles</WAButton>
        </div>
      </div>
    </section>
  );
}

/* ===================== CRIANZA Y CUIDADO ===================== */
const CARE_ICONS = {
  0: "M5 12h14M5 12a7 7 0 0 1 14 0M9 12v6m6-6v6",            // alimentación (placeholder line art)
  default: "M12 3l8 4v5c0 4-3.5 7.5-8 9-4.5-1.5-8-5-8-9V7l8-4Z",
};

function Care() {
  return (
    <section className="section-pad wood-dark" id="crianza">
      <div className="wrap">
        <Heading kicker="Trabajo del rancho" title="Crianza y cuidado" center />
        <p className="sec-intro center reveal">
          La calidad de un ejemplar no se improvisa. Cuidamos la alimentación, el espacio, la
          observación, la selección y el seguimiento de cada ave. Nuestro trabajo se hace con
          paciencia, experiencia y respeto por la crianza.
        </p>
        <div className="care-grid reveal">
          {CARE.map(([t, d], i) => (
            <div className="care-card" key={t}>
              <span className="care-ico">
                <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                  <path d={CARE_ICONS[i] || CARE_ICONS.default} />
                </svg>
              </span>
              <h4>{t}</h4>
              <p>{d}</p>
            </div>
          ))}
        </div>
        <p className="care-pull gold-text reveal">Cada ejemplar representa trabajo, tiempo y selección.</p>
      </div>
    </section>
  );
}

Object.assign(window, { Lines, Care });