// Shared shell: Nav, Footer, Placeholder, SectionHeader, helpers
const { useState, useEffect, useRef, useMemo } = React;
// expose hooks globally so separately-compiled babel scripts can use them
window.useState = React.useState;
window.useEffect = React.useEffect;
window.useRef = React.useRef;
window.useMemo = React.useMemo;
window.useLayoutEffect = React.useLayoutEffect;
const useLayoutEffect = React.useLayoutEffect;

// ---------- helpers ----------
// Reveal uses a pure CSS entrance animation (.reveal in index.html) that always
// ends visible — no scroll / IntersectionObserver dependency, so content can never
// stay blank in any rendering context.
function useReveal() {
  return useRef(null);
}

function Reveal({ children, delay = 0, as: Tag = 'div', className = '', style = {}, ...rest }) {
  return (
    <Tag className={`reveal ${className}`} style={{ animationDelay: `${delay}ms`, ...style }} {...rest}>
      {children}
    </Tag>
  );
}

// ---------- placeholder visuals ----------
// Subtly-striped SVG placeholders, no AI-illustrated content
function Placeholder({ label = 'editorial visual', tone = 'light', ratio = 1.25, style = {}, dense = false }) {
  // tone: light | dark | mid
  const palette = tone === 'dark'
    ? { bg: '#1A1A1A', stripe: 'rgba(255,255,255,0.045)', text: '#9A9CA0' }
    : tone === 'mid'
      ? { bg: '#2A2A2A', stripe: 'rgba(255,255,255,0.05)', text: '#B0B2B6' }
      : { bg: '#EFEEEA', stripe: 'rgba(0,0,0,0.04)', text: '#5E646B' };

  const lineGap = dense ? 8 : 14;
  const lines = [];
  for (let i = 0; i < 60; i++) {
    lines.push(<line key={i} x1="0" y1={i * lineGap} x2="100%" y2={i * lineGap} stroke={palette.stripe} strokeWidth="1" />);
  }

  return (
    <div style={{
      position: 'relative',
      width: '100%',
      aspectRatio: String(ratio),
      background: palette.bg,
      overflow: 'hidden',
      ...style
    }}>
      <svg width="100%" height="100%" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, display: 'block' }}>
        {lines}
      </svg>
      {/* corner brackets */}
      <Bracket pos="tl" color={palette.text} />
      <Bracket pos="tr" color={palette.text} />
      <Bracket pos="bl" color={palette.text} />
      <Bracket pos="br" color={palette.text} />
      {/* caption */}
      <div style={{
        position: 'absolute', left: 18, bottom: 16,
        fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.12em',
        textTransform: 'uppercase', color: palette.text
      }}>
        ↳ {label}
      </div>
      <div style={{
        position: 'absolute', right: 18, top: 16,
        fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.06em',
        color: palette.text
      }}>
        IMG / 01
      </div>
    </div>
  );
}

function Bracket({ pos, color }) {
  const size = 14;
  const offset = 14;
  const styles = {
    tl: { top: offset, left: offset, borderTop: `1px solid ${color}`, borderLeft: `1px solid ${color}` },
    tr: { top: offset, right: offset, borderTop: `1px solid ${color}`, borderRight: `1px solid ${color}` },
    bl: { bottom: offset, left: offset, borderBottom: `1px solid ${color}`, borderLeft: `1px solid ${color}` },
    br: { bottom: offset, right: offset, borderBottom: `1px solid ${color}`, borderRight: `1px solid ${color}` },
  };
  return <div style={{ position: 'absolute', width: size, height: size, ...styles[pos] }} />;
}

// editorial gridline visual — pure geometric, no graphics
function GridArt({ tone = 'dark', label = 'visual structure', code = 'FIG. 01' }) {
  const isDark = tone === 'dark';
  const bg = isDark ? '#1A1A1A' : '#EFEEEA';
  const line = isDark ? 'rgba(255,255,255,0.10)' : 'rgba(0,0,0,0.10)';
  const ink = isDark ? '#9A9CA0' : '#5E646B';

  return (
    <div style={{ position: 'relative', width: '100%', height: '100%', background: bg, overflow: 'hidden' }}>
      <svg width="100%" height="100%" viewBox="0 0 600 800" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0 }}>
        {/* horizontal rules */}
        {[80, 200, 360, 540, 700].map(y => (
          <line key={y} x1="40" x2="560" y1={y} y2={y} stroke={line} strokeWidth="1" />
        ))}
        {/* vertical column rules */}
        {[40, 160, 300, 440, 560].map(x => (
          <line key={x} x1={x} x2={x} y1="60" y2="740" stroke={line} strokeWidth="1" />
        ))}
        {/* a single emphasized box */}
        <rect x="160" y="200" width="280" height="160" fill="none" stroke={isDark ? '#fff' : '#1A1A1A'} strokeWidth="1" opacity="0.35" />
        <line x1="160" y1="200" x2="440" y2="360" stroke={isDark ? '#fff' : '#1A1A1A'} strokeWidth="0.75" opacity="0.25" />
        {/* a thin diagonal accent */}
        <line x1="40" y1="540" x2="560" y2="200" stroke={line} strokeWidth="1" />
        {/* tiny circle marker */}
        <circle cx="300" cy="280" r="3" fill={isDark ? '#fff' : '#1A1A1A'} opacity="0.6" />
        <circle cx="300" cy="280" r="14" fill="none" stroke={isDark ? '#fff' : '#1A1A1A'} opacity="0.25" />
      </svg>
      <div style={{ position: 'absolute', left: 22, top: 18, fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.12em', color: ink, textTransform: 'uppercase' }}>
        {code}
      </div>
      <div style={{ position: 'absolute', left: 22, bottom: 18, fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.12em', color: ink, textTransform: 'uppercase' }}>
        ↳ {label}
      </div>
      <div style={{ position: 'absolute', right: 22, bottom: 18, fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.12em', color: ink }}>
        N · 28°36′  E · 77°12′
      </div>
    </div>
  );
}

// ---------- Logo ----------
function Logo({ size = 18, tone = 'ink' }) {
  const color = tone === 'ink' ? 'var(--ink)' : 'var(--ivory)';
  const d = Math.round(size * 0.42);
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 12, color, fontFamily: 'var(--sans)', fontSize: size, letterSpacing: '-0.03em', fontWeight: 500, whiteSpace: 'nowrap' }}>
      <span aria-hidden="true" style={{
        width: d, height: d, background: 'var(--wine)',
        transform: 'rotate(45deg)', flexShrink: 0, display: 'inline-block'
      }} />
      <span style={{ display: 'inline-flex', alignItems: 'baseline', gap: 0 }}>
        <span>T</span><span style={{ opacity: 0.5, margin: '0 0.12em' }}>D</span>
        <span className="serif-i" style={{ color: 'var(--wine)', fontSize: size * 1.02, margin: '0 0.16em' }}>&amp;</span>
        <span>Co.</span>
      </span>
    </div>
  );
}

// ---------- Nav ----------
function Nav({ route, navigate }) {
  const [open, setOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const [expandedExpertise, setExpandedExpertise] = useState(false);
  const [expandedIndustries, setExpandedIndustries] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const items = [
    { id: 'home', label: 'Home' },
    { id: 'about', label: 'About' },
    { id: 'expertise', label: 'Expertise', hasMega: 'expertise' },
    { id: 'industries', label: 'Industries', hasMega: 'industries' },
    { id: 'insights', label: 'Insights' },
    { id: 'contact', label: 'Contact' },
  ];

  return (
    <>
      <header style={{
        position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
        background: scrolled ? 'rgba(247,247,245,0.92)' : 'rgba(247,247,245,0.0)',
        backdropFilter: scrolled ? 'saturate(140%) blur(14px)' : 'none',
        WebkitBackdropFilter: scrolled ? 'saturate(140%) blur(14px)' : 'none',
        borderBottom: scrolled ? '1px solid var(--hairline)' : '1px solid transparent',
        transition: 'background .35s ease, border-color .35s ease',
      }}>
        <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 72 }}>
          <a className="ulink" onClick={() => navigate({ name: 'home' })} style={{ cursor: 'pointer' }}>
            <Logo size={16} />
          </a>
          <nav style={{ display: 'flex', alignItems: 'center', gap: 30 }} className="nav-desktop">
            {items.map((it) => {
              const active = route.name === it.id ||
                (it.id === 'expertise' && route.name === 'expertise-detail') ||
                (it.id === 'industries' && route.name === 'industry-detail');
              return (
                <a key={it.id}
                  onClick={() => navigate({ name: it.id })}
                  onMouseEnter={() => {
                    if (it.hasMega === 'expertise') { setExpandedExpertise(true); setExpandedIndustries(false); }
                    else if (it.hasMega === 'industries') { setExpandedIndustries(true); setExpandedExpertise(false); }
                    else { setExpandedExpertise(false); setExpandedIndustries(false); }
                  }}
                  style={{
                    fontSize: 13.5, cursor: 'pointer',
                    color: active ? 'var(--ink)' : 'var(--graphite)',
                    transition: 'color .25s ease',
                    position: 'relative',
                    padding: '6px 0'
                  }}
                  onMouseOver={(e) => e.currentTarget.style.color = 'var(--ink)'}
                  onMouseOut={(e) => e.currentTarget.style.color = active ? 'var(--ink)' : 'var(--graphite)'}
                >
                  {it.label}
                  {active && (
                    <span style={{ position: 'absolute', bottom: -2, left: 0, right: 0, height: 2, background: 'var(--wine)' }} />
                  )}
                </a>
              );
            })}
          </nav>
          <div className="nav-cta" style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <span className="mono nav-email" style={{ fontSize: 11, color: 'var(--graphite)' }}>info@tdc.business</span>
            <button className="btn wine" style={{ padding: '10px 16px', fontSize: 12.5 }} onClick={() => navigate({ name: 'contact' })}>
              Schedule consultation
              <span className="arrow">→</span>
            </button>
          </div>

          <button
            className="nav-mobile-toggle"
            onClick={() => setOpen(o => !o)}
            style={{
              display: 'none', background: 'transparent', border: 0, cursor: 'pointer',
              padding: 8, color: 'var(--ink)'
            }}
            aria-label="Menu"
          >
            <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
              <line x1="2" y1="7" x2="20" y2="7" stroke="currentColor" />
              <line x1="2" y1="15" x2="20" y2="15" stroke="currentColor" />
            </svg>
          </button>
        </div>

        {/* Mega menu */}
        {(expandedExpertise || expandedIndustries) && (
          <div
            onMouseLeave={() => { setExpandedExpertise(false); setExpandedIndustries(false); }}
            style={{
              position: 'absolute', top: 72, left: 0, right: 0,
              background: 'var(--ivory)', borderTop: '1px solid var(--hairline)',
              borderBottom: '1px solid var(--hairline)',
              animation: 'pageEnter .25s ease both',
            }}
          >
            <div className="container" style={{ padding: '32px 40px 40px' }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 3fr', gap: 60 }}>
                <div>
                  <div className="num">{expandedExpertise ? '001' : '002'}</div>
                  <div style={{ marginTop: 10, fontFamily: 'var(--sans)', fontSize: 22, letterSpacing: '-0.02em' }}>
                    {expandedExpertise ? 'Expertise' : 'Industries'}
                  </div>
                  <p style={{ marginTop: 10, color: 'var(--graphite)', fontSize: 13.5, maxWidth: 280 }}>
                    {expandedExpertise
                      ? 'Specialised practice areas across cross-border tax, regulatory and advisory matters.'
                      : 'Sector-specific advisory for globally connected businesses and capital.'}
                  </p>
                </div>
                <div style={{
                  display: 'grid',
                  gridTemplateColumns: 'repeat(3, 1fr)',
                  gap: '8px 40px'
                }}>
                  {(expandedExpertise ? EXPERTISE_LIST : INDUSTRIES_LIST).map((it, i) => (
                    <a
                      key={it.slug}
                      onClick={() => {
                        navigate({ name: expandedExpertise ? 'expertise-detail' : 'industry-detail', slug: it.slug });
                        setExpandedExpertise(false); setExpandedIndustries(false);
                      }}
                      style={{
                        display: 'grid', gridTemplateColumns: '38px 1fr',
                        alignItems: 'baseline', padding: '10px 0',
                        borderTop: '1px solid var(--hairline)',
                        cursor: 'pointer',
                        transition: 'transform .35s cubic-bezier(.2,.7,.2,1), color .25s ease',
                        color: 'var(--ink)',
                      }}
                      onMouseEnter={(e) => e.currentTarget.style.transform = 'translateX(6px)'}
                      onMouseLeave={(e) => e.currentTarget.style.transform = 'none'}
                    >
                      <span className="mono" style={{ fontSize: 10.5, color: 'var(--slate)' }}>
                        {String(i + 1).padStart(2, '0')}
                      </span>
                      <span style={{ fontSize: 14.5, letterSpacing: '-0.005em' }}>{it.title}</span>
                    </a>
                  ))}
                </div>
              </div>
            </div>
          </div>
        )}
      </header>

      {/* Mobile drawer */}
      {open && (
        <div style={{
          position: 'fixed', inset: 0, background: 'var(--ivory)', zIndex: 60,
          padding: '90px 22px 40px', overflowY: 'auto'
        }}>
          <button onClick={() => setOpen(false)} aria-label="Close"
            style={{ position: 'absolute', top: 22, right: 22, background: 'transparent', border: 0, cursor: 'pointer' }}>
            <svg width="22" height="22" viewBox="0 0 22 22"><line x1="3" y1="3" x2="19" y2="19" stroke="currentColor" /><line x1="19" y1="3" x2="3" y2="19" stroke="currentColor" /></svg>
          </button>
          {items.map((it, i) => (
            <a key={it.id}
              onClick={() => { navigate({ name: it.id }); setOpen(false); }}
              style={{ display: 'flex', alignItems: 'baseline', gap: 12, padding: '20px 0', borderTop: '1px solid var(--hairline)' }}>
              <span className="mono" style={{ fontSize: 11, color: 'var(--slate)' }}>{String(i + 1).padStart(2, '0')}</span>
              <span style={{ fontFamily: 'var(--sans)', fontSize: 32, letterSpacing: '-0.02em' }}>{it.label}</span>
            </a>
          ))}
        </div>
      )}

      <style>{`
        @media (max-width: 1180px) { .nav-email { display: none !important; } }
        @media (max-width: 1040px) { .nav-cta .btn { display: none !important; } }
        @media (max-width: 860px) {
          .nav-desktop { display: none !important; }
          .nav-cta { display: none !important; }
          .nav-mobile-toggle { display: inline-flex !important; }
        }
      `}</style>
    </>
  );
}

// ---------- Footer ----------
function Footer({ navigate }) {
  return (
    <footer style={{ background: 'var(--wine-deep)', color: 'var(--ivory)', marginTop: 0 }}>
      <div className="container" style={{ padding: '110px 40px 40px' }}>

        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 50 }} className="footer-grid">
          <div>
            <div className="num" style={{ color: 'var(--wine-bright)' }}>Index / 00</div>
            <h2 style={{
              fontFamily: 'var(--sans)', fontWeight: 400, fontSize: 56, letterSpacing: '-0.025em',
              lineHeight: 1.0, marginTop: 22, maxWidth: 520
            }}>
              Counsel for <span className="serif-i" style={{ color: 'var(--wine-bright)' }}>complex</span><br/>
              international matters.
            </h2>
            <div style={{ marginTop: 26, display: 'flex', gap: 0, flexWrap: 'wrap' }}>
              {['Transfer Pricing', 'International Tax', 'FEMA'].map((t, i) => (
                <span key={t} style={{ display: 'inline-flex', alignItems: 'center', gap: 12, color: '#C9CACC', fontSize: 14.5, fontFamily: 'var(--sans)', letterSpacing: '-0.01em' }}>
                  {i > 0 && <span style={{ width: 4, height: 4, background: 'var(--wine-bright)', transform: 'rotate(45deg)', margin: '0 16px', display: 'inline-block' }} />}
                  {t}
                </span>
              ))}
            </div>
            <button
              onClick={() => navigate({ name: 'contact' })}
              style={{
                marginTop: 34, padding: '16px 22px',
                background: 'var(--wine)', color: '#EFF4FC', border: '1px solid var(--wine)',
                fontFamily: 'var(--body)', fontSize: 13.5, cursor: 'pointer',
                display: 'inline-flex', alignItems: 'center', gap: 12,
                transition: 'background .25s ease, color .25s ease'
              }}
              onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--wine-bright)'; e.currentTarget.style.color = '#0F1E3A'; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--wine)'; e.currentTarget.style.color = '#EFF4FC'; }}
            >
              Schedule advisory consultation <span className="arrow">→</span>
            </button>
          </div>

          <div>
            <div className="num" style={{ color: '#8A9099' }}>Practice</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: '20px 0 0', display: 'grid', gap: 10 }}>
              {EXPERTISE_LIST.slice(0, 6).map(e => (
                <li key={e.slug}>
                  <a onClick={() => navigate({ name: 'expertise-detail', slug: e.slug })}
                    style={{ color: '#C9CACC', fontSize: 13.5, cursor: 'pointer', transition: 'color .2s' }}
                    onMouseEnter={(ev) => ev.currentTarget.style.color = 'var(--ivory)'}
                    onMouseLeave={(ev) => ev.currentTarget.style.color = '#C9CACC'}
                  >{e.title}</a>
                </li>
              ))}
              <li>
                <a onClick={() => navigate({ name: 'expertise' })} style={{ color: 'var(--ivory)', fontSize: 13.5, cursor: 'pointer' }}>
                  All practice areas →
                </a>
              </li>
            </ul>
          </div>

          <div>
            <div className="num" style={{ color: '#8A9099' }}>Firm</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: '20px 0 0', display: 'grid', gap: 10 }}>
              {[
                ['About', 'about'],
                ['Industries', 'industries'],
                ['Insights', 'insights'],
                ['Contact', 'contact'],
              ].map(([t, r]) => (
                <li key={r}>
                  <a onClick={() => navigate({ name: r })} style={{ color: '#C9CACC', fontSize: 13.5, cursor: 'pointer', transition: 'color .2s' }}
                    onMouseEnter={(ev) => ev.currentTarget.style.color = 'var(--ivory)'}
                    onMouseLeave={(ev) => ev.currentTarget.style.color = '#C9CACC'}
                  >{t}</a>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <div className="num" style={{ color: 'var(--wine-bright)' }}>Office</div>
            <div style={{ marginTop: 20, color: '#C9CACC', fontSize: 13.5, lineHeight: 1.7 }}>
              T D &amp; Co.<br />
              Chartered Accountants<br />
              3396, Sector 23D<br />
              Chandigarh 160023<br />
              India
            </div>
            <div style={{ marginTop: 20, color: '#C9CACC', fontSize: 13.5 }}>
              <div>info@tdc.business</div>
              <div className="mono" style={{ fontSize: 11.5, marginTop: 6, letterSpacing: '0.04em' }}>+91 79000 03396</div>
            </div>
          </div>
        </div>

        <hr style={{ border: 0, borderTop: '1px solid rgba(255,255,255,0.12)', margin: '70px 0 24px' }} />

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 30, flexWrap: 'wrap' }}>
          <div className="mono" style={{ fontSize: 11, color: '#8A93A6', letterSpacing: '0.06em' }}>
            © 2026  T D &amp; Co.   //   Chartered Accountants   //   Chandigarh, India
          </div>
          <div className="mono" style={{ fontSize: 11, color: '#8A93A6', display: 'flex', gap: 22 }}>
            <a style={{ cursor: 'pointer' }}>Disclaimer</a>
            <a style={{ cursor: 'pointer' }}>Privacy</a>
            <a style={{ cursor: 'pointer' }}>Regulatory notice</a>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .footer-grid { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 560px) {
          .footer-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>
  );
}

// ---------- Section primitives ----------
function SectionHead({ num, kicker, title, lede, align = 'left' }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1.6fr)', gap: 60, alignItems: 'start' }} className="sec-head">
      <div>
        <div className="num">{num}</div>
        <div className="eyebrow" style={{ marginTop: 10 }}>{kicker}</div>
      </div>
      <div>
        <h2 style={{ fontFamily: 'var(--sans)', fontWeight: 400, fontSize: 'clamp(34px, 4.4vw, 64px)', letterSpacing: '-0.025em', lineHeight: 1.04 }}>
          {title}
        </h2>
        {lede && (
          <p style={{ marginTop: 22, color: 'var(--graphite)', fontSize: 'clamp(15px, 1.1vw, 17px)', maxWidth: 640, lineHeight: 1.55 }}>
            {lede}
          </p>
        )}
      </div>
      <style>{`
        @media (max-width: 820px) {
          .sec-head { grid-template-columns: 1fr !important; gap: 14px !important; }
        }
      `}</style>
    </div>
  );
}

// page hero shared between expertise/industry detail pages
function DetailHero({ kicker, num, title, lede, meta, keywords }) {
  return (
    <section style={{ paddingTop: 130, paddingBottom: 80 }}>
      <div className="container">
        <div className="num wine" style={{ marginBottom: 22 }}>{num}  /  {kicker}</div>
        <h1 style={{
          fontFamily: 'var(--sans)', fontWeight: 400,
          fontSize: 'clamp(48px, 7vw, 100px)', letterSpacing: '-0.03em',
          lineHeight: 0.96, maxWidth: 1100
        }}>
          {title}
        </h1>
        {lede && (
          <p style={{ marginTop: 36, color: 'var(--graphite)', fontSize: 'clamp(16px, 1.25vw, 20px)', maxWidth: 760, lineHeight: 1.5 }}>
            {lede}
          </p>
        )}
        {keywords && keywords.length > 0 && (
          <div className="chips" style={{ marginTop: 34 }}>
            {keywords.map((k, i) => (
              <span key={k} className={`chip${i === 0 ? ' solid' : ''}`}>{k}</span>
            ))}
          </div>
        )}
        {meta && (
          <div style={{ marginTop: 50, display: 'flex', gap: 50, flexWrap: 'wrap', borderTop: '1px solid var(--hairline)', paddingTop: 26 }}>
            {meta.map(([k, v]) => (
              <div key={k}>
                <div className="eyebrow" style={{ marginBottom: 6 }}>{k}</div>
                <div style={{ fontSize: 14.5 }}>{v}</div>
              </div>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}

// ---------- Keyword chips ----------
function KeywordChips({ items = [], onDark = false, firstSolid = true, style = {} }) {
  return (
    <div className="chips" style={style}>
      {items.map((k, i) => (
        <span key={k} className={`chip${onDark ? ' on-dark' : ''}${firstSolid && i === 0 && !onDark ? ' solid' : ''}`}>{k}</span>
      ))}
    </div>
  );
}

// ---------- Jurisdiction-flow visual (meaningful, replaces some grid art) ----------
function JurisdictionFlow({ corridors = [], tone = 'dark', title = 'Cross-border corridors', code = 'STRUCT // 01' }) {
  const dark = tone === 'dark';
  const bg = dark ? 'var(--ink)' : 'var(--ivory-2)';
  const ink = dark ? '#E9E6E2' : 'var(--ink)';
  const sub = dark ? '#8A9099' : 'var(--graphite)';
  const line = dark ? 'rgba(233,230,226,0.22)' : 'rgba(26,26,26,0.18)';
  return (
    <div style={{ position: 'relative', width: '100%', height: '100%', background: bg, overflow: 'hidden', padding: '34px 34px 26px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <div className="mono" style={{ fontSize: 10.5, letterSpacing: '0.12em', color: sub, textTransform: 'uppercase' }}>{code}</div>
        <div className="mono" style={{ fontSize: 10.5, letterSpacing: '0.06em', color: sub }}>N 28°36′ · E 77°12′</div>
      </div>

      <div style={{ display: 'grid', gap: 30, margin: '20px 0' }}>
        {corridors.map((c, ci) => (
          <div key={ci}>
            <div className="mono" style={{ fontSize: 10.5, letterSpacing: '0.1em', color: 'var(--wine-bright)', textTransform: 'uppercase', marginBottom: 12 }}>{c.label}</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 0, flexWrap: 'wrap' }}>
              {c.nodes.map((n, ni) => (
                <React.Fragment key={ni}>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'var(--sans)', fontSize: 'clamp(15px,1.5vw,19px)', letterSpacing: '-0.01em', color: ink }}>
                    <span style={{ width: 6, height: 6, background: 'var(--wine)', transform: 'rotate(45deg)', display: 'inline-block' }} />
                    {n}
                  </span>
                  {ni < c.nodes.length - 1 && (
                    <span style={{ flex: '1 1 24px', minWidth: 24, height: 1, background: line, position: 'relative', margin: '0 14px' }}>
                      <span style={{ position: 'absolute', right: -1, top: -8, fontSize: 11, color: sub }}>→</span>
                    </span>
                  )}
                </React.Fragment>
              ))}
            </div>
          </div>
        ))}
      </div>

      <div className="mono" style={{ fontSize: 10.5, letterSpacing: '0.12em', color: sub, textTransform: 'uppercase' }}>↳ {title}</div>
    </div>
  );
}

// ---------- Big-number authority metrics band ----------
function MetricsBand({ metrics = [], tone = 'dark' }) {
  const dark = tone === 'dark';
  return (
    <section style={{ background: dark ? 'var(--ink)' : 'var(--ivory-2)', color: dark ? 'var(--ivory)' : 'var(--ink)' }}>
      <div className="container" style={{ padding: '90px 40px' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 50 }}>
          <span style={{ width: 8, height: 8, background: 'var(--wine-bright)', transform: 'rotate(45deg)', display: 'inline-block' }} />
          <span className="eyebrow" style={{ color: dark ? '#9A9CA0' : 'var(--graphite)' }}>By way of evidence</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0 }} className="metrics-grid">
          {metrics.map((m, i) => (
            <Reveal key={m.k} delay={i * 80}>
              <div style={{
                paddingRight: 36,
                borderLeft: i === 0 ? 'none' : (dark ? '1px solid #2A2A2A' : '1px solid var(--hairline-strong)'),
                paddingLeft: i === 0 ? 0 : 36,
              }}>
                <div style={{ fontFamily: 'var(--sans)', fontWeight: 400, fontSize: 'clamp(48px, 6vw, 84px)', letterSpacing: '-0.04em', lineHeight: 0.9, color: dark ? 'var(--ivory)' : 'var(--ink)' }}>
                  {m.v}<span style={{ color: 'var(--wine-bright)' }}>{m.suffix}</span>
                </div>
                <div style={{ marginTop: 20, fontFamily: 'var(--sans)', fontSize: 17, letterSpacing: '-0.01em' }}>{m.k}</div>
                <div style={{ marginTop: 8, fontSize: 12.5, color: dark ? '#8A9099' : 'var(--graphite)', lineHeight: 1.5 }}>{m.note}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .metrics-grid { grid-template-columns: 1fr 1fr !important; gap: 40px 0 !important; } }
        @media (max-width: 480px) { .metrics-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

// ---------- Doctrine wall (the "wow" thought-leadership moment) ----------
function DoctrineWall({ terms = [], tone = 'wine' }) {
  const wine = tone === 'wine';
  const bg = wine ? 'var(--wine-deep)' : 'var(--ink)';
  return (
    <section style={{ background: bg, color: '#EEF2F8', overflow: 'hidden' }}>
      <div className="container" style={{ padding: '110px 40px 60px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1.7fr)', gap: 60, alignItems: 'start' }} className="sec-head">
          <div>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', color: 'rgba(238,242,248,0.55)', textTransform: 'uppercase' }}>The vocabulary of the work</div>
          </div>
          <h2 style={{ fontFamily: 'var(--sans)', fontWeight: 400, fontSize: 'clamp(30px, 3.6vw, 52px)', letterSpacing: '-0.025em', lineHeight: 1.06 }}>
            The frameworks our clients are actually being assessed against.
          </h2>
        </div>
      </div>
      <div style={{ borderTop: '1px solid rgba(238,242,248,0.14)' }}>
        <div className="container" style={{ padding: '0 40px' }}>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 0 }}>
            {terms.map((t, i) => (
              <span key={t} style={{
                fontFamily: 'var(--sans)', fontWeight: 300,
                fontSize: 'clamp(22px, 2.6vw, 40px)', letterSpacing: '-0.02em',
                color: '#EEF2F8', padding: '22px 26px',
                borderRight: '1px solid rgba(238,242,248,0.12)',
                borderBottom: '1px solid rgba(238,242,248,0.12)',
                display: 'inline-flex', alignItems: 'center', gap: 14,
              }}>
                {t}
                <span style={{ fontFamily: 'var(--mono)', fontSize: 10, color: 'rgba(238,242,248,0.4)', alignSelf: 'flex-start' }}>{String(i + 1).padStart(2, '0')}</span>
              </span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Photo (real imagery with cohesive burgundy duotone + graceful fallback) ----------
function Photo({ src, alt = '', label, code, seed = 'tdc', objectPosition = 'center', style = {}, overlay = true }) {
  const onErr = (e) => {
    if (e.target.dataset.fb) return;
    e.target.dataset.fb = '1';
    e.target.src = `https://picsum.photos/seed/${seed}/1280/960`;
  };
  return (
    <div style={{ position: 'relative', width: '100%', height: '100%', minHeight: 120, overflow: 'hidden', background: 'var(--ink)', ...style }}>
      <img
        src={src} alt={alt} loading="lazy" onError={onErr}
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition, filter: 'grayscale(0.4) contrast(1.04) brightness(0.9)' }}
      />
      {overlay && (
        <React.Fragment>
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(150deg, rgba(15,30,58,0.66) 0%, rgba(22,41,74,0.34) 48%, rgba(10,16,28,0.55) 100%)', mixBlendMode: 'multiply' }} />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,0.16), rgba(0,0,0,0) 32%, rgba(0,0,0,0) 62%, rgba(0,0,0,0.46))' }} />
        </React.Fragment>
      )}
      {code && (
        <div style={{ position: 'absolute', left: 20, top: 18, fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(239,244,252,0.9)' }}>{code}</div>
      )}
      {label && (
        <div style={{ position: 'absolute', left: 20, bottom: 16, fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(239,244,252,0.92)' }}>↳ {label}</div>
      )}
    </div>
  );
}

// ---------- Expose ----------
Object.assign(window, {
  useReveal, Reveal,
  Placeholder, GridArt, Bracket,
  Logo, Nav, Footer,
  Photo,
  SectionHead, DetailHero,
  KeywordChips, JurisdictionFlow, MetricsBand, DoctrineWall,
});
