/* ============================================================
   PRAVI — HOME PAGE
   Nav, footer, CtaBand come from common.jsx (shared source of truth).
   Only home-specific sections live here.
   ============================================================ */

const { useState, useEffect, useRef } = React;
const P = window.PRAVI;
const ChevronMark = window.PraviChevronMark;
const ChevronTrails = window.ChevronTrails;
const HomeNav = window.PraviHomeNav;
const HomeFooter = window.PraviHomeFooter;
const CtaBand = window.PraviCtaBand;
const useReveal = window.praviUseReveal;
const useScrollFX = window.praviUseScrollFX;
const SplitText = window.PraviSplitText;
const Head = window.PraviHead;
const ProgressBar = window.PraviProgressBar;
const Blob = window.PraviBlob;
const CAT_PAGES = window.PRAVI_CAT_FILE;
const SECTORS = window.PRAVI_SECTORS;

/* Custom section signature — orange bar + blue bar. Used by About-derived sections. */
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>
  );
}

/* Abstract single-line illustration — continuous self-drawing stroke. Fills the column gap. */
function LineArt() {
  return (
    <div className="reveal pravi-lineart" style={{ marginTop: 'auto', paddingTop: 30 }}>
      <style>{`
        @keyframes praviDraw  { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
        @keyframes praviFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
        @keyframes praviDot   { 0%,100% { opacity: .4; } 50% { opacity: 1; } }
        .pravi-lineart svg { display: block; overflow: visible; }
        .pravi-lineart .stroke { stroke-dasharray: 1; stroke-dashoffset: 1; animation: praviDraw 2.8s ease-in-out .2s forwards; }
        .pravi-lineart .floatg { animation: praviFloat 7s ease-in-out infinite; transform-origin: center; }
        .pravi-lineart .pulse  { animation: praviDot 3.2s ease-in-out infinite; }
        @media (prefers-reduced-motion: reduce) {
          .pravi-lineart .stroke { animation: none; stroke-dashoffset: 0; }
          .pravi-lineart .floatg, .pravi-lineart .pulse { animation: none; }
        }
      `}</style>
      <svg width="236" height="120" viewBox="0 0 240 124" fill="none" aria-hidden="true">
        <g className="floatg">
          <path className="stroke" pathLength="1"
            d="M 8 96 C 28 58, 50 38, 80 58 C 102 72, 104 106, 132 96 C 162 86, 156 34, 190 44 C 212 50, 214 80, 232 58"
            stroke="var(--pravi-orange)" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
          <circle cx="80" cy="58" r="4.5" fill="var(--paper)" stroke="var(--pravi-blue)" strokeWidth="2" />
          <circle cx="132" cy="96" r="4.5" fill="var(--paper)" stroke="var(--pravi-blue)" strokeWidth="2" />
          <circle className="pulse" cx="232" cy="58" r="5" fill="var(--pravi-orange)" />
        </g>
      </svg>
    </div>
  );
}

/* ===================================================================
   HERO — Forward-style: clean headline, mesh bg, parallax chevron
   =================================================================== */
function Hero() {
  const heroRef = useRef(null);
  useEffect(() => {
    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" className="motion-hero" style={{ padding: "90px 4vw 110px", position: "relative", overflow: "hidden" }}>
      <Blob tone="orange" className="b-1" />
      <Blob tone="blue" className="b-2" />
      <div aria-hidden="true" className="motion-hero-bloom" 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 }}>
        <Head tag="h1" className="display" d={120}>
          Transforming <em>today,</em><br />
          defining <i>tomorrow.</i>
        </Head>
        <p className="lead reveal" style={{ margin: "32px 0 0", maxWidth: 640, fontWeight: 400, ['--d']: '260ms' }}>
          A team of impact-oriented consultants working at the intersection of governance, policy, and technology for businesses, governments, and multi-lateral agencies across India.
        </p>
      </div>

      <div aria-hidden="true" className="motion-hero-chev" 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>
  );
}

/* ===================================================================
   WHO WE ARE
   =================================================================== */
function WhoWeAre() {
  /* ─────────────────────────────────────────────────────────────
     COMPASS IMAGE CONTROLS — tweak these to test sizing & tilt.
       compassWidthPx : base width in px (320 ≈ original size)
       compassScale   : size multiplier (2.5 = 2.5× bigger)
       compassTiltDeg : tilt in degrees. NEGATIVE leans the top
                        toward the WEST (left); positive leans EAST
                        (right); 0 = perfectly upright.
     ───────────────────────────────────────────────────────────── */
  const compassWidthPx = 290;   // base width in px
  const compassScale   = 2.5;   // size multiplier (final width = base × scale)
  const compassTiltDeg = -15;   // -15 = tilted 15° to the west
  const compassShiftX  = -70;   // horizontal nudge in px: NEGATIVE = left (toward divider), positive = right

  return (
    <section className="section motion-sec" id="who">
      <Blob tone="orange" 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)' }}>Who we are.</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 build solutions that create lasting impact.
            </p>
          </div>
          <div className="reveal" style={{ display: 'flex', flexDirection: 'column' }}>
            <div>
              <p style={{ margin: 0, padding: 0, fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.65, textAlign: 'justify' }}>
                <span style={{ fontFamily: "'DM Serif Display', serif", fontSize: 60, lineHeight: 0.72, float: 'left', padding: '8px 14px 0 0', color: 'var(--pravi-orange)' }}>We</span> are a team of highly motivated, intellectually curious, and impact-oriented professionals working with governments, businesses, development partners, and multilateral institutions to solve complex challenges at scale.
              </p>
              <p style={{ marginTop: 14, fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.65, textAlign: 'justify' }}>
                Pravi is more than a consulting firm. We are a collective of strategists, researchers, technologists, and implementation specialists committed to turning ambitious ideas into measurable outcomes. We combine analytical rigour with practical execution to help institutions navigate complexity, improve performance, and create sustainable impact.
              </p>
              <p style={{ marginTop: 14, fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.65, textAlign: 'justify' }}>
                Our work spans the entire transformation journey—from identifying the right problem and designing evidence-based strategies to building systems, strengthening capabilities, and driving execution on the ground.
              </p>
              {/* <p style={{ marginTop: 14, fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.65, textAlign: 'justify' }}>
                We don't just deliver reports. We design policies that get implemented, programmes that achieve outcomes, and institutions that become stronger.
              </p>
              <p style={{ marginTop: 14, fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.65, textAlign: 'justify' }}>
                What sets us apart is our ability to bridge the gap between vision and execution. We operate where strategy meets implementation, where policy meets practice, and where intent translates into measurable change.
              </p> */}
              <p style={{ marginTop: 14, fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.65, textAlign: 'justify' }}>
                Whether supporting governments in delivering public services, enabling businesses to scale sustainably, or partnering with development organisations to maximise impact, we work as an extension of our clients' teams by bringing deep domain expertise, structured problem-solving, and relentless ownership to every engagement.
              </p>
              {/* <p style={{ marginTop: 14, fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.65, textAlign: 'justify' }}>
                At Pravi, success is not measured by presentations delivered or recommendations made. It is measured by the outcomes our clients achieve and the impact that endures long after the engagement concludes.
              </p> */}
            </div>
            {/* <div style={{ position: 'relative', marginTop: 'auto', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',left:'0.8em',opacity:'0.35' }}>
                <Blob tone="orange" style={{ position: 'relative', width: 260, height: 180 }} />
                <img
                  src="assets/true-north-compass-xtilt.svg"
                  alt="True north compass"
                  style={{
                    position: 'absolute', top: '50%', left: '50%',
                    transform: `translate(calc(-50% + ${compassShiftX}px), -50%) rotate(${compassTiltDeg}deg)`,
                    width: compassWidthPx * compassScale, maxWidth: 'none', height: 'auto', pointerEvents: 'none',
                    filter: 'drop-shadow(0 14px 30px rgba(42, 61, 122, 0.18))',
                  }}
                  onError={(e) => e.target.style.display = 'none'}
                />
              </div> */}
            </div>
          <div className="reveal-r" style={{ height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'flex-start' }}>
            <div>
              <img src="assets/About_pravi.webp" alt="The Pravi team" style={{ width: '100%', height: 'auto', display: 'block' }} onError={(e) => e.target.style.display = 'none'} />
            </div>
          </div>
        </div>
        {/* <div className="reveal" style={{ marginTop: 36, display: 'flex', gap: 14 }}>
          <a className="btn ghost" href="at-pravi.html">Meet the team <ChevronMark size={12} color="currentColor" /></a>
        </div> */}
      </div>
    </section>
  );
}

/* ===================================================================
   FOUR PRACTICE AREAS
   =================================================================== */
function FourPracticeAreas() {
  return (
    <section id="what" className="motion-sec" style={{ padding: "0 0 100px", position: "relative" }}>
      {/* <Blob tone="blue" className="b-2" /> */}
      {/* <div className="container" style={{ padding: "0 4vw 30px" }}>
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", paddingBottom: 22, gap: 24, flexWrap: 'wrap' }}>
          <Head style={{ fontSize: 'clamp(48px, 6.4vw, 92px)', margin: '0', lineHeight: 1 }}>
            Four <em className="italic" style={{ color: 'var(--pravi-orange)' }}>practice</em> <i style={{ fontStyle: 'italic', color: 'var(--pravi-blue)' }}>areas.</i>
          </Head>
          <a className="btn ghost" href="pravi-consulting.html#practices">All services <ChevronMark size={12} color="currentColor" /></a>
        </div>
      </div> */}

      {/* <div style={{ padding: "0 4vw" }}>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, border: "1px solid var(--ink)" }} className="r-4up r-bordered">
        {P.serviceCategories.map((cat, i) => {
          const bg = i % 2 === 0 ? 'var(--paper)' : 'var(--paper-deep)';
          const catPage = CAT_PAGES[cat.slug] || 'pravi-consulting.html';
          return (
            <article key={cat.slug} className="reveal motion-lift" style={{
              padding: "40px 28px", background: bg, borderRight: i < 3 ? '1px solid var(--rule)' : 'none',
              position: 'relative', overflow: 'hidden',
              minHeight: 360, display: 'flex', flexDirection: 'column', ['--d']: i * 90 + 'ms',
            }}>
              <h3 style={{ fontFamily: 'DM Serif Display', fontWeight: 400, fontSize: 38, letterSpacing: '-0.02em', margin: '0 0 8px', lineHeight: 0.98 }}>{cat.title}</h3>
              <p style={{ margin: 0, fontSize: 15.5, color: 'var(--ink-soft)', lineHeight: 1.5 }}>{cat.blurb}</p>
              <div style={{ marginTop: 22, paddingTop: 18, borderTop: '1px dashed var(--rule)' }}>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 10 }}>SERVICES IN THIS CATEGORY</div>
                {P.services.filter(s => s.category === cat.slug).map((s, k, arr) => (
                  <a key={k} href={`${catPage}#${s.slug}`} style={{ textDecoration: 'none', color: 'inherit', display: 'flex' }}>
                    <div
                      style={{ flex: 1, padding: '7px 0', borderBottom: k < arr.length - 1 ? '1px dashed var(--rule)' : 'none', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontFamily: 'DM Sans', fontSize: 14, cursor: 'pointer', transition: 'color .15s' }}
                      onMouseEnter={e => { e.currentTarget.style.background = 'var(--pravi-blue)'; e.currentTarget.style.color = 'var(--paper)'; }}
                      onMouseLeave={e => { e.currentTarget.style.background = ''; e.currentTarget.style.color = ''; }}>
                      <span>{s.title}</span>
                      <ChevronMark size={11} color="currentColor" />
                    </div>
                  </a>
                ))}
              </div>
              <a href={`${catPage}#top`} style={{ marginTop: 'auto', paddingTop: 22, display: 'flex', alignItems: 'center', gap: 8, fontFamily: 'DM Mono', fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', textDecoration: 'none', color: 'inherit' }}>
                EXPLORE CATEGORY <ChevronMark size={12} color="var(--pravi-orange)" />
              </a>
            </article>
          );
        })}
      </div>
      </div> */}
    </section>
  );
}

/* ===================================================================
   AFFILIATED WITH
   =================================================================== */
function Affiliated() {
  return (
    <section id="affiliated" className="motion-sec" style={{ padding: "0 0 50px", position: "relative" }}>
      <Blob tone="blue" className="b-4" />
      <div className="container" style={{ padding: "0 4vw 30px" }}>
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", paddingBottom: 22, gap: 24, flexWrap: 'wrap' }}>
          <Head style={{ fontSize: 'clamp(40px, 5.6vw, 84px)', margin: '0', lineHeight: 1 }}>
            Who we <em className="italic" style={{ color: 'var(--pravi-orange)' }}>work</em> with.
          </Head>
        </div>
      </div>

      <div style={{ padding: "0 4vw" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, border: "1px solid var(--ink)" }} className="r-3up r-bordered">
          {SECTORS.map((sector, i) => {
            const bg = i % 2 === 0 ? 'var(--paper)' : 'var(--paper-deep)';
            const sectorImgs = ['assets/boardroom.webp', 'assets/pmo.webp', 'assets/devsector.webp'];
            return (
              <article key={sector.slug} className="reveal motion-lift" style={{
                background: bg,
                borderRight: i < 2 ? '1px solid var(--rule)' : 'none',
                overflow: 'hidden',
                display: 'flex', flexDirection: 'column', ['--d']: i * 110 + 'ms',
              }}>
                <div className="motion-par-img" style={{ aspectRatio: '16/8', overflow: 'hidden', flexShrink: 0 }}>
                  <img src={sectorImgs[i]} alt={sector.title} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} onError={e => e.target.style.display = 'none'} />
                </div>
                <div style={{ padding: "28px 28px 32px", flex: 1, display: 'flex', flexDirection: 'column' }}>
                  {/* <div className="mono" style={{ fontSize: 11, letterSpacing: '0.2em', color: 'var(--pravi-orange)', marginBottom: 14, textTransform: 'uppercase' }}>0{i + 1} / {sector.slug.toUpperCase()}</div> */}
                  <h3 style={{ fontFamily: 'DM Serif Display', fontWeight: 400, fontSize: 'clamp(26px, 2.6vw, 36px)', letterSpacing: '-0.02em', margin: '0 0 12px', lineHeight: 1.05 }}>{sector.title}</h3>
                  <p style={{ margin: 0, fontSize: 15, color: 'var(--ink-soft)', lineHeight: 1.55 }}>{sector.description}</p>
                </div>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ===================================================================
   THE PRAVI WAY
   =================================================================== */
function PraviWay() {
  return (
    <div className="dir-kinetic" style={{ background: 'var(--paper)' }}>
      <section className="section wide" id="way" style={{ position: 'relative', overflow: 'hidden' }}>
        <ChevronTrails />
        <div className="container" style={{ position: 'relative', zIndex: 2 }}>
          <div style={{ textAlign: 'center', marginBottom: 50 }}>
            <div className="pill" style={{ marginInline: 'auto' }}><span className="d" />THE PRAVI WAY</div>
            <Head style={{ fontSize: 'clamp(56px, 7.4vw, 124px)', margin: '24px 0 18px', lineHeight: 0.92 }}>
              How we <em className="italic" style={{ color: 'var(--pravi-orange)' }}>move</em><br />from <span style={{ color: 'var(--pravi-blue)' }}>brief</span> to <em className="italic" style={{ color: 'var(--pravi-orange)' }}>built.</em>
            </Head>
          </div>
          <window.RoadmapLine steps={P.praviWay} accent="var(--pravi-orange)" lineColor="var(--rule)" direction="kinetic" />
        </div>
      </section>
    </div>
  );
}

/* ===================================================================
   PRAVI BLOGS
   =================================================================== */
function Resources() {
  const b0 = P.blogs[0], b1 = P.blogs[1], b2 = P.blogs[2], b3 = P.blogs[3], b4 = P.blogs[4], b5 = P.blogs[5];

  /* Set to true to show events in the grid */
  const SHOW_EVENTS = false;

  return (
    <section className="section motion-sec" id="resources">
      <Blob tone="blue" className="b-3" />
      <div className="container">
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 30, paddingBottom: 22, flexWrap: 'wrap', gap: 16 }}>
          <div className="reveal-l">
            <Head style={{ fontSize: 'clamp(40px, 5.2vw, 78px)', margin: '0', lineHeight: 1 }}>Ideas at <em className="italic" style={{ color: 'var(--pravi-orange)' }}>Pravi.</em></Head>
          </div>
          <a className="btn ghost" href="resources.html#blogs">All blogs <ChevronMark size={12} color="currentColor" /></a>
        </div>

        <div className="r-bento" style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gridAutoRows: 'minmax(150px, auto)', gap: 16 }}>

          {/* featured blog */}
          <a href={`essay.html#${b0.slug}`} className="res-card reveal motion-lift" style={{ gridColumn: 'span 4', gridRow: 'span 2', background: 'var(--paper)', border: '1px solid var(--rule)', overflow: 'hidden', display: 'flex', flexDirection: 'column', textDecoration: 'none', color: 'inherit', ['--d']: '0ms' }}
          >
            <div className="ph motion-par-img" style={{ aspectRatio: '16/8' }}>
              <img src={b0.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} onError={(e) => e.target.style.display = 'none'} />
            </div>
            <div style={{ padding: 28 }}>
              <div className="mono" style={{ fontSize: 11, color: 'var(--pravi-orange)', letterSpacing: '0.18em', textTransform: 'uppercase' }}>FEATURED · {b0.tag} · {b0.read}</div>
              <h3 style={{ fontFamily: 'DM Serif Display', fontSize: 34, fontWeight: 400, letterSpacing: '-0.015em', margin: '12px 0 10px', lineHeight: 1.05 }}>{b0.title}</h3>
              <p style={{ margin: 0, fontSize: 15.5, color: 'var(--ink-soft)', lineHeight: 1.6 }}>{b0.desc}</p>
              <div style={{ marginTop: 18, fontFamily: 'DM Mono', fontSize: 12, color: 'var(--pravi-blue)', letterSpacing: '0.14em', textTransform: 'uppercase', display: 'inline-flex', alignItems: 'center', gap: 8 }}>READ ARTICLE <ChevronMark size={12} color="var(--pravi-orange)" /></div>
            </div>
          </a>

          {/* blog 3 */}
          <a href={`essay.html#${b2.slug}`} className="res-card reveal motion-lift" style={{ gridColumn: 'span 2', background: 'var(--paper)', border: '1px solid var(--rule)', overflow: 'hidden', display: 'flex', flexDirection: 'column', textDecoration: 'none', color: 'inherit', ['--d']: '90ms' }}
          >
            <div style={{ aspectRatio: '16/9', overflow: 'hidden', flexShrink: 0 }}>
              <img src={b2.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} onError={(e) => e.target.style.display = 'none'} />
            </div>
            <div style={{ padding: 22, flex: 1, display: 'flex', flexDirection: 'column' }}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', color: 'var(--pravi-orange)', textTransform: 'uppercase' }}>BLOG · {b2.tag}</div>
              <h3 style={{ fontFamily: 'DM Serif Display', fontSize: 20, fontWeight: 400, letterSpacing: '-0.01em', margin: '10px 0 5px', lineHeight: 1.15 }}>{b2.title}</h3>
              <div style={{ marginTop: 'auto', paddingTop: 10, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ fontSize: 13, color: 'var(--ink-soft)' }}>{b2.read} read</span>
                <span style={{ fontFamily: 'DM Mono', fontSize: 11, color: 'var(--pravi-blue)', letterSpacing: '0.14em', textTransform: 'uppercase', display: 'inline-flex', alignItems: 'center', gap: 6 }}>READ ARTICLE <ChevronMark size={10} color="var(--pravi-orange)" /></span>
              </div>
            </div>
          </a>

          {/* blog 4 */}
          {b3 && <a href={`essay.html#${b3.slug}`} className="res-card reveal motion-lift" style={{ gridColumn: 'span 2', background: 'var(--paper)', border: '1px solid var(--rule)', overflow: 'hidden', display: 'flex', flexDirection: 'column', textDecoration: 'none', color: 'inherit', ['--d']: '180ms' }}
          >
            <div style={{ aspectRatio: '16/9', overflow: 'hidden', flexShrink: 0 }}>
              <img src={b3.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} onError={(e) => e.target.style.display = 'none'} />
            </div>
            <div style={{ padding: 22, flex: 1, display: 'flex', flexDirection: 'column' }}>
              <div className="mono" style={{ fontSize: 11, color: 'var(--pravi-orange)', letterSpacing: '0.18em', textTransform: 'uppercase' }}>BLOG · {b3.tag}</div>
              <h3 style={{ fontFamily: 'DM Serif Display', fontSize: 17, fontWeight: 400, margin: '10px 0 0', lineHeight: 1.25 }}>{b3.title}</h3>
              <div style={{ marginTop: 'auto', paddingTop: 10, fontFamily: 'DM Mono', fontSize: 11, color: 'var(--pravi-blue)', letterSpacing: '0.14em', textTransform: 'uppercase', display: 'inline-flex', alignItems: 'center', gap: 6 }}>READ ARTICLE <ChevronMark size={10} color="var(--pravi-orange)" /></div>
            </div>
          </a>}

          {/* blog 2 */}
          <a href={`essay.html#${b1.slug}`} className="res-card reveal motion-lift" style={{ gridColumn: 'span 2', background: 'var(--paper)', border: '1px solid var(--rule)', overflow: 'hidden', display: 'flex', flexDirection: 'column', textDecoration: 'none', color: 'inherit', ['--d']: '270ms' }}
          >
            <div style={{ aspectRatio: '16/9', overflow: 'hidden', flexShrink: 0 }}>
              <img src={b1.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} onError={(e) => e.target.style.display = 'none'} />
            </div>
            <div style={{ padding: 22, flex: 1, display: 'flex', flexDirection: 'column' }}>
              <div className="mono" style={{ fontSize: 10.5, color: 'var(--pravi-orange)', letterSpacing: '0.16em' }}>BLOG · {b1.tag}</div>
              <h3 style={{ fontFamily: 'DM Serif Display', fontSize: 21, fontWeight: 400, margin: '8px 0 6px', lineHeight: 1.2 }}>{b1.title}</h3>
              <p style={{ margin: 0, fontSize: 13.5, color: 'var(--ink-soft)', lineHeight: 1.55 }}>{b1.desc}</p>
              <div style={{ marginTop: 'auto', paddingTop: 12, fontFamily: 'DM Mono', fontSize: 11, color: 'var(--pravi-blue)', letterSpacing: '0.14em', textTransform: 'uppercase', display: 'inline-flex', alignItems: 'center', gap: 6 }}>READ ARTICLE <ChevronMark size={10} color="var(--pravi-orange)" /></div>
            </div>
          </a>

          {/* blog 5 */}
          {b4 && <a href={`essay.html#${b4.slug}`} className="res-card reveal motion-lift" style={{ gridColumn: 'span 2', background: 'var(--paper)', border: '1px solid var(--rule)', overflow: 'hidden', display: 'flex', flexDirection: 'column', textDecoration: 'none', color: 'inherit', ['--d']: '360ms' }}
          >
            <div style={{ aspectRatio: '16/9', overflow: 'hidden', flexShrink: 0 }}>
              <img src={b4.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} onError={(e) => e.target.style.display = 'none'} />
            </div>
            <div style={{ padding: 22, flex: 1, display: 'flex', flexDirection: 'column' }}>
              <div className="mono" style={{ fontSize: 11, color: 'var(--pravi-orange)', letterSpacing: '0.18em' }}>BLOG · {b4.tag}</div>
              <h3 style={{ fontFamily: 'DM Serif Display', fontSize: 19, fontWeight: 400, margin: '10px 0 5px', lineHeight: 1.2 }}>{b4.title}</h3>
              <div style={{ marginTop: 'auto', paddingTop: 10, fontFamily: 'DM Mono', fontSize: 11, color: 'var(--pravi-blue)', letterSpacing: '0.14em', textTransform: 'uppercase', display: 'inline-flex', alignItems: 'center', gap: 6 }}>READ ARTICLE <ChevronMark size={10} color="var(--pravi-orange)" /></div>
            </div>
          </a>}

          {/* blog 6 */}
          {b5 && <a href={`essay.html#${b5.slug}`} className="res-card reveal motion-lift" style={{ gridColumn: 'span 2', background: 'var(--paper)', border: '1px solid var(--rule)', overflow: 'hidden', display: 'flex', flexDirection: 'column', textDecoration: 'none', color: 'inherit', ['--d']: '450ms' }}
          >
            <div style={{ aspectRatio: '16/9', overflow: 'hidden', flexShrink: 0 }}>
              <img src={b5.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} onError={(e) => e.target.style.display = 'none'} />
            </div>
            <div style={{ padding: 22, flex: 1, display: 'flex', flexDirection: 'column' }}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--pravi-orange)' }}>BLOG · {b5.tag}</div>
              <h3 style={{ fontFamily: 'DM Serif Display', fontSize: 19, fontWeight: 400, margin: '10px 0 0', lineHeight: 1.25 }}>{b5.title}</h3>
              <div style={{ marginTop: 'auto', paddingTop: 14, fontFamily: 'DM Mono', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', display: 'flex', alignItems: 'center', gap: 8, color: 'var(--pravi-blue)' }}>READ ARTICLE <ChevronMark size={12} color="var(--pravi-orange)" /></div>
            </div>
          </a>}

          {/* Events — hidden, set SHOW_EVENTS = true to restore */}
          {SHOW_EVENTS && (
            <>
              <a href="resources.html" className="res-card reveal" style={{ gridColumn: 'span 2', background: 'var(--pravi-blue)', color: 'var(--paper)', overflow: 'hidden', display: 'flex', flexDirection: 'column', textDecoration: 'none' }}>
                <div style={{ aspectRatio: '16/9', overflow: 'hidden', flexShrink: 0 }}>
                  <img src={P.events[0].img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} onError={(e) => e.target.style.display = 'none'} />
                </div>
                <div style={{ padding: 22, flex: 1 }}>
                  <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', color: 'var(--pravi-orange-soft)', textTransform: 'uppercase' }}>EVENT · {P.events[0].date.split(' · ')[0]}</div>
                  <h3 style={{ fontFamily: 'DM Serif Display', fontSize: 20, fontWeight: 400, margin: '10px 0 5px', lineHeight: 1.15 }}>{P.events[0].title}</h3>
                  <div style={{ fontSize: 13, opacity: 0.85 }}>{P.events[0].place}</div>
                </div>
              </a>
              <a href="resources.html" className="res-card reveal" style={{ gridColumn: 'span 2', background: 'var(--paper)', border: '1px solid var(--rule)', overflow: 'hidden', display: 'flex', flexDirection: 'column', textDecoration: 'none', color: 'inherit' }}>
                <div style={{ aspectRatio: '16/9', overflow: 'hidden', flexShrink: 0 }}>
                  <img src={P.events[1].img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} onError={(e) => e.target.style.display = 'none'} />
                </div>
                <div style={{ padding: 22, flex: 1 }}>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--pravi-orange)', letterSpacing: '0.18em' }}>EVENT · {P.events[1].date.split(' · ')[0]}</div>
                  <h3 style={{ fontFamily: 'DM Serif Display', fontSize: 19, fontWeight: 400, margin: '10px 0 5px', lineHeight: 1.2 }}>{P.events[1].title}</h3>
                  <div style={{ fontSize: 12.5, color: 'var(--ink-soft)' }}>{P.events[1].place}</div>
                </div>
              </a>
            </>
          )}

        </div>

        {/* ── LinkedIn Posts sub-section ── */}
        <div style={{ marginTop: 64, paddingTop: 44 }}>
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 30, flexWrap: 'wrap', gap: 16 }}>
            <div className="reveal-l">
              <Head tag="h3" style={{ fontFamily: 'DM Serif Display', fontWeight: 400, fontSize: 'clamp(28px, 3.8vw, 54px)', margin: '0', lineHeight: 1 }}>#Follow<em style={{ fontStyle: 'italic', color: 'var(--pravi-blue)' }}>Us.</em></Head>
            </div>
            <a className="btn ghost" href="https://www.linkedin.com/company/pravi-research" target="_blank" rel="noopener noreferrer">Follow us <ChevronMark size={12} color="currentColor" /></a>
          </div>
          {/* 2×2 equal grid */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gridTemplateRows: 'repeat(2, 480px)', gap: 22 }}>

            {[
              { url: '7458153193127108609', title: 'Pravi LinkedIn post 1', d: '0ms' },
              { url: '7469746039751696384', title: 'Pravi LinkedIn post 2', d: '110ms' },
              { url: '7454801646989066240', title: 'Pravi LinkedIn post 3', d: '220ms' },
              { url: '7468962831292518400', title: 'Pravi LinkedIn post 4', d: '330ms' },
            ].map(p => (
              <div key={p.url} className="reveal" style={{ position: 'relative', overflow: 'hidden', borderRadius: 10, border: '1px solid var(--rule-soft)', boxShadow: '0 14px 40px -18px rgba(11,20,48,.18)', background: '#fff', ['--d']: p.d }}>
                <iframe src={`https://www.linkedin.com/embed/feed/update/urn:li:activity:${p.url}?collapsed=1`} height="480" style={{ width: '100%', display: 'block', border: 'none' }} frameBorder="0" allowFullScreen={true} title={p.title} />
                <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 90, background: 'linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 55%)', display: 'flex', alignItems: 'flex-end', justifyContent: 'center', paddingBottom: 16, pointerEvents: 'none' }}>
                  <a href={`https://www.linkedin.com/feed/update/urn:li:activity:${p.url}/`} target="_blank" rel="noopener noreferrer"
                    style={{ pointerEvents: 'all', display: 'inline-flex', alignItems: 'center', gap: 7, fontFamily: 'DM Sans', fontSize: 13, fontWeight: 600, color: 'var(--pravi-blue)', background: '#fff', border: '1px solid var(--rule)', padding: '9px 20px', transition: 'background .2s, color .2s, border-color .2s' }}
                    onMouseEnter={e => { e.currentTarget.style.background = 'var(--pravi-blue)'; e.currentTarget.style.color = '#fff'; e.currentTarget.style.borderColor = 'var(--pravi-blue)'; }}
                    onMouseLeave={e => { e.currentTarget.style.background = '#fff'; e.currentTarget.style.color = 'var(--pravi-blue)'; e.currentTarget.style.borderColor = 'var(--rule)'; }}>
                    View on LinkedIn <ChevronMark size={11} color="currentColor" />
                  </a>
                </div>
              </div>
            ))}

          </div>
        </div>

      </div>
    </section>
  );
}

/* ===================================================================
   WHAT WE DO — three studios (kept on Home)
   =================================================================== */
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="orange" 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, 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: 'Cormorant Garamond', fontWeight: 600, fontSize: 90, color: p.wm, lineHeight: 1, pointerEvents: 'none' }}>{p.rom}</div> */}
              <div style={{ fontFamily: 'Cormorant Garamond', 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>
  );
}

/* ===================================================================
   ASSEMBLE
   =================================================================== */
function Home() {
  const stageRef = useRef(null);
  useReveal(stageRef);
  useScrollFX(stageRef);
  return (
    <div className="dir-editorial motion-stage" ref={stageRef}>
      <ProgressBar />
      <div className="page">
        <HomeNav active="Home" />
        <Hero />
        <WhoWeAre />
        <VisionMission />
        <ThreeStudios />
        <FourPracticeAreas />
        {/* <Affiliated /> */}
        <PraviWay />
        {/* <Resources /> */}
        <CtaBand />
        <HomeFooter />
      </div>
    </div>
  );
}

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