/* global React, waLink, BRAND */
const { useState: useStateS } = React;

/* WhatsApp icon */
function WAIcon({ size = 16 }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor" aria-hidden="true">
      <path d="M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm0 18a8 8 0 0 1-4.1-1.1l-.3-.2-3 .8.8-2.9-.2-.3A8 8 0 1 1 12 20Zm4.6-5.9c-.3-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.7.8-.8 1-.3.2-.5.1a6.5 6.5 0 0 1-3.2-2.8c-.2-.4.2-.4.6-1.2a.5.5 0 0 0 0-.5l-.8-1.9c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2c0 1.3 1 2.6 1.1 2.8s1.9 3 4.7 4.2c1.7.7 2.3.8 3.1.7.5-.1 1.5-.6 1.7-1.2s.2-1.1.2-1.2-.2-.2-.5-.3Z" />
    </svg>
  );
}

/* WhatsApp CTA — opens wa.me with prefilled message */
function WAButton({ msg, children, variant = "gold", number, icon = true, className = "" }) {
  const cls = (variant === "ghost" ? "btn-ghost" : "btn-gold") + " wa-btn " + className;
  return (
    <a className={cls} href={waLink(msg, number)} target="_blank" rel="noopener noreferrer">
      {icon && <WAIcon size={15} />}
      <span>{children}</span>
    </a>
  );
}

/* Floating WhatsApp button (persistent) */
function FloatingWA() {
  return (
    <a
      className="floating-wa"
      href={waLink("Hola, vi la página oficial de Rancho La Vega y quiero consultar disponibilidad.")}
      target="_blank" rel="noopener noreferrer"
      aria-label="WhatsApp oficial de Rancho La Vega"
    >
      <WAIcon size={28} />
      <span className="floating-wa-label">Consultar por WhatsApp</span>
    </a>
  );
}

/* Accordion (FAQ) */
function Accordion({ items }) {
  const [open, setOpen] = useStateS(0);
  return (
    <div className="accordion">
      {items.map(([q, a], i) => (
        <div className={"acc-item" + (open === i ? " open" : "")} key={i}>
          <button className="acc-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
            <span>{q}</span>
            <span className="acc-ico" aria-hidden="true">{open === i ? "–" : "+"}</span>
          </button>
          <div className="acc-a-wrap">
            <div className="acc-a">{a}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

/* Small "Sitio oficial" seal */
function OfficialSeal({ small }) {
  return (
    <span className={"official-seal" + (small ? " sm" : "")}>
      <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
        <path d="M12 2l7 3v6c0 4.5-3 8-7 9-4-1-7-4.5-7-9V5l7-3Z" />
        <path d="M9 12l2 2 4-4" />
      </svg>
      Sitio oficial
    </span>
  );
}

/* Section eyebrow + title block (left-aligned variant for content sections) */
function Heading({ kicker, title, center }) {
  return (
    <div className={"heading reveal" + (center ? " center" : "")}>
      {kicker && <p className="eyebrow">{kicker}</p>}
      <h2 className="gold-text heading-title">{title}</h2>
      <span className="heading-rule" />
    </div>
  );
}

Object.assign(window, { WAIcon, WAButton, FloatingWA, Accordion, OfficialSeal, Heading });