import { virtualOfficeMetadata } from "@/lib/seo-metadata";
import type { Metadata } from "next";

export const metadata: Metadata = virtualOfficeMetadata;

export default function VirtualOfficeSection() {
  return (
    <>
      {/* Hero Section */}
      <div className="relative w-full h-screen overflow-hidden">
        {/* Background Image */}
        <img
          src="/background.jpg"
          alt="Building background"
          className="absolute inset-0 w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-gray-500 opacity-60" />

        {/* Hero Content */}
        <div className="relative z-10 flex items-center h-full px-8 md:px-16">
          <div className="max-w-2xl text-white">
            <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold leading-tight mb-6">
              Virtual Office and Working Space
            </h1>
          </div>
        </div>

        {/* Decorative Elements */}
        <div className="absolute top-20 right-20 w-32 h-32 bg-blue-400/20 rounded-full blur-xl animate-pulse" />
        <div className="absolute bottom-40 right-40 w-20 h-20 bg-white/10 rounded-full blur-lg animate-bounce" />
      </div>

      {/* Virtual Office Packages */}
      <section className="bg-[#F8F0E3] py-20 px-6 md:px-16">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-4xl md:text-5xl font-bold mb-16 text-center text-[#1B1C4D]">
            Virtual Office Packages
          </h2>

          {/* Virtual Office */}
          <div className="grid md:grid-cols-2 gap-10 items-center mb-20">
            <img
              src="/virtual/foto1.jpg"
              alt="Virtual Office"
              className="w-full rounded-xl shadow-lg"
            />
            <div>
              <h3 className="text-2xl font-bold mb-3">Virtual Office</h3>
              <p className="text-gray-600 mb-4">
                Get a prestigious business address, dedicated phone number with call handling,
                mail & package management, plus free 4 hours of meeting room usage per month.
              </p>
              <p className="text-lg font-semibold text-[#1B1C4D]">
                Starting from <span className="text-red-600">IDR 2.500.000 / year</span>
              </p>
            </div>
          </div>

          {/* Private Space */}
          <div className="grid md:grid-cols-2 gap-10 items-center mb-20">
            <div className="order-2 md:order-1">
              <h3 className="text-2xl font-bold mb-3">Private Space (3x3 M)</h3>
              <p className="text-gray-600 mb-4">
                Enjoy 2 desks + 2 chairs, AC, WiFi, toilet, and parking with complete facilities.
                Perfect for small teams or startups.
              </p>
              <p className="text-lg font-semibold text-[#1B1C4D]">
                From <span className="text-red-600">IDR 200.000 / day</span> or{" "}
                <span className="text-red-600">IDR 37.500.000 / year</span>
              </p>
            </div>
            <img
              src="/virtual/foto2.jpg"
              alt="Private Space"
              className="w-full rounded-xl shadow-lg order-1 md:order-2"
            />
          </div>

          {/* Personal Space */}
          <div className="grid md:grid-cols-2 gap-10 items-center">
            <img
              src="/virtual/foto3.jpg"
              alt="Personal Space"
              className="w-full rounded-xl shadow-lg"
            />
            <div>
              <h3 className="text-2xl font-bold mb-3">Personal Space (Sharing)</h3>
              <p className="text-gray-600 mb-4">
                Get 1 desk + 1 chair with full facilities. A great choice for freelancers,
                students, or remote workers who need a productive environment.
              </p>
              <p className="text-lg font-semibold text-[#1B1C4D]">
                From <span className="text-red-600">IDR 50.000 / day</span> or{" "}
                <span className="text-red-600">IDR 9.900.000 / year</span>
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Terms of Use */}
      <section className="bg-[#F8F0E3] py-20 px-6 md:px-16">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="text-3xl md:text-4xl font-bold text-[#1B1C4D] mb-6">
            Terms of Use
          </h2>
          <p className="text-lg md:text-xl text-gray-700 leading-relaxed">
            We believe that a good workspace should be comfortable for everyone. 
            So, simply use the facilities wisely, maintain cleanliness, and respect the privacy of other users.
          </p>
        </div>
      </section>
    </>
  );
}