/* Sobre nosotros, Contacto (form + mailto) y Privacidad. */
(function () {
  const { useState, useEffect } = React;

  /* ----------------------------------------------------------- Sobre nosotros */
  const WORK = [
    { icon: "search", color: "var(--cielo)", title: "Investigación", text: "Miramos qué falta en las estanterías y hablamos con quien lee con niños cada día." },
    { icon: "ruler", color: "var(--mostaza)", title: "Diseño editorial", text: "Decidimos edad, tono y estructura. Que se lea fácil y apetezca pasar página." },
    { icon: "brush", color: "var(--menta)", title: "Ilustración", text: "Buscamos un estilo cálido y propio, lejos del dibujo genérico de catálogo." },
    { icon: "printer", color: "var(--accent)", title: "Impresión bajo demanda", text: "Imprimimos según se pide. Menos almacén, menos desperdicio, más cuidado." },
  ];

  const THEMES = [
    {
      icon: "book", color: "var(--cielo)", tint: "color-mix(in srgb, var(--cielo) 16%, #fff)", num: "01", title: "Aprender",
      text: "Cada libro deja algo dentro: una palabra nueva, una idea o una forma distinta de mirar el mundo. Escribimos con claridad y a la altura de cada edad, para que aprender resulte natural y nunca se sienta como una obligación.",
    },
    {
      icon: "smile", color: "var(--mostaza)", tint: "color-mix(in srgb, var(--mostaza) 20%, #fff)", num: "02", title: "Divertirse",
      text: "Aprender se disfruta mucho más cuando se juega. Por eso llenamos las páginas de humor, sorpresas y pequeños retos: libros con los que dan ganas de reír, adivinar y correr a pasar a la página siguiente.",
    },
    {
      icon: "heart", color: "var(--accent)", tint: "var(--accent-tint)", num: "03", title: "Amar la lectura",
      text: "Queremos sembrar, desde bien pequeños, el cariño por los libros. Que leer se convierta en un momento querido —en casa, en clase o antes de dormir— al que apetece volver una y otra vez.",
    },
  ];

  function About({ navigate }) {
    useEffect(() => { window.scrollTo(0, 0); }, []);
    return (
      <main>
        <section className="about-hero">
          <div className="hero-bg" aria-hidden="true">
            <Deco.Blob color="var(--accent-tint)" style={{ position: "absolute", width: 540, top: -160, right: -100 }} />
            <Deco.Blob color="#E7F6EE" style={{ position: "absolute", width: 380, bottom: -160, left: -120 }} />
          </div>
          <div className="wrap about-hero-inner">
            <span className="eyebrow eyebrow-center reveal in"><span className="eyebrow-dot"></span>Sobre nosotros</span>
            <h1 className="about-title reveal in">Una editorial pequeña, hecha con mucho cariño.</h1>
            <p className="about-sub reveal in">En Fun Editorial publicamos libros infantiles con un solo objetivo: que los niños aprendan, se diviertan y descubran lo bonito que es perderse en un libro.</p>
          </div>
        </section>

        <section className="section">
          <div className="wrap about-intro">
            <div className="about-intro-head reveal in">
              <span className="kicker">Quiénes somos</span>
              <h2 className="section-title">Pocos libros, muy cuidados</h2>
            </div>
            <div className="about-intro-body reveal in">
              <p>Somos una editorial independiente y pequeña. Hacemos libros infantiles sin prisa, eligiendo bien cada título y leyendo cada página en voz alta antes de darla por buena.</p>
              <p>Preferimos publicar menos y que todo lo que sale lleve nuestro sello: textos claros, retos a su medida y una idea sencilla detrás de cada libro. Que los niños aprendan jugando y cojan un libro porque les apetece, no porque toca.</p>
            </div>
          </div>
        </section>

        <section className="section section-tint about-themes">
          <div className="wrap">
            <div className="section-head center reveal in">
              <span className="kicker">En lo que creemos</span>
              <h2 className="section-title">Tres cosas que cuidamos en cada libro</h2>
            </div>
            <div className="themes-list">
              {THEMES.map((t) => (
                <div className="theme-row reveal in" key={t.title}>
                  <div className="theme-visual" style={{ background: t.tint }}>
                    <span className="theme-num mono">{t.num}</span>
                    <span className="value-icon theme-icon" style={{ background: t.color }}><Icon name={t.icon} size={38} style={{ color: "#fff" }} /></span>
                  </div>
                  <div className="theme-copy">
                    <h3 className="theme-title">{t.title}</h3>
                    <p>{t.text}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        <section className="section">
          <div className="wrap">
            <div className="section-head center reveal in">
              <span className="kicker">Cómo trabajamos</span>
              <h2 className="section-title">De la idea al libro</h2>
            </div>
            <div className="work-grid">
              {WORK.map((w, i) => (
                <div className="work-card reveal in card-hover" key={w.title} style={{ "--reveal-delay": `${i * 80}ms` }}>
                  <span className="value-icon" style={{ background: w.color }}><Icon name={w.icon} size={26} style={{ color: "#fff" }} /></span>
                  <h3 className="value-title" style={{ fontSize: "1.25rem" }}>{w.title}</h3>
                  <p className="value-text">{w.text}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        <section className="section" style={{ paddingTop: 0 }}>
          <div className="wrap">
            <div className="schools" style={{ background: "var(--menta)", boxShadow: "0 30px 70px -34px rgba(141,217,181,.8)" }}>
              <div className="schools-deco" aria-hidden="true"><Icon name="heart" size={110} style={{ color: "rgba(255,255,255,.92)" }} /></div>
              <div className="schools-body">
                <h2 className="schools-title" style={{ color: "#0f3d2c" }}>¿Echas un vistazo a lo que hacemos?</h2>
                <p className="schools-text" style={{ color: "#14492f" }}>La mejor manera de conocernos es por nuestros libros.</p>
                <a href="#/libros" className="btn btn-soft btn-lg" onClick={(e) => { e.preventDefault(); navigate("libros"); }}>Ver catálogo <Icon name="arrow-right" size={18} /></a>
              </div>
            </div>
          </div>
        </section>
      </main>
    );
  }

  /* ------------------------------------------------------------------ Contacto */
  function Contact() {
    useEffect(() => { window.scrollTo(0, 0); }, []);
    const [f, setF] = useState({ name: "", email: "", message: "" });
    const [touched, setTouched] = useState({});
    const errs = {
      name: f.name.trim().length < 2 ? "Dinos tu nombre." : "",
      email: !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(f.email) ? "Necesitamos un email válido." : "",
      message: f.message.trim().length < 10 ? "Cuéntanos un poco más (mín. 10 caracteres)." : "",
    };
    const valid = !errs.name && !errs.email && !errs.message;
    const submit = (e) => {
      e.preventDefault();
      setTouched({ name: true, email: true, message: true });
      if (!valid) return;
      const body = encodeURIComponent(`Nombre: ${f.name}\nEmail: ${f.email}\n\n${f.message}`);
      window.location.href = `mailto:funeditorial@funeditorial.com?subject=${encodeURIComponent("Contacto desde la web — " + f.name)}&body=${body}`;
    };
    const field = (k) => touched[k] && errs[k];

    return (
      <main>
        <section className="contact">
          <div className="wrap contact-grid">
            <div className="contact-info">
              <span className="kicker reveal in">Contacto</span>
              <h1 className="contact-title reveal in">Escríbenos. Leemos todo.</h1>
              <p className="contact-lead reveal in">¿Una duda, una propuesta o necesitas recomendaciones para tu cole o biblioteca? Cuéntanoslo y te respondemos pronto, de persona a persona.</p>
              <div className="contact-channels reveal in">
                <a href="mailto:funeditorial@funeditorial.com" className="contact-channel">
                  <span className="contact-ch-icon"><Icon name="mail" size={22} /></span>
                  <span><span className="contact-ch-k mono">Email</span><span className="contact-ch-v">funeditorial@funeditorial.com</span></span>
                </a>
                <div className="contact-social">
                  <a href="#" aria-label="Instagram" className="footer-soc" style={{ background: "var(--crema-2)", color: "var(--carbon)" }}><Icon name="instagram" size={20} /></a>
                  <a href="#" aria-label="Facebook" className="footer-soc" style={{ background: "var(--crema-2)", color: "var(--carbon)" }}><Icon name="facebook" size={20} /></a>
                </div>
              </div>
              <div className="contact-deco" aria-hidden="true">
                <Deco.Blob color="var(--accent-tint)" style={{ position: "absolute", width: 260, bottom: -40, left: -30 }} />
                <Icon name="send" size={70} style={{ color: "var(--accent)", position: "relative" }} className="float-b" />
              </div>
            </div>

            <form className="contact-form reveal in" onSubmit={submit} noValidate>
              <div className="form-row">
                <label htmlFor="cf-name">Nombre</label>
                <input id="cf-name" type="text" value={f.name} placeholder="Cómo te llamas"
                  onChange={(e) => setF({ ...f, name: e.target.value })} onBlur={() => setTouched(t => ({ ...t, name: true }))}
                  className={field("name") ? "err" : ""} />
                {field("name") && <span className="form-err">{errs.name}</span>}
              </div>
              <div className="form-row">
                <label htmlFor="cf-email">Email</label>
                <input id="cf-email" type="email" value={f.email} placeholder="tu@email.com"
                  onChange={(e) => setF({ ...f, email: e.target.value })} onBlur={() => setTouched(t => ({ ...t, email: true }))}
                  className={field("email") ? "err" : ""} />
                {field("email") && <span className="form-err">{errs.email}</span>}
              </div>
              <div className="form-row">
                <label htmlFor="cf-msg">Mensaje</label>
                <textarea id="cf-msg" rows="5" value={f.message} placeholder="Cuéntanos en qué podemos ayudarte"
                  onChange={(e) => setF({ ...f, message: e.target.value })} onBlur={() => setTouched(t => ({ ...t, message: true }))}
                  className={field("message") ? "err" : ""}></textarea>
                {field("message") && <span className="form-err">{errs.message}</span>}
              </div>
              <button type="submit" className="btn btn-lg" style={{ width: "100%", justifyContent: "center" }}>
                Enviar mensaje <Icon name="send" size={18} />
              </button>
              <p className="form-note mono">Al enviar se abrirá tu correo con el mensaje listo.</p>
            </form>
          </div>
        </section>
      </main>
    );
  }

  /* ----------------------------------------------------------------- Privacidad */
  function Privacy() {
    useEffect(() => { window.scrollTo(0, 0); }, []);
    const blocks = [
      ["Quiénes somos", "Fun Editorial es una editorial independiente española de libros infantiles. Esta web es informativa y no vende productos directamente."],
      ["Qué datos recogemos", "Si nos escribes desde el formulario de contacto, tratamos tu nombre y email solo para responderte. No usamos ese dato para nada más."],
      ["Enlaces a Amazon", "Algunos enlaces llevan a Amazon. Como Asociados de Amazon, podemos recibir una pequeña comisión por las compras que cumplan los requisitos, sin coste extra para ti."],
      ["Cookies", "Usamos cookies técnicas y de medición de audiencia de forma agregada. Puedes gestionarlas desde el aviso inferior."],
      ["Tus derechos", "Puedes solicitar acceder, rectificar o eliminar tus datos escribiendo a funeditorial@funeditorial.com."],
    ];
    return (
      <main className="section">
        <div className="wrap wrap-narrow legal">
          <span className="kicker">Legal</span>
          <h1 className="section-title" style={{ marginBottom: 8 }}>Privacidad</h1>
          <p className="legal-updated mono">Última actualización · {new Date().toLocaleDateString("es-ES", { year: "numeric", month: "long" })}</p>
          {blocks.map(([h, t]) => (
            <div className="legal-block" key={h}>
              <h2 className="legal-h">{h}</h2>
              <p>{t}</p>
            </div>
          ))}
        </div>
      </main>
    );
  }

  window.About = About;
  window.Contact = Contact;
  window.Privacy = Privacy;
})();