// Citizen — Home screen (hero + journey rail + cards)

function CitizenHome({ citizen, decision, setScreen, t, rtl, program, tweaks }) {
  const currentStepIdx =
    decision.outcome === "rejected" ? 1 :
    decision.outcome === "manual_review" ? 2 : 3;

  return (
    <div className="citizen-home">
      <CitizenHero citizen={citizen} decision={decision} t={t} setScreen={setScreen} program={program} tweaks={tweaks}/>

      <section className="journey-rail">
        <div className="between">
          <div>
            <div className="label-eyebrow">{t("Your journey","رحلتك")}</div>
            <h3 className="h3" style={{marginTop:4}}>{t("Where you are right now","أين أنت الآن")}</h3>
          </div>
          <div className="muted text-13">
            {t("Step","الخطوة")} {currentStepIdx + 1} {t("of","من")} {window.CITIZEN_STEPS.length}
          </div>
        </div>
        <div className="journey-track">
          {window.CITIZEN_STEPS.map((s, i) => {
            const state = i < currentStepIdx ? "done" : i === currentStepIdx ? "current" : "pending";
            return (
              <div key={s.id} className={`journey-stop ${state}`}>
                <div className="js-pip">
                  {state === "done" ? <Icon name="check" size={12}/> :
                   state === "current" ? <span className="pulse"/> : (i + 1)}
                </div>
                <div className="js-label">{t(s.label, s.label)}</div>
              </div>
            );
          })}
        </div>
      </section>

      <section className="grid-3" style={{marginTop:24}}>
        <NextActionCard citizen={citizen} decision={decision} t={t} onAct={() => setScreen(decision.outcome === "eligible" ? "browse" : "eligibility")}/>
        <SavedHomesCard t={t} onBrowse={() => setScreen("browse")}/>
        <WaitingListCard citizen={citizen} t={t}/>
      </section>

    </div>
  );
}

function CitizenHero({ citizen, decision, t, setScreen, program, tweaks }) {
  const outcome = decision.outcome;
  return (
    <section className="hero">
      <div className="hero-art" aria-hidden="true">
        <svg className="hero-art-shape" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid slice">
          <defs>
            <radialGradient id="cg" cx="0.75" cy="0.25" r="0.8">
              <stop offset="0%" stopColor="#eaa07a" stopOpacity="0.55"/>
              <stop offset="60%" stopColor="#1b4149" stopOpacity="0.05"/>
              <stop offset="100%" stopColor="#1b4149" stopOpacity="0"/>
            </radialGradient>
            <pattern id="dotted" width="22" height="22" patternUnits="userSpaceOnUse">
              <circle cx="1" cy="1" r="0.8" fill="rgba(255,255,255,0.07)"/>
            </pattern>
          </defs>
          <rect width="800" height="600" fill="url(#dotted)"/>
          <circle cx="640" cy="160" r="320" fill="url(#cg)"/>
          {/* Architectural lines */}
          <g stroke="rgba(234,160,122,0.18)" strokeWidth="1" fill="none">
            <path d="M-100 540 L900 240"/>
            <path d="M-100 580 L900 280"/>
            <path d="M-100 620 L900 320"/>
          </g>
        </svg>
      </div>

      <div className="hero-text">
        <h1 className="h1 hero-title">
          {t(`Welcome back, ${citizen.name.split(" ")[0]}.`,`مرحباً، ${citizen.nameAr.split(" ")[0]}.`)}
          <br/>
          <span className="hero-italic">{t("Your home is closer than you think.","منزلك أقرب مما تظن.")}</span>
        </h1>
        <div className="row" style={{gap:12, marginTop:24}}>
          <button className="btn copper" onClick={() => setScreen(outcome === "eligible" ? "browse" : "eligibility")}>
            {outcome === "eligible" ? t("Browse homes","تصفح المنازل") : t("See full reasoning","عرض الأسباب")}
            <Icon name="arrow_right" size={14} className="arrow-flip"/>
          </button>
        </div>
      </div>
    </section>
  );
}

function DecisionRing({ outcome, passed, total }) {
  const fill = outcome === "eligible" ? "#7bcfa1" : outcome === "manual_review" ? "#f0b271" : "#e87060";
  const pct = passed / total;
  const R = 38;
  const C = 2 * Math.PI * R;
  return (
    <div className="decision-ring">
      <svg width="96" height="96" viewBox="0 0 96 96">
        <circle cx="48" cy="48" r={R} stroke="rgba(255,255,255,0.16)" strokeWidth="6" fill="none"/>
        <circle cx="48" cy="48" r={R} stroke={fill} strokeWidth="6" fill="none"
          strokeDasharray={`${C * pct} ${C}`} strokeLinecap="round" transform="rotate(-90 48 48)"/>
      </svg>
      <div className="dr-inner">
        <div className="dr-num">{passed}<span className="dr-total">/{total}</span></div>
        <div className="dr-label">rules</div>
      </div>
    </div>
  );
}

function NextActionCard({ citizen, decision, t, onAct }) {
  const ok = decision.outcome === "eligible";
  const review = decision.outcome === "manual_review";
  return (
    <div className="card card-pad action-card" onClick={onAct} role="button">
      <div className="between">
        <div className="label-eyebrow"><Icon name="zap" size={11}/> {t("Next best action","الإجراء التالي")}</div>
        <span className="pill copper">{ok ? "1 min" : review ? "5 min" : t("Reassess","إعادة تقييم")}</span>
      </div>
      <div className="action-card-title">
        {ok && t("Reserve a home you love","احجز منزلاً تحبه")}
        {review && t("Upload your salary certificate","ارفع شهادة راتبك")}
        {!ok && !review && t("Review alternative programs","استعرض البرامج البديلة")}
      </div>
      <div className="muted text-13">
        {ok && t("A 7-day reservation lock holds the unit while your bank offer is prepared.","يحتفظ بالوحدة 7 أيام أثناء إعداد العرض.")}
        {review && t("Hassan F. at OHB will review and confirm within 48 hours.","سيقوم حسن ف. بالمراجعة خلال 48 ساعة.")}
        {!ok && !review && t("Sanad Plot Grant and Lease-to-Own Pilot may apply to your profile.","قد ينطبق منح سند والإيجار المنتهي بالتمليك.")}
      </div>
      <div className="action-card-cta">
        {t("Continue","متابعة")} <Icon name="arrow_right" size={14} className="arrow-flip"/>
      </div>
    </div>
  );
}

function SavedHomesCard({ t, onBrowse }) {
  return (
    <div className="card card-pad saved-card" onClick={onBrowse} role="button">
      <div className="between">
        <div className="label-eyebrow"><Icon name="heart" size={11}/> {t("Saved homes","المنازل المحفوظة")}</div>
        <span className="pill">2 {t("saved","محفوظة")}</span>
      </div>
      <div className="saved-stack">
        <div className="saved-tile" style={{background:"linear-gradient(135deg, #1b4149, #2a5e68)"}}>
          <Icon name="building" size={36} style={{color:"rgba(255,255,255,0.55)"}}/>
        </div>
        <div className="saved-tile" style={{background:"linear-gradient(135deg, #26262a, #3d3a36)"}}>
          <Icon name="building" size={36} style={{color:"rgba(255,255,255,0.55)"}}/>
        </div>
      </div>
      <div className="title" style={{fontSize:15}}>{t("Madinat Al Irfan · A-204","مدينة العرفان · A-204")}</div>
      <div className="muted text-13">{t("OMR 68,500 · 3 bed · 128 m²","68,500 ر.ع. · 3 غرف · 128 م²")}</div>
    </div>
  );
}

function WaitingListCard({ citizen, t }) {
  return (
    <div className="card card-pad waiting-card">
      <div className="between">
        <div className="label-eyebrow"><Icon name="clock" size={11}/> {t("Your waiting list","قائمة انتظارك")}</div>
        <span className="pill navy">{t("On track","في المسار")}</span>
      </div>
      <div className="waiting-num">
        #{citizen.waitingPosition.toLocaleString()}
      </div>
      <div className="muted text-13">{t("Position out of 28,492","الموضع من 28,492")}</div>
      <div className="waiting-bar">
        <div className="waiting-bar-fill" style={{width: `${100 - (citizen.waitingPosition / 28492) * 100}%`}}/>
      </div>
      <div className="text-13" style={{marginTop:10}}>
        <Icon name="calendar" size={13}/> {t("Expected turn:","الدور المتوقع:")} <strong>{citizen.expectedTurn}</strong>
      </div>
    </div>
  );
}

function UnitMini({ unit, t, onClick }) {
  return (
    <div className="unit-mini" onClick={onClick} role="button">
      <div className="unit-mini-img" style={!unit.image ? {background:`linear-gradient(135deg, ${unit.tone}, ${unit.tone}cc)`} : {}}>
        {unit.image
          ? <img src={unit.image} alt={unit.project} style={{position:"absolute",inset:0,width:"100%",height:"100%",objectFit:"cover"}}/>
          : <Icon name="building" size={48} style={{color:"rgba(255,255,255,0.45)"}}/>
        }
        <span className={`pill ${unit.status === "available" ? "ok" : "warn"} unit-mini-pill`}>
          {unit.status === "available" ? t("Available","متاح") : t("Reserved","محجوز")}
        </span>
      </div>
      <div className="unit-mini-body">
        <div className="unit-mini-title">{unit.project} · {unit.unit}</div>
        <div className="muted text-12">{unit.governorate} · {unit.wilayat}</div>
        <div className="unit-mini-price">OMR {unit.priceOmr.toLocaleString()}</div>
        <div className="unit-mini-facts">
          <span><Icon name="bed" size={12}/> {unit.beds}</span>
          <span><Icon name="ruler" size={12}/> {unit.area} m²</span>
        </div>
      </div>
    </div>
  );
}

window.CitizenHome = CitizenHome;
window.UnitMini = UnitMini;