/* rathmind — all secondary pages
 * Shared chrome via window.__rathChrome.
 * Each page has a signature moment:
 *   Work        — typographic grid that reflows by filter
 *   War Room    — scroll-driven chart reveal per case
 *   Assessment  — 6-question scored quiz with radial score
 *   InsightsD/M — essay index with hover-expand
 *   Programs    — schedule ledger with price reveal
 *   Still Room  — meditation library with live waveform player
 *   About       — timeline that bridges data + mind
 *   Contact     — calendar + hemisphere-aware form
 */

const Pages = {};

// ─── Shared: revealer hook ─────────────────────────────────────
function useReveal(ref) {
  React.useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(es => {
      es.forEach(e => e.isIntersecting && (e.target.classList.add('in'), io.unobserve(e.target)));
    }, { threshold: 0.12, root: ref.current });
    ref.current.querySelectorAll('.rv').forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

function PageShell({ side, onBack, onCross, onNav, title, kicker, children }) {
  const ref = React.useRef(null);
  useReveal(ref);
  const { Nav, Cross, Footer } = window.__rathChrome;
  return (
    <div ref={ref} className={side === 'data' ? 'is-data' : 'is-mind'} style={{
      width: '100%', height: '100%', overflow: 'auto',
      background: 'var(--paper)', color: 'var(--ink)',
      fontFamily: 'var(--sans)',
    }}>
      <Nav side={side} onBack={onBack} onCross={onCross} onNav={onNav}/>
      <section style={{ padding: '110px 48px 72px', borderBottom: '1px solid var(--rule-faint)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 24 }}>
          <div className="num rv" style={{ gridColumn: '1 / span 3' }}>{kicker}</div>
          <h1 className="rv" data-d="1" style={{
            gridColumn: '1 / span 11', margin: '48px 0 0',
            fontFamily: 'var(--serif)', fontSize: 'clamp(64px, 8vw, 140px)',
            lineHeight: 0.94, letterSpacing: '-0.035em', fontWeight: 400,
          }}>{title}</h1>
        </div>
      </section>
      {children}
      <Cross side={side} onCross={onCross}/>
      <Footer side={side}/>
    </div>
  );
}

// ─── Work / Case Index ─────────────────────────────────────────
Pages.Work = function(p) {
  const [filter, setFilter] = React.useState('all');
  const cases = [
    { id: 'retailedge', co: 'RetailEdge', yr: 2024, ind: 'retail', dis: 'prediction', t: '34% churn reduction with predictive scoring', m: '$2.3M revenue recovered', feat: true },
    { id: 'global-retail', co: 'Global Retail Co.', yr: 2024, ind: 'retail', dis: 'strategy', t: 'Global Retail Analytics Upgrade', m: 'Multi-region rollout' },
    { id: 'novabridge', co: 'NovaBridge Capital', yr: 2023, ind: 'banking', dis: 'viz', t: 'Enterprise dashboard ecosystem · Fortune 500 bank', m: '40+ executive dashboards' },
    { id: 'airline', co: 'Airline Co.', yr: 2023, ind: 'airlines', dis: 'viz', t: 'Airline Operations BI Modernization', m: 'Cloud-native rebuild' },
    { id: 'solis', co: 'Solis Health', yr: 2023, ind: 'healthcare', dis: 'ml', t: 'Patient flow optimisation across 8 networks', m: 'ER wait time cut 22%' },
    { id: 'lifesciences', co: 'Life Sciences Co.', yr: 2022, ind: 'life-sciences', dis: 'ops', t: 'Life Sciences Reporting Automation', m: 'Compliance-first delivery' },
    { id: 'banking', co: 'Banking Co.', yr: 2021, ind: 'banking', dis: 'ml', t: 'Banking Risk Analytics Platform', m: 'Regulatory + portfolio metrics' },
    { id: 'manufacturing', co: 'Manufacturing Co.', yr: 2020, ind: 'manufacturing', dis: 'viz', t: 'Manufacturing KPI Dashboard Suite', m: '14 plants, one view' },
    { id: 'supply', co: 'Retail Supply Chain', yr: 2019, ind: 'retail', dis: 'ml', t: 'Retail Supply Chain Intelligence', m: 'Demand + replenishment models' },
  ];
  const filters = [
    ['all', 'All', cases.length],
    ['retail', 'Retail', cases.filter(c => c.ind === 'retail').length],
    ['banking', 'Banking', cases.filter(c => c.ind === 'banking').length],
    ['healthcare', 'Healthcare', cases.filter(c => c.ind === 'healthcare').length],
    ['ml', 'Machine Learning', cases.filter(c => c.dis === 'ml').length],
    ['viz', 'Visualisation', cases.filter(c => c.dis === 'viz').length],
  ];
  const shown = cases.filter(c => filter === 'all' || c.ind === filter || c.dis === filter);

  return (
    <PageShell side="data" {...p}
      kicker="Data 01 · Selected Work · 2019 — 2024"
      title={<>A ledger of<br/><em style={{ color: 'var(--ink-3)' }}>twelve+ years</em> of engagements.</>}>
      <section style={{ padding: '0 48px', borderBottom: '1px solid var(--rule-faint)' }}>
        <div style={{ display: 'flex', gap: 2, padding: '24px 0', borderBottom: '1px solid var(--rule-faint)' }}>
          {filters.map(([k, lbl, n]) => (
            <button key={k} onClick={() => setFilter(k)} className="num" style={{
              background: filter === k ? 'var(--ink)' : 'transparent',
              color: filter === k ? 'var(--paper)' : 'var(--ink-3)',
              border: '1px solid ' + (filter === k ? 'var(--ink)' : 'var(--rule)'),
              padding: '10px 14px', cursor: 'pointer',
            }}>{lbl} <span style={{ opacity: 0.6 }}>· {String(n).padStart(2, '0')}</span></button>
          ))}
        </div>
      </section>
      <section style={{ padding: '48px 48px 120px' }}>
        {shown.map((c, i) => (
          <div key={c.id} className="rv" data-d={Math.min((i % 5) + 1, 5)} style={{
            display: 'grid', gridTemplateColumns: '80px 120px 2fr 1.2fr 140px 80px',
            gap: 24, padding: '42px 0', alignItems: 'baseline',
            borderTop: i === 0 ? '1px solid var(--ink)' : '1px solid var(--rule-faint)',
            cursor: 'pointer', transition: 'background 300ms',
          }}
          onClick={() => p.onNav('warroom')}
          onMouseEnter={e => e.currentTarget.style.background = 'var(--paper-2)'}
          onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
            <div className="num">{String(i + 1).padStart(3, '0')}</div>
            <div className="num" style={{ color: 'var(--data-accent)' }}>{c.yr}</div>
            <div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 32, letterSpacing: '-0.02em' }}>{c.t}</div>
              <div className="num" style={{ marginTop: 6 }}>{c.co} <span className="dot"/> {c.ind}</div>
            </div>
            <div className="num">{c.dis}</div>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 20, fontStyle: 'italic', color: 'var(--ink-3)' }}>{c.m}</div>
            <div className="num" style={{ textAlign: 'right' }}>{c.feat ? '★ open' : 'open →'}</div>
          </div>
        ))}
      </section>

      <section style={{ padding: '120px 48px', borderTop: '1px solid var(--ink)', borderBottom: '1px solid var(--rule-faint)', background: 'var(--paper-2)' }}>
        <div className="num rv in" style={{ marginBottom: 48 }}>The tally <span className="dot"/> twelve+ years, in aggregate</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 2 }}>
          {[['150+', 'client engagements'], ['500+', 'dashboards built'], ['98%', 'client satisfaction'], ['12+', 'years in practice']].map(([n, k], i) => (
            <div key={k} className="rv in" data-d={i + 1} style={{ padding: '32px 24px', borderLeft: i === 0 ? 'none' : '1px solid var(--rule-faint)' }}>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 'clamp(56px, 6vw, 96px)', lineHeight: 0.95, letterSpacing: '-0.035em', color: 'var(--data-accent)' }}>{n}</div>
              <div className="num" style={{ marginTop: 14 }}>{k}</div>
            </div>
          ))}
        </div>
      </section>

      <section style={{ padding: '120px 48px', borderBottom: '1px solid var(--rule-faint)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '240px 1fr', gap: 48 }}>
          <div className="num rv in">Industries <span className="dot"/> mix</div>
          <div>
            {[['Retail & D2C', 30], ['Banking & Financial Services', 22], ['Healthcare', 16], ['Airlines', 12], ['Manufacturing', 11], ['Life Sciences', 9]].map(([name, pct], i) => (
              <div key={name} className="rv in" data-d={Math.min(i + 1, 5)} style={{
                display: 'grid', gridTemplateColumns: '1fr 80px',
                padding: '22px 0', borderTop: i === 0 ? '1px solid var(--ink)' : '1px solid var(--rule-faint)',
                alignItems: 'center', gap: 24,
              }}>
                <div>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 24, letterSpacing: '-0.015em' }}>{name}</div>
                  <div style={{ height: 4, background: 'var(--rule-faint)', marginTop: 14, position: 'relative' }}>
                    <div style={{ position: 'absolute', inset: 0, width: `${pct * 2.5}%`, background: 'var(--data-accent)' }}/>
                  </div>
                </div>
                <div className="num" style={{ textAlign: 'right', color: 'var(--ink)' }}>{String(pct).padStart(2, '0')}%</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: '140px 48px', borderBottom: '1px solid var(--rule-faint)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 24 }}>
          <div className="num rv in" style={{ gridColumn: '1 / span 3' }}>The method</div>
          <p className="rv in" data-d="1" style={{
            gridColumn: '4 / span 8', margin: 0,
            fontFamily: 'var(--serif)', fontSize: 'clamp(28px, 2.8vw, 44px)',
            lineHeight: 1.3, letterSpacing: '-0.015em', fontWeight: 400,
          }}>
            Every engagement follows the same five steps — Discovery, Audit, Build, Deploy, Optimize. Two weeks of listening before anything is built. <em style={{ color: 'var(--data-accent)' }}>Diagnosis, then intervention.</em> Never the other way around.
          </p>
        </div>
      </section>
    </PageShell>
  );
};

// ─── War Room ──────────────────────────────────────────────────
Pages.WarRoom = function(p) {
  const cases = [
    { id: 'retailedge', co: 'RetailEdge', sub: 'Retail / D2C · 2024', t: 'Reducing churn by 34% with predictive scoring',
      diag: ['12 disconnected data sources — CRM, POS, email, web, support tickets', 'No single source of truth — three teams, three churn numbers', 'Vanity metrics everywhere — sign-ups tracked, churn signals missed', '72-hour reporting lag — leadership saw the problem too late', '$4.2M of revenue leakage undetected'],
      intv: ['Unified data platform — 12 sources to one (BigQuery + dbt)', 'Clean customer data model with 360° behavioral signals', 'Gradient-boosted churn prediction — scoring every customer daily', 'Real-time executive dashboards in Tableau with action triggers', 'Trained the client team to maintain and extend the platform'],
      outc: [['34%', 'churn reduction'], ['$2.3M', 'revenue recovered'], ['4 wks', 'to first insight'], ['1', 'unified platform']],
      chart: [42, 41, 43, 40, 38, 35, 31, 28, 27, 29, 28],
    },
    { id: 'novabridge', co: 'NovaBridge Capital', sub: 'Banking · Fortune 500 · 2023',  t: 'Enterprise dashboard ecosystem — 40+ executive dashboards',
      diag: ['Risk, compliance, and portfolio metrics scattered across teams', 'Each business line built its own definitions — board got conflicts', 'Reports manually consolidated overnight before every committee'],
      intv: ['Unified semantic layer over a single warehouse', '40+ executive dashboards consolidating risk, compliance, portfolio', 'Self-service BI for analysts; locked board view for leadership'],
      outc: [['40+', 'dashboards deployed'], ['1', 'source of truth'], ['Daily', 'board-ready']],
      chart: [22, 23, 22, 21, 20, 19, 18, 17, 16, 15, 14],
    },
    { id: 'solis', co: 'Solis Health', sub: 'Healthcare · 8 networks · 2023', t: 'Patient flow optimisation — ER wait time cut 22%',
      diag: ['No unified triage data across 8 hospital networks', 'Bed utilisation calculated weekly, not in real time', 'No predictive staffing model — peaks always understaffed'],
      intv: ['Demand-forecasting engine for ER and inpatient flow', 'Real-time bed utilisation and triage dashboard', 'Staffing optimiser tied to forecast peaks'],
      outc: [['22%', 'ER wait time cut'], ['8', 'hospital networks'], ['Real-time', 'bed utilisation']],
      chart: [44, 45, 42, 40, 39, 38, 36, 34, 35, 34, 34],
    },
  ];
  const [active, setActive] = React.useState(0);

  return (
    <PageShell side="data" {...p}
      kicker="Data 02 · War Room · 3 cases"
      title={<>Anatomy of a <em style={{ color: 'var(--data-accent)' }}>transformation.</em><br/>Diagnosis, intervention, outcome.</>}>
      <section style={{ padding: '24px 48px', borderBottom: '1px solid var(--rule-faint)', display: 'flex', gap: 2, overflowX: 'auto' }}>
        {cases.map((c, i) => (
          <button key={c.id} onClick={() => setActive(i)} className="num" style={{
            background: active === i ? 'var(--ink)' : 'transparent',
            color: active === i ? 'var(--paper)' : 'var(--ink-3)',
            border: '1px solid ' + (active === i ? 'var(--ink)' : 'var(--rule)'),
            padding: '12px 18px', cursor: 'pointer', whiteSpace: 'nowrap',
          }}>{String(i + 1).padStart(2, '0')} <span className="dot"/> {c.co}</button>
        ))}
      </section>
      <WarRoomCase c={cases[active]} key={active}/>
    </PageShell>
  );
};

function WarRoomCase({ c }) {
  const ref = React.useRef(null);
  const [lineLen, setLineLen] = React.useState(0);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const onScroll = () => {
      const r = el.getBoundingClientRect();
      const vp = window.innerHeight;
      const p = 1 - Math.max(0, Math.min(1, r.top / vp));
      setLineLen(p);
    };
    const root = el.closest('.is-data');
    (root || window).addEventListener('scroll', onScroll);
    onScroll();
    return () => (root || window).removeEventListener('scroll', onScroll);
  }, []);

  const w = 1000, h = 200, pad = 20;
  const max = Math.max(...c.chart);
  const pts = c.chart.map((v, i) => [pad + (i * (w - 2 * pad)) / (c.chart.length - 1), h - pad - (v / max) * (h - 2 * pad)]);
  const path = pts.map((pt, i) => (i === 0 ? 'M' : 'L') + pt.join(',')).join(' ');

  return (
    <div ref={ref}>
      <section style={{ padding: '100px 48px 60px', borderBottom: '1px solid var(--rule-faint)' }}>
        <div className="num rv in">{c.sub}</div>
        <h2 className="rv in" data-d="1" style={{
          margin: '32px 0 0', fontFamily: 'var(--serif)', fontWeight: 400,
          fontSize: 'clamp(48px, 6vw, 96px)', letterSpacing: '-0.03em', lineHeight: 1,
        }}>{c.t}</h2>
      </section>
      <section style={{ padding: '80px 48px', borderBottom: '1px solid var(--rule-faint)', background: 'var(--paper-2)' }}>
        <div className="num rv in" style={{ marginBottom: 24 }}>Trajectory <span className="dot"/> before → after</div>
        <svg viewBox={`0 0 ${w} ${h}`} style={{ width: '100%', height: 'auto' }}>
          <line x1={pad} y1={h - pad} x2={w - pad} y2={h - pad} stroke="var(--rule)" strokeWidth="1"/>
          <path d={path} fill="none" stroke="var(--data-accent)" strokeWidth="2"
                strokeDasharray="1600" strokeDashoffset={1600 * (1 - lineLen)}
                style={{ transition: 'stroke-dashoffset 200ms linear' }}/>
          {pts.map(([x, y], i) => (
            <circle key={i} cx={x} cy={y} r={lineLen > i / pts.length ? 4 : 0} fill="var(--data-accent)"
                    style={{ transition: 'r 300ms' }}/>
          ))}
        </svg>
      </section>
      <ThreeCol side="data" rows={[
        ['01 · Diagnosis', c.diag],
        ['02 · Intervention', c.intv],
      ]}/>
      <section style={{ padding: '100px 48px', borderBottom: '1px solid var(--rule-faint)' }}>
        <div className="num rv in" style={{ marginBottom: 48 }}>03 <span className="dot"/> Outcome</div>
        <div style={{ display: 'grid', gridTemplateColumns: `repeat(${c.outc.length}, 1fr)`, gap: 32 }}>
          {c.outc.map(([n, k], i) => (
            <div key={k} className="rv in" data-d={i + 1} style={{ borderTop: '1px solid var(--ink)', paddingTop: 20 }}>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 'clamp(48px, 6vw, 96px)', lineHeight: 0.95, letterSpacing: '-0.03em', color: 'var(--data-accent)' }}>{n}</div>
              <div className="num" style={{ marginTop: 12 }}>{k}</div>
            </div>
          ))}
        </div>
      </section>

      <HorizontalTimeline
        accent="var(--data-accent)"
        items={[
          ['Wk 00', 'Discovery', 'Deep-dive into the data landscape, goals, and pain points. Interviews with leadership, team, and two departing customers.'],
          ['Wk 02', 'Audit', 'Assess current infrastructure, pipelines, and data quality. A written 14-page diagnosis the executive team reads in full.'],
          ['Wk 06', 'Build', 'Design and develop dashboards, models, and analytics workflows. Infrastructure first — one honest number before any chart.'],
          ['Wk 12', 'Deploy', 'Launch with training, documentation, and team onboarding. Shadow-mode for two weeks before flipping live.'],
          ['Wk 16+', 'Optimize', 'Iterate, refine, and scale based on real-world feedback and KPIs. Team owns it. Runbook, not a retainer.'],
        ]}
      />

      <section style={{ padding: '140px 48px', borderBottom: '1px solid var(--rule-faint)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 24 }}>
          <div className="num rv in" style={{ gridColumn: '1 / span 3' }}>05 <span className="dot"/> Client note</div>
          <blockquote className="rv in" data-d="1" style={{
            gridColumn: '4 / span 8', margin: 0,
            fontFamily: 'var(--serif)', fontSize: 'clamp(30px, 3.2vw, 48px)',
            lineHeight: 1.28, letterSpacing: '-0.02em', fontStyle: 'italic', color: 'var(--ink)',
          }}>
            "Our churn rate dropped 34% within three months. <em style={{ fontStyle: 'normal', color: 'var(--data-accent)' }}>The predictive model RD built paid for itself in the first quarter.</em>"
            <div className="num" style={{ marginTop: 32, fontStyle: 'normal' }}>Anika Patel <span className="dot"/> Head of Growth, RetailEdge</div>
          </blockquote>
        </div>
      </section>
    </div>
  );
}

// ─── Horizontal pinned timeline ────────────────────────────────
function HorizontalTimeline({ items, accent }) {
  const wrapRef = React.useRef(null);
  const [p, setP] = React.useState(0);
  const [phase, setPhase] = React.useState('before'); // 'before' | 'pinned' | 'after'

  React.useEffect(() => {
    const wrap = wrapRef.current;
    if (!wrap) return;
    const onScroll = () => {
      const r = wrap.getBoundingClientRect();
      const vh = window.innerHeight;
      const total = wrap.offsetHeight - vh;
      if (r.top > 0) {
        setPhase('before');
        setP(0);
      } else if (r.top < -total) {
        setPhase('after');
        setP(1);
      } else {
        setPhase('pinned');
        setP(Math.max(0, Math.min(1, -r.top / total)));
      }
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    const pageRoot = wrap.closest('.is-data') || wrap.closest('.is-mind');
    if (pageRoot) pageRoot.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    onScroll();
    return () => {
      window.removeEventListener('scroll', onScroll);
      if (pageRoot) pageRoot.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
    };
  }, []);

  const cardW = 520;
  const gap = 2;
  const rail = items.length * (cardW + gap);
  const maxShift = typeof window !== 'undefined' ? Math.max(0, rail - window.innerWidth + 96) : 0;

  // Inner stage styling depends on phase
  const stageStyle = phase === 'pinned'
    ? { position: 'fixed', top: 0, left: 0, right: 0, height: '100vh', zIndex: 2 }
    : phase === 'after'
      ? { position: 'absolute', bottom: 0, left: 0, right: 0, height: '100vh' }
      : { position: 'absolute', top: 0, left: 0, right: 0, height: '100vh' };

  return (
    <div ref={wrapRef} style={{
      position: 'relative', height: `${items.length * 90}vh`,
      borderBottom: '1px solid var(--rule-faint)',
    }}>
      <div style={{
        ...stageStyle,
        overflow: 'hidden', background: 'var(--paper-2)',
        display: 'flex', flexDirection: 'column',
      }}>
        <div style={{ padding: '48px 48px 24px', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <div className="num">04 <span className="dot"/> Timeline <span className="dot"/> how it unfolded</div>
          <div className="num" style={{ color: 'var(--ink-3)' }}>scroll ↓ to travel →</div>
        </div>
        <div style={{ height: 2, background: 'var(--rule-faint)', margin: '0 48px', position: 'relative' }}>
          <div style={{
            position: 'absolute', left: 0, top: 0, height: '100%',
            width: `${p * 100}%`, background: accent, transition: 'width 80ms linear',
          }}/>
          {items.map((_, i) => (
            <div key={i} style={{
              position: 'absolute', left: `${(i / (items.length - 1)) * 100}%`,
              top: '50%', width: 8, height: 8, borderRadius: '50%',
              background: p >= i / (items.length - 1) ? accent : 'var(--rule)',
              transform: 'translate(-50%, -50%)',
              transition: 'background 200ms',
            }}/>
          ))}
        </div>
        <div style={{
          flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 48,
          transform: `translateX(${-p * maxShift}px)`,
          transition: 'transform 80ms linear',
          willChange: 'transform',
          gap: `${gap}px`,
        }}>
          {items.map(([wk, t, d], i) => {
            const activeAt = i / (items.length - 1);
            const active = p >= activeAt - 0.08 && p <= activeAt + 0.2;
            return (
              <div key={wk} style={{
                flex: `0 0 ${cardW}px`, height: '62vh',
                padding: '48px 40px',
                border: `1px solid ${active ? 'var(--ink)' : 'var(--rule-faint)'}`,
                background: active ? 'var(--paper)' : 'transparent',
                display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
                transition: 'background 260ms, border-color 260ms, transform 260ms',
                transform: active ? 'translateY(-8px)' : 'none',
              }}>
                <div>
                  <div className="num" style={{ color: accent, fontSize: 13 }}>{wk}</div>
                  <div style={{
                    fontFamily: 'var(--serif)', fontWeight: 400,
                    fontSize: 56, letterSpacing: '-0.03em', lineHeight: 1,
                    marginTop: 24,
                  }}>{t}</div>
                </div>
                <div style={{
                  fontFamily: 'var(--serif)', fontStyle: 'italic',
                  fontSize: 22, lineHeight: 1.45, color: 'var(--ink-2)',
                  maxWidth: 420,
                }}>{d}</div>
                <div className="num" style={{ color: 'var(--ink-3)' }}>
                  step {String(i + 1).padStart(2, '0')} / {String(items.length).padStart(2, '0')}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

function ThreeCol({ side, rows }) {
  return rows.map(([title, items]) => (
    <section key={title} style={{ padding: '100px 48px', borderBottom: '1px solid var(--rule-faint)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '240px 1fr', gap: 48 }}>
        <div className="num rv in">{title}</div>
        <ol style={{ margin: 0, padding: 0, listStyle: 'none' }}>
          {items.map((l, i) => (
            <li key={i} className="rv in" data-d={Math.min(i + 1, 5)} style={{
              display: 'grid', gridTemplateColumns: '60px 1fr', gap: 20,
              padding: '20px 0', borderTop: i === 0 ? '1px solid var(--ink)' : '1px solid var(--rule-faint)',
              fontFamily: 'var(--serif)', fontSize: 24, letterSpacing: '-0.015em',
            }}>
              <span className="num" style={{ paddingTop: 6 }}>{String(i + 1).padStart(2, '0')}</span>
              <span>{l}</span>
            </li>
          ))}
        </ol>
      </div>
    </section>
  ));
}

// ─── Assessment ────────────────────────────────────────────────
Pages.Assessment = function(p) {
  const Q = [
    { dim: 'Data Infrastructure', q: 'How would you describe your current data stack?', a: ['Nothing in place — gut feel only', 'Spreadsheets and manual exports', 'Basic database with some BI tools', 'Modern cloud platform, partially integrated', 'Fully integrated cloud-native data platform'] },
    { dim: 'Analytics Capability', q: 'What does analytics look like at your organization?', a: ['No analytics function', 'Ad-hoc reports generated on request', 'Regular dashboards, mostly descriptive', 'Predictive models and automated insights', 'AI/ML-driven decisions embedded in products'] },
    { dim: 'Data Governance', q: 'How do you manage data quality and access?', a: ['No one owns data quality', 'No formal process in place', 'Basic documentation and manual checks', 'Defined policies with some automation', 'Comprehensive framework with monitoring'] },
    { dim: 'Team & Culture', q: 'How data-literate is your organization?', a: ['Data is feared or ignored', 'Only IT or analysts touch data', 'Some business users access dashboards', 'Most teams use data in daily decisions', 'Data-driven culture across all levels'] },
    { dim: 'Decision Making', q: 'How are strategic decisions typically made?', a: ['By the loudest voice in the room', 'Gut instinct and experience', 'Mix of data and intuition', 'Data-first approach with clear KPIs', 'Real-time data feeds into automated decisions'] },
    { dim: 'ROI & Measurement', q: 'Can you measure the ROI of your data investments?', a: ['Never thought to', 'No — we don’t track it', 'Loosely — we have some sense of impact', 'Yes — we track key metrics consistently', 'Precisely — fully attributed with financial models'] },
  ];
  const [answers, setAnswers] = React.useState({});
  const [done, setDone] = React.useState(false);
  const answered = Object.keys(answers).length;
  const score = Object.values(answers).reduce((a, b) => a + b, 0);
  const max = Q.length * 4;
  const pct = answered ? Math.round((score / max) * 100) : 0;
  const stage = pct < 25 ? 'Foundational' : pct < 50 ? 'Developing' : pct < 75 ? 'Advanced' : 'Leading';

  return (
    <PageShell side="data" {...p}
      kicker="Data 03 · Diagnostic · 2 min · 6 questions"
      title={<>How mature is<br/>your <em style={{ color: 'var(--data-accent)' }}>data practice?</em></>}>
      {!done ? (
        <section style={{ padding: '80px 48px 0' }}>
          <div className="num" style={{ marginBottom: 32 }}>Answered <span style={{ color: 'var(--data-accent)' }}>{String(answered).padStart(2, '0')}</span> / {String(Q.length).padStart(2, '0')}</div>
          {Q.map((q, i) => (
            <div key={q.dim} className="rv in" data-d={Math.min(i + 1, 5)} style={{
              padding: '40px 0', borderTop: i === 0 ? '1px solid var(--ink)' : '1px solid var(--rule-faint)',
              display: 'grid', gridTemplateColumns: '80px 1fr 2fr', gap: 32, alignItems: 'start',
            }}>
              <div className="num">{String(i + 1).padStart(2, '0')}</div>
              <div>
                <div className="num" style={{ color: 'var(--data-accent)' }}>{q.dim}</div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 28, letterSpacing: '-0.02em', marginTop: 8 }}>{q.q}</div>
              </div>
              <div style={{ display: 'grid', gap: 8 }}>
                {q.a.map((txt, idx) => {
                  const on = answers[q.dim] === idx;
                  return (
                    <button key={idx} onClick={() => setAnswers(a => ({ ...a, [q.dim]: idx }))} style={{
                      textAlign: 'left', padding: '12px 16px',
                      background: on ? 'var(--ink)' : 'transparent',
                      color: on ? 'var(--paper)' : 'var(--ink-2)',
                      border: '1px solid ' + (on ? 'var(--ink)' : 'var(--rule)'),
                      fontFamily: 'var(--sans)', fontSize: 14, cursor: 'pointer',
                      display: 'flex', alignItems: 'center', gap: 14,
                    }}>
                      <span className="num" style={{ color: on ? 'var(--paper)' : 'var(--ink-3)', fontSize: 10 }}>{idx}</span>
                      {txt}
                    </button>
                  );
                })}
              </div>
            </div>
          ))}
          <div style={{ padding: '48px 0 120px', textAlign: 'center' }}>
            <button className="btn btn-solid" disabled={answered < Q.length}
              onClick={() => setDone(true)}
              style={{ opacity: answered < Q.length ? 0.3 : 1 }}>
              {answered < Q.length ? `Answer all ${Q.length} to continue` : 'See your report →'}
            </button>
          </div>
        </section>
      ) : (
        <Report Q={Q} answers={answers} pct={pct} stage={stage} score={score} max={max} onNav={p.onNav}/>
      )}

      <section style={{ padding: '120px 48px', borderTop: '1px solid var(--ink)', borderBottom: '1px solid var(--rule-faint)', background: 'var(--paper-2)' }}>
        <div className="num rv in" style={{ marginBottom: 48 }}>The four stages <span className="dot"/> for reference</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 2 }}>
          {[
            ['Foundational', '0—24%', 'You’re just getting started. The good news? There’s massive upside waiting to be unlocked.'],
            ['Developing', '25—49%', 'You have the building blocks in place. Now it’s about integration, automation, and scale.'],
            ['Advanced', '50—74%', 'Strong foundation. Time to unlock predictive and prescriptive capabilities for competitive advantage.'],
            ['Leading', '75—100%', 'You’re ahead of 90% of organisations. Let’s fine-tune for maximum strategic impact.'],
          ].map(([s, rng, d], i) => (
            <div key={s} className="rv in" data-d={i + 1} style={{
              padding: '36px 28px', borderLeft: i === 0 ? 'none' : '1px solid var(--rule-faint)',
              borderTop: '1px solid var(--ink)',
            }}>
              <div className="num" style={{ color: 'var(--data-accent)' }}>{rng}</div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 36, letterSpacing: '-0.025em', marginTop: 12 }}>{s}</div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 17, fontStyle: 'italic', color: 'var(--ink-2)', marginTop: 14, lineHeight: 1.5 }}>{d}</div>
            </div>
          ))}
        </div>
      </section>

      <section style={{ padding: '120px 48px', borderBottom: '1px solid var(--rule-faint)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '240px 1fr', gap: 48 }}>
          <div className="num rv in">Method <span className="dot"/> how the score is built</div>
          <div>
            <p className="rv in" data-d="1" style={{
              margin: 0, fontFamily: 'var(--serif)', fontSize: 26, lineHeight: 1.45,
              letterSpacing: '-0.01em', color: 'var(--ink-2)', maxWidth: 760,
            }}>
              Six dimensions, each scored 0 to 4. The weighted average is reported as a percentage and mapped to a stage. <em style={{ color: 'var(--data-accent)' }}>The point is not the number.</em> The point is the shape of the gap between where you are and what you want to decide next.
            </p>
            <p className="rv in" data-d="2" style={{
              margin: '32px 0 0', fontFamily: 'var(--serif)', fontSize: 20, lineHeight: 1.55,
              fontStyle: 'italic', color: 'var(--ink-3)', maxWidth: 680,
            }}>
              Calibrated against 150+ engagements across retail, banking, healthcare, airlines, manufacturing, and life sciences. Not a benchmark. A mirror.
            </p>
          </div>
        </div>
      </section>
    </PageShell>
  );
};

function Report({ Q, answers, pct, stage, score, max, onNav }) {
  const r = 160;
  const circ = 2 * Math.PI * r;
  return (
    <section style={{ padding: '100px 48px 120px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center', marginBottom: 100 }}>
        <div style={{ position: 'relative', aspectRatio: '1/1', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <svg viewBox="-200 -200 400 400" style={{ width: '100%', height: 'auto', transform: 'rotate(-90deg)' }}>
            <circle cx="0" cy="0" r={r} fill="none" stroke="var(--rule-faint)" strokeWidth="2"/>
            <circle cx="0" cy="0" r={r} fill="none" stroke="var(--data-accent)" strokeWidth="2"
                    strokeDasharray={circ} strokeDashoffset={circ * (1 - pct / 100)}
                    style={{ transition: 'stroke-dashoffset 1.2s cubic-bezier(.2,.7,.2,1)' }}/>
          </svg>
          <div style={{ position: 'absolute', textAlign: 'center' }}>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 110, lineHeight: 1, letterSpacing: '-0.04em' }}>{pct}<span style={{ fontSize: 44, color: 'var(--ink-3)' }}>%</span></div>
            <div className="num" style={{ marginTop: 12, color: 'var(--data-accent)' }}>{stage}</div>
          </div>
        </div>
        <div>
          <div className="num">Your report</div>
          <h2 style={{ fontFamily: 'var(--serif)', fontSize: 48, letterSpacing: '-0.025em', lineHeight: 1.05, margin: '20px 0 0', fontWeight: 400 }}>
            You are <em style={{ color: 'var(--data-accent)' }}>{stage.toLowerCase()}.</em>
          </h2>
          <p style={{ fontFamily: 'var(--sans)', fontSize: 16, lineHeight: 1.6, color: 'var(--ink-2)', marginTop: 20, maxWidth: 480 }}>
            {stage === 'Foundational' && 'You’re just getting started. The good news? There’s massive upside waiting to be unlocked. The first move is infrastructure — a single place where numbers live honestly.'}
            {stage === 'Developing' && 'You have the building blocks in place. Now it’s about integration, automation, and scale — connecting silos and making one source of truth that people actually reach for.'}
            {stage === 'Advanced' && 'Strong foundation. Time to unlock predictive and prescriptive capabilities — shortening the gap between question and answer for competitive advantage.'}
            {stage === 'Leading' && 'You’re ahead of 90% of organisations. Let’s fine-tune for maximum strategic impact — letting data shape the brief, not just answer it.'}
          </p>
          <button className="btn btn-solid" style={{ marginTop: 32 }} onClick={() => onNav('contact')}>Book a 30-min read <span className="dot"/> →</button>
        </div>
      </div>
      <div className="num" style={{ marginBottom: 24 }}>Breakdown <span className="dot"/> by dimension</div>
      {Q.map((q, i) => (
        <div key={q.dim} style={{
          display: 'grid', gridTemplateColumns: '200px 1fr 60px',
          gap: 24, padding: '20px 0', alignItems: 'center',
          borderTop: i === 0 ? '1px solid var(--ink)' : '1px solid var(--rule-faint)',
        }}>
          <div style={{ fontFamily: 'var(--serif)', fontSize: 22 }}>{q.dim}</div>
          <div style={{ height: 6, background: 'var(--rule-faint)', position: 'relative' }}>
            <div style={{ position: 'absolute', inset: 0, width: `${(answers[q.dim] / 4) * 100}%`, background: 'var(--data-accent)', transition: 'width 800ms' }}/>
          </div>
          <div className="num" style={{ textAlign: 'right' }}>{answers[q.dim]}/4</div>
        </div>
      ))}
    </section>
  );
}

// ─── Insights (data) ───────────────────────────────────────────
Pages.InsightsD = function(p) {
  const essays = [
    ['001', 'Jan 2026', 'The Art of Storytelling with Data: Beyond Charts and Graphs', 'How to transform raw numbers into compelling narratives that drive executive decisions and organisational change.', 6],
    ['002', 'Dec 2025', 'Power BI vs Tableau: A 2026 Perspective', 'An honest comparison based on 17+ years of hands-on experience with enterprise BI tools.', 8],
    ['003', 'Dec 2025', 'Cloud Analytics Migration: Lessons from 50+ Enterprise Projects', 'Key patterns, pitfalls, and strategies from migrating legacy BI systems to cloud-native platforms.', 10],
    ['004', 'Nov 2025', 'Building Executive Dashboards That Actually Get Used', 'The psychology of dashboard design and why most fail to influence decision-making.', 6],
    ['005', 'Dec 2025', 'The Intersection of Data and Awareness', 'How analytical thinking and contemplative practice complement each other in unexpected ways.', 4],
  ];
  return (
    <PageShell side="data" {...p}
      kicker="Data 04 · Insights · 05 essays"
      title={<>Thinking <em style={{ color: 'var(--data-accent)' }}>out loud</em><br/>about the practice.</>}>
      <EssayIndex essays={essays} accent="var(--data-accent)"/>

      <section style={{ padding: '120px 48px', borderTop: '1px solid var(--ink)', borderBottom: '1px solid var(--rule-faint)', background: 'var(--paper-2)' }}>
        <div className="num rv in" style={{ marginBottom: 48 }}>What I'm reading <span className="dot"/> influences, lately</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 2 }}>
          {[
            ['Edward Tufte', 'Envisioning Information', 'Still the standard for treating data as composition, not decoration.'],
            ['Stephen Few', 'Information Dashboard Design', 'Every executive dashboard I build owes something to this book.'],
            ['Hans Rosling', 'Factfulness', 'On being less wrong about the world by looking at it carefully.'],
            ['DJ Patil & H. Mason', 'Data Driven', 'On building cultures where data lives — not just where it is stored.'],
            ['Cassie Kozyrkov', 'Decision Intelligence essays', 'The bridge between models and decisions, written without jargon.'],
            ['Italo Calvino', 'Six Memos for the Next Millennium', 'Lightness, quickness, exactitude, visibility, multiplicity. Every brief I write.'],
          ].map(([a, t, why], i) => (
            <div key={t} className="rv in" data-d={Math.min((i % 5) + 1, 5)} style={{
              padding: '36px 28px',
              borderLeft: i % 3 === 0 ? 'none' : '1px solid var(--rule-faint)',
              borderTop: '1px solid var(--ink)',
            }}>
              <div className="num" style={{ color: 'var(--data-accent)' }}>{String(i + 1).padStart(2, '0')}</div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 26, letterSpacing: '-0.02em', marginTop: 14 }}>{t}</div>
              <div className="num" style={{ marginTop: 6 }}>{a}</div>
              <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 16, lineHeight: 1.5, color: 'var(--ink-2)', marginTop: 16 }}>{why}</div>
            </div>
          ))}
        </div>
      </section>

      <section style={{ padding: '140px 48px', borderBottom: '1px solid var(--rule-faint)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 24, alignItems: 'end' }}>
          <div className="rv in" style={{ gridColumn: '1 / span 7' }}>
            <div className="num" style={{ marginBottom: 18 }}>The monthly <span className="dot"/> one letter, every first Sunday</div>
            <h2 style={{
              margin: 0, fontFamily: 'var(--serif)', fontWeight: 400,
              fontSize: 'clamp(44px, 5vw, 72px)', lineHeight: 1.04, letterSpacing: '-0.03em',
            }}>
              One essay. One <em style={{ color: 'var(--data-accent)' }}>dataset I'm sitting with.</em> One question.
            </h2>
          </div>
          <form className="rv in" data-d="1" onSubmit={e => e.preventDefault()} style={{
            gridColumn: '8 / span 5', display: 'grid', gap: 10,
          }}>
            <input type="email" placeholder="you@work.com" style={{
              padding: '18px 0', background: 'transparent', border: 'none',
              borderBottom: '1px solid var(--ink)', fontFamily: 'var(--serif)', fontSize: 22,
              color: 'var(--ink)', outline: 'none',
            }}/>
            <button className="btn btn-solid" style={{ justifySelf: 'start', marginTop: 8 }}>Subscribe <span className="dot"/> →</button>
            <div className="num" style={{ color: 'var(--ink-3)', marginTop: 4 }}>One email when a new article drops <span className="dot"/> no spam, no tracking pixels</div>
          </form>
        </div>
      </section>
    </PageShell>
  );
};

Pages.InsightsM = function(p) {
  const essays = [
    ['001', 'Jan 2026', 'Mindful Leadership: Why the Best CEOs Meditate', 'Exploring the science behind meditation and how it creates sharper, more resilient business leaders.', 5],
    ['002', 'Dec 2025', '21 Days of Stillness: What Happens When Busy Professionals Slow Down', 'Insights from our signature 21-day mindfulness program and the transformations that follow.', 7],
    ['003', 'Dec 2025', 'The Intersection of Data and Awareness', 'How analytical thinking and contemplative practice complement each other in unexpected ways.', 4],
    ['004', 'Nov 2025', 'Corporate Mindfulness: From Skepticism to Standard Practice', 'How to introduce meditation in corporate environments and measure its impact on productivity.', 5],
    ['005', '2024', 'The Science of Stillness', 'Just 10 minutes of daily mindfulness rewires the brain for focus and calm.', 6],
    ['006', '2024', 'Emotional Resilience', 'Building the capacity to meet life’s challenges with equanimity, grace, and steady breath.', 5],
  ];
  return (
    <PageShell side="mind" {...p}
      kicker="Mind 04 · Insights · 06 essays"
      title={<>Writing toward<br/><em style={{ color: 'var(--mind-accent)' }}>stillness.</em></>}>
      <EssayIndex essays={essays} accent="var(--mind-accent)"/>

      <section style={{ padding: '120px 48px', borderTop: '1px solid var(--ink)', borderBottom: '1px solid var(--rule-faint)', background: 'var(--paper-2)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '240px 1fr', gap: 48 }}>
          <div className="num rv in">If you're new here <span className="dot"/> begin with one</div>
          <div>
            <p className="rv in" data-d="1" style={{
              margin: 0, fontFamily: 'var(--serif)', fontSize: 'clamp(26px, 2.6vw, 36px)',
              lineHeight: 1.35, letterSpacing: '-0.015em', color: 'var(--ink)', maxWidth: 820,
            }}>
              Start with <em style={{ color: 'var(--mind-accent)' }}>"Mindful Leadership: Why the Best CEOs Meditate"</em> — it is the shortest and the most often shared. If it speaks, read "21 Days of Stillness" next. After that, any order. They are letters, not a curriculum.
            </p>
            <div className="rv in" data-d="2" style={{ marginTop: 40, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 2 }}>
              {[
                ['01', 'Mindful Leadership', '5 min'],
                ['02', '21 Days of Stillness', '7 min'],
                ['04', 'Corporate Mindfulness', '5 min'],
              ].map(([n, t, m], i) => (
                <div key={n} style={{
                  padding: '24px 20px',
                  borderLeft: i === 0 ? 'none' : '1px solid var(--rule-faint)',
                  borderTop: '1px solid var(--ink)',
                }}>
                  <div className="num" style={{ color: 'var(--mind-accent)' }}>{n}</div>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 22, letterSpacing: '-0.015em', marginTop: 10 }}>{t}</div>
                  <div className="num" style={{ marginTop: 8 }}>{m}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: '140px 48px', borderBottom: '1px solid var(--rule-faint)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 24, alignItems: 'end' }}>
          <div className="rv in" style={{ gridColumn: '1 / span 7' }}>
            <div className="num" style={{ marginBottom: 18 }}>New moon letters <span className="dot"/> once a month</div>
            <h2 style={{
              margin: 0, fontFamily: 'var(--serif)', fontWeight: 400,
              fontSize: 'clamp(44px, 5vw, 72px)', lineHeight: 1.04, letterSpacing: '-0.03em',
            }}>
              A short letter. One practice to <em style={{ color: 'var(--mind-accent)' }}>try for a week.</em>
            </h2>
          </div>
          <form className="rv in" data-d="1" onSubmit={e => e.preventDefault()} style={{
            gridColumn: '8 / span 5', display: 'grid', gap: 10,
          }}>
            <input type="email" placeholder="your address" style={{
              padding: '18px 0', background: 'transparent', border: 'none',
              borderBottom: '1px solid var(--ink)', fontFamily: 'var(--serif)', fontSize: 22,
              color: 'var(--ink)', outline: 'none',
            }}/>
            <button className="btn btn-solid" style={{ justifySelf: 'start', marginTop: 8 }}>Subscribe <span className="dot"/> →</button>
            <div className="num" style={{ color: 'var(--ink-3)', marginTop: 4 }}>One letter, one practice to try for a week <span className="dot"/> unsubscribe in a click</div>
          </form>
        </div>
      </section>
    </PageShell>
  );
};

function EssayIndex({ essays, accent }) {
  const [hover, setHover] = React.useState(null);
  return (
    <section style={{ padding: '0 48px 120px' }}>
      {essays.map((e, i) => {
        const [n, yr, t, sub, mins] = e;
        const on = hover === i;
        return (
          <div key={n} className="rv in" data-d={Math.min((i % 5) + 1, 5)}
            onMouseEnter={() => setHover(i)} onMouseLeave={() => setHover(null)}
            style={{
              padding: on ? '48px 0' : '28px 0',
              borderTop: i === 0 ? '1px solid var(--ink)' : '1px solid var(--rule-faint)',
              display: 'grid', gridTemplateColumns: '80px 120px 1fr 100px',
              gap: 24, alignItems: 'baseline', cursor: 'pointer',
              transition: 'padding 400ms cubic-bezier(.2,.7,.2,1)',
            }}>
            <div className="num">{n}</div>
            <div className="num" style={{ color: accent }}>{yr}</div>
            <div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: on ? 48 : 32, letterSpacing: '-0.025em', transition: 'font-size 400ms', lineHeight: 1.05 }}>{t}</div>
              <div style={{
                fontFamily: 'var(--serif)', fontStyle: 'italic', color: 'var(--ink-3)',
                fontSize: 18, marginTop: on ? 12 : 6,
                maxHeight: on ? 100 : 26, overflow: 'hidden', transition: 'max-height 400ms',
              }}>{sub}</div>
            </div>
            <div className="num" style={{ textAlign: 'right' }}>{mins} min {on && <>· read →</>}</div>
          </div>
        );
      })}
    </section>
  );
}

// ─── Programs ──────────────────────────────────────────────────
Pages.Programs = function(p) {
  const rows = [
    { id: 'oneone', t: '1-on-1 Coaching', sub: 'Personalised sessions designed around your life rhythm', dur: 'Ongoing · weekly or fortnightly', price: 'From $220', seats: 'Rolling enrolment · online or in-person' },
    { id: 'twentyone', t: '21-Day Mindfulness Program', sub: 'A transformative online journey to build a daily habit', dur: '21 days · online', price: 'From $480', seats: 'Next cohort · May 12' },
    { id: 'corp', t: 'Corporate Mindfulness Workshops', sub: 'Tailored 8-week programmes for teams — breathwork, meditation, stress management', dur: 'Half-day · full-day · 8-wk series', price: 'From $4,500', seats: 'Bookable · onsite or virtual' },
    { id: 'masterclass', t: 'Mindfulness Masterclass', sub: 'Deep-dive into meditation techniques and the science of awareness', dur: '4 hours · online', price: 'From $180', seats: 'Quarterly · waitlist open' },
    { id: 'retreat', t: 'Weekend Retreat — Agathiyar', sub: 'Two-day immersive retreat in nature. Disconnect, return clearer.', dur: '2 days · residential', price: 'From $1,200', seats: 'Autumn 2026 · waitlist' },
  ];
  return (
    <PageShell side="mind" {...p}
      kicker="Mind 01 · Programs · 05 offerings"
      title={<>Structured paths<br/>to <em style={{ color: 'var(--mind-accent)' }}>lasting clarity.</em></>}>
      <section style={{ padding: '24px 48px 120px' }}>
        {rows.map((r, i) => (
          <div key={r.id} className="rv in" data-d={Math.min(i + 1, 4)} style={{
            padding: '56px 0', borderTop: i === 0 ? '1px solid var(--ink)' : '1px solid var(--rule-faint)',
            display: 'grid', gridTemplateColumns: '80px 1.6fr 1fr 1fr 180px',
            gap: 24, alignItems: 'baseline',
          }}>
            <div className="num">{String(i + 1).padStart(2, '0')}</div>
            <div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 40, letterSpacing: '-0.025em' }}>{r.t}</div>
              <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', color: 'var(--ink-3)', fontSize: 18, marginTop: 8 }}>{r.sub}</div>
            </div>
            <div className="num">{r.dur}</div>
            <div>
              <div className="num">{r.seats}</div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 28, color: 'var(--mind-accent)', marginTop: 6, letterSpacing: '-0.02em' }}>{r.price}</div>
            </div>
            <button className="btn" onClick={() => p.onNav('contact')} style={{ justifySelf: 'end' }}>Enquire →</button>
          </div>
        ))}
      </section>

      <section style={{ padding: '120px 48px', borderTop: '1px solid var(--ink)', borderBottom: '1px solid var(--rule-faint)', background: 'var(--paper-2)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '240px 1fr', gap: 48 }}>
          <div className="num rv in">A session, described</div>
          <div>
            <p className="rv in" data-d="1" style={{
              margin: 0, fontFamily: 'var(--serif)', fontSize: 'clamp(28px, 2.8vw, 42px)',
              lineHeight: 1.32, letterSpacing: '-0.015em',
            }}>
              We sit. For the first ten minutes, we do nothing. <em style={{ color: 'var(--mind-accent)' }}>Then we talk about what arose.</em> The practice is not the point; it is the doorway to the practice.
            </p>
            <div className="rv in" data-d="2" style={{ marginTop: 56, display: 'grid', gap: 2 }}>
              {[
                ['00 — 02', 'Arrival', 'A bell. Posture. Releasing the day you walked in with.'],
                ['02 — 12', 'Practice', 'A guided sit, or silence. Your choice — your week.'],
                ['12 — 40', 'Conversation', 'What arose. What got in the way. What the week has been pressing on.'],
                ['40 — 55', 'A single question', 'One practice, prescribed for the week. Small. Specific.'],
                ['55 — 60', 'Closing', 'A bell. Standing. The threshold.'],
              ].map(([min, t, d], i) => (
                <div key={min} style={{
                  display: 'grid', gridTemplateColumns: '120px 200px 1fr',
                  gap: 32, padding: '22px 0',
                  borderTop: i === 0 ? '1px solid var(--ink)' : '1px solid var(--rule-faint)',
                  alignItems: 'baseline',
                }}>
                  <span className="num" style={{ color: 'var(--mind-accent)' }}>{min}</span>
                  <span style={{ fontFamily: 'var(--serif)', fontSize: 24, letterSpacing: '-0.015em' }}>{t}</span>
                  <span style={{ fontFamily: 'var(--serif)', fontSize: 18, lineHeight: 1.5, color: 'var(--ink-2)', fontStyle: 'italic' }}>{d}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: '120px 48px', borderBottom: '1px solid var(--rule-faint)' }}>
        <div className="num rv in" style={{ marginBottom: 48 }}>Voices <span className="dot"/> from students & clients</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 2 }}>
          {[
            ['"RD’s approach to mindfulness is unlike anything I’ve experienced. Grounded, practical, deeply human. My anxiety has genuinely reduced."', 'Priya Sharma · Product Manager, Wellness Co.'],
            ['"Our entire team is calmer, more focused, and honestly — happier. The corporate programme was a game-changer for our culture."', 'James Liu · Head of People, Mindful Labs'],
            ['"After 8 weeks, our team reported 40% less burnout. The data speaks for itself. RD combines heart with measurable results."', 'Chris Nakamura · VP of HR, Solis Health'],
          ].map(([q, who], i) => (
            <div key={i} className="rv in" data-d={i + 1} style={{
              padding: '48px 32px',
              borderLeft: i === 0 ? 'none' : '1px solid var(--rule-faint)',
              borderTop: '1px solid var(--ink)',
            }}>
              <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 22, lineHeight: 1.45, color: 'var(--ink)' }}>{q}</div>
              <div className="num" style={{ marginTop: 28, color: 'var(--mind-accent)' }}>{who}</div>
            </div>
          ))}
        </div>
      </section>

      <section style={{ padding: '120px 48px', borderBottom: '1px solid var(--rule-faint)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '240px 1fr', gap: 48 }}>
          <div className="num rv in">Before you enquire <span className="dot"/> the usual questions</div>
          <div>
            {[
              ['Do I need to know how to meditate?', 'No. Most people arrive not knowing. That is the starting line, not a prerequisite.'],
              ['Is this spiritual or secular?', 'Tradition-rooted, secular in delivery. I teach the instrument; what you use it for is yours.'],
              ['Will this help with stress?', 'Usually. But calm is a side-effect, not a goal. The goal is seeing clearly.'],
              ['What does a corporate engagement look like?', 'A scoping call, a short diagnostic, then a series designed for your team. Never a template.'],
              ['How long before it "works"?', 'You will feel something in session one. You will change in month three. Those are different claims.'],
            ].map(([q, a], i) => (
              <details key={i} className="rv in" data-d={Math.min(i + 1, 5)} style={{
                padding: '24px 0',
                borderTop: i === 0 ? '1px solid var(--ink)' : '1px solid var(--rule-faint)',
              }}>
                <summary style={{
                  cursor: 'pointer', listStyle: 'none',
                  fontFamily: 'var(--serif)', fontSize: 24, letterSpacing: '-0.015em',
                  display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 24,
                }}>
                  <span>{q}</span>
                  <span className="num" style={{ color: 'var(--mind-accent)' }}>open +</span>
                </summary>
                <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 19, lineHeight: 1.55, color: 'var(--ink-2)', marginTop: 18, maxWidth: 720 }}>{a}</div>
              </details>
            ))}
          </div>
        </div>
      </section>
    </PageShell>
  );
};

// ─── Still Room — full library ─────────────────────────────────
Pages.StillRoom = function(p) {
  const [playing, setPlaying] = React.useState(null);
  const tracks = [
    { id: 'morning', t: 'Morning Grounding', d: 'Before the day claims you. A first breath, an intention set.', m: 3 },
    { id: 'midday', t: 'Mid-day Reset', d: 'Box breath, 4·2·6. A small practice between meetings.', m: 5 },
    { id: 'body', t: 'Body Scan', d: 'From crown to heel. Release tension you didn’t know you carried.', m: 10 },
    { id: 'evening', t: 'Evening Release', d: 'Setting the day down. Anchored breath, soft attention.', m: 7 },
    { id: 'nidra', t: 'Deep Rest · Yoga Nidra', d: 'Conscious rest, deeper than sleep. For days that demanded too much.', m: 15 },
    { id: 'silence', t: 'Open Silence', d: 'No voice, no script. A bell at the start, a bell at the end.', m: 15 },
  ];

  return (
    <PageShell side="mind" {...p}
      kicker="Mind 02 · Still Room · 06 practices"
      title={<>Sample the quiet.<br/>A library of <em style={{ color: 'var(--mind-accent)' }}>returnings.</em></>}>
      <section style={{ padding: '0 48px 120px' }}>
        {tracks.map((t, i) => {
          const on = playing === i;
          return (
            <div key={t.id} className="rv in" data-d={Math.min(i + 1, 5)} style={{
              padding: '44px 0', borderTop: i === 0 ? '1px solid var(--ink)' : '1px solid var(--rule-faint)',
              display: 'grid', gridTemplateColumns: '60px 1.2fr 2fr 100px 160px',
              gap: 24, alignItems: 'center',
            }}>
              <button onClick={() => setPlaying(on ? null : i)} style={{
                width: 44, height: 44, borderRadius: '50%',
                border: '1px solid var(--ink)', background: on ? 'var(--mind-accent)' : 'transparent',
                color: on ? 'var(--paper)' : 'var(--ink)', cursor: 'pointer',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 14,
              }}>{on ? '❙❙' : '▸'}</button>
              <div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 28, letterSpacing: '-0.02em' }}>{t.t}</div>
                <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', color: 'var(--ink-3)', fontSize: 16, marginTop: 4 }}>{t.d}</div>
              </div>
              <Waveform playing={on}/>
              <div className="num">{t.m} min</div>
              <div className="num" style={{ textAlign: 'right', color: on ? 'var(--mind-accent)' : 'var(--ink-3)' }}>
                {on ? '◉ playing' : '○ ready'}
              </div>
            </div>
          );
        })}
      </section>

      <section style={{ padding: '120px 48px', borderTop: '1px solid var(--ink)', borderBottom: '1px solid var(--rule-faint)', background: 'var(--paper-2)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '240px 1fr', gap: 48 }}>
          <div className="num rv in">How to listen <span className="dot"/> four notes</div>
          <div>
            {[
              ['On headphones, or not at all', 'The voice is recorded close. Speakers flatten it.'],
              ['Once a day, same time', 'The benefit is in the rhythm, not any single sit.'],
              ['Sit upright. Don’t lie down.', 'Unless you want the practice to be sleep. Then lie down.'],
              ['Skip the bells if you need to', 'There are no rules here. Only a voice and a breath.'],
            ].map(([h, d], i) => (
              <div key={h} className="rv in" data-d={Math.min(i + 1, 4)} style={{
                display: 'grid', gridTemplateColumns: '60px 1fr',
                gap: 24, padding: '28px 0',
                borderTop: i === 0 ? '1px solid var(--ink)' : '1px solid var(--rule-faint)',
                alignItems: 'baseline',
              }}>
                <span className="num" style={{ color: 'var(--mind-accent)' }}>{String(i + 1).padStart(2, '0')}</span>
                <div>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 26, letterSpacing: '-0.015em' }}>{h}</div>
                  <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 18, color: 'var(--ink-2)', marginTop: 8, lineHeight: 1.5 }}>{d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: '120px 48px', borderBottom: '1px solid var(--rule-faint)' }}>
        <div className="num rv in" style={{ marginBottom: 48 }}>A seven-day beginning <span className="dot"/> in order</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 2 }}>
          {[
            ['Mon', 'Breath', '4·2·6', '3 min'],
            ['Tue', 'Breath', 'repeat', '3 min'],
            ['Wed', 'Morning', 'intention', '5 min'],
            ['Thu', 'Body', 'scan', '10 min'],
            ['Fri', 'Evening', 'release', '7 min'],
            ['Sat', 'Walking', 'meditation', '12 min'],
            ['Sun', 'Open', 'silence', '15 min'],
          ].map(([d, t, sub, m], i) => (
            <div key={d} className="rv in" data-d={Math.min(i + 1, 5)} style={{
              padding: '32px 18px',
              borderLeft: i === 0 ? 'none' : '1px solid var(--rule-faint)',
              borderTop: '1px solid var(--ink)',
            }}>
              <div className="num" style={{ color: 'var(--mind-accent)' }}>{d}</div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 26, letterSpacing: '-0.02em', marginTop: 16 }}>{t}</div>
              <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 15, color: 'var(--ink-3)', marginTop: 4 }}>{sub}</div>
              <div className="num" style={{ marginTop: 24 }}>{m}</div>
            </div>
          ))}
        </div>
        <p className="rv in" data-d="2" style={{
          maxWidth: 640, margin: '56px 0 0',
          fontFamily: 'var(--serif)', fontSize: 22, fontStyle: 'italic',
          lineHeight: 1.5, color: 'var(--ink-2)',
        }}>
          If you miss a day, begin again. <em style={{ fontStyle: 'normal', color: 'var(--mind-accent)' }}>Beginning again is the practice.</em>
        </p>
      </section>
    </PageShell>
  );
};

function Waveform({ playing }) {
  const [bars] = React.useState(() => Array.from({ length: 64 }, () => 0.2 + Math.random() * 0.8));
  const [t, setT] = React.useState(0);
  React.useEffect(() => {
    if (!playing) return;
    const id = setInterval(() => setT(x => x + 1), 90);
    return () => clearInterval(id);
  }, [playing]);
  return (
    <div style={{ display: 'flex', gap: 2, alignItems: 'center', height: 32 }}>
      {bars.map((b, i) => {
        const mod = playing ? Math.abs(Math.sin((i + t) / 6)) * 0.6 + 0.4 : 0.35;
        return <div key={i} style={{
          width: 2, height: `${b * mod * 100}%`,
          background: playing ? 'var(--mind-accent)' : 'var(--rule)',
          transition: 'height 200ms, background 300ms',
        }}/>;
      })}
    </div>
  );
}

// ─── About ─────────────────────────────────────────────────────
Pages.About = function(p) {
  return (
    <PageShell side="mind" {...p}
      kicker="Shared · About Rathinavel D · since 2007"
      title={<>Insight &amp; Awareness.<br/>One life, two <em style={{ color: 'var(--mind-accent)' }}>instruments.</em></>}>
      <section style={{ padding: '100px 48px', borderBottom: '1px solid var(--rule-faint)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 24 }}>
          <div className="num rv in" style={{ gridColumn: '1 / span 3' }}>The thesis</div>
          <p className="rv in" data-d="1" style={{
            gridColumn: '4 / span 8', margin: 0,
            fontFamily: 'var(--serif)', fontSize: 'clamp(32px, 3.4vw, 52px)',
            lineHeight: 1.22, letterSpacing: '-0.02em', fontWeight: 400,
          }}>
            I consult on data &amp; analytics by day, and teach mindfulness by evening. <em style={{ color: 'var(--mind-accent)' }}>Data sharpens how we see the world; mindfulness sharpens how we see ourselves.</em> The analyst who can sit with ambiguity makes better models. The meditator who respects evidence builds deeper practice. The surface changes. The attention does not.
          </p>
        </div>
      </section>
      <section style={{ padding: '120px 48px', borderBottom: '1px solid var(--rule-faint)', background: 'var(--paper-2)' }}>
        <div className="num rv in" style={{ marginBottom: 48 }}>A long bio <span className="dot"/> in short paragraphs</div>
        {[
          ['2007 · Career begins', 'Started the journey in enterprise BI and data warehousing. The same year the first quiet practice began — with a teacher at Agathiyar Ashram.'],
          ['2012 · Solution architecture', 'Moved into BI solution architecture and presales leadership. Twelve+ years across retail, banking, healthcare, airlines, manufacturing, and life sciences. Infrastructure, predictive modelling, executive dashboards. The throughline: evidence before opinion.'],
          ['2017 · Cloud transformation', 'Led multiple cloud analytics migration programmes — legacy BI to cloud-native lakehouses. Cumulative impact: 150+ engagements, 500+ dashboards, 98% client satisfaction.'],
          ['2019 — 2021 · Meditation journey', 'Began formal mindfulness and meditation training. Certified as Mindfulness & Meditation Coach through buddhaceo.org in 2021. 500+ students guided, 2,000+ sessions led, 8+ years teaching. The throughline: attention before action.'],
          ['2024 · Insight & Awareness', 'Launched the dual-identity brand merging data expertise with mindfulness coaching. The way you read a spreadsheet and the way you read the breath are the same act, applied to different surfaces. This site is the argument for that claim.'],
        ].map(([h, body], i) => (
          <div key={h} className="rv in" data-d={Math.min(i + 1, 4)} style={{
            display: 'grid', gridTemplateColumns: '220px 1fr', gap: 48,
            padding: '44px 0', borderTop: i === 0 ? '1px solid var(--ink)' : '1px solid var(--rule-faint)',
          }}>
            <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 26, color: 'var(--mind-accent)' }}>{h}</div>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.55, color: 'var(--ink-2)', maxWidth: 780 }}>{body}</div>
          </div>
        ))}
      </section>
      <section style={{ padding: '120px 48px', borderBottom: '1px solid var(--rule-faint)' }}>
        <div className="num rv in" style={{ marginBottom: 32 }}>Credentials <span className="dot"/> for precision</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 40 }}>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
            {['Certified Power BI Data Analyst', 'Oracle BI Cloud Certified', 'AWS · Azure · GCP analytics', 'Analytics Excellence Award · 2024', 'Innovation MVP — Enterprise BI · 2023', 'Leadership Recognition — Analytics COE · 2022', '150+ client engagements'].map(l => (
              <li key={l} className="num" style={{ padding: '14px 0', borderTop: '1px solid var(--rule-faint)', color: 'var(--ink)' }}>{l}</li>
            ))}
          </ul>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
            {['Certified Mindfulness & Meditation Coach · buddhaceo.org · 2021', 'Agathiyar Ashram · senior student', 'PSSM · community engagement', 'PMC Tamil · meditation programmes', '500+ students guided', '2,000+ sessions led', '8+ years teaching'].map(l => (
              <li key={l} className="num" style={{ padding: '14px 0', borderTop: '1px solid var(--rule-faint)', color: 'var(--ink)' }}>{l}</li>
            ))}
          </ul>
        </div>
      </section>

      <section style={{ padding: '120px 48px', borderBottom: '1px solid var(--rule-faint)', background: 'var(--paper-2)' }}>
        <div className="num rv in" style={{ marginBottom: 48 }}>A typical week <span className="dot"/> how the two lives share a calendar</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 2 }}>
          {[
            ['Mon', [['05:30', 'sit', 'mind'], ['09:00', 'client call', 'data'], ['14:00', 'model review', 'data']]],
            ['Tue', [['05:30', 'sit', 'mind'], ['10:00', 'dashboard day', 'data'], ['19:00', '1:1 coaching', 'mind']]],
            ['Wed', [['05:30', 'sit', 'mind'], ['09:00', 'strategy', 'data'], ['18:30', 'cohort group', 'mind']]],
            ['Thu', [['05:30', 'sit', 'mind'], ['10:00', 'writing', 'data'], ['16:00', 'workshop prep', 'mind']]],
            ['Fri', [['05:30', 'sit', 'mind'], ['09:00', 'client close', 'data'], ['15:00', 'writing', 'mind']]],
            ['Sat', [['06:30', 'long sit', 'mind'], ['10:00', 'reading', 'mind'], ['15:00', 'walk', 'mind']]],
            ['Sun', [['06:30', 'long sit', 'mind'], ['11:00', 'family', ''], ['18:00', 'plan the week', 'data']]],
          ].map(([d, items], i) => (
            <div key={d} className="rv in" data-d={Math.min(i + 1, 5)} style={{
              borderLeft: i === 0 ? 'none' : '1px solid var(--rule-faint)',
              borderTop: '1px solid var(--ink)',
              padding: '24px 14px',
            }}>
              <div className="num" style={{ color: 'var(--ink)' }}>{d}</div>
              <div style={{ marginTop: 18, display: 'grid', gap: 12 }}>
                {items.map(([time, label, side], j) => (
                  <div key={j} style={{
                    borderLeft: `2px solid ${side === 'data' ? 'var(--data-accent)' : side === 'mind' ? 'var(--mind-accent)' : 'var(--rule)'}`,
                    paddingLeft: 10,
                  }}>
                    <div className="num" style={{ fontSize: 9 }}>{time}</div>
                    <div style={{ fontFamily: 'var(--serif)', fontSize: 16, letterSpacing: '-0.01em', lineHeight: 1.2, marginTop: 2 }}>{label}</div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div className="rv in" data-d="2" style={{ marginTop: 48, display: 'flex', gap: 32 }}>
          <div className="num"><span style={{ display: 'inline-block', width: 10, height: 10, background: 'var(--data-accent)', marginRight: 8, verticalAlign: 'middle' }}/>Data hemisphere</div>
          <div className="num"><span style={{ display: 'inline-block', width: 10, height: 10, background: 'var(--mind-accent)', marginRight: 8, verticalAlign: 'middle' }}/>Mindfulness hemisphere</div>
        </div>
      </section>

      <section style={{ padding: '120px 48px', borderBottom: '1px solid var(--rule-faint)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '240px 1fr', gap: 48 }}>
          <div className="num rv in">Teachers & collaborators <span className="dot"/> with gratitude</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 2 }}>
            {[
              ['buddhaceo.org', 'Volunteer & Programmes', 'Teaching meditation in corporate settings. Where the certification lives, and where I teach.'],
              ['Agathiyar Ashram', 'Retreats & Practice', 'Deep meditation and spiritual growth. The first room I sat in. Still the morning sit.'],
              ['PSSM', 'Mindfulness community', 'Engagement and outreach — bringing the practice to people who would not otherwise meet it.'],
              ['PMC Tamil', 'Tamil meditation', 'Mindfulness programmes in Tamil. Practice in mother tongue lands differently.'],
              ['The Tuesday Sangha', 'Twelve years and counting', 'The peer group that keeps the practice honest. The room that does not let me perform.'],
              ['IIT Madras', 'Statistics, alumni', 'Where I learned that a distribution is a kind of listening, and that evidence is patient work.'],
            ].map(([name, place, line], i) => (
              <div key={name} className="rv in" data-d={Math.min((i % 4) + 1, 4)} style={{
                padding: '28px 24px',
                borderLeft: i % 2 === 0 ? 'none' : '1px solid var(--rule-faint)',
                borderTop: '1px solid var(--ink)',
              }}>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 24, letterSpacing: '-0.015em' }}>{name}</div>
                <div className="num" style={{ marginTop: 6 }}>{place}</div>
                <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 17, color: 'var(--ink-2)', marginTop: 14, lineHeight: 1.5 }}>{line}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: '120px 48px', borderBottom: '1px solid var(--rule-faint)' }}>
        <div className="num rv in" style={{ marginBottom: 48 }}>Selected talks & press <span className="dot"/> 2019 — 2024</div>
        <div>
          {[
            ['2024', 'Insight & Awareness launch', 'Keynote', 'Dual-identity brand merging data expertise with mindfulness coaching.'],
            ['2024', 'Analytics Excellence Award', 'Recognition', 'For sustained leadership in enterprise analytics delivery.'],
            ['2024', 'buddhaceo.org corporate series', 'Programmes', '21-Day Mindfulness Programme, scaled across teams.'],
            ['2023', 'Innovation MVP — Enterprise BI', 'Recognition', 'For unifying analytics architectures at Fortune 500 scale.'],
            ['2022', 'Leadership Recognition — Analytics COE', 'Recognition', 'For building and operating an Analytics Centre of Excellence.'],
            ['2021', 'Certified Mindfulness & Meditation Coach', 'Certification', 'Through buddhaceo.org. For precision, not permission.'],
            ['2019', 'Meditation journey · formal', 'Milestone', 'Began formal mindfulness and meditation training.'],
            ['2007', 'Career begins · enterprise BI', 'Milestone', 'First data warehousing project shipped. The path begins.'],
          ].map(([yr, where, kind, t], i) => (
            <div key={i} className="rv in" data-d={Math.min((i % 5) + 1, 5)} style={{
              display: 'grid', gridTemplateColumns: '80px 220px 160px 1fr',
              gap: 24, padding: '22px 0',
              borderTop: i === 0 ? '1px solid var(--ink)' : '1px solid var(--rule-faint)',
              alignItems: 'baseline',
            }}>
              <div className="num" style={{ color: 'var(--mind-accent)' }}>{yr}</div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 22, letterSpacing: '-0.015em' }}>{where}</div>
              <div className="num">{kind}</div>
              <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 18, color: 'var(--ink-2)' }}>{t}</div>
            </div>
          ))}
        </div>
      </section>
    </PageShell>
  );
};

// ─── Contact ───────────────────────────────────────────────────
Pages.Contact = function(p) {
  const [side, setSide] = React.useState('data');
  const [form, setForm] = React.useState({ name: '', email: '', msg: '' });
  const [sent, setSent] = React.useState(false);

  return (
    <PageShell side={side} {...p}
      kicker={`Shared · Contact · ${side === 'data' ? 'Looking to collaborate on data?' : 'Start a journey to stillness'}`}
      title={<>Write a line. I’ll<br/><em style={{ color: side === 'data' ? 'var(--data-accent)' : 'var(--mind-accent)' }}>write back.</em></>}>
      <section style={{ padding: '24px 48px', borderBottom: '1px solid var(--rule-faint)', display: 'flex', gap: 2 }}>
        {[['data', 'Data & Analytics'], ['mind', 'Mindfulness']].map(([k, lbl]) => (
          <button key={k} onClick={() => setSide(k)} className="num" style={{
            background: side === k ? 'var(--ink)' : 'transparent',
            color: side === k ? 'var(--paper)' : 'var(--ink-3)',
            border: '1px solid ' + (side === k ? 'var(--ink)' : 'var(--rule)'),
            padding: '14px 20px', cursor: 'pointer',
          }}>{lbl}</button>
        ))}
      </section>

      <section style={{ padding: '80px 48px', borderBottom: '1px solid var(--rule-faint)' }}>
        <div className="num rv in" style={{ marginBottom: 32 }}>01 <span className="dot"/> Write a line</div>
        {sent ? (
          <div style={{ padding: '80px 0', textAlign: 'center' }}>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 56, letterSpacing: '-0.025em', fontStyle: 'italic', color: side === 'data' ? 'var(--data-accent)' : 'var(--mind-accent)' }}>Message sent. Thank you.</div>
            <div className="num" style={{ marginTop: 20 }}>{side === 'data' ? 'Reply within 1–2 business days' : 'Reply within 48 hours'} <span className="dot"/> hello@rathmind.com</div>
          </div>
        ) : (
          <form onSubmit={e => { e.preventDefault(); setSent(true); }} style={{ display: 'grid', gap: 2, maxWidth: 800 }}>
            <Field label="Name" val={form.name} onChange={v => setForm(f => ({ ...f, name: v }))}/>
            <Field label="Email" val={form.email} onChange={v => setForm(f => ({ ...f, email: v }))}/>
            <Field label={side === 'data' ? 'What are you trying to read?' : 'What brings you to the practice?'}
                   val={form.msg} onChange={v => setForm(f => ({ ...f, msg: v }))} big/>
            <button className="btn btn-solid" type="submit" style={{ marginTop: 24, justifySelf: 'start' }}>Send <span className="dot"/> →</button>
          </form>
        )}
      </section>

      <section style={{ padding: '80px 48px', borderBottom: '1px solid var(--rule-faint)', background: 'var(--paper-2)' }}>
        <div className="num rv in" style={{ marginBottom: 32 }}>02 <span className="dot"/> Elsewhere <span className="dot"/> the usual coordinates</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 2 }}>
          {[
            ['Email', 'hello@rathmind.com', 'preferred · reply within 48 hours'],
            ['Phone', '+1 (234) 567-890', 'for scoping calls'],
            ['LinkedIn', '/in/rathinavel', 'for data engagements'],
            ['Location', 'San Francisco, CA', 'remote consulting & sessions worldwide'],
          ].map(([k, v, sub], i) => (
            <div key={k} className="rv in" data-d={i + 1} style={{
              padding: '32px 24px',
              borderLeft: i === 0 ? 'none' : '1px solid var(--rule-faint)',
              borderTop: '1px solid var(--ink)',
            }}>
              <div className="num">{k}</div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 24, letterSpacing: '-0.015em', marginTop: 14 }}>{v}</div>
              <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 15, color: 'var(--ink-3)', marginTop: 8 }}>{sub}</div>
            </div>
          ))}
        </div>
      </section>

      <section style={{ padding: '100px 48px', borderBottom: '1px solid var(--rule-faint)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '240px 1fr', gap: 48 }}>
          <div className="num rv in">03 <span className="dot"/> What happens next</div>
          <div>
            {[
              [side === 'data' ? 'Within 1–2 business days' : 'Within 48 hours', 'A written reply. From me, not an assistant.'],
              ['Week one', side === 'data' ? 'A short scoping call. Tell me about your current data stack and what you’re trying to achieve. We figure out if I’m the right read.' : 'A twenty-minute introductory conversation. No commitment. A free first session is on offer if the fit is there.'],
              ['Week two', side === 'data' ? 'A written proposal, narrowly scoped. Fixed price, fixed window. Discovery → Audit → Build → Deploy → Optimise.' : 'A first session, if we agreed. Otherwise a few book recommendations and good wishes — calm is a side-effect, not a goal.'],
              ['Week three onward', 'The work begins. Or doesn’t. Either way, an honest answer.'],
            ].map(([when, what], i) => (
              <div key={when} className="rv in" data-d={Math.min(i + 1, 4)} style={{
                display: 'grid', gridTemplateColumns: '220px 1fr',
                gap: 32, padding: '26px 0',
                borderTop: i === 0 ? '1px solid var(--ink)' : '1px solid var(--rule-faint)',
                alignItems: 'baseline',
              }}>
                <span className="num" style={{ color: side === 'data' ? 'var(--data-accent)' : 'var(--mind-accent)' }}>{when}</span>
                <span style={{ fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.45, letterSpacing: '-0.01em' }}>{what}</span>
              </div>
            ))}
          </div>
        </div>
      </section>
    </PageShell>
  );
};

function Field({ label, val, onChange, big }) {
  return (
    <label style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 24, padding: '18px 0', borderTop: '1px solid var(--rule-faint)', alignItems: 'baseline' }}>
      <span className="num">{label}</span>
      {big ? (
        <textarea value={val} onChange={e => onChange(e.target.value)} rows={4} style={{
          fontFamily: 'var(--serif)', fontSize: 22, background: 'transparent', border: 'none',
          outline: 'none', color: 'var(--ink)', resize: 'vertical', padding: 0,
        }}/>
      ) : (
        <input value={val} onChange={e => onChange(e.target.value)} style={{
          fontFamily: 'var(--serif)', fontSize: 22, background: 'transparent', border: 'none',
          outline: 'none', color: 'var(--ink)', padding: 0,
        }}/>
      )}
    </label>
  );
}

window.Pages = Pages;
