// contact.jsx - book a discovery call (wired to Calendly + real contact info)

function ContactPage({ setPage }) {
  const [stack, setStack] = React.useState([]);
  const toggle = (x) => setStack(s => s.includes(x) ? s.filter(v => v !== x) : [...s, x]);
  const stackOptions = ["AWS", "GCP", "Azure", "Okta", "Workspace", "GitHub", "GitLab", "Slack", "Atlassian", "Cloudflare", "Kubernetes", "Stripe"];

  const [inquiry, setInquiry] = React.useState("");
  const [submitted, setSubmitted] = React.useState(false);

  const inquiryTypes = [
    "SOC Setup scoping (₹3L deployment)",
    "Enterprise platform inquiry ($2,999/mo)",
    "Partnership / MSSP / White-label",
    "Noise Teardown booking ($297, paid)",
    "General question · not sure yet",
  ];

  const handleSubmit = (e) => {
    e.preventDefault();
    const form = e.target;
    const name = form.elements["name"].value;
    const email = form.elements["email"].value;
    if (!name || !email) return;
    // Pass "noopener,noreferrer" so the Calendly tab cannot reach back through window.opener
    // to navigate this tab (reverse tabnabbing). With noopener, window.open returns null.
    const w = window.open("https://calendly.com/prathamesh-securesleuths/30min", "_blank", "noopener,noreferrer");
    if (w) w.opener = null;
    setSubmitted(true);
  };

  return (
    <div className="page">
      <section style={{ padding: "80px 0 40px" }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 80, alignItems: "flex-start" }}>
          <div style={{ position: "sticky", top: 100, display: "flex", flexDirection: "column", gap: 32 }}>
            <Label>BOOK A CALL · 30 MIN · DIRECT WITH PRATHAMESH · NO DECK</Label>
            <h1 className="serif" style={{ fontSize: "clamp(48px, 5.6vw, 88px)", margin: 0, lineHeight: 0.98, letterSpacing: "-0.025em" }}>
              Tell us<br/>
              <span style={{ color: "var(--fg-mute)", fontStyle: "italic" }}>what hurts.</span>
            </h1>
            <p style={{ fontSize: 17, color: "var(--fg-mute)", margin: 0, lineHeight: 1.6, maxWidth: 480 }}>
              We reply within one business day. SOC Setup scoping, Enterprise inquiries, partnership intros, Noise Teardown bookings — all start here. Pick what brings you and we'll route accordingly.
            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: 18, paddingTop: 20, borderTop: "1px solid var(--line-soft)" }}>
              <ContactMeta k="EMAIL"     v="prathamesh@securesleuths.in" href="mailto:prathamesh@securesleuths.in" />
              <ContactMeta k="PHONE"     v="+91-7559249171" href="tel:+917559249171" />
              <ContactMeta k="CALENDLY"  v="Book 30-min call" href="https://calendly.com/prathamesh-securesleuths/30min" />
              <ContactMeta k="LINKEDIN"  v="prathamesh-bakliwal" href="https://linkedin.com/in/prathamesh-bakliwal" />
              <ContactMeta k="LOCATION"  v="Nashik, Maharashtra, India" />
            </div>
          </div>

          <div style={{ border: "1px solid var(--line)", background: "var(--bg-1)" }}>
            <div style={{
              padding: "14px 20px", borderBottom: "1px solid var(--line)", background: "var(--bg-2)",
              display: "flex", alignItems: "center", gap: 14,
            }}>
              <Mono style={{ fontSize: 11, color: "var(--fg-mute)", letterSpacing: "0.08em" }}>
                DISCOVERY CALL REQUEST
              </Mono>
              <span style={{ flex: 1 }} />
              <Dot /> <Mono style={{ fontSize: 11, color: "var(--accent)" }}>OPEN</Mono>
            </div>
            {submitted ? (
              <div style={{ padding: 48, display: "flex", flexDirection: "column", gap: 16, minHeight: 400, justifyContent: "center" }}>
                <Mono style={{ color: "var(--accent)", fontSize: 14 }}>✓ CALENDLY OPENED</Mono>
                <h3 className="serif" style={{ fontSize: 32, margin: 0, lineHeight: 1.15, letterSpacing: "-0.015em" }}>Pick a time that works.</h3>

                {inquiry.includes("SOC Setup") && (
                  <p style={{ color: "var(--fg-mute)", margin: 0, fontSize: 14.5, lineHeight: 1.65, maxWidth: 460 }}>
                    SOC Setup conversations: 30-min discovery + written quote within 48 hours of the call. Bring your stack inventory if you have one.
                  </p>
                )}
                {inquiry.includes("Enterprise") && (
                  <p style={{ color: "var(--fg-mute)", margin: 0, fontSize: 14.5, lineHeight: 1.65, maxWidth: 460 }}>
                    Enterprise calls: feature deep-dive, custom pricing for your scale, multi-tenant requirements. We'll send a security questionnaire if your procurement requires one.
                  </p>
                )}
                {inquiry.includes("Partnership") && (
                  <p style={{ color: "var(--fg-mute)", margin: 0, fontSize: 14.5, lineHeight: 1.65, maxWidth: 460 }}>
                    Partnership intro: mutual qualification both ways. Bring your business model and client mix. Real numbers in this conversation.
                  </p>
                )}
                {inquiry.includes("Noise Teardown") && (
                  <p style={{ color: "var(--fg-mute)", margin: 0, fontSize: 14.5, lineHeight: 1.65, maxWidth: 460 }}>
                    Noise Teardown: $297 paid via invoice after the call is booked. 60-min live review of your Wazuh setup, written one-pager in 24 hours. Credited toward a pilot if you proceed.
                  </p>
                )}
                {inquiry.includes("General") && (
                  <p style={{ color: "var(--fg-mute)", margin: 0, fontSize: 14.5, lineHeight: 1.65, maxWidth: 460 }}>
                    General call: tell us what you're trying to figure out. We'll point you at the right path — Community download, Team trial, SOC Setup, or partnership.
                  </p>
                )}

                <p style={{ color: "var(--fg-dim)", margin: 0, fontSize: 13, paddingTop: 12, borderTop: "1px solid var(--line-soft)" }}>
                  Calendly didn't open? <a href="https://calendly.com/prathamesh-securesleuths/30min" target="_blank" rel="noopener" style={{ color: "var(--accent)", textDecoration: "underline" }}>Click here</a>. Or email <a href="mailto:prathamesh@securesleuths.in" style={{ color: "var(--accent)" }}>prathamesh@securesleuths.in</a> directly.
                </p>
              </div>
            ) : (
              <form style={{ padding: 32, display: "flex", flexDirection: "column", gap: 24 }}
                onSubmit={handleSubmit}>
                <Field label="NAME" name="name" placeholder="Full name" required />
                <Field label="WORK EMAIL" name="email" placeholder="you@company.com" type="email" required />
                <Field label="COMPANY · ROLE" name="company" placeholder="Acme Inc · CTO" />
                <Field label="HEADCOUNT" name="headcount" placeholder="e.g. 60" />

                <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                  <Label>WHAT BRINGS YOU HERE? *</Label>
                  <select
                    name="inquiry"
                    required
                    value={inquiry}
                    onChange={(e) => setInquiry(e.target.value)}
                    style={{
                      background: "var(--bg)", border: "1px solid var(--line)",
                      color: "var(--fg)", padding: "14px 16px",
                      fontFamily: "var(--sans)", fontSize: 14,
                    }}>
                    <option value="" disabled>Select one</option>
                    {inquiryTypes.map((t, i) => <option key={i} value={t}>{t}</option>)}
                  </select>
                </div>

                <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                  <Label>YOUR STACK · TAP ALL THAT APPLY</Label>
                  <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
                    {stackOptions.map(s => {
                      const on = stack.includes(s);
                      return (
                        <button type="button" key={s} onClick={() => toggle(s)}
                          style={{
                            padding: "8px 14px",
                            fontFamily: "var(--mono)", fontSize: 11.5,
                            letterSpacing: "0.06em",
                            border: "1px solid " + (on ? "var(--accent)" : "var(--line)"),
                            background: on ? "var(--accent)" : "transparent",
                            color: on ? "#000" : "var(--fg-mute)",
                            transition: "all 140ms",
                          }}>{s}</button>
                      );
                    })}
                  </div>
                </div>

                <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                  <Label>WHAT HURTS?</Label>
                  <textarea name="message" placeholder="Describe what's keeping you up. Be specific; we read every word."
                    rows={5}
                    style={{
                      background: "var(--bg)",
                      border: "1px solid var(--line)",
                      color: "var(--fg)", padding: 14,
                      fontFamily: "var(--sans)", fontSize: 14, lineHeight: 1.55,
                      resize: "vertical",
                    }} />
                </div>

                <button type="submit" className="btn btn-primary" style={{ justifyContent: "center", padding: "16px" }}>
                  Book discovery call via Calendly →
                </button>
                <Mono style={{ fontSize: 11, color: "var(--fg-dim)", textAlign: "center" }}>
                  ↳ opens Calendly to pick a time. or email prathamesh@securesleuths.in directly.
                </Mono>
              </form>
            )}
          </div>
        </div>
      </section>
    </div>
  );
}

const ContactMeta = ({ k, v, href }) => (
  <div style={{ display: "flex", justifyContent: "space-between", gap: 20, alignItems: "baseline" }}>
    <Label>{k}</Label>
    {href ? (
      <Mono style={{ fontSize: 13, color: "var(--accent)" }}>
        <a href={href} target={href.startsWith("http") ? "_blank" : undefined} rel={href.startsWith("http") ? "noopener" : undefined} style={{ color: "var(--accent)" }}>{v}</a>
      </Mono>
    ) : (
      <Mono style={{ fontSize: 13, color: "var(--fg)" }}>{v}</Mono>
    )}
  </div>
);

const Field = ({ label, placeholder, type = "text", name, required }) => (
  <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
    <Label>{label}</Label>
    <input type={type} name={name} placeholder={placeholder} required={required}
      style={{
        background: "var(--bg)",
        border: "1px solid var(--line)",
        color: "var(--fg)", padding: "14px 16px",
        fontFamily: "var(--sans)", fontSize: 14,
      }} />
  </div>
);

Object.assign(window, { ContactPage });