// ============================================================
// RFQ form — used inline at the end of industry/detail pages
// AND as the dedicated /oferta page.
// ============================================================

const { useState: rfqUseState } = React;

function RFQForm({ defaultIndustry, prefillCollection, light = false }) {
  const [state, setState] = rfqUseState({
    company: "",
    type: defaultIndustry || "restaurant",
    city: "",
    contact: "",
    phone: "",
    email: "",
    collection: prefillCollection || "",
    seats: "",
    message: "",
  });
  const [submitted, setSubmitted] = rfqUseState(false);
  const [ref, setRef] = rfqUseState("");

  const update = (k) => (e) => setState({ ...state, [k]: e.target.value });

  const submit = (e) => {
    e.preventDefault();
    // Fake reference code
    const r = "OW-" + Math.random().toString(36).slice(2, 6).toUpperCase() + "-" + new Date().getFullYear();
    setRef(r);
    setSubmitted(true);
    window.scrollTo({ top: e.target.getBoundingClientRect().top + window.scrollY - 100, behavior: "smooth" });
  };

  if (submitted) {
    return (
      <div className="rfq-success">
        <div className="check">
          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="20 6 9 17 4 12" />
          </svg>
        </div>
        <h3>Cererea a fost înregistrată.</h3>
        <p style={{ maxWidth: 480, margin: "0 auto" }}>
          Mulțumim, {state.contact || "ai trimis cererea"}. Revenim cu o ofertă personalizată în 24–48 de ore lucrătoare.
        </p>
        <div className="rfq-success-ref">Referință: {ref}</div>
      </div>
    );
  }

  return (
    <form className="rfq-form" onSubmit={submit}>
      <div className="rfq-field">
        <label htmlFor="rfq-company">Nume firmă / locație</label>
        <input
          id="rfq-company"
          type="text"
          required
          value={state.company}
          onChange={update("company")}
          placeholder="ex. Restaurant Casa Veche"
        />
      </div>
      <div className="rfq-field">
        <label htmlFor="rfq-type">Tip locație</label>
        <select id="rfq-type" value={state.type} onChange={update("type")}>
          <option value="restaurant">Restaurant</option>
          <option value="cafenea">Cafenea</option>
          <option value="hotel">Hotel</option>
          <option value="catering">Catering / evenimente</option>
          <option value="alt">Alt HoReCa</option>
        </select>
      </div>
      <div className="rfq-field">
        <label htmlFor="rfq-city">Oraș</label>
        <input
          id="rfq-city"
          type="text"
          required
          value={state.city}
          onChange={update("city")}
          placeholder="ex. București, Cluj, Brașov"
        />
      </div>
      <div className="rfq-field">
        <label htmlFor="rfq-contact">Persoana de contact</label>
        <input
          id="rfq-contact"
          type="text"
          required
          value={state.contact}
          onChange={update("contact")}
          placeholder="Nume și prenume"
        />
      </div>
      <div className="rfq-field">
        <label htmlFor="rfq-phone">Telefon</label>
        <input
          id="rfq-phone"
          type="tel"
          required
          value={state.phone}
          onChange={update("phone")}
          placeholder="07XX XXX XXX"
        />
      </div>
      <div className="rfq-field">
        <label htmlFor="rfq-email">Email (opțional)</label>
        <input
          id="rfq-email"
          type="email"
          value={state.email}
          onChange={update("email")}
          placeholder="contact@locatia-ta.ro"
        />
      </div>
      <div className="rfq-field">
        <label htmlFor="rfq-collection">Colecție / tip produse de interes</label>
        <input
          id="rfq-collection"
          type="text"
          value={state.collection}
          onChange={update("collection")}
          placeholder="ex. Genesis, Iris, sau «set complet 6 persoane»"
        />
      </div>
      <div className="rfq-field">
        <label htmlFor="rfq-seats">Număr locuri / mese / persoane</label>
        <input
          id="rfq-seats"
          type="text"
          value={state.seats}
          onChange={update("seats")}
          placeholder="ex. 60 locuri, 18 mese"
        />
      </div>
      <div className="rfq-field full">
        <label htmlFor="rfq-message">Detalii cerere</label>
        <textarea
          id="rfq-message"
          value={state.message}
          onChange={update("message")}
          placeholder="Pe scurt: tipul de operare, cantitatea estimată, termenul dorit de livrare, alte preferințe."
        />
      </div>
      <div className="rfq-submit-row">
        <div className="rfq-fineprint">
          Trimitem o ofertă personalizată în 24–48 de ore lucrătoare. Datele tale sunt folosite doar pentru această cerere.
        </div>
        <button type="submit" className="btn btn-gold">
          Trimite cererea <span className="arrow">→</span>
        </button>
      </div>
    </form>
  );
}

// RFQ section wrapper — copy + form
function RFQSection({ industry, prefillCollection, light = false, compact = false }) {
  const meta = industry ? window.OWITHU.INDUSTRIES[industry] : null;
  const title = meta ? `Trimite cererea pentru ${meta.name.toLowerCase()}` : "Trimite cererea de ofertă";
  const lede = meta
    ? `Spune-ne câteva detalii despre locație și revenim cu o propunere de colecție și cantitate, dimensionată pe ${meta.name.toLowerCase()}.`
    : "Spune-ne câteva detalii și revenim cu o propunere de set complet, dimensionată pe locația ta.";

  return (
    <section className={`rfq-section ${light ? "light" : ""}`} id="rfq">
      <div className="container-wide">
        <div className="rfq-grid">
          <div>
            <span className={`eyebrow ${light ? "" : "on-dark"}`}>Cerere de ofertă</span>
            <h2 style={{ margin: "16px 0 24px" }}>{title}</h2>
            <p className="lede">{lede}</p>
            {!compact && (
              <ul className="checklist">
                <li><span className="bullet"></span>Răspuns în 24–48 de ore lucrătoare.</li>
                <li><span className="bullet"></span>Propunere de colecție potrivită locației tale.</li>
                <li><span className="bullet"></span>Cantitate dimensionată pe numărul de mese / locuri.</li>
                <li><span className="bullet"></span>Termen și condiții de livrare discutate punctual.</li>
              </ul>
            )}
          </div>
          <div>
            <RFQForm
              defaultIndustry={
                meta
                  ? (meta.slug === "restaurante" ? "restaurant"
                    : meta.slug === "cafenele" ? "cafenea"
                    : meta.slug === "hoteluri" ? "hotel" : "restaurant")
                  : undefined
              }
              prefillCollection={prefillCollection}
            />
          </div>
        </div>
      </div>
    </section>
  );
}

window.OwithuRFQ = { RFQForm, RFQSection };