// ContactPage.jsx
//
// Deliberately form-only for direct contact - no invented email address,
// phone number, or office address, since none is verified/real. Reuses
// DemoRequestForm with a distinct interestType so a general inquiry isn't
// miscounted as a demo-specific lead. Expectation-setting copy below
// deliberately avoids any specific response-time commitment ("within 24
// hours" etc.) since that's not a real, verifiable SLA - it says what's
// true (we read it ourselves) without promising a number we can't back.
//
// Loaded as a classic (non-module) Babel-transformed script - see
// index.html's header comment.

const AFTER_YOU_REACH_OUT = [
  {
    title: "A real person reads it",
    body: "Not a support queue or an auto-responder chain - the message goes to the team directly.",
  },
  {
    title: "We reply from the same context you gave us",
    body: "If you mentioned a specific module or problem, that's what the reply is actually about, not a generic template.",
  },
  {
    title: "No pressure, no sales sequence",
    body: "If you're not ready for a demo yet, that's a fine answer - we're not going to chase you with a drip campaign.",
  },
];

const OTHER_WAYS = [
  { title: "Ready to see it running?", body: "Skip the form and go straight to a scoped walkthrough.", href: "/request-demo/", cta: "Request a Demo" },
  { title: "Looking for a job, not a demo?", body: "See our one real, current opening.", href: "/careers/", cta: "View Careers" },
  { title: "Have a pricing question?", body: "Tiers, what's included, and what affects your quote.", href: "/pricing/", cta: "See Pricing" },
];

const CONTACT_FAQS = [
  {
    q: "I have a technical question, not a sales question - is this still the right form?",
    a: "Yes - the same form reaches the team directly regardless of what the question is about. Mention it's technical and we'll route it correctly on our end.",
  },
  {
    q: "Can I request a specific feature instead of asking a general question?",
    a: "Yes - that's genuinely useful to us. See how we decide what to build on our About page.",
  },
  {
    q: "How do I apply for a job?",
    a: "Through our Careers page directly - it has a working \"Apply via Email\" link for our current opening.",
  },
];

function ContactPage() {
  useDocumentMeta(
    "Contact - SkelBiz Manufacturing Operations Platform",
    "Get in touch with SkelBiz about your manufacturing or processing operation - sales, purchase, inventory, and production workflow automation."
  );

  return (
    <>
      <section className="mx-auto grid max-w-6xl grid-cols-1 gap-12 px-6 py-20 lg:grid-cols-2 lg:items-start">
        <div>
          <span className="inline-flex items-center gap-1.5 rounded-full border border-brand-green/30 bg-emerald-50 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-emerald-700">
            Contact
          </span>
          <h1 className="mt-5 text-3xl font-bold text-brand-navy sm:text-4xl">Let's talk about your operation.</h1>
          <p className="mt-4 text-base leading-relaxed text-slate-600">
            Whether you're ready for a demo or just have a question about how a module works, the form here
            reaches our team directly - we respond ourselves, not through a ticket queue.
          </p>

          <div className="mt-10 space-y-5">
            {AFTER_YOU_REACH_OUT.map((item) => (
              <div key={item.title} className="flex items-start gap-3">
                <svg className="mt-0.5 h-5 w-5 shrink-0 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                  <path strokeLinecap="round" strokeLinejoin="round" d="M20 6L9 17l-5-5" />
                </svg>
                <div>
                  <h3 className="text-sm font-semibold text-brand-navy">{item.title}</h3>
                  <p className="mt-0.5 text-sm leading-relaxed text-slate-600">{item.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
        <DemoRequestForm sourcePage="/contact" interestType="general_contact" submitLabel="Send Message" />
      </section>

      <section className="bg-surface py-20">
        <div className="mx-auto max-w-7xl px-6">
          <h2 className="text-center text-2xl font-bold text-brand-navy">Other ways to reach us</h2>
          <div className="mt-10 grid grid-cols-1 gap-5 sm:grid-cols-3">
            {OTHER_WAYS.map((w) => (
              <a
                key={w.title}
                href={w.href}
                className="group rounded-card border border-slate-200 bg-surface-card p-6 shadow-card transition hover:-translate-y-0.5 hover:border-brand-green/30 hover:shadow-lifted"
              >
                <h3 className="text-base font-semibold text-brand-navy group-hover:text-emerald-700">{w.title}</h3>
                <p className="mt-2 text-sm leading-relaxed text-slate-600">{w.body}</p>
                <span className="mt-3 inline-block text-xs font-semibold text-emerald-700">{w.cta} →</span>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section className="bg-white py-20">
        <div className="mx-auto max-w-3xl px-6">
          <h2 className="text-center text-2xl font-bold text-brand-navy">Frequently asked</h2>
          <div className="mt-10 space-y-5">
            {CONTACT_FAQS.map((item) => (
              <div key={item.q} className="rounded-card border border-slate-200 bg-surface-card p-6 shadow-card">
                <h3 className="text-base font-semibold text-brand-navy">{item.q}</h3>
                <p className="mt-2 text-sm leading-relaxed text-slate-600">{item.a}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}