// ============================================
// Reliq — Contact sales page
// Public route: /contact-sales?plan=team
// ============================================

// ── Spinner ────────────────────────────────────────────────────────────────────
const SpinIcon = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24"
       style={{ animation: "spin 1s linear infinite", flexShrink: 0 }}>
    <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2.5"
            fill="none" strokeDasharray="40 60" strokeLinecap="round" />
  </svg>
);

// ── Shared styles ─────────────────────────────────────────────────────────────
const CS_FIELD = { display:"flex", flexDirection:"column", gap:6, marginBottom:16 };
const CS_LABEL = {
  fontFamily:"var(--font-mono)", fontSize:10.5,
  letterSpacing:"0.1em", textTransform:"uppercase", color:"var(--fg-3)",
};
const CS_INPUT = {
  background:"var(--bg-1)", border:"1px solid var(--line-2)",
  borderRadius:"var(--r-sm)", padding:"10px 12px",
  fontSize:13.5, color:"var(--fg-0)", outline:"none",
  width:"100%", transition:"border-color .12s",
  fontFamily:"var(--font-sans)", boxSizing:"border-box",
};
const CS_ERR = {
  fontSize:12.5, color:"var(--red)", marginTop:4,
  display:"flex", alignItems:"center", gap:5,
};

// ── Team size options ─────────────────────────────────────────────────────────
const TEAM_SIZES = ["1–5 people", "6–20 people", "21–100 people", "100+ people"];

const ContactSales = ({ go }) => {
  const [name,       setName]       = React.useState("");
  const [email,      setEmail]      = React.useState("");
  const [company,    setCompany]    = React.useState("");
  const [teamSize,   setTeamSize]   = React.useState("");
  const [message,    setMessage]    = React.useState("");
  const [errors,     setErrors]     = React.useState({});
  const [submitting, setSubmitting] = React.useState(false);
  const [sent,       setSent]       = React.useState(false);

  // ── Validation ──────────────────────────────────────────────────────────────
  const validate = () => {
    const errs = {};
    if (!name.trim())    errs.name    = "Enter your name.";
    if (!email.trim() || !email.includes("@"))
      errs.email   = "Enter a valid work email address.";
    if (!company.trim()) errs.company = "Enter your company name.";
    if (!teamSize)       errs.teamSize = "Select your team size.";
    return errs;
  };

  // ── Submit ──────────────────────────────────────────────────────────────────
  const handleSubmit = async (e) => {
    e.preventDefault();
    if (submitting) return;
    const errs = validate();
    setErrors(errs);
    if (Object.keys(errs).length > 0) return;

    setSubmitting(true);
    // Mock API call — replace with real endpoint
    await new Promise(r => setTimeout(r, 1400));
    setSubmitting(false);
    setSent(true);
  };

  // ── Focus/blur helpers ──────────────────────────────────────────────────────
  const onFocus = (key) => (e) => {
    if (!errors[key]) e.target.style.borderColor = "var(--teal)";
  };
  const onBlur = (key) => (e) => {
    if (!errors[key]) e.target.style.borderColor = "var(--line-2)";
  };
  const inp = (key, extra = {}) => ({
    ...CS_INPUT, ...extra,
    borderColor: errors[key] ? "var(--red)" : undefined,
  });

  return (
    <LandingLayout go={go} pageTitle="Contact sales">
      <div style={{ maxWidth: 560, margin: "0 auto" }}>

        {/* ── Success state ── */}
        {sent ? (
          <div style={{ textAlign: "center", padding: "60px 0" }}>
            <div style={{
              width: 60, height: 60, borderRadius: "50%", margin: "0 auto 20px",
              background: "var(--teal-bg)", border: "1px solid var(--teal)",
              display: "grid", placeItems: "center",
            }}>
              <Icon name="check-circle" size={26} style={{ color: "var(--teal)" }} />
            </div>
            <h1 style={{
              fontFamily: "var(--font-display)", fontSize: 26, fontWeight: 600,
              letterSpacing: "-0.02em", margin: "0 0 12px", color: "var(--fg-0)",
            }}>
              Thanks — we'll contact you shortly.
            </h1>
            <p style={{ color: "var(--fg-2)", fontSize: 14, lineHeight: 1.65, margin: "0 0 28px" }}>
              Our team will reach out to{" "}
              <strong style={{ color: "var(--fg-1)" }}>{email}</strong> within one business day.
            </p>
            <button className="btn btn-ghost" onClick={() => go("/")}>
              Back to home
            </button>
          </div>
        ) : (

        <>
          {/* ── Header ── */}
          <div style={{ marginBottom: 36 }}>
            <span style={{
              fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.14em",
              textTransform: "uppercase", color: "var(--teal)", marginBottom: 10, display: "block",
            }}>
              Team plan
            </span>
            <h1 style={{
              fontFamily: "var(--font-display)", fontSize: 30, fontWeight: 700,
              letterSpacing: "-0.025em", margin: "0 0 10px", color: "var(--fg-0)",
            }}>
              Talk to sales
            </h1>
            <p style={{ fontSize: 14.5, color: "var(--fg-1)", lineHeight: 1.75, margin: 0 }}>
              Tell us a bit about your team and what you need. We'll get back to you within one business day.
            </p>
          </div>

          {/* ── Plan chip ── */}
          <div style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            padding: "8px 14px", borderRadius: "var(--r-md)", marginBottom: 28,
            background: "var(--bg-2)", border: "1px solid var(--line-2)",
          }}>
            <Icon name="users" size={14} style={{ color: "var(--teal)" }} />
            <span style={{ fontSize: 13, fontWeight: 500, color: "var(--fg-0)" }}>Team plan</span>
            <span style={{ fontSize: 13, color: "var(--fg-3)" }}>·</span>
            <span style={{ fontSize: 13, color: "var(--fg-2)" }}>$199/mo · Unlimited scans · 5 seats</span>
          </div>

          {/* ── Form ── */}
          <form onSubmit={handleSubmit} noValidate>

            {/* Name + Email row */}
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
              <div style={CS_FIELD}>
                <label style={CS_LABEL} htmlFor="cs-name">Name</label>
                <input
                  id="cs-name"
                  type="text"
                  placeholder="Jane Smith"
                  value={name}
                  disabled={submitting}
                  onChange={e => setName(e.target.value)}
                  style={inp("name")}
                  onFocus={onFocus("name")}
                  onBlur={onBlur("name")}
                />
                {errors.name && (
                  <span style={CS_ERR}><Icon name="alert" size={11} /> {errors.name}</span>
                )}
              </div>
              <div style={CS_FIELD}>
                <label style={CS_LABEL} htmlFor="cs-email">Work email</label>
                <input
                  id="cs-email"
                  type="email"
                  placeholder="jane@company.com"
                  value={email}
                  disabled={submitting}
                  onChange={e => setEmail(e.target.value)}
                  style={inp("email")}
                  onFocus={onFocus("email")}
                  onBlur={onBlur("email")}
                />
                {errors.email && (
                  <span style={CS_ERR}><Icon name="alert" size={11} /> {errors.email}</span>
                )}
              </div>
            </div>

            {/* Company + Team size row */}
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
              <div style={CS_FIELD}>
                <label style={CS_LABEL} htmlFor="cs-company">Company</label>
                <input
                  id="cs-company"
                  type="text"
                  placeholder="Acme Corp"
                  value={company}
                  disabled={submitting}
                  onChange={e => setCompany(e.target.value)}
                  style={inp("company")}
                  onFocus={onFocus("company")}
                  onBlur={onBlur("company")}
                />
                {errors.company && (
                  <span style={CS_ERR}><Icon name="alert" size={11} /> {errors.company}</span>
                )}
              </div>
              <div style={CS_FIELD}>
                <label style={CS_LABEL} htmlFor="cs-size">Team size</label>
                <select
                  id="cs-size"
                  value={teamSize}
                  disabled={submitting}
                  onChange={e => setTeamSize(e.target.value)}
                  style={{
                    ...inp("teamSize"),
                    appearance: "none",
                    backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")`,
                    backgroundRepeat: "no-repeat",
                    backgroundPosition: "right 12px center",
                    paddingRight: 32,
                  }}
                >
                  <option value="">Select size…</option>
                  {TEAM_SIZES.map(s => (
                    <option key={s} value={s}>{s}</option>
                  ))}
                </select>
                {errors.teamSize && (
                  <span style={CS_ERR}><Icon name="alert" size={11} /> {errors.teamSize}</span>
                )}
              </div>
            </div>

            {/* Message */}
            <div style={CS_FIELD}>
              <label style={CS_LABEL} htmlFor="cs-message">
                Message <span style={{ color: "var(--fg-3)", fontWeight: 400 }}>(optional)</span>
              </label>
              <textarea
                id="cs-message"
                placeholder="Tell us about your use case, app platform, or any specific requirements…"
                value={message}
                disabled={submitting}
                onChange={e => setMessage(e.target.value)}
                rows={4}
                style={{
                  ...CS_INPUT,
                  resize: "vertical",
                  minHeight: 100,
                  lineHeight: 1.65,
                }}
                onFocus={e => { e.target.style.borderColor = "var(--teal)"; }}
                onBlur={e  => { e.target.style.borderColor = "var(--line-2)"; }}
              />
            </div>

            {/* Submit */}
            <button
              type="submit"
              className="btn btn-primary btn-lg"
              disabled={submitting}
              style={{
                width: "100%", justifyContent: "center", marginTop: 4,
                opacity: submitting ? 0.75 : 1,
                cursor:  submitting ? "not-allowed" : "pointer",
              }}
              aria-label="Request sales contact for Team plan"
            >
              {submitting
                ? <><SpinIcon size={14} /> Sending…</>
                : <>Request sales contact <Icon name="arrow-right" size={14} /></>
              }
            </button>

            <div style={{
              marginTop: 14, textAlign: "center", fontSize: 12.5, color: "var(--fg-3)",
            }}>
              We typically respond within one business day.
            </div>

          </form>
        </>
        )}

      </div>
    </LandingLayout>
  );
};

Object.assign(window, { ContactSales });