/* project.jsx — individual project detail page (hash route #/project/:id) */
const { useEffect: pE } = React;

function ProjectDetail({ id, lang, onOpen, onBack, onNavigate }) {
  const T = (v) => window.t(v, lang);
  const all = window.OLV.projects;
  const idx = all.findIndex((p) => p.id === id);
  const p = all[idx];
  pE(() => { window.scrollTo({ top: 0, behavior: "auto" }); }, [id]);
  if (!p) return (
    <div className="container" style={{ paddingTop: 160, paddingBottom: 120, textAlign: "center" }}>
      <h2 className="display">{T({ en: "Project not found", hi: "प्रोजेक्ट नहीं मिला" })}</h2>
      <div style={{ marginTop: 24, display: "inline-flex" }}><Cta icon="arrow-left" onClick={onBack}>{T({ en: "Back to portfolio", hi: "पोर्टफ़ोलियो पर वापस" })}</Cta></div>
    </div>
  );

  const cat = window.OLV.categories.find((c) => c.id === p.cat);
  const status = window.OLV.statuses.find((s) => s.id === p.status);
  const prev = all[(idx - 1 + all.length) % all.length];
  const next = all[(idx + 1) % all.length];
  const related = all.filter((r) => r.cat === p.cat && r.id !== p.id).slice(0, 3);

  const facts = [
    { lbl: T({ en: "Category", hi: "श्रेणी" }), val: cat && T(cat) },
    { lbl: T({ en: "Type", hi: "प्रकार" }), val: T(p.type) },
    { lbl: T({ en: "Location", hi: "स्थान" }), val: T(p.loc) },
    { lbl: T({ en: "Scale", hi: "परिमाण" }), val: p.area },
    { lbl: T({ en: "Status", hi: "स्थिति" }), val: T(status) },
  ];

  return (
    <article className="pd">
      {/* hero */}
      <div className="pd-hero">
        <img src={p.img} alt={T(p.title)} />
        <div className="pd-hero-scrim" />
        <div className="container pd-hero-inner">
          <button className="pd-back" onClick={onBack}><Icon name="chevron-left" size={16} />{T({ en: "Portfolio", hi: "पोर्टफ़ोलियो" })}</button>
          <div className="pd-hero-cat"><Icon name="map-pin" size={14} />{T(p.loc)}</div>
          <h1 className="display">{T(p.title)}</h1>
          <div className="pd-hero-meta"><span>{T(cat)}</span><span className="dotdiv" /><span>{p.area}</span><span className="dotdiv" /><span><Badge tone={p.status === "delivered" ? "success" : p.status === "ongoing" ? "warning" : "gold"}>{T(status)}</Badge></span></div>
        </div>
      </div>

      <div className="container pd-body">
        <div className="pd-main">
          <Reveal><p className="pd-summary">{T(p.summary)}</p></Reveal>

          <Reveal delay="1"><div className="pd-block">
            <h3 className="pd-h"><span className="hairline" style={{ width: 28 }} />{T(window.OLV.portfolio.highlights)}</h3>
            <ul className="pd-highlights">
              {p.highlights.map((h, i) => <li key={i}><span className="dot"><Icon name="check" size={16} /></span>{T(h)}</li>)}
            </ul>
          </div></Reveal>

          <Reveal delay="1"><div className="pd-block">
            <h3 className="pd-h"><span className="hairline" style={{ width: 28 }} />{T(window.OLV.portfolio.services)}</h3>
            <div className="pd-services">{p.services.map((s, i) => <span key={i} className="pd-chip">{s}</span>)}</div>
          </div></Reveal>

          <Reveal delay="1"><div className="pd-quote">
            <Icon name="quote" size={30} style={{ color: "var(--olv-gold)" }} />
            <p>{T({ en: "Every project we deliver is a reflection of the client's vision — executed with military precision and IIT-level technical expertise.", hi: "हमारा हर प्रोजेक्ट क्लाइंट की दृष्टि का प्रतिबिंब है — सैन्य परिशुद्धता व आईआईटी-स्तरीय तकनीकी विशेषज्ञता से निष्पादित।" })}</p>
          </div></Reveal>
        </div>

        <aside className="pd-side">
          <div className="pd-facts">
            {facts.map((f, i) => f.val && <div className="pd-fact" key={i}><span className="fl">{f.lbl}</span><span className="fv">{f.val}</span></div>)}
          </div>
          <div className="pd-cta-card">
            <h4>{T({ en: "Planning something similar?", hi: "कुछ ऐसा ही योजना में है?" })}</h4>
            <p>{T({ en: "Speak with Col Satwant about your project.", hi: "अपने प्रोजेक्ट पर कर्नल सतवंत से बात करें।" })}</p>
            <Cta size="md" icon="arrow-up-right" onClick={() => onNavigate("contact")}>{T(window.OLV.cta.consult)}</Cta>
          </div>
        </aside>
      </div>

      {/* related */}
      {related.length > 0 && (
        <div className="container pd-related">
          <h3 className="pd-h"><span className="hairline" style={{ width: 28 }} />{T({ en: "Related projects", hi: "संबंधित प्रोजेक्ट" })}</h3>
          <div className="grid-auto g3" style={{ marginTop: 28 }}>
            {related.map((r) => {
              const rc = window.OLV.categories.find((c) => c.id === r.cat);
              return (
                <button key={r.id} className="pcard" onClick={() => onOpen(r.id)}>
                  <div className="pcard-media"><img src={r.img} alt="" loading="lazy" /></div>
                  <div className="pcard-body">
                    <div className="pcard-cat"><Icon name="map-pin" size={13} />{T(r.loc)}</div>
                    <h3>{T(r.title)}</h3>
                    <div className="pcard-foot"><span>{rc && T(rc)}</span><span className="pcard-area">{r.area}</span></div>
                  </div>
                </button>
              );
            })}
          </div>
        </div>
      )}

      {/* prev / next */}
      <div className="container pd-nav">
        <button className="pd-nav-btn" onClick={() => onOpen(prev.id)}><Icon name="chevron-left" size={18} /><span><small>{T({ en: "Previous", hi: "पिछला" })}</small>{T(prev.title)}</span></button>
        <button className="pd-nav-btn right" onClick={() => onOpen(next.id)}><span><small>{T({ en: "Next", hi: "अगला" })}</small>{T(next.title)}</span><Icon name="chevron-right" size={18} /></button>
      </div>
    </article>
  );
}

Object.assign(window, { ProjectDetail });