import { Phone, Mail, MapPin } from "lucide-react";
import DemoForm from "./DemoForm";

export default function DemoSection({
  title = "Ready to bring your business operations together?",
  text = "See MxERP running on your own processes. A product specialist will walk you through the modules that matter to you — no obligation.",
}: {
  title?: string;
  text?: string;
}) {
  return (
    <div className="mx-container" id="demo">
      <section
        aria-label="Request a demo"
        className="mb-24 grid items-center gap-14 rounded-3xl bg-brand bg-[linear-gradient(rgba(255,255,255,.06)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,.06)_1px,transparent_1px)] bg-[size:40px_40px] p-16 text-white max-lg:p-11 lg:grid-cols-2 max-md:grid-cols-1 max-sm:mb-16 max-sm:rounded-[18px] max-sm:p-[32px_20px]"
        style={{ scrollMarginTop: 84 }}
      >
        <div>
          <h2 className="font-display text-[clamp(30px,3.6vw,42px)] font-bold leading-tight tracking-tight text-white">
            {title}
          </h2>
          <p className="my-5 max-w-[400px] text-[#dbe6ff]">{text}</p>
          <div className="flex flex-col gap-2.5 text-[13px] font-medium">
            <span className="inline-flex items-center gap-2">
              <Phone size={18} />
              <span className="text-white/70">Call us:</span>{" "}
              <a href="tel:+919818993537" className="hover:underline">+91-9818993537</a>
            </span>
            <span className="inline-flex items-center gap-2">
              <Mail size={18} />
              <span className="text-white/70">Email us:</span>{" "}
              <a href="mailto:akg@acgil.net" className="hover:underline">akg@acgil.net</a>
            </span>
            <span className="inline-flex items-start gap-2">
              <MapPin size={18} className="mt-0.5 shrink-0" />
              <span>
                <span className="text-white/70">Visit us:</span>{" "}
                H-107, Sector-63, Noida - 201301, Uttar Pradesh, India
              </span>
            </span>
          </div>
          <div className="mt-6">
            <a href="/request-demo" className="inline-flex min-h-[44px] items-center rounded-lg border border-white/40 px-5 text-sm font-semibold text-white hover:bg-white/10">
              Talk to an ERP expert
            </a>
          </div>
        </div>
        <DemoForm />
      </section>
    </div>
  );
}