/* ============================================================
   PRAVI — SHARED CHROME (Nav · Footer · CTA · marks · Polaroid)
   Extracted from the Home page so About / Services / future pages
   share one identical source of truth. Direction: BROADSHEET.
   ============================================================ */

const { useState: useStateK, useEffect: useEffectK, useRef: useRefK } = React;
const P = window.PRAVI;

const SECTORS = [
  { slug: 'business', title: 'Business', description: 'Strategic support tailored for organizations of all scales, from emerging startups to established enterprises.' },
  { slug: 'government', title: 'Government & Public Sector', description: 'We support central and state governments in shaping evidence-based policies, strengthening institutional capacity, and driving high-impact development programs.' },
  { slug: 'development', title: 'Development Sector', description: 'Partnering with NGOs and global foundations to amplify impact, optimize delivery, and drive measurable outcomes.' },
];

/* ---- The distilled >P chevron mark ---- */
function ChevronMark({ size = 16, color = "var(--pravi-orange)", style = {} }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" style={{ display: "inline-block", verticalAlign: "-0.15em", flexShrink: 0, ...style }}>
      <path d="M 4 3 L 16 12 L 4 21 L 4 16 L 9 12 L 4 8 Z" fill={color} />
    </svg>
  );
}

function ChevronTrails() {
  return (
    <div aria-hidden="true" style={{ position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 0 }}>
      {[0, 1, 2, 3, 4].map(i => (
        <svg key={i} viewBox="0 0 24 24" width={i % 2 === 0 ? 28 : 22} height={i % 2 === 0 ? 28 : 22}
          style={{
            position: 'absolute',
            left: `${[8, 22, 88, 76, 12][i]}%`,
            top: `${[14, 62, 28, 78, 92][i]}%`,
            opacity: 0.4,
            animation: `pulse-soft ${3 + i * 0.4}s ease-in-out ${i * 0.3}s infinite`,
            color: i % 2 === 0 ? 'var(--pravi-orange)' : 'var(--pravi-blue)',
          }}>
          <path d="M 4 3 L 16 12 L 4 21 L 4 16 L 9 12 L 4 8 Z" fill="currentColor" />
        </svg>
      ))}
    </div>
  );
}

/* ===================================================================
   MEGAMENUS — AWS-style full-width dropdown panels
   =================================================================== */
function ServicesMegaMenu({ onClose }) {
  return (
    <div style={{
      position: 'absolute', top: '100%', left: 0, right: 0,
      background: 'var(--paper)', borderTop: '2px solid var(--pravi-orange)',
      borderBottom: '1px solid var(--rule)', boxShadow: '0 20px 56px -14px rgba(11,20,48,.22)',
      zIndex: 50, display: 'flex',
    }}>
      <div style={{ flex: 1, padding: '28px 4vw' }}>
        <div style={{ fontFamily: 'DM Mono,monospace', fontSize: 10.5, letterSpacing: '0.22em', color: 'var(--ink-faint)', textTransform: 'uppercase', marginBottom: 20 }}>SERVICES</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: '0 40px' }}>
          {P.serviceCategories.map(cat => (
            <a key={cat.slug} href={`${window.PRAVI_CAT_FILE[cat.slug]}#top`} style={{ display: 'block', padding: '13px 0', borderBottom: '1px solid var(--rule-soft)', textDecoration: 'none', color: 'inherit', transition: 'padding-left .15s' }}
              onMouseEnter={e => { e.currentTarget.style.paddingLeft = '8px'; }}
              onMouseLeave={e => { e.currentTarget.style.paddingLeft = '0'; }}>
              <div style={{ fontFamily: 'DM Sans,sans-serif', fontWeight: 600, fontSize: 14.5, color: 'var(--ink)', marginBottom: 3 }}>{cat.title}</div>
              <div style={{ fontSize: 13, color: 'var(--ink-soft)', lineHeight: 1.45 }}>{cat.blurb}</div>
            </a>
          ))}
        </div>
      </div>
      <button onClick={onClose} style={{ position: 'absolute', top: 12, right: 18, width: 28, height: 28, fontSize: 18, background: 'transparent', border: '1px solid var(--rule)', cursor: 'pointer', color: 'var(--ink-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center', lineHeight: 1 }}>×</button>
    </div>
  );
}

function ResourcesMegaMenu({ onClose }) {
  return (
    <div style={{
      position: 'absolute', top: '100%', left: 0, right: 0,
      background: 'var(--paper)', borderTop: '2px solid var(--pravi-orange)',
      borderBottom: '1px solid var(--rule)', boxShadow: '0 20px 56px -14px rgba(11,20,48,.22)',
      zIndex: 50, display: 'flex',
    }}>
      <div style={{ flex: 1, padding: '28px 4vw' }}>
        <div style={{ fontFamily: 'DM Mono,monospace', fontSize: 10.5, letterSpacing: '0.22em', color: 'var(--ink-faint)', textTransform: 'uppercase', marginBottom: 20 }}>BLOGS & INSIGHTS</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '0 40px' }}>
          {P.blogs.slice(0, 3).map(blog => (
            <a key={blog.slug} href={`essay.html#${blog.slug}`} style={{ display: 'block', padding: '12px 0', borderBottom: '1px solid var(--rule-soft)', textDecoration: 'none', color: 'inherit' }}>
              <div style={{ fontFamily: 'DM Sans,sans-serif', fontWeight: 600, fontSize: 14.5, color: 'var(--ink)', marginBottom: 3 }}>{blog.title}</div>
              <div style={{ fontSize: 12.5, color: 'var(--ink-soft)', lineHeight: 1.45 }}>{blog.desc}</div>
              <div style={{ marginTop: 4, fontFamily: 'DM Mono,monospace', fontSize: 10.5, color: 'var(--pravi-orange)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>{blog.tag} · {blog.read}</div>
            </a>
          ))}
        </div>
      </div>
      {/* <div style={{ flex: 1, padding: '28px 28px' }}>
        <div style={{ fontFamily: 'DM Mono,monospace', fontSize: 10.5, letterSpacing: '0.22em', color: 'var(--ink-faint)', textTransform: 'uppercase', marginBottom: 20 }}>EVENTS</div>
        {P.events.map((evt, i) => (
          <a key={i} href="resources.html#events" style={{ display: 'block', padding: '10px 0', borderBottom: '1px solid var(--rule-soft)', textDecoration: 'none', color: 'inherit', transition: 'color .15s' }}
            onMouseEnter={e => { e.currentTarget.style.color = 'var(--pravi-blue)'; }}
            onMouseLeave={e => { e.currentTarget.style.color = 'inherit'; }}>
            <div style={{ fontFamily: 'DM Sans,sans-serif', fontWeight: 500, fontSize: 14, marginBottom: 3 }}>{evt.title}</div>
            <div style={{ fontFamily: 'DM Mono,monospace', fontSize: 10.5, color: 'var(--pravi-orange)', letterSpacing: '0.12em' }}>{evt.date.split(' · ')[0]} · {evt.place}</div>
          </a>
        ))}
      </div> */}
      <button onClick={onClose} style={{ position: 'absolute', top: 12, right: 18, width: 28, height: 28, fontSize: 18, background: 'transparent', border: '1px solid var(--rule)', cursor: 'pointer', color: 'var(--ink-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center', lineHeight: 1 }}>×</button>
    </div>
  );
}

/* ===================================================================
   NAV — sticky, megamenus, real page links + active state
   =================================================================== */
function MobileMenu({ active, navItems, open }) {
  const [section, setSection] = useStateK(null);
  const toggle = (key) => setSection(s => (s === key ? null : key));
  return (
    <div className={`nav-mobile${open ? ' show' : ''}`}>
      {navItems.map((item) => (
        <div key={item.label}>
          {item.menu ? (
            <button className={`nm-item${item.label === active ? ' active' : ''}`} onClick={() => toggle(item.menu)}>
              {item.label}
              <span className={`nm-caret${section === item.menu ? ' open' : ''}`}>▼</span>
            </button>
          ) : (
            <a className={`nm-item${item.label === active ? ' active' : ''}`} href={item.href}>
              {item.label}
              <ChevronMark size={12} color="var(--pravi-orange)" />
            </a>
          )}
          {item.menu === 'services' && section === 'services' && (
            <div className="nm-sub">
              {P.serviceCategories.map(cat => (
                <a key={cat.slug} href={`${window.PRAVI_CAT_FILE[cat.slug]}#top`}>{cat.title}</a>
              ))}
            </div>
          )}
          {item.menu === 'resources' && section === 'resources' && (
            <div className="nm-sub">
              {P.blogs.slice(0, 3).map(b => (
                <a key={b.slug} href={`essay.html#${b.slug}`}>{b.title}</a>
              ))}
              {/* <a href="resources.html#events">All events</a> */}
            </div>
          )}
        </div>
      ))}
      <a className="nm-cta" href="contact.html">Contact Us <ChevronMark size={13} color="var(--paper)" /></a>
    </div>
  );
}

function HomeNav({ active = "Home" }) {
  const [openMenu, setOpenMenu] = useStateK(null);
  const [mobileOpen, setMobileOpen] = useStateK(false);
  const [scrolled, setScrolled] = useStateK(false);
  useEffectK(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const navItems = [
    { label: "Home", href: "home.html" },
    { label: "At Pravi", href: "at-pravi.html" },
    { label: "Pravi Consulting", href: "pravi-consulting.html", menu: "services" },
    { label: "Pravi Labs", href: "pravi-labs.html" },
    { label: "Pravi Studios", href: "pravi-studios.html" },
    { label: "Careers", href: "careers.html" },
  ];

  return (
    <nav className={`nav${scrolled ? ' scrolled' : ''}`} onMouseLeave={() => setOpenMenu(null)} style={{ position: 'sticky', top: 0, zIndex: 40 }}>
      <div className="row">
        <a className="brand" href="home.html">
          <img src="assets/pravi-logo-wordmark.webp" alt="Pravi Research" style={{ height: '60px', width: 'auto', display: 'block', mixBlendMode: 'multiply' }} />
        </a>
        <ul className="nav-desktop">
          {navItems.map((item) => (
            <li key={item.label} onMouseEnter={() => setOpenMenu(item.menu || null)}>
              <a
                href={item.href}
                style={{
                  borderColor: item.label === active ? "var(--pravi-orange)" : "transparent",
                  color: item.label === active ? 'var(--pravi-blue)' : (openMenu === item.menu && item.menu ? 'var(--pravi-orange)' : 'inherit'),
                  display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 16,
                }}
              >
                {item.label}
                {item.menu && (
                  <span style={{ fontSize: 9, opacity: 0.55, display: 'inline-block', transition: 'transform .2s', transform: openMenu === item.menu ? 'rotate(180deg)' : 'none' }}>▼</span>
                )}
              </a>
            </li>
          ))}
        </ul>
        <a className="cta nav-desktop-cta" href="contact.html">Contact Us <ChevronMark size={12} color="currentColor" /></a>
        <button className={`nav-burger${mobileOpen ? ' open' : ''}`} aria-label="Menu" aria-expanded={mobileOpen} onClick={() => setMobileOpen(o => !o)}>
          <span /><span /><span />
        </button>
      </div>
      {openMenu === 'services' && <ServicesMegaMenu onClose={() => setOpenMenu(null)} />}
      {openMenu === 'resources' && <ResourcesMegaMenu onClose={() => setOpenMenu(null)} />}
      <MobileMenu active={active} navItems={navItems} open={mobileOpen} />
    </nav>
  );
}

/* ===================================================================
   CTA BAND
   =================================================================== */
function CtaBand() {
  return (
    <section style={{ background: 'var(--pravi-blue)', color: 'var(--paper)', padding: '25px 4vw', position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden="true" style={{ position: 'absolute', right: '-3vw', top: '50%', transform: 'translateY(-50%)', opacity: 0.12, pointerEvents: 'none' }}>
        <svg width="420" height="420" viewBox="0 0 100 100"><path d="M 18 12 L 70 50 L 18 88 L 18 70 L 46 50 L 18 30 Z" fill="var(--pravi-orange)" /></svg>
      </div>
      <div className="container reveal" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 40, flexWrap: 'wrap', position: 'relative', zIndex: 2 }}>
        <div>
          {/* <div aria-hidden="true" style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
            <span style={{ width: 56, height: 5, background: 'var(--pravi-orange)' }} />
            <span style={{ width: 12, height: 5, background: 'var(--pravi-orange-soft)' }} />
          </div> */}
          <h2 style={{ fontFamily: 'DM Serif Display', fontWeight: 400, fontSize: 'clamp(40px, 5vw, 72px)', letterSpacing: '-0.02em', margin: '0', lineHeight: 1 }}>
            Have a problem <span style={{ fontFamily: 'DM Serif Display', fontWeight: 600 }}>worth solving?</span>
          </h2>
        </div>
        <a href="contact.html#form" style={{ fontFamily: 'DM Sans', fontSize: 15, fontWeight: 500, padding: '16px 28px', background: 'var(--pravi-orange)', color: 'var(--paper)', display: 'inline-flex', alignItems: 'center', gap: 12 }}>
          Let's talk <ChevronMark size={13} color="var(--paper)" />
        </a>
      </div>
    </section>
  );
}

/* ===================================================================
   FOOTER — identical to Home
   =================================================================== */
function HomeFooter() {
  const cols = [
    { h: "Pages", l: [["Home", "home.html#top"], ["At Pravi", "at-pravi.html#top"], ["Pravi Consulting", "pravi-consulting.html#practices"], ["Pravi Labs", "pravi-labs.html#top"], ["Pravi Studios", "pravi-studios.html#top"], ["Careers", "careers.html#roles"]] },
    { h: "Pravi Consulting", l: P.serviceCategories.map(s => [s.title, `${window.PRAVI_CAT_FILE[s.slug]}#top`]) },
    { h: "Pravi Labs", l: [["How We Work", "pravi-labs.html#minds"], /* ["Our Environment", "pravi-labs.html#environment"], */ ["Build for Billion", "pravi-labs.html#build-for-bharat"]] },
    { h: "Pravi Studios", l: [["Inside the Studio", "pravi-studios.html#capabilities"], ["How We Work", "pravi-studios.html#approach"], ["Campaign Anatomy", "pravi-studios.html#anatomy"], ["Studio Culture", "pravi-studios.html#culture"]] },
    { h: "Connect", l: [["LinkedIn", "https://www.linkedin.com/company/pravi-research"]] },
  ];
  return (
    <footer id="contact" style={{ background: '#ffffff', color: '#1a1a2e', position: 'relative', borderTop: '3px solid var(--pravi-orange)' }}>
      <div aria-hidden="true" style={{ position: 'absolute', left: '-4vw', bottom: '-8vh', opacity: 0.03, pointerEvents: 'none' }}>
        <svg width="640" height="640" viewBox="0 0 100 100"><path d="M 18 12 L 70 50 L 18 88 L 18 70 L 46 50 L 18 30 Z" fill="var(--pravi-blue)" /></svg>
      </div>
      <div style={{ padding: "26px 4vw 0", position: 'relative', zIndex: 2 }}>
        <div className="container">
          <div className="home-footer-grid" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr 1fr 1fr", gap: 24, alignItems: 'start' }}>
            <div>
              <img src="assets/pravi-logo-wordmark.webp" alt="Pravi Research" style={{ height: 34, width: 'auto', display: 'block', mixBlendMode: 'multiply' }} onError={e => e.target.style.display = 'none'} />
              <p style={{ fontFamily: 'DM Serif Display', fontWeight: 600, fontSize: 19, lineHeight: 1.2, marginTop: 8, color: 'var(--pravi-blue)' }}>Transforming today,<br />defining tomorrow.</p>
              <a href="contact.html#form" style={{ marginTop: 10, fontFamily: 'DM Sans', fontSize: 13, fontWeight: 500, padding: '9px 18px', background: 'var(--pravi-blue)', color: '#ffffff', display: 'inline-flex', alignItems: 'center', gap: 10 }}>Contact Us <ChevronMark size={12} color="#ffffff" /></a>
            </div>
            {cols.map((c, i) => (
              <div key={i}>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--pravi-orange)', fontWeight: 600, marginBottom: 6 }}>{c.h}</div>
                <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
                  {c.l.map((it, k) => (
                    <li key={k} style={{ borderBottom: '1px solid #ebebeb' }}>
                      <a href={it[1]} style={{ display: 'block', padding: '3px 0', fontSize: 13, fontFamily: 'DM Sans', fontWeight: 600, color: '#3a3a52', textDecoration: 'none', transition: 'color .15s' }}
                        onMouseEnter={e => e.currentTarget.style.color = 'var(--pravi-blue)'}
                        onMouseLeave={e => e.currentTarget.style.color = '#3a3a52'}>
                        {it[0]}
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </div>
      <div style={{ padding: '10px 4vw 16px', borderTop: '1px solid #e0e0e0', marginTop: 16, display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12, fontFamily: 'DM Mono', fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#000000', position: 'relative', zIndex: 2 }}>
        <a href="privacy-policy.html" style={{ color: '#000000', textDecoration: 'none', transition: 'color .15s' }} onMouseEnter={e => e.currentTarget.style.color = 'var(--pravi-orange)'} onMouseLeave={e => e.currentTarget.style.color = '#000000'}>Privacy Policy</a>
      </div>
    </footer>
  );
}

/* ===================================================================
   HERO — shared Broadsheet hero (parallax chevron + radial mesh)
   Pass eyebrow / headline (JSX) / lead / buttons per page.
   =================================================================== */
function PageHero({ eyebrow, headline, lead, buttons, headlineStyle, padding }) {
  const heroRef = useRefK(null);
  useEffectK(() => {
    const onScroll = () => {
      if (!heroRef.current) return;
      heroRef.current.style.setProperty("--scrollY", `${window.scrollY}px`);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <section ref={heroRef} id="top" style={{ padding: padding || "80px 4vw 100px", position: "relative", overflow: "hidden", borderBottom: '1px solid var(--rule)' }}>
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0, pointerEvents: "none",
        background: 'radial-gradient(900px 600px at 80% 50%, rgba(26,79,189,.09), transparent 60%), radial-gradient(700px 500px at 8% 70%, rgba(234,117,33,.11), transparent 62%)',
      }} />
      <div className="container" style={{ position: "relative", zIndex: 2 }}>
        {/* <div className="reveal" aria-hidden="true" style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 26 }}>
          <span style={{ width: 64, height: 5, background: 'var(--pravi-orange)' }} />
          <span style={{ width: 12, height: 5, background: 'var(--pravi-blue)' }} />
        </div> */}
        {window.PraviHead
          ? <window.PraviHead tag="h1" className="display" d={120} style={headlineStyle}>{headline}</window.PraviHead>
          : <h1 className="display reveal" style={headlineStyle}>{headline}</h1>}
        {lead && <p className="lead reveal" style={{ margin: "32px 0 0", maxWidth: 680, ['--d']: '240ms' }}>{lead}</p>}
        {buttons && <div className="reveal" style={{ marginTop: 38, display: "flex", gap: 14, flexWrap: 'wrap', ['--d']: '380ms' }}>{buttons}</div>}
      </div>
      <div aria-hidden="true" style={{
        position: "absolute", right: "-9vw", top: "10%",
        transform: "translateY(calc(var(--scrollY, 0px) * -0.16))",
        pointerEvents: "none", zIndex: 1, opacity: 0.2,
      }}>
        <svg width="780" height="780" viewBox="0 0 100 100">
          <path d="M 18 12 L 70 50 L 18 88 L 18 70 L 46 50 L 18 30 Z" fill="var(--pravi-orange)" />
        </svg>
      </div>
    </section>
  );
}

/* ===================================================================
   POLAROID — borrowed from Field Note, self-contained styles
   =================================================================== */
function Polaroid({ src, caption, rotate = 0, stamp, alt = "" }) {
  return (
    <div style={{
      background: 'var(--white)', padding: '14px 14px 54px',
      boxShadow: '0 14px 30px -12px rgba(11,20,48,.20), 0 2px 6px -2px rgba(11,20,48,.08)',
      border: '1px solid var(--rule-soft)', position: 'relative',
      transform: `rotate(${rotate}deg)`, transition: 'transform .4s cubic-bezier(.2,.6,.2,1)',
    }}
      onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-6px) rotate(0deg)'; }}
      onMouseLeave={e => { e.currentTarget.style.transform = `rotate(${rotate}deg)`; }}>
      {stamp && (
        <div style={{ position: 'absolute', top: -10, right: -10, background: 'var(--pravi-orange)', color: 'var(--paper)', fontFamily: 'DM Mono, monospace', fontSize: 9.5, letterSpacing: '0.14em', textTransform: 'uppercase', padding: '4px 8px', transform: 'rotate(8deg)', zIndex: 2 }}>{stamp}</div>
      )}
      <div className="ph" style={{ width: '100%', aspectRatio: '4/5', display: 'block' }}>
        {src && <img src={src} alt={alt} style={{ width: '100%', height: '100%', objectFit: 'cover' }} onError={(e) => { e.target.style.display = 'none'; }} />}
      </div>
      <div style={{ position: 'absolute', bottom: 12, left: 14, right: 14, fontFamily: "'Caveat', cursive", fontSize: 22, color: 'var(--ink)', textAlign: 'center', lineHeight: 1 }}>{caption}</div>
    </div>
  );
}

/* ===================================================================
   REVEAL — IntersectionObserver, same behaviour as Home
   =================================================================== */
function useRevealObserver(stageRef) {
  useEffectK(() => {
    if (!stageRef.current) return;
    const els = stageRef.current.querySelectorAll('.reveal, .reveal-l, .reveal-r');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.12, rootMargin: "0px 0px -60px 0px" });
    els.forEach(el => {
      const r = el.getBoundingClientRect();
      if (r.top < window.innerHeight * 0.95) el.classList.add('in');
      io.observe(el);
    });
    const safety = setTimeout(() => els.forEach(el => {
      el.classList.add('in'); el.style.transition = 'none'; el.style.opacity = '1'; el.style.transform = 'none';
    }), 1100);
    return () => { io.disconnect(); clearTimeout(safety); };
  }, []);
}

function useHashScroll() {
  useEffectK(() => {
    const handleHash = () => {
      const hash = window.location.hash;
      if (hash && hash !== '#top') {
        const id = decodeURIComponent(hash.slice(1));
        let count = 0;
        const checkAndScroll = () => {
          const element = document.getElementById(id);
          if (element) {
            element.scrollIntoView({ behavior: 'smooth', block: 'start' });
          } else if (count < 15) {
            count++;
            setTimeout(checkAndScroll, 100);
          }
        };
        checkAndScroll();
      }
    };

    handleHash();
    window.addEventListener('hashchange', handleHash);
    return () => window.removeEventListener('hashchange', handleHash);
  }, []);
}

const PRAVI_CAT_FILE = {
  'strategy-advisory': 'strategy-and-advisory.html',
  'execution-delivery': 'execution-and-delivery.html',
  'insight-intelligence': 'insight-and-intelligence.html',
  'digital-systems': 'digital-and-systems.html',
};

/* ===================================================================
   LINKEDIN POST CARDS — custom card UI (no iframes)
   =================================================================== */
const LINKEDIN_POSTS = [
  {
    text: "India's infrastructure development is evolving from building roads to creating integrated connectivity systems. The Ganga Expressway — a 594 km corridor from Meerut to Prayagraj — represents more than just improved mobility. It reflects a broader shift towards developing connected infrastructure ecosystems.",
    docTitle: "Dashboard to War Rooms: How Infra Projects Scale",
    docSub: "Infrastructure · Pravi Research",
    bg: "linear-gradient(135deg, #0f2d6b 0%, #1a4fb9 100%)",
    postUrl: "https://www.linkedin.com/posts/pravi-research_ganga-expressway-activity-7458153193127108609-c1Ew",
    reactions: 412,
  },
  {
    text: "As India's cities expand, fragmented transport systems and vehicle-centric planning are driving congestion, inequality, and rising emissions. Rethinking urban mobility with integrated solutions is no longer optional — it's essential. From seamless connectivity to climate-first design.",
    docTitle: "Integrated Multimodal Transport Systems for Urban India",
    docSub: "Urban Mobility · Pravi Research",
    bg: "linear-gradient(135deg, #0d3b2e 0%, #1b6b5a 100%)",
    postUrl: "https://www.linkedin.com/company/pravi-research",
    reactions: 286,
  },
  {
    text: "India's Open Government Data: Democratising Access, Accelerating Insight. As the world pivots to data-led decision making, India has taken a bold step — making vast repositories of government data open and accessible. It is a catalyst for innovation, accountability, and evidence-based governance.",
    docTitle: "India's Open Government Data Platform",
    docSub: "Governance & Data · Pravi Research",
    bg: "linear-gradient(135deg, #7a1a08 0%, #c04a1a 100%)",
    postUrl: "https://www.linkedin.com/posts/pravi-research_indias-open-government-data-platform-activity-7335587985469427713-eSQe",
    reactions: 318,
  },
  {
    text: "Urban heat islands are intensifying across India's dense cities. Thoughtful urban design — tree canopy strategies, reflective surfaces, wind corridors — can meaningfully reduce temperatures in the most vulnerable neighbourhoods. A look at what works and what doesn't.",
    docTitle: "Cooling India's Cities: Urban Design for Heat Resilience",
    docSub: "Urban Policy · Pravi Research",
    bg: "linear-gradient(135deg, #2d1a5e 0%, #5a2d9e 100%)",
    postUrl: "https://www.linkedin.com/company/pravi-research",
    reactions: 240,
  },
  {
    text: "The government's consideration of allowing joint ventures with Chinese companies marks a significant policy inflection point. The implications span national security, technology transfer, and India's strategic positioning in global value chains — and deserve careful, evidence-based scrutiny.",
    docTitle: "Implications of Allowing JVs with Chinese Companies",
    docSub: "Policy & Trade · Pravi Research",
    bg: "linear-gradient(135deg, #1e3a5f 0%, #1a6ba0 100%)",
    postUrl: "https://www.linkedin.com/company/pravi-research",
    reactions: 540,
  },
  {
    text: "The Panchayati Advancement Index offers a rare glimpse into rural governance metrics. What does it actually measure, and what does it miss? Our analysis unpacks the methodology and its implications for bottom-up governance reform across India's 2.5 lakh gram panchayats.",
    docTitle: "Panchayati Advancement Index: Lessons on Rural Metrics",
    docSub: "Rural Governance · Pravi Research",
    bg: "linear-gradient(135deg, #0d3d1e 0%, #1a6b3a 100%)",
    postUrl: "https://www.linkedin.com/company/pravi-research",
    reactions: 195,
  },
];

function LinkedInCard({ post }) {
  const [expanded, setExpanded] = React.useState(false);
  const SHORT = 155;
  const isLong = post.text.length > SHORT;
  const shown = expanded || !isLong ? post.text : post.text.slice(0, SHORT);
  return (
    <div style={{ background: 'white', border: '1px solid #dce1e9', overflow: 'hidden', display: 'flex', flexDirection: 'column', fontFamily: 'DM Sans, -apple-system, sans-serif' }}>
      <div style={{ padding: '14px 16px 10px', display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', gap: 10 }}>
          <div style={{ width: 44, height: 44, borderRadius: '50%', background: '#f0f2f5', overflow: 'hidden', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1px solid #e0e0e0' }}>
            <img src="assets/pravi-logo.webp" alt="Pravi" style={{ width: 34, height: 34, objectFit: 'contain' }} onError={e => e.target.style.display = 'none'} />
          </div>
          <div style={{ paddingTop: 2 }}>
            <div style={{ fontWeight: 600, fontSize: 14, color: '#191919', lineHeight: 1.2 }}>Pravi</div>
            <div style={{ fontSize: 12, color: '#777', marginTop: 2 }}>275 followers</div>
          </div>
        </div>
        <svg viewBox="0 0 24 24" width={20} height={20} fill="#0A66C2" style={{ flexShrink: 0, marginTop: 3 }}>
          <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
        </svg>
      </div>
      <div style={{ padding: '0 16px 12px', fontSize: 13.5, color: '#333', lineHeight: 1.55 }}>
        {shown}{isLong && !expanded && <span>… <span style={{ color: '#0A66C2', cursor: 'pointer', fontWeight: 500 }} onClick={() => setExpanded(true)}>see more</span></span>}
      </div>
      <a href={post.postUrl} target="_blank" rel="noopener noreferrer" style={{ display: 'block', textDecoration: 'none', flexShrink: 0 }}>
        <div style={{ background: post.bg, padding: '22px 20px 18px', minHeight: 120, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', position: 'relative', overflow: 'hidden' }}>
          <div aria-hidden="true" style={{ position: 'absolute', right: -16, top: -16, width: 90, height: 90, borderRadius: '50%', background: 'rgba(255,255,255,0.06)' }} />
          <div aria-hidden="true" style={{ position: 'absolute', right: 16, bottom: -10, width: 55, height: 55, borderRadius: '50%', background: 'rgba(255,255,255,0.05)' }} />
          <div style={{ fontFamily: 'DM Serif Display, serif', fontSize: 16.5, color: 'white', lineHeight: 1.25, fontWeight: 400, position: 'relative', zIndex: 1 }}>{post.docTitle}</div>
          <div style={{ fontSize: 10.5, color: 'rgba(255,255,255,0.6)', marginTop: 8, fontFamily: 'DM Mono, monospace', letterSpacing: '0.08em', textTransform: 'uppercase', position: 'relative', zIndex: 1 }}>{post.docSub}</div>
        </div>
      </a>
      <div style={{ display: 'flex', borderTop: '1px solid #e8e8e8' }}>
        {[['👍', 'Like'], ['💬', 'Comment'], ['↗️', 'Share']].map(([icon, label]) => (
          <a key={label} href={post.postUrl} target="_blank" rel="noopener noreferrer"
            style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5, padding: '9px 4px', fontSize: 13, color: '#666', textDecoration: 'none', transition: 'background .15s' }}
            onMouseEnter={e => e.currentTarget.style.background = '#f2f2f2'}
            onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
            <span>{icon}</span><span style={{ fontWeight: 500 }}>{label}</span>
          </a>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, {
  PraviChevronMark: ChevronMark,
  ChevronTrails,
  PraviHomeNav: HomeNav,
  PraviHomeFooter: HomeFooter,
  PraviCtaBand: CtaBand,
  PraviPageHero: PageHero,
  PraviPolaroid: Polaroid,
  praviUseReveal: useRevealObserver,
  praviUseHashScroll: useHashScroll,
  PRAVI_SECTORS: SECTORS,
  PRAVI_CAT_FILE,
  PraviLinkedInCard: LinkedInCard,
  PRAVI_LINKEDIN_POSTS: LINKEDIN_POSTS,
});
