/* VALORIA — consumer pre-order landing + multi-step flow (Arabic RTL) */
const { useState } = React;
function useLucide() { React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); }); }
function styleToString(style) {
  if (!style) return "";
  return Object.keys(style).map(function (k) {
    var v = style[k];
    var prop = k.replace(/[A-Z]/g, function (m) { return "-" + m.toLowerCase(); });
    return prop + ":" + (typeof v === "number" ? v + "px" : v);
  }).join(";");
}
function Icon({ name, style }) {
  const ref = React.useRef(null);
  const styleStr = styleToString(style);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    el.innerHTML = "";
    const i = document.createElement("i");
    i.setAttribute("data-lucide", name);
    if (styleStr) i.setAttribute("style", styleStr);
    el.appendChild(i);
    if (window.lucide) window.lucide.createIcons();
  }, [name, styleStr]);
  return <span ref={ref} className="ic-wrap" style={{ display: "inline-flex", lineHeight: 0 }}></span>;
}

const OCCASIONS = [
  { id: "birthday", label: "عيد ميلاد", icon: "cake" },
  { id: "graduation", label: "تخرّج", icon: "graduation-cap" },
  { id: "wedding", label: "زواج", icon: "heart" },
  { id: "eid", label: "عيد", icon: "moon-star" },
  { id: "newborn", label: "مولود جديد", icon: "baby" },
  { id: "anniversary", label: "ذكرى سنوية", icon: "gem" },
  { id: "thanks", label: "شكر وتقدير", icon: "hand-heart" },
];
const CITIES = ["رام الله", "نابلس", "الخليل", "بيت لحم", "جنين", "أخرى"];
const DIAL_CODES = ["+970", "+972", "+962", "+20", "+971", "+966", "+961", "+90", "+1", "+44"];
/* delivery is timed relative to the occasion date */
const DELIVERY_OPTS = [
  { id: "onday", label: "في يوم المناسبة", sub: "تصل الهديّة يوم المناسبة نفسه", icon: "party-popper" },
  { id: "day_before", label: "قبل المناسبة بيوم", sub: "تصل قبل الموعد بيوم واحد", icon: "sunrise" },
  { id: "three_before", label: "قبل المناسبة بـ ٣ أيام", sub: "متّسع من الوقت قبل الموعد", icon: "calendar-clock" },
  { id: "custom", label: "يوم آخر أحدّده", sub: "اختر تاريخ التوصيل الذي يناسبك", icon: "calendar" },
];

/* ---------------- Nav ---------------- */
function Nav({ toForm }) {
  return (
    <nav className="nav">
      <div className="in">
        <div className="brand">
          <div className="m"><Icon name="gift" /></div>
          <span className="wm">Valoria<span className="dot">.</span></span>
        </div>
        <div className="grow"></div>
        <button className="cta" onClick={toForm}><Icon name="gift" />ابدأ الحجز</button>
      </div>
    </nav>
  );
}

/* ---------------- Hero ---------------- */
function Hero({ toForm }) {
  return (
    <section className="hero">
      <div className="wrap">
        <div className="grid">
          <div>
            <div className="eye">هديّة تصل بدلًا عنك</div>
            <h1>اطلب هديّة واحدة، <span className="hl">والثانية علينا.</span></h1>
            <p>تُخبرنا بالمناسبة ومن يستحقّها — ونحن نختار الهديّة، نغلّفها، ونوصّلها في الموعد. احجز الآن برسوم رمزية واحصل على هديّتين.</p>
            <div className="actions">
              <button className="btn-lg btn-primary" onClick={toForm}><Icon name="gift" />احجز بـ ₪20 — واحصل على 1+1</button>
              <a className="btn-lg btn-ghost" href="#how"><Icon name="arrow-down" />كيف تعمل</a>
            </div>
            <div className="trust">
              <span className="it"><Icon name="check" />تأكيد عبر واتساب</span>
              <span className="it"><Icon name="check" />نختار ونغلّف ونوصّل</span>
              <span className="it"><Icon name="check" />الرسوم تُخصم من قيمة الهديّة</span>
            </div>
          </div>
          <Offer />
        </div>
      </div>
    </section>
  );
}

function Offer() {
  return (
    <div className="offer">
      <div className="glow"></div>
      <div className="otop">
        <span className="badge11"><Icon name="gift" />عرض 1+1</span>
        <span className="fee">رسوم الحجز ₪20</span>
      </div>
      <div className="gifts">
        <div className="gift-tile">
          <div className="ph"><Icon name="package" /></div>
          <b>هديّتك المختارة</b>
          <span>تختارها لك Valoria</span>
        </div>
        <div className="gift-tile free">
          <span className="free-tag">مجانًا</span>
          <div className="ph"><Icon name="package-plus" /></div>
          <b>الهديّة الثانية</b>
          <span className="price-free">على حسابنا</span>
        </div>
      </div>
      <div className="ofoot">
        <span className="l">تدفع اليوم لتثبيت الحجز</span>
        <span className="v"><span className="cur">₪</span>20</span>
      </div>
    </div>
  );
}

/* ---------------- How it works ---------------- */
function How() {
  const items = [
    { n: "1", icon: "user-round", h: "أدخل بياناتك", p: "اسمك ورقم واتساب لنتواصل معك ونؤكّد كل خطوة." },
    { n: "2", icon: "heart-handshake", h: "اختر المناسبة والموعد", p: "من تُهدي، المناسبة، ووقت التوصيل الذي يناسبك." },
    { n: "3", icon: "gift", h: "ادفع ₪20 — وخذ هديّتين", p: "نثبّت الحجز، نختار ونوصّل، والثانية علينا." },
  ];
  return (
    <section className="how" id="how">
      <div className="wrap">
        <div className="sec-eye">بثلاث خطوات</div>
        <h2 className="sec-h">إهداء بلا عناء</h2>
        <div className="steps3">
          {items.map((it) => (
            <div className="step-c" key={it.n}>
              <div className="n">{it.n}</div>
              <Icon name={it.icon} style={{ width: 22, height: 22, color: "var(--primary-700)", marginBottom: 14 }} />
              <h3>{it.h}</h3>
              <p>{it.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Booking flow ---------------- */
const STEP_META = [
  { t: "بياناتك", s: "لنتواصل معك ونؤكّد الطلب عبر واتساب." },
  { t: "المُهدى إليه", s: "من سيستلم الهديّة، وأين." },
  { t: "المناسبة", s: "ما الذي نحتفل به؟" },
  { t: "موعد التوصيل", s: "متى تريد أن تصل الهديّة؟" },
  { t: "المراجعة والدفع", s: "أكّد التفاصيل وثبّت حجزك." },
];

function Stepper({ step }) {
  return (
    <div className="stepper">
      {STEP_META.map((_, i) => (
        <div className={"st " + (i < step ? "done" : i === step ? "active" : "")} key={i}>
          <div className="bub">{i < step ? <Icon name="check" /> : i + 1}</div>
          {i < STEP_META.length - 1 && <div className="ln"></div>}
        </div>
      ))}
    </div>
  );
}

function Field({ label, req, children, hint }) {
  return (
    <div className="f">
      <label>{label} {req && <span className="req">*</span>}</label>
      {children}
      {hint && <div className="f-hint"><Icon name="info" />{hint}</div>}
    </div>
  );
}

function Phone({ icon, code, onCode, value, onValue }) {
  return (
    <div className="control phone">
      <Icon name={icon} />
      <select className="ccode-sel" value={code} dir="ltr" onChange={(e) => onCode(e.target.value)}>
        {DIAL_CODES.map((c) => <option key={c} value={c}>{c}</option>)}
      </select>
      <input value={value} onChange={(e) => onValue(e.target.value)} placeholder="5x xxx xxxx" inputMode="tel" />
    </div>
  );
}

function Booking({ data, set, step, setStep, submit }) {
  useLucide();
  const canNext = [
    () => data.name.trim() && data.whatsapp.trim().length >= 7,
    () => data.recipient.trim() && data.recipientPhone.trim().length >= 7,
    () => data.occasion,
    () => data.delivery && (data.delivery !== "custom" || data.deliveryDate),
    () => true,
  ][step]();

  const isLast = step === 4;
  const meta = STEP_META[step];

  return (
    <section className="book" id="book">
      <div className="wrap">
        <div className="panel">
          <div className="phead"><Stepper step={step} /></div>
          <div className="pbody">
            <div className="fade" key={step}>
              <h2 className="step-title">{meta.t}</h2>
              <p className="step-sub">{meta.s}</p>

              {step === 0 && (
                <>
                  <Field label="الاسم الكامل" req>
                    <div className="control"><Icon name="user-round" /><input value={data.name} onChange={(e) => set({ name: e.target.value })} placeholder="مثال: ليلى خليل" /></div>
                  </Field>
                  <Field label="رقم واتساب (لك أنت)" req hint="سنرسل لك تأكيد الطلب وتحديثات التوصيل هنا.">
                    <Phone icon="message-circle" code={data.waCode} onCode={(v) => set({ waCode: v })} value={data.whatsapp} onValue={(v) => set({ whatsapp: v })} />
                  </Field>
                </>
              )}

              {step === 1 && (
                <>
                  <Field label="اسم المُهدى إليه" req>
                    <div className="control"><Icon name="gift" /><input value={data.recipient} onChange={(e) => set({ recipient: e.target.value })} placeholder="من سيفرح بالهديّة؟" /></div>
                  </Field>
                  <Field label="رقم هاتف المُهدى إليه" req hint="رقم هاتف عادي — نستخدمه لتنسيق التوصيل عند الوصول.">
                    <Phone icon="phone" code={data.recipientCode} onCode={(v) => set({ recipientCode: v })} value={data.recipientPhone} onValue={(v) => set({ recipientPhone: v })} />
                  </Field>
                  <Field label="مدينة التوصيل" req>
                    <div className="chips">
                      {CITIES.map((c) => (
                        <button key={c} className={"chip" + (data.city === c ? " on" : "")} onClick={() => set({ city: c })}>{c}</button>
                      ))}
                    </div>
                  </Field>
                </>
              )}

              {step === 2 && (
                <>
                  <Field label="المناسبة" req>
                    <div className="chips">
                      {OCCASIONS.map((o) => (
                        <button key={o.id} className={"chip" + (data.occasion === o.id ? " on" : "")} onClick={() => set({ occasion: o.id })}>
                          <Icon name={o.icon} />{o.label}
                        </button>
                      ))}
                    </div>
                  </Field>
                  <Field label="تاريخ المناسبة" hint="نحسب موعد التوصيل بالنسبة لهذا التاريخ.">
                    <div className="control"><Icon name="calendar" /><input type="date" value={data.date} onChange={(e) => set({ date: e.target.value })} /></div>
                  </Field>
                </>
              )}

              {step === 3 && (
                <div className="opts">
                  {DELIVERY_OPTS.map((d) => (
                    <button key={d.id} className={"opt" + (data.delivery === d.id ? " on" : "")} onClick={() => set({ delivery: d.id })}>
                      <span className="oic"><Icon name={d.icon} /></span>
                      <span className="ot"><b>{d.label}</b><span>{d.sub}</span></span>
                      <span className="radio"><Icon name="check" /></span>
                    </button>
                  ))}
                  {data.delivery === "custom" && (
                    <div className="f" style={{ marginTop: 4, marginBottom: 0 }}>
                      <label>تاريخ التوصيل <span className="req">*</span></label>
                      <div className="control"><Icon name="calendar" /><input type="date" value={data.deliveryDate} onChange={(e) => set({ deliveryDate: e.target.value })} /></div>
                    </div>
                  )}
                </div>
              )}

              {step === 4 && <Review data={data} />}
            </div>
          </div>

          <div className="pfoot">
            {step > 0 && <button className="fbtn back" onClick={() => setStep(step - 1)}><Icon name="arrow-right" />رجوع</button>}
            <div className="grow"></div>
            {!isLast
              ? <button className="fbtn next" disabled={!canNext} onClick={() => setStep(step + 1)}>التالي<Icon name="arrow-left" /></button>
              : <button className="fbtn pay" onClick={submit}><Icon name="lock" />ادفع ₪20 وثبّت الحجز</button>}
          </div>
        </div>
      </div>
    </section>
  );
}

function Review({ data }) {
  const occ = OCCASIONS.find((o) => o.id === data.occasion);
  const del = DELIVERY_OPTS.find((d) => d.id === data.delivery);
  return (
    <>
      <div className="rev-offer">
        <div className="ri"><Icon name="gift" /></div>
        <div><b>عرض 1+1 مُفعّل</b><span>هديّة واحدة تدفع رسومها — والثانية علينا، مجانًا.</span></div>
      </div>
      <div className="rev-list">
        <div className="rev-row"><span className="k">المُهدي</span><span className="v">{data.name || "—"}<small>{data.waCode} {data.whatsapp} · واتساب</small></span></div>
        <div className="rev-row"><span className="k">المُهدى إليه</span><span className="v">{data.recipient || "—"}<small>{data.recipientCode} {data.recipientPhone} · {data.city || ""}</small></span></div>
        <div className="rev-row"><span className="k">المناسبة</span><span className="v">{occ ? occ.label : "—"}{data.date && <small>{data.date}</small>}</span></div>
        <div className="rev-row"><span className="k">التوصيل</span><span className="v">{del ? del.label : "—"}{data.delivery === "custom" && data.deliveryDate && <small>{data.deliveryDate}</small>}</span></div>
      </div>
      <div className="pay-box">
        <div className="pr"><span>رسوم حجز الهديّة</span><span className="pv">₪20</span></div>
        <div className="pr free"><span>الهديّة الثانية (1+1)</span><span className="pv" style={{ color: "var(--success-600)" }}>مجانًا</span></div>
        <div className="pt"><span className="l">المطلوب الآن</span><span className="v"><span className="cur">₪</span>20</span></div>
      </div>
    </>
  );
}

function Confirmed({ data, reset }) {
  useLucide();
  const occ = OCCASIONS.find((o) => o.id === data.occasion);
  return (
    <section className="book">
      <div className="wrap">
        <div className="panel">
          <div className="done">
            <div className="check"><Icon name="check" /></div>
            <h2>تم تثبيت حجزك</h2>
            <p>شكرًا {data.name ? data.name.split(" ")[0] : ""}. حجزنا هديّتك{occ ? ` لمناسبة «${occ.label}»` : ""} لـ {data.recipient || "من تحب"} — والثانية علينا. سنختار الأنسب ونوصّلها في الموعد.</p>
            <div className="wa-note"><Icon name="message-circle" />سنراسلك على واتساب لتأكيد التفاصيل</div>
            <div className="ref">رقم الحجز: <b>VL-{Math.floor(2050 + Math.random() * 49)}</b></div>
            <div style={{ marginTop: 26 }}>
              <button className="btn-lg btn-ghost" onClick={reset}><Icon name="rotate-ccw" />حجز هديّة أخرى</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- App ---------------- */
const EMPTY = { name: "", waCode: "+970", whatsapp: "", recipient: "", recipientCode: "+970", recipientPhone: "", city: "", occasion: "", date: "", delivery: "", deliveryDate: "" };

function App() {
  useLucide();
  const [data, setData] = useState(EMPTY);
  const [step, setStep] = useState(0);
  const [done, setDone] = useState(false);
  const set = (patch) => setData((d) => ({ ...d, ...patch }));
  const toForm = () => document.getElementById("book").scrollIntoView({ behavior: "smooth", block: "start" });

  /* --- real-time capture: persist every meaningful change so nothing is lost --- */
  const leadRef = React.useRef(null);
  const furthestRef = React.useRef(0);
  const paidRef = React.useRef(false);

  const buildLead = () => {
    const occ = OCCASIONS.find((o) => o.id === data.occasion);
    const del = DELIVERY_OPTS.find((d) => d.id === data.delivery);
    return {
      id: leadRef.current,
      feePaid: paidRef.current,
      furthestStep: furthestRef.current,
      name: data.name, waCode: data.waCode, whatsapp: data.whatsapp,
      recipient: data.recipient, recipientCode: data.recipientCode, recipientPhone: data.recipientPhone,
      city: data.city,
      occasionId: data.occasion, occasionLabel: occ ? occ.label : "", occasionDate: data.date,
      deliveryId: data.delivery, deliveryLabel: del ? del.label : "", deliveryDate: data.deliveryDate,
    };
  };

  React.useEffect(() => {
    if (step > furthestRef.current) furthestRef.current = step;
    const hasIdentity = data.name.trim() && data.whatsapp.trim().length >= 7;
    if (!leadRef.current && !hasIdentity) return; // wait until there's something worth saving
    if (!leadRef.current) leadRef.current = window.ValoriaStore.newId();
    window.ValoriaStore.upsert(buildLead());
  }, [data, step]);

  const submit = () => {
    paidRef.current = true;
    furthestRef.current = Math.max(furthestRef.current, 4);
    if (!leadRef.current) leadRef.current = window.ValoriaStore.newId();
    window.ValoriaStore.upsert(buildLead());
    setDone(true);
    window.scrollTo({ top: 0, behavior: "smooth" });
  };
  const reset = () => {
    leadRef.current = null; furthestRef.current = 0; paidRef.current = false;
    setData(EMPTY); setStep(0); setDone(false);
  };

  if (done) return (<><Nav toForm={toForm} /><Confirmed data={data} reset={reset} /><Footer /></>);
  return (
    <>
      <Nav toForm={toForm} />
      <Hero toForm={toForm} />
      <How />
      <Booking data={data} set={set} step={step} setStep={setStep} submit={submit} />
      <Closer />
      <Footer />
    </>
  );
}

function Closer() {
  return (
    <section className="closer">
      <div className="glow"></div>
      <div className="wrap">
        <p className="cl-lede">المفاجآت أجمل لمّا تكون من الأحباب — لهيك وفّرناها لك <b>Valoria</b>.</p>
        <p className="cl-tag">مع Valoria، تهادوا وتحابوا <span className="heart">🤍</span></p>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="foot">
      <div className="in">
        <span className="wm">Valoria<span className="dot">.</span></span>
        <div className="grow"></div>
        <span className="cp">© 2026 Valoria · خدمة إهداء في فلسطين</span>
      </div>
    </footer>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);