// Ofok — category flow, project grid, about, submit form

function OfokFlow({ t, purpose, type, setPurpose, setType }) {
  const Choice = ({ active, label, sub, onClick, big }) => (
    <button
      className={
        "ofk-choice" + (big ? " ofk-choice-big" : "") + (active ? " is-active" : "")
      }
      onClick={onClick}
    >
      <span className="ofk-choice-label">{label}</span>
      <span className="ofk-choice-sub">{sub}</span>
    </button>
  );
  return (
    <section className="ofk-section" id="ofk-flow" data-screen-label="Category flow">
      <p className="ofk-kicker">{t.flowKicker}</p>
      <h2 className="ofk-h2">{t.flowTitle}</h2>

      <div className="ofk-step">
        <span className="ofk-step-num">01</span>
        <span className="ofk-step-label">{t.step1}</span>
      </div>
      <div className="ofk-choices">
        <Choice
          big
          active={purpose === "buy"}
          label={t.buy}
          sub={t.buySub}
          onClick={() => setPurpose(purpose === "buy" ? null : "buy")}
        />
        <Choice
          big
          active={purpose === "rent"}
          label={t.rent}
          sub={t.rentSub}
          onClick={() => setPurpose(purpose === "rent" ? null : "rent")}
        />
      </div>

      <div className={"ofk-step2" + (purpose ? " is-open" : "")}>
        <div className="ofk-step">
          <span className="ofk-step-num">02</span>
          <span className="ofk-step-label">{t.step2}</span>
        </div>
        <div className="ofk-choices">
          <Choice
            active={type === "commercial"}
            label={t.commercial}
            sub={t.commercialSub}
            onClick={() => setType(type === "commercial" ? null : "commercial")}
          />
          <Choice
            active={type === "administrative"}
            label={t.administrative}
            sub={t.administrativeSub}
            onClick={() => setType(type === "administrative" ? null : "administrative")}
          />
        </div>
      </div>
    </section>
  );
}

function OfokCard({ t, lang, p, onOpen }) {
  return (
    <article className="ofk-card" onClick={() => onOpen(p)}>
      <div className="ofk-card-media">
        <image-slot
          id={"card-" + p.id}
          class="ofk-card-img"
          shape="rect"
          src={p.hero_image || ""}
          placeholder={"Drop photo: " + p.imgLabel}
        ></image-slot>
        <span className={"ofk-badge " + (p.purpose === "buy" ? "ofk-badge-buy" : "ofk-badge-rent")}>
          {p.purpose === "buy" ? t.badgeBuy : t.badgeRent}
        </span>
      </div>
      <div className="ofk-card-body">
        <div className="ofk-card-type">
          {p.type === "commercial" ? t.commercial : t.administrative}
        </div>
        <h3 className="ofk-card-name">{p.name[lang]}</h3>
        <p className="ofk-card-loc">{p.location[lang]}</p>
        <div className="ofk-card-meta">
          <div className="ofk-meta-cell">
            <span className="ofk-meta-label">{p.rent ? t.badgeRent : t.from}</span>
            <span className="ofk-meta-value" dir={lang === "ar" ? "rtl" : "ltr"}>
              {p.price ? p.price[lang] : t.priceOnRequest}
              {p.rent && p.price ? <small> {t.perMonth}</small> : null}
            </span>
          </div>
          {p.area ? (
            <div className="ofk-meta-cell">
              <span className="ofk-meta-label">{t.areaUnit}</span>
              <span className="ofk-meta-value" dir="ltr">{p.area}</span>
            </div>
          ) : null}
          {p.delivery || p.ready ? (
            <div className="ofk-meta-cell">
              <span className="ofk-meta-label">{t.delivery}</span>
              <span className="ofk-meta-value">{p.ready ? t.ready : p.delivery[lang]}</span>
            </div>
          ) : null}
        </div>
        <button className="ofk-btn ofk-btn-ghost ofk-card-cta" onClick={(e) => { e.stopPropagation(); onOpen(p); }}>{t.viewDetails}</button>
        {p.blog_slug && (
          <a className="ofk-card-blog-link" href={"/blog/" + p.blog_slug} onClick={(e) => e.stopPropagation()}>{t.readBlog}</a>
        )}
      </div>
    </article>
  );
}

function OfokGrid({ t, lang, purpose, type, setPurpose, setType, onReset, onOpen, projects, projectsLoading }) {
  const [query, setQuery] = React.useState("");
  const [zone, setZone] = React.useState("");

  const list = (projects || []).filter((p) => {
    if (purpose && p.purpose !== purpose) return false;
    if (type && p.type !== type) return false;
    if (zone && p.zone !== zone) return false;
    if (query.trim()) {
      const q = query.trim().toLowerCase();
      const hay = (
        p.name.en + " " + p.name.ar + " " +
        p.location.en + " " + p.location.ar
      ).toLowerCase();
      if (!hay.includes(q)) return false;
    }
    return true;
  });

  const anyFilter = purpose || type || zone || query.trim();
  const clearAll = () => {
    setQuery("");
    setZone("");
    onReset();
  };

  return (
    <section className="ofk-section ofk-section-grid" id="ofk-grid" data-screen-label="Projects grid">
      <div className="ofk-grid-head">
        <div>
          <p className="ofk-kicker">{t.resultsKicker}</p>
          <h2 className="ofk-h2 ofk-h2-sm">{t.projectsCount(list.length)}</h2>
        </div>
        {anyFilter ? (
          <button className="ofk-reset" onClick={clearAll}>{t.clearFilters}</button>
        ) : null}
      </div>

      <div className="ofk-filterbar">
        <div className="ofk-search">
          <span className="ofk-search-icon" aria-hidden="true">⌕</span>
          <input
            type="text"
            value={query}
            placeholder={t.searchPh}
            onChange={(e) => setQuery(e.target.value)}
          />
        </div>
        <div className="ofk-selects">
          <select className="ofk-select" value={purpose || ""} onChange={(e) => setPurpose(e.target.value || null)}>
            <option value="">{t.allPurposes}</option>
            <option value="buy">{t.buy}</option>
            <option value="rent">{t.rent}</option>
          </select>
          <select className="ofk-select" value={type || ""} onChange={(e) => setType(e.target.value || null)}>
            <option value="">{t.allTypes}</option>
            <option value="commercial">{t.commercial}</option>
            <option value="administrative">{t.administrative}</option>
          </select>
          <select className="ofk-select" value={zone} onChange={(e) => setZone(e.target.value)}>
            <option value="">{t.allZones}</option>
            <option value="fifth">{t.zoneFifth}</option>
            <option value="capital">{t.zoneCapital}</option>
          </select>
        </div>
      </div>

      {projectsLoading ? (
        <div className="ofk-noresults"><p>Loading projects…</p></div>
      ) : list.length === 0 ? (
        <div className="ofk-noresults">
          <p>{t.noResults}</p>
          <button className="ofk-btn ofk-btn-ghost" onClick={clearAll}>{t.clearFilters}</button>
        </div>
      ) : (
        <div className="ofk-grid">
          {list.map((p) => (
            <OfokCard key={p.id} t={t} lang={lang} p={p} onOpen={onOpen} />
          ))}
        </div>
      )}
    </section>
  );
}

function OfokAbout({ t }) {
  return (
    <section className="ofk-about" id="ofk-about" data-screen-label="About">
      <div className="ofk-about-inner">
        <div className="ofk-about-copy">
          <p className="ofk-kicker ofk-kicker-light">{t.aboutKicker}</p>
          <h2 className="ofk-h2 ofk-h2-light">{t.aboutTitle}</h2>
          <p className="ofk-about-body">{t.aboutBody}</p>
        </div>
        <div className="ofk-stats">
          {t.stats.map((s, i) => (
            <div className="ofk-stat" key={i}>
              <div className="ofk-stat-value">{s.value}</div>
              <div className="ofk-stat-label">{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function OfokSubmit({ t }) {
  const [name, setName] = React.useState("");
  const [phone, setPhone] = React.useState("");
  const [errors, setErrors] = React.useState({});
  const [sent, setSent] = React.useState(false);

  const submit = async (e) => {
    e.preventDefault();
    const errs = {};
    if (!name.trim()) errs.name = t.errName;
    const digits = phone.replace(/[^0-9]/g, "");
    if (digits.length < 10 || digits.length > 13) errs.phone = t.errPhone;
    setErrors(errs);
    if (Object.keys(errs).length > 0) return;
    try {
      await fetch("/api/leads", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name: name.trim(), phone: phone.trim() }),
      });
    } catch {}
    setSent(true);
  };

  return (
    <section className="ofk-section ofk-submit" id="ofk-submit" data-screen-label="List your project">
      <div className="ofk-submit-inner">
        <div className="ofk-submit-copy">
          <p className="ofk-kicker">{t.submitKicker}</p>
          <h2 className="ofk-h2">{t.submitTitle}</h2>
          <p className="ofk-submit-body">{t.submitBody}</p>
        </div>
        <div className="ofk-form-card">
          {sent ? (
            <div className="ofk-success">
              <div className="ofk-success-mark">✓</div>
              <h3 className="ofk-success-title">{t.successTitle}</h3>
              <p className="ofk-success-body">{t.successBody}</p>
              <button
                className="ofk-btn ofk-btn-ghost"
                onClick={() => {
                  setSent(false);
                  setName("");
                  setPhone("");
                }}
              >
                {t.successAgain}
              </button>
            </div>
          ) : (
            <form onSubmit={submit} noValidate>
              <label className="ofk-field">
                <span className="ofk-field-label">{t.formName}</span>
                <input
                  type="text"
                  value={name}
                  placeholder={t.formNamePh}
                  onChange={(e) => setName(e.target.value)}
                  className={errors.name ? "is-error" : ""}
                />
                {errors.name ? <span className="ofk-field-err">{errors.name}</span> : null}
              </label>
              <label className="ofk-field">
                <span className="ofk-field-label">{t.formPhone}</span>
                <input
                  type="tel"
                  dir="ltr"
                  value={phone}
                  placeholder={t.formPhonePh}
                  onChange={(e) => setPhone(e.target.value)}
                  className={errors.phone ? "is-error" : ""}
                />
                {errors.phone ? <span className="ofk-field-err">{errors.phone}</span> : null}
              </label>
              <button type="submit" className="ofk-btn ofk-btn-solid">
                {t.formCta}
              </button>
              <p className="ofk-form-note">{t.formNote}</p>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

function OfokDetail({ t, lang, project, onClose, onContact }) {
  React.useEffect(() => {
    if (!project) return;
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [project]);

  const [name, setName] = React.useState("");
  const [phone, setPhone] = React.useState("");
  const [errors, setErrors] = React.useState({});
  const [sent, setSent] = React.useState(false);

  React.useEffect(() => {
    setName(""); setPhone(""); setErrors({}); setSent(false);
  }, [project]);

  if (!project) return null;
  const p = project;

  const submit = async (e) => {
    e.preventDefault();
    const errs = {};
    if (!name.trim()) errs.name = t.errName;
    const digits = phone.replace(/[^0-9]/g, "");
    if (digits.length < 10 || digits.length > 13) errs.phone = t.errPhone;
    setErrors(errs);
    if (Object.keys(errs).length > 0) return;
    try {
      await fetch("/api/inquiries", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          name: name.trim(),
          phone: phone.trim(),
          project_id: p.id,
          project_name: p.name.en,
        }),
      });
    } catch {}
    setSent(true);
  };

  const status = p.ready ? t.ready : (p.delivery ? p.delivery[lang] : t.detailCall);
  const specs = [
    { label: t.specType, value: p.type === "commercial" ? t.commercial : t.administrative },
    { label: t.specPurpose, value: p.purpose === "buy" ? t.badgeBuy : t.badgeRent },
    { label: t.specLocation, value: p.location[lang] },
    { label: t.specStatus, value: status },
  ];

  return (
    <div className="ofk-detail-overlay" onClick={onClose}>
      <div className="ofk-detail" role="dialog" aria-modal="true" onClick={(e) => e.stopPropagation()}>
        <button className="ofk-detail-close" onClick={onClose} aria-label={t.close}>×</button>

        <div className="ofk-detail-hero">
          <image-slot
            id={"detail-hero-" + p.id}
            class="ofk-detail-hero-img"
            shape="rect"
            src={p.hero_image || ""}
            placeholder={"Drop photo: " + p.imgLabel}
          ></image-slot>
          <div className="ofk-detail-hero-shade"></div>
          <span className={"ofk-badge " + (p.purpose === "buy" ? "ofk-badge-buy" : "ofk-badge-rent")}>
            {p.purpose === "buy" ? t.badgeBuy : t.badgeRent}
          </span>
          <div className="ofk-detail-hero-copy">
            <div className="ofk-card-type ofk-detail-type">{p.type === "commercial" ? t.commercial : t.administrative}</div>
            <h2 className="ofk-detail-title">{p.name[lang]}</h2>
            <p className="ofk-detail-loc">{p.location[lang]}</p>
          </div>
        </div>

        <div className="ofk-detail-body">
          <div className="ofk-detail-main">
            <section className="ofk-detail-block">
              <h3 className="ofk-detail-h3">{t.detailOverview}</h3>
              <p className="ofk-detail-desc">{p.desc[lang]}</p>
            </section>

            <section className="ofk-detail-block">
              <h3 className="ofk-detail-h3">{t.detailHighlights}</h3>
              <ul className="ofk-detail-highlights">
                {p.highlights[lang].map((h, i) => (
                  <li key={i}><span className="ofk-hl-dot"></span>{h}</li>
                ))}
              </ul>
            </section>

            <section className="ofk-detail-block">
              <h3 className="ofk-detail-h3">{t.detailGallery}</h3>
              <div className="ofk-detail-gallery">
                {[1, 2, 3].map((n) => (
                  <image-slot
                    key={n}
                    id={"detail-g-" + p.id + "-" + n}
                    class="ofk-detail-g-img"
                    shape="rect"
                    src={(p.gallery_images && p.gallery_images[n - 1]) || ""}
                    placeholder={"Drop photo " + n}
                  ></image-slot>
                ))}
              </div>
            </section>
          </div>

          <aside className="ofk-detail-side">
            <div className="ofk-detail-specs">
              <h3 className="ofk-detail-h3">{t.detailSpecs}</h3>
              {specs.map((s, i) => (
                <div className="ofk-spec-row" key={i}>
                  <span className="ofk-spec-label">{s.label}</span>
                  <span className="ofk-spec-value">{s.value}</span>
                </div>
              ))}
            </div>

            {p.blog_slug && (
              <a className="ofk-detail-blog-link" href={"/blog/" + p.blog_slug}>{t.readBlog}</a>
            )}

            <div className="ofk-detail-cta">
              {sent ? (
                <div className="ofk-success ofk-success-sm">
                  <div className="ofk-success-mark">✓</div>
                  <h4 className="ofk-success-title">{t.successTitle}</h4>
                  <p className="ofk-success-body">{t.successBody}</p>
                </div>
              ) : (
                <React.Fragment>
                  <h4 className="ofk-detail-cta-title">{t.detailCtaTitle}</h4>
                  <p className="ofk-detail-cta-body">{t.detailCtaBody}</p>
                  <form onSubmit={submit} noValidate className="ofk-detail-form">
                    <label className="ofk-field">
                      <input type="text" value={name} placeholder={t.formNamePh}
                        onChange={(e) => setName(e.target.value)}
                        className={errors.name ? "is-error" : ""} />
                      {errors.name ? <span className="ofk-field-err">{errors.name}</span> : null}
                    </label>
                    <label className="ofk-field">
                      <input type="tel" dir="ltr" value={phone} placeholder={t.formPhonePh}
                        onChange={(e) => setPhone(e.target.value)}
                        className={errors.phone ? "is-error" : ""} />
                      {errors.phone ? <span className="ofk-field-err">{errors.phone}</span> : null}
                    </label>
                    <button type="submit" className="ofk-btn ofk-btn-solid ofk-detail-submit">{t.detailCall}</button>
                  </form>
                  <a className="ofk-whatsapp" href="https://wa.me/2019408" target="_blank" rel="noopener">
                    <span className="ofk-wa-icon">✆</span>{t.detailWhatsapp}
                  </a>
                </React.Fragment>
              )}
            </div>
          </aside>
        </div>
      </div>
    </div>
  );
}

function OfokWhatsApp({ t }) {
  return (
    <a
      className="ofk-wa-float"
      href="https://wa.me/2019408"
      target="_blank"
      rel="noopener"
      aria-label={t.whatsappAria}
    >
      <svg viewBox="0 0 32 32" width="28" height="28" aria-hidden="true">
        <path fill="currentColor" d="M16 3C9.4 3 4 8.4 4 15c0 2.1.5 4.1 1.6 5.9L4 29l8.3-1.6c1.7.9 3.7 1.4 5.7 1.4 6.6 0 12-5.4 12-12S22.6 3 16 3zm0 21.8c-1.8 0-3.5-.5-5-1.4l-.4-.2-4.9 1 1-4.8-.3-.4c-1-1.6-1.5-3.4-1.5-5.3C5.4 9.5 10.1 4.8 16 4.8S26.6 9.5 26.6 15 21.9 24.8 16 24.8zm5.8-7.3c-.3-.2-1.9-.9-2.2-1-.3-.1-.5-.2-.7.2-.2.3-.8 1-1 1.2-.2.2-.4.2-.7.1-1.8-.9-3-1.6-4.2-3.6-.3-.5.3-.5.9-1.6.1-.2 0-.4 0-.6-.1-.2-.7-1.7-1-2.3-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.6.1-.9.4-.3.3-1.2 1.2-1.2 2.9s1.2 3.4 1.4 3.6c.2.2 2.5 3.8 6 5.3 2.2.9 3.1 1 4.2.9.7-.1 1.9-.8 2.2-1.5.3-.8.3-1.4.2-1.5-.1-.2-.3-.3-.6-.4z"/>
      </svg>
    </a>
  );
}

Object.assign(window, { OfokFlow, OfokCard, OfokGrid, OfokAbout, OfokSubmit, OfokDetail, OfokWhatsApp });