/* ============================================================
   PRAVI — SERVICES PAGE
   Broadsheet-rooted but customized: no eyebrow labels, no
   masthead chrome, no em-dashes. The Core Practices read as
   full editorial spreads; sectors use a distinct hover ledger.
   ============================================================ */

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 useReveal = window.praviUseReveal;
const useScrollFX = window.praviUseScrollFX;
const useHashScroll = window.praviUseHashScroll;
const Head = window.PraviHead;
const ProgressBar = window.PraviProgressBar;
const Blob = window.PraviBlob;
const CAT_FILE = window.PRAVI_CAT_FILE;

const CAT_COVERS = {
  'strategy-advisory': "assets/s-and-c.webp",
  'execution-delivery': "assets/LAP2.webp",
  'insight-intelligence': P.ServiceCategoryIMG[2],
  'digital-systems': "assets/DT.webp",
};

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>
  );
}

/* ===================================================================
   THE CORE PRACTICES — each practice as a full editorial spread.
   Image + descriptor + the services it holds (names only) + a link
   into its own detail page.
   =================================================================== */
function CorePractices() {
  return (
    <section id="practices" className="motion-sec" style={{ padding: "96px 0 60px" }}>
      <Blob tone="blue" className="b-3" />
      <div className="container" style={{ padding: "0 4vw" }}>
        <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(46px, 6vw, 96px)', margin: '20px 0 0', lineHeight: 1 }}>
              The <em className="italic" style={{ color: 'var(--pravi-orange)' }}>core</em> <i style={{ fontStyle: 'italic', color: 'var(--pravi-blue)' }}>practices.</i>
            </Head>
            {/* <p style={{ marginTop: 16, fontSize: 17, color: 'var(--ink-soft)', lineHeight: 1.55, maxWidth: 660 }}>
              Four practice areas, sixteen services. Each practice opens into its own page, with the skills it covers and the case studies behind them.
            </p> */}
          </div>
          {/* <div style={{ fontFamily: 'DM Serif Display', fontWeight: 400, color: 'var(--pravi-blue)', textAlign: 'right', lineHeight: 1 }}>
            <span style={{ fontFamily: 'DM Serif Display', fontWeight: 600, fontSize: 56, color: 'var(--pravi-orange)' }}>4</span>
            <span style={{ fontSize: 18 }}> practices</span><br/>
            <span style={{ fontFamily: 'DM Serif Display', fontWeight: 600, fontSize: 56 }}>16</span>
            <span style={{ fontSize: 18 }}> services</span>
          </div> */}
        </div>
      </div>

      <div style={{ padding: "0 4vw" }}>
        {P.serviceCategories.map((cat, i) => {
          const services = P.services.filter(s => s.category === cat.slug);
          const imageRight = i % 2 === 1;
          const cover = CAT_COVERS[cat.slug];
          return (
            <article key={cat.slug} id={cat.slug} className="reveal r-practice" style={{
              display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0,
              border: '1px solid var(--ink)', borderTop: i === 0 ? '1px solid var(--ink)' : 'none',
              marginTop: i === 0 ? 36 : 0, alignItems: 'stretch', ['--d']: (i * 120) + 'ms',
            }}>
              {/* IMAGE PANEL */}
              <div className="motion-par-img" style={{
                order: imageRight ? 2 : 1, position: 'relative', overflow: 'hidden',
                minHeight: 470, background: 'var(--paper-deep)',
                borderRight: imageRight ? 'none' : '1px solid var(--rule)',
                borderLeft: imageRight ? '1px solid var(--rule)' : 'none',
              }}>
                <img src={cover} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} onError={e => e.target.style.display = 'none'} />
                <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(11,20,48,0) 55%, rgba(11,20,48,.45))' }} />
                {/* <div style={{ position: 'absolute', top: 22, left: 22 }}>
                  <span style={{ background: 'var(--paper)', color: 'var(--ink)', fontFamily: 'DM Sans', fontWeight: 600, fontSize: 13, padding: '7px 14px' }}>{services.length} services</span>
                </div> */}
                {/* <div aria-hidden="true" style={{ position: 'absolute', right: -30, top: -30, opacity: 0.9 }}>
                  <svg width="140" height="140" 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)" opacity="0.85" /></svg>
                </div> */}
              </div>

              {/* CONTENT PANEL */}
              <div style={{ order: imageRight ? 1 : 2, padding: '46px 46px 40px', display: 'flex', flexDirection: 'column', background: i % 2 === 0 ? 'var(--paper)' : 'var(--paper-deep)' }}>
                <h3 style={{ fontFamily: 'DM Serif Display', fontWeight: 400, fontSize: 'clamp(34px, 3.4vw, 52px)', letterSpacing: '-0.02em', margin: 0, lineHeight: 1 }}>{cat.title}</h3>
                <p style={{ fontFamily: 'DM Serif Display', fontWeight: 600, fontSize: 'clamp(19px, 1.6vw, 25px)', color: 'var(--pravi-orange)', margin: '12px 0 14px', lineHeight: 1.25 }}>{cat.tagline}</p>
                <p style={{ margin: 0, fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.6 }}>{cat.blurb}</p>

                <div style={{ marginTop: 26, paddingTop: 18, borderTop: '1px solid var(--rule)' }}>
                  <div className="r-2col-sm" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '0 24px' }}>
                    {services.map((s) => (
                      <a key={s.slug} href={`${CAT_FILE[cat.slug]}#${s.slug}`} style={{
                        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                        padding: '12px 0', borderBottom: '1px solid var(--rule)',
                        fontFamily: 'DM Sans', fontSize: 15.5, fontWeight: 500, color: 'var(--ink)',
                        textDecoration: 'none', transition: 'color .15s, padding-left .15s',
                      }}
                        onMouseEnter={e => { e.currentTarget.style.color = 'var(--pravi-blue)'; e.currentTarget.style.paddingLeft = '6px'; }}
                        onMouseLeave={e => { e.currentTarget.style.color = 'var(--ink)'; e.currentTarget.style.paddingLeft = '0'; }}>
                        <span>{s.title}</span>
                        <ChevronMark size={11} color="var(--pravi-orange)" />
                      </a>
                    ))}
                  </div>
                </div>

                <a href={`${CAT_FILE[cat.slug]}#top`} className="btn" style={{ marginTop: 30, alignSelf: 'flex-start' }}>
                  Explore {cat.title} <ChevronMark size={12} color="var(--paper)" />
                </a>
              </div>
            </article>
          );
        })}
      </div>
    </section>
  );
}

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

  return (
    <div className="dir-editorial motion-stage" ref={stageRef} data-loader-word="Pravi" data-loader-em="Consulting">
      <ProgressBar />
      <div className="page">
        <HomeNav active="Pravi Consulting" />
        <PageHero
          headline={<>What we <em>do,</em><br />and how we <i>deliver.</i></>}
          lead="Comprehensive consulting at the intersection of governance, policy, and technology, organised into four core practices and delivered across business, government, and the development sector."
          buttons={<>
            <a className="btn" href="#practices">Explore practices <ChevronMark size={12} color="currentColor" /></a>
            <a className="btn ghost" href="contact.html#form">Contact Us</a>
          </>}
        />
        <CorePractices />
        <CtaBand />
        <HomeFooter />
      </div>
    </div>
  );
}

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