// contact.jsx - Contact + FAQ section and footer
// Exports window.RecLabContact = { Contact, Footer }
// NOTE: FAQ answers are sensible PLACEHOLDERS - refine to taste.

const FAQS = [
  { q: "Do you work with teams outside the UK?", a: "Yes. Workshops and coaching run remotely worldwide; in-person sessions are UK-based, but I'll travel for larger engagements." },
  { q: "How long is a typical workshop?", a: "Anywhere from a half-day primer to a full-day deep dive, shaped around your team's level and what you want to walk away able to do." },
  { q: "What AI tools do you cover?", a: "The ones you'll actually use: ChatGPT, Claude, and the AI features inside your ATS and sourcing stack, plus how to choose between them." },
  { q: "Do I need any technical experience?", a: "None at all. Everything is taught around real recruiting workflows, with zero coding required." },
  { q: "What's the difference between training and consulting?", a: "Training upskills your team to do it themselves. Consulting is me designing and building the AI workflows into your operations for you." },
  { q: "How much does it cost?", a: "It depends on scope. A one-off workshop is very different to an ongoing build. Get in touch and we'll scope something that fits." },
];

function FaqItem({ q, a }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ borderBottom: "1px solid rgba(28,26,22,0.16)" }}>
      <button onClick={() => setOpen(o => !o)} style={{ width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between",
        gap: 24, background: "none", border: "none", cursor: "pointer", padding: "24px 0", textAlign: "left", fontFamily: "var(--sans)" }}>
        <span style={{ fontSize: 18, fontWeight: 500, letterSpacing: "-0.01em", color: "var(--ink)" }}>{q}</span>
        <span style={{ flex: "none", fontSize: 22, lineHeight: 1, color: "var(--terra)", transition: "transform .25s ease",
          transform: open ? "rotate(45deg)" : "none" }}>+</span>
      </button>
      <div style={{ overflow: "hidden", maxHeight: open ? 220 : 0, transition: "max-height .3s ease" }}>
        <p style={{ fontFamily: "var(--sans)", fontSize: 16, lineHeight: 1.6, color: "var(--ink-soft)", margin: "0 0 26px", maxWidth: 620 }}>{a}</p>
      </div>
    </div>
  );
}

function Contact() {
  return (
    <section id="contact" style={{ background: "var(--paper-2)", fontFamily: "var(--sans)", padding: "104px 80px 110px" }}>
      <div style={{ maxWidth: 1360, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 88, alignItems: "start" }}>

        <div>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 10, marginBottom: 24 }}>
            <span style={{ fontSize: 13, fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--terra-deep)" }}>Contact us</span>
          </div>
          <h2 style={{ fontFamily: "var(--sans)", fontWeight: 600, fontSize: 54, lineHeight: 1.02, letterSpacing: "-0.035em", color: "var(--ink)", margin: 0 }}>Still got questions? Let's talk</h2>
          <p style={{ fontFamily: "var(--sans)", fontSize: 18, lineHeight: 1.6, color: "var(--ink-soft)", margin: "24px 0 0", maxWidth: 460 }}>
            Whether it's a workshop for 50, coaching for one, or some automated workflows, the first step is a conversation.
          </p>
          <div style={{ display: "flex", gap: 14, marginTop: 38 }}>
            <a href="mailto:jamie@thereclab.ai" style={{ fontFamily: "var(--sans)", fontSize: 15.5, fontWeight: 600, color: "#fff",
              textDecoration: "none", background: "var(--ink)", padding: "14px 26px", borderRadius: 100 }}>jamie@thereclab.ai</a>
            <a href="#" style={{ fontFamily: "var(--sans)", fontSize: 15.5, fontWeight: 600, color: "var(--ink)",
              textDecoration: "none", background: "transparent", border: "1px solid rgba(28,26,22,0.25)", padding: "14px 26px", borderRadius: 100 }}>LinkedIn</a>
          </div>
        </div>

        <div style={{ borderTop: "1px solid rgba(28,26,22,0.16)" }}>
          {FAQS.map((f, i) => <FaqItem key={i} {...f} />)}
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{ background: "#161410", fontFamily: "var(--sans)", position: "relative", overflow: "hidden", padding: "60px 80px 64px" }}>
      <div style={{ position: "absolute", inset: 0, background: "radial-gradient(720px 360px at 12% 120%, rgba(191,92,58,0.16), transparent 70%)" }} />
      <div style={{ maxWidth: 1360, margin: "0 auto", position: "relative" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24, flexWrap: "wrap" }}>
          <div style={{ display: "flex", alignItems: "baseline", gap: 14 }}>
            <span style={{ fontWeight: 700, fontSize: 18, letterSpacing: "-0.01em", color: "#fff" }}>The Rec Lab</span>
            <span style={{ fontSize: 15, color: "rgba(255,255,255,0.6)" }}>Where recruiters come to learn AI.</span>
          </div>
          <div style={{ display: "flex", gap: 28 }}>
            <a href="#" style={{ fontSize: 15, fontWeight: 500, color: "rgba(255,255,255,0.82)", textDecoration: "none" }}>LinkedIn</a>
            <a href="mailto:jamie@thereclab.ai" style={{ fontSize: 15, fontWeight: 500, color: "rgba(255,255,255,0.82)", textDecoration: "none" }}>Email</a>
          </div>
        </div>
        <div style={{ borderTop: "1px solid rgba(255,255,255,0.12)", marginTop: 28, paddingTop: 22, fontSize: 13.5, color: "rgba(255,255,255,0.45)" }}>© 2026 The Rec Lab. All rights reserved. London, UK.</div>
      </div>
    </footer>
  );
}

window.RecLabContact = { Contact, Footer };