/* global React, Heading, Accordion, WAButton, WAIcon, waLink, OfficialSeal, Rooster, FAQ, BLOG, BRAND, LINES_PURE */
const { useState: useStateF } = React;

/* ===================== LEGALIDAD INFORMATIVA ===================== */
function Legal() {
  return (
    <section className="section-pad wood" id="legalidad">
      <div className="wrap">
        <Heading kicker="Responsabilidad" title="Legalidad informativa" />
        <div className="legal-grid reveal">
          <div className="legal-text">
            <p>
              Rancho La Vega promueve una operación responsable y ordenada. Sabemos que existen dudas
              sobre la regulación de actividades tradicionales relacionadas con gallos en México, por eso
              recomendamos a nuestros clientes informarse sobre las disposiciones vigentes en su estado y municipio.
            </p>
            <p>
              La crianza, venta, traslado y participación en eventos debe realizarse con responsabilidad,
              respeto a la ley y apego a las reglas locales aplicables.
            </p>
          </div>
          <div className="legal-aside parchment">
            <span className="legal-ico">
              <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3l8 4v5c0 4-3.5 7.5-8 9-4.5-1.5-8-5-8-9V7l8-4Z" /><path d="M12 8v5M12 16h.01" /></svg>
            </span>
            <h4>Mapa informativo por estados</h4>
            <p>Este espacio podrá integrar un mapa informativo por estados para orientar sobre restricciones, permisos, regulaciones o tradiciones reconocidas relacionadas con actividades gallísticas.</p>
            <span className="legal-soon">Próximamente</span>
          </div>
        </div>
        <p className="ship-fine reveal">
          La información publicada en esta sección es de carácter orientativo y puede cambiar. Para decisiones
          específicas, se recomienda consultar la legislación local o asesoría profesional.
        </p>
      </div>
    </section>);

}

/* ===================== FAQ ===================== */
function Faq() {
  return (
    <section className="section-pad wood-dark" id="faq">
      <div className="wrap narrow">
        <Heading kicker="Dudas comunes" title="Preguntas frecuentes" center />
        <div className="reveal"><Accordion items={FAQ} /></div>
      </div>
    </section>);

}

/* ===================== BLOG / GUÍAS ===================== */
function Blog() {
  return (
    <section className="section-pad wood" id="blog">
      <div className="wrap">
        <Heading kicker="Información" title="Guías del rancho" />
        <p className="sec-intro reveal">Información clara para compradores, clientes y seguidores de Rancho La Vega.</p>
        <div className="blog-grid reveal">
          {BLOG.map((b, i) =>
          <article className="blog-card" key={i}>
              <div className="blog-thumb">
                <image-slot id={"blog-" + i} class="blog-slot" shape="rect" placeholder="Imagen de la guía"></image-slot>
                <span className="blog-tag">{b.tag}</span>
              </div>
              <div className="blog-body">
                <h4>{b.t}</h4>
                <p>{b.d}</p>
                <a className="blog-link" href={waLink("Hola, me interesó la guía: " + b.t)} target="_blank" rel="noopener noreferrer">Leer más →</a>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

/* ===================== CONTACTO ===================== */
const QUERY_TYPES = ["Ejemplar disponible", "Lista de precios", "Envío", "Dinámica", "Canales oficiales", "Otra consulta"];

const OFFICIAL_CONTACTS = [
  { name: "Nira", facebook: "https://www.facebook.com/profile.php?id=61556216016001" },
  { name: "Bianna", facebook: "https://www.facebook.com/profile.php?id=61556601590070" },
  { name: "Chema", facebook: "https://www.facebook.com/profile.php?id=61582357841891" },
  { name: "Árabe", facebook: "https://www.facebook.com/arabe.tempoal" }
];

function Contact() {
  const [f, setF] = useStateF({ nombre: "", estado: "", ciudad: "", tel: "", linea: "", tipo: "", msg: "" });
  const set = (k) => (e) => setF({ ...f, [k]: e.target.value });

  const submit = (e) => {
    e.preventDefault();
    const parts = [
    "Hola, vi la página oficial de Rancho La Vega.",
    f.nombre && "Soy " + f.nombre + ".",
    (f.ciudad || f.estado) && "Ubicación: " + [f.ciudad, f.estado].filter(Boolean).join(", ") + ".",
    f.tipo && "Tipo de consulta: " + f.tipo + ".",
    f.linea && "Línea de interés: " + f.linea + ".",
    f.tel && "Tel: " + f.tel + ".",
    f.msg && "Mensaje: " + f.msg].
    filter(Boolean);
    window.open(waLink(parts.join(" ")), "_blank", "noopener");
  };

  return (
    <section className="section-pad wood-dark" id="contacto">
      <div className="wrap contact-grid">
        <div className="contact-intro reveal">
          <Heading kicker="Atención directa" title="Contacto oficial" />
          <p>Estás hablando con el canal oficial. Escríbenos directamente a través de nuestros contactos autorizados.</p>
          <p className="contact-loc"><OfficialSeal small /> {BRAND.location}</p>
          
          <div className="official-contacts">
            <h4 className="contacts-title">Contactos autorizados</h4>
            <div className="contacts-list">
              {OFFICIAL_CONTACTS.map((contact, i) => (
                <div className="contact-card" key={i}>
                  <span className="contact-name">{contact.name}</span>
                  <a href={contact.facebook} target="_blank" rel="noopener noreferrer" className="contact-link" aria-label={`Facebook de ${contact.name}`}>
                    <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="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" /></svg>
                    Perfil
                  </a>
                </div>
              ))}
              <div className="contact-card whatsapp-card">
                <span className="contact-name">WhatsApp</span>
                <a href="https://wa.me/525621915074" target="_blank" rel="noopener noreferrer" className="contact-link" aria-label="WhatsApp oficial">
                  <WAIcon size={16} />
                  +52 562 191 5074
                </a>
              </div>
            </div>
          </div>

          <div className="contact-channels">
            <WAButton msg="Hola, vi la página oficial de Rancho La Vega y quiero consultar disponibilidad.">Enviar mensaje por WhatsApp</WAButton>
          </div>
        </div>

        <form className="contact-form parchment reveal" onSubmit={submit}>
          <div className="cf-row">
            <label>Nombre<input type="text" value={f.nombre} onChange={set("nombre")} placeholder="Tu nombre" /></label>
          </div>
          <div className="cf-row two">
            <label>Estado<input type="text" value={f.estado} onChange={set("estado")} placeholder="Estado" /></label>
            <label>Ciudad<input type="text" value={f.ciudad} onChange={set("ciudad")} placeholder="Ciudad" /></label>
          </div>
          <div className="cf-row two">
            <label>Teléfono<input type="tel" value={f.tel} onChange={set("tel")} placeholder="10 dígitos" /></label>
            <label>Línea de interés
              <select value={f.linea} onChange={set("linea")}>
                <option value="">Selecciona…</option>
                {LINES_PURE.map((l) => <option key={l}>{l}</option>)}
              </select>
            </label>
          </div>
          <div className="cf-row">
            <label>Tipo de consulta
              <select value={f.tipo} onChange={set("tipo")}>
                <option value="">Selecciona…</option>
                {QUERY_TYPES.map((q) => <option key={q}>{q}</option>)}
              </select>
            </label>
          </div>
          <div className="cf-row">
            <label>Mensaje<textarea rows="3" value={f.msg} onChange={set("msg")} placeholder="Cuéntanos tu consulta…"></textarea></label>
          </div>
          <button className="btn-gold cf-submit" type="submit"><WAIcon size={15} /> Hablar con Rancho La Vega</button>
          <p className="cf-fine">Al enviar se abrirá WhatsApp con tu mensaje listo para enviar.</p>
        </form>
      </div>
    </section>);

}

/* ===================== FOOTER ===================== */
const F_LINKS = [
["Inicio", "#inicio"], ["Rancho La Vega", "#rancho"], ["Lista de precios", "#precios"],
["Líneas disponibles", "#lineas"], ["Mapa de envíos", "#envios"], ["Dinámicas", "#dinamicas"], ["Contacto", "#contacto"]];


function Footer() {
  return (
    <footer className="site-footer wood-dark" id="footer">
      <div className="brass-rail" />
      <div className="footer-watermark"><Rooster size={260} color="rgba(217,184,96,0.07)" /></div>
      <div className="wrap footer-top">
        <div className="footer-brand">
          <span className="brand-name gold-text">RANCHO LA VEGA</span>
          <p className="footer-tag">{BRAND.tagline}.</p>
          <p className="footer-loc">{BRAND.location}</p>
          <div className="footer-socials">
            <a href={BRAND.facebook} aria-label="Facebook"><svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="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" /></svg></a>
            <a href={BRAND.instagram} aria-label="Instagram"><svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="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" /></svg></a>
            <a href={BRAND.tiktok} aria-label="TikTok"><svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="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" /></svg></a>
            <a href={waLink("Hola, vi la página oficial de Rancho La Vega.")} target="_blank" rel="noopener noreferrer" aria-label="WhatsApp"><WAIcon size={18} /></a>
          </div>
        </div>
        <nav className="footer-links">
          <span className="footer-h">Navegación</span>
          {F_LINKS.map(([l, h]) => <a key={h} href={h}>{l}</a>)}
        </nav>
        <div className="footer-avisos">
          <span className="footer-h">Avisos</span>
          <p>Compra y comunícate únicamente por canales oficiales. Rancho La Vega no se hace responsable por acuerdos realizados con perfiles, páginas, números o personas no autorizadas.</p>
          <p className="footer-fine">La información sobre envíos, disponibilidad, precios y regulación es orientativa y puede cambiar. Toda operación debe confirmarse directamente con el equipo de Rancho La Vega.</p>
        </div>
      </div>
      <div className="footer-base wrap">
        <span>© {BRAND.year} Rancho La Vega · {BRAND.location}</span>
        <span className="footer-creed">La confianza también se cría.</span>
      </div>
    </footer>);

}

Object.assign(window, { Legal, Faq, Blog, Contact, Footer });