// page-trust.jsx — Trust / About sub-page
// Unique overlay: parallax topo layers that drift at different rates with scroll,
// plus team coordinates pinned to a static map.

const COMMITMENTS = [
  ['NO BOOKING ON YOUR BEHALF',
   'We notify. You decide. You book on Recreation.gov yourself. We never act with your account.'],
  ['NO DATA SOLD',
   'Your account data exists to deliver alerts. We have no advertisers, no brokers, no analytics network.'],
  ['NO HIDDEN BILLING',
   'One price. One button to cancel. 30-day refund, no questions, pro-rated to the day.'],
  ['ROBOTS.TXT RESPECTED',
   'We rate-limit our probes, identify our agent, and back off when asked. We talk to operators.'],
  ['HUMAN SUPPORT',
   'Every email is answered by a human within 24h. No bots, no auto-replies, no canned responses.'],
  ['OPEN INCIDENT LOG',
   'Outages, latency events, and probe failures posted publicly at status.campsitesniper.com.'],
];

const TEAM = [
  { name: 'Marin', role: 'Engineering · Probe queue',     coord: 'N 37.74° W 119.57°' },
  { name: 'Ash',   role: 'Design · Iconography',           coord: 'N 44.42° W 110.59°' },
  { name: 'Rio',   role: 'Operations · Provider relations',coord: 'N 36.06° W 112.13°' },
];

function TrustPage() {
  return (
    <window.PageShell
      active="Trust"
      eyebrow="004 / TRUST"
      title="Built by people who got tired of refreshing."
      subtitle="We're a small team that lost too many weekends to the wrong tab. Here's how we operate, and what we promise."
    >
      <ParallaxTopo/>
      <CommitmentGrid/>
      <TeamCoordinates/>
      <NumbersStrip/>
    </window.PageShell>
  );
}

function ParallaxTopo() {
  const T = window.useTokens();
  const [y, setY] = React.useState(0);
  React.useEffect(() => {
    let pending = false;
    const flush = () => { pending = false; setY(window.scrollY); };
    const onScroll = () => { if (!pending) { pending = true; requestAnimationFrame(flush); } };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <section style={{
      position: 'relative', height: 360, overflow: 'hidden',
      borderBottom: `1px solid ${T.border}`,
      background: T.bg2,
    }}>
      {[0.15, 0.30, 0.55, 0.85].map((rate, i) => (
        <svg key={i} viewBox="0 0 1600 360" preserveAspectRatio="xMidYMid slice"
          style={{
            position: 'absolute', inset: 0, width: '100%', height: '100%',
            transform: `translateY(${y * rate * -0.15}px)`,
            opacity: 0.18 + i * 0.08, pointerEvents: 'none',
          }}>
          <g stroke={T.text} fill="none" strokeWidth="0.5">
            {Array.from({ length: 6 }, (_, k) => (
              <path key={k} d={topoLine(800, 180, 60 + k * 60 + i * 10, i * 0.04 + k * 0.02)}/>
            ))}
          </g>
        </svg>
      ))}
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        flexDirection: 'column', gap: 12,
        fontFamily: T.mono,
      }}>
        <span style={{ fontSize: 10, letterSpacing: 2, color: T.textDim }}>
          THE OPERATING ZONE
        </span>
        <span style={{ fontSize: 14, color: T.text, letterSpacing: 1 }}>
          37.7404° N · 119.5736° W
        </span>
      </div>
    </section>
  );
}

function topoLine(cx, cy, r, distort) {
  const points = 80;
  let d = '';
  for (let i = 0; i <= points; i++) {
    const a = (i / points) * Math.PI * 2;
    const wobble = Math.sin(a * 4 + r * 0.01) * distort + Math.cos(a * 7) * distort * 0.5;
    const rr = r * (1 + wobble);
    const x = cx + Math.cos(a) * rr * 1.6;
    const y = cy + Math.sin(a) * rr * 0.6;
    d += (i === 0 ? 'M' : 'L') + x.toFixed(1) + ',' + y.toFixed(1) + ' ';
  }
  return d + 'Z';
}

function CommitmentGrid() {
  const T = window.useTokens();
  return (
    <window.PageSection>
      <div style={{ fontFamily: T.mono, fontSize: 11, letterSpacing: 2,
        color: T.amber, marginBottom: 16 }}>─── COMMITMENTS ───</div>
      <h2 style={{
        fontFamily: T.mono, fontSize: 'clamp(28px, 3.5vw, 44px)', fontWeight: 600,
        letterSpacing: '-0.01em', margin: '0 0 48px',
        textTransform: 'uppercase', color: T.text, maxWidth: 700,
      }}>
        Six promises we keep on paper.
      </h2>
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
        gap: 1, background: T.border,
        border: `1px solid ${T.border}`,
      }}>
        {COMMITMENTS.map(([title, body], i) => (
          <div key={i} style={{
            background: T.bg3, padding: '28px 24px', position: 'relative',
            transition: 'background 0.2s',
          }}
            onMouseEnter={e => e.currentTarget.style.background = T.bg2}
            onMouseLeave={e => e.currentTarget.style.background = T.bg3}>
            <div style={{
              fontFamily: T.mono, fontSize: 10, letterSpacing: 1.6,
              color: T.amber, marginBottom: 10,
            }}>
              0{i + 1} / 06
            </div>
            <div style={{
              fontFamily: T.mono, fontSize: 13, fontWeight: 600, letterSpacing: 1,
              color: T.text, marginBottom: 12, textTransform: 'uppercase',
            }}>
              {title}
            </div>
            <p style={{
              fontFamily: T.mono, fontSize: 12.5, lineHeight: 1.6,
              color: T.textMute, margin: 0,
            }}>
              {body}
            </p>
          </div>
        ))}
      </div>
    </window.PageSection>
  );
}

function TeamCoordinates() {
  const T = window.useTokens();
  return (
    <window.PageSection dense>
      <div style={{ fontFamily: T.mono, fontSize: 11, letterSpacing: 2,
        color: T.amber, marginBottom: 16 }}>─── PERSONNEL ───</div>
      <h2 style={{
        fontFamily: T.mono, fontSize: 'clamp(28px, 3.5vw, 44px)', fontWeight: 600,
        letterSpacing: '-0.01em', margin: '0 0 40px',
        textTransform: 'uppercase', color: T.text,
      }}>Three people. One queue.</h2>
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
        gap: 16,
      }}>
        {TEAM.map((p, i) => (
          <div key={i} style={{
            border: `1px solid ${T.border}`, background: T.bg3,
            padding: '24px 20px',
            display: 'flex', flexDirection: 'column', gap: 12,
          }}>
            <div style={{
              width: 56, height: 56, border: `1px solid ${T.amber}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: T.mono, fontSize: 22, fontWeight: 600,
              color: T.amber,
            }}>
              {p.name[0]}
            </div>
            <div>
              <div style={{ fontFamily: T.mono, fontSize: 16, fontWeight: 600,
                color: T.text, letterSpacing: 0.5 }}>
                {p.name}
              </div>
              <div style={{ fontFamily: T.mono, fontSize: 11, letterSpacing: 1.2,
                color: T.textMute, marginTop: 4 }}>
                {p.role}
              </div>
            </div>
            <div style={{
              fontFamily: T.mono, fontSize: 10, letterSpacing: 1.4,
              color: T.textDim, paddingTop: 12, borderTop: `1px solid ${T.border}`,
            }}>
              {p.coord}
            </div>
          </div>
        ))}
      </div>
    </window.PageSection>
  );
}

function NumbersStrip() {
  const T = window.useTokens();
  return (
    <window.PageSection dense>
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
        border: `1px solid ${T.border}`, background: T.bg3,
      }}>
        {[
          ['DATA SOLD',          'NEVER'],
          ['REC.GOV CREDENTIALS', 'NOT STORED'],
          ['REFUND WINDOW',      '30 DAYS'],
          ['CANCEL POLICY',      'ONE CLICK'],
        ].map(([label, value], i, arr) => (
          <div key={label} style={{
            padding: '28px 24px',
            borderRight: i < arr.length - 1 ? `1px solid ${T.border}` : 'none',
          }}>
            <div style={{ fontFamily: T.mono, fontSize: 10, letterSpacing: 1.6,
              color: T.textDim, marginBottom: 10 }}>
              {label}
            </div>
            <div style={{ fontFamily: T.mono, fontSize: 28, fontWeight: 600,
              color: T.amber, letterSpacing: '-0.01em' }}>
              {value}
            </div>
          </div>
        ))}
      </div>
    </window.PageSection>
  );
}

window.TrustPage = TrustPage;