(() => {
const { SectionHeader, StepList, Button, Icon, Field, Input, Textarea } = window.RespectorGroupDesignSystem_21eac1;

/* Способы связи в порядке популярности в Греции: Viber — главный мессенджер, дальше WhatsApp и обычный звонок. */
const CH = [
  { id: "viber", label: "Viber", kind: "tel", field: "Номер в Viber" },
  { id: "whatsapp", label: "WhatsApp", kind: "tel", field: "Номер в WhatsApp" },
  { id: "call", label: "Звонок", kind: "tel", field: "Номер телефона" },
  { id: "messenger", label: "Messenger", kind: "text", field: "Имя или ссылка на профиль Facebook" },
  { id: "email", label: "Почта", kind: "email", field: "Электронная почта" },
];
const TIME = ["Утром", "Днём", "Вечером"];
const LANG = ["Ελληνικά", "English", "Русский"];
const OWN = "Есть свой";
const Q = [
  { id: "kind", label: "Что строим", opts: ["Дом для семьи", "Дом под аренду", "Многоквартирный дом", "Реконструкция"] },
  { id: "plot", label: "Участок", opts: [OWN, "Ищу — помогите подобрать"] },
  { id: "permit", label: "Разрешение на строительство", opts: ["Есть", "В процессе", "Ещё нет"], own: true },
  { id: "size", label: "Площадь дома", opts: ["До 120 м²", "120–250 м²", "250–500 м²", "Больше 500 м²"] },
  { id: "scope", label: "Объём работ", opts: ["Под ключ", "Каркас и кровля", "Проект и разрешение"] },
  { id: "budget", label: "Бюджет", opts: ["До € 200 000", "€ 200–400 тыс.", "€ 400–800 тыс.", "Больше € 800 000", "Пока не знаю"] },
  { id: "start", label: "Когда начать", opts: ["В ближайшие 3 месяца", "В течение года", "Позже", "Пока изучаю"] },
];
const TEXTS = [{ id: "place", label: "Где участок", own: true }, { id: "plotArea", label: "Площадь участка, м²", own: true }, { id: "note", label: "Комментарий" }];
const A0 = { kind: "", plot: "", permit: "", size: "", scope: "", budget: "", start: "", place: "", plotArea: "", note: "" };
const C0 = { tel: "+30 ", text: "", email: "" };

const okContact = (kind, v) => kind === "tel" ? (d => d >= 10 && d <= 15)(v.replace(/\D/g, "").length) : kind === "email" ? /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v.trim()) : v.trim().length >= 3;
const errText = { tel: "Укажите номер полностью, с кодом страны", email: "Проверьте адрес почты", text: "Укажите имя или ссылку на профиль" };

function Chips({ items, value, onPick, label }) {
  return (
    <div className="rg-search__chips" role="group" aria-label={label}>
      {items.map(o => { const id = typeof o === "string" ? o : o.id, on = value === id; return (
        <button key={id} type="button" className="rg-search__chip" aria-pressed={on} onClick={() => onPick(on ? "" : id)}>{on && <Icon name="check" size={14} />}{typeof o === "string" ? o : o.label}</button>); })}
    </div>
  );
}

function BuildPage({ go }) {
  const D = window.RGDATA || {};
  const [a, setA] = React.useState(A0);
  const [ch, setCh] = React.useState("viber");
  const [val, setVal] = React.useState(C0);
  const [who, setWho] = React.useState({ name: "", time: "", lang: "" });
  const [touched, setTouched] = React.useState(false);
  const [state, setState] = React.useState("idle");
  const contactRef = React.useRef(null);
  const c = CH.find(x => x.id === ch);
  const v = val[c.kind];
  const valid = okContact(c.kind, v);
  const own = a.plot === OWN;
  const shown = [...Q, ...TEXTS].filter(f => !f.own || own);
  const filled = shown.filter(f => String(a[f.id] || "").trim()).length;
  const setAns = id => x => setA(s => ({ ...s, [id]: x }));
  const toContact = () => { const el = contactRef.current; if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 96, behavior: "smooth" }); };

  const submit = async e => {
    e.preventDefault(); setTouched(true);
    if (!valid || state === "sending") return;
    setState("sending");
    const parts = shown.filter(f => f.id !== "note" && String(a[f.id] || "").trim()).map(f => f.label + ": " + String(a[f.id]).trim().toLowerCase());
    const r = await window.RGStore.sendLead({ consent: true,
      name: who.name.trim() || "Без имени", contact: c.label + ": " + v.trim(), channel: "Стройка на заказ",
      topic: parts.length ? parts.join(" · ") : "Стройка на заказ, анкета не заполнена", unit: "—",
      note: [a.note.trim(), who.time && "Удобно: " + who.time.toLowerCase(), who.lang && "Язык: " + who.lang].filter(Boolean).join(" · "),
    });
    setState(r.ok ? "sent" : "error");
  };
  const reset = () => { setA(A0); setVal(C0); setWho({ name: "", time: "", lang: "" }); setTouched(false); setState("idle"); };

  const group = f => (
    <div key={f.id} className="rg-build__group">
      <span className="rg-build__label">{f.label}</span>
      <Chips items={f.opts} value={a[f.id]} onPick={setAns(f.id)} label={f.label} />
    </div>
  );

  return (
    <>
      <section className="rg-container rg-split" style={{ paddingBlock: "var(--space-16) var(--space-10)", alignItems: "end" }}>
        <SectionHeader eyebrow="Стройка на заказ" title="Построим дом на вашем участке" lead="Проектируем, получаем разрешение и строим под ключ — по тем же нормам, что и свои дома в Халкидиках." />
        <StepList steps={[
          { title: "Связываемся", description: "Инженер уточнит задачу удобным для вас способом" },
          { title: "Смотрим участок", description: "Выезд, проверка документов и коэффициента застройки" },
          { title: "Проект и смета", description: "Фиксированная цена и график по этапам" },
        ]} />
      </section>

      <section style={{ background: "var(--surface-sunken)", paddingBlock: "var(--space-12) var(--section-y)" }}>
        <form className="rg-container rg-cfg" onSubmit={submit} noValidate>
          <div className="rg-build__q">
            <div className="rg-build__head">
              <div>
                <h2 style={{ fontSize: "var(--fs-h3)", color: "var(--text-strong)" }}>Анкета</h2>
                <p style={{ marginTop: "var(--space-2)", color: "var(--text-body)", textWrap: "pretty" }}>По желанию. Чем больше ответов, тем точнее будет первая смета.</p>
              </div>
              <span className="rg-build__count">Заполнено {filled} из {shown.length}</span>
            </div>
            {group(Q[0])}
            {group(Q[1])}
            {own && <div className="rg-build__row">
              <Field label="Где участок" htmlFor="b-place"><Input id="b-place" value={a.place} onChange={e => setAns("place")(e.target.value)} placeholder="Неа Калликратия, Халкидики" /></Field>
              <Field label="Площадь участка, м²" htmlFor="b-plot"><Input id="b-plot" inputMode="numeric" value={a.plotArea} onChange={e => setAns("plotArea")(e.target.value.replace(/[^\d\s]/g, ""))} placeholder="600" /></Field>
            </div>}
            {own && group(Q[2])}
            {Q.slice(3).map(group)}
            <Field label="Комментарий" htmlFor="b-note"><Textarea id="b-note" rows={3} value={a.note} onChange={e => setAns("note")(e.target.value)} placeholder="Пожелания по планировке, бассейн, сроки" /></Field>
            <button type="button" className="rg-build__skip" onClick={toContact}>Пропустить анкету<Icon name="arrow-down" size={16} /></button>
          </div>

          <aside className="rg-cfgaside rg-build__aside" ref={contactRef} aria-live="polite">
            {state === "sent" ? (
              <div className="rg-modal__done">
                <span className="rg-partner__icon" style={{ "--pa": "var(--free-700)", "--pa-soft": "var(--free-100)", width: 48, height: 48, background: "var(--pa-soft)", color: "var(--pa)" }}><Icon name="check" size={22} /></span>
                <h3 style={{ fontSize: "var(--fs-h3)" }}>Заявка отправлена</h3>
                <p style={{ color: "var(--text-body)", textWrap: "pretty" }}>Инженер свяжется с вами {c.kind === "tel" ? (ch === "call" ? "по телефону " : "в " + c.label + " по номеру ") + v.trim() : c.kind === "email" ? "по почте " + v.trim() : "в Messenger"}{(D.company || {}).hours ? " в рабочее время: " + D.company.hours.toLowerCase() : ""}.</p>
                <Button variant="secondary" onClick={reset}>Новая заявка</Button>
              </div>
            ) : (
              <>
                <div>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 12 }}>
                    <b style={{ fontFamily: "var(--font-display)", fontSize: 22, color: "var(--text-strong)" }}>Как с вами связаться</b>
                    <span className="rg-build__req">Обязательно</span>
                  </div>
                </div>
                <div className="rg-build__group">
                  <span className="rg-build__label">Способ связи</span>
                  <Chips items={CH} value={ch} onPick={x => x && setCh(x)} label="Способ связи" />
                </div>
                <Field label={c.field} htmlFor="b-contact" required error={touched && !valid ? errText[c.kind] : undefined}>
                  <Input id="b-contact" key={c.kind} value={v} error={touched && !valid} onBlur={() => v.trim() && v.trim() !== "+30" && setTouched(true)}
                    onChange={e => setVal(s => ({ ...s, [c.kind]: e.target.value }))}
                    type={c.kind === "email" ? "email" : c.kind === "tel" ? "tel" : "text"} inputMode={c.kind === "tel" ? "tel" : undefined}
                    autoComplete={c.kind === "tel" ? "tel" : c.kind === "email" ? "email" : "off"}
                    placeholder={c.kind === "tel" ? "+30 69…" : c.kind === "email" ? "name@mail.gr" : "facebook.com/…"} />
                </Field>
                <Field label="Как к вам обращаться" hint="Необязательно" htmlFor="b-name"><Input id="b-name" autoComplete="name" value={who.name} onChange={e => setWho(s => ({ ...s, name: e.target.value }))} /></Field>
                <div className="rg-build__group">
                  <span className="rg-build__label">Когда удобно <span className="rg-build__opt">· необязательно</span></span>
                  <Chips items={TIME} value={who.time} onPick={x => setWho(s => ({ ...s, time: x }))} label="Когда удобно" />
                </div>
                <div className="rg-build__group">
                  <span className="rg-build__label">Язык общения <span className="rg-build__opt">· необязательно</span></span>
                  <Chips items={LANG} value={who.lang} onPick={x => setWho(s => ({ ...s, lang: x }))} label="Язык общения" />
                </div>
                <Button type="submit" size="lg" full disabled={state === "sending"} icon={<Icon name="send" size={18} />}>{state === "sending" ? "Отправляем…" : "Отправить заявку"}</Button>
                {state === "error" && <p role="alert" style={{ fontSize: "var(--fs-body-sm)", color: "var(--sold-700, #a33)" }}>Не удалось отправить. Попробуйте ещё раз или напишите нам: <a href="https://wa.me/306979917088" target="_blank" rel="noopener">WhatsApp</a>, <a href="mailto:respectorgroup@gmail.com">respectorgroup@gmail.com</a>.</p>}
                <p className="rg-build__legal">Контакты используем только для ответа на заявку. Подробнее — в <a href="#privacy" target="_blank" rel="noopener">политике конфиденциальности</a>.</p>
              </>
            )}
          </aside>
        </form>
      </section>
    </>
  );
}
window.BuildPage = BuildPage;
})();