/* global React, Emblem, WAButton, WAIcon, waLink, OfficialSeal, Heading, BRAND */

/* ============================ HERO ============================ */
function Hero() {
  return (
    <section className="hero wood-dark" id="inicio">
      <div className="hero-beam" />
      <div className="hero-grid wrap">
        <div className="hero-copy">
          <p className="eyebrow reveal in">{BRAND.tagline}</p>
          <h1 className="hero-title">
            <span className="gold-text">Legado.</span>
            <span className="gold-text">Trayectoria.</span>
            <span className="gold-text">Pasión.</span>
          </h1>
          <p className="hero-sub">
            Criadero mexicano en <strong>Tempoal, Veracruz</strong>, dedicado a la selección
            de ejemplares de calidad, con línea genética cuidada, atención directa y una
            crianza responsable.
          </p>
          <div className="hero-ctas">
            <a className="btn-gold" href="#precios">Ver lista de precios {BRAND.year}</a>
            <WAButton msg="Hola, vi la página oficial de Rancho La Vega y quiero consultar disponibilidad.">Consultar por WhatsApp</WAButton>
            <a className="btn-ghost" href="#ejemplares">Ver ejemplares</a>
          </div>
          <p className="hero-trust">
            <OfficialSeal small /> Compra y comunícate únicamente por nuestros canales verificados.
          </p>
        </div>

        <div className="hero-art">
          <div className="hero-pedestal" />
          <image-slot
            id="hero-rooster"
            class="hero-slot"
            shape="rounded"
            radius="10"
            placeholder="Suba el retrato de su gallo"
          ></image-slot>
        </div>
      </div>
    </section>
  );
}

/* ===================== CANALES OFICIALES (confianza) ===================== */
const SOCIALS = [
  { key: "fb", label: "Facebook", href: BRAND.facebook, path: "M13 22v-8h2.7l.4-3H13V9c0-.9.2-1.5 1.5-1.5H16V4.8A21 21 0 0 0 13.7 4C11.3 4 9.8 5.5 9.8 8.2V11H7v3h2.8v8H13Z" },
  { key: "ig", label: "Instagram", href: BRAND.instagram, path: "M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5Zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7Zm5 3.5A4.5 4.5 0 1 1 7.5 12 4.5 4.5 0 0 1 12 7.5Zm0 2A2.5 2.5 0 1 0 14.5 12 2.5 2.5 0 0 0 12 9.5ZM17 6a1 1 0 1 1-1 1 1 1 0 0 1 1-1Z" },
  { key: "tt", label: "TikTok", href: BRAND.tiktok, path: "M16 3c.3 2.3 1.8 4 4 4.3v3c-1.5 0-2.9-.4-4-1.2V16a5.5 5.5 0 1 1-5.5-5.5c.3 0 .6 0 .9.1v3.1a2.5 2.5 0 1 0 1.6 2.3V3H16Z" },
  { key: "ms", label: "Messenger", href: BRAND.messenger, path: "M12 2C6.3 2 2 6.2 2 11.6c0 2.9 1.3 5.4 3.4 7.1V22l3.1-1.7c.8.2 1.7.3 2.5.3 5.7 0 10-4.2 10-9.6S17.7 2 12 2Zm1 12.9-2.6-2.7-4.9 2.7 5.4-5.7 2.6 2.7 4.8-2.7-5.3 5.7Z" },
];

function OfficialChannels() {
  return (
    <section className="section-pad wood official-sec" id="oficial">
      <div className="wrap">
        <div className="official-card parchment reveal">
          <div className="official-head">
            <OfficialSeal />
            <h2>Canales oficiales de Rancho La Vega</h2>
          </div>
          <p className="official-lead">
            Para evitar fraudes, confusiones o tratos con páginas falsas, comunícate
            únicamente por los canales oficiales. Antes de realizar cualquier apartado, pago
            o acuerdo, verifica que estés hablando directamente con nuestros medios autorizados.
          </p>

          <div className="channel-grid">
            <a className="channel wa" href={waLink("Hola, vi la página oficial de Rancho La Vega y quiero consultar disponibilidad.")} target="_blank" rel="noopener noreferrer">
              <WAIcon size={22} />
              <span><strong>WhatsApp oficial</strong><em>Atención directa</em></span>
            </a>
            {BRAND.wa2 && (
              <a className="channel wa" href={waLink("Hola, vi la página oficial de Rancho La Vega.", BRAND.wa2)} target="_blank" rel="noopener noreferrer">
                <WAIcon size={22} />
                <span><strong>WhatsApp oficial 2</strong><em>Línea alterna</em></span>
              </a>
            )}
            {SOCIALS.map((s) => (
              <a className="channel" key={s.key} href={s.href} target="_blank" rel="noopener noreferrer">
                <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden="true"><path d={s.path} /></svg>
                <span><strong>{s.label}</strong><em>Perfil oficial</em></span>
              </a>
            ))}
          </div>

          <p className="official-note">
            Rancho La Vega no se hace responsable por acuerdos realizados con perfiles, páginas,
            números o personas no autorizadas. Compra y comunícate únicamente por los canales oficiales.
          </p>
        </div>
      </div>
    </section>
  );
}

/* ===================== RANCHO LA VEGA (quiénes somos) ===================== */
const ABOUT_TAGS = [
  "Tradición de campo", "Selección genética", "Cuidado diario", "Atención directa",
  "Líneas trabajadas", "Canales oficiales", "Proceso claro", "Compromiso con el cliente",
];

function About() {
  return (
    <section className="section-pad wood-dark" id="rancho">
      <div className="wrap about-grid">
        <div className="about-media reveal">
          <image-slot id="about-ranch" class="about-slot gold-frame corners" shape="rect" placeholder="Foto del rancho"></image-slot>
          <span className="about-emblem"><Emblem size={120} /></span>
        </div>
        <div className="about-copy reveal">
          <Heading kicker="Quiénes somos" title="Rancho La Vega" />
          <p>
            Rancho La Vega es un criadero mexicano ubicado en Tempoal, Veracruz, dedicado a la
            crianza, selección y cuidado de gallos finos. Nuestro trabajo se basa en la experiencia
            de campo, la observación diaria, la selección responsable y el compromiso de entregar
            ejemplares sanos, fuertes y bien atendidos.
          </p>
          <p className="about-pull">“Aquí se cuida la línea, la reputación y la palabra.”</p>
          <p>
            Aquí no se trata solo de vender aves. Se trata de cuidar una línea, mantener una
            reputación y atender al cliente con seriedad.
          </p>
          <div className="about-tags">
            {ABOUT_TAGS.map((t) => <span key={t} className="about-tag">{t}</span>)}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, OfficialChannels, About });