import Link from "next/link";
import { ContactSection } from "../../components/contact-section";
import { DemoCta } from "../../components/demo-cta";
import { FaqSection } from "../../components/faq-section";
import { PageSchema } from "../../components/page-schema";
import { SiteFooter } from "../../components/site-footer";
import { SiteHeader } from "../../components/site-header";
import { defaultFaqs } from "../../data/faq";
import { siteInfo } from "../../data/site";

export const metadata = {
  title: "Book a Demo",
  description:
    "Book a LedgerOne demo to see audit-ready ledgering and transparent rules in action.",
  keywords: siteInfo.keywords
};

export default function BookDemoPage() {
  const schema = [
    {
      "@context": "https://schema.org",
      "@type": "WebPage",
      name: "Book a LedgerOne Demo",
      description:
        "Book a LedgerOne demo to see audit-ready ledgering and transparent rules in action.",
      url: `${siteInfo.url}/book-demo`
    },
    {
      "@context": "https://schema.org",
      "@type": "FAQPage",
      mainEntity: defaultFaqs.map((item) => ({
        "@type": "Question",
        name: item.question,
        acceptedAnswer: { "@type": "Answer", text: item.answer }
      }))
    }
  ];

  return (
    <div className="marketing min-h-screen">
      <div className="relative overflow-hidden">
        <div className="halo absolute inset-0" />
        <div className="grid-dots absolute inset-0" />
        <SiteHeader />

        <main className="relative mx-auto max-w-6xl px-6 pb-12 pt-12">
          <section className="grid gap-10 lg:grid-cols-[1.1fr_0.9fr]">
            <div className="space-y-6">
              <p className="text-xs uppercase tracking-[0.4em] text-muted">Book a demo</p>
              <h1 className="text-4xl font-semibold leading-tight">
                Schedule time with the LedgerOne team.
              </h1>
              <p className="text-sm text-muted">
                We will walk you through account connections, rule automation, and
                audit-ready exports based on your workflow.
              </p>
              <div className="rounded-3xl border border-ink/10 bg-white/80 p-6 shadow-soft">
                <form className="grid gap-4 md:grid-cols-2">
                  <div className="space-y-2">
                    <label className="text-xs uppercase tracking-[0.2em] text-muted">
                      Full name
                    </label>
                    <input
                      className="w-full rounded-2xl border border-ink/10 bg-white px-4 py-3 text-sm"
                      type="text"
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <label className="text-xs uppercase tracking-[0.2em] text-muted">
                      Work email
                    </label>
                    <input
                      className="w-full rounded-2xl border border-ink/10 bg-white px-4 py-3 text-sm"
                      type="email"
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <label className="text-xs uppercase tracking-[0.2em] text-muted">
                      Preferred date
                    </label>
                    <input
                      className="w-full rounded-2xl border border-ink/10 bg-white px-4 py-3 text-sm"
                      type="date"
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <label className="text-xs uppercase tracking-[0.2em] text-muted">
                      Team size
                    </label>
                    <select className="w-full rounded-2xl border border-ink/10 bg-white px-4 py-3 text-sm">
                      <option>1-5</option>
                      <option>6-20</option>
                      <option>21-50</option>
                      <option>50+</option>
                    </select>
                  </div>
                  <div className="space-y-2 md:col-span-2">
                    <label className="text-xs uppercase tracking-[0.2em] text-muted">
                      What should we focus oni
                    </label>
                    <textarea className="min-h-[120px] w-full rounded-2xl border border-ink/10 bg-white px-4 py-3 text-sm" />
                  </div>
                  <div className="md:col-span-2">
                    <button
                      type="submit"
                      className="w-full rounded-2xl bg-ink px-4 py-3 text-sm font-semibold text-haze"
                    >
                      Request demo
                    </button>
                  </div>
                </form>
                <p className="mt-4 text-xs text-muted">
                  Prefer emaili Reach us at{" "}
                  <Link className="underline" href="/contact">
                    the contact page
                  </Link>
                  .
                </p>
              </div>
            </div>
            <div className="space-y-4 rounded-3xl border border-ink/10 bg-white/80 p-6 shadow-soft">
              <p className="text-xs uppercase tracking-[0.3em] text-muted">What you'll see</p>
              <ul className="space-y-3 text-sm text-muted">
                <li>Connect accounts and review the raw ledger flow.</li>
                <li>Watch rule automation run and inspect the audit trail.</li>
                <li>Export a complete ledger package ready for review.</li>
              </ul>
            </div>
          </section>
        </main>
      </div>
      <ContactSection />
      <DemoCta />
      <FaqSection limit={8} />
      <PageSchema schema={schema} />
      <SiteFooter />
    </div>
  );
}