// screens-public.jsx — Landing, Feedback wall, Login (Nutrition Vibes)
const { useState: uS } = React;

const TILE = {
  leaf:   { bg: "var(--green-tint)", fg: "#5b8a2c" },
  carrot: { bg: "var(--amber-tint)", fg: "var(--carrot)" },
  apple:  { bg: "var(--red-tint)",   fg: "var(--apple)" },
  banana: { bg: "#fcf4d6",           fg: "#c4980f" },
  olive:  { bg: "#f0eedd",           fg: "var(--olive)" },
};
const WA = "https://wa.me/201007847074";

/* ============================================================
   PUBLIC NAVBAR
   ============================================================ */
function PublicNav({ nav }) {
  const [open, setOpen] = uS(false);
  const links = [
    { k: "home", label: "الرئيسية" },
    { k: "about", label: "عن ندى" },
    { k: "services", label: "الخدمات" },
    { k: "success", label: "قصص النجاح" },
    { k: "reviews", label: "آراء المتابعين" },
    { k: "contact", label: "تواصل" },
  ];
  const go = (k) => {
    setOpen(false);
    if (k === "reviews") return nav("feedback");
    nav("home");
    setTimeout(() => document.getElementById(k)?.scrollIntoView?.({ behavior: "smooth" }), 60);
  };
  return (
    <nav className="pub-nav">
      <div className="container pub-nav-inner">
        <Logo onClick={() => nav("home")} sub={false} />
        <button className="nav-toggle" onClick={() => setOpen(!open)} aria-label="القائمة"><Icon name="menu" /></button>
        <div className={`pub-links ${open ? "open" : ""}`}>
          {links.map((l) => <a key={l.k} onClick={() => go(l.k)}>{l.label}</a>)}
        </div>
        <a className="pub-login-icon" onClick={() => nav("login")} title="تسجيل الدخول" aria-label="تسجيل الدخول"><Icon name="user" /></a>
      </div>
    </nav>
  );
}

/* ============================================================
   LANDING
   ============================================================ */
function Landing({ nav, testimonials, t }) {
  const mode = (t && t.heroLayout) || "split";
  // Mobile prefers the centered hero; laptop uses the chosen layout (default: split).
  const [isMobile, setIsMobile] = uS(() => typeof window !== "undefined" && window.matchMedia("(max-width: 720px)").matches);
  React.useEffect(() => {
    const mq = window.matchMedia("(max-width: 720px)");
    const on = () => setIsMobile(mq.matches);
    mq.addEventListener ? mq.addEventListener("change", on) : mq.addListener(on);
    return () => { mq.removeEventListener ? mq.removeEventListener("change", on) : mq.removeListener(on); };
  }, []);
  const effMode = isMobile ? "centered" : mode;
  const PACKAGES = [
    { k: "شهر", sessions: 8, note: "متابعة يومين في الأسبوع" },
    { k: "شهرين", sessions: 16, note: "الأكثر اختيارًا للنتائج" },
    { k: "3 شهور", sessions: 24, note: "أطول متابعة وأفضل قيمة" },
  ];
  const [pkg, setPkg] = uS(1);

  // align: "right" (split, RTL natural) · "center" · "left" (text over empty left of photo)
  const heroInner = (align) => {
    const ta = align === "center" ? "center" : align === "left" ? "left" : "right";
    const just = align === "center" ? "center" : align === "left" ? "flex-end" : "flex-start"; // RTL: flex-end = visual left
    return (
      <div style={{ textAlign: ta }}>
        <span style={{ color: "var(--olive)", fontWeight: 700, letterSpacing: ".04em", fontSize: 15, marginBottom: 14, display: "block" }}>أخصائية التغذية العلاجية</span>
        <h1 style={{ fontSize: "clamp(34px, 5vw, 56px)", lineHeight: 1.14, marginBottom: 18 }}>
          رحلتك نحو صحة أفضل <span style={{ color: "var(--leaf)" }}>تبدأ من هنا</span>
        </h1>
        <p style={{ fontSize: 19, color: "var(--ink-2)", maxWidth: 540, marginBottom: 18, textWrap: "pretty", marginInline: align === "center" ? "auto" : 0 }}>
          مع Nutrition Vibes – خطة غذائية مخصصة لحالتك، ومتابعة مستمرة تنقلك خطوة بخطوة نحو هدفك.
        </p>
        <span className="pill" style={{ background: "var(--banana)", color: "#6b5410", marginBottom: 26, fontFamily: '"Cinzel", serif', letterSpacing: ".08em", fontSize: 14, fontWeight: 600 }}>Eat Right &amp; Eat Smart</span>
        <div className="row wrap" style={{ gap: 14, justifyContent: just }}>
          <a className="btn btn-primary btn-lg" href={WA} target="_blank" rel="noreferrer">ابدأ رحلتك<Icon name="arrow" /></a>
          <a className="btn btn-secondary btn-lg" href={WA} target="_blank" rel="noreferrer"><BrandIcon name="whatsapp" />تواصل عبر واتساب</a>
        </div>
      </div>
    );
  };

  return (
    <div className="fade-in">
      <PublicNav nav={nav} />

      {/* HERO */}
      {effMode === "full" ? (
        <header className="container" style={{ padding: "26px 24px 10px" }}>
          <div className="hero-full">
            <img className="hero-full-img" src="assets/hero.png" alt="خضار وفاكهة طازجة" />
            <div className="hero-full-scrim" />
            <div className="hero-full-flex">
              <div className="hero-full-text">
                {heroInner("left")}
              </div>
            </div>
          </div>
        </header>
      ) : effMode === "centered" ? (
        <header className="container" style={{ padding: "26px 24px 10px" }}>
          <div style={{ position: "relative", borderRadius: "var(--r-card)", overflow: "hidden", minHeight: 460 }}>
            <img src="assets/hero.png" alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", transform: "scaleX(-1)" }} />
            <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(247,246,241,.30) 0%, rgba(247,246,241,.86) 60%, rgba(247,246,241,.96) 100%)" }} />
            <div style={{ position: "relative", textAlign: "center", maxWidth: 720, margin: "0 auto", padding: "56px 24px 48px" }}>
              <Lockup width={150} style={{ margin: "0 auto 22px" }} />
              {heroInner("center")}
            </div>
          </div>
        </header>
      ) : (
        <header className="container split-hero">
          <div>{heroInner("right")}</div>
          <div style={{ position: "relative" }}>
            <img src="assets/hero.png" alt="خضار وفاكهة طازجة" style={{ width: "100%", aspectRatio: "1/1", objectFit: "cover", borderRadius: "var(--r-card)", boxShadow: "var(--shadow-md)" }} />
            <div className="card" style={{ position: "absolute", insetInlineStart: 18, bottom: 18, padding: "12px 16px", display: "flex", alignItems: "center", gap: 10, boxShadow: "var(--shadow-lg)" }}>
              <img src="assets/emblem.png" alt="" style={{ width: 34, height: 34 }} />
              <div style={{ lineHeight: 1.15 }}>
                <div className="nv-main" style={{ fontSize: 14 }}>Nutrition Vibes</div>
                <div style={{ fontSize: 11, color: "var(--olive)", fontWeight: 700 }}>DT. NADA HASSAN TAWFIK</div>
              </div>
            </div>
          </div>
        </header>
      )}

      {/* TRUST STRIP */}
      <section className="container" style={{ padding: "26px 24px" }}>
        <div className="trust">
          {[["heart", "مئات الحالات الناجحة"], ["chat", "متابعة أونلاين"], ["sprout", "تغذية علاجية إكلينيكية"], ["star", "تقييمات 5 نجوم"]].map(([ic, tx]) => (
            <div key={tx}><Icon name={ic} />{tx}</div>
          ))}
        </div>
      </section>

      {/* ABOUT */}
      <section id="about" className="container" style={{ padding: "40px 24px" }}>
        <div className="card card-pad about-grid">
          <Placeholder circle label="صورة د. ندى — بالبالطو" style={{ width: 200, height: 200 }} />
          <div>
            <h2 style={{ fontSize: 30, marginBottom: 14 }}>عن ندى</h2>
            <p style={{ fontSize: 18, color: "var(--ink-2)", textWrap: "pretty", lineHeight: 1.85 }}>
              أنا ندى حسن توفيق، أخصائية تغذية علاجية. بقدّم متابعة تغذية أونلاين شخصية لكل حالة — من إدارة الوزن للحالات المرضية — بخطة واقعية على أسلوب حياتك، ومتابعة مستمرة تخليك ملتزم من غير حرمان.
            </p>
          </div>
        </div>
      </section>

      {/* SPECIALTIES */}
      <section id="services" className="container" style={{ padding: "44px 24px" }}>
        <h2 style={{ fontSize: 30, marginBottom: 8, textAlign: "center" }}>بنتابع معاك إيه؟</h2>
        <p className="muted" style={{ textAlign: "center", fontSize: 17, marginBottom: 32 }}>تغذية علاجية لكل حالة، لكل سن، للستات والرجالة.</p>
        <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 18 }}>
          {CONDITIONS.map((s) => {
            const tile = TILE[s.color];
            return (
              <div key={s.t} className="card card-pad card-hover" style={{ display: "flex", gap: 16 }}>
                <span className="cond-icon" style={{ background: tile.bg, color: tile.fg }}><Icon name={s.icon} style={{ width: 26, height: 26 }} /></span>
                <div>
                  <h3 style={{ fontSize: 17.5, marginBottom: 5 }}>{s.t}</h3>
                  <p className="muted" style={{ fontSize: 15, textWrap: "pretty" }}>{s.d}</p>
                </div>
              </div>
            );
          })}
        </div>
      </section>

      {/* HOW IT WORKS */}
      <section className="container" style={{ padding: "44px 24px" }}>
        <h2 style={{ fontSize: 30, marginBottom: 32, textAlign: "center" }}>المتابعة بتتم إزاي؟</h2>
        <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 20 }}>
          {STEPS.map((s) => (
            <div key={s.n} className="card card-pad" style={{ display: "flex", gap: 16, alignItems: "flex-start" }}>
              <span className="step-num">{s.n}</span>
              <div><h3 style={{ fontSize: 18, marginBottom: 6 }}>{s.t}</h3><p className="muted" style={{ fontSize: 15.5, textWrap: "pretty" }}>{s.d}</p></div>
            </div>
          ))}
        </div>
      </section>

      {/* SUCCESS STORIES */}
      <section id="success" className="container" style={{ padding: "44px 24px" }}>
        <h2 style={{ fontSize: 30, marginBottom: 8, textAlign: "center" }}>قصص النجاح</h2>
        <p className="muted" style={{ textAlign: "center", fontSize: 17, marginBottom: 32 }}>نتائج حقيقية من متابعين حقيقيين.</p>
        <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 20 }}>
          {SUCCESS.map((s, i) => (
            <div key={i} className="card success-card card-hover">
              <Placeholder label={`قبل / بعد — ${s.label}`} style={{ borderRadius: 0, aspectRatio: "16/10", border: "none", borderBottom: "1px solid var(--line)" }} />
              <div className="card-pad" style={{ padding: 22 }}>
                <div className="success-stat">{s.stat}</div>
                <p className="muted" style={{ fontSize: 15, marginTop: 6 }}>{s.d}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* REVIEWS */}
      <section id="reviews" className="container" style={{ padding: "44px 24px" }}>
        <h2 style={{ fontSize: 30, marginBottom: 28, textAlign: "center" }}>آراء المتابعين</h2>
        <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 20 }}>
          {testimonials.slice(0, 3).map((tt) => (
            <div key={tt.id} className="card card-pad">
              <Stars value={tt.rating} />
              <p style={{ fontSize: 16.5, margin: "14px 0 18px", lineHeight: 1.8, textWrap: "pretty" }}>“{tt.text}”</p>
              <div className="row" style={{ gap: 10 }}>
                <span style={{ width: 36, height: 36, borderRadius: "50%", background: "var(--teal-tint)", display: "grid", placeItems: "center", color: "var(--teal-700)", fontWeight: 800 }}>{tt.name ? tt.name[0] : "؟"}</span>
                <b style={{ fontSize: 15 }}>{tt.name || "متابع/ة"}</b>
              </div>
            </div>
          ))}
        </div>
        <div style={{ textAlign: "center", marginTop: 24 }}>
          <a onClick={() => nav("feedback")} style={{ color: "var(--teal)", fontWeight: 700, fontSize: 16, cursor: "pointer" }}>اقرأ المزيد من تجارب المتابعين ←</a>
        </div>
      </section>

      {/* PACKAGES */}
      <section className="container" style={{ padding: "36px 24px" }}>
        <div className="card card-pad" style={{ background: "var(--teal-tint-2)", border: "1px solid var(--line-2)", padding: 32 }}>
          <div style={{ textAlign: "center", marginBottom: 22 }}>
            <h3 style={{ fontSize: 22, marginBottom: 6 }}>باقات المتابعة</h3>
            <p className="muted" style={{ fontSize: 16 }}>اختار المدة اللي تناسبك — واضغط عشان تشوف عدد الجلسات</p>
          </div>
          <div className="row wrap" style={{ gap: 12, justifyContent: "center" }}>
            {PACKAGES.map((p, i) => (
              <button key={p.k} className={`chip ${pkg === i ? "active" : ""}`} onClick={() => setPkg(i)} style={{ fontSize: 16, padding: "13px 28px", fontWeight: 700 }}>{p.k}</button>
            ))}
          </div>
          <div className="card fade-in" key={pkg} style={{ maxWidth: 440, margin: "20px auto 0", padding: "18px 22px", display: "flex", alignItems: "center", gap: 16 }}>
            <div style={{ textAlign: "center", flex: "none" }}>
              <div className="num bignum" style={{ fontSize: 40, color: "var(--teal)", lineHeight: 1 }}>{PACKAGES[pkg].sessions}</div>
              <div style={{ fontSize: 12.5, fontWeight: 700, color: "var(--leaf)" }}>جلسة متابعة</div>
            </div>
            <div style={{ borderInlineStart: "1px solid var(--line)", paddingInlineStart: 16 }}>
              <div style={{ fontWeight: 800, fontSize: 17 }}>باقة {PACKAGES[pkg].k}</div>
              <div className="muted" style={{ fontSize: 14.5, marginTop: 2 }}>{PACKAGES[pkg].note}</div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA band */}
      <section id="contact" className="container" style={{ padding: "44px 24px 24px" }}>
        <div className="card" style={{ background: "linear-gradient(135deg, var(--teal) 0%, var(--teal-600) 100%)", color: "#fff", textAlign: "center", padding: "52px 24px", border: "none", boxShadow: "0 18px 50px rgba(46,94,58,.30)" }}>
          <h2 style={{ fontSize: 32, color: "#fff", marginBottom: 22 }}>جاهز تبدأ رحلة التغيير؟</h2>
          <a className="btn btn-lg" style={{ background: "#fff", color: "var(--teal)" }} href={WA} target="_blank" rel="noreferrer"><BrandIcon name="whatsapp" />تواصل معنا الآن</a>
        </div>
      </section>

      {/* FOOTER */}
      <footer style={{ borderTop: "1px solid var(--line)", marginTop: 40, background: "#fff" }}>
        <div className="container footer-grid">
          <div>
            <Lockup width={180} />
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 4, alignItems: "stretch" }}>
            <a className="social-link" href={WA} target="_blank" rel="noreferrer">
              <span className="social-ic" style={{ background: "#25D366" }}><BrandIcon name="whatsapp" /></span>
              <span className="social-meta"><div className="s-lbl">واتساب</div><div className="s-val num" dir="ltr" style={{ textAlign: "right" }}>0100 784 7074</div></span>
            </a>
            <a className="social-link" href="https://instagram.com/dt.nada_hassan_tawfik" target="_blank" rel="noreferrer">
              <span className="social-ic" style={{ background: "linear-gradient(45deg,#F58529,#DD2A7B,#8134AF)" }}><BrandIcon name="instagram" /></span>
              <span className="social-meta"><div className="s-lbl">انستجرام</div><div className="s-val">Nutrition Vibes</div></span>
            </a>
            <a className="social-link" href="https://www.facebook.com/profile.php?id=61572761040972" target="_blank" rel="noreferrer">
              <span className="social-ic" style={{ background: "#1877F2" }}><BrandIcon name="facebook" /></span>
              <span className="social-meta"><div className="s-lbl">فيسبوك</div><div className="s-val">Nutrition Vibes</div></span>
            </a>
          </div>
        </div>
        <div className="container row between" style={{ padding: "16px 24px 26px", borderTop: "1px solid var(--line)", flexWrap: "wrap", gap: 12 }}>
          <span className="muted" style={{ fontSize: 14 }}>© Nutrition Vibes 2026 · Eat Right &amp; Eat Smart</span>
          <a className="muted" onClick={() => nav("login")} style={{ fontSize: 13.5, cursor: "pointer" }}>تسجيل الدخول</a>
        </div>
      </footer>
    </div>
  );
}

/* ============================================================
   FEEDBACK WALL (public)
   ============================================================ */
function FeedbackWall({ nav, testimonials, onSubmit }) {
  const [name, setName] = uS("");
  const [rating, setRating] = uS(5);
  const [text, setText] = uS("");
  const [robot, setRobot] = uS(false);
  const [sent, setSent] = uS(false);

  const submit = () => {
    if (!text.trim() || !robot) return;
    onSubmit({ name: name.trim() || null, rating, text: text.trim() });
    setSent(true);
    setName(""); setText(""); setRating(5); setRobot(false);
  };

  return (
    <div className="fade-in">
      <PublicNav nav={nav} />
      <div className="container" style={{ maxWidth: 1040, padding: "52px 24px 70px" }}>
        <div style={{ textAlign: "center", marginBottom: 40 }}>
          <h1 style={{ fontSize: 38, marginBottom: 16 }}>شاركونا رأيكم</h1>
          <p style={{ fontSize: 18, color: "var(--ink-2)", textWrap: "pretty" }}>كل تجربة بتتحكي هنا هي خطوة في رحلة حقيقية نحو صحة أفضل</p>
          <p style={{ fontSize: 18, color: "var(--ink-2)", textWrap: "pretty" }}>شاركونا تجربتكم… يمكن تكون سبب في تغيير حياة حد تاني</p>
        </div>

        <div className="masonry" style={{ marginBottom: 44 }}>
          {testimonials.map((tt) => (
            <div key={tt.id} className="card card-pad">
              <div className="row between">
                <div className="row" style={{ gap: 10 }}>
                  <span style={{ width: 38, height: 38, borderRadius: "50%", background: "var(--teal-tint)", display: "grid", placeItems: "center", color: "var(--teal-700)", fontWeight: 800 }}>{tt.name ? tt.name[0] : "؟"}</span>
                  <b style={{ fontSize: 15.5 }}>{tt.name || "بدون اسم"}</b>
                </div>
                <Stars value={tt.rating} size={15} />
              </div>
              <p style={{ fontSize: 16, marginTop: 14, lineHeight: 1.8, textWrap: "pretty" }}>“{tt.text}”</p>
            </div>
          ))}
        </div>

        {/* Submit card */}
        <div className="card card-pad" style={{ maxWidth: 560, margin: "0 auto", padding: 32 }}>
          <h2 style={{ fontSize: 24, marginBottom: 6 }}>شاركنا تجربتك</h2>
          {sent && (
            <div style={{ background: "var(--green-tint)", color: "#4d7a26", padding: "12px 16px", borderRadius: 12, fontWeight: 700, fontSize: 14.5, margin: "14px 0", display: "flex", gap: 9, alignItems: "center" }}>
              <Icon name="checkCircle" style={{ width: 20, height: 20 }} />تم الإرسال! رأيك هيتراجع من د. ندى قبل ما يظهر.
            </div>
          )}
          <div className="stack" style={{ gap: 18, marginTop: 18 }}>
            <div className="field">
              <label className="field-label">اسمك (اختياري)</label>
              <input className="input" value={name} onChange={(e) => setName(e.target.value)} placeholder="مثلاً: محمود" />
            </div>
            <div className="field">
              <label className="field-label">تقييمك</label>
              <StarInput value={rating} onChange={setRating} />
            </div>
            <div className="field">
              <label className="field-label">تجربتك</label>
              <textarea className="textarea" value={text} onChange={(e) => setText(e.target.value)} placeholder="اكتب تجربتك هنا..." />
            </div>
            <label className="row" style={{ gap: 11, cursor: "pointer", background: "var(--bg)", border: "1.5px solid var(--line-2)", borderRadius: 12, padding: "13px 16px" }}>
              <input type="checkbox" checked={robot} onChange={(e) => setRobot(e.target.checked)} style={{ width: 20, height: 20, accentColor: "var(--leaf)" }} />
              <span style={{ fontSize: 15, fontWeight: 600, color: "var(--ink-2)" }}>تأكيد أنك لست روبوت</span>
            </label>
            <button className="btn btn-primary btn-lg btn-block" disabled={!text.trim() || !robot} onClick={submit}
              style={{ opacity: (!text.trim() || !robot) ? .55 : 1, cursor: (!text.trim() || !robot) ? "not-allowed" : "pointer" }}>
              إرسال
            </button>
            <p className="muted" style={{ fontSize: 13.5, textAlign: "center" }}>رأيك هيتراجع من د. ندى قبل ما يظهر للجميع.</p>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   LOGIN
   ============================================================ */
function Login({ nav }) {
  const [email, setEmail] = uS("nada@nutritionvibes.com");
  const [pass, setPass] = uS("••••••••");
  return (
    <div className="fade-in" style={{ minHeight: "100vh", display: "grid", placeItems: "center", padding: 24 }}>
      <div className="card" style={{ width: "100%", maxWidth: 420, padding: 38 }}>
        <div style={{ textAlign: "center", marginBottom: 26 }}>
          <Lockup width={170} style={{ margin: "0 auto 18px" }} />
          <h1 style={{ fontSize: 24 }}>تسجيل الدخول</h1>
        </div>
        <div className="stack" style={{ gap: 18 }}>
          <div className="field">
            <label className="field-label">البريد الإلكتروني</label>
            <input className="input" value={email} onChange={(e) => setEmail(e.target.value)} dir="ltr" style={{ textAlign: "right" }} />
          </div>
          <div className="field">
            <label className="field-label">كلمة المرور</label>
            <input className="input" type="password" value={pass} onChange={(e) => setPass(e.target.value)} dir="ltr" style={{ textAlign: "right" }} />
          </div>
          <button className="btn btn-primary btn-lg btn-block" onClick={() => nav("dashboard")}>دخول</button>
          <a className="muted" onClick={() => nav("home")} style={{ textAlign: "center", fontSize: 14, cursor: "pointer" }}>← رجوع للصفحة الرئيسية</a>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PublicNav, Landing, FeedbackWall, Login });