/* ============================================================
   PRAVI — CAREERS PAGE
   ============================================================ */

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

const LIFE = [
  { t: "Work that matters", d: "We operate at the forefront of governance, policy, and technology, solving real challenges in health, urban development, and the public stack." },
  { t: "Fast-paced, high-impact", d: "We move with urgency. Whether designing data-driven governance solutions or supporting policymakers, we operate at the highest level of intensity." },
  { t: "Learn and grow every day", d: "You'll work alongside sharp minds, ex-LAMP fellows, IIM grads, public policy experts, and technologists, on problems that demand creative solutions." },
  { t: "A community of doers", d: "We're young, ambitious, fearless. This is not a place for endless hierarchy. It's a place where ideas turn into action." },
];

/* ===================================================================
   WHAT IT'S ACTUALLY LIKE — Field Note section, editorial type,
   no background lines.
   =================================================================== */
function WhatItsLike() {
  const imgs = ["assets/What_its_like1.webp", "assets/DSC00274.webp"];
  return (
    <section className="section motion-sec" id="life" style={{ borderBottom: '1px solid var(--rule)', padding: '52px 4vw' }}>
      <Blob tone="blue" className="b-3" />
      <div className="container">
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 26, flexWrap: 'wrap', gap: 12 }}>
          <div className="reveal-l">
            <Mark />
            <Head style={{ fontSize: 'clamp(36px, 4.2vw, 68px)', margin: '14px 0 0', lineHeight: 1 }}>
              What it's <em className="italic" style={{ color: 'var(--pravi-orange)' }}>actually</em> <i style={{ fontStyle: 'italic', color: 'var(--pravi-blue)' }}>like.</i>
            </Head>
          </div>
        </div>

        <div className="r-stack-md" style={{ display: 'grid', gridTemplateColumns: '1.1fr 1.4fr', gap: 40, alignItems: 'stretch' }}>
          <div className="reveal-l" style={{ display: 'grid', gridTemplateColumns: '1fr', gridTemplateRows: '1fr 1fr', gap: 12, height: '100%' }}>
            {imgs.map((src, i) => (
              <div key={i} className="motion-par-img" style={{ border: '1px solid var(--rule)', overflow: 'hidden', background: 'var(--paper-deep)' }}>
                <img src={src} alt="" style={{ width: '100%', height: '100%', objectFit: i === 1 ? 'contain' : 'cover', objectPosition: 'center', display: 'block' }} onError={e => e.target.style.display = 'none'} />
              </div>
            ))}
          </div>

          <div className="reveal-r" style={{ border: '1px solid var(--ink)', display: 'flex', flexDirection: 'column' }}>
            {LIFE.map((it, i) => (
              <div key={i} style={{ flex: 1, display: 'grid', gridTemplateColumns: '64px 1fr', gap: 16, alignItems: 'center', padding: '18px 24px', borderBottom: i < LIFE.length - 1 ? '1px solid var(--rule)' : 'none', background: i % 2 ? 'var(--paper-deep)' : 'var(--paper)' }}>
                <div style={{ fontFamily: 'DM Serif Display', fontWeight: 600, fontSize: 44, color: 'var(--pravi-orange)', lineHeight: 0.8 }}>0{i + 1}</div>
                <div>
                  <h3 style={{ fontFamily: 'DM Serif Display', fontWeight: 400, fontSize: 'clamp(17px, 1.7vw, 24px)', letterSpacing: '-0.015em', margin: 0, lineHeight: 1.05, color: 'var(--pravi-blue)' }}>{it.t}</h3>
                  <p style={{ margin: '6px 0 0', fontSize: 14, lineHeight: 1.5, color: 'var(--ink-soft)' }}>{it.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===================================================================
   FELLOWSHIP
   =================================================================== */
function Fellowship() {
  const perks = [
    ["Hands-on experience", "Live projects with real stakeholders, and you see your solutions implemented."],
    ["Mentorship", "Direct guidance from senior policy and governance practitioners."],
    ["Skill development", "Policy analysis, data-driven decision-making, and technology in practice."],
  ];
  return (
    <section className="section motion-sec" id="fellowship" style={{ borderBottom: '1px solid var(--rule)' }}>
      <Blob tone="orange" className="b-4" />
      <div className="container">
        <div className="r-stack-md r-bordered r-fellow" style={{ display: 'grid', gridTemplateColumns: '1fr 1.35fr', gap: 0, border: '1px solid var(--ink)', background: 'var(--paper)' }}>
          <div className="reveal-l" style={{ position: 'relative', overflow: 'hidden', minHeight: 520, background: 'var(--paper-deep)', borderRight: '1px solid var(--rule)' }}>
            <img src="assets/pravi-good-governance-fellow.svg" alt="Pravi Fellowship for Good Governance" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} onError={e => e.target.style.display = 'none'} />
          </div>
          <div className="reveal-r" style={{ padding: '52px 50px' }}>
            <Mark />
            <Head style={{ fontSize: 'clamp(34px, 4.2vw, 60px)', margin: '20px 0 16px', lineHeight: 1.02 }}>
              The Pravi Good Governance <em className="italic" style={{ color: 'var(--pravi-orange)' }}>Fellowship.</em>
            </Head>
            <p style={{ fontFamily: 'DM Serif Display', fontStyle: 'italic', fontSize: 'clamp(19px, 1.7vw, 23px)', lineHeight: 1.45, color: 'var(--ink)', margin: 0, maxWidth: 560 }}>
              A one-year immersive program for exceptional young professionals passionate about improving governance in India. Fellows work on live projects with real stakeholders, and see their solutions reach the ground.
            </p>
            <div style={{ marginTop: 28, paddingTop: 8 }}>
              {perks.map(([t, d], i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '40px 1fr', gap: 14, padding: '16px 0', borderTop: '1px dashed var(--rule)', alignItems: 'start' }}>
                  <div style={{ width: 34, height: 34, border: '1px solid var(--pravi-orange)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <ChevronMark size={14} color="var(--pravi-orange)" />
                  </div>
                  <div>
                    <div style={{ fontFamily: 'DM Serif Display', fontWeight: 400, fontSize: 21, color: 'var(--pravi-blue)', lineHeight: 1.1 }}>{t}</div>
                    <div style={{ fontSize: 15, color: 'var(--ink-soft)', lineHeight: 1.55, marginTop: 4 }}>{d}</div>
                  </div>
                </div>
              ))}
            </div>
            <a className="btn orange" href="https://forms.gle/KWLoXuzLT3AQ5sDq5" target="_blank" rel="noopener noreferrer" style={{ marginTop: 28 }}>
              Apply to the Fellowship <ChevronMark size={12} color="var(--paper)" />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===================================================================
   BUILD FOR BILLION FELLOWSHIP — the Pravi Labs deep-tech track.
   Designed gradient/SVG panel (no photo) to mirror the fellowship above.
   =================================================================== */
function BuildForBillionFellowship() {
  const perks = [
    ["Build at scale", "Ship products and platforms that reach millions of citizens across Bharat."],
    ["Domain mentorship", "Work shoulder-to-shoulder with senior builders and domain experts."],
    ["Deep-tech craft", "Full-stack AI, product thinking, and systems design—applied in practice."],
  ];
  return (
    <section className="section motion-sec" id="build-for-billion" style={{ borderBottom: '1px solid var(--rule)' }}>
      <Blob tone="blue" className="b-3" />
      <div className="container">
        <div className="r-stack-md r-bordered r-fellow" style={{ display: 'grid', gridTemplateColumns: '1fr 1.35fr', gap: 0, border: '1px solid var(--ink)', background: 'var(--paper)' }}>
          {/* DESIGN PANEL — left (mirrors the Good Governance image slot) */}
          <div className="reveal-l" style={{ position: 'relative', overflow: 'hidden', minHeight: 520, borderRight: '1px solid var(--rule)', background: 'radial-gradient(120% 90% at 75% 15%, #2a5bd0 0%, #14306f 48%, #0b1430 100%)' }}>
            <svg viewBox="0 0 400 520" preserveAspectRatio="xMidYMid slice" aria-hidden="true" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
              <defs>
                <pattern id="bfbGrid" width="40" height="40" patternUnits="userSpaceOnUse">
                  <path d="M40 0H0V40" fill="none" stroke="#4274d4" strokeOpacity="0.16" strokeWidth="1" />
                </pattern>
              </defs>
              <rect width="400" height="520" fill="url(#bfbGrid)" />
              {/* circuit traces */}
              <g fill="none" stroke="#6c9bea" strokeOpacity="0.45" strokeWidth="1.6">
                <path d="M40 120 H180 V210 H300" />
                <path d="M40 360 H140 V270 H260 V340 H360" />
                <path d="M120 480 V300 H210" />
              </g>
              {/* glowing nodes */}
              <g>
                <circle cx="180" cy="210" r="5" fill="#ea7521" />
                <circle cx="300" cy="210" r="6" fill="#f7a767" />
                <circle cx="260" cy="340" r="5" fill="#ea7521" />
                <circle cx="210" cy="300" r="6" fill="#8fb4f2" />
                <circle cx="140" cy="270" r="4" fill="#8fb4f2" />
              </g>
              {/* ascending bars */}
              <g>
                <rect x="60" y="430" width="26" height="50" fill="#4274d4" opacity="0.55" />
                <rect x="96" y="400" width="26" height="80" fill="#4274d4" opacity="0.7" />
                <rect x="132" y="360" width="26" height="120" fill="#ea7521" opacity="0.75" />
              </g>
            </svg>
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(11,20,48,0) 50%, rgba(11,20,48,.5))' }} />
            <div style={{ position: 'absolute', left: 26, bottom: 24, color: 'var(--paper)' }}>
              <div style={{ fontFamily: 'DM Serif Display', fontWeight: 600, fontSize: 'clamp(40px, 5vw, 64px)', lineHeight: 0.9 }}>One billion.</div>
              <div style={{ fontFamily: 'DM Sans', fontSize: 14, fontWeight: 500, marginTop: 6, opacity: 0.9 }}>Building at population scale.</div>
            </div>
          </div>
          {/* TEXT — right (same structure as Good Governance) */}
          <div className="reveal-r" style={{ padding: '52px 50px' }}>
            <Mark />
            <Head style={{ fontSize: 'clamp(34px, 4.2vw, 60px)', margin: '20px 0 16px', lineHeight: 1.02 }}>
              Build for Billion<br /><em className="italic" style={{ color: 'var(--pravi-blue)' }}>Tech </em><em className="italic" style={{ color: 'var(--pravi-orange)' }}>Fellowship.</em>
            </Head>
            <p style={{ fontFamily: 'DM Serif Display', fontStyle: 'italic', fontSize: 'clamp(19px, 1.7vw, 23px)', lineHeight: 1.45, color: 'var(--ink)', margin: 0, maxWidth: 560 }}>
              A hands-on track for builders, engineers, and product minds who want to ship technology at population scale. Fellows embed with Pravi Labs, turning hard, confidential, real-world problems into systems that reach millions across Bharat.
            </p>
            <div style={{ marginTop: 28, paddingTop: 8 }}>
              {perks.map(([t, d], i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '40px 1fr', gap: 14, padding: '16px 0', borderTop: '1px dashed var(--rule)', alignItems: 'start' }}>
                  <div style={{ width: 34, height: 34, border: '1px solid var(--pravi-orange)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <ChevronMark size={14} color="var(--pravi-orange)" />
                  </div>
                  <div>
                    <div style={{ fontFamily: 'DM Serif Display', fontWeight: 400, fontSize: 21, color: 'var(--pravi-blue)', lineHeight: 1.1 }}>{t}</div>
                    <div style={{ fontSize: 15, color: 'var(--ink-soft)', lineHeight: 1.55, marginTop: 4 }}>{d}</div>
                  </div>
                </div>
              ))}
            </div>
            <a className="btn orange" href="https://forms.gle/KWLoXuzLT3AQ5sDq5" target="_blank" rel="noopener noreferrer" style={{ marginTop: 28 }}>
              Apply to the Fellowship <ChevronMark size={12} color="var(--paper)" />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===================================================================
   ROLES WE'RE HIRING — each links to the application form
   =================================================================== */
function Roles() {
  return (
    <section className="section motion-sec" id="roles" 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: 34, flexWrap: 'wrap', gap: 16 }}>
          <div className="reveal-l">
            <Mark />
            <Head style={{ fontSize: 'clamp(44px, 5.4vw, 84px)', margin: '20px 0 0', lineHeight: 1 }}>
              Roles we're <em className="italic" style={{ color: 'var(--pravi-orange)' }}>hiring.</em>
            </Head>
            {/* <p style={{ marginTop: 14, fontSize: 17, color: 'var(--ink-soft)', lineHeight: 1.55 }}>Click any role to open its application form.</p> */}
          </div>
          {/* <div style={{ fontFamily: 'DM Serif Display', fontWeight: 600, fontSize: 'clamp(40px,4vw,60px)', color: 'var(--pravi-blue)' }}>
            {P.jobs.length}<span style={{ fontFamily: 'DM Sans', fontSize: 15, color: 'var(--ink-soft)', marginLeft: 8 }}>open positions</span>
          </div> */}
        </div>

        <div style={{ border: '1px solid var(--ink)' }}>
          {P.jobs.map((j, i) => {
            const slug = j.title.toLowerCase().replace(/\s+/g, '-');
            return (
              <a key={i} href={`apply.html?role=${slug}`} className="reveal r-role-row" style={{
                display: 'grid', gridTemplateColumns: '70px 2.2fr 1fr 1fr 1.2fr 110px', gap: 18, alignItems: 'center', ['--d']: (i * 70) + 'ms',
                padding: '26px 30px', borderBottom: i < P.jobs.length - 1 ? '1px solid var(--rule)' : 'none',
                textDecoration: 'none', color: 'var(--ink)', background: i % 2 ? 'var(--paper-deep)' : 'var(--paper)',
                transition: 'background .18s, padding .18s',
              }}
                onMouseEnter={e => { e.currentTarget.style.background = 'var(--pravi-blue)'; e.currentTarget.style.color = 'var(--paper)'; e.currentTarget.style.paddingLeft = '40px'; }}
                onMouseLeave={e => { e.currentTarget.style.background = i % 2 ? 'var(--paper-deep)' : 'var(--paper)'; e.currentTarget.style.color = 'var(--ink)'; e.currentTarget.style.paddingLeft = '30px'; }}>
                <div className="r-role-no" style={{ fontFamily: 'DM Serif Display', fontWeight: 600, fontSize: 40, color: 'var(--pravi-orange)', lineHeight: 0.8 }}>0{i + 1}</div>
                <h3 style={{ fontFamily: 'DM Serif Display', fontWeight: 400, fontSize: 'clamp(22px, 2.2vw, 32px)', letterSpacing: '-0.015em', margin: 0, lineHeight: 1 }}>{j.title}</h3>
                <div className="r-role-hide" style={{ fontFamily: 'DM Sans', fontSize: 13.5, fontWeight: 500, opacity: 0.85 }}>{j.dept}</div>
                <div className="r-role-hide" style={{ fontFamily: 'DM Sans', fontSize: 13.5, fontWeight: 500, opacity: 0.85 }}>{j.exp}</div>
                <div className="r-role-hide" style={{ fontFamily: 'DM Sans', fontSize: 13.5, fontWeight: 500, opacity: 0.85 }}>{j.location}</div>
                <div style={{ textAlign: 'right', display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 8, fontFamily: 'DM Mono', fontSize: 11.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--pravi-orange)' }}>
                  Apply <ChevronMark size={12} color="var(--pravi-orange)" />
                </div>
              </a>
            );
          })}
        </div>

        <p style={{ marginTop: 28, fontFamily: 'DM Serif Display', fontWeight: 600, fontSize: 24, color: 'var(--ink-soft)', textAlign: 'center' }}>
          Don't see a fit? <a href="contact.html#form" style={{ color: 'var(--pravi-orange)', borderBottom: '1px solid var(--pravi-orange)' }}>Tell us anyway.</a>
        </p>
      </div>
    </section>
  );
}

function Careers() {
  const stageRef = useRef(null);
  useReveal(stageRef);
  useHashScroll();
  useScrollFX(stageRef);
  return (
    <div className="dir-editorial motion-stage" ref={stageRef}>
      <ProgressBar />
      <div className="page">
        <HomeNav active="Careers" />
        <PageHero
          headline={<>Build something<br />that <em>matters.</em></>}
          lead="Be part of a team transforming governance and creating lasting impact across India. We're not just building a company, we're building a mission-driven community of changemakers."
          buttons={<>
            <a className="btn" href="#roles">See open roles <ChevronMark size={12} color="currentColor" /></a>
            <a className="btn ghost" href="#fellowship">About the Fellowship</a>
          </>}
        />
        <WhatItsLike />
        <Fellowship />
        <BuildForBillionFellowship />
        <Roles />
        <CtaBand />
        <HomeFooter />
      </div>
    </div>
  );
}

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