// ============================================================
// SamuelMarndi.com — Service Detail Page Components
// Hero, Outcomes, Breakdown, Architecture, Tech, Pricing,
// Lead Form, FAQ, Related Services
// ============================================================

function ServiceHero({ service }) {
  const photo = (window.Photos || {})[service.slug];
  return (
    <section className="paper-bg" style={{
      padding: "var(--space-xl) 0 var(--space-2xl)",
      position: "relative",
      overflow: "hidden",
      ...(photo ? {
        backgroundImage: `linear-gradient(180deg, color-mix(in srgb, var(--bg) 80%, transparent) 0%, color-mix(in srgb, var(--bg) 92%, transparent) 60%, var(--bg) 100%), url("${photo}")`,
        backgroundSize: "cover",
        backgroundPosition: "center",
      } : {}),
    }}>
      <div className="container" style={{ position: "relative", zIndex: 2 }}>
        {/* Breadcrumb */}
        <div style={{ fontSize: 12, color: "var(--text-mute)", marginBottom: 28, fontFamily: "var(--font-mono)" }}>
          <a href={B("index.html")} style={{ color: "var(--text-mute)" }}>Home</a>
          <span style={{ margin: "0 8px", opacity: 0.5 }}>/</span>
          <span style={{ color: "var(--text-mute)" }}>Services</span>
          <span style={{ margin: "0 8px", opacity: 0.5 }}>/</span>
          <span style={{ color: "var(--copper)" }}>{service.category}</span>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, alignItems: "start" }} className="service-hero-grid">
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}>{service.category}</div>
            <h1 style={{ fontSize: "var(--fs-hero)", lineHeight: 0.98, marginBottom: 28 }}>
              {service.h1Display[0]}
              <em style={{ color: "var(--copper)", fontStyle: "italic" }}>{service.h1Display[1]}</em>
              {service.h1Display[2]}
            </h1>
            <p style={{ fontSize: 19, color: "var(--text-soft)", lineHeight: 1.55, maxWidth: 600, marginBottom: 32 }}>
              {service.subhead}
            </p>
            <div style={{ display: "flex", gap: 12, marginBottom: 36, flexWrap: "wrap" }}>
              <a href={"/contact"} className="btn btn-primary btn-lg">
                Start a project <Icons.arrow size={16} />
              </a>
              <button onClick={() => window.openChat?.()} className="btn btn-ghost btn-lg">
                <Icons.sparkles size={16} /> Try the chatbot live
              </button>
            </div>
            <div style={{ display: "flex", gap: 36, flexWrap: "wrap", paddingTop: 28, borderTop: "1px solid var(--line)" }}>
              <div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--text-mute)", marginBottom: 6 }}>Starts from</div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 32, color: "var(--copper)" }}>{service.indicative.from}</div>
              </div>
              <div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--text-mute)", marginBottom: 6 }}>Typical timeline</div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 32 }}>{service.indicative.time}</div>
              </div>
              <div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--text-mute)", marginBottom: 6 }}>Client CSAT</div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 32 }}>{service.indicative.csat}</div>
              </div>
            </div>
          </div>

          {/* Side card — table of contents */}
          <div style={{
            background: "var(--surface)",
            border: "1px solid var(--line)",
            borderRadius: 22,
            padding: 28,
            position: "sticky",
            top: 100,
            boxShadow: "var(--shadow-sm)"
          }}>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--text-mute)", marginBottom: 14 }}>On this page</div>
            <nav style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {[
                { href: "#outcomes", label: "Outcomes" },
                { href: "#breakdown", label: "What's included" },
                { href: "#pricing", label: "Pricing" },
                { href: "#faq", label: "FAQs" },
              ].map(l => (
                <a key={l.href} href={l.href} style={{ fontSize: 14, color: "var(--text-soft)", padding: "6px 0", borderBottom: "1px solid var(--line-soft)", display: "flex", justifyContent: "space-between" }}>
                  {l.label}
                  <Icons.arrow size={12} style={{ color: "var(--copper)" }} />
                </a>
              ))}
            </nav>
            <div style={{ marginTop: 22, padding: 16, background: "var(--bg-2)", borderRadius: 12, fontSize: 13 }}>
              <div style={{ fontWeight: 600, marginBottom: 6 }}>Free 20-min scoping call</div>
              <div style={{ color: "var(--text-soft)", marginBottom: 12, fontSize: 12 }}>I'll send a 1-page scope brief within 24 hours of our call.</div>
              <a href={"/contact"} className="btn btn-copper btn-sm" style={{ width: "100%" }}>
                <Icons.calendar size={12} /> Book a call
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ServiceOutcomes({ service }) {
  return (
    <section id="outcomes" className="section-tight" style={{ background: "var(--bg-2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="container">
        <div className="eyebrow" style={{ marginBottom: 16 }}>Measured outcomes</div>
        <h2 style={{ fontSize: 36, marginBottom: 36, maxWidth: 720 }}>Numbers from <em style={{ color: "var(--copper)" }}>real deployments</em> — not slideware.</h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 24 }}>
          {service.outcomes.map((o, i) => (
            <div key={i} style={{ padding: "24px 0", borderTop: "2px solid var(--copper)" }}>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 72, lineHeight: 1, color: "var(--text)", marginBottom: 12 }}>{o.num}</div>
              <div style={{ fontSize: 16, fontWeight: 600, marginBottom: 4 }}>{o.label}</div>
              <div style={{ fontSize: 13, color: "var(--text-mute)" }}>{o.note}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ServiceBreakdown({ service }) {
  return (
    <section id="breakdown" className="section">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "end", marginBottom: 48 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>What's included</div>
            <h2 style={{ fontSize: "var(--fs-display)" }}>Six chatbot patterns, <em style={{ color: "var(--copper)" }}>one stack.</em></h2>
          </div>
          <p style={{ fontSize: 17, color: "var(--text-soft)", lineHeight: 1.55, maxWidth: 480, justifySelf: "end" }}>
            Most clients start with one — web chat or WhatsApp — and grow into voice, document AI, or sales copilots once they see what's possible. The underlying RAG + tool-calling architecture is the same.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 18 }}>
          {service.subServices.map((s, i) => {
            const I = Icons[s.icon];
            return (
              <div key={i} className="card" style={{ padding: 28, display: "flex", flexDirection: "column", gap: 14, minHeight: 220 }}>
                <div style={{ width: 44, height: 44, borderRadius: 10, background: "var(--bg-2)", display: "grid", placeItems: "center", color: "var(--copper)" }}>
                  <I size={22} />
                </div>
                <h3 style={{ fontFamily: "var(--font-display)", fontSize: 26, lineHeight: 1.1 }}>{s.title}</h3>
                <p style={{ fontSize: 14, color: "var(--text-soft)", lineHeight: 1.5 }}>{s.desc}</p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function ServiceArchitecture({ service }) {
  return (
    <section id="architecture" className="section" style={{ background: "var(--ink)", color: "var(--cream)", position: "relative", overflow: "hidden" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 64, alignItems: "center" }} className="arch-grid">
          <div>
            <div className="eyebrow" style={{ marginBottom: 16, color: "var(--copper-bright)" }}>How it works</div>
            <h2 style={{ fontSize: "var(--fs-display)", color: "var(--cream)", marginBottom: 24 }}>
              RAG. Tool-calls.<br /><em style={{ color: "var(--copper-bright)" }}>Honest guardrails.</em>
            </h2>
            <div style={{ display: "flex", flexDirection: "column", gap: 20, marginBottom: 24 }}>
              {[
                { step: "01", title: "Ingest", desc: "Your docs (PDF, Notion, Drive, web, DB) → chunked → embedded → indexed in pgvector. Access-control-aware." },
                { step: "02", title: "Retrieve", desc: "Each user turn triggers semantic retrieval. Top-K chunks ground the model. No retrieval = explicit refusal." },
                { step: "03", title: "Reason", desc: "Claude (or your chosen model) plans tool calls: createLead, draftQuote, scheduleCall, fetchCaseStudy, escalateToHuman." },
                { step: "04", title: "Guard", desc: "Prompt-injection detection, PII redaction, refusal patterns, secret-scanning on outbound. Sensitive topics auto-escalate." },
                { step: "05", title: "Eval", desc: "Weekly golden-set runs scored on factuality, helpfulness, brand-voice. Regressions alert the team." },
              ].map(s => (
                <div key={s.step} style={{ display: "flex", gap: 18 }}>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--copper-bright)", width: 36, flexShrink: 0 }}>{s.step}</div>
                  <div>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: 20, color: "var(--cream)", marginBottom: 4 }}>{s.title}</div>
                    <div style={{ fontSize: 14, color: "#A89A85", lineHeight: 1.5 }}>{s.desc}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Architecture diagram */}
          <ArchitectureDiagram />
        </div>
      </div>
    </section>
  );
}

function ArchitectureDiagram() {
  // SVG-based architecture diagram
  return (
    <div style={{
      background: "rgba(245,238,226,0.04)",
      border: "1px solid #3D3329",
      borderRadius: 22,
      padding: 32,
      position: "relative"
    }}>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--copper-bright)", marginBottom: 20 }}>System architecture · v1</div>
      <svg viewBox="0 0 440 480" style={{ width: "100%", height: "auto" }}>
        <defs>
          <marker id="arr" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
            <path d="M0,0 L6,3 L0,6 Z" fill="#B87A4F" />
          </marker>
        </defs>
        {/* USER */}
        <g>
          <rect x="20" y="20" width="120" height="40" rx="8" fill="none" stroke="#B87A4F" strokeWidth="1" />
          <text x="80" y="40" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="11" fill="#E0A074">user</text>
          <text x="80" y="54" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="#8E8170">web · whatsapp · voice</text>
        </g>
        {/* Guard */}
        <g>
          <rect x="20" y="100" width="120" height="36" rx="8" fill="rgba(184,122,79,0.1)" stroke="#B87A4F" strokeWidth="1" strokeDasharray="3 2" />
          <text x="80" y="123" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="10" fill="#E0A074">prompt-injection guard</text>
        </g>
        {/* MODEL */}
        <g>
          <rect x="20" y="180" width="400" height="160" rx="12" fill="none" stroke="#B87A4F" strokeWidth="1" />
          <text x="40" y="208" fontFamily="JetBrains Mono" fontSize="11" fill="#E0A074">CLAUDE · sonnet-4</text>
          {/* Tools */}
          <rect x="40" y="230" width="160" height="92" rx="6" fill="rgba(184,122,79,0.06)" stroke="#3D3329" strokeWidth="0.5" />
          <text x="50" y="248" fontFamily="JetBrains Mono" fontSize="9" fill="#E0A074">TOOLS</text>
          <text x="50" y="266" fontFamily="JetBrains Mono" fontSize="10" fill="#C9BCA8">→ createLead</text>
          <text x="50" y="282" fontFamily="JetBrains Mono" fontSize="10" fill="#C9BCA8">→ draftQuote</text>
          <text x="50" y="298" fontFamily="JetBrains Mono" fontSize="10" fill="#C9BCA8">→ scheduleCall</text>
          <text x="50" y="314" fontFamily="JetBrains Mono" fontSize="10" fill="#C9BCA8">→ escalateToHuman</text>
          {/* RAG */}
          <rect x="220" y="230" width="180" height="92" rx="6" fill="rgba(184,122,79,0.06)" stroke="#3D3329" strokeWidth="0.5" />
          <text x="230" y="248" fontFamily="JetBrains Mono" fontSize="9" fill="#E0A074">RAG</text>
          <text x="230" y="266" fontFamily="JetBrains Mono" fontSize="10" fill="#C9BCA8">pgvector · top-k</text>
          <text x="230" y="282" fontFamily="JetBrains Mono" fontSize="10" fill="#C9BCA8">your docs · ACL-aware</text>
          <text x="230" y="298" fontFamily="JetBrains Mono" fontSize="10" fill="#C9BCA8">citations preserved</text>
          <text x="230" y="314" fontFamily="JetBrains Mono" fontSize="10" fill="#8E8170">refusal if no match</text>
        </g>
        {/* Output */}
        <g>
          <rect x="20" y="380" width="180" height="36" rx="8" fill="none" stroke="#B87A4F" strokeWidth="1" />
          <text x="110" y="403" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="10" fill="#E0A074">CRM · slack · email</text>
        </g>
        <g>
          <rect x="240" y="380" width="180" height="36" rx="8" fill="none" stroke="#B87A4F" strokeWidth="1" />
          <text x="330" y="403" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="10" fill="#E0A074">eval pipeline · weekly</text>
        </g>
        {/* Arrows */}
        <line x1="80" y1="60" x2="80" y2="98" stroke="#B87A4F" strokeWidth="1" markerEnd="url(#arr)" />
        <line x1="80" y1="138" x2="80" y2="178" stroke="#B87A4F" strokeWidth="1" markerEnd="url(#arr)" />
        <line x1="120" y1="342" x2="110" y2="378" stroke="#B87A4F" strokeWidth="1" markerEnd="url(#arr)" />
        <line x1="320" y1="342" x2="330" y2="378" stroke="#B87A4F" strokeWidth="1" markerEnd="url(#arr)" />
      </svg>
      <div style={{ marginTop: 18, paddingTop: 16, borderTop: "1px solid #3D3329", display: "flex", justifyContent: "space-between", fontSize: 10, fontFamily: "var(--font-mono)" }}>
        <span style={{ color: "#8E8170" }}>p99 latency: 1.4s · cost: ~₹0.8/conversation</span>
        <span style={{ color: "var(--copper-bright)" }}>● production-ready</span>
      </div>
    </div>
  );
}

function ServiceTech({ service }) {
  return (
    <section className="section-tight">
      <div className="container">
        <div style={{ textAlign: "center", marginBottom: 32 }}>
          <div className="eyebrow" style={{ marginBottom: 12, justifyContent: "center", display: "inline-flex" }}>Tech & tooling</div>
          <h3 style={{ fontSize: 28 }}>Picked because they work — not because of partnerships.</h3>
        </div>
        <div style={{ display: "flex", justifyContent: "center", flexWrap: "wrap", gap: 12 }}>
          {service.techStack.map(t => (
            <div key={t} style={{
              padding: "10px 18px",
              border: "1px solid var(--line)",
              borderRadius: 999,
              fontFamily: "var(--font-mono)",
              fontSize: 13,
              color: "var(--text-soft)",
              background: "var(--surface)"
            }}>{t}</div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ServicePricing({ service }) {
  return (
    <section id="pricing" className="section" style={{ background: "var(--bg-2)" }}>
      <div className="container">
        <div style={{ textAlign: "center", marginBottom: 56 }}>
          <div className="eyebrow" style={{ marginBottom: 16, justifyContent: "center", display: "inline-flex" }}>Pricing models</div>
          <h2 style={{ fontSize: "var(--fs-display)", marginBottom: 16 }}>
            Indicative ranges. <em style={{ color: "var(--copper)" }}>Final quote in 24h.</em>
          </h2>
          <p style={{ fontSize: 16, color: "var(--text-soft)", maxWidth: 560, margin: "0 auto" }}>
            Pick a tier as a starting point. Real quotes depend on document volume, integration count, and channels. LLM-API costs are passed through at cost — no markup.
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 18 }}>
          {service.pricing.map((p, i) => (
            <div key={i} style={{
              padding: 32,
              background: p.highlighted ? "var(--ink)" : "var(--surface)",
              color: p.highlighted ? "var(--cream)" : "var(--text)",
              border: p.highlighted ? "1px solid var(--ink)" : "1px solid var(--line)",
              borderRadius: 22,
              display: "flex", flexDirection: "column", gap: 18,
              position: "relative",
              boxShadow: p.highlighted ? "var(--shadow-md)" : "none"
            }}>
              {p.highlighted && (
                <div style={{
                  position: "absolute", top: -12, left: 32,
                  background: "var(--copper)",
                  color: "#fff",
                  padding: "4px 12px",
                  borderRadius: 999,
                  fontSize: 10,
                  fontFamily: "var(--font-mono)",
                  letterSpacing: "0.14em",
                  textTransform: "uppercase",
                  fontWeight: 600
                }}>Most popular</div>
              )}
              <div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: p.highlighted ? "var(--copper-bright)" : "var(--copper)", marginBottom: 8 }}>{p.tier}</div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 44, lineHeight: 1 }}>{p.price}</div>
                <div style={{ fontSize: 13, color: p.highlighted ? "#A89A85" : "var(--text-mute)", marginTop: 6 }}>{p.desc}</div>
              </div>
              <hr style={{ border: 0, borderTop: `1px solid ${p.highlighted ? "#3D3329" : "var(--line)"}` }} />
              <div style={{ display: "flex", flexDirection: "column", gap: 10, flex: 1 }}>
                {p.features.map((f, j) => (
                  <div key={j} style={{ display: "flex", gap: 10, fontSize: 13 }}>
                    <Icons.check size={14} style={{ color: p.highlighted ? "var(--copper-bright)" : "var(--copper)", flexShrink: 0, marginTop: 2 }} />
                    <span>{f}</span>
                  </div>
                ))}
              </div>
              <a href={"/contact"} className="btn" style={{
                background: p.highlighted ? "var(--copper)" : "transparent",
                color: p.highlighted ? "#fff" : "var(--text)",
                border: p.highlighted ? "none" : "1px solid var(--line)",
                marginTop: "auto"
              }}>{p.cta} <Icons.arrow size={14} /></a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ServiceLeadForm({ service }) {
  const [submitted, setSubmitted] = useState(false);
  const [form, setForm] = useState({ name: "", email: "", company: "", scope: "", channels: [], timeline: "" });
  const toggleChannel = (c) => {
    setForm(f => ({ ...f, channels: f.channels.includes(c) ? f.channels.filter(x => x !== c) : [...f.channels, c] }));
  };
  return (
    <section className="section">
      <div className="container">
        <div style={{
          background: "var(--surface)",
          border: "1px solid var(--line)",
          borderRadius: 28,
          padding: "var(--space-xl)",
          display: "grid",
          gridTemplateColumns: "1fr 1.1fr",
          gap: 56,
        }} className="lead-form">
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>Scope your chatbot</div>
            <h2 style={{ fontSize: 40, marginBottom: 20, lineHeight: 1.05 }}>
              Tell me what you're trying to do. <em style={{ color: "var(--copper)" }}>I'll reply within an hour.</em>
            </h2>
            <p style={{ fontSize: 15, color: "var(--text-soft)", lineHeight: 1.55, marginBottom: 24 }}>
              Or if you'd rather <button onClick={() => window.openChat?.()} className="ilink">scope it with the chatbot</button> — it'll ask 3-5 questions and produce a 1-page brief in 60 seconds.
            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: 14, color: "var(--text-soft)", fontSize: 14 }}>
              <div style={{ display: "flex", gap: 10 }}><Icons.check size={16} style={{ color: "var(--copper)", flexShrink: 0, marginTop: 2 }} /> <span>NDA available before sharing details</span></div>
              <div style={{ display: "flex", gap: 10 }}><Icons.check size={16} style={{ color: "var(--copper)", flexShrink: 0, marginTop: 2 }} /> <span>No agencies, no junior reps — Samuel directly</span></div>
              <div style={{ display: "flex", gap: 10 }}><Icons.check size={16} style={{ color: "var(--copper)", flexShrink: 0, marginTop: 2 }} /> <span>Quote &amp; architecture brief within 24h</span></div>
            </div>
          </div>
          {!submitted ? (
            <form onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }} style={{ display: "flex", flexDirection: "column", gap: 16 }}>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                <div className="field">
                  <label>Your name</label>
                  <input required value={form.name} onChange={e => setForm({...form, name: e.target.value})} />
                </div>
                <div className="field">
                  <label>Work email</label>
                  <input required type="email" value={form.email} onChange={e => setForm({...form, email: e.target.value})} />
                </div>
              </div>
              <div className="field">
                <label>Company</label>
                <input value={form.company} onChange={e => setForm({...form, company: e.target.value})} />
              </div>
              <div className="field">
                <label>Which channels?</label>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                  {["Web chat", "WhatsApp", "Voice", "Slack", "Email triage", "Document AI"].map(c => (
                    <div key={c} className={`chip ${form.channels.includes(c) ? "active" : ""}`} onClick={() => toggleChannel(c)}>{c}</div>
                  ))}
                </div>
              </div>
              <div className="field">
                <label>Briefly — what do you want the bot to do?</label>
                <textarea required value={form.scope} onChange={e => setForm({...form, scope: e.target.value})} placeholder="e.g., 24×7 support chatbot grounded on our help center; book demos for sales; quote drafting for incoming RFPs..." />
              </div>
              <div className="field">
                <label>When do you need it live?</label>
                <select value={form.timeline} onChange={e => setForm({...form, timeline: e.target.value})}>
                  <option value="">Pick a timeline</option>
                  <option>ASAP — within 4 weeks</option>
                  <option>Quarter (4–12 weeks)</option>
                  <option>Exploring — no deadline yet</option>
                </select>
              </div>
              <button type="submit" className="btn btn-primary btn-lg" style={{ width: "100%" }}>
                Send — I'll reply within an hour <Icons.send size={14} />
              </button>
              <div style={{ fontSize: 11, color: "var(--text-mute)", textAlign: "center" }}>
                By submitting you agree to our <a href="#" className="ilink">privacy policy</a>. DPDP & GDPR-compliant.
              </div>
            </form>
          ) : (
            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 16, padding: 40, textAlign: "center" }}>
              <div style={{ width: 72, height: 72, borderRadius: "50%", background: "var(--copper)", display: "grid", placeItems: "center", color: "#fff" }}>
                <Icons.check size={36} />
              </div>
              <h3 style={{ fontSize: 32 }}>Got it.</h3>
              <p style={{ color: "var(--text-soft)" }}>I'll reply within an hour during business hours. Expect a calendar link and 3-5 scoping questions.</p>
              <a href={B("index.html")} className="btn btn-ghost">Back to home <Icons.arrow size={14} /></a>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

function ServiceFAQ({ service }) {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="section">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.5fr", gap: 56 }} className="faq-grid">
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>FAQs</div>
            <h2 style={{ fontSize: "var(--fs-display)", marginBottom: 16 }}>
              The questions <em style={{ color: "var(--copper)" }}>most buyers ask.</em>
            </h2>
            <p style={{ fontSize: 15, color: "var(--text-soft)", lineHeight: 1.55, marginBottom: 24 }}>
              Don't see yours? <button onClick={() => window.openChat?.()} className="ilink">Ask the chatbot</button> — it knows my docs.
            </p>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {service.faqs.map((f, i) => (
              <div key={i} style={{
                border: "1px solid var(--line)",
                borderRadius: 14,
                background: open === i ? "var(--surface)" : "transparent",
                overflow: "hidden",
                transition: "background 0.2s ease"
              }}>
                <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                  width: "100%",
                  padding: "18px 22px",
                  textAlign: "left",
                  display: "flex", alignItems: "center", justifyContent: "space-between",
                  fontSize: 16, fontWeight: 600, color: "var(--text)",
                  gap: 16
                }}>
                  <span>{f.q}</span>
                  <span style={{
                    flexShrink: 0,
                    width: 24, height: 24, borderRadius: "50%",
                    border: "1px solid var(--line)",
                    display: "grid", placeItems: "center",
                    color: "var(--copper)",
                    transform: open === i ? "rotate(45deg)" : "none",
                    transition: "transform 0.2s ease"
                  }}>
                    <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
                      <path d="M5 1v8M1 5h8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
                    </svg>
                  </span>
                </button>
                {open === i && (
                  <div style={{ padding: "0 22px 22px", color: "var(--text-soft)", fontSize: 14, lineHeight: 1.6 }}>
                    {f.a}
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function ServiceRelated({ service }) {
  const related = SERVICES.filter(s => service.related.includes(s.id));
  return (
    <section className="section-tight" style={{ background: "var(--bg-2)" }}>
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 28, flexWrap: "wrap", gap: 12 }}>
          <h3 style={{ fontSize: 28 }}>Related services</h3>
          <a href={B("index.html") + "#services"} className="btn btn-ghost btn-sm">All 11 services <Icons.arrow size={12} /></a>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 14 }}>
          {related.map(s => {
            const I = Icons[s.icon];
            return (
              <a key={s.id} href={B(s.href)} className="card" style={{ padding: 20, display: "flex", alignItems: "center", gap: 14 }}>
                <div style={{ width: 40, height: 40, borderRadius: 10, background: "var(--bg-2)", display: "grid", placeItems: "center", color: "var(--copper)", flexShrink: 0 }}>
                  <I size={20} />
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 600, fontSize: 14 }}>{s.name}</div>
                  <div style={{ fontSize: 12, color: "var(--text-mute)", marginTop: 2 }}>from {s.from}</div>
                </div>
                <Icons.arrow size={14} style={{ color: "var(--copper)" }} />
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function ServiceProducts({ service }) {
  if (!service.products || !service.products.length) return null;
  const photos = window.Photos || {};
  return (
    <section className="section-tight" style={{ background: "var(--bg-2)" }}>
      <div className="container">
        <div style={{ textAlign: "center", marginBottom: 32 }}>
          <div className="eyebrow" style={{ marginBottom: 12, justifyContent: "center", display: "inline-flex" }}>Products I install</div>
          <h3 style={{ fontSize: 28, marginBottom: 8 }}>What it looks like in your office</h3>
          <p style={{ fontSize: 14, color: "var(--text-mute)", maxWidth: 640, margin: "0 auto" }}>
            Representative product categories — pick from any tier and brand. I'll recommend specific models after a site walk.
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 18 }}>
          {service.products.map((p, i) => {
            const url = photos[p.img];
            return (
              <div key={i} className="card" style={{ padding: 0, overflow: "hidden", display: "flex", flexDirection: "column" }}>
                <div style={{
                  width: "100%",
                  aspectRatio: "4 / 3",
                  background: url ? `linear-gradient(0deg, rgba(6,24,26,0.4), rgba(6,24,26,0.15)), url("${url}") center/cover no-repeat` : "var(--bg-3)",
                  borderBottom: "1px solid var(--line)",
                }} />
                <div style={{ padding: 18 }}>
                  <h4 style={{ fontSize: 16, fontWeight: 600, marginBottom: 6 }}>{p.label}</h4>
                  <p style={{ fontSize: 13, color: "var(--text-soft)", lineHeight: 1.5 }}>{p.desc}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function ServiceTopics({ service }) {
  if (!service.topics || !service.topics.length) return null;
  return (
    <section className="section-tight">
      <div className="container">
        <div style={{ textAlign: "center", marginBottom: 28 }}>
          <div className="eyebrow" style={{ marginBottom: 12, justifyContent: "center", display: "inline-flex" }}>What I cover</div>
          <h3 style={{ fontSize: 28, marginBottom: 8 }}>Topics, technologies & terms I work with</h3>
          <p style={{ fontSize: 14, color: "var(--text-mute)", maxWidth: 640, margin: "0 auto" }}>
            If you searched for any of these and landed here — yes, that's part of what I do. Reach out for a real quote, not a template.
          </p>
        </div>
        <div style={{ display: "flex", justifyContent: "center", flexWrap: "wrap", gap: 8, maxWidth: 980, margin: "0 auto" }}>
          {service.topics.map(t => (
            <span key={t} style={{
              padding: "6px 14px",
              border: "1px solid var(--line)",
              borderRadius: 999,
              fontSize: 12,
              color: "var(--text-soft)",
              background: "var(--surface)",
              whiteSpace: "nowrap",
            }}>{t}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

window.ServiceHero = ServiceHero;
window.ServiceOutcomes = ServiceOutcomes;
window.ServiceBreakdown = ServiceBreakdown;
window.ServiceArchitecture = ServiceArchitecture;
window.ServiceTech = ServiceTech;
window.ServiceTopics = ServiceTopics;
window.ServiceProducts = ServiceProducts;
window.ServicePricing = ServicePricing;
window.ServiceLeadForm = ServiceLeadForm;
window.ServiceFAQ = ServiceFAQ;
window.ServiceRelated = ServiceRelated;