// ============================================================ // SamuelMarndi.com — Contact / Quote Page // Multi-step quote form, calculator widget, contact methods // ============================================================ function ContactHero() { return (

Home / Get a quote

Available now · 60-second first response

Tell me what you need.
Quote in 24 hours.

Drop your name + email + a sentence about what you're trying to do. I'll reply personally — no sales reps, no agencies.

WhatsApp Call {CONTACT.phone} Email

✓ Free 30-min audit ✓ Itemised quote (no "starting from") ✓ NDA / DPA on request

); } // Quick 4-field quote form — stays visible at top of contact page. function QuickQuote() { const [form, setForm] = useState({ name: "", email: "", phone: "", message: "", service: "" }); const [busy, setBusy] = useState(false); const [err, setErr] = useState(""); const [done, setDone] = useState(false); const submit = async (e) => { e.preventDefault(); if (busy) return; setBusy(true); setErr(""); try { await window.SmApi.contact({ name: form.name, email: form.email, phone: form.phone || null, service: form.service || null, message: form.message || "Quick quote request", }); setDone(true); } catch (e2) { setErr(e2.message || "Failed — please WhatsApp instead."); } finally { setBusy(false); } }; if (done) { return (

Got it. Talk soon.

I'll personally reply to {form.email} within an hour during business hours.

WhatsApp me now

); } return (

Quick quote · 30 seconds

I reply within an hour

setForm({ ...form, name: e.target.value })} placeholder="Your name" style={{ padding: "11px 12px", border: "1px solid var(--line)", borderRadius: 10, fontSize: 14, background: "var(--bg)" }} /> setForm({ ...form, email: e.target.value })} placeholder="Email" style={{ padding: "11px 12px", border: "1px solid var(--line)", borderRadius: 10, fontSize: 14, background: "var(--bg)" }} />

setForm({ ...form, phone: e.target.value })} placeholder="Phone (optional)" style={{ padding: "11px 12px", border: "1px solid var(--line)", borderRadius: 10, fontSize: 14, background: "var(--bg)" }} />

setForm({ ...form, message: e.target.value })} rows={3}
        placeholder="One sentence — what are you trying to do? (e.g., CCTV for 3 retail stores)"
        style={{ width: "100%", padding: "11px 12px", border: "1px solid var(--line)", borderRadius: 10, fontSize: 14, background: "var(--bg)", marginBottom: 12, resize: "vertical" }} />

{err && (
        <div style={{ padding: "8px 12px", marginBottom: 12, background: "rgba(220,80,60,0.08)", border: "1px solid rgba(220,80,60,0.3)", borderRadius: 8, color: "#c04030", fontSize: 12 }}>
          {err}
        </div>
      )}

<button type="submit" disabled={busy} className="btn btn-copper btn-lg" style={{ width: "100%", justifyContent: "center", opacity: busy ? 0.6 : 1 }}>
        {busy ? "Sending…" : <>Get my quote <Icons.send size={14} /></>}
      </button>
      <div style={{ marginTop: 10, fontSize: 11, color: "var(--text-mute)", textAlign: "center" }}>
        No spam · I personally reply · NDA available
      </div>
    </form>
  );
}

// Multi-step quote form
function QuoteForm() {
  const [step, setStep] = useState(0);
  const [form, setForm] = useState({
    services: [],
    scope: "",
    sites: "",
    timeline: "",
    budget: "",
    name: "", email: "", phone: "", company: "", role: "",
    notes: ""
  });
  const [submitted, setSubmitted] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [submitError, setSubmitError] = useState("");

const totalSteps = 5;

const toggleService = (s) => {
    setForm(f => ({ ...f, services: f.services.includes(s) ? f.services.filter(x => x !== s) : [...f.services, s] }));
  };

const next = () => setStep(s => Math.min(s + 1, totalSteps - 1));
  const back = () => setStep(s => Math.max(s - 1, 0));

const canAdvance = () => {
    if (step === 0) return form.services.length > 0;
    if (step === 1) return form.scope.trim().length > 10;
    if (step === 2) return form.timeline !== "" && form.budget !== "";
    if (step === 3) return form.name && form.email;
    return true;
  };

return (
    <section className="section">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 56 }} className="quote-grid">
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>Get a quote · 24h response</div>
            <h2 style={{ fontSize: 40, lineHeight: 1.05, marginBottom: 20 }}>
              Five short steps. <em style={{ color: "var(--copper)" }}>Quote in 24 hours.</em>
            </h2>
            <p style={{ fontSize: 15, color: "var(--text-soft)", lineHeight: 1.55, marginBottom: 24 }}>
              Or — let the chatbot ask you these questions instead. It'll produce the same 1-page brief in under a minute.
            </p>
            <button onClick={() => window.openChat?.()} className="btn btn-ghost" style={{ marginBottom: 32 }}>
              <Icons.sparkles size={14} /> Use JARVIS instead
            </button>

<div style={{ display: "flex", flexDirection: "column", gap: 14, fontSize: 13, color: "var(--text-soft)" }}>
              <div style={{ display: "flex", gap: 10 }}>
                <Icons.check size={16} style={{ color: "var(--copper)", flexShrink: 0, marginTop: 2 }} />
                <span>Free NDA before sharing sensitive details</span>
              </div>
              <div style={{ display: "flex", gap: 10 }}>
                <Icons.check size={16} style={{ color: "var(--copper)", flexShrink: 0, marginTop: 2 }} />
                <span>Itemised quote — not a "starting from" estimate</span>
              </div>
              <div style={{ display: "flex", gap: 10 }}>
                <Icons.check size={16} style={{ color: "var(--copper)", flexShrink: 0, marginTop: 2 }} />
                <span>DPA available before any contract</span>
              </div>
              <div style={{ display: "flex", gap: 10 }}>
                <Icons.check size={16} style={{ color: "var(--copper)", flexShrink: 0, marginTop: 2 }} />
                <span>No spam, no follow-up unless you ask for one</span>
              </div>
            </div>
          </div>

<div style={{
            background: "var(--surface)",
            border: "1px solid var(--line)",
            borderRadius: 24,
            padding: 36,
            minHeight: 580
          }}>
            {!submitted ? (
              <>
                {/* Progress */}
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 32 }}>
                  <div style={{ display: "flex", gap: 6 }}>
                    {[...Array(totalSteps)].map((_, i) => (
                      <div key={i} style={{
                        width: i === step ? 32 : 8,
                        height: 6,
                        background: i <= step ? "var(--copper)" : "var(--line)",
                        borderRadius: 3,
                        transition: "all 0.3s ease"
                      }}></div>
                    ))}
                  </div>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-mute)" }}>
                    {String(step + 1).padStart(2, "0")} / {String(totalSteps).padStart(2, "0")}
                  </div>
                </div>

{/* Step content */}
                <div style={{ minHeight: 360 }}>
                  {step === 0 && <Step0 form={form} toggleService={toggleService} />}
                  {step === 1 && <Step1 form={form} setForm={setForm} />}
                  {step === 2 && <Step2 form={form} setForm={setForm} />}
                  {step === 3 && <Step3 form={form} setForm={setForm} />}
                  {step === 4 && <Step4 form={form} setForm={setForm} />}
                </div>

{/* Nav buttons */}
                <div style={{ display: "flex", gap: 12, marginTop: 32, justifyContent: "space-between", borderTop: "1px solid var(--line)", paddingTop: 24 }}>
                  <button onClick={back} disabled={step === 0} className="btn btn-ghost" style={{ opacity: step === 0 ? 0.3 : 1 }}>
                    ← Back
                  </button>
                  {step < totalSteps - 1 ? (
                    <button onClick={next} disabled={!canAdvance()} className="btn btn-primary" style={{ opacity: canAdvance() ? 1 : 0.4 }}>
                      Continue <Icons.arrow size={14} />
                    </button>
                  ) : (
                    <button onClick={submitQuote} disabled={submitting} className="btn btn-copper btn-lg" style={{ opacity: submitting ? 0.6 : 1 }}>
                      {submitting ? "Sending…" : <>Send to Samuel <Icons.send size={14} /></>}
                    </button>
                  )}
                </div>
                {submitError && (
                  <div style={{ marginTop: 12, padding: "10px 14px", background: "rgba(220,80,60,0.08)", border: "1px solid rgba(220,80,60,0.3)", borderRadius: 10, color: "#c04030", fontSize: 13 }}>
                    {submitError}
                  </div>
                )}
              </>
            ) : (
              <SubmittedState form={form} />
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function Step0({ form, toggleService }) {
  return (
    <>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--copper)", letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 8 }}>Step 1</div>
      <h3 style={{ fontSize: 28, marginBottom: 8 }}>What do you need?</h3>
      <p style={{ color: "var(--text-soft)", fontSize: 14, marginBottom: 24 }}>Pick all that apply. Most clients combine 2–3.</p>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
        {SERVICES.map(s => (
          <div key={s.id} className={`chip ${form.services.includes(s.name) ? "active" : ""}`}
            onClick={() => toggleService(s.name)} style={{ padding: "12px 16px" }}>
            {form.services.includes(s.name) && <Icons.check size={14} />} {s.name}
          </div>
        ))}
      </div>
    </>
  );
}

function Step1({ form, setForm }) {
  return (
    <>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--copper)", letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 8 }}>Step 2</div>
      <h3 style={{ fontSize: 28, marginBottom: 8 }}>What's the scope?</h3>
      <p style={{ color: "var(--text-soft)", fontSize: 14, marginBottom: 24 }}>A short description is enough — I'll ask follow-ups in our call.</p>
      <div className="field" style={{ marginBottom: 18 }}>
        <label>Briefly describe your project</label>
        <textarea value={form.scope} onChange={e => setForm({...form, scope: e.target.value})} rows={5}
          placeholder="e.g., New office IT setup — 25-person team moving into a 4000 sq ft floor. Cabling, Wi-Fi, 12 CCTV cameras, 20 workstations, biometric access. Budget around ₹6L. Need it in 6 weeks." />
      </div>
      <div className="field">
        <label>How many sites / locations?</label>
        <select value={form.sites} onChange={e => setForm({...form, sites: e.target.value})}>
          <option value="">Pick one</option>
          <option>Single site</option>
          <option>2–3 sites</option>
          <option>4–10 sites</option>
          <option>10+ sites / national</option>
          <option>N/A — software or cloud-only</option>
        </select>
      </div>
    </>
  );
}

function Step3({ form, setForm }) {
  return (
    <>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--copper)", letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 8 }}>Step 4</div>
      <h3 style={{ fontSize: 28, marginBottom: 8 }}>Who am I quoting for?</h3>
      <p style={{ color: "var(--text-soft)", fontSize: 14, marginBottom: 24 }}>Quick contact details — I never share or sell.</p>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginBottom: 14 }}>
        <div className="field">
          <label>Your name</label>
          <input value={form.name} onChange={e => setForm({...form, name: e.target.value})} required />
        </div>
        <div className="field">
          <label>Your role</label>
          <input value={form.role} onChange={e => setForm({...form, role: e.target.value})} placeholder="e.g., COO" />
        </div>
      </div>
      <div className="field" style={{ marginBottom: 14 }}>
        <label>Work email</label>
        <input type="email" value={form.email} onChange={e => setForm({...form, email: e.target.value})} required />
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
        <div className="field">
          <label>Phone / WhatsApp</label>
          <input value={form.phone} onChange={e => setForm({...form, phone: e.target.value})} placeholder="+91 …" />
        </div>
        <div className="field">
          <label>Company</label>
          <input value={form.company} onChange={e => setForm({...form, company: e.target.value})} />
        </div>
      </div>
    </>
  );
}

function Step4({ form, setForm }) {
  return (
    <>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--copper)", letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 8 }}>Step 5 · final</div>
      <h3 style={{ fontSize: 28, marginBottom: 8 }}>Anything else I should know?</h3>
      <p style={{ color: "var(--text-soft)", fontSize: 14, marginBottom: 24 }}>Compliance constraints, existing vendors, integrations, deadlines — anything that'll change the scope.</p>
      <div className="field" style={{ marginBottom: 24 }}>
        <textarea value={form.notes} onChange={e => setForm({...form, notes: e.target.value})} rows={6} placeholder="Optional — but useful." />
      </div>
      <div style={{
        padding: 16, background: "var(--bg-2)", border: "1px solid var(--line)", borderRadius: 12,
        fontSize: 13, color: "var(--text-soft)", lineHeight: 1.55
      }}>
        <div style={{ fontWeight: 600, color: "var(--text)", marginBottom: 6 }}>What happens next</div>
        <div>I'll reply within an hour (BH) with either a quote, a follow-up question, or a calendar link for a 20-min call. Standard quotes ship within 24 hours; bigger scopes get a 1-page architecture brief instead.</div>
      </div>
    </>
  );
}

function SubmittedState({ form }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", padding: "40px 20px" }}>
      <div style={{ width: 96, height: 96, borderRadius: "50%", background: "var(--copper)", display: "grid", placeItems: "center", color: "#fff", marginBottom: 24 }}>
        <Icons.check size={48} />
      </div>
      <h3 style={{ fontSize: 40, marginBottom: 12 }}>
        Thanks, {form.name.split(" ")[0] || "there"}.
      </h3>
      <p style={{ color: "var(--text-soft)", fontSize: 16, marginBottom: 32, maxWidth: 480 }}>
        Your scoping request is on its way to me. I'll respond from <strong style={{ color: "var(--text)" }}>{CONTACT.emailPrimary}</strong> within an hour during business hours, or by 9am IST tomorrow if it's after-hours.
      </p>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14, width: "100%", maxWidth: 480 }}>
        <Timeline num="01" title="Now" desc="Lead received · saved to pipeline" active />
        <Timeline num="02" title="< 1h" desc="I read it · reply or follow-up Q" />
        <Timeline num="03" title="24h" desc="Itemised quote in your inbox" />
      </div>
      <div style={{ marginTop: 32, display: "flex", gap: 12 }}>
        <a href={"/"} className="btn btn-ghost">← Back home</a>
        <button onClick={() => window.openChat?.()} className="btn btn-primary"><Icons.sparkles size={14} /> Chat while you wait</button>
      </div>
    </div>
  );
}

function Timeline({ num, title, desc, active }) {
  return (
    <div style={{
      padding: 14, borderRadius: 12,
      background: active ? "var(--copper)" : "var(--bg-2)",
      color: active ? "#fff" : "var(--text)",
      textAlign: "left"
    }}>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, opacity: 0.7, marginBottom: 4 }}>{num}</div>
      <div style={{ fontWeight: 600, fontSize: 14 }}>{title}</div>
      <div style={{ fontSize: 11, opacity: 0.85, marginTop: 4 }}>{desc}</div>
    </div>
  );
}

// Cost calculator widget — CCTV pricing
function CostCalculator() {
  const [cameras, setCameras] = useState(12);
  const [sites, setSites] = useState(1);
  const [retention, setRetention] = useState(30);
  const [amc, setAmc] = useState(true);

// Indicative pricing — entry-level Hikvision DS-2CD class IP cameras with PoE,
  // tiered NVR/switch infra by camera count, HDD storage scales with retention.
  // Targets typical SMB Indian market pricing: 4 cams + 1 site + 30 days ≈ ₹16k.
  const perCamera = 2500;                                        // ₹2.5k installed (basic 2MP IP)
  const baseInfra = cameras <= 8  ? 4000                          // 8-port PoE switch + budget 8-ch NVR
                  : cameras <= 16 ? 8000                          // 16-port + 16-ch NVR
                  : cameras <= 32 ? 18000                         // 24-port + 32-ch NVR
                  :                 35000;                        // 48-port + 64-ch NVR enterprise
  const storage = Math.round(2000 * (retention / 30));            // 1 TB HDD ≈ ₹2k per 30 days
  const oneTime = cameras * perCamera + sites * (baseInfra + storage);
  const amcAnnual = amc ? Math.round(oneTime * 0.12) : 0;

return (
    <section className="section" style={{ background: "var(--bg-2)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 56, alignItems: "center" }} className="calc-grid">
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>Cost calculator · CCTV bundle</div>
            <h2 style={{ fontSize: 40, lineHeight: 1.05, marginBottom: 16 }}>
              Indicative <em style={{ color: "var(--copper)" }}>before</em> you even pick up the phone.
            </h2>
            <p style={{ color: "var(--text-soft)", fontSize: 15, lineHeight: 1.55, marginBottom: 16 }}>
              Slide to size your deployment. Prices include cameras (Hikvision DS-2CD class), NVR, switching, and standard installation. Your real quote will adjust for cable runs, mounting complexity, and OEM choice — usually within ±15%.
            </p>
            <p style={{ fontSize: 12, color: "var(--text-mute)" }}>
              * indicative only · ₹ INR · taxes extra · not a quote
            </p>
          </div>

<label style={{ display: "flex", alignItems: "center", gap: 10, padding: "12px 0", borderTop: "1px solid var(--line)", cursor: "pointer", marginTop: 12 }}>
              <input type="checkbox" checked={amc} onChange={e => setAmc(e.target.checked)} style={{ width: 18, height: 18, accentColor: "var(--copper)" }} />
              <span style={{ fontSize: 14 }}>Include 12-month AMC (recommended)</span>
            </label>

<div style={{ marginTop: 20, padding: 20, background: "var(--bg-2)", borderRadius: 14 }}>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 12, paddingBottom: 12, borderBottom: "1px solid var(--line)" }}>
                <span style={{ fontSize: 14, color: "var(--text-soft)" }}>One-time install (indicative)</span>
                <span style={{ fontFamily: "var(--font-display)", fontSize: 28, color: "var(--text)" }}>₹{(oneTime/1000).toFixed(0)}k</span>
              </div>
              {amc && (
                <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 12 }}>
                  <span style={{ fontSize: 14, color: "var(--text-soft)" }}>AMC annual</span>
                  <span style={{ fontFamily: "var(--font-display)", fontSize: 22, color: "var(--copper)" }}>+ ₹{(amcAnnual/1000).toFixed(0)}k / yr</span>
                </div>
              )}
              <a href="#quote" onClick={(e) => { e.preventDefault(); document.querySelector(".quote-grid")?.scrollIntoView({ behavior: "smooth", block: "start" }); }}
                className="btn btn-copper" style={{ width: "100%", marginTop: 8 }}>
                Get an exact quote → <Icons.arrow size={14} />
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CalcSlider({ label, value, min, max, setter, unit }) {
  return (
    <div style={{ marginBottom: 22 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 8 }}>
        <span style={{ fontSize: 14, fontWeight: 500 }}>{label}</span>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 14, color: "var(--copper)" }}>{value} {unit}{value !== 1 && unit !== "days" ? "s" : ""}</span>
      </div>
      <input type="range" min={min} max={max} value={value} onChange={e => setter(parseInt(e.target.value))}
        style={{ width: "100%", accentColor: "var(--copper)" }} />
      <div style={{ display: "flex", justifyContent: "space-between", fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-mute)", marginTop: 4 }}>
        <span>{min}</span>
        <span>{max}</span>
      </div>
    </div>
  );
}

window.ContactHero = ContactHero;
window.ContactMethods = ContactMethods;
window.QuoteForm = QuoteForm;
window.CostCalculator = CostCalculator;
window.ContactFAQ = ContactFAQ;

Tell me what you need.Quote in 24 hours.

Got it. Talk soon.

Tell me what you need.
Quote in 24 hours.