// Hero section — 3D parallax stage + rotating tenant brand swap
const { useState, useEffect, useRef } = React;

const TENANTS = [
  { name: "Lumen", mark: "L", color: "#007fdc", tint: "#e6f4fd" },
  { name: "Kairo", mark: "K", color: "#10B87A", tint: "#E6F8F0" },
  { name: "Nexa", mark: "N", color: "#8B5CF6", tint: "#F0E9FD" },
  { name: "Orbit", mark: "O", color: "#F59E0B", tint: "#FEF3E0" },
  { name: "Helix", mark: "H", color: "#EF4444", tint: "#FEE9E9" },
  { name: "Zenith", mark: "Z", color: "#0EA5E9", tint: "#E0F2FE" },
];

function Hero() {
  const stageRef = useRef(null);
  const innerRef = useRef(null);
  const [tenantIdx, setTenantIdx] = useState(0);
  const tenant = TENANTS[tenantIdx];

  // Cycle tenants
  useEffect(() => {
    const t = setInterval(() => setTenantIdx(i => (i + 1) % TENANTS.length), 2800);
    return () => clearInterval(t);
  }, []);

  // Mouse parallax on the 3D stage
  useEffect(() => {
    const stage = stageRef.current;
    const inner = innerRef.current;
    if (!stage || !inner) return;
    let raf;
    let tx = 0, ty = 0;
    const onMove = (e) => {
      const rect = stage.getBoundingClientRect();
      const cx = rect.left + rect.width / 2;
      const cy = rect.top + rect.height / 2;
      const dx = (e.clientX - cx) / rect.width;
      const dy = (e.clientY - cy) / rect.height;
      tx = dx * 12;
      ty = dy * -8;
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        inner.style.transform = `rotateY(${tx}deg) rotateX(${ty}deg)`;
      });
    };
    window.addEventListener('mousemove', onMove);
    return () => { window.removeEventListener('mousemove', onMove); cancelAnimationFrame(raf); };
  }, []);

  return (
    <section className="hero">
      <div className="orb orb-1"></div>
      <div className="orb orb-2"></div>
      <div className="container">
        <div className="hero-grid">
          <div className="hero-copy">
            <span className="eyebrow">
              <span className="eyebrow-tag">New</span>
              Whitelabel CRM · Live in 14–30 days
            </span>
            <h1>
              Your brand.<br />
              <em>Our CRM engine.</em><br />
              <span className="swap-wrap">
                <span className="swap" key={tenant.name} style={{ color: tenant.color, WebkitTextFillColor: tenant.color }}>
                  {tenant.name}.crm
                </span>
              </span>
            </h1>
            <p className="lede">
              Offer your own branded AI CRM to clients - fully built, customized and ready to sell in days.
            </p>
            <div className="hero-cta">
              <a className="btn btn-primary btn-lg" href="https://calendly.com/aiverest/45min">
                Get in touch <span className="arrow">→</span>
              </a>
              <a className="btn btn-outline btn-lg" href="#lab">Try the live preview</a>
            </div>
            <div className="hero-trust">
              <div style={{ display: 'flex', gap: 8, alignItems: 'center', fontSize: 13, color: 'var(--ink-500)' }}>
                <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#10B87A', boxShadow: '0 0 0 4px rgba(16,184,122,0.18)' }}></span>
                GDPR compliant · Encryption at rest &amp; in transit
              </div>
            </div>
          </div>

          <Stage3D stageRef={stageRef} innerRef={innerRef} tenant={tenant} />
        </div>
      </div>
    </section>
  );
}

function Stage3D({ stageRef, innerRef, tenant }) {
  return (
    <div className="stage" ref={stageRef}>
      <div className="stage-inner" ref={innerRef}>
        <div className="stage-grid"></div>

        {/* Side floating cards */}
        <div className="card-3d card-side card-side-1">
          <div className="mini-head">
            <span className="mini-title">Revenue</span>
            <span className="mini-chg">+24%</span>
          </div>
          <div className="mini-val" style={{ color: tenant.color, transition: 'color 0.6s' }}>$84,220</div>
          <div className="mini-bars">
            <span style={{ height: '40%', background: `linear-gradient(180deg, ${tenant.color}99, ${tenant.color})` }}></span>
            <span style={{ height: '65%', background: `linear-gradient(180deg, ${tenant.color}99, ${tenant.color})`, animationDelay: '0.1s' }}></span>
            <span style={{ height: '50%', background: `linear-gradient(180deg, ${tenant.color}99, ${tenant.color})`, animationDelay: '0.2s' }}></span>
            <span style={{ height: '80%', background: `linear-gradient(180deg, ${tenant.color}99, ${tenant.color})`, animationDelay: '0.3s' }}></span>
            <span style={{ height: '70%', background: `linear-gradient(180deg, ${tenant.color}99, ${tenant.color})`, animationDelay: '0.4s' }}></span>
            <span style={{ height: '95%', background: `linear-gradient(180deg, ${tenant.color}99, ${tenant.color})`, animationDelay: '0.5s' }}></span>
            <span style={{ height: '60%', background: `linear-gradient(180deg, ${tenant.color}99, ${tenant.color})`, animationDelay: '0.6s' }}></span>
          </div>
        </div>

        <div className="card-3d card-side card-side-2">
          <div className="mini-head">
            <span className="mini-title">Pipeline</span>
            <span className="mini-chg">↑ live</span>
          </div>
          <div className="mini-val" style={{ color: tenant.color, transition: 'color 0.6s' }}>248</div>
          <div style={{ fontSize: 11, color: 'var(--ink-500)', marginTop: 4 }}>open deals · 14 won this week</div>
          <div style={{ display: 'flex', gap: 3, marginTop: 10 }}>
            {[...Array(12)].map((_, i) => (
              <div key={i} style={{
                flex: 1, height: 8,
                background: i < 8 ? tenant.color : 'var(--blue-100)',
                borderRadius: 2, transition: 'background 0.6s'
              }}></div>
            ))}
          </div>
        </div>

        <div className="card-3d card-side card-side-3">
          <div className="mini-head">
            <span className="mini-title">AI Agent</span>
            <span style={{ fontSize: 10, color: '#00a86b', display: 'flex', alignItems: 'center', gap: 4 }}>
              <span style={{ width: 6, height: 6, background: '#00a86b', borderRadius: '50%', animation: 'bar 1s infinite' }}></span>
              Active
            </span>
          </div>
          <div style={{ fontSize: 12, color: 'var(--ink-700)', lineHeight: 1.5, marginTop: 6 }}>
            <em>"Drafted 14 follow-ups. Created marketing post for Instagram."</em>
          </div>
        </div>

        <div className="card-3d card-side card-side-4">
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{
              width: 36, height: 36, borderRadius: 10,
              background: tenant.color,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: 'white', fontWeight: 700, fontSize: 14,
              transition: 'background 0.6s',
              boxShadow: `0 4px 12px ${tenant.color}66`
            }}>{tenant.mark}</div>
            <div>
              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink-900)' }}>{tenant.name}<span style={{ color: tenant.color }}>.crm</span></div>
              <div style={{ fontSize: 10, color: 'var(--ink-500)' }}>Your tenant</div>
            </div>
          </div>
        </div>

        {/* Main dashboard card */}
        <div className="card-3d card-main">
          <div className="dash-top">
            <div className="dash-logo" style={{ background: tenant.color, boxShadow: `0 4px 10px ${tenant.color}66` }}>{tenant.mark}</div>
            <div className="dash-brand-name">
              {tenant.name}<span style={{ color: tenant.color }}>.crm</span>
            </div>
            <div className="dash-search"></div>
            <div className="dash-avatar"></div>
          </div>
          <div className="dash-body">
            <div className="dash-side">
              <div className="side-item active" style={{
                background: tenant.tint, color: tenant.color,
                transition: 'background 0.6s, color 0.6s'
              }}>
                <div className="side-dot" style={{ background: tenant.color, transition: 'background 0.6s' }}></div>
                Dashboard
              </div>
              <div className="side-item"><div className="side-dot"></div>Contacts</div>
              <div className="side-item"><div className="side-dot"></div>Pipeline</div>
              <div className="side-item"><div className="side-dot"></div>Deals</div>
              <div className="side-item"><div className="side-dot"></div>Inbox</div>
              <div className="side-item"><div className="side-dot"></div>AI Agent</div>
              <div className="side-item"><div className="side-dot"></div>Reports</div>
            </div>
            <div className="dash-main">
              <div className="dash-stats">
                <div className="stat-box">
                  <div className="stat-label">MRR</div>
                  <div className="stat-val" style={{ color: tenant.color, transition: 'color 0.6s' }}>$42.8k</div>
                  <div className="stat-chg">+12.4%</div>
                </div>
                <div className="stat-box">
                  <div className="stat-label">New leads</div>
                  <div className="stat-val">184</div>
                  <div className="stat-chg">+32%</div>
                </div>
                <div className="stat-box">
                  <div className="stat-label">Win rate</div>
                  <div className="stat-val">68%</div>
                  <div className="stat-chg">+4.1%</div>
                </div>
              </div>
              <div className="dash-chart">
                <svg className="chart-svg" viewBox="0 0 300 120" preserveAspectRatio="none">
                  <defs>
                    <linearGradient id="chartFill" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="0%" stopColor={tenant.color} stopOpacity="0.3" />
                      <stop offset="100%" stopColor={tenant.color} stopOpacity="0" />
                    </linearGradient>
                  </defs>
                  <path className="chart-fill" d="M 0 90 C 30 70, 50 80, 80 60 S 140 30, 170 40 S 230 20, 270 25 L 300 20 L 300 120 L 0 120 Z"
                    style={{ fill: `url(#chartFill)` }} />
                  <path className="chart-line" d="M 0 90 C 30 70, 50 80, 80 60 S 140 30, 170 40 S 230 20, 270 25 L 300 20"
                    style={{ stroke: tenant.color, transition: 'stroke 0.6s' }} />
                  {/* dots */}
                  <circle cx="80" cy="60" r="3" fill={tenant.color} style={{ transition: 'fill 0.6s' }} />
                  <circle cx="170" cy="40" r="3" fill={tenant.color} style={{ transition: 'fill 0.6s' }} />
                  <circle cx="270" cy="25" r="3" fill={tenant.color} style={{ transition: 'fill 0.6s' }} />
                </svg>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  );
}

window.Hero = Hero;
window.TENANTS = TENANTS;