/* global React, Btn, Reveal */

// ============================================================================
//  Studio + Creator tracks
// ============================================================================

function StudioRig() {
  // 12 cameras around a circle
  const cams = Array.from({ length: 12 }, (_, i) => {
    const angle = (i / 12) * Math.PI * 2 - Math.PI / 2;
    const r = 42; // percent of half-width
    const x = 50 + Math.cos(angle) * r;
    const y = 50 + Math.sin(angle) * r * 0.78;
    return { x, y, i };
  });
  return (
    <div className="studio-vis" aria-hidden="true">
      <div className="studio-vis__rig">
        <div className="studio-vis__center"/>
      </div>
      <div className="studio-vis__ring"/>
      <div className="studio-vis__ring studio-vis__ring--2"/>
      {cams.map(c => (
        <div key={c.i} className="studio-vis__cam" style={{ left: `${c.x}%`, top: `${c.y}%`, transform: "translate(-50%, -50%)" }}/>
      ))}
      <div className="studio-vis__corner" style={{ top: 16, left: 16 }}>
        <b>RIG_A</b> · 12 of 48
      </div>
      <div className="studio-vis__corner" style={{ bottom: 16, left: 16 }}>
        Calib <b>✓</b> · Sync <b>✓</b>
      </div>
      <div className="studio-vis__corner" style={{ bottom: 16, right: 16 }}>
        4D · <b>23.97 fps</b>
      </div>
    </div>
  );
}

function StudioTrack() {
  return (
    <section className="track" id="studio">
      <div className="page">
        <div className="track__grid">
          <Reveal className="track__copy">
            <div className="eyebrow">Studio</div>
            <h2 className="headline">Studio-grade volumetric capture,<br/><span className="accent">software-first.</span></h2>
            <p className="lede">
              Bring your own cameras. Our software handles the rest — from
              calibration to final volumetric output, including Gaussian splats
              and 4D sequences. Built for studios that need quality, control,
              and a real workflow.
            </p>
            <ul className="track__bullets">
              <li>Multi-camera capture from existing studio setups</li>
              <li>Outputs include mesh sequences, Gaussian splats, 4D</li>
              <li>Works at any scale — from compact rigs to full sound stages</li>
              <li>Used across film, sports, virtual production, and immersive</li>
            </ul>
            <div className="track__cta">
              <Btn variant="primary" href="#contact" withArrow>See Studio</Btn>
              <Btn variant="ghost" href="#contact">Book a demo</Btn>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <StudioRig/>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function CreatorVis() {
  return (
    <div className="creator-vis-wrap">
      <div className="creator-vis" aria-hidden="true">
        <div className="creator-vis__topbar">
          <span className="dot"/><span className="dot"/><span className="dot"/>
          <span className="file">upload.mp4 · 12.4 MB</span>
        </div>
        <div className="creator-vis__steps">
          <div className="creator-vis__step creator-vis__step--in"/>
          <div className="creator-vis__arrow">
            <span>AI pipeline</span>
            <div className="bar"/>
            <span>~ 4 min</span>
          </div>
          <div className="creator-vis__step creator-vis__step--out"/>
        </div>
        <div className="creator-vis__badge">Vologram · <b>web · AR</b></div>
      </div>
    </div>
  );
}

function CreatorTrack() {
  return (
    <section className="track track--reverse" id="creator">
      <div className="page">
        <div className="track__grid">
          <Reveal className="track__copy">
            <div className="eyebrow">Creator</div>
            <h2 className="headline">Turn any video<br/>into a <span className="accent">3D hologram</span>.</h2>
            <p className="lede">
              Upload a video, get back a vologram you can view, share, and embed
              anywhere. Built on our AI capture pipeline — also available via
              API. Includes Volu for mobile capture and Vologram Messages for
              WebAR distribution.
            </p>
            <ul className="track__bullets">
              <li>Single-camera video → 3D, in minutes</li>
              <li>Share on web with a built-in AR viewer</li>
              <li>API access for developers and product teams</li>
              <li>Free tier — try it without signing anything</li>
            </ul>
            <div className="track__cta">
              <Btn variant="gradient" href="#contact" withArrow>Try Creator</Btn>
              <Btn variant="ghost" href="#contact">View API docs</Btn>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <CreatorVis/>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { StudioTrack, CreatorTrack });