// Altus UI Kit — Screens
// Load with: <script type="text/babel" src="Screens.jsx"></script>

// ── Realistic Dotted Globe ────────────────────────────────────────────────
function RealisticGlobe({ size = 900 }) {
  const canvasRef = React.useRef(null);
  React.useEffect(() => {
    const dpr = window.devicePixelRatio || 1;
    const canvas = canvasRef.current;
    if (!canvas) return;
    canvas.width = size * dpr;
    canvas.height = size * dpr;
    canvas.style.width = size + 'px';
    canvas.style.height = size + 'px';
    const ctx = canvas.getContext('2d', { alpha: true });
    ctx.scale(dpr, dpr);

    const W = size, H = size, cx = W / 2, cy = H / 2, R = size * 0.42;

    const land = [
      { laMin: 25, laMax: 50, loMin: -130, loMax: -65 },
      { laMin: 50, laMax: 72, loMin: -168, loMax: -55 },
      { laMin: 15, laMax: 30, loMin: -115, loMax: -80 },
      { laMin: 7, laMax: 20, loMin: -92, loMax: -77 },
      { laMin: -5, laMax: 12, loMin: -80, loMax: -48 },
      { laMin: -25, laMax: -5, loMin: -75, loMax: -35 },
      { laMin: -42, laMax: -25, loMin: -72, loMax: -48 },
      { laMin: -56, laMax: -42, loMin: -75, loMax: -62 },
      { laMin: 36, laMax: 60, loMin: -10, loMax: 30 },
      { laMin: 55, laMax: 72, loMin: 5, loMax: 42 },
      { laMin: 50, laMax: 60, loMin: -11, loMax: 2 },
      { laMin: 15, laMax: 37, loMin: -18, loMax: 40 },
      { laMin: -5, laMax: 15, loMin: -18, loMax: 42 },
      { laMin: -35, laMax: -5, loMin: 12, loMax: 42 },
      { laMin: 12, laMax: 42, loMin: 30, loMax: 60 },
      { laMin: 25, laMax: 55, loMin: 58, loMax: 140 },
      { laMin: 55, laMax: 75, loMin: 58, loMax: 180 },
      { laMin: 8, laMax: 28, loMin: 68, loMax: 90 },
      { laMin: 20, laMax: 45, loMin: 95, loMax: 125 },
      { laMin: 30, laMax: 46, loMin: 128, loMax: 146 },
      { laMin: -8, laMax: 20, loMin: 95, loMax: 120 },
      { laMin: -40, laMax: -12, loMin: 113, loMax: 154 },
      { laMin: 60, laMax: 83, loMin: -55, loMax: -15 },
    ];
    function isLand(lat, lng) {
      for (let i = 0; i < land.length; i++) {
        const r = land[i];
        if (lat >= r.laMin && lat <= r.laMax && lng >= r.loMin && lng <= r.loMax) return true;
      }
      return false;
    }

    const N = 2000;
    const golden = Math.PI * (3 - Math.sqrt(5));
    const dots = [];
    for (let i = 0; i < N; i++) {
      const y = 1 - (i / (N - 1)) * 2;
      const r = Math.sqrt(1 - y * y);
      const theta = golden * i;
      const x = Math.cos(theta) * r;
      const z = Math.sin(theta) * r;
      const lat = Math.asin(y) * (180 / Math.PI);
      const lng = Math.atan2(z, x) * (180 / Math.PI);
      dots.push({ x, y, z, land: isLand(lat, lng) });
    }

    const cities = [
      { lat: 51.5, lng: -0.1 }, { lat: 40.7, lng: -74 },
      { lat: 35.7, lng: 139.7 }, { lat: -33.9, lng: 151.2 },
      { lat: 1.3, lng: 103.8 }, { lat: 25.2, lng: 55.3 },
    ];
    const arcs = [[0,1],[0,5],[2,3],[2,4],[4,5],[1,4]];
    function latLngTo3D(lat, lng) {
      const la = lat * Math.PI / 180, lo = lng * Math.PI / 180;
      return { x: Math.cos(la) * Math.cos(lo), y: Math.sin(la), z: Math.cos(la) * Math.sin(lo) };
    }
    const cityPts = cities.map(c => latLngTo3D(c.lat, c.lng));

    let time = 0;
    let rotY = 0, rotX = -0.2, animId;
    let isDragging = false, lastMX = 0, lastMY = 0, autoRotate = true;

    canvas.style.cursor = 'grab';
    const onMouseDown = e => { isDragging = true; autoRotate = false; lastMX = e.clientX; lastMY = e.clientY; canvas.style.cursor = 'grabbing'; };
    const onMouseMove = e => { if (!isDragging) return; rotY += (e.clientX - lastMX) * 0.005; rotX += (e.clientY - lastMY) * 0.005; rotX = Math.max(-1.2, Math.min(1.2, rotX)); lastMX = e.clientX; lastMY = e.clientY; };
    const onMouseUp = () => { if (isDragging) { isDragging = false; canvas.style.cursor = 'grab'; setTimeout(() => { autoRotate = true; }, 2000); } };
    const onTouchStart = e => { e.preventDefault(); isDragging = true; autoRotate = false; lastMX = e.touches[0].clientX; lastMY = e.touches[0].clientY; };
    const onTouchMove = e => { if (!isDragging) return; e.preventDefault(); rotY += (e.touches[0].clientX - lastMX) * 0.005; rotX += (e.touches[0].clientY - lastMY) * 0.005; rotX = Math.max(-1.2, Math.min(1.2, rotX)); lastMX = e.touches[0].clientX; lastMY = e.touches[0].clientY; };
    const onTouchEnd = () => { isDragging = false; setTimeout(() => { autoRotate = true; }, 2000); };
    canvas.addEventListener('mousedown', onMouseDown);
    window.addEventListener('mousemove', onMouseMove);
    window.addEventListener('mouseup', onMouseUp);
    canvas.addEventListener('touchstart', onTouchStart, { passive: false });
    window.addEventListener('touchmove', onTouchMove, { passive: false });
    window.addEventListener('touchend', onTouchEnd);

    function rot(p) {
      let { x, y, z } = p;
      const cy2 = Math.cos(rotY), sy = Math.sin(rotY);
      const x2 = x * cy2 + z * sy, z2 = -x * sy + z * cy2;
      const cx2 = Math.cos(rotX), sx = Math.sin(rotX);
      const y2 = y * cx2 - z2 * sx, z3 = y * sx + z2 * cx2;
      return { x: cx + x2 * R, y: cy - y2 * R, z: z3 };
    }

    function draw() {
      ctx.clearRect(0, 0, W, H);
      time += 0.012;

      const atm = ctx.createRadialGradient(cx, cy, R * 0.92, cx, cy, R * 1.5);
      atm.addColorStop(0, 'rgba(93,202,165,0)');
      atm.addColorStop(0.35, 'rgba(93,202,165,0.06)');
      atm.addColorStop(0.6, 'rgba(40,120,160,0.04)');
      atm.addColorStop(1, 'rgba(93,202,165,0)');
      ctx.beginPath(); ctx.arc(cx, cy, R * 1.5, 0, Math.PI * 2);
      ctx.fillStyle = atm; ctx.fill();

      const body = ctx.createRadialGradient(cx - R * 0.3, cy - R * 0.3, 0, cx, cy, R);
      body.addColorStop(0, 'rgba(20,60,90,0.35)');
      body.addColorStop(0.7, 'rgba(10,30,50,0.25)');
      body.addColorStop(1, 'rgba(5,15,30,0.15)');
      ctx.beginPath(); ctx.arc(cx, cy, R, 0, Math.PI * 2);
      ctx.fillStyle = body; ctx.fill();

      ctx.beginPath(); ctx.arc(cx, cy, R, 0, Math.PI * 2);
      ctx.strokeStyle = 'rgba(93,202,165,0.12)';
      ctx.lineWidth = 1.5;
      ctx.stroke();

      const projected = dots.map(d => rot(d));

      projected.forEach((p, i) => {
        if (p.z < -0.15) return;
        const d = dots[i];
        const front = p.z >= 0;

        if (d.land) {
          const base = front ? 0.45 + p.z * 0.55 : 0.06;
          const pulse = front ? Math.sin(time * 2 + i * 0.3) * 0.12 : 0;
          const alpha = Math.min(1, base + pulse);
          const radius = front ? 1.2 + p.z * 1.0 : 0.5;

          if (front && p.z > 0.3) {
            const g = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, radius * 3.5);
            g.addColorStop(0, `rgba(93,202,165,${alpha * 0.4})`);
            g.addColorStop(1, 'rgba(93,202,165,0)');
            ctx.beginPath(); ctx.arc(p.x, p.y, radius * 3.5, 0, Math.PI * 2);
            ctx.fillStyle = g; ctx.fill();
          }

          ctx.beginPath(); ctx.arc(p.x, p.y, radius, 0, Math.PI * 2);
          ctx.fillStyle = `rgba(93,202,165,${alpha})`;
          ctx.fill();
        } else {
          if (!front) return;
          const alpha = 0.04 + p.z * 0.08;
          ctx.beginPath(); ctx.arc(p.x, p.y, 0.5, 0, Math.PI * 2);
          ctx.fillStyle = `rgba(60,140,180,${alpha})`;
          ctx.fill();
        }
      });

      arcs.forEach(([ai, bi]) => {
        const pa = rot(cityPts[ai]), pb = rot(cityPts[bi]);
        if (pa.z < 0.1 && pb.z < 0.1) return;
        const alpha = Math.min(pa.z, pb.z, 1) * 0.35;
        if (alpha < 0.03) return;

        const midX = (pa.x + pb.x) / 2, midY = (pa.y + pb.y) / 2;
        const dx = pb.x - pa.x, dy = pb.y - pa.y;
        const dist = Math.sqrt(dx * dx + dy * dy);
        const lift = dist * 0.3;
        const nx = -dy / dist, ny = dx / dist;
        const cpx = midX + nx * lift, cpy = midY + ny * lift;

        ctx.beginPath();
        ctx.moveTo(pa.x, pa.y);
        ctx.quadraticCurveTo(cpx, cpy, pb.x, pb.y);
        ctx.strokeStyle = `rgba(93,202,165,${alpha})`;
        ctx.lineWidth = 1;
        ctx.stroke();

        const t = (time * 0.4 + ai * 1.7) % 1;
        const t1 = 1 - t;
        const px = t1 * t1 * pa.x + 2 * t1 * t * cpx + t * t * pb.x;
        const py = t1 * t1 * pa.y + 2 * t1 * t * cpy + t * t * pb.y;
        const pg = ctx.createRadialGradient(px, py, 0, px, py, 5);
        pg.addColorStop(0, `rgba(200,255,235,${alpha * 2})`);
        pg.addColorStop(0.4, `rgba(93,202,165,${alpha})`);
        pg.addColorStop(1, 'rgba(93,202,165,0)');
        ctx.beginPath(); ctx.arc(px, py, 5, 0, Math.PI * 2);
        ctx.fillStyle = pg; ctx.fill();
      });

      cityPts.forEach((c, i) => {
        const p = rot(c);
        if (p.z < 0.05) return;
        const alpha = 0.6 + p.z * 0.4;
        const glow = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, 6);
        glow.addColorStop(0, `rgba(255,255,240,${alpha})`);
        glow.addColorStop(0.3, `rgba(93,202,165,${alpha * 0.6})`);
        glow.addColorStop(1, 'rgba(93,202,165,0)');
        ctx.beginPath(); ctx.arc(p.x, p.y, 6, 0, Math.PI * 2);
        ctx.fillStyle = glow; ctx.fill();
        ctx.beginPath(); ctx.arc(p.x, p.y, 1.8, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(255,255,255,${alpha})`;
        ctx.fill();
      });

      if (!isDragging && autoRotate) rotY += 0.002;
      animId = requestAnimationFrame(draw);
    }

    draw();
    return () => {
      cancelAnimationFrame(animId);
      canvas.removeEventListener('mousedown', onMouseDown);
      window.removeEventListener('mousemove', onMouseMove);
      window.removeEventListener('mouseup', onMouseUp);
      canvas.removeEventListener('touchstart', onTouchStart);
      window.removeEventListener('touchmove', onTouchMove);
      window.removeEventListener('touchend', onTouchEnd);
    };
  }, [size]);

  return <canvas ref={canvasRef} style={{ display: 'block', background: 'transparent' }} />;
}

// ── Home Screen ───────────────────────────────────────────────────────────────
function HomeScreen({ onNavigate }) {
  const services = [
    { title: 'Commercial strategy', desc: 'Go-to-market planning rooted in commercial clarity and execution.' },
    { title: 'Sales process design', desc: 'Pipeline optimisation that turns activity into revenue.' },
    { title: 'CRM & tooling', desc: 'Build, configure, and integrate the systems your team actually uses.' },
    { title: 'AI integration', desc: 'Embed AI into commercial workflows — practical, not theoretical.' },
  ];

  return (
    <div style={{ fontFamily: altusTokens.font }}>

      {/* Hero — full bleed dark with globe */}
      <section style={{
        background: `radial-gradient(ellipse 80% 100% at 65% 50%, rgba(10,61,92,0.55) 0%, ${altusTokens.deep} 65%)`,
        minHeight: '100vh', display: 'flex', alignItems: 'center', overflow: 'hidden',
        position: 'relative',
      }}>
        {/* Star particles */}
        <div style={{
          position: 'absolute', inset: 0, pointerEvents: 'none',
          backgroundImage: [
            'radial-gradient(1px 1px at 8% 15%, rgba(255,255,255,0.55) 0%, transparent 100%)',
            'radial-gradient(1px 1px at 22% 72%, rgba(255,255,255,0.35) 0%, transparent 100%)',
            'radial-gradient(1px 1px at 37% 8%,  rgba(255,255,255,0.45) 0%, transparent 100%)',
            'radial-gradient(1px 1px at 51% 88%, rgba(255,255,255,0.3)  0%, transparent 100%)',
            'radial-gradient(1px 1px at 78% 22%, rgba(255,255,255,0.5)  0%, transparent 100%)',
            'radial-gradient(1px 1px at 91% 60%, rgba(255,255,255,0.4)  0%, transparent 100%)',
            'radial-gradient(1.5px 1.5px at 14% 90%, rgba(93,202,165,0.35) 0%, transparent 100%)',
            'radial-gradient(1px 1px at 64% 44%, rgba(255,255,255,0.3)  0%, transparent 100%)',
          ].join(','),
        }} />

        {/* Hero background image with slow zoom */}
        <div className="hero-bg-image" style={{ opacity: 0.75 }} />
        {/* Dark gradient overlay for text readability */}
        <div style={{
          position: 'absolute', inset: 0, zIndex: 1,
          background: `linear-gradient(135deg, rgba(13,27,42,0.92) 0%, rgba(13,27,42,0.65) 40%, rgba(10,61,92,0.4) 100%)`,
        }} />

        <div style={{
          maxWidth: 1200, margin: '0 auto', padding: '100px 48px 80px',
          width: '100%', position: 'relative', zIndex: 2,
        }}>
          <div style={{ maxWidth: 560 }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              fontSize: 11, fontWeight: 500, letterSpacing: '0.18em',
              textTransform: 'uppercase', color: altusTokens.mint, marginBottom: 20,
            }}>
              <span style={{ display: 'block', width: 20, height: 1.5, background: altusTokens.mint }}></span>
              Strategy · Tools · Growth
            </div>
            <h1 style={{
              fontSize: 'clamp(40px, 5vw, 64px)', fontWeight: 500, color: '#FFFFFF',
              letterSpacing: '-0.02em', lineHeight: 1.08, margin: '0 0 20px',
            }}>
              We help businesses<br />
              <span style={{ color: altusTokens.mint }}>sell better.</span>
            </h1>
            <p style={{
              color: 'rgba(255,255,255,0.65)', fontSize: 17, lineHeight: 1.7,
              maxWidth: 460, margin: '0 0 36px', fontWeight: 300,
            }}>
              Altus builds the tools and strategy companies need to grow. Commercial clarity, not consultancy theatre.
            </p>
            <div style={{ display: 'flex', gap: 12 }}>
              <AltusButton size="lg" onClick={() => onNavigate('contact')}>Let's talk</AltusButton>
              <AltusButton size="lg" variant="ghost_light" onClick={() => onNavigate('services')}>See our work</AltusButton>
            </div>
            {/* Stats */}
            <div className="hero-stats" style={{
              display: 'flex', flexWrap: 'wrap', gap: 32, marginTop: 48, paddingTop: 32,
              borderTop: '1px solid rgba(255,255,255,0.08)',
            }}>
              {[['$16M+','Assets managed'],['10+','Years commercial experience'],['3','Products in development']].map(([n,l]) => (
                <div key={l}>
                  <div style={{ fontFamily: altusTokens.font, fontSize: 26, fontWeight: 600, color: altusTokens.mint, letterSpacing: '-0.02em' }}>{n}</div>
                  <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.4)', marginTop: 2, letterSpacing: '0.03em' }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Scroll hint */}
        <div style={{
          position: 'absolute', bottom: 28, left: '50%', transform: 'translateX(-50%)',
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, opacity: 0.4,
        }}>
          <span style={{ fontSize: 10, letterSpacing: '0.15em', textTransform: 'uppercase', color: altusTokens.mint }}>Scroll</span>
          <div style={{ width: 16, height: 16, borderRight: `1.5px solid ${altusTokens.mint}`, borderBottom: `1.5px solid ${altusTokens.mint}`, transform: 'rotate(45deg)' }} />
        </div>
      </section>

      {/* Mission strip */}
      <section style={{ background: altusTokens.teal, padding: '32px' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', gap: 24 }}>
          <p style={{ color: altusTokens.white, fontSize: 20, fontWeight: 500, margin: 0, flex: '1 1 320px' }}>
            We help businesses sell better, operate smarter, and grow faster.
          </p>
          <AltusButton variant="ghost_light" onClick={() => onNavigate('services')}>How we do it</AltusButton>
        </div>
      </section>

      {/* Services */}
      <section style={{ padding: '80px 32px', background: altusTokens.deep }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <SectionLabel>What we do</SectionLabel>
          <h2 style={{ fontSize: 36, fontWeight: 500, color: altusTokens.white, margin: '0 0 40px', letterSpacing: '-0.01em' }}>
            Commercial expertise,<br />end to end.
          </h2>
          <div className="cols-2" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
            {services.map((s, i) => (
              <div key={i} className="altus-card" style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(93,202,165,0.12)', borderRadius: 12, padding: 24 }}>
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 16 }}>
                  <div style={{
                    width: 36, height: 36, borderRadius: 8,
                    background: 'rgba(93,202,165,0.1)', flexShrink: 0,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    <AltusMonogram size={18} color={altusTokens.mint} />
                  </div>
                  <div>
                    <h3 style={{ fontSize: 17, fontWeight: 500, color: altusTokens.white, margin: '0 0 6px' }}>{s.title}</h3>
                    <p style={{ fontSize: 14, color: 'rgba(255,255,255,0.5)', lineHeight: 1.6, margin: 0 }}>{s.desc}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Brand values */}
      <section style={{ padding: '80px 32px', background: 'rgba(10,61,92,0.2)', borderTop: '1px solid rgba(93,202,165,0.08)', borderBottom: '1px solid rgba(93,202,165,0.08)' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <SectionLabel>How we work</SectionLabel>
          <h2 style={{ fontSize: 36, fontWeight: 500, color: altusTokens.white, margin: '0 0 40px' }}>
            No jargon. No fluff.
          </h2>
          <div className="cols-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
            {[
              { label: 'Direct', desc: 'Say what you mean in the fewest words possible.' },
              { label: 'Confident', desc: 'Speak from experience. The work speaks for itself.' },
              { label: 'Approachable', desc: 'Serious about results, never stuffy. Clients are partners.' },
              { label: 'Commercial', desc: 'Every engagement is moving something forward.' },
            ].map((v, i) => (
              <div key={i} className="altus-card" style={{ padding: '24px', border: '1px solid rgba(93,202,165,0.12)', borderRadius: 12, background: 'rgba(93,202,165,0.03)' }}>
                <div style={{ fontSize: 13, fontWeight: 500, color: altusTokens.mint, marginBottom: 8, letterSpacing: '0.04em' }}>{v.label}</div>
                <p style={{ fontSize: 13, color: 'rgba(255,255,255,0.5)', lineHeight: 1.6, margin: 0 }}>{v.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Sub-brands */}
      <section style={{ padding: '80px 32px', background: altusTokens.midnight }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <SectionLabel>Products</SectionLabel>
          <h2 style={{ fontSize: 36, fontWeight: 500, color: altusTokens.white, margin: '0 0 12px' }}>
            Built under the Altus umbrella.
          </h2>
          <p style={{ color: 'rgba(255,255,255,0.55)', fontSize: 15, marginBottom: 40, lineHeight: 1.6, maxWidth: 480 }}>
            Every product inherits the Altus DNA — commercial focus, clean execution, real results.
          </p>
          <div className="cols-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
            {[
              { name: 'Move', tagline: 'Removals CRM and operations platform', desc: 'Purpose-built for the removals industry. Manage jobs, customers, and teams in one place.' },
              { name: 'Energy', tagline: 'Energy sector commercial tools', desc: 'Bespoke commercial tooling for energy businesses navigating complex sales cycles.' },
              { name: 'AI', tagline: 'AI integration and automation', desc: 'Practical AI embedded directly into your commercial workflows. No hype, just results.' },
            ].map((p, i) => (
              <div key={i} className="altus-card" style={{ background: 'rgba(255,255,255,0.05)', borderRadius: 12, padding: 24, border: '1px solid rgba(93,202,165,0.15)' }}>
                <div style={{ marginBottom: 16 }}>
                  <span style={{ fontWeight: 500, fontSize: 17, color: altusTokens.white, letterSpacing: '0.02em' }}>ALTUS </span>
                  <span style={{ fontWeight: 500, fontSize: 17, color: altusTokens.mint }}>{p.name}</span>
                </div>
                <Badge variant="midnight">{p.tagline}</Badge>
                <p style={{ color: 'rgba(255,255,255,0.6)', fontSize: 13, lineHeight: 1.6, margin: '12px 0 0' }}>{p.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA strip */}
      <section style={{ padding: '80px 32px', background: altusTokens.deep }}>
        <div style={{ maxWidth: 600, margin: '0 auto', textAlign: 'center' }}>
          <h2 style={{ fontSize: 40, fontWeight: 500, color: altusTokens.white, margin: '0 0 16px', letterSpacing: '-0.01em' }}>
            Ready to grow faster?
          </h2>
          <p style={{ color: 'rgba(255,255,255,0.5)', fontSize: 16, lineHeight: 1.6, margin: '0 0 32px' }}>
            Tell us where you are and where you want to go. We'll take it from there.
          </p>
          <AltusButton size="lg" onClick={() => onNavigate('contact')}>Let's talk</AltusButton>
        </div>
      </section>
    </div>
  );
}

// ── Services Screen ───────────────────────────────────────────────────────────
function ServicesScreen({ onNavigate }) {
  const services = [
    {
      category: 'Strategy',
      title: 'Commercial strategy & go-to-market',
      desc: 'We work with founders and commercial leaders to define where to play and how to win. Market analysis, positioning, pricing, and a clear plan to execute against.',
      deliverables: ['Market positioning', 'GTM plan', 'Pricing model', 'ICP definition'],
    },
    {
      category: 'Process',
      title: 'Sales process design & pipeline optimisation',
      desc: 'Most sales problems are process problems. We map your current pipeline, identify where deals are stuck, and rebuild the process from the ground up.',
      deliverables: ['Pipeline audit', 'Stage definitions', 'Playbooks', 'KPI framework'],
    },
    {
      category: 'Tools',
      title: 'CRM build, configuration & integration',
      desc: 'A CRM you actually use. We build, configure, and integrate the right tooling for your team — whether that\'s HubSpot, a custom build, or something in between.',
      deliverables: ['CRM setup', 'Workflow automation', 'Integrations', 'Training'],
    },
    {
      category: 'AI',
      title: 'AI integration into commercial workflows',
      desc: 'Practical AI that saves time and surfaces insight — embedded into the workflows your team already uses. No experiments. No hype.',
      deliverables: ['Workflow mapping', 'AI tool selection', 'Custom automations', 'Measurement'],
    },
  ];

  return (
    <div style={{ fontFamily: altusTokens.font }}>
      <section style={{ background: altusTokens.midnight, padding: '72px 32px 64px' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <SectionLabel>Services</SectionLabel>
          <h1 style={{ fontSize: 48, fontWeight: 500, color: altusTokens.white, margin: '0 0 16px', letterSpacing: '-0.01em', lineHeight: 1.15 }}>
            What Altus does.
          </h1>
          <p style={{ color: 'rgba(255,255,255,0.6)', fontSize: 16, lineHeight: 1.6, maxWidth: 480, margin: 0 }}>
            Commercial strategy, process design, tooling, and AI — in any combination.
          </p>
        </div>
      </section>

      <section style={{ padding: '64px 32px', background: altusTokens.deep }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 20 }}>
          {services.map((s, i) => (
            <div key={i} className="service-row altus-card" style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 32, background: 'rgba(10,61,92,0.35)', border: '1px solid rgba(93,202,165,0.15)', borderRadius: 12, padding: 32 }}>
              <div>
                <Badge variant="midnight">{s.category}</Badge>
                <h3 style={{ fontSize: 20, fontWeight: 500, color: altusTokens.white, margin: '12px 0 0', lineHeight: 1.35 }}>{s.title}</h3>
              </div>
              <div>
                <p style={{ fontSize: 15, color: 'rgba(255,255,255,0.75)', lineHeight: 1.7, margin: '0 0 20px' }}>{s.desc}</p>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                  {s.deliverables.map(d => <Badge key={d} variant="glass">{d}</Badge>)}
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      <section style={{ padding: '64px 32px', background: altusTokens.teal, textAlign: 'center' }}>
        <h2 style={{ fontSize: 32, fontWeight: 500, color: altusTokens.white, margin: '0 0 16px' }}>
          Need something specific?
        </h2>
        <p style={{ color: 'rgba(255,255,255,0.7)', fontSize: 15, margin: '0 0 28px' }}>Tell us where you're stuck. We'll figure out the right approach.</p>
        <AltusButton size="lg" variant="dark" onClick={() => onNavigate('contact')}>Get in touch</AltusButton>
      </section>
    </div>
  );
}

// ── Contact Screen ────────────────────────────────────────────────────────────
function ContactScreen() {
  const [submitted, setSubmitted] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [error, setError] = React.useState(null);
  const [form, setForm] = React.useState({ name: '', email: '', company: '', message: '' });

  const FORMSPREE_ID = 'xaqvvaog';

  const inputStyle = {
    width: '100%', fontFamily: altusTokens.font, fontSize: 15,
    padding: '13px 16px', borderRadius: 10, border: '1px solid rgba(93,202,165,0.25)',
    background: 'rgba(10,61,92,0.35)', color: altusTokens.white,
    outline: 'none', transition: 'border-color 200ms, box-shadow 200ms',
    boxSizing: 'border-box',
  };
  const labelStyle = { fontFamily: altusTokens.font, fontSize: 13, fontWeight: 500, color: altusTokens.mint, display: 'block', marginBottom: 8 };

  const handleSubmit = (e) => {
    e.preventDefault();
    setSending(true);
    setError(null);
    fetch(`https://formspree.io/f/${FORMSPREE_ID}`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
      body: JSON.stringify(form),
    })
      .then(res => {
        if (res.ok) { setSubmitted(true); }
        else { setError('Something went wrong. Please try again.'); }
      })
      .catch(() => setError('Network error. Please check your connection.'))
      .finally(() => setSending(false));
  };

  return (
    <div style={{ fontFamily: altusTokens.font, minHeight: '80vh' }}>
      <section style={{ background: altusTokens.midnight, padding: '72px 32px 64px' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <SectionLabel>Contact</SectionLabel>
          <h1 style={{ fontSize: 48, fontWeight: 500, color: altusTokens.white, margin: '0 0 12px', letterSpacing: '-0.01em' }}>Let's talk.</h1>
          <p style={{ color: 'rgba(255,255,255,0.6)', fontSize: 16, lineHeight: 1.6, margin: 0 }}>
            Tell us where you are and where you want to go.
          </p>
        </div>
      </section>

      <section style={{ padding: '64px 32px', background: altusTokens.deep }}>
        <div style={{ maxWidth: 600, margin: '0 auto' }}>
          {submitted ? (
            <div style={{
              textAlign: 'center', padding: '56px 36px',
              background: 'linear-gradient(160deg, rgba(10,61,92,0.5) 0%, rgba(13,27,42,0.9) 100%)',
              border: '1px solid rgba(93,202,165,0.25)',
              borderRadius: 16,
              boxShadow: '0 0 40px rgba(93,202,165,0.08), 0 4px 24px rgba(0,0,0,0.3)',
            }}>
              <AltusMonogram size={40} color={altusTokens.mint} />
              <h2 style={{ fontSize: 24, fontWeight: 500, color: altusTokens.white, margin: '16px 0 8px' }}>Done. You're all set.</h2>
              <p style={{ color: 'rgba(255,255,255,0.5)', fontSize: 15, lineHeight: 1.6, margin: 0 }}>We'll be in touch shortly. Speak soon.</p>
            </div>
          ) : (
            <div style={{
              background: 'linear-gradient(160deg, rgba(10,61,92,0.5) 0%, rgba(13,27,42,0.9) 100%)',
              border: '1px solid rgba(93,202,165,0.25)',
              borderRadius: 16,
              padding: '40px 36px',
              boxShadow: '0 0 40px rgba(93,202,165,0.08), 0 4px 24px rgba(0,0,0,0.3)',
            }}>
              <h3 style={{ fontFamily: altusTokens.font, fontSize: 20, fontWeight: 500, color: altusTokens.white, margin: '0 0 6px' }}>Send us a message</h3>
              <p style={{ fontFamily: altusTokens.font, fontSize: 14, color: 'rgba(255,255,255,0.45)', margin: '0 0 28px', lineHeight: 1.5 }}>We'll get back to you within 24 hours.</p>
              <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
                <div className="form-row-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                  <div>
                    <label style={labelStyle}>Name</label>
                    <input style={inputStyle} placeholder="Alasdair Johnston" value={form.name} onChange={e => setForm(f => ({...f, name: e.target.value}))} required />
                  </div>
                  <div>
                    <label style={labelStyle}>Email</label>
                    <input style={inputStyle} type="email" placeholder="you@company.com" value={form.email} onChange={e => setForm(f => ({...f, email: e.target.value}))} required />
                  </div>
                </div>
                <div>
                  <label style={labelStyle}>Company</label>
                  <input style={inputStyle} placeholder="Your company" value={form.company} onChange={e => setForm(f => ({...f, company: e.target.value}))} />
                </div>
                <div>
                  <label style={labelStyle}>What do you need?</label>
                  <textarea
                    style={{ ...inputStyle, height: 120, resize: 'vertical', lineHeight: 1.6 }}
                    placeholder="Tell us where you're stuck or what you're trying to build."
                    value={form.message}
                    onChange={e => setForm(f => ({...f, message: e.target.value}))}
                    required
                  />
                </div>
                {error && <p style={{ color: altusTokens.errorRed, fontSize: 14, margin: 0 }}>{error}</p>}
                <AltusButton size="md" style={{ alignSelf: 'flex-start', opacity: sending ? 0.6 : 1 }}>{sending ? 'Sending...' : 'Send message'}</AltusButton>
              </form>
            </div>
          )}
        </div>
      </section>
    </div>
  );
}

// ── Privacy Policy Screen ────────────────────────────────────────────────────
function PrivacyScreen() {
  const sectionStyle = { marginBottom: 32 };
  const headingStyle = { fontSize: 18, fontWeight: 500, color: altusTokens.white, margin: '0 0 12px' };
  const textStyle = { fontSize: 14, color: 'rgba(255,255,255,0.65)', lineHeight: 1.8, margin: 0 };

  return (
    <div style={{ fontFamily: altusTokens.font }}>
      <section style={{ background: altusTokens.midnight, padding: '72px 32px 64px' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <SectionLabel>Legal</SectionLabel>
          <h1 style={{ fontSize: 48, fontWeight: 500, color: altusTokens.white, margin: '0 0 12px', letterSpacing: '-0.01em' }}>Privacy Policy</h1>
          <p style={{ color: 'rgba(255,255,255,0.6)', fontSize: 16, lineHeight: 1.6, margin: 0 }}>
            Last updated: May 2026
          </p>
        </div>
      </section>

      <section style={{ padding: '64px 32px', background: altusTokens.deep }}>
        <div style={{ maxWidth: 720, margin: '0 auto' }}>
          <div style={sectionStyle}>
            <h2 style={headingStyle}>Who we are</h2>
            <p style={textStyle}>Altus Commercial ("we", "us", "our") operates altus-consultancy.com. This policy explains how we collect, use, and protect your information when you use our website.</p>
          </div>
          <div style={sectionStyle}>
            <h2 style={headingStyle}>What we collect</h2>
            <p style={textStyle}>We only collect information you voluntarily provide through our contact form: your name, email address, company name, and message. We do not use cookies for tracking. We may use privacy-respecting analytics to understand aggregate site usage (page views, referrers). No personal data is sold or shared with third parties for marketing.</p>
          </div>
          <div style={sectionStyle}>
            <h2 style={headingStyle}>How we use your data</h2>
            <p style={textStyle}>Contact form submissions are used solely to respond to your enquiry. Your details are processed by Formspree (our form handler) and forwarded to us via email. We do not add you to any mailing list unless you explicitly opt in.</p>
          </div>
          <div style={sectionStyle}>
            <h2 style={headingStyle}>Data retention</h2>
            <p style={textStyle}>Contact form submissions are retained only as long as needed to respond to your enquiry. You can request deletion of your data at any time by emailing us.</p>
          </div>
          <div style={sectionStyle}>
            <h2 style={headingStyle}>Your rights</h2>
            <p style={textStyle}>You have the right to access, correct, or delete any personal data we hold about you. To exercise these rights, contact us via the contact form or by email.</p>
          </div>
          <div style={sectionStyle}>
            <h2 style={headingStyle}>Contact</h2>
            <p style={textStyle}>For any questions about this privacy policy, please use the contact form on our website.</p>
          </div>
        </div>
      </section>
    </div>
  );
}

// Export screens
Object.assign(window, { HomeScreen, ServicesScreen, ContactScreen, PrivacyScreen });