// apply.jsx — Operator application stepper

const { useState, useMemo, useEffect } = React;

const STEPS = {
  en: [
    { id: "business", t: "Your business", d: "Tell us about the storefront you'd host from." },
    { id: "contact",  t: "How to reach you", d: "Who runs point on this application?" },
    { id: "operation", t: "Your operation", d: "Help us understand your reach and motivation." },
    { id: "review",   t: "Review", d: "Confirm everything is right before submitting." },
  ],
  es: [
    { id: "business", t: "Tu negocio", d: "Cuéntanos sobre el local desde donde operarías." },
    { id: "contact",  t: "Cómo contactarte", d: "¿Quién lidera esta postulación?" },
    { id: "operation", t: "Tu operación", d: "Ayúdanos a entender tu alcance y motivación." },
    { id: "review",   t: "Revisa", d: "Confirma que todo esté correcto antes de enviar." },
  ],
};

const COPY = {
  en: {
    title: "Operator application",
    sub: "Less than 5 minutes. Personal review within 72 hours.",
    back: "Back",
    next: "Continue",
    submit: "Submit application",
    home: "Back to home",
    step: "Step",
    of: "of",
    field: {
      biz: "Business or operation name",
      bizPh: "Sunset Coffee Bar",
      type: "Business type",
      city: "City",
      cityPh: "Los Angeles",
      country: "Country",
      countryOpts: ["United States", "Mexico", "Colombia", "Spain", "Other"],
      address1: "Address line 1",
      address1Ph: "1234 Sunset Blvd",
      address2: "Address line 2",
      address2Ph: "Suite, floor, unit (optional)",
      state: "State / Province",
      statePh: "California",
      zip: "ZIP / Postal code",
      zipPh: "90013",
      multiple: "I operate or own multiple locations",
      multipleHint: "We'll roll out to additional locations as part of the same agreement.",
      multipleCount: "How many locations total?",
      multipleCountOpts: ["2", "3", "4–5", "6–10", "10+"],
      multipleDetails: "Tell us about your other locations",
      multipleDetailsPh: "Where are they, and what kind of foot traffic do they get?",
      contact: "Contact name",
      contactPh: "Alex Rivera",
      role: "Your role",
      roleOpts: ["Owner", "Manager", "Partner", "Employee", "Other"],
      phone: "Phone",
      phonePh: "+1 555 040 1820",
      email: "Email",
      emailPh: "alex@sunsetcoffee.com",
      traffic: "Estimated daily foot traffic",
      trafficOpts: ["Under 100 / day", "100–300 / day", "300–800 / day", "800–2,000 / day", "Over 2,000 / day"],
      hours: "Hours open per week",
      hoursOpts: ["Under 30", "30–50", "50–70", "70–90", "90+"],
      experience: "Operator or hospitality experience",
      expOpts: ["First-time operator", "Some hospitality / retail", "Years of management", "Multi-location operator"],
      why: "Why do you want to operate?",
      whyPh: "Tell us a little about your storefront, your neighborhood, and why this matters to you.",
    },
    types: ["Café", "Restaurant", "Retail store", "Gaming lounge", "Phone store", "Barber shop", "Smoke shop", "Convenience store", "Mall kiosk", "Other"],
    review_t: "Review your application",
    review_d: "If anything looks off, jump back to any step to edit. Once submitted, our operator team reviews within 72 hours.",
    consent: "I confirm I'm the owner or authorized representative of this business, and I'm comfortable being contacted by the operator team.",
    success_t: "Application received.",
    success_d: "An operator from your region will be in touch within 72 hours.",
    appId: "Application ID",
    nextSteps: "Next steps",
    nextStepsList: [
      "We review every application personally — usually within 72 hours.",
      "If approved, we schedule an interview to discuss your operation in detail.",
      "After the interview, you receive the Orb, training, and access to operator tools.",
      "Once installed, you're a live node — and start operating from day one.",
    ],
  },
  es: {
    title: "Postulación de operador",
    sub: "Menos de 5 minutos. Revisión personal en 72 horas.",
    back: "Atrás",
    next: "Continuar",
    submit: "Enviar postulación",
    home: "Volver al inicio",
    step: "Paso",
    of: "de",
    field: {
      biz: "Nombre del negocio u operación",
      bizPh: "Sunset Coffee Bar",
      type: "Tipo de negocio",
      city: "Ciudad",
      cityPh: "Los Angeles",
      country: "País",
      countryOpts: ["Estados Unidos", "México", "Colombia", "España", "Otro"],
      address1: "Dirección — línea 1",
      address1Ph: "Av. Insurgentes 1234",
      address2: "Dirección — línea 2",
      address2Ph: "Suite, piso, unidad (opcional)",
      state: "Estado / Provincia",
      statePh: "Jalisco",
      zip: "Código postal",
      zipPh: "44100",
      multiple: "Opero o soy dueño de varias ubicaciones",
      multipleHint: "Lo desplegamos en más ubicaciones bajo el mismo acuerdo.",
      multipleCount: "¿Cuántas ubicaciones en total?",
      multipleCountOpts: ["2", "3", "4–5", "6–10", "10+"],
      multipleDetails: "Cuéntanos sobre tus otras ubicaciones",
      multipleDetailsPh: "¿Dónde están y qué tipo de tráfico tienen?",
      contact: "Nombre de contacto",
      contactPh: "Alex Rivera",
      role: "Tu rol",
      roleOpts: ["Dueño", "Gerente", "Socio", "Empleado", "Otro"],
      phone: "Teléfono",
      phonePh: "+52 55 0040 1820",
      email: "Correo electrónico",
      emailPh: "alex@sunsetcoffee.com",
      traffic: "Tráfico diario estimado",
      trafficOpts: ["Menos de 100 / día", "100–300 / día", "300–800 / día", "800–2,000 / día", "Más de 2,000 / día"],
      hours: "Horas abiertas por semana",
      hoursOpts: ["Menos de 30", "30–50", "50–70", "70–90", "90+"],
      experience: "Experiencia como operador u hostelería",
      expOpts: ["Primera vez", "Algo de hostelería / retail", "Años de gerencia", "Operador multi-local"],
      why: "¿Por qué quieres operar?",
      whyPh: "Cuéntanos sobre tu local, tu barrio y por qué esto te importa.",
    },
    types: ["Café", "Restaurante", "Tienda", "Sala de juegos", "Tienda de celulares", "Barbería", "Smoke shop", "Tienda de conveniencia", "Kiosco en mall", "Otro"],
    review_t: "Revisa tu postulación",
    review_d: "Si algo no se ve bien, vuelve a cualquier paso para editar. Una vez enviada, nuestro equipo revisa en 72 horas.",
    consent: "Confirmo que soy el dueño o representante autorizado de este negocio, y acepto ser contactado por el equipo de operadores.",
    success_t: "Postulación recibida.",
    success_d: "Un operador de tu región te contactará en 72 horas.",
    appId: "ID de postulación",
    nextSteps: "Próximos pasos",
    nextStepsList: [
      "Revisamos cada postulación personalmente — usualmente en 72 horas.",
      "Si avanzas, agendamos una entrevista para discutir tu operación en detalle.",
      "Tras la entrevista, recibes la Esfera, entrenamiento y acceso a las herramientas de operador.",
      "Una vez instalada, eres un nodo en vivo — y operas desde el día uno.",
    ],
  },
};

const EMPTY = {
  biz: "", type: "", country: "United States",
  address1: "", address2: "", city: "", state: "", zip: "",
  multiple: false, multipleCount: "", multipleDetails: "",
  contact: "", role: "", phone: "", email: "",
  traffic: "", hours: "", experience: "", why: "",
  consent: false,
};

function ApplyApp() {
  const [lang, setLang] = useState(() => localStorage.getItem("id_lang") || "en");
  const [step, setStep] = useState(0);
  const [form, setForm] = useState(EMPTY);
  const [submitted, setSubmitted] = useState(false);
  const [appId, setAppId] = useState("");

  useEffect(() => { localStorage.setItem("id_lang", lang); }, [lang]);

  const c = COPY[lang];
  const steps = STEPS[lang];

  const setField = (k) => (e) => setForm({ ...form, [k]: e.target.type === "checkbox" ? e.target.checked : e.target.value });

  // Validation per step
  const stepValid = useMemo(() => {
    switch (step) {
      case 0: return form.biz && form.type && form.country && form.address1 && form.city && form.state && form.zip && (!form.multiple || form.multipleCount);
      case 1: return form.contact && form.role && form.phone && form.email && /\S+@\S+\.\S+/.test(form.email);
      case 2: return form.traffic && form.hours && form.experience && form.why.length >= 20;
      case 3: return form.consent;
      default: return false;
    }
  }, [step, form]);

  const next = () => {
    if (!stepValid) return;
    if (step < steps.length - 1) {
      setStep(step + 1);
      window.scrollTo({ top: 0, behavior: "smooth" });
    } else {
      const id = "OP-" + Math.random().toString(36).slice(2, 5).toUpperCase() + "-" + Date.now().toString(36).slice(-4).toUpperCase();
      setAppId(id);
      setSubmitted(true);
      window.scrollTo({ top: 0, behavior: "smooth" });
    }
  };
  const back = () => {
    if (step > 0) setStep(step - 1);
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  if (submitted) {
    return <ApplySuccess c={c} lang={lang} setLang={setLang} appId={appId} form={form} />;
  }

  return (
    <div className="apply-shell">
      <ApplyNav lang={lang} setLang={setLang} />
      <main className="apply-main">
        <aside className="apply-side">
          <a href="index.html" className="apply-home mono">← {c.home}</a>
          <div className="apply-title">
            <span className="eyebrow no-dot">{c.title}</span>
            <h1>{c.title}</h1>
            <p>{c.sub}</p>
          </div>
          <ol className="step-rail">
            {steps.map((s, i) => (
              <li key={s.id} className={`step-rail-item ${i === step ? "current" : i < step ? "done" : ""}`}
                  onClick={() => i < step && setStep(i)}>
                <span className="step-rail-num">{i < step ? "✓" : String(i + 1).padStart(2, "0")}</span>
                <div>
                  <div className="step-rail-t">{s.t}</div>
                  <div className="step-rail-d">{s.d}</div>
                </div>
              </li>
            ))}
          </ol>
          <div className="apply-side-orb">
            <img src="images/orb-final.png" alt="The Orb" />
          </div>
        </aside>

        <section className="apply-stage glass">
          <div className="apply-progress">
            <div className="apply-progress-meta mono">
              <span>{c.step} {step + 1} {c.of} {steps.length}</span>
              <span>{steps[step].t}</span>
            </div>
            <div className="apply-progress-bar">
              <div className="apply-progress-fill" style={{ width: `${((step + 1) / steps.length) * 100}%` }}></div>
            </div>
          </div>

          <div className="apply-step-body">
            {step === 0 && <StepBusiness c={c} form={form} setField={setField} setForm={setForm} />}
            {step === 1 && <StepContact c={c} form={form} setField={setField} setForm={setForm} />}
            {step === 2 && <StepOperation c={c} form={form} setField={setField} setForm={setForm} />}
            {step === 3 && <StepReview c={c} form={form} setField={setField} steps={steps} onEdit={setStep} />}
          </div>

          <div className="apply-actions">
            <button className="btn btn-ghost" onClick={back} disabled={step === 0}>
              ← {c.back}
            </button>
            <button className="btn btn-primary btn-xl" onClick={next} disabled={!stepValid}>
              {step === steps.length - 1 ? c.submit : c.next}
              <svg className="arrow" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </button>
          </div>
        </section>
      </main>
    </div>
  );
}

function ApplyNav({ lang, setLang }) {
  return (
    <nav className="nav">
      <div className="nav-inner" style={{ gridTemplateColumns: "1fr 1fr" }}>
        <a href="index.html" className="brand">
          <span className="brand-mark"></span>
          <span>Identificacion</span>
          <span className="brand-dot">.com</span>
        </a>
        <div className="nav-right">
          <div className="lang-toggle">
            <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
            <button className={lang === "es" ? "active" : ""} onClick={() => setLang("es")}>ES</button>
          </div>
        </div>
      </div>
    </nav>
  );
}

// ---------- Step 1: Business ----------
function StepBusiness({ c, form, setField, setForm }) {
  const toggleMultiple = () => setForm({ ...form, multiple: !form.multiple });
  return (
    <div className="form-grid">
      <div className="field full">
        <label>{c.field.biz}</label>
        <input required value={form.biz} onChange={setField("biz")} placeholder={c.field.bizPh} />
      </div>
      <div className="field">
        <label>{c.field.type}</label>
        <select required value={form.type} onChange={setField("type")}>
          <option value="">—</option>
          {c.types.map((tt, i) => <option key={i} value={tt}>{tt}</option>)}
        </select>
      </div>
      <div className="field">
        <label>{c.field.country}</label>
        <select required value={form.country} onChange={setField("country")}>
          {c.field.countryOpts.map((ct, i) => <option key={i} value={ct}>{ct}</option>)}
        </select>
      </div>

      <div className="field full">
        <label>{c.field.address1}</label>
        <input required value={form.address1} onChange={setField("address1")} placeholder={c.field.address1Ph} />
      </div>
      <div className="field full">
        <label>{c.field.address2}</label>
        <input value={form.address2} onChange={setField("address2")} placeholder={c.field.address2Ph} />
      </div>

      <div className="field address-city">
        <label>{c.field.city}</label>
        <input required value={form.city} onChange={setField("city")} placeholder={c.field.cityPh} />
      </div>
      <div className="field address-state">
        <label>{c.field.state}</label>
        <input required value={form.state} onChange={setField("state")} placeholder={c.field.statePh} />
      </div>
      <div className="field address-zip">
        <label>{c.field.zip}</label>
        <input required value={form.zip} onChange={setField("zip")} placeholder={c.field.zipPh} />
      </div>

      <div className="field full">
        <label
          className={`multi-toggle ${form.multiple ? "on" : ""}`}
          onClick={toggleMultiple}
        >
          <span className="multi-toggle-check">
            <input
              type="checkbox"
              checked={form.multiple}
              onChange={toggleMultiple}
              onClick={(e) => e.stopPropagation()}
            />
            <span className="multi-toggle-box"></span>
          </span>
          <span className="multi-toggle-body">
            <strong>{c.field.multiple}</strong>
            <span className="multi-toggle-hint">{c.field.multipleHint}</span>
          </span>
        </label>
      </div>

      {form.multiple && (
        <React.Fragment>
          <div className="field full">
            <label>{c.field.multipleCount}</label>
            <div className="chip-group">
              {c.field.multipleCountOpts.map((o, i) => (
                <button
                  type="button"
                  key={i}
                  className={`chip ${form.multipleCount === o ? "on" : ""}`}
                  onClick={() => setField("multipleCount")({ target: { value: o } })}
                >{o}</button>
              ))}
            </div>
          </div>
          <div className="field full">
            <label>{c.field.multipleDetails}</label>
            <textarea
              value={form.multipleDetails}
              onChange={setField("multipleDetails")}
              placeholder={c.field.multipleDetailsPh}
            ></textarea>
          </div>
        </React.Fragment>
      )}
    </div>
  );
}

// ---------- Step 2: Contact ----------
function StepContact({ c, form, setField }) {
  return (
    <div className="form-grid">
      <div className="field">
        <label>{c.field.contact}</label>
        <input required value={form.contact} onChange={setField("contact")} placeholder={c.field.contactPh} />
      </div>
      <div className="field">
        <label>{c.field.role}</label>
        <select required value={form.role} onChange={setField("role")}>
          <option value="">—</option>
          {c.field.roleOpts.map((r, i) => <option key={i} value={r}>{r}</option>)}
        </select>
      </div>
      <div className="field">
        <label>{c.field.phone}</label>
        <input required type="tel" value={form.phone} onChange={setField("phone")} placeholder={c.field.phonePh} />
      </div>
      <div className="field">
        <label>{c.field.email}</label>
        <input required type="email" value={form.email} onChange={setField("email")} placeholder={c.field.emailPh} />
      </div>
    </div>
  );
}

// ---------- Step 3: Operation ----------
function StepOperation({ c, form, setField }) {
  return (
    <div className="form-grid">
      <div className="field">
        <label>{c.field.traffic}</label>
        <select required value={form.traffic} onChange={setField("traffic")}>
          <option value="">—</option>
          {c.field.trafficOpts.map((o, i) => <option key={i} value={o}>{o}</option>)}
        </select>
      </div>
      <div className="field">
        <label>{c.field.hours}</label>
        <select required value={form.hours} onChange={setField("hours")}>
          <option value="">—</option>
          {c.field.hoursOpts.map((o, i) => <option key={i} value={o}>{o}</option>)}
        </select>
      </div>
      <div className="field full">
        <label>{c.field.experience}</label>
        <div className="chip-group">
          {c.field.expOpts.map((o, i) => (
            <button
              type="button"
              key={i}
              className={`chip ${form.experience === o ? "on" : ""}`}
              onClick={() => setField("experience")({ target: { value: o } })}
            >{o}</button>
          ))}
        </div>
      </div>
      <div className="field full">
        <label>{c.field.why} <span className="mono" style={{ color: "var(--fg-faint)", fontSize: 10, letterSpacing: "0.1em" }}>{form.why.length} / 20+</span></label>
        <textarea value={form.why} onChange={setField("why")} placeholder={c.field.whyPh}></textarea>
      </div>
    </div>
  );
}

// ---------- Step 4: Review ----------
function StepReview({ c, form, setField, steps, onEdit }) {
  const review = [
    { step: 0, t: steps[0].t, items: [
      ["Business", form.biz],
      ["Type", form.type],
      ["Country", form.country],
      ["Address", [form.address1, form.address2].filter(Boolean).join(", ")],
      ["City / State / ZIP", [form.city, form.state, form.zip].filter(Boolean).join(", ")],
      ...(form.multiple ? [
        ["Locations", `${form.multipleCount || "—"} total`],
        ["Other locations", form.multipleDetails || "—"],
      ] : []),
    ]},
    { step: 1, t: steps[1].t, items: [
      ["Contact", form.contact],
      ["Role", form.role],
      ["Phone", form.phone],
      ["Email", form.email],
    ]},
    { step: 2, t: steps[2].t, items: [
      ["Foot traffic", form.traffic],
      ["Hours / week", form.hours],
      ["Experience", form.experience],
      ["Motivation", form.why],
    ]},
  ];
  return (
    <div className="review-wrap">
      <p style={{ maxWidth: 540, marginTop: 0 }}>{c.review_d}</p>
      <div className="review-blocks">
        {review.map((r) => (
          <div key={r.step} className="review-block">
            <div className="review-block-head">
              <h4>{r.t}</h4>
              <button type="button" className="review-edit mono" onClick={() => onEdit(r.step)}>Edit ↗</button>
            </div>
            <dl>
              {r.items.map(([k, v], i) => (
                <div key={i} className="review-row">
                  <dt>{k}</dt>
                  <dd>{v || <span style={{ color: "var(--fg-faint)" }}>—</span>}</dd>
                </div>
              ))}
            </dl>
          </div>
        ))}
      </div>
      <label className="consent">
        <input type="checkbox" checked={form.consent} onChange={setField("consent")} />
        <span>{c.consent}</span>
      </label>
    </div>
  );
}

// ---------- Success ----------
function ApplySuccess({ c, lang, setLang, appId, form }) {
  return (
    <div className="apply-shell">
      <ApplyNav lang={lang} setLang={setLang} />
      <main className="apply-main success-main">
        <div className="success-card glass">
          <div className="success-orb">
            <div className="success-orb-inner"></div>
          </div>
          <span className="eyebrow no-dot">{c.appId.toUpperCase()}: <span className="mono" style={{ color: "var(--accent-hot)" }}>{appId}</span></span>
          <h1>{c.success_t}</h1>
          <p style={{ maxWidth: 520, margin: "0 auto" }}>{c.success_d}</p>

          <div className="next-steps">
            <h4 className="mono">{c.nextSteps}</h4>
            <ol>
              {c.nextStepsList.map((s, i) => <li key={i}><span className="mono">0{i + 1}</span><span>{s}</span></li>)}
            </ol>
          </div>

          <a href="index.html" className="btn btn-ghost" style={{ marginTop: 20 }}>← {c.home}</a>
        </div>
      </main>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<ApplyApp />);