/* sections2.jsx — audience-focused trust sections for hospitals, villas & NRIs.
   Uses window shared primitives (Icon, Reveal, Overline, SectionHead, CountUp, Cta). */
const { useState: s2S, useEffect: s2E, useRef: s2R } = React;

/* subtle 3D tilt on hover (respects reduced-motion) */
function useTilt(max = 7) {
  const ref = s2R(null);
  s2E(() => {
    const el = ref.current; if (!el) return;
    if (window.matchMedia("(prefers-reduced-motion:reduce)").matches) return;
    if (window.matchMedia("(hover:none)").matches) return;
    let raf = 0, tx = 0, ty = 0, cx = 0, cy = 0;
    const loop = () => { cx += (tx - cx) * 0.12; cy += (ty - cy) * 0.12; el.style.transform = `perspective(900px) rotateX(${cy}deg) rotateY(${cx}deg)`; raf = requestAnimationFrame(loop); };
    const move = (e) => { const r = el.getBoundingClientRect(); tx = ((e.clientX - r.left) / r.width - 0.5) * 2 * max; ty = -((e.clientY - r.top) / r.height - 0.5) * 2 * max; el.style.setProperty("--gx", (e.clientX - r.left) + "px"); el.style.setProperty("--gy", (e.clientY - r.top) + "px"); };
    const leave = () => { tx = 0; ty = 0; };
    el.addEventListener("mousemove", move); el.addEventListener("mouseleave", leave);
    loop();
    return () => { el.removeEventListener("mousemove", move); el.removeEventListener("mouseleave", leave); cancelAnimationFrame(raf); };
  }, []);
  return ref;
}

/* ---- trust signal strip (compact, sits under hero) ----------------------- */
function TrustStrip({ lang }) {
  const T = (v) => window.t(v, lang);
  return (
    <div className="trust-strip">
      <div className="container trust-inner">
        {window.OLV.trust.map((t, i) => (
          <div className="trust-item" key={i}>
            <span className="trust-ic"><Icon name={t.icon} size={20} /></span>
            <span className="trust-txt"><b>{T(t.value)}</b><small>{T(t.label)}</small></span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---- audience paths (3 tilt cards) --------------------------------------- */
function AudiencePaths({ lang, onPickCat, onNavigate }) {
  const T = (v) => window.t(v, lang);
  const A = window.OLV.audiences;
  return (
    <section className="section" id="audiences">
      <div className="container">
        <SectionHead overline={T(A.overline)} title={T(A.title)} lead={T(A.sub)} maxWidth={760} />
        <div className="aud-grid">
          {A.items.map((it, i) => <AudCard key={it.id} it={it} lang={lang} delay={i + 1} onPickCat={onPickCat} onNavigate={onNavigate} />)}
        </div>
      </div>
    </section>
  );
}
function AudCard({ it, lang, delay, onPickCat, onNavigate }) {
  const T = (v) => window.t(v, lang);
  const ref = useTilt(6);
  const go = () => { if (it.cat) onPickCat(it.cat); else onNavigate("contact"); };
  return (
    <Reveal delay={String(delay)}>
      <button className="aud-card" ref={ref} onClick={go} aria-label={T(it.title)}>
        <div className="aud-glow" />
        <div className="aud-ic"><Icon name={it.icon} size={26} /></div>
        <div className="aud-tag">{T(it.tag)}</div>
        <h3>{T(it.title)}</h3>
        <p>{T(it.line)}</p>
        <span className="aud-more">{it.cat ? T({ en: "See related work", hi: "संबंधित कार्य देखें" }) : T({ en: "Talk to the NRI desk", hi: "एनआरआई डेस्क से बात करें" })} <Icon name="arrow-right" size={15} /></span>
      </button>
    </Reveal>
  );
}

/* ---- NRI promise band ---------------------------------------------------- */
function NRIBand({ lang, onNavigate }) {
  const T = (v) => window.t(v, lang);
  const N = window.OLV.nri;
  return (
    <section className="section section--alt nri-sec" id="nri">
      <div className="nri-watermark" aria-hidden="true"><Icon name="globe" size={520} /></div>
      <div className="container nri-wrap">
        <div className="nri-head">
          <Reveal><Overline>{T(N.overline)}</Overline></Reveal>
          <Reveal delay="1"><h2 className="display" style={{ fontSize: "var(--fs-display)", marginTop: 20 }}>{T(N.title)}</h2></Reveal>
          <Reveal delay="2"><p className="nri-lead">{T(N.lead)}</p></Reveal>
          <Reveal delay="2"><div className="nri-stat"><Icon name="globe" size={16} />{T(N.statLine)}</div></Reveal>
          <Reveal delay="3"><div style={{ marginTop: 26 }}><Cta size="lg" icon="arrow-up-right" onClick={() => onNavigate("contact")}>{T({ en: "Speak With the NRI Desk", hi: "एनआरआई डेस्क से बात करें" })}</Cta></div></Reveal>
        </div>
        <div className="nri-pledges">
          {N.pledges.map((p, i) => (
            <Reveal key={i} delay={String((i % 3) + 1)} className="nri-pledge">
              <span className="np-ic"><Icon name={p.icon} size={20} /></span>
              <div><h4>{T(p.title)}</h4><p>{T(p.body)}</p></div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- transparency / reporting (device mockup + animated report) ---------- */
function Transparency({ lang }) {
  const T = (v) => window.t(v, lang);
  const X = window.OLV.transparency;
  const ref = s2R(null);
  const [seen, setSeen] = s2S(false);
  s2E(() => {
    const el = ref.current; if (!el) return;
    const reveal = () => setSeen(true);
    const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { reveal(); io.disconnect(); } }, { threshold: 0.25 });
    io.observe(el);
    // safety: if already visible or observer is throttled, reveal shortly after mount
    const r = el.getBoundingClientRect();
    if (r.top < window.innerHeight && r.bottom > 0) reveal();
    const t = setTimeout(reveal, 1200);
    return () => { io.disconnect(); clearTimeout(t); };
  }, []);
  return (
    <section className="section transp-sec" id="transparency">
      <div className="container transp-grid">
        <div className="transp-left">
          <Reveal><Overline>{T(X.overline)}</Overline></Reveal>
          <Reveal delay="1"><h2 className="display" style={{ fontSize: "var(--fs-display)", marginTop: 20 }}>{T(X.title)}</h2></Reveal>
          <Reveal delay="2"><p className="transp-lead">{T(X.lead)}</p></Reveal>
          <div className="transp-channels">
            {X.channels.map((c, i) => (
              <Reveal key={i} delay={String((i % 2) + 1)} className="transp-ch">
                <span className="tc-ic"><Icon name={c.icon} size={18} /></span>
                <div><h4>{T(c.title)}</h4><p>{T(c.body)}</p></div>
              </Reveal>
            ))}
          </div>
        </div>
        <Reveal delay="2" className="transp-right">
          <div className="report-card" ref={ref}>
            <div className="rc-head">
              <div className="rc-brand"><img src="assets/logo-mark.png" alt="" /><span>{T(X.reportTitle)}</span></div>
              <span className="rc-sample">{T(X.sampleTag)}</span>
            </div>
            <div className="rc-status"><span className="rc-dot" />{T(X.onSchedule)} · <span className="rc-mono">Aug 2025</span></div>
            <div className="rc-rows">
              {X.reportRows.map((r, i) => (
                <div className="rc-row" key={i}>
                  <span className="rc-label">{T(r.label)}</span>
                  <span className="rc-track"><b style={{ width: seen ? r.val + "%" : "0%", transitionDelay: (i * 0.14) + "s" }} /></span>
                  <span className="rc-val">{seen ? <CountUp value={r.val} suffix="%" duration={1200} /> : "0%"}</span>
                </div>
              ))}
            </div>
            <div className="rc-foot">
              <div className="rc-chart">{[52, 63, 58, 74, 80, 88].map((h, i) => <i key={i} style={{ height: seen ? h + "%" : "4%", transitionDelay: (i * 0.08) + "s" }} />)}</div>
              <div className="rc-legend"><span>{T({ en: "6-month S-curve", hi: "6-माह एस-कर्व" })}</span><b>+88%</b></div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---- hospital specialist band -------------------------------------------- */
function HospitalBand({ lang, onNavigate }) {
  const T = (v) => window.t(v, lang);
  const H = window.OLV.hospitalBand;
  return (
    <section className="section section--alt hosp-sec" id="hospitals">
      <div className="container hosp-grid">
        <div className="hosp-media">
          <img src="assets/hospital.jpg" alt="" loading="lazy" />
          <div className="hosp-media-badge"><Icon name="award" size={16} />{T({ en: "Indian Building Congress — Awarded", hi: "इंडियन बिल्डिंग कांग्रेस — पुरस्कृत" })}</div>
        </div>
        <div className="hosp-body">
          <Reveal><Overline>{T(H.overline)}</Overline></Reveal>
          <Reveal delay="1"><h2 className="display" style={{ fontSize: "var(--fs-display)", marginTop: 18 }}>{T(H.title)}</h2></Reveal>
          <Reveal delay="2"><p className="hosp-lead">{T(H.lead)}</p></Reveal>
          <Reveal delay="2"><div className="hosp-stats">
            {H.stats.map((s, i) => (
              <div className="hosp-stat" key={i}><div className="hs-num"><CountUp value={s.value} suffix={s.suffix || ""} /></div><div className="hs-lbl">{T(s.label)}</div></div>
            ))}
          </div></Reveal>
          <Reveal delay="3"><ul className="hosp-points">
            {H.points.map((p, i) => <li key={i}><span className="dot"><Icon name="check" size={15} /></span>{T(p)}</li>)}
          </ul></Reveal>
          <Reveal delay="3"><div style={{ marginTop: 28 }}><Cta size="md" icon="arrow-up-right" onClick={() => onNavigate("contact")}>{T({ en: "Discuss a Healthcare Project", hi: "स्वास्थ्य प्रोजेक्ट पर चर्चा करें" })}</Cta></div></Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---- AMC / post-handover ------------------------------------------------- */
function AMC({ lang }) {
  const T = (v) => window.t(v, lang);
  const A = window.OLV.amc;
  return (
    <section className="section amc-sec" id="amc">
      <div className="container">
        <SectionHead overline={T(A.overline)} title={T(A.title)} lead={T(A.lead)} maxWidth={760} />
        <div className="amc-grid">
          {A.items.map((it, i) => (
            <Reveal key={i} delay={String(i + 1)} className="amc-card">
              <span className="amc-ic"><Icon name={it.icon} size={22} /></span>
              <h3>{T(it.title)}</h3>
              <p>{T(it.body)}</p>
            </Reveal>
          ))}
        </div>
        <Reveal delay="2"><div className="amc-note"><Icon name="globe" size={16} />{T(A.guaranteeNote)}</div></Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { TrustStrip, AudiencePaths, NRIBand, Transparency, HospitalBand, AMC });