import Link from "next/link";
import { Background } from "../../components/background";
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";

const inputClass =
  "block w-full appearance-none rounded-lg border border-border bg-background/50 px-3 py-2.5 text-foreground placeholder-muted-foreground shadow-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 sm:text-sm transition-all";

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="page-soft-bg min-h-screen font-sans text-foreground flex flex-col relative overflow-hidden">
      <Background />
      <SiteHeader />
      <main className="relative z-10 flex-1 pt-24 pb-16">
        <div className="mx-auto max-w-6xl px-6 lg:px-8">
          <section className="grid gap-10 lg:grid-cols-[1.1fr_0.9fr]">
            <div className="space-y-6">
              <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-secondary/50 border border-border text-xs font-medium text-muted-foreground backdrop-blur-sm">
                Book a demo
              </div>
              <h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-5xl leading-tight">
                Schedule time with the LedgerOne team.
              </h1>
              <p className="text-lg text-muted-foreground">
                We will walk you through account connections, rule automation, and
                audit-ready exports based on your workflow.
              </p>
              <div className="rounded-3xl border border-border/60 bg-gradient-to-b from-background/90 via-background to-background/60 p-6 shadow-glass backdrop-blur-sm">
                <form className="grid gap-4 md:grid-cols-2">
                  <div className="space-y-2">
                    <label className="block text-sm font-medium text-foreground">
                      Full name
                    </label>
                    <input
                      className={inputClass}
                      type="text"
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <label className="block text-sm font-medium text-foreground">
                      Work email
                    </label>
                    <input
                      className={inputClass}
                      type="email"
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <label className="block text-sm font-medium text-foreground">
                      Preferred date
                    </label>
                    <input
                      className={inputClass}
                      type="date"
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <label className="block text-sm font-medium text-foreground">
                      Team size
                    </label>
                    <select className={inputClass}>
                      <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="block text-sm font-medium text-foreground">
                      What should we focus on?
                    </label>
                    <textarea
                      className={`${inputClass} min-h-[120px] resize-y`}
                      rows={4}
                    />
                  </div>
                  <div className="md:col-span-2">
                    <button type="submit" className="btn-primary w-full py-3">
                      Request demo
                    </button>
                  </div>
                </form>
                <p className="mt-4 text-xs text-muted-foreground">
                  Prefer email? Reach us at{" "}
                  <Link className="text-primary hover:underline" href="/contact">
                    the contact page
                  </Link>
                  .
                </p>
              </div>
            </div>
            <div className="rounded-3xl border border-border/60 bg-gradient-to-b from-background/90 via-background to-background/60 p-6 shadow-glass backdrop-blur-sm space-y-4">
              <p className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">
                What you&apos;ll see
              </p>
              <ul className="space-y-3 text-sm text-muted-foreground">
                <li className="flex gap-2">
                  <span className="text-primary mt-0.5">•</span>
                  Connect accounts and review the raw ledger flow.
                </li>
                <li className="flex gap-2">
                  <span className="text-primary mt-0.5">•</span>
                  Watch rule automation run and inspect the audit trail.
                </li>
                <li className="flex gap-2">
                  <span className="text-primary mt-0.5">•</span>
                  Export a complete ledger package ready for review.
                </li>
              </ul>
            </div>
          </section>
        </div>
      </main>
      <div className="relative z-10">
        <ContactSection />
        <DemoCta />
        <FaqSection limit={8} />
        <SiteFooter />
      </div>
      <PageSchema schema={schema} />
    </div>
  );
}