/* global React, ReactDOM */
const { useState, useEffect, useRef, useCallback } = React;

/* ============================================================
   DATOS
   ============================================================ */
const AUTHOR = {
  name: "Libia Montoya Orozco",
  first: "Libia Montoya",
  last: "Orozco",
  tagline: "Cuando la última página no es el final",
  birth: "Cali, Colombia · 1962",
};

const BOOKS = [
  {
    id: "te-atreves-a-preguntarle-al-cielo",
    title: "¿Te atreves a preguntarle al cielo?",
    genre: "Novela · Espiritual",
    synopsis:
      "Esta obra nace de un sueño. Uno que parecía una simple manifestación del inconsciente, pero que con el tiempo se reveló como un mensaje, una brújula, una señal que cruzó los límites entre lo espiritual y lo racional. Un mandato que fue adquiriendo sentido con el inexorable paso del tiempo.",
    featured: true,
    coverImg: "assets/te-atreves-a-preguntarle-al-cielo.jpg",
    links: [
      { store: "Amazon", url: "https://www.amazon.es/%C2%BFTe-atreves-preguntarle-al-cielo/dp/B0FDR6NYD8" },
    ],
  },
  {
    id: "becerro-de-oro",
    title: "El becerro de oro",
    genre: "Novela · Aventura",
    coverImg: "assets/el-becerro-de-oro.jpg",
    synopsis:
      "Las piedras esconden un inquietante secreto en las montañas del Pacífico colombiano. Los años han guardado ese secreto con celo, pero Pedro y Jorgito, dos hermanos de origen humilde, aprenderán a enfrentarse con amor a los retos de la vida. Ambos descubrirán con compañerismo, travesura y encanto que no todo queda oculto para siempre, y mucho menos si está de por medio un malvado becerro.",
    cover: { tone: "earth" },
    links: [
      { store: "Círculo Rojo", url: "https://editorialcirculorojo.com/el-becerro-de-oro/" },
    ],
  },
];

const GENRES = ["Novela romántica", "Biográfico", "Fantasía", "Ciencia ficción"];

const SOCIALS = [
  { name: "Instagram", icon: "instagram", url: "https://www.instagram.com/limontoro" },
  { name: "Facebook", icon: "facebook", url: "https://www.facebook.com/libia.montoyaorozco" },
  { name: "TikTok", icon: "tiktok", url: "https://www.tiktok.com/@limn392" },
];

const BLOG = {
  name: "El alma en tus manos",
  url: "https://elalmaentusmanos.blogspot.com/",
  intro:
    "Microrrelatos y reflexiones breves sobre el amor, la memoria y los pequeños instantes que nos sostienen. Un espacio íntimo donde la última página tampoco es el final.",
  posts: [
    {
      slug: "abrazos",
      title: "Abrazos",
      date: "5 de septiembre de 2018",
      excerpt:
        "Acostumbrada a almohadas de plumas y a restaurantes con estrellas, jamás imaginó que podría sentirse tan bien en ese pequeño refugio… ahí donde lo único que existía era el abrigo de los abrazos del amor.",
      body: [
        "Acostumbrada a almohadas de plumas y a restaurantes con estrellas, jamás imaginó que podría sentirse tan bien en ese pequeño refugio… ahí en donde lo único que existía era el abrigo de los abrazos del amor.",
      ],
    },
    {
      slug: "copas",
      title: "Copas",
      date: "3 de septiembre de 2018",
      excerpt:
        "Las copas se nos deslizaron sudorosas por los nervios de la primera cita y el burbujeante líquido nos invitó a querernos con la mirada. Era una llamada para imaginar juntos un nuevo comienzo.",
      body: [
        "Las copas se nos deslizaron sudorosas por los nervios de la primera cita y el burbujeante líquido nos invitó a querernos con la mirada. Era una llamada para imaginar juntos un nuevo comienzo.",
        "Durante el resto de aquel verano y cada día del otoño nos sentimos profundamente. Después, quisimos que aquello fuera eterno en las interminables horas del invierno.",
        "En la primavera, los colores agitaban nuestra alma y cantábamos de alegría hasta que, de nuevo, el calor del verano llegó y cruelmente marchitó sin explicación el gran sueño de nuestro amor.",
      ],
    },
    {
      slug: "quiero",
      title: "Quiero",
      date: "22 de marzo de 2018",
      excerpt:
        "Quiero tener el cosquilleo que me inquieta cuando verte es impredecible. Deseo estrechar el tiempo para guardar esa imagen, a pesar de que tocarte signifique que pronto nos despediremos otra vez.",
      body: [
        "Quiero tener el cosquilleo que me inquieta cuando verte es impredecible. Deseo estrechar el tiempo para guardar esa imagen, a pesar de que tocarte signifique que pronto nos despediremos otra vez.",
        "Sueño con poder abrazar el tiempo y no dejarte escapar; deseo que la ilusión perdure, aunque sea inevitable que el hormigueo empiece a irse un poco cuando, de nuevo, llega la hora de marchar.",
      ],
    },
  ],
};

/* ============================================================
   ICONOS
   ============================================================ */
function Icon({ name, size = 18 }) {
  const p = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "arrow":
      return (<svg {...p}><path d="M5 12h14M13 6l6 6-6 6" /></svg>);
    case "arrow-ne":
      return (<svg {...p} className="arrow"><path d="M7 17 17 7M8 7h9v9" /></svg>);
    case "close":
      return (<svg {...p}><path d="M6 6l12 12M18 6 6 18" /></svg>);
    case "menu":
      return (<svg {...p}><path d="M4 7h16M4 12h16M4 17h16" /></svg>);
    case "chevron":
      return (<svg {...p}><path d="M6 9l6 6 6-6" /></svg>);
    case "check":
      return (<svg {...p} strokeWidth="2.4"><path d="M5 13l4 4L19 7" /></svg>);
    case "mail":
      return (<svg {...p}><rect x="3" y="5" width="18" height="14" rx="2" /><path d="m3 7 9 6 9-6" /></svg>);
    case "instagram":
      return (<svg {...p}><rect x="3" y="3" width="18" height="18" rx="5" /><circle cx="12" cy="12" r="4" /><circle cx="17.5" cy="6.5" r="0.5" fill="currentColor" /></svg>);
    case "facebook":
      return (<svg {...p}><path d="M15 3h-3a4 4 0 0 0-4 4v3H5v4h3v7h4v-7h3l1-4h-4V7a1 1 0 0 1 1-1h3z" /></svg>);
    case "book":
      return (<svg {...p}><path d="M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2zM19 17H6a2 2 0 0 0-2 2" /></svg>);
    case "tiktok":
      return (<svg {...p}><path d="M14 4c.45 2.5 2 4.1 4.5 4.35" /><path d="M14 4v10.6a3.6 3.6 0 1 1-3.6-3.6c.42 0 .82.07 1.2.2" /></svg>);
    default:
      return null;
  }
}

/* ============================================================
   PLACEHOLDER de imagen
   ============================================================ */
function Placeholder({ label }) {
  return (
    <div className="ph">
      <span className="ph__label">{label}</span>
    </div>
  );
}

/* Portada de libro — imagen real si existe; si no, diseño tipográfico */
function BookCover({ book }) {
  if (book.coverImg) {
    return <img className="cover-img" src={book.coverImg} alt={`Portada de ${book.title}`} />;
  }
  return (
    <div className="cover-art">
      <div className="cover-art__top">Libia Montoya Orozco</div>
      <div>
        <div className="cover-art__title">{book.title}</div>
        <div className="cover-art__rule" />
        <div className="cover-art__author">{book.genre}</div>
      </div>
      <div className="cover-art__deco" />
      <div className="cover-art__deco2" />
    </div>
  );
}

/* ============================================================
   NAVEGACIÓN
   ============================================================ */
const NAV_ITEMS = [
  { id: "inicio", label: "Inicio" },
  { id: "libros", label: "Libros" },
  { id: "blog", label: "Blog" },
  { id: "autora", label: "Sobre la autora" },
  { id: "contacto", label: "Contacto" },
];

function Nav({ active, onNav }) {
  const [solid, setSolid] = useState(false);
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setSolid(window.scrollY > 60);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const go = (id) => { onNav(id); setOpen(false); };

  return (
    <React.Fragment>
      <nav className={"nav" + (solid ? " nav--solid" : "")}>
        <div className="wrap nav__row">
          <button className="nav__brand" onClick={() => go("inicio")} aria-label="Inicio">
            Libia Montoya
            <span>Orozco · Escritora</span>
          </button>
          <div className="nav__links">
            {NAV_ITEMS.map((it) => (
              <button
                key={it.id}
                className={"nav__link" + (active === it.id ? " active" : "")}
                onClick={() => go(it.id)}
              >
                {it.label}
              </button>
            ))}
          </div>
          <button className="nav__toggle" onClick={() => setOpen(true)} aria-label="Abrir menú">
            <Icon name="menu" size={26} />
          </button>
        </div>
      </nav>

      {open && <div className="nav__scrim" onClick={() => setOpen(false)} />}
      <div className={"nav__drawer" + (open ? " open" : "")}>
        <button className="nav__toggle" style={{ position: "absolute", top: 24, right: 22 }} onClick={() => setOpen(false)} aria-label="Cerrar menú">
          <Icon name="close" size={26} />
        </button>
        {NAV_ITEMS.map((it) => (
          <button key={it.id} className={"nav__link" + (active === it.id ? " active" : "")} onClick={() => go(it.id)}>
            {it.label}
          </button>
        ))}
      </div>
    </React.Fragment>
  );
}

/* ============================================================
   HERO / INICIO
   ============================================================ */
function Hero({ onNav, onOpenBook }) {
  const featured = BOOKS.find((b) => b.featured) || BOOKS[0];
  return (
    <header className="hero" id="inicio">
      <div className="hero__bg">
        <img className="hero__img" src="assets/cabecera-inicio.jpg" alt="Manos abiertas, listas para recibir" />
      </div>
      <div className="hero__scrim" />
      <div className="hero__inner wrap">
        <p className="eyebrow hero__eyebrow">Escritora · Pacífico colombiano</p>
        <h1 className="hero__name">{AUTHOR.first}<br />{AUTHOR.last}</h1>
        <p className="hero__tagline">«{AUTHOR.tagline}»</p>
        <div className="hero__cta">
          <button className="btn btn--buy" onClick={() => onOpenBook(featured.id)}>
            Descubre mi último libro&nbsp;<Icon name="arrow-ne" />
          </button>
          <button className="btn btn--ghost" style={{ color: "var(--paper)", borderColor: "oklch(0.92 0.02 70 / 0.5)" }} onClick={() => onNav("libros")}>
            Ver todos los libros
          </button>
        </div>
      </div>
      <button className="hero__scroll" onClick={() => onNav("libros")} aria-label="Bajar">
        Explora
        <Icon name="chevron" size={20} />
      </button>
    </header>
  );
}

/* ============================================================
   LIBROS
   ============================================================ */
function Books({ onOpenBook }) {
  return (
    <section className="section" id="libros">
      <div className="wrap">
        <div className="section__head reveal">
          <p className="eyebrow">Su obra</p>
          <h2 className="section__title">Libros</h2>
          <p className="section__lead">
            Historias nacidas en el Pacífico colombiano que cruzan la novela romántica, lo biográfico,
            la fantasía y la ciencia ficción. Haz clic en cada portada para leer la sinopsis y comprar.
          </p>
        </div>
        <div className="books-grid">
          {BOOKS.map((book, i) => (
            <button
              key={book.id}
              className="book-card reveal"
              style={{ transitionDelay: `${i * 0.08}s` }}
              onClick={() => onOpenBook(book.id)}
            >
              <div className="book-card__cover">
                <BookCover book={book} />
              </div>
              <div className="book-card__meta">
                <div className="book-card__genre">{book.genre}</div>
                <h3 className="book-card__title">{book.title}</h3>
                <span className="book-card__hint">Ver ficha y comprar <Icon name="arrow" size={15} /></span>
              </div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   BLOG · El alma en tus manos
   ============================================================ */
function Blog({ onOpenPost }) {
  return (
    <section className="section section--alt" id="blog">
      <div className="wrap">
        <div className="section__head reveal">
          <p className="eyebrow">Desde el blog</p>
          <h2 className="section__title">El alma en tus manos</h2>
          <p className="section__lead">{BLOG.intro}</p>
        </div>
        <div className="blog-grid">
          {BLOG.posts.map((post, i) => (
            <button
              key={post.slug}
              type="button"
              className="blog-card reveal"
              style={{ transitionDelay: `${i * 0.08}s` }}
              onClick={() => onOpenPost(post.slug)}
            >
              <div className="blog-card__date">{post.date}</div>
              <h3 className="blog-card__title">{post.title}</h3>
              <p className="blog-card__excerpt">{post.excerpt}</p>
              <span className="blog-card__hint">Leer el relato <Icon name="arrow" size={15} /></span>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   FICHA (modal)
   ============================================================ */
function BookModal({ book, onClose }) {
  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = prev; };
  }, [onClose]);

  if (!book) return null;
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true" aria-label={book.title}>
        <button className="modal__close" onClick={onClose} aria-label="Cerrar"><Icon name="close" size={20} /></button>
        <div className="modal__grid">
          <div className="modal__coverwrap">
            <div className={"modal__cover" + (book.coverImg ? " modal__cover--img" : "")}><BookCover book={book} /></div>
          </div>
          <div className="modal__body">
            <p className="eyebrow modal__genre">{book.genre}</p>
            <h2 className="modal__title">{book.title}</h2>
            <div className="modal__synopsis">
              <p>{book.synopsis}</p>
            </div>
            <div className="modal__buy">
              <div className="modal__buy-label">Compra el libro</div>
              {book.links && book.links.length > 0 ? (
                <div className="modal__buttons">
                  {book.links.map((l) => (
                    <a key={l.store} className="btn btn--buy" href={l.url} target="_blank" rel="noopener noreferrer">
                      {l.store} <Icon name="arrow-ne" />
                    </a>
                  ))}
                </div>
              ) : (
                <p className="modal__soon">Disponible muy pronto. Suscríbete a la newsletter para enterarte en cuanto salga a la venta.</p>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   RELATO (modal del blog)
   ============================================================ */
function PostModal({ post, onClose }) {
  const [msg, setMsg] = useState("");

  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = prev; };
  }, [onClose]);

  if (!post) return null;

  const shareUrl = window.location.origin + window.location.pathname + window.location.search + "#/blog/" + post.slug;

  const onShare = async () => {
    const data = { title: post.title + " · Libia Montoya Orozco", text: post.excerpt, url: shareUrl };
    if (navigator.share) {
      try { await navigator.share(data); } catch (e) { /* el usuario canceló */ }
      return;
    }
    try {
      await navigator.clipboard.writeText(shareUrl);
      setMsg("¡Enlace copiado!");
      setTimeout(() => setMsg(""), 2600);
    } catch (e) {
      setMsg(shareUrl);
    }
  };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal modal--post" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true" aria-label={post.title}>
        <button className="modal__close" onClick={onClose} aria-label="Cerrar"><Icon name="close" size={20} /></button>
        <div className="post-modal__body">
          <p className="eyebrow modal__genre">El alma en tus manos</p>
          <h2 className="modal__title">{post.title}</h2>
          <div className="post-modal__date">{post.date}</div>
          <div className="post-modal__text">
            {post.body.map((para, i) => <p key={i}>{para}</p>)}
          </div>
          <div className="post-modal__share">
            <button className="btn btn--buy" type="button" onClick={onShare}>
              Compartir <Icon name="arrow-ne" size={16} />
            </button>
            {msg && <span className="post-modal__msg">{msg}</span>}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   SOBRE LA AUTORA
   ============================================================ */
function About() {
  return (
    <section className="section" id="autora">
      <div className="wrap">
        <div className="about">
          <div className="about__photo reveal">
            <div className="about__photo-frame" />
            <img className="about__img" src="assets/libia-montoya-autora.jpg" alt="Libia Montoya Orozco" />
          </div>
          <div className="about__bio reveal" style={{ transitionDelay: "0.1s" }}>
            <p className="eyebrow">Sobre la autora</p>
            <h2 className="section__title" style={{ marginBottom: "0.5em" }}>{AUTHOR.name}</h2>
            <p className="lead">
              Nací en {AUTHOR.birth}, en el Pacífico colombiano: un lugar de mar, montaña y memoria
              que ha inspirado todas mis historias.
            </p>
            <p>
              Libia Montoya Orozco encuentra en el paisaje y en la gente del Pacífico la materia de
              sus relatos. Sus novelas se mueven entre la novela romántica, lo biográfico, la fantasía
              y la ciencia ficción, siempre con un mismo hilo: personajes humildes que aprenden a
              enfrentarse con amor a los retos de la vida.
            </p>
            <p>
              En sus páginas conviven la travesura y la ternura, el secreto y el descubrimiento,
              porque para ella escribir es recordar que, cuando llega la última página, la historia
              todavía no ha terminado.
            </p>
            <div className="about__socials">
              {SOCIALS.map((s) => (
                <a key={s.name} className="social-btn" href={s.url} target="_blank" rel="noopener noreferrer">
                  <Icon name={s.icon} size={17} /> {s.name}
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   CONTACTO / NEWSLETTER
   ============================================================ */
function Newsletter() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [err, setErr] = useState("");
  const [done, setDone] = useState(false);

  const submit = (e) => {
    e.preventDefault();
    const ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim());
    if (!ok) { setErr("Introduce un correo electrónico válido."); return; }
    setErr("");
    setDone(true);
  };

  return (
    <section className="section" id="contacto">
      <div className="wrap">
        <div className="newsletter reveal">
          <div className="newsletter__deco" />
          <div className="newsletter__deco2" />
          <div className="newsletter__inner">
            <p className="eyebrow newsletter__eyebrow">Mantente cerca</p>
            <h2 className="newsletter__title">Recibe las novedades</h2>
            {!done ? (
              <React.Fragment>
                <p className="newsletter__lead">
                  Déjame tu correo y serás de los primeros en conocer nuevos libros, presentaciones
                  y relatos inéditos. Sin ruido: solo cuando hay algo que merece la pena contar.
                </p>
                <form className="nl-form" onSubmit={submit} noValidate>
                  <div className="nl-form__field">
                    <input
                      type="text"
                      placeholder="Tu nombre (opcional)"
                      value={name}
                      onChange={(e) => setName(e.target.value)}
                      aria-label="Nombre"
                    />
                  </div>
                  <div className="nl-form__field">
                    <input
                      type="email"
                      className={err ? "err" : ""}
                      placeholder="Tu correo electrónico"
                      value={email}
                      onChange={(e) => { setEmail(e.target.value); if (err) setErr(""); }}
                      aria-label="Correo electrónico"
                    />
                  </div>
                  <button className="btn btn--buy" type="submit" style={{ minWidth: 150, justifyContent: "center" }}>
                    Suscribirme <Icon name="mail" size={17} />
                  </button>
                </form>
                {err && <div className="nl-form__msg err">{err}</div>}
                <p className="newsletter__fine">Respeto tu privacidad. Puedes darte de baja cuando quieras.</p>
              </React.Fragment>
            ) : (
              <div className="nl-success">
                <span className="nl-success__check"><Icon name="check" size={22} /></span>
                <span>¡Gracias{name ? `, ${name}` : ""}! Te avisaré cuando la próxima historia esté lista.</span>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   FOOTER
   ============================================================ */
function Footer({ onNav }) {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer__row">
          <div>
            <div className="footer__brand">{AUTHOR.name}</div>
            <div className="footer__tag">«{AUTHOR.tagline}»</div>
          </div>
          <div className="footer__links">
            {NAV_ITEMS.map((it) => (
              <button key={it.id} onClick={() => onNav(it.id)}>{it.label}</button>
            ))}
          </div>
        </div>
        <div className="footer__legal">
          © {new Date().getFullYear()} {AUTHOR.name}. Todos los derechos reservados.
        </div>
      </div>
    </footer>
  );
}

/* ============================================================
   APP
   ============================================================ */
function App() {
  const [active, setActive] = useState("inicio");
  const [openBookId, setOpenBookId] = useState(null);
  const [openPostSlug, setOpenPostSlug] = useState(null);

  const scrollTo = useCallback((id) => {
    const el = document.getElementById(id);
    if (el) {
      const top = id === "inicio" ? 0 : el.getBoundingClientRect().top + window.scrollY - 70;
      window.scrollTo({ top, behavior: "smooth" });
    }
  }, []);

  // Scroll-spy
  useEffect(() => {
    const ids = NAV_ITEMS.map((n) => n.id);
    const onScroll = () => {
      const y = window.scrollY + window.innerHeight * 0.35;
      let current = "inicio";
      for (const id of ids) {
        const el = document.getElementById(id);
        if (el && el.offsetTop <= y) current = id;
      }
      setActive(current);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Reveal on scroll
  useEffect(() => {
    document.documentElement.classList.add("js-anim");
    const obs = new IntersectionObserver(
      (entries) => entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); obs.unobserve(e.target); } }),
      { threshold: 0.12 }
    );
    document.querySelectorAll(".reveal").forEach((el) => obs.observe(el));
    return () => obs.disconnect();
  }, []);

  const openBook = (id) => setOpenBookId(id);
  const book = BOOKS.find((b) => b.id === openBookId);

  // Enlaces compartibles del blog: la URL #/blog/<slug> abre el relato.
  useEffect(() => {
    const sync = () => {
      const m = window.location.hash.match(/^#\/blog\/(.+)$/);
      setOpenPostSlug(m ? decodeURIComponent(m[1]) : null);
    };
    sync();
    window.addEventListener("hashchange", sync);
    return () => window.removeEventListener("hashchange", sync);
  }, []);

  const openPost = (slug) => { window.location.hash = "/blog/" + slug; };
  const closePost = () => {
    history.replaceState(null, "", window.location.pathname + window.location.search);
    setOpenPostSlug(null);
  };
  const post = BLOG.posts.find((p) => p.slug === openPostSlug);

  return (
    <React.Fragment>
      <Nav active={active} onNav={scrollTo} />
      <Hero onNav={scrollTo} onOpenBook={openBook} />
      <Books onOpenBook={openBook} />
      <Blog onOpenPost={openPost} />
      <About />
      <Newsletter />
      <Footer onNav={scrollTo} />
      {book && <BookModal book={book} onClose={() => setOpenBookId(null)} />}
      {post && <PostModal post={post} onClose={closePost} />}
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);