/* ============ Info pages (envíos, devoluciones, FAQ, legales, contacto) ============
   All six live in site_content.infoPages and are edited from the admin.
   Layout follows the reference: icon sidebar on the left, intro + accordions
   on the right. On phones the sidebar becomes a scrolling chip rail. */
function InfoPage({ store, slug, navigate }) {
  const pages = (store.content && store.content.infoPages) || SEED_CONTENT.infoPages || [];
  const page = pages.find(p => p.slug === slug) || pages[0];
  const [open, setOpen] = useState(0);

  useEffect(() => { setOpen(0); }, [slug]);

  if (!page) {
    return (
      <main>
        <div className="page-head" style={{ paddingBottom: 80 }}>
          <h1>Página no encontrada</h1>
          <button className="btn btn-ghost" style={{ marginTop: 20 }}
                  onClick={() => navigate("/")}>Volver al inicio</button>
        </div>
      </main>
    );
  }

  const items = Array.isArray(page.items) ? page.items : [];

  return (
    <main>
      <div style={{ maxWidth: 1400, margin: "0 auto", padding: "26px var(--pad) 0" }}>
        <div className="breadcrumb">
          <a onClick={()=>navigate("/")}>Inicio</a>
          <span>/</span>
          <span className="here">{page.title}</span>
        </div>
      </div>

      <section className="info-layout">
        {/* Sidebar */}
        <nav className="info-nav" aria-label="Secciones de información">
          {pages.map(pg => (
            <button key={pg.slug}
                    className={"info-nav-item" + (pg.slug === page.slug ? " active" : "")}
                    onClick={()=>navigate("/info/" + pg.slug)}>
              <Icon name={pg.icon || "tag"} size={17}/>
              <span>{pg.title}</span>
            </button>
          ))}
        </nav>

        {/* Content */}
        <div className="info-body">
          <h1>{page.title}</h1>
          {page.intro && <p className="info-intro">{page.intro}</p>}

          <div className="info-acc">
            {items.map((it, i) => (
              <div key={i} className="acc">
                <button onClick={()=>setOpen(o => o === i ? -1 : i)}
                        aria-expanded={open === i}>
                  {it.q}
                  <span aria-hidden="true">{open === i ? "−" : "+"}</span>
                </button>
                {open === i && <div className="acc-body">{it.a}</div>}
              </div>
            ))}
          </div>

          {items.length === 0 && (
            <p style={{ color: "var(--ink-2)" }}>Todavía no hay contenido en esta sección.</p>
          )}

          {/* Every info page ends with a way to actually reach a human. */}
          <div className="info-cta">
            <div className="info-cta-t">¿No encuentras lo que buscas?</div>
            <a className="btn"
               href={`https://wa.me/${(store.content?.social?.whatsapp || "51954796222").replace(/\D/g, "")}`}
               target="_blank" rel="noopener">
              <Icon name="whatsapp" size={16}/> Escríbenos
            </a>
          </div>
        </div>
      </section>
    </main>
  );
}

window.InfoPage = InfoPage;