const { useState, useEffect, useMemo } = React;
const { Icon } = window;

/* ---------- helpers ---------- */
function endOfMonth() {
  const now = new Date();
  // Next monthly draw: last day of current month at 21:00
  const d = new Date(now.getFullYear(), now.getMonth() + 1, 0, 21, 0, 0);
  if (d < now) d.setMonth(d.getMonth() + 1);
  return d;
}

function useCountdown(target) {
  const [now, setNow] = useState(Date.now());
  useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  const diff = Math.max(0, target.getTime() - now);
  const days = Math.floor(diff / 86400000);
  const hours = Math.floor(diff / 3600000) % 24;
  const mins = Math.floor(diff / 60000) % 60;
  const secs = Math.floor(diff / 1000) % 60;
  return { days, hours, mins, secs };
}

const pad = (n) => String(n).padStart(2, "0");

/* ---------- data ---------- */
const PACKAGES = [
  {
    id: "bronze",
    name: "البرونزية",
    en: "BRONZE",
    price: 5,
    prize: "Samsung Galaxy A06",
    prizeNote: "هاتف ذكي عملي للاستخدام اليومي",
    perks: ["دخول السحب البرونزي", "وصول لمجموعة تلغرام", "تتبع تقدم المهام"],
    featured: false,
  },
  {
    id: "silver",
    name: "الفضية",
    en: "SILVER",
    price: 10,
    prize: "iPhone 14 أو Samsung A17",
    prizeNote: "اختيار الفائز بين الجائزتين",
    perks: ["دخول السحب الفضي", "بطاقات مهام يومية", "أولوية الدعم"],
    featured: false,
  },
  {
    id: "gold",
    name: "الذهبية",
    en: "GOLD",
    price: 15,
    prize: "Samsung Galaxy A56 5G",
    prizeNote: "أداء عالي وكاميرا ممتازة",
    perks: ["دخول السحب الذهبي", "مكافأة المهام الإضافية", "شارة عضو ذهبي"],
    featured: true,
  },
  {
    id: "diamond",
    name: "الماسية",
    en: "DIAMOND",
    price: 20,
    prize: "iPhone 17",
    prizeNote: "أحدث إصدار من فئة الجائزة الكبرى",
    perks: ["دخول السحب الماسي", "نسبة فوز شهرية أعلى نظرياً", "دعم مخصص + شارة ماسية"],
    featured: false,
  },
];

const STEPS = [
  { icon: <Icon.Pkg />, t: "اختر الباقة", d: "اختر باقتك الشهرية المناسبة لميزانيتك وفئة الجائزة التي تريد." },
  { icon: <Icon.Wallet />, t: "ادفع عبر شام كاش", d: "حوّل قيمة الاشتراك إلى حساب المنصة الموضح في نموذج الاشتراك." },
  { icon: <Icon.Plane />, t: "انضم إلى تلغرام", d: "اضغط زر الانضمام لمتابعة الإعلانات والمهام والبث المباشر." },
  { icon: <Icon.ClipCheck />, t: "نفّذ 50% من المهام", d: "أكمل الحد الأدنى من المهام الشهرية لتأهيل اشتراكك للسحب." },
];

const TASKS = [
  { icon: <Icon.UserPlus />, t: "متابعة الحسابات الرسمية", d: "تابع حسابات المنصة على المنصات المعلنة", pts: "5 نقاط × المنصة" },
  { icon: <Icon.Heart />, t: "إعجاب بالمنشورات", d: "تفاعل بالإعجاب على المنشورات الأسبوعية", pts: "نقطة × منشور" },
  { icon: <Icon.Comment />, t: "تعليق هادف", d: "علّق بشكل لائق على المنشورات المخصصة للتعليق", pts: "3 نقاط × تعليق" },
  { icon: <Icon.Share />, t: "إعادة المشاركة", d: "شارك المنشور المعلن داخل المجموعة العامة", pts: "4 نقاط × مشاركة" },
  { icon: <Icon.Plane />, t: "نشاط مجموعة تلغرام", d: "تواجد ونشاط داخل المجموعة الرسمية للمشتركين", pts: "10 نقاط شهرية" },
  { icon: <Icon.Megaphone />, t: "دعوة صديق مؤهل", d: "دعوة عضو جديد يكمل اشتراكه (اختياري)", pts: "+15 نقطة لكل دعوة" },
];

const DRAW = [
  { icon: <Icon.Dice size={24} />, t: "اختيار عشوائي شفاف", d: "يتم استخدام أداة سحب عشوائية معلنة، تُعرض الشاشة بالكامل أثناء السحب." },
  { icon: <Icon.Cast size={24} />, t: "بث مباشر على تلغرام", d: "السحب يُذاع مباشرة على قناتنا الرسمية، ويُسجّل الفيديو ويُحفظ كمرجع." },
  { icon: <Icon.Trophy size={22} />, t: "فائز واحد لكل فئة", d: "تُعلن أسماء الفائزين فوراً بعد السحب، ثم يتم التواصل لتسليم الجوائز." },
];

const TERMS = [
  "العمر القانوني للمشاركة 18 عاماً أو أكثر.",
  "يُحسب الاشتراك ابتداءً من تاريخ تأكيد الدفع.",
  "يُلزم المشترك بتنفيذ 50% من المهام الشهرية على الأقل.",
  "في حال عدم التأهل، يلزم تجديد الاشتراك للشهر التالي للمشاركة من جديد.",
  "السحب نهائي ولا يمكن استبدال الجائزة بقيمة نقدية.",
  "يتم تسليم الجوائز داخل سوريا أو شحنها وفق الاتفاق.",
];

const FAQS = [
  { q: "هل المنصة آمنة؟", a: "نعم. لا نطلب أي معلومات حساسة مثل كلمات المرور أو رموز التحقق، ولا نتدخل في حسابك على أي تطبيق دفع. الدفع يتم من جهازك إلى حساب الاستلام المعلن." },
  { q: "ماذا لو لم أنفذ 50% من المهام؟", a: "لن يدخل اشتراكك في سحب هذا الشهر، ولن يُرحَّل تلقائياً — يجب تجديد الاشتراك للشهر التالي لإعادة المحاولة." },
  { q: "كيف أعرف أنني فزت؟", a: "تُعلن أسماء الفائزين عبر البث المباشر على تلغرام، ثم نتواصل معك بشكل مباشر عبر الرقم الذي سجّلته." },
  { q: "هل أستطيع الاشتراك في أكثر من باقة؟", a: "نعم، كل باقة تدخلك في سحبها الخاص، ويمكنك الجمع بين باقتين أو أكثر." },
  { q: "متى يجري السحب؟", a: "في آخر يوم من كل شهر ميلادي عند الساعة التاسعة مساءً بتوقيت دمشق." },
  { q: "كيف تُحسب نقاطي؟", a: "كل مهمة تمنحك نقاطاً، وتُجمع شهرياً. لتأهلك للسحب، عليك إنجاز ما يعادل 50% من إجمالي مهام الشهر." },
];

/* ---------- components ---------- */
function Brand() {
  return (
    <div className="brand">
      <div className="brand-mark">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#e9c46a" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M7 4h10v5a5 5 0 0 1-10 0V4Z"/>
          <path d="M9 18h6M10 18l.5-3M14 18l-.5-3M8 21h8"/>
        </svg>
      </div>
      <div className="brand-name">
        <b>Win Syria Job</b>
        <span>EARN · ONLINE WORK</span>
      </div>
    </div>
  );
}

function Countdown({ target }) {
  const { days, hours, mins, secs } = useCountdown(target);
  return (
    <div className="countdown">
      <div className="cd-cell"><b>{pad(days)}</b><span>يوم</span></div>
      <div className="cd-cell"><b>{pad(hours)}</b><span>ساعة</span></div>
      <div className="cd-cell"><b>{pad(mins)}</b><span>دقيقة</span></div>
      <div className="cd-cell"><b>{pad(secs)}</b><span>ثانية</span></div>
    </div>
  );
}

function Nav() {
  return (
    <header className="nav">
      <div className="wrap nav-inner">
        <Brand />
        <nav className="nav-links">
          <a href="#packages">الباقات</a>
          <a href="#how">آلية الاشتراك</a>
          <a href="#tasks">المهام</a>
          <a href="#draw">السحب</a>
          <a href="#faq">الأسئلة</a>
        </nav>
        <div className="nav-cta">
          <a className="btn btn-tg" href="https://t.me/winsyriajob" target="_blank" rel="noopener"><Icon.Plane size={16}/> انضم لتلغرام</a>
          <a className="btn btn-primary" href="#join">اشترك الآن</a>
        </div>
      </div>
    </header>
  );
}

function Hero({ target }) {
  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="wrap hero-grid">
        <div>
          <span className="pill"><span className="dot"/> السحب القادم نهاية الشهر — بث مباشر على تلغرام</span>
          <h1 className="hero-title">
            اربح هاتفك القادم
            <br/>
            من <span className="grad">مهام بسيطة</span> شهرياً.
          </h1>
          <div className="hero-en">Win Syria Job — Earn From Online Work</div>
          <p className="hero-sub">
            منصة عربية شفافة للمسابقات والسحوبات الشهرية. اشترك بباقة شهرية، نفّذ مهام تفاعلية على وسائل التواصل الاجتماعي،
            وادخل سحبًا واحدًا لكل فئة. السحب مباشر، الفائز معلن، والآلية واضحة من البداية.
          </p>
          <div style={{display:"flex",gap:12,flexWrap:"wrap"}}>
            <a href="#packages" className="btn btn-primary"><Icon.Sparkle size={16}/> اختر باقتك</a>
            <a href="#how" className="btn btn-ghost"><Icon.Info size={16}/> كيف تشترك؟</a>
          </div>
          <div className="hero-stats">
            <div className="stat"><b>4</b><span>فئات سحب شهرية</span></div>
            <div className="stat"><b>1 فائز</b><span>لكل فئة شهرياً</span></div>
            <div className="stat"><b>+50%</b><span>تأهّل بالمهام</span></div>
          </div>
        </div>

        <div className="hero-card">
          <div className="hero-card-head">
            <h3><Icon.Clock size={16}/> &nbsp; السحب الشهري القادم</h3>
            <span className="live">LIVE قريباً</span>
          </div>
          <Countdown target={target}/>
          <div className="prize-strip">
            <div className="ps">
              <div className="ic" style={{color:"#e8a575"}}><Icon.Gift size={16}/></div>
              <div><small>برونزية</small><b>Galaxy A06</b></div>
            </div>
            <div className="ps">
              <div className="ic" style={{color:"#dde3ec"}}><Icon.Gift size={16}/></div>
              <div><small>فضية</small><b>iPhone 14 / A17</b></div>
            </div>
            <div className="ps">
              <div className="ic" style={{color:"#ffe6a0"}}><Icon.Gift size={16}/></div>
              <div><small>ذهبية</small><b>Galaxy A56 5G</b></div>
            </div>
            <div className="ps">
              <div className="ic" style={{color:"#b6f5ed"}}><Icon.Gift size={16}/></div>
              <div><small>ماسية</small><b>iPhone 17</b></div>
            </div>
          </div>
          <div style={{marginTop:16,padding:"10px 12px",borderRadius:12,background:"rgba(47,213,196,.08)",border:"1px solid rgba(47,213,196,.25)",fontSize:12.5,color:"#aeeee4",display:"flex",alignItems:"center",gap:8}}>
            <Icon.Shield size={14}/> الدفع آمن، لا نطلب بيانات حسابك على أي تطبيق دفع.
          </div>
        </div>
      </div>
    </section>
  );
}

function Packages({ onPick }) {
  return (
    <section id="packages" data-screen-label="02 Packages">
      <div className="wrap">
        <div className="sec-head">
          <div className="sec-eyebrow">PACKAGES · الباقات الشهرية</div>
          <h2 className="sec-title">اختر فئة جائزتك</h2>
          <p className="sec-sub">أربع باقات شهرية، فائز واحد فقط لكل فئة. كل باقة تدخلك في سحبها الخاص.</p>
        </div>
        <div className="pkg-grid">
          {PACKAGES.map(p => (
            <div key={p.id} className={`pkg ${p.id} ${p.featured?"featured":""}`}>
              {p.featured && <div className="pkg-tag">الأكثر شعبية</div>}
              <div className="pkg-tier">
                <div className="tier-orb"/>
                <div>
                  <h4>{p.name}</h4>
                  <div style={{fontFamily:"JetBrains Mono",fontSize:11,color:"var(--ink-dim)",letterSpacing:1}}>{p.en}</div>
                </div>
              </div>
              <div className="price">
                <span className="v">${p.price}</span>
                <span className="c">/ شهرياً</span>
              </div>
              <div className="per">يجدّد يدوياً عند بداية كل شهر</div>
              <div className="prize-box">
                <small>الجائزة الشهرية</small>
                <b>{p.prize}</b>
                <div style={{fontSize:12,color:"var(--ink-dim)",marginTop:6}}>{p.prizeNote}</div>
              </div>
              <ul>
                {p.perks.map((x,i)=>(<li key={i}><Icon.Check/> {x}</li>))}
              </ul>
              <button className="btn btn-primary pick" onClick={()=>onPick(p.id)}>
                اشترك — ${p.price}
              </button>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  return (
    <section id="how" data-screen-label="03 How">
      <div className="wrap">
        <div className="sec-head">
          <div className="sec-eyebrow">HOW IT WORKS · خطوات الاشتراك</div>
          <h2 className="sec-title">أربع خطوات للدخول في السحب</h2>
          <p className="sec-sub">آلية واضحة، شفافة، بدون أي طلب لبيانات دخول حساسة.</p>
        </div>
        <div className="steps">
          {STEPS.map((s,i)=>(
            <div className="step" key={i}>
              <div className="num">{pad(i+1)}</div>
              <div className="si">{s.icon}</div>
              <h5>{s.t}</h5>
              <p>{s.d}</p>
              {s.code && <code>{s.code}</code>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Tasks() {
  return (
    <section id="tasks" data-screen-label="04 Tasks">
      <div className="wrap">
        <div className="sec-head">
          <div className="sec-eyebrow">MONTHLY TASKS · المهام الشهرية</div>
          <h2 className="sec-title">نفّذ مهامك، تأهّل للسحب</h2>
          <p className="sec-sub">عليك إنجاز ما لا يقل عن 50% من المهام الشهرية حتى يدخل اشتراكك في السحب النهائي.</p>
        </div>
        <div className="tasks-grid">
          <div className="tasks-list">
            {TASKS.map((t,i)=>(
              <div className="task" key={i}>
                <div className="ti" style={{color: i%2 ? "#e9c46a" : "#2fd5c4"}}>{t.icon}</div>
                <div>
                  <h6>{t.t}</h6>
                  <p>{t.d}</p>
                </div>
                <div className="pts">{t.pts}</div>
              </div>
            ))}
          </div>
          <div className="progress-card">
            <h5>تقدّمك في المهام الشهرية</h5>
            <div className="pcsub">مثال على لوحة التحكم الخاصة بك بعد الاشتراك</div>
            <div className="ring">
              <svg width="200" height="200">
                <circle cx="100" cy="100" r="84" stroke="rgba(255,255,255,.07)" strokeWidth="14" fill="none"/>
                <circle cx="100" cy="100" r="84" stroke="url(#g1)" strokeWidth="14" strokeLinecap="round"
                  fill="none" strokeDasharray={`${2*Math.PI*84*0.68} ${2*Math.PI*84}`}/>
                <defs>
                  <linearGradient id="g1" x1="0" y1="0" x2="1" y2="1">
                    <stop offset="0" stopColor="#2fd5c4"/>
                    <stop offset="1" stopColor="#e9c46a"/>
                  </linearGradient>
                </defs>
              </svg>
              <div className="lab"><div><b>68%</b><span>من المهام مكتملة</span></div></div>
            </div>
            <div className="req-row"><span>الحد الأدنى للتأهل</span><b>50%</b></div>
            <div className="req-row"><span>حالة التأهل</span><b className="ok">مؤهَّل ✓</b></div>
            <div className="req-row"><span>الفئة الحالية</span><b>الذهبية</b></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Draw({ target }) {
  return (
    <section id="draw" data-screen-label="05 Draw">
      <div className="wrap">
        <div className="sec-head">
          <div className="sec-eyebrow">DRAW · آلية السحب</div>
          <h2 className="sec-title">سحب شهري شفاف ومباشر</h2>
          <p className="sec-sub">نُجري السحب أمام الجميع، بنفس الأداة وبنفس الإعلان كل شهر — بدون استثناءات.</p>
        </div>
        <div className="draw-grid">
          {DRAW.map((d,i)=>(
            <div className="draw-card" key={i}>
              <div className="di">{d.icon}</div>
              <h5>{d.t}</h5>
              <p>{d.d}</p>
            </div>
          ))}
        </div>

        <div className="sec-banner" style={{marginTop:60}}>
          <div className="sbi"><Icon.Warn/></div>
          <div>
            <h5>تنبيه أمان — اقرأ بعناية</h5>
            <p><b>لا نطلب كلمة مرور شام كاش أو رمز التحقق أو أي بيانات دخول.</b> إن طلب أي شخص يدّعي تمثيل المنصة هذه البيانات — فهو محتال. تواصل معنا فوراً عبر القناة الرسمية.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function Form({ selected, setSelected, target }) {
  const [copied, setCopied] = useState(false);
  const [submitted, setSubmitted] = useState(false);
  const [fullName, setFullName] = useState("");
  const [phone, setPhone] = useState("");
  const [tg, setTg] = useState("");
  const [txn, setTxn] = useState("");
  const [file, setFile] = useState(null);
  const [msgCopied, setMsgCopied] = useState(false);
  const pkg = PACKAGES.find(p => p.id === selected) || PACKAGES[0];
  const copyAcct = () => {
    navigator.clipboard?.writeText("a0021a5e61d91c60c0f983a72109fdf3");
    setCopied(true);
    setTimeout(()=>setCopied(false), 1800);
  };

  const buildMessage = () => {
    const cleanTg = (tg || "").replace(/^@/, "").trim();
    return (
`📥 طلب اشتراك جديد — Win Syria Job

👤 الاسم: ${fullName}
📱 الجوال/واتساب: ${phone}
💬 تلغرام: @${cleanTg}

📦 الباقة: ${pkg.name} (${pkg.en})
💵 المبلغ: $${pkg.price}
🎁 الجائزة: ${pkg.prize}

🧾 رقم العملية: ${txn ? txn : "— (سيتم إرفاق الإيصال)"}
📎 الإيصال مرفق أدناه

— تم الإرسال من موقع winsyriajob`
    );
  };

  const submit = async (e) => {
    e.preventDefault();
    const message = buildMessage();
    try {
      await navigator.clipboard?.writeText(message);
    } catch {}
    // Open Telegram chat with the admin
    window.open("https://t.me/Winsyriajob1", "_blank", "noopener");
    setSubmitted(true);
    setTimeout(()=>{
      const el = document.getElementById("join");
      if (el) {
        const y = el.getBoundingClientRect().top + window.scrollY - 24;
        window.scrollTo({ top: y, behavior: "smooth" });
      }
    }, 50);
  };

  const copyMessage = async () => {
    try {
      await navigator.clipboard?.writeText(buildMessage());
      setMsgCopied(true);
      setTimeout(()=>setMsgCopied(false), 1800);
    } catch {}
  };

  return (
    <section id="join" data-screen-label="06 Subscribe">
      <div className="wrap">
        <div className="sec-head">
          <div className="sec-eyebrow">SUBSCRIBE · نموذج الاشتراك</div>
          <h2 className="sec-title">سجّل اشتراكك الشهري</h2>
          <p className="sec-sub">املأ النموذج بعد إتمام التحويل عبر شام كاش — سنُفعّل اشتراكك خلال 24 ساعة كحد أقصى.</p>
        </div>

        <div className="form-grid">
          <div className="form-card">
            {submitted ? (
              <div style={{padding:"10px 4px"}}>
                <div style={{textAlign:"center",marginBottom:22}}>
                  <div style={{width:78,height:78,borderRadius:"50%",background:"rgba(94,224,160,.12)",border:"1px solid rgba(94,224,160,.4)",display:"grid",placeItems:"center",margin:"0 auto 16px",color:"#5ee0a0"}}><Icon.Check size={34}/></div>
                  <h4 style={{margin:"0 0 6px",fontSize:20}}>تم تجهيز طلبك ✓</h4>
                  <p style={{color:"var(--ink-mute)",fontSize:13.5,margin:0,lineHeight:1.7}}>فُتحت محادثة تلغرام مع <b style={{color:"#fff"}}>@Winsyriajob1</b>، ونُسخت بياناتك تلقائياً إلى الحافظة.</p>
                </div>

                <div style={{padding:"14px 16px",borderRadius:14,background:"rgba(34,158,217,.08)",border:"1px solid rgba(34,158,217,.3)",marginBottom:14}}>
                  <div style={{fontSize:13,fontWeight:700,marginBottom:10,color:"#aee0fb",display:"flex",alignItems:"center",gap:8}}><Icon.Info size={14}/> أكمل الخطوات في تلغرام:</div>
                  <ol style={{margin:0,paddingInlineStart:18,color:"var(--ink-mute)",fontSize:13,lineHeight:1.9}}>
                    <li>الصق الرسالة المنسوخة في محادثة <b style={{color:"#fff"}}>@Winsyriajob1</b>.</li>
                    <li>أرفق <b style={{color:"#fff"}}>صورة إيصال التحويل</b> من شام كاش في نفس المحادثة.</li>
                    <li>انتظر التأكيد خلال 24 ساعة وستُضاف إلى مجموعة المهام.</li>
                  </ol>
                </div>

                <div style={{display:"flex",gap:10,flexWrap:"wrap"}}>
                  <a href="https://t.me/Winsyriajob1" target="_blank" rel="noopener" className="btn btn-tg" style={{flex:"1 1 auto",justifyContent:"center",padding:"12px"}}>
                    <Icon.Plane size={16}/> فتح المحادثة
                  </a>
                  <button type="button" className={`btn ${msgCopied?"btn-primary":"btn-ghost"}`} onClick={copyMessage} style={{flex:"1 1 auto",justifyContent:"center",padding:"12px"}}>
                    {msgCopied ? "✓ تم النسخ" : "نسخ الرسالة مجدداً"}
                  </button>
                </div>

                <button className="btn btn-ghost" style={{marginTop:14,width:"100%",justifyContent:"center"}} onClick={()=>setSubmitted(false)}>← تعديل البيانات</button>
              </div>
            ) : (
              <form onSubmit={submit}>
                <div className="field">
                  <label>الباقة المختارة</label>
                  <div className="pkg-radios">
                    {PACKAGES.map(p => (
                      <label key={p.id} className={`pkg-radio ${selected===p.id?"on":""}`} onClick={()=>setSelected(p.id)}>
                        <input type="radio" name="pkg" checked={selected===p.id} readOnly/>
                        <span className="pr-dot"/>
                        <b>{p.name}</b>
                        <span>${p.price}</span>
                      </label>
                    ))}
                  </div>
                </div>
                <div className="field">
                  <label>الاسم الكامل</label>
                  <input required value={fullName} onChange={e=>setFullName(e.target.value)} placeholder="مثلاً: أحمد محمد"/>
                </div>
                <div className="field">
                  <label>رقم الواتساب أو الموبايل</label>
                  <input required type="tel" value={phone} onChange={e=>setPhone(e.target.value)} placeholder="09xxxxxxxx" style={{direction:"ltr",textAlign:"right"}}/>
                  <div className="hint">سنتواصل معك عبر هذا الرقم عند الفوز فقط.</div>
                </div>
                <div className="field">
                  <label>اسم مستخدم تلغرام <span style={{color:"#ff7a8a"}}>*</span></label>
                  <input required value={tg} onChange={e=>setTg(e.target.value)} placeholder="@username" style={{direction:"ltr",textAlign:"right"}}/>
                  <div className="hint">إجباري — سيتم التواصل معك ودعوتك إلى المجموعة من خلاله.</div>
                </div>
                <div className="field">
                  <label>رقم عملية التحويل (اختياري)</label>
                  <input value={txn} onChange={e=>setTxn(e.target.value)} placeholder="مثلاً: TXN-845112" style={{direction:"ltr",textAlign:"right"}}/>
                  <div className="hint">يمكنك ترك هذا الحقل فارغاً إذا أرفقت صورة الإيصال.</div>
                </div>

                <div className="field">
                  <label>إيصال التحويل (صورة) <span style={{color:"#ff7a8a"}}>*</span></label>
                  <label htmlFor="receipt-upload" style={{
                    display:"flex",alignItems:"center",gap:14,padding:"14px 16px",borderRadius:12,
                    background:"rgba(4,16,31,.6)",border:"1.5px dashed rgba(47,213,196,.35)",
                    cursor:"pointer",transition:".18s"
                  }}>
                    <div style={{width:42,height:42,borderRadius:10,background:"rgba(47,213,196,.12)",color:"var(--teal)",display:"grid",placeItems:"center",flexShrink:0}}>
                      {file ? <Icon.Check size={20}/> : (
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 16V4M12 4 7 9M12 4l5 5"/><path d="M5 20h14"/></svg>
                      )}
                    </div>
                    <div style={{flex:1,minWidth:0}}>
                      <b style={{display:"block",fontSize:13.5,color:"#fff",lineHeight:1.3}}>{file ? file.name : "اضغط لرفع صورة الإيصال"}</b>
                      <span style={{fontSize:11.5,color:"var(--ink-dim)"}}>{file ? `${(file.size/1024).toFixed(0)} KB · ${file.type||""}` : "JPG / PNG / PDF — حتى 8MB"}</span>
                    </div>
                    {file && (
                      <button type="button" onClick={(e)=>{e.preventDefault();setFile(null);}} style={{background:"none",border:"none",color:"var(--ink-dim)",cursor:"pointer",fontSize:18,padding:4}}>✕</button>
                    )}
                  </label>
                  <input id="receipt-upload" type="file" required accept="image/*,.pdf" onChange={(e)=>setFile(e.target.files?.[0]||null)} style={{display:"none"}}/>
                  <div className="hint">سيُطلب منك إرفاق نفس الصورة في محادثة تلغرام بعد الضغط على "تأكيد الاشتراك".</div>
                </div>

                <label style={{display:"flex",alignItems:"start",gap:10,fontSize:13,color:"var(--ink-mute)",marginBottom:18,cursor:"pointer"}}>
                  <input type="checkbox" required style={{marginTop:3}}/>
                  أوافق على الشروط، وأقرّ بأن المنصة لن تطلب مني أي بيانات دخول أو كلمات مرور.
                </label>
                <button type="submit" className="btn btn-primary" style={{width:"100%",justifyContent:"center",padding:"14px"}}>
                  <Icon.Plane size={16}/> تأكيد الاشتراك — إرسال عبر تلغرام (${pkg.price})
                </button>
                <div style={{textAlign:"center",marginTop:10,fontSize:11.5,color:"var(--ink-dim)"}}>
                  سيتم فتح محادثة @Winsyriajob1 ونسخ بياناتك تلقائياً.
                </div>
              </form>
            )}
          </div>

          <div>
            <div className="pay-info" style={{marginBottom:20}}>
              <h5><Icon.Wallet size={18}/> بيانات الدفع عبر شام كاش</h5>
              <div className="pay-row" style={{flexDirection:"column",alignItems:"stretch",gap:10}}>
                <div style={{display:"flex",justifyContent:"space-between",alignItems:"center"}}>
                  <span>معرّف حساب شام كاش</span>
                  <button type="button" className={`copy-btn ${copied?"copied":""}`} onClick={copyAcct}>{copied ? "✓ تم النسخ" : "نسخ المعرّف"}</button>
                </div>
                <b style={{fontSize:12.5,direction:"ltr",wordBreak:"break-all",lineHeight:1.5,padding:"8px 10px",borderRadius:8,background:"rgba(0,0,0,.35)",border:"1px solid var(--line)",userSelect:"all"}}>a0021a5e61d91c60c0f983a72109fdf3</b>
              </div>
              <div className="pay-row"><span>قيمة الاشتراك</span><b>${pkg.price}.00</b></div>
              <div className="pay-row"><span>الفئة</span><b style={{direction:"rtl",fontFamily:"Cairo"}}>{pkg.name}</b></div>
              <div style={{marginTop:14,padding:"10px 12px",borderRadius:10,background:"rgba(4,16,31,.4)",fontSize:12,color:"var(--ink-mute)",lineHeight:1.7}}>
                بعد التحويل، التقط صورة للإيصال وارفعها في النموذج. لا ترسل كلمة المرور أو رمز التحقق لأي شخص.
              </div>
            </div>

            <div className="form-card" style={{padding:24}}>
              <div style={{display:"flex",alignItems:"center",gap:12,marginBottom:14}}>
                <div style={{width:44,height:44,borderRadius:12,background:"rgba(34,158,217,.15)",border:"1px solid rgba(34,158,217,.35)",display:"grid",placeItems:"center",color:"#7ec5ea"}}>
                  <Icon.Plane/>
                </div>
                <div>
                  <h5 style={{margin:0,fontSize:15}}>قناة تلغرام الرسمية</h5>
                  <p style={{margin:0,color:"var(--ink-dim)",fontSize:12}}>إعلانات، مهام، وبث مباشر للسحب</p>
                </div>
              </div>
              <a href="https://t.me/winsyriajob" target="_blank" rel="noopener" className="btn btn-tg" style={{width:"100%",justifyContent:"center",padding:"12px"}}><Icon.Plane size={16}/> انضم إلى المجموعة</a>
            </div>

            <div className="form-card" style={{padding:20,marginTop:16,background:"rgba(255,122,138,.05)",borderColor:"rgba(255,122,138,.25)"}}>
              <div style={{display:"flex",gap:12,alignItems:"start"}}>
                <div style={{color:"#ffb1bb",flexShrink:0,marginTop:2}}><Icon.Lock/></div>
                <div>
                  <h5 style={{margin:"0 0 4px",fontSize:14,color:"#ffd0d6"}}>الأمان أولاً</h5>
                  <p style={{margin:0,fontSize:12.5,color:"#e8c7cc",lineHeight:1.7}}>لا نطلب كلمة مرور أو رمز تحقق إطلاقاً. كل التواصل يتم من القناة الرسمية فقط.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  return (
    <section id="faq" data-screen-label="07 FAQ">
      <div className="wrap">
        <div className="sec-head">
          <div className="sec-eyebrow">FAQ · الأسئلة الشائعة</div>
          <h2 className="sec-title">أجوبة لكل ما يخطر ببالك</h2>
        </div>
        <div className="faq-list">
          {FAQS.map((f,i)=>(
            <details className="faq" key={i} open={i===0}>
              <summary>{f.q}</summary>
              <div className="faq-body">{f.a}</div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

function Terms() {
  return (
    <section id="terms" data-screen-label="08 Terms">
      <div className="wrap">
        <div className="sec-head">
          <div className="sec-eyebrow">TERMS · الشروط المختصرة</div>
          <h2 className="sec-title">الشروط الأساسية للمشاركة</h2>
        </div>
        <div className="terms-grid">
          {TERMS.map((t,i)=>(
            <div className="term" key={i}>
              <div className="tn">{pad(i+1)}</div>
              <p>{t}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Support() {
  return (
    <section id="support" data-screen-label="09 Support">
      <div className="wrap">
        <div className="sec-head">
          <div className="sec-eyebrow">SUPPORT · الدعم</div>
          <h2 className="sec-title">نحن قريبون منك</h2>
          <p className="sec-sub">للاستفسار أو الإبلاغ عن أي رسائل مشبوهة، تواصل معنا عبر القنوات الرسمية فقط.</p>
        </div>
        <div className="support-grid">
          <div className="sup">
            <div className="supi"><Icon.Plane/></div>
            <h6>تلغرام</h6>
            <p>القناة الرسمية للمنصة، السحب المباشر، والإعلانات.</p>
            <a className="lk" href="https://t.me/winsyriajob" target="_blank" rel="noopener">t.me/winsyriajob</a>
          </div>
          <div className="sup">
            <div className="supi"><Icon.Phone/></div>
            <h6>الواتساب</h6>
            <p>الدعم الفني وتأكيد عمليات التحويل والاشتراك.</p>
            <a className="lk" href="https://wa.me/2250778956628" dir="ltr">+225 07 7895 6628</a>
          </div>
          <div className="sup">
            <div className="supi"><Icon.Mail/></div>
            <h6>البريد الإلكتروني</h6>
            <p>للاقتراحات والشكاوى والملاحظات الرسمية.</p>
            <a className="lk" href="#">support@winsyriajob.com</a>
          </div>
        </div>

        <div className="disclaimer">
          <div className="di-icon"><Icon.Info/></div>
          <p>
            <b style={{color:"var(--ink)"}}>إخلاء مسؤولية:</b> هذه المسابقة مستقلة ولا تمثل شام كاش أو تلغرام أو سامسونغ أو آبل،
            وتُستخدم الأسماء التجارية فقط لتوضيح نوع الجائزة أو وسيلة الدفع. جميع العلامات التجارية ملك لأصحابها.
          </p>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <div className="wrap foot">
        <div style={{display:"flex",alignItems:"center",gap:14}}>
          <Brand/>
        </div>
        <div className="foot-links">
          <a href="#packages">الباقات</a>
          <a href="#how">آلية الاشتراك</a>
          <a href="#tasks">المهام</a>
          <a href="#draw">السحب</a>
          <a href="#terms">الشروط</a>
          <a href="#support">الدعم</a>
        </div>
        <small>© 2026 Win Syria Job — جميع الحقوق محفوظة</small>
      </div>
    </footer>
  );
}

function App() {
  const target = useMemo(()=>endOfMonth(),[]);
  const [selected, setSelected] = useState("gold");

  const onPick = (id) => {
    setSelected(id);
    setTimeout(()=>{
      const el = document.getElementById("join");
      if (el) {
        const y = el.getBoundingClientRect().top + window.scrollY - 24;
        window.scrollTo({ top: y, behavior: "smooth" });
      }
    },50);
  };

  return (
    <>
      <Nav/>
      <Hero target={target}/>
      <Packages onPick={onPick}/>
      <HowItWorks/>
      <Tasks/>
      <Draw target={target}/>
      <Form selected={selected} setSelected={setSelected} target={target}/>
      <FAQ/>
      <Terms/>
      <Support/>
      <Footer/>
    </>
  );
}

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