import { ContactForm } from "@/components/contact-form";
import { SectionIntro } from "@/components/section-intro";
import { site } from "@/lib/site";

export default function ContactPage() {
  return (
    <main className="mx-auto w-full max-w-7xl px-5 py-16 md:px-8 md:py-24">
      <SectionIntro
        eyebrow="Hubungi Bizone"
        title="Mulai percakapan untuk konsultasi atau demo"
        description="Ingin melihat bagaimana Bizone dapat membantu operasional bisnis Anda? Hubungi kami dan tim kami akan membantu memetakan solusi yang paling sesuai."
      />

      <section className="mt-14 grid gap-6 lg:grid-cols-[0.9fr_1.1fr]">
        <article className="card bg-[linear-gradient(180deg,#0f3f99,#0c2f72)] text-white">
          <p className="text-xs font-bold uppercase tracking-[0.22em] text-white/70">Kontak langsung</p>
          <div className="mt-8 space-y-5 text-sm leading-7 text-white/82">
            <p>
              Website
              <br />
              <a href={site.domain} target="_blank" rel="noreferrer" className="font-semibold text-white">
                bizone.id
              </a>
            </p>
            <p>
              Email
              <br />
              <a href={`mailto:${site.email}`} className="font-semibold text-white">
                {site.email}
              </a>
            </p>
            <p>
              WhatsApp
              <br />
              <a href={site.whatsappHref} target="_blank" rel="noreferrer" className="font-semibold text-white">
                {site.whatsapp}
              </a>
            </p>
            <p>
              Alamat
              <br />
              <span className="font-semibold text-white">{site.address}</span>
            </p>
            <p>
              Peta
              <br />
              <a href={site.mapLink} target="_blank" rel="noreferrer" className="font-semibold text-white">
                Buka di Google Maps
              </a>
            </p>
          </div>
        </article>

        <article className="card">
          <p className="text-xs font-bold uppercase tracking-[0.22em] text-[var(--accent)]">Permintaan demo</p>
          <ContactForm />
        </article>
      </section>

      <section className="mt-6 grid gap-6 lg:grid-cols-[0.95fr_1.05fr]">
        <article className="card">
          <p className="text-xs font-bold uppercase tracking-[0.22em] text-[var(--accent)]">Alamat kantor</p>
          <h2 className="mt-4 font-heading text-3xl font-extrabold tracking-[-0.04em] text-[var(--ink)]">
            Kunjungi kantor kami di Jagakarsa, Jakarta Selatan.
          </h2>
          <p className="mt-5 text-sm leading-8 text-[var(--muted)]">{site.address}</p>
          <a
            href={site.mapLink}
            target="_blank"
            rel="noreferrer"
            className="button button-secondary mt-8"
          >
            Buka di Google Maps
          </a>
        </article>

        <article className="card overflow-hidden p-0">
          <iframe
            title="Peta kantor Bizone"
            src={site.mapUrl}
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
            className="min-h-[360px] w-full border-0"
          />
        </article>
      </section>
    </main>
  );
}
