import Link from "next/link";
import { Band, CtaBand, PageHead, SiteNav, body, h2, h3, kicker } from "@/components/site";
import { plansLive } from "@/lib/plans-live";

export const metadata = {
  title: "Support",
  description: "Support comes from the person who wrote the software — what that means in practice, and what it honestly doesn’t cover.",
  alternates: { canonical: "/support" },
};

// The handoff stated these as commitments ("Same day", "2 working days", "A week"). They are phrased
// here as what is aimed for, because one person alongside a day job can't guarantee a clock.
const TIERS = [
  { k: "Can’t issue", time: "Usually same day", t: "The counter is stopped", b: "Anything stopping the room issuing, receiving or counting gets looked at first — normally the day it’s reported." },
  { k: "Something’s wrong", time: "Usually a couple of days", t: "It works, but not properly", b: "A number that looks off, a report that won’t export, a slip printing the wrong field." },
  { k: "Can it do", time: "Usually within the week", t: "Questions and requests", b: "How-to questions and feature requests. Requests go on the roadmap in the order rooms ask for them." },
];

const HONEST = [
  "Support is one person, alongside a day job. Nights and weekends aren’t covered.",
  "There is no phone line. Everything goes through the contact form so it’s written down.",
  "None of the times above is a contractual service level — they’re what usually happens, not a promise.",
  "If your facility needs guaranteed response times in writing, have that conversation before a whole site depends on it.",
];

export default async function Support() {
  const live = await plansLive();
  return (
    <>
      <SiteNav />
      <PageHead
        kicker="Support"
        title="One person answers. No ticket maze."
        lede="Support comes from the person who wrote the software. That means straight answers, and it means being honest about how fast they arrive."
      />

      <Band>
        <div className="tcm-3col" style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 0, border: "2px solid var(--color-text)" }}>
          {TIERS.map((t, i) => (
            <div key={t.k} style={{ padding: "26px 28px 32px", borderRight: i < 2 ? "1px solid var(--color-divider)" : undefined }}>
              <div style={kicker}>{t.k}</div>
              <div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "clamp(22px,2.4vw,30px)", letterSpacing: "-0.02em", marginTop: 10 }}>{t.time}</div>
              <div style={{ width: 44, height: 4, background: "var(--color-accent)", margin: "14px 0 14px" }} />
              <h3 style={{ ...h3, fontSize: 18 }}>{t.t}</h3>
              <p style={{ fontSize: 14.5, lineHeight: 1.65, color: "var(--color-neutral-800)", marginTop: 8 }}>{t.b}</p>
            </div>
          ))}
        </div>
      </Band>

      <Band tone="surface">
        <div style={kicker}>Being straight about it</div>
        <h2 style={{ ...h2, marginTop: 12 }}>{live ? "ThreadCount is maintained by one person." : "ThreadCount is free and maintained by one person."}</h2>
        <p style={{ ...body, marginTop: 14, maxWidth: "56ch" }}>Here&rsquo;s what that honestly means, so nobody finds out the hard way.</p>
        <div style={{ marginTop: 26 }}>
          {HONEST.map((h) => (
            <div key={h} style={{ display: "flex", gap: 16, padding: "14px 0", borderBottom: "1px solid var(--color-divider)", fontSize: 16, lineHeight: 1.6 }}>
              <span style={{ width: 8, height: 8, background: "var(--color-accent)", flex: "none", marginTop: 8 }} />{h}
            </div>
          ))}
        </div>
      </Band>

      <Band>
        <div className="tcm-split" style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 32, alignItems: "center" }}>
          <h2 style={{ ...h2, fontSize: "clamp(22px,2.6vw,34px)" }}>Stuck on something? Say what it is.</h2>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <Link href="/contact" className="btn btn-primary">Get in touch</Link>
            <Link href="/faq" className="btn btn-secondary">Check the FAQ</Link>
          </div>
        </div>
      </Band>

      <CtaBand />
    </>
  );
}