// tenants-section.jsx — multi-tenant split animation

const TenantsSection = () => {
  const ref = React.useRef(null);
  const progress = useScrollProgress(ref);

  // Split progress: 0 = single block, 1 = three tenants separated
  const split = Math.max(0, Math.min(1, (progress - 0.3) * 2.2));
  const easeOut = 1 - Math.pow(1 - split, 3);

  const tenants = [
    { name: 'ACME CORP',     users: '124 users', slug: 'acme',     tokens: 8 },
    { name: 'FINSOL BANK',   users: '512 users', slug: 'finsol',   tokens: 24 },
    { name: 'MEDICA HEALTH', users: '89 users',  slug: 'medica',   tokens: 6 },
  ];

  return (
    <section
      ref={ref}
      data-screen-label="05 Multi-tenant"
      style={{
        position: 'relative',
        minHeight: '130vh',
        background: '#0d0d0d',
        color: '#f9f9f9',
        overflow: 'hidden',
      }}
    >
      {/* Subtle grid */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'linear-gradient(rgba(161,247,94,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(161,247,94,0.04) 1px, transparent 1px)',
        backgroundSize: '80px 80px',
      }}/>

      <div style={{
        position: 'sticky', top: 0, height: '100vh',
        display: 'flex', flexDirection: 'column',
        padding: '80px clamp(24px, 5vw, 60px) 40px',
        maxWidth: 1400, margin: '0 auto',
      }}>
        <div style={{ maxWidth: '60ch' }}>
          <Reveal>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase',
              fontWeight: 600, marginBottom: 20, color: '#a1f75e',
            }}>
              <span style={{ width: 9, height: 9, background: '#a1f75e', display: 'inline-block' }} />
              04 · Multi-tenant
            </div>
          </Reveal>
          <Reveal delay={150}>
            <h2 style={{
              fontSize: 'clamp(36px, 5.2vw, 72px)',
              fontWeight: 600,
              lineHeight: 1.02,
              letterSpacing: '-0.025em',
              margin: 0,
            }}>
              Una plataforma.<br/>
              <span style={{ color: '#a1f75e' }}>Muchas organizaciones.</span><br/>
              Aisladas por diseño.
            </h2>
          </Reveal>
        </div>

        {/* Split visual */}
        <div style={{
          flex: 1,
          position: 'relative',
          marginTop: 40,
        }}>
          {tenants.map((tenant, i) => {
            const offset = (i - 1); // -1, 0, 1
            const finalLeft = 20 + i * 30; // percentages
            const initialLeft = 35; // stacked center-ish
            const leftPct = initialLeft + (finalLeft - initialLeft) * easeOut;
            const topPct = 10 + offset * 3 * (1 - easeOut) + easeOut * (10 + (i % 2) * 15);
            const rotate = offset * 3 * (1 - easeOut);
            const scale = 0.92 + easeOut * 0.08;
            const opacity = i === 1 ? 1 : (0.35 + easeOut * 0.65);
            const zIndex = i === 1 ? 3 : (easeOut > 0.5 ? 2 : 1);

            return (
              <div
                key={tenant.slug}
                style={{
                  position: 'absolute',
                  left: `${leftPct}%`,
                  top: `${topPct}%`,
                  width: 'min(280px, 26vw)',
                  transform: `translateX(-50%) rotate(${rotate}deg) scale(${scale})`,
                  opacity,
                  zIndex,
                  background: i === 1 ? '#a1f75e' : '#f9f9f9',
                  color: '#0d0d0d',
                  padding: '20px 24px',
                  boxShadow: '0 30px 60px rgba(0,0,0,0.5)',
                  transition: 'none',
                }}
              >
                <div style={{
                  fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase',
                  fontWeight: 600, color: i === 1 ? '#0d0d0d' : 'rgba(13,13,13,0.55)',
                  marginBottom: 12,
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                }}>
                  <span>TENANT · {tenant.slug}</span>
                  <span style={{ width: 8, height: 8, background: '#0d0d0d' }}/>
                </div>
                <div style={{
                  fontFamily: "'Public Sans', sans-serif",
                  fontSize: 22, fontWeight: 700, letterSpacing: '-0.01em',
                  marginBottom: 16,
                }}>
                  {tenant.name}
                </div>
                <div style={{
                  display: 'grid', gap: 8,
                  fontFamily: "'JetBrains Mono', ui-monospace, monospace",
                  fontSize: 12,
                  color: i === 1 ? '#0d0d0d' : 'rgba(13,13,13,0.75)',
                }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <span>users</span><span style={{ fontWeight: 600 }}>{tenant.users.replace(' users','')}</span>
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <span>mcp_tokens</span><span style={{ fontWeight: 600 }}>{tenant.tokens}</span>
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <span>posts</span><span style={{ fontWeight: 600 }}>{(i + 1) * 214}</span>
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <span>chunks</span><span style={{ fontWeight: 600 }}>{(i + 1) * 8400}</span>
                  </div>
                </div>
              </div>
            );
          })}

          {/* Connecting lines from top platform to each tenant (appear as split completes) */}
          <svg style={{
            position: 'absolute', inset: 0, width: '100%', height: '100%',
            pointerEvents: 'none', opacity: easeOut * 0.6,
          }} preserveAspectRatio="none" viewBox="0 0 100 100">
            {[20, 50, 80].map((x) => (
              <line key={x} x1={50} y1={0} x2={x} y2={25}
                    stroke="#a1f75e" strokeWidth="0.15" strokeDasharray="1 1"/>
            ))}
          </svg>

          {/* Platform label up top */}
          <div style={{
            position: 'absolute', left: '50%', top: -8,
            transform: 'translateX(-50%)',
            fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase',
            fontWeight: 600, color: 'rgba(255,255,255,0.5)',
            display: 'inline-flex', alignItems: 'center', gap: 10,
          }}>
            <span style={{ width: 9, height: 9, background: '#a1f75e' }} />
            Nexus platform
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { TenantsSection });