/* ContactSection — Centred hero panel with a form on top. The brand's
 * "thank you" / book-end recipe pulled forward as a CTA panel. */

function ContactSection() {
  const [toast, setToast] = useToast();
  const [submitting, setSubmitting] = React.useState(false);
  const [form, setForm] = React.useState({ name: "", email: "", company: "", team: "25–50", message: "" });

  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const submit = (e) => {
    e.preventDefault();
    setSubmitting(true);
    setTimeout(() => {
      setSubmitting(false);
      setToast(`Thanks — we'll be in touch within the hour.`);
      setForm({ name: "", email: "", company: "", team: "25–50", message: "" });
    }, 700);
  };

  return (
    <section id="contact" style={{
      position: "relative",
      background: "var(--bg-hero-centred)",
      color: "var(--fg-inverse)",
      padding: "120px 0 140px",
      overflow: "hidden",
    }}>
      <Container>
        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64,
          alignItems: "start",
        }} className="ri-contact-grid">
          <div>
            <Eyebrow number="06">Start here</Eyebrow>
            <h2 style={{
              fontSize: "clamp(40px, 5.4vw, 72px)", lineHeight: 1.04,
              letterSpacing: "-0.02em", fontWeight: 700, margin: 0,
            }}>
              Free cybersecurity<br/>audit. Two weeks.
            </h2>
            <p style={{
              marginTop: 22, fontSize: 18, lineHeight: 1.6,
              color: "rgba(245,245,247,0.78)", maxWidth: 480,
            }}>
              A 2-week deep-dive into your stack — endpoints, identities, email,
              backups. You'll get a written report with a posture score and a
              prioritised remediation plan. No obligation.
            </p>

            <ul style={{
              marginTop: 36, listStyle: "none", padding: 0,
              display: "flex", flexDirection: "column", gap: 14,
            }}>
              {[
                "A human picks up on the first call",
                "We sign the same NDA you'd sign internally",
                "You keep the report whether we work together or not",
              ].map((t) => (
                <li key={t} style={{ display: "flex", alignItems: "center", gap: 12,
                                     fontSize: 14.5, color: "rgba(245,245,247,0.85)" }}>
                  <span style={{
                    width: 22, height: 22, borderRadius: "50%",
                    background: "rgba(78,228,154,0.18)", color: "#4ee49a",
                    display: "flex", alignItems: "center", justifyContent: "center",
                    flex: "0 0 auto",
                  }}>
                    <Icon name="check" size={14} stroke={2.4} />
                  </span>
                  {t}
                </li>
              ))}
            </ul>
          </div>

          {/* Form card */}
          <form
            onSubmit={submit}
            style={{
              background: "#fff", color: "var(--fg)",
              borderRadius: 20, padding: 32,
              border: "1px solid var(--border)",
              boxShadow: "0 30px 80px rgba(0,0,0,0.30)",
              position: "relative", overflow: "hidden",
            }}
          >
            <div style={{
              position: "absolute", left: 0, right: 0, top: 0, height: 4,
              background: "var(--grad-brand)",
            }} />
            <Field label="Name">
              <input value={form.name} onChange={set("name")} placeholder="Alex Whitfield" />
            </Field>
            <Field label="Work email">
              <input type="email" value={form.email} onChange={set("email")} placeholder="alex@company.co.uk" />
            </Field>
            <Field label="Company">
              <input value={form.company} onChange={set("company")} placeholder="Acme Legal" />
            </Field>
            <Field label="Team size">
              <select value={form.team} onChange={set("team")}>
                <option>10–25</option>
                <option>25–50</option>
                <option>50–100</option>
                <option>100–200</option>
              </select>
            </Field>
            <Field label="What's keeping you up at night? (optional)">
              <textarea rows="3" value={form.message} onChange={set("message")} placeholder="A mailbox got phished, our backups haven't been tested in two years…" />
            </Field>
            <div style={{ marginTop: 8, display: "flex", justifyContent: "space-between",
                          alignItems: "center", gap: 12, flexWrap: "wrap" }}>
              <span style={{ fontSize: 11, color: "var(--fg-subtle)" }}>
                No spam. We use your details once.
              </span>
              <Button type="submit" variant="primary" iconRight="arrow-right" disabled={submitting}>
                {submitting ? "Sending…" : "Send my report"}
              </Button>
            </div>
          </form>
        </div>
      </Container>

      <Toast msg={toast} />

      <style>{`
        @media (max-width: 880px) {
          .ri-contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
        #contact input, #contact textarea, #contact select {
          width: 100%; padding: 12px 14px; border-radius: 12px;
          border: 1.5px solid var(--border-strong); background: #fff;
          font: 14px var(--font-sans); color: var(--fg);
          transition: border 120ms, box-shadow 120ms;
          font-family: var(--font-sans);
        }
        #contact textarea { resize: vertical; }
        #contact input:focus, #contact textarea:focus, #contact select:focus {
          outline: 0; border-color: var(--ri-pink);
          box-shadow: 0 0 0 4px rgba(242,43,105,0.15);
        }
      `}</style>
    </section>
  );
}

function Field({ label, children }) {
  return (
    <label style={{ display: "block", marginBottom: 14 }}>
      <span style={{
        display: "block", fontSize: 12, fontWeight: 600, marginBottom: 6,
        color: "var(--fg)",
      }}>{label}</span>
      {children}
    </label>
  );
}

Object.assign(window, { ContactSection });