/* ============================================================
   PRAVI — ABOUT PAGE
   Broadsheet-rooted but customized: no eyebrow labels, no
   masthead chrome, no em-dashes. Headlines lead; a two-tone
   bar is the section signature.
   ============================================================ */

const { useState, useEffect, useRef } = React;
const P = window.PRAVI;
const ChevronMark = window.PraviChevronMark;
const HomeNav = window.PraviHomeNav;
const HomeFooter = window.PraviHomeFooter;
const CtaBand = window.PraviCtaBand;
const PageHero = window.PraviPageHero;
const Polaroid = window.PraviPolaroid;
const useReveal = window.praviUseReveal;
const useScrollFX = window.praviUseScrollFX;
const useHashScroll = window.praviUseHashScroll;
const Head = window.PraviHead;
const ProgressBar = window.PraviProgressBar;
const Blob = window.PraviBlob;

/* Custom section signature — a graphic accent, never eyebrow text. */
function Mark({ style = {} }) {
  return (
    <div aria-hidden="true" style={{ display: 'flex', alignItems: 'center', gap: 9, ...style }}>
      <span style={{ width: 56, height: 5, background: 'var(--pravi-orange)' }} />
      <span style={{ width: 12, height: 5, background: 'var(--pravi-blue)' }} />
    </div>
  );
}

/* ===================================================================
   ABOUT PRAVI
   =================================================================== */
function AboutPravi() {
  return (
    <section className="section motion-sec" id="about" style={{ borderBottom: '1px solid var(--rule)' }}>
      <Blob tone="blue" className="b-3" />
      <div className="container">
        <div className="r-stack-lg" style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr 1.4fr", gap: 56, alignItems: "stretch" }}>
          <div className="reveal-l">
            <Head style={{ fontSize: 'clamp(56px, 7vw, 110px)', margin: '0', lineHeight: 0.95, color: 'var(--pravi-blue)' }}>About<br />Pravi.</Head>
            <ChevronMark size={48} color="var(--pravi-orange)" style={{ marginTop: 18 }} />
            <p style={{ marginTop: 26, fontFamily: 'DM Serif Display, serif', fontSize: 19, fontStyle: 'italic', fontWeight: 400, lineHeight: 1.35, color: 'var(--ink)' }}>
              We don't just architect strategy. We architect transformations.
            </p>
          </div>

          <div className="reveal">
            <p style={{ margin: 0, padding: 0, fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.65, textAlign: 'justify' }}>
              <span className="drop">P</span>ravi exists to bridge vision with execution. We partner with businesses, governments, and global institutions to design bold strategies, drive systemic change, and deliver measurable impact across India.
            </p>
            <p style={{ marginTop: 14, fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.65, textAlign: 'justify' }}>
              The world is evolving at an unprecedented pace, demanding agility, innovation, and precision. Pravi was built to move organizations from strategy to reality, not just to the edge of a slide deck.
            </p>
            <p style={{ marginTop: 14, fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.65, textAlign: 'justify' }}>
              Our expertise spans strategy consulting, governance advisory, digital transformation, and data-led decision-making. That breadth is what lets our partners be not just future-ready, but future-defining.
            </p>
            <p style={{ marginTop: 14, fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.65, textAlign: 'justify' }}>
              In our journey, we've worked alongside government departments, foundations and a growing roster of enterprises. The thread that ties it together is simple. We follow through on what we promise.
            </p>
          </div>

          <div className="reveal-r" style={{ height: '95%', display: 'flex', flexDirection: 'column' }}>
            <div className="ph motion-par-img" style={{ flex: 1, minHeight: 260 }}>
              <img src="assets/About_Pravi1.webp" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} onError={(e) => e.target.style.display = 'none'} />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===================================================================
   WHAT WE DO — three links into the Pravi family of pages
   =================================================================== */
function ThreeStudios() {
  const items = [
    {
      no: "01", title: "Pravi Consulting",
      tagline: "Strategy meets execution.",
      body: "Governance advisory, digital transformation, and data-led decision-making, organised into four practices and delivered across business, government, and the development sector.",
      href: "pravi-consulting.html#top",
    },
    {
      no: "02", title: "Pravi Labs",
      tagline: "Build for Billion, Build for Bharat.",
      body: "Our innovation and capability hub, where we design, build, and test solutions for complex, high-impact challenges at population scale.",
      href: "pravi-labs.html#top",
    },
    {
      no: "03", title: "Pravi Studios",
      tagline: "Ideas become narratives.",
      body: "Stories, campaigns, experiences, and communication systems that move people, shape perceptions, and create impact at scale.",
      href: "pravi-studios.html#top",
    },
  ];
  return (
    <section className="section motion-sec" id="what-we-do" style={{ borderBottom: '1px solid var(--rule)' }}>
      <Blob tone="blue" className="b-3" />
      <div className="container">
        <div style={{ marginBottom: 44, display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
          <Mark />
          <Head style={{ fontSize: 'clamp(48px, 6vw, 96px)', margin: '20px 0 0', lineHeight: 1 }}>
            What we <em className="italic" style={{ color: 'var(--pravi-orange)' }}>do.</em>
          </Head>
          <p style={{ marginTop: 16, fontSize: 17, color: 'var(--ink-soft)', lineHeight: 1.55, maxWidth: 620 }}>
            Three studios, one team. Each one a different way we turn vision into reality.
          </p>
        </div>
        <div className="r-3up r-bordered" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: '1px solid var(--ink)' }}>
          {items.map((it, i) => (
            <a key={it.title} href={it.href} className="reveal" style={{
              display: 'flex', flexDirection: 'column', padding: '46px 38px', textDecoration: 'none', color: 'inherit',
              borderRight: i < items.length - 1 ? '1px solid var(--rule)' : 'none',
              background: i % 2 ? 'var(--paper-deep)' : 'var(--paper)',
              ['--d']: (i * 100) + 'ms', transition: 'background .25s, transform .25s',
            }}
              onMouseEnter={e => { e.currentTarget.style.background = 'var(--pravi-blue)'; e.currentTarget.style.color = 'var(--paper)'; }}
              onMouseLeave={e => { e.currentTarget.style.background = i % 2 ? 'var(--paper-deep)' : 'var(--paper)'; e.currentTarget.style.color = 'inherit'; }}>
              <div style={{ fontFamily: 'DM Serif Display', fontWeight: 400, fontSize: 56, color: 'var(--pravi-orange)', lineHeight: 1 }}>{it.no}</div>
              <h3 style={{ fontFamily: 'DM Serif Display', fontWeight: 400, fontSize: 'clamp(28px, 2.6vw, 38px)', letterSpacing: '-0.02em', margin: '14px 0 4px', lineHeight: 1.05 }}>{it.title}</h3>
              <div style={{ fontFamily: 'DM Serif Display', fontWeight: 600, fontSize: 19, color: 'var(--pravi-orange)', marginBottom: 14 }}>{it.tagline}</div>
              <p style={{ margin: 0, fontSize: 15, lineHeight: 1.6, opacity: 0.85, flex: 1 }}>{it.body}</p>
              <div style={{ marginTop: 24, paddingTop: 16, borderTop: '1px dashed var(--rule)', display: 'flex', alignItems: 'center', gap: 8, fontFamily: 'DM Sans', fontWeight: 600, fontSize: 14 }}>
                Explore <ChevronMark size={12} color="var(--pravi-orange)" />
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===================================================================
   VISION & MISSION — two facing panels (titles say what they are)
   =================================================================== */
function VisionMission() {
  const panels = [
    {
      rom: "01", wm: "var(--pravi-orange-pale)", kicker: "Our vision",
      lead: "To be the driving force.",
      body: "Behind transformative solutions that redefine industries, empower organizations, and shape a future where strategy meets execution with precision and impact.",
      foot: "What we're aiming at.", divider: true
    },
    {
      rom: "02", wm: "var(--pravi-blue-pale)", kicker: "Our mission",
      lead: "To bridge vision with reality.",
      body: "We leverage strategy, technology, and data-driven insight to drive innovation, enhance efficiency, and deliver measurable growth. Through bold thinking and relentless execution, we enable organizations not just to adapt to change, but to lead it.",
      foot: "How we get there.", divider: false
    },
  ];
  return (
    <section className="section motion-sec" id="vision" style={{ borderBottom: '1px solid var(--rule)' }}>
      <Blob tone="orange" className="b-4" />
      <div className="container">
        <div style={{ marginBottom: 44, display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
          <Mark />
          <Head style={{ fontSize: 'clamp(48px, 6vw, 96px)', margin: '20px 0 0', lineHeight: 1 }}>
            What we <em className="italic" style={{ color: 'var(--pravi-orange)' }}>believe.</em>
          </Head>
        </div>
        <div className="r-2to1 r-bordered" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, border: '1px solid var(--ink)' }}>
          {panels.map((p, i) => (
            <div key={i} className={i === 0 ? "reveal-l" : "reveal-r"} style={{ padding: '52px 46px', borderRight: p.divider ? '1px solid var(--rule)' : 'none', position: 'relative', background: i % 2 ? 'var(--paper-deep)' : 'var(--paper)' }}>
              {/* <div style={{ position: 'absolute', top: 26, right: 34, fontFamily: 'DM Serif Display', fontWeight: 600, fontSize: 90, color: p.wm, lineHeight: 1, pointerEvents: 'none' }}>{p.rom}</div> */}
              <div style={{ fontFamily: 'DM Serif Display', fontWeight: 600, fontSize: 26, color: 'var(--pravi-orange)' }}>{p.kicker}</div>
              <h3 style={{ fontFamily: 'DM Serif Display', fontWeight: 400, fontSize: 'clamp(32px, 3.6vw, 50px)', letterSpacing: '-0.02em', margin: '12px 0 22px', lineHeight: 1.02, color: 'var(--pravi-blue)' }}>{p.lead}</h3>
              <p style={{ fontSize: 18, lineHeight: 1.65, color: 'var(--ink)', margin: 0 }}>{p.body}</p>
              {/* <div style={{ marginTop: 28, paddingTop: 16, borderTop: '1px dashed var(--rule)', display: 'flex', gap: 12, alignItems: 'center' }}>
                <ChevronMark size={16} color="var(--pravi-orange)" />
                <span style={{ fontFamily: 'DM Sans', fontSize: 15, fontWeight: 600, color: 'var(--ink-soft)' }}>{p.foot}</span>
              </div> */}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===================================================================
   BRAND PRAVI — name meaning + logo symbolism diagram
   Image sits on solid paper so the section grid never shows over it;
   multiply blend drops the artwork's white into the cream background.
   =================================================================== */
function BrandPravi() {
  return (
    <section className="section motion-sec" id="brand" style={{ borderBottom: '1px solid var(--rule)', position: 'relative', overflow: 'hidden' }}>
      <Blob tone="blue" className="b-4" />
      <div className="container">
        <div style={{ marginBottom: 28, display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
          <Mark />
          <Head style={{ fontSize: 'clamp(48px, 6vw, 96px)', margin: '20px 0 0', lineHeight: 1 }}>
            The name, <em className="italic" style={{ color: 'var(--pravi-orange)' }}>decoded.</em>
          </Head>
          <p style={{ marginTop: 16, fontSize: 17, color: 'var(--ink-soft)', lineHeight: 1.55, maxWidth: 660 }}>
            Where the word comes from, and the meaning carried by every mark in the logo.
          </p>
        </div>
        {/* No reveal/opacity/z-index wrapper here — any of those make a new
            stacking context that isolates mix-blend-mode and leaves a white box.
            Plain flex wrapper lets multiply blend the artwork straight onto the
            section's paper background, dissolving the white field. */}
        <div style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
          {/* No backdrop here — a solid box would draw a visible rectangle over
              the grid. Transparent wrapper lets multiply blend the artwork's
              white field straight onto the page (paper + grid), so the image
              edges dissolve into the background with no visible border. */}
          <div style={{ display: 'inline-block' }}>
            <img
              src="assets/brandmeaning.webp"
              alt="Pravi — a Sanskrit word meaning to drive on, set in motion; the blue stands for trust, the orange arrow for momentum, the orange dot for energy, and the bold font for a bold vision."
              style={{ display: 'block', width: 'auto', maxWidth: '100%', maxHeight: '100vh', height: 'auto', mixBlendMode: 'multiply' }}
            />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===================================================================
   TEAM PRAVI — member cards (portrait, name, designation, school)
   =================================================================== */
function TeamPravi() {
  return (
    <section className="section motion-sec" id="team" style={{ borderBottom: '1px solid var(--rule)' }}>
      {/*   <Blob tone="blue" className="b-3" /> */}
      {/* <div className="container">
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", paddingBottom: 30, gap: 24, flexWrap: 'wrap' }}>
          <div className="reveal-l">
            <Mark />
            <Head style={{ fontSize: 'clamp(48px, 6vw, 92px)', margin: '20px 0 0', lineHeight: 1 }}>
              Team <em className="italic" style={{ color: 'var(--pravi-orange)' }}>Pravi.</em>
            </Head>
            <p style={{ marginTop: 16, fontSize: 17, color: 'var(--ink-soft)', lineHeight: 1.55, maxWidth: 660 }}>
              Exceptional talent from the leading national and international institutes with proven work experience across reputed organisations and fellowships.
            </p>
          </div>
       
        </div>

        <div className="r-4up r-bordered" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: '1px solid var(--ink)' }}>
          {P.team.map((m, i) => {
            const initials = m.name.split(' ').map(s => s[0]).join('').replace(/\./g, '');
            const col = i % 4, row = Math.floor(i / 4);
            return (
              <article key={i} className="reveal flip-3d" style={{
                background: (i % 2 === 0) ? 'var(--paper)' : 'var(--paper-deep)',
                borderRight: col < 3 ? '1px solid var(--rule)' : 'none',
                borderBottom: row < (Math.ceil(P.team.length / 4) - 1) ? '1px solid var(--rule)' : 'none',
                display: 'flex', flexDirection: 'column', ['--d']: (col * 70) + 'ms',
              }}>
                <div style={{ aspectRatio: '4/5', position: 'relative', overflow: 'hidden', background: 'linear-gradient(160deg, #e8eef9, #f5e9d3)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <span style={{ fontFamily: 'DM Serif Display', fontWeight: 600, fontSize: 76, color: 'var(--pravi-blue)', opacity: 0.85 }}>{initials}</span>
                  <ChevronMark size={16} color="var(--pravi-orange)" style={{ position: 'absolute', bottom: 14, right: 14 }} />
                </div>
                <div style={{ padding: '18px 18px 22px' }}>
                  <h4 style={{ fontFamily: 'DM Serif Display', fontWeight: 400, fontSize: 26, margin: '0 0 4px', lineHeight: 1 }}>{m.name}</h4>
                  <div style={{ fontFamily: 'DM Serif Display', fontWeight: 600, fontSize: 18, color: 'var(--pravi-blue)', lineHeight: 1.2 }}>{m.role}</div>
                  <div style={{ fontSize: 13.5, color: 'var(--ink-soft)', marginTop: 8, fontFamily: 'DM Sans', fontWeight: 500 }}>{m.school}</div>
                </div>
              </article>
            );
          })}
        </div>
        <div style={{ marginTop: 22, fontFamily: 'DM Sans', fontSize: 16, fontWeight: 600, color: 'var(--pravi-blue)' }}>
          …and a few more we're hiring right now. <a href="careers.html#roles" style={{ color: 'var(--pravi-orange)' }}>See open roles ›</a>
        </div>

       
        <div style={{ marginTop: 56 }}>
          <div className="reveal-l" style={{ marginBottom: 26 }}>
            <Mark />
            <h3 style={{ fontFamily: 'DM Serif Display', fontWeight: 400, fontSize: 'clamp(28px, 3.4vw, 46px)', letterSpacing: '-0.015em', margin: '16px 0 6px', lineHeight: 1 }}>
              Pravi <em style={{ fontFamily: "'DM Serif Display', serif", fontWeight: 600, fontStyle: 'normal', color: 'var(--pravi-orange)' }}>Alumns.</em>
            </h3>
            <p style={{ margin: 0, fontSize: 15.5, color: 'var(--ink-soft)', lineHeight: 1.55, maxWidth: 620 }}>
              Where Pravi has been a launchpad. Friends of the firm now carrying the craft forward across the world.
            </p>
          </div>
          <div className="r-4up r-bordered" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: '1px solid var(--rule)' }}>
            {[
              { name: "R. Sharma", role: "Ex-Consultant", now: "Now at McKinsey & Co." },
              { name: "A. Verma", role: "Ex-Research Lead", now: "Now at UNDP" },
              { name: "S. Nair", role: "Ex-Analyst", now: "Now at World Bank" },
              { name: "K. Iyer", role: "Ex-Associate", now: "Now at Gates Foundation" },
            ].map((m, i, arr) => {
              const initials = m.name.split(' ').map(s => s[0]).join('').replace(/\./g, '');
              return (
                <article key={i} className="reveal" style={{
                  background: (i % 2 === 0) ? 'var(--paper)' : 'var(--paper-deep)',
                  borderRight: i < arr.length - 1 ? '1px solid var(--rule)' : 'none',
                  display: 'flex', flexDirection: 'column', ['--d']: (i * 70) + 'ms',
                }}>
                  <div style={{ aspectRatio: '4/5', position: 'relative', overflow: 'hidden', background: 'linear-gradient(160deg, #eceef2, #e4e2dd)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <span style={{ fontFamily: "'DM Serif Display', serif", fontWeight: 600, fontSize: 64, color: 'var(--ink-soft)', opacity: 0.6, filter: 'grayscale(1)' }}>{initials}</span>
                    <ChevronMark size={14} color="var(--ink-faint)" style={{ position: 'absolute', bottom: 14, right: 14 }} />
                  </div>
                  <div style={{ padding: '16px 16px 20px' }}>
                    <h4 style={{ fontFamily: 'DM Serif Display', fontWeight: 400, fontSize: 22, margin: '0 0 4px', lineHeight: 1 }}>{m.name}</h4>
                    <div style={{ fontFamily: "'DM Serif Display', serif", fontWeight: 600, fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.2 }}>{m.role}</div>
                    <div style={{ fontSize: 12.5, color: 'var(--pravi-blue)', marginTop: 8, fontFamily: 'DM Sans', fontWeight: 600 }}>{m.now}</div>
                  </div>
                </article>
              );
            })}
          </div>
        </div>
      </div> */}
    </section>
  );
}

function LifeAtPravi() {
  const shots = [
    { src: P.galleryImgs[0], cap: "", stamp: "" },
    { src: 'assets/LifeAtPravi_1.webp', cap: "", stamp: "" },
    { src: 'assets/LifeAtPravi_3.webp', cap: "", stamp: "" },
    { src: 'assets/LifeAtPravi_2.webp', cap: "", stamp: "" },
    { src: P.galleryImgs[2], cap: "", stamp: "" },
    { src: "assets/Who_We_Are.webp", cap: "", stamp: "" },
    { src: "assets/LAP.webp", cap: "", stamp: "" },
  ];

  const placements = [
    { gridColumn: '1 / 3', gridRow: '1 / 2' },
    { gridColumn: '3 / 4', gridRow: '1 / 3' },
    { gridColumn: '4 / 5', gridRow: '1 / 3' },
    { gridColumn: '1 / 3', gridRow: '2 / 3' },
    { gridColumn: '1 / 2', gridRow: '3 / 4' },
    { gridColumn: '2 / 3', gridRow: '3 / 4' },
    { gridColumn: '3 / 5', gridRow: '3 / 4' },
  ];

  return (
    <section className="section motion-sec" id="life" style={{ borderBottom: '1px solid var(--rule)' }}>
      <Blob tone="orange" className="b-4" />
      <div className="container">
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 40, flexWrap: 'wrap', gap: 16 }}>
          <div className="reveal-l">
            <Mark />
            <Head style={{ fontSize: 'clamp(40px, 5.2vw, 80px)', margin: '20px 0 0', lineHeight: 1 }}>
              Life at <em className="italic" style={{ color: 'var(--pravi-orange)' }}>Pravi.</em>
            </Head>
          </div>
        </div>
        <div className="r-mosaic" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gridTemplateRows: 'repeat(3, 300px)',
          gap: 10,
        }}>
          {shots.map((p, i) => (
            <div key={i} className="reveal r-mosaic-card" style={{
              ...placements[i],
              ['--d']: (i * 80) + 'ms',
            }}>
              <img
                src={p.src}
                alt={p.cap}
                style={{
                  position: 'absolute', inset: 0,
                  width: '100%', height: '100%',
                  objectFit: 'cover', display: 'block',
                }}
                onError={e => e.target.style.display = 'none'}
              />
              <div style={{
                position: 'absolute', bottom: 0, left: 0, right: 0,
                padding: '36px 16px 14px',
                background: 'linear-gradient(to top, rgba(11,20,48,0.72) 0%, transparent 100%)',
                display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
                pointerEvents: 'none',
              }}>
                <span style={{ fontFamily: 'DM Sans', fontSize: 12.5, color: '#fff', fontWeight: 500 }}>{p.cap}</span>
                <span style={{ fontFamily: 'DM Mono', fontSize: 10, color: 'var(--pravi-orange)', letterSpacing: '0.1em' }}>{p.stamp}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===================================================================
   IDEAS AT PRAVI + #FOLLOWPRAVI — resources-page design
   =================================================================== */
function LoadMore({ onClick, label }) {
  return (
    <div style={{ marginTop: 34, display: 'flex', justifyContent: 'center' }}>
      <button onClick={onClick} className="btn ghost">{label} <ChevronMark size={12} color="currentColor" /></button>
    </div>
  );
}

function SectionHead({ title, accent }) {
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 34, flexWrap: 'wrap', gap: 16 }}>
      <div className="reveal-l">
        <Mark />
        <Head style={{ fontSize: 'clamp(40px, 5.2vw, 82px)', margin: '20px 0 0', lineHeight: 1 }}>
          {title} <em className="italic" style={{ color: 'var(--pravi-orange)' }}>{accent}</em>
        </Head>
      </div>
    </div>
  );
}

function IdeasAtPravi() {
  const [n, setN] = useState(3);
  const shown = P.blogs.slice(0, n);
  return (
    <section className="section motion-sec" id="ideas" style={{ borderBottom: '1px solid var(--rule)' }}>
      <Blob tone="blue" className="b-3" />
      <div className="container">
        <SectionHead title="Ideas at" accent="Pravi." />
        <div className="r-3up" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }}>
          {shown.map((b, i) => (
            <a key={b.slug} href={`essay.html#${b.slug}`} className="reveal" style={{ display: 'flex', flexDirection: 'column', border: '1px solid var(--rule)', background: 'var(--paper)', textDecoration: 'none', color: 'var(--ink)', transition: 'transform .25s cubic-bezier(.2,.6,.2,1), box-shadow .25s', ['--d']: ((i % 3) * 90) + 'ms' }}
              onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = '0 18px 36px -18px rgba(11,20,48,.28)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = ''; }}>
              <div className="motion-par-img" style={{ aspectRatio: '16/9', overflow: 'hidden', background: 'var(--paper-deep)' }}>
                <img src={b.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} onError={e => e.target.style.display = 'none'} />
              </div>
              <div style={{ padding: '24px 24px 26px', display: 'flex', flexDirection: 'column', flex: 1 }}>
                <div style={{ fontFamily: 'DM Mono', fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--pravi-orange)' }}>{b.tag} · {b.read}</div>
                <h3 style={{ fontFamily: 'DM Serif Display', fontWeight: 400, fontSize: 23, letterSpacing: '-0.01em', margin: '10px 0 8px', lineHeight: 1.15 }}>{b.title}</h3>
                <p style={{ margin: 0, fontSize: 14.5, color: 'var(--ink-soft)', lineHeight: 1.55 }}>{b.desc}</p>
                <div style={{ marginTop: 'auto', paddingTop: 18, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  {/* <span style={{ fontFamily: 'DM Mono', fontSize: 11, color: 'var(--ink-faint)', letterSpacing: '0.1em' }}>{b.date}</span> */}
                  <span style={{ fontFamily: 'DM Mono', fontSize: 11, color: 'var(--pravi-blue)', letterSpacing: '0.12em', textTransform: 'uppercase', display: 'inline-flex', alignItems: 'center', gap: 7 }}>Read <ChevronMark size={11} color="var(--pravi-orange)" /></span>
                </div>
              </div>
            </a>
          ))}
        </div>
        {P.blogs.length > 3 && (
          n < P.blogs.length
            ? <LoadMore label="Load more blogs" onClick={() => setN(P.blogs.length)} />
            : <LoadMore label="See less" onClick={() => setN(3)} />
        )}
      </div>
    </section>
  );
}

const LINKEDIN_EMBEDS = [
  { embedUrl: 'https://www.linkedin.com/embed/feed/update/urn:li:activity:7458153193127108609?collapsed=1' },
  { embedUrl: 'https://www.linkedin.com/embed/feed/update/urn:li:activity:7469746039751696384?collapsed=1' },
  { embedUrl: 'https://www.linkedin.com/embed/feed/update/urn:li:activity:7454801646989066240?collapsed=1' },
  { embedUrl: 'https://www.linkedin.com/embed/feed/update/urn:li:activity:7334579366330306560?collapsed=1' },
  { embedUrl: 'https://www.linkedin.com/embed/feed/update/urn:li:activity:7335587985469427713?collapsed=1' },
  { embedUrl: 'https://www.linkedin.com/embed/feed/update/urn:li:activity:7333309541809274881?collapsed=1' },
];

function FollowPravi() {
  const [showAll, setShowAll] = useState(false);
  return (
    <section className="section motion-sec" id="followpravi" style={{ borderBottom: '1px solid var(--rule)' }}>
      <Blob tone="orange" className="b-4" />
      <div className="container">
        <SectionHead title="#Follow" accent="Us." />
        <div className="r-3up" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {LINKEDIN_EMBEDS.map((post, i) => (
            <div key={post.embedUrl} className="reveal" style={{ border: '1px solid var(--rule)', overflow: 'hidden', background: 'var(--paper)', height: 500, display: (!showAll && i >= 3) ? 'none' : 'block', ['--d']: ((i % 3) * 90) + 'ms' }}>
              <iframe
                src={post.embedUrl}
                height="570"
                style={{ width: '100%', display: 'block', border: 'none' }}
                frameBorder="0"
                allowFullScreen={true}
                title={`Pravi LinkedIn post ${i + 1}`}
              />
            </div>
          ))}
        </div>
        {!showAll
          ? <LoadMore label="Load more posts" onClick={() => setShowAll(true)} />
          : <LoadMore label="See less" onClick={() => setShowAll(false)} />}
      </div>
    </section>
  );
}

/* ===================================================================
   ASSEMBLE
   =================================================================== */
function About() {
  const stageRef = useRef(null);
  useReveal(stageRef);
  useScrollFX(stageRef);
  useHashScroll();

  return (
    <div className="dir-editorial motion-stage" ref={stageRef}>
      <ProgressBar />
      <div className="page">
        <HomeNav active="At Pravi" />
        <PageHero
          padding="56px 4vw 64px"
          headlineStyle={{ fontSize: 'clamp(50px, 6.8vw, 100px)', lineHeight: 1.06 }}
          headline={<>Who we are.<br />And what we<br /><em>follow</em> <i>through</i> on.</>}
          lead="A team of bold thinkers, problem-solvers, and change-makers working at the intersection of governance, policy, and technology. We sit between the briefing room and the field, between the policy paper and the implementation guide."
          buttons={<>
            <a className="btn" href="pravi-consulting.html#practices">See what we do <ChevronMark size={12} color="currentColor" /></a>
            <a className="btn ghost" href="contact.html#form">Contact Us</a>
          </>}
        />
        <AboutPravi />
        {/* <ThreeStudios /> */}
        <BrandPravi />
        {/*<TeamPravi />*/}
        <LifeAtPravi />
        <IdeasAtPravi />
        <FollowPravi />
        <CtaBand />
        <HomeFooter />
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<About />);
