/* ============================================================
   PRAVI — RESOURCES PAGE  (Essays · Events · Feed, each Load more)
   ============================================================ */

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;

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

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, blue, note }) {
  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>{blue && <> <i style={{ fontStyle: 'italic', color: 'var(--pravi-blue)' }}>{blue}</i></>}
        </Head>
      </div>
      {note && <p style={{ fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.55, maxWidth: 340 }}>{note}</p>}
    </div>
  );
}

/* ---------- Essays ---------- */
function Essays() {
  const [n, setN] = useState(3);
  const shown = P.blogs.slice(0, n);
  return (
    <section className="section motion-sec" id="blogs" style={{ borderBottom: '1px solid var(--rule)' }}>
      <Blob tone="blue" className="b-3" />
      <div className="container">
        <SectionHead title="The Pravi" accent="blogs." />
        <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>
        <div style={{ marginTop: 34, display: 'flex', justifyContent: 'center', gap: 14 }}>
          {n < P.blogs.length && <button onClick={() => setN(P.blogs.length)} className="btn ghost">Load more blogs <ChevronMark size={12} color="currentColor" /></button>}
          {n >= P.blogs.length && n > 3 && <button onClick={() => setN(3)} className="btn ghost">See less <ChevronMark size={12} color="currentColor" /></button>}
        </div>
      </div>
    </section>
  );
}

/* ---------- Events ---------- */
function Events() {
  const [n, setN] = useState(2);
  const shown = P.events.slice(0, n);
  return (
    <section className="section motion-sec" id="events" style={{ borderBottom: '1px solid var(--rule)' }}>
      <Blob tone="orange" className="b-4" />
      <div className="container">
        <SectionHead title="Where we've" accent="convened." />
        <div style={{ display: 'grid', gap: 0, border: '1px solid var(--ink)' }}>
          {shown.map((e, i) => (
            <div key={i} className="reveal r-event-row" style={{ display: 'grid', gridTemplateColumns: '320px 1fr auto', gap: 30, alignItems: 'center', padding: '24px 28px', borderBottom: i < shown.length - 1 ? '1px solid var(--rule)' : 'none', background: i % 2 ? 'var(--paper-deep)' : 'var(--paper)', ['--d']: (i * 90) + 'ms' }}>
              <div className="r-event-media motion-par-img" style={{ aspectRatio: '16/9', overflow: 'hidden', border: '1px solid var(--rule)', background: 'var(--paper-deep)' }}>
                <img src={e.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} onError={ev => ev.target.style.display = 'none'} />
              </div>
              <div>
                <div style={{ fontFamily: 'DM Mono', fontSize: 11.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--pravi-orange)' }}>{e.date}</div>
                <h3 style={{ fontFamily: 'DM Serif Display', fontWeight: 400, fontSize: 'clamp(22px, 2.2vw, 32px)', letterSpacing: '-0.015em', margin: '8px 0 8px', lineHeight: 1.08 }}>{e.title}</h3>
                <p style={{ margin: 0, fontSize: 15, color: 'var(--ink-soft)', lineHeight: 1.55, maxWidth: 640 }}>{e.desc}</p>
              </div>
              <div className="r-event-aside" style={{ textAlign: 'right', minWidth: 150 }}>
                <div style={{ fontFamily: 'DM Serif Display', fontWeight: 600, fontSize: 20, color: 'var(--pravi-blue)' }}>{e.place}</div>
                <div style={{ marginTop: 10, fontFamily: 'DM Mono', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--pravi-orange)', display: 'inline-flex', alignItems: 'center', gap: 7 }}>Details <ChevronMark size={11} color="var(--pravi-orange)" /></div>
              </div>
            </div>
          ))}
        </div>
        {n < P.events.length && <LoadMore label="Load more events" onClick={() => setN(P.events.length)} />}
      </div>
    </section>
  );
}

/* ---------- Feed (LinkedIn) ---------- */
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' },
  { embedUrl: 'https://www.linkedin.com/embed/feed/update/urn:li:activity:7331386972109733888?collapsed=1' },
  { embedUrl: 'https://www.linkedin.com/embed/feed/update/urn:li:activity:7329461069049929729?collapsed=1' },
];

function Feed() {
  const [showAll, setShowAll] = useState(false);
  return (
    <section className="section motion-sec" id="feed" style={{ borderBottom: '1px solid var(--rule)' }}>
      <Blob tone="blue" className="b-3" />
      <div className="container">
        <SectionHead title="From our" accent="feed." />
        <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)', display: (!showAll && i >= 3) ? 'none' : 'block', ['--d']: ((i % 3) * 90) + 'ms' }}>
              <iframe
                src={post.embedUrl}
                height="550"
                style={{ width: '100%', display: 'block', border: 'none' }}
                frameBorder="0"
                allowFullScreen={true}
                title={`Pravi LinkedIn post ${i + 1}`}
              />
            </div>
          ))}
        </div>
        <div style={{ marginTop: 34, display: 'flex', justifyContent: 'center', gap: 14 }}>
          {!showAll && <button onClick={() => setShowAll(true)} className="btn ghost">Load more posts <ChevronMark size={12} color="currentColor" /></button>}
          {showAll && <button onClick={() => setShowAll(false)} className="btn ghost">See less <ChevronMark size={12} color="currentColor" /></button>}
        </div>
      </div>
    </section>
  );
}

function Resources() {
  const stageRef = useRef(null);
  useReveal(stageRef);
  useScrollFX(stageRef);
  useHashScroll();
  return (
    <div className="dir-editorial motion-stage" ref={stageRef}>
      <ProgressBar />
      <div className="page">
        <HomeNav active="Resources" />
        <PageHero
          headline={<>Ideas, out in<br/>the <em>open.</em></>}
          lead="The essays we write, the rooms we convene, and the threads we share. A running record of how Pravi thinks about governance, policy, and technology."
          buttons={<>
            <a className="btn" href="#blogs">Read the blogs <ChevronMark size={12} color="currentColor" /></a>
            {/* <a className="btn ghost" href="#events">See events</a> */}
          </>}
        />
        <Essays />
        {/* <Events /> */}
        <Feed />
        <CtaBand />
        <HomeFooter />
      </div>
    </div>
  );
}

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