/* Wisdom — bits compartidos: PageHero, LogoMarquee (logos reales), campos de formulario. */
(function () {
  const { useState } = React;
  const W = window.WISDOM;

  /* Encabezado de página interna */
  function PageHero({ eyebrow, title, gold, lead, children }) {
    return (
      <section className="page-hero">
        <div className="page-hero-glow" />
        <div className="wrap">
          {eyebrow && <p className="eyebrow">{eyebrow}</p>}
          <h1 className="page-hero-title">
            {title} {gold && <span className="gold-text">{gold}</span>}
          </h1>
          {lead && <p className="page-hero-lead">{lead}</p>}
          {children}
        </div>
      </section>
    );
  }

  /* Un logo de cliente: intenta el archivo real en assets/logos/clients/<slug>.png
     (mostrado en monocromo); si no existe todavía, cae a un wordmark tipográfico. */
  function LogoChip({ name, slug }) {
    const BIG = new Set(["avalian", "proyecto-norte", "bayer", "la-virginia"]);
    const [failed, setFailed] = useState(false);
    return (
      <span className={`logo-chip${slug === "la-virginia" ? " logo-chip--lavirginia" : ""}${slug === "bayer" ? " logo-chip--bayer" : ""}`}>
        {!failed && (
          <img className={`logo-img${BIG.has(slug) ? " logo-img--lg" : ""}${slug === "la-virginia" ? " logo-img--xl" : ""}${slug === "bayer" ? " logo-img--bayer" : ""}`} src={`assets/clients/${slug}.png`} alt={name}
               onError={() => setFailed(true)} />
        )}
        {failed && <span className="logo-word">{name}</span>}
      </span>
    );
  }

  function LogoMarquee() {
    const loop = [...W.LOGOS, ...W.LOGOS];
    return (
      <div className="logos">
        <p className="logos-label">Clientes que confían en Wisdom</p>
        <div className="marquee">
          <div className="marquee-track">
            {loop.map((l, i) => <LogoChip key={i} name={l.name} slug={l.slug} />)}
          </div>
        </div>
      </div>
    );
  }

  /* Campos de formulario */
  function Field({ label, type = "text", name, placeholder, required, optional }) {
    return (
      <label className="field">
        <span className="field-label">{label}{required && <i> *</i>}{optional && <em> (opcional)</em>}</span>
        <input className="field-input" type={type} name={name} placeholder={placeholder} required={required} />
      </label>
    );
  }

  function Select({ label, name, options, required }) {
    return (
      <label className="field">
        <span className="field-label">{label}{required && <i> *</i>}</span>
        <div className="field-select-wrap">
          <select className="field-input field-select" name={name} required={required} defaultValue="">
            <option value="" disabled>Seleccioná una opción</option>
            {options.map((o) => <option key={o} value={o}>{o}</option>)}
          </select>
          <svg className="field-select-ico" viewBox="0 0 16 16" width="14" height="14" fill="none"><path d="M4 6l4 4 4-4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg>
        </div>
      </label>
    );
  }

  function Textarea({ label, name, placeholder, required }) {
    return (
      <label className="field field--full">
        <span className="field-label">{label}{required && <i> *</i>}</span>
        <textarea className="field-input field-textarea" name={name} rows="5" placeholder={placeholder} required={required}></textarea>
      </label>
    );
  }

  function FileField({ label, name, optional }) {
    const [fname, setFname] = useState("");
    return (
      <label className="field field--full">
        <span className="field-label">{label}{optional && <em> (opcional)</em>}</span>
        <div className="field-file">
          <span className="field-file-btn">Adjuntar archivo</span>
          <span className="field-file-name">{fname || "Ningún archivo seleccionado"}</span>
          <input type="file" name={name} className="field-file-input"
                 onChange={(e) => setFname(e.target.files[0] ? e.target.files[0].name : "")} />
        </div>
      </label>
    );
  }

  /* Formulario genérico con estado de envío (mock) */
  function ContactForm({ fields, button }) {
    const [sent, setSent] = useState(false);
    if (sent) {
      return (
        <div className="form-sent">
          <div className="form-sent-mark">✓</div>
          <h3>Mensaje enviado.</h3>
          <p>Gracias por escribirnos. Te respondemos en menos de 24 horas.</p>
        </div>
      );
    }
    return (
      <form className="form" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
        <div className="form-grid">{fields}</div>
        <button className="form-submit" type="submit">{button}</button>
      </form>
    );
  }

  Object.assign(window, { WPageHero: PageHero, WLogoMarquee: LogoMarquee, WField: Field, WSelect: Select, WTextarea: Textarea, WFileField: FileField, WContactForm: ContactForm });
})();