/* global React, Btn, Reveal */

// ============================================================================
//  Why Volograms · Final CTA · Footer
// ============================================================================

function WhyVolograms() {
  return (
    <section className="section" id="company">
      <div className="page">
        <Reveal className="section__head">
          <div className="eyebrow">Why Volograms</div>
          <h2 className="headline">Volumetric video,<br/><span className="accent">before it was a category.</span></h2>
          <p className="lede">
            Spun out of Trinity College Dublin's V-SENSE research lab in 2018.
            Backed by Atlantic Bridge. Working with studios, brands, and
            developers across film, sports, and immersive media.
          </p>
        </Reveal>
        <Reveal>
          <div className="stats">
            <div className="stats__cell">
              <div className="stats__num"><span className="accent">7</span>+ yrs</div>
              <div className="stats__label">Volumetric R&amp;D</div>
              <div className="stats__desc">Building volumetric capture before it was a category.</div>
            </div>
            <div className="stats__cell">
              <div className="stats__num"><span className="accent">40</span>+</div>
              <div className="stats__label">Research papers</div>
              <div className="stats__desc">In 3D reconstruction, neural rendering, and AI.</div>
            </div>
            <div className="stats__cell">
              <div className="stats__num"><span className="accent">120</span>+</div>
              <div className="stats__label">Projects shipped</div>
              <div className="stats__desc">Across film, sports, immersive and brand work.</div>
            </div>
            <div className="stats__cell">
              <div className="stats__num">1 → <span className="accent">50</span>+</div>
              <div className="stats__label">Camera range</div>
              <div className="stats__desc">Same software, from a phone to a sound stage.</div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section className="section" id="contact">
      <div className="page">
        <Reveal className="section__head" style={{ textAlign: "center", margin: "0 auto 56px", alignItems: "center" }}>
          <div className="eyebrow" style={{ alignSelf: "center" }}>Get started</div>
          <h2 className="headline" style={{ textAlign: "center" }}>Two ways in. <span className="accent accent--grad">Pick yours.</span></h2>
        </Reveal>
        <div className="cta-split">
          <Reveal>
            <div className="cta-card cta-card--studio">
              <div className="cta-card__bg" aria-hidden="true"/>
              <div className="cta-card__eyebrow">For studios</div>
              <h3 className="cta-card__title">Building a volumetric studio?</h3>
              <p className="cta-card__desc">We'll help you spec the setup, deploy the software, and ship your first capture.</p>
              <div className="cta-card__cta">
                <Btn variant="primary" href="#" withArrow>Talk to us</Btn>
              </div>
            </div>
          </Reveal>
          <Reveal delay={100}>
            <div className="cta-card cta-card--creator">
              <div className="cta-card__bg" aria-hidden="true"/>
              <div className="cta-card__eyebrow">For creators &amp; devs</div>
              <h3 className="cta-card__title">Want to try volumetric capture yourself?</h3>
              <p className="cta-card__desc">Free tier, no commitment. Upload a video and see what comes back.</p>
              <div className="cta-card__cta">
                <Btn variant="gradient" href="#" withArrow>Open Creator</Btn>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function VolFooter() {
  return (
    <footer className="footer">
      <div className="page">
        <div className="footer__top">
          <div className="footer__brand">
            <a className="nav__logo" href="#top" aria-label="Volograms">
              <img src="assets/logo-with-name-white.png" alt="Volograms"/>
            </a>
            <p className="footer__tagline">Volumetric capture, at every scale. Spun out of Trinity College Dublin's V-SENSE lab in 2018.</p>
          </div>

          <div className="footer__col">
            <h4>Products</h4>
            <ul>
              <li><a href="#studio">Studio</a></li>
              <li><a href="#creator">Creator</a></li>
              <li><a href="#">Volu</a></li>
              <li><a href="#">Messages</a></li>
              <li><a href="#">API</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <h4>Company</h4>
            <ul>
              <li><a href="#">About</a></li>
              <li><a href="#">Team</a></li>
              <li><a href="#">Careers</a></li>
              <li><a href="#">Press</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <h4>Resources</h4>
            <ul>
              <li><a href="#technology">Technology</a></li>
              <li><a href="#showcase">Showcase</a></li>
              <li><a href="#">Blog</a></li>
              <li><a href="#">Research datasets</a></li>
              <li><a href="#">Developer docs</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <h4>Legal</h4>
            <ul>
              <li><a href="#">Privacy</a></li>
              <li><a href="#">Terms</a></li>
              <li><a href="#">Cookies</a></li>
              <li><a href="#">Security</a></li>
            </ul>
          </div>
        </div>

        <div className="footer__bottom">
          <p className="footer__legal">© 2026 Volograms Ltd · Dublin</p>
          <div className="footer__social">
            <a href="https://x.com/volograms" target="_blank" aria-label="X">
              <svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2H21.5l-7.5 8.57L23 22h-7.1l-5.55-7.27L4 22H0.74l8-9.14L0 2h7.27l5.02 6.63L18.244 2Zm-1.24 18h1.91L7.06 4H5.04l11.964 16Z"/></svg>
            </a>
            <a href="https://www.linkedin.com/company/volograms/" target="_blank" aria-label="LinkedIn">
              <svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.86-3.04-1.86 0-2.15 1.45-2.15 2.95v5.66H9.34V9h3.41v1.56h.05c.48-.9 1.65-1.86 3.39-1.86 3.63 0 4.3 2.39 4.3 5.5v6.25ZM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12ZM7.12 20.45H3.56V9h3.56v11.45ZM22.23 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.46c.98 0 1.77-.77 1.77-1.73V1.73C24 .77 23.21 0 22.23 0Z"/></svg>
            </a>
            <a href="https://www.instagram.com/volograms/" target="_blank" aria-label="Instagram">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg>
            </a>
            <a href="https://github.com/volograms" target="_blank"  aria-label="GitHub">
              <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.1.79-.25.79-.56 0-.28-.01-1.02-.02-2-3.2.7-3.88-1.54-3.88-1.54-.52-1.33-1.27-1.69-1.27-1.69-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.02 1.75 2.68 1.24 3.34.95.1-.74.4-1.24.73-1.53-2.55-.29-5.24-1.27-5.24-5.67 0-1.25.44-2.27 1.18-3.07-.12-.29-.51-1.46.11-3.04 0 0 .96-.31 3.16 1.17a10.95 10.95 0 0 1 5.76 0c2.2-1.48 3.16-1.17 3.16-1.17.62 1.58.23 2.75.11 3.04.74.8 1.18 1.82 1.18 3.07 0 4.41-2.69 5.37-5.25 5.66.41.35.78 1.04.78 2.1 0 1.52-.01 2.74-.01 3.11 0 .31.2.67.8.55C20.21 21.38 23.5 17.07 23.5 12 23.5 5.65 18.35.5 12 .5Z"/></svg>
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { WhyVolograms, FinalCTA, VolFooter });