"use client";

import { useRef } from "react";

export default function ChargePointOperatorPage() {
  const videoRef = useRef<HTMLVideoElement>(null);

  const playVideo = async () => {
    if (!videoRef.current) return;

    videoRef.current.muted = false;
    videoRef.current.volume = 1;

    try {
      await videoRef.current.play();
    } catch (error) {
      console.error("Video gagal diputar:", error);
    }
  };
  return (
    <>
      <div className="w-full bg-white">
        <section className="w-full bg-[url('/images/header-bg.png')] bg-cover bg-center bg-no-repeat py-20 text-gray-950 sm:py-24">
          <div className="mx-auto w-full max-w-7xl px-6 text-center sm:px-10">
            <p className="text-sm font-semibold tracking-[0.2em] text-green-700 uppercase">
              Charge Point Operator
            </p>
            <h1 className="mx-auto mt-3 max-w-4xl text-4xl font-bold tracking-tight sm:text-5xl">
              Become a Charge Point Operator with TIAR
            </h1>
            <p className="mx-auto mt-5 max-w-3xl text-lg leading-relaxed text-gray-600">
              See how TIAR helps you launch, operate, and grow your own EV charging network — from the first charger to a nationwide footprint.
            </p>
            {/* <Link
              href="/book-demo"
              className={cn(
                buttonVariants({ size: "lg" }),
                "mt-8 bg-green-600 text-white hover:bg-green-700",
              )}
            >
              Book a Free Demo
            </Link> */}
          </div>
        </section>

        <section aria-labelledby="partnership-models-heading" className="w-full bg-gray-50 py-16 sm:py-20">
          <div className="mx-auto w-full max-w-7xl px-6 sm:px-10">
            <video
              ref={videoRef}
              controls
              playsInline
              autoPlay
              muted
              preload="auto"
              style={{ width: "100%", borderRadius: 12 }}
            >
              <source src="/video/cpo.mp4" type="video/mp4" />
              Browser Anda tidak mendukung pemutaran video.
            </video>
          </div>
        </section>
      </div>
    </>
  );
}