/* Trepa't — UI compartida (Hero, Band, SecHead, FAQ, CTA, contexto de navegación) */

window.NavCtx = React.createContext({ go: () => {}, lang: "ES", page: "home" });

const ASSET = "site/assets/";

function Band({ tone = "coral" }) {
  const items = Array.from({ length: 10 }, (_, i) => i);
  return (
    <div className={"band band--" + tone} aria-hidden="true">
      <div className="band__track">
        {items.concat(items).map((i, idx) => (
          <span key={idx} className="band__item">Fent el cabra<span className="band__dot">·</span></span>
        ))}
      </div>
    </div>
  );
}

function Hero({ variant = "teal", crumb, tagline, title, lead, ghost = "cream", seal = false, left = false, children }) {
  return (
    <section className={"hero hero--" + variant + (left ? " hero--left" : "")}>
      {ghost && <img className="hero__ghost" src={ASSET + "goat-line-" + ghost + ".png"} alt="" aria-hidden="true" />}
      {seal && <img className="hero__seal" src={ASSET + "seal-fent-el-cabra.png"} alt="" aria-hidden="true" />}
      <div className="hero__inner">
        {crumb && <span className="hero__crumb"><i data-lucide="chevron-right"></i>{crumb}</span>}
        {tagline && <span className="tagline hero__tagline">{tagline}</span>}
        <h1 className="hero__title">{title}</h1>
        {lead && <p className="hero__lead">{lead}</p>}
        {children && <div className="hero__cta">{children}</div>}
      </div>
    </section>
  );
}

function SecHead({ eyebrow, title, sub, center = false }) {
  return (
    <div className={"sec-head" + (center ? " sec-head--center" : "")}>
      {eyebrow && <span className="eyebrow">{eyebrow}</span>}
      <h2>{title}</h2>
      {sub && <p>{sub}</p>}
    </div>
  );
}

function FAQ({ items }) {
  const [open, setOpen] = React.useState(0);
  return (
    <div className="faq">
      {items.map((it, i) => {
        const isOpen = open === i;
        return (
          <div key={i} className={"faq__item" + (isOpen ? " is-open" : "")}>
            <button className="faq__q" aria-expanded={isOpen} onClick={() => setOpen(isOpen ? -1 : i)}>
              {it.q}
              <i data-lucide="plus"></i>
            </button>
            <div className="faq__a" style={{ maxHeight: isOpen ? "260px" : "0" }}>
              <div className="faq__a-inner">{it.a}</div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

function CTABanner({ title, p, children }) {
  return (
    <section className="cta-banner">
      <img className="cta-banner__seal" src={ASSET + "seal-fent-el-cabra.png"} alt="" aria-hidden="true" />
      <h2>{title}</h2>
      {p && <p>{p}</p>}
      <div className="hero__cta">{children}</div>
    </section>
  );
}

/* refresh lucide icons after each render */
function useLucide(dep) {
  React.useEffect(() => {
    const run = () => window.lucide && window.lucide.createIcons();
    run();
    const t = setTimeout(run, 60);
    return () => clearTimeout(t);
  }, [dep]);
}

Object.assign(window, { Band, Hero, SecHead, FAQ, CTABanner, useLucide, TPT_ASSET: ASSET });