import Link from "next/link";
import ContactForm from "@/components/ContactForm";
import { CtaBand, PageHead, SPLIT_PAD, SiteNav, body, h3, kicker, small, wrap } from "@/components/site";

export const metadata = {
  title: "Contact",
  description: "Ask a question about ThreadCount, book a walkthrough, or raise a security review. One person answers.",
  alternates: { canonical: "/contact" },
};

export default function Contact() {
  return (
    <>
      <SiteNav />
      <PageHead kicker="Contact" title="Ask a question, or watch it run." lede="One person reads these — the one who built it. You’ll get a straight answer rather than a sales call." />

      <section style={{ borderBottom: "2px solid var(--color-text)" }}>
        <div style={{ ...wrap, padding: 0 }}>
          <div className="tcm-split" style={{ display: "grid", gridTemplateColumns: "1.25fr 1fr" }}>
            <div className={SPLIT_PAD} style={{ paddingTop: "clamp(36px,4vw,56px)", paddingRight: 40, paddingBottom: "clamp(44px,5vw,64px)" }}>
              <ContactForm />
            </div>

            <div style={{ borderLeft: "2px solid var(--color-text)" }}>
              <div style={{ background: "var(--color-accent-600)", color: "#fff", padding: "30px 32px 34px" }}>
                <div style={{ ...kicker, color: "#fff" }}>Book a walkthrough</div>
                <h2 style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "clamp(22px,2.4vw,30px)", letterSpacing: "-0.02em", margin: "10px 0 0" }}>Twenty minutes, on real screens.</h2>
                <p style={{ fontSize: 15, lineHeight: 1.65, margin: "12px 0 0" }}>Bring your own questions and your own room. No slides unless you want them.</p>
                {/* No direction: below 900px this panel stacks under the form, so there is no left. */}
                <p style={{ fontSize: 13.5, lineHeight: 1.6, margin: "16px 0 0" }}>Pick &ldquo;Book a walkthrough&rdquo; on the form and say when suits — I&rsquo;ll work around your shift rather than the other way round.</p>
              </div>

              <div style={{ padding: "28px 32px 34px" }}>
                <div style={kicker}>Who replies</div>
                <h3 style={{ ...h3, fontSize: 20, marginTop: 10 }}>One person, the one who built it.</h3>
                <p style={{ ...body, fontSize: 15, marginTop: 10 }}>Usually within a working day. It&rsquo;s maintained alongside a day job, so nights and weekends aren&rsquo;t covered — <Link href="/support" style={{ fontWeight: 700 }}>Support</Link> sets out what that means honestly.</p>
                <div style={{ marginTop: 22, borderTop: "1px solid var(--color-divider)", paddingTop: 18 }}>
                  <div style={{ ...small }}>Prefer email? <a href="mailto:hello@threadcount.tech" style={{ fontWeight: 700 }}>hello@threadcount.tech</a> for questions, <a href="mailto:privacy@threadcount.tech" style={{ fontWeight: 700 }}>privacy@</a> for privacy requests, <a href="mailto:security@threadcount.tech" style={{ fontWeight: 700 }}>security@</a> for security reports.</div>
                </div>
                <div style={{ display: "flex", gap: 12, marginTop: 22, flexWrap: "wrap" }}>
                  <Link href="/demo" data-umami-event="open-demo" data-umami-event-placement="contact" className="btn btn-secondary">Open the working demo</Link>
                  <Link href="/faq" className="btn btn-ghost">Read the FAQ first</Link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <CtaBand />
    </>
  );
}