// ============================================================
// SamuelMarndi.com — Home Page Sections
// Trust strip, services, process, cases, industries, stats,
// AI deep dive, testimonials, blog, CTA band
// ============================================================

function TrustStrip() {
  // Real brand marks I work with — pulled from Brands SVG library
  const brandKeys = ["cisco", "hikvision", "aws", "azure", "gcp", "claude", "openai", "react", "nextjs", "postgres", "node", "docker", "k8s", "stripe", "razorpay", "twilio", "shopify", "vercel", "github", "mikrotik"];
  const partnerships = [
    { label: "Cisco Partner", color: "#1BA0D7" },
    { label: "Hikvision Authorized", color: "#E12C2C" },
    { label: "AWS Consulting", color: "#FF9900" },
    { label: "Microsoft Partner", color: "#0078D4" },
    { label: "Razorpay Partner", color: "#0C2451" },
    { label: "Anthropic Verified", color: "#D97757" },
  ];
  return (
    <section className="section-tight" style={{ background: "var(--bg-2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="container">
        <div style={{ textAlign: "center", marginBottom: 22 }}>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--text-mute)" }}>
            Vendor-neutral · works with the platforms you already use
          </div>
        </div>
        <div className="marquee" style={{ marginBottom: 24 }}>
          <div className="marquee-track" style={{ alignItems: "center" }}>
            {[...brandKeys, ...brandKeys].map((b, i) => {
              const BrandComp = (window.Brands || {})[b];
              return (
                <div key={i} style={{
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  height: 44, padding: "0 22px",
                  background: "var(--surface)",
                  border: "1px solid var(--line)", borderRadius: 12,
                  filter: "grayscale(0.4)",
                  transition: "filter 0.2s, transform 0.2s",
                }}
                onMouseEnter={e => { e.currentTarget.style.filter = "grayscale(0)"; e.currentTarget.style.transform = "translateY(-2px)"; }}
                onMouseLeave={e => { e.currentTarget.style.filter = "grayscale(0.4)"; e.currentTarget.style.transform = "translateY(0)"; }}>
                  {BrandComp ? <BrandComp height={22} /> : <span style={{ fontSize: 13, color: "var(--text-mute)", fontWeight: 600 }}>{b}</span>}
                </div>
              );
            })}
          </div>
        </div>
        <div style={{ display: "flex", justifyContent: "center", gap: 12, flexWrap: "wrap" }}>
          {partnerships.map((p, i) => (
            <div key={i} style={{
              fontSize: 12, color: "var(--text)",
              display: "flex", alignItems: "center", gap: 8,
              padding: "8px 14px",
              background: "var(--surface)",
              border: "1px solid var(--line)",
              borderRadius: 999,
              boxShadow: "0 2px 6px -2px rgba(0,0,0,0.06)",
            }}>
              <span style={{ width: 8, height: 8, borderRadius: "50%", background: p.color, boxShadow: `0 0 6px ${p.color}99` }} />
              {p.label}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Map of SERVICES id → matching SVG illustration in /assets/stock/
const SERVICE_HERO_IMG = {
  networking:         "/assets/stock/network-rack.svg",
  security:           "/assets/stock/cctv-dome.svg",
  hardware:           "/assets/stock/server-rack.svg",
  web:                "/assets/stock/website-design.svg",
  software:           "/assets/stock/database.svg",
  db:                 "/assets/stock/database.svg",
  ai:                 "/assets/stock/ai-brain.svg",
  chatbot:            "/assets/stock/chatbot.svg",
  cloud:              "/assets/stock/cloud-aws.svg",
  iot:                "/assets/stock/iot-sensor.svg",
  support:            "/assets/stock/helpdesk.svg",
  "digital-marketing":"/assets/stock/digital-marketing.svg",
  advertising:        "/assets/stock/advertising.svg",
  "graphic-design":   "/assets/stock/graphic-design.svg",
};

function ServicesSection() {
  const total = SERVICES.length;
  return (
    <section id="services" 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 }}>Services</div>
            <h2 style={{ fontSize: "var(--fs-display)", marginBottom: 0 }}>
              {total} practice areas. <em style={{ color: "var(--copper)" }}>One consultant.</em>
            </h2>
          </div>
          <p style={{ fontSize: 17, color: "var(--text-soft)", lineHeight: 1.55, maxWidth: 520, justifySelf: "end" }}>
            Each service is a real practice, not a marketing checkbox. I scope it, source it, install it, integrate it, and stay on as your support contact.
          </p>
        </div>

        <div className="services-grid fade-up">
          {SERVICES.map((s, i) => {
            const I = Icons[s.icon];
            const img = SERVICE_HERO_IMG[s.id];
            return (
              <a key={s.id} href={B(s.href)} className="service-card" style={{ padding: 0, overflow: "hidden", display: "flex", flexDirection: "column" }}>
                {img && (
                  <div style={{
                    width: "100%",
                    aspectRatio: "16 / 9",
                    background: `linear-gradient(0deg, rgba(6,24,26,0.45), rgba(6,24,26,0.10)), url("${img}") center/cover no-repeat`,
                    borderBottom: "1px solid var(--line)",
                  }} />
                )}
                <div style={{ padding: 22, display: "flex", flexDirection: "column", gap: 12, flex: 1 }}>
                  <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between" }}>
                    <div className="service-icon"><I size={22} /></div>
                    <span className="pill" style={{ fontSize: 10 }}>{String(i + 1).padStart(2, "0")} / {String(total).padStart(2, "0")}</span>
                  </div>
                  <div style={{ flex: 1 }}>
                    <h3 className="service-title" style={{ marginBottom: 6 }}>{s.name}</h3>
                    <p className="service-desc">{s.desc}</p>
                  </div>
                  <div className="service-meta">
                    <span>from {s.from} · {s.typical}</span>
                    <Icons.arrow size={14} />
                  </div>
                </div>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function ProcessSection() {
  return (
    <section className="section" style={{ background: "var(--ink)", color: "var(--cream)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "end", marginBottom: 56 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 16, color: "var(--copper-bright)" }}>
              <span style={{ background: "var(--copper-bright)" }}></span>
              Engagement model
            </div>
            <h2 style={{ fontSize: "var(--fs-display)", color: "var(--cream)" }}>
              Sales → Installation → Support.<br />
              <em style={{ color: "var(--copper-bright)" }}>One continuous engagement.</em>
            </h2>
          </div>
          <p style={{ fontSize: 17, color: "#A89A85", lineHeight: 1.55, maxWidth: 480, justifySelf: "end" }}>
            Most IT projects fail in the handoffs. I scope it, source it, install it, integrate it, and stay on to operate it. No "that's a different vendor's problem."
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24, position: "relative" }}>
          {/* Connecting line */}
          <div style={{ position: "absolute", top: 28, left: "12.5%", right: "12.5%", height: 1, background: "var(--copper)", opacity: 0.3, zIndex: 0 }}></div>
          {PROCESS.map((p, i) => (
            <div key={p.step} style={{ position: "relative", zIndex: 1 }}>
              <div style={{
                width: 56, height: 56, borderRadius: "50%",
                background: i === 0 ? "var(--copper)" : "var(--ink)",
                border: "1.5px solid var(--copper)",
                display: "grid", placeItems: "center",
                fontFamily: "var(--font-mono)",
                fontSize: 14, fontWeight: 500,
                color: i === 0 ? "#fff" : "var(--copper-bright)",
                marginBottom: 24,
              }}>{p.step}</div>
              <h3 style={{ fontSize: 28, color: "var(--cream)", marginBottom: 10, fontFamily: "var(--font-display)" }}>{p.title}</h3>
              <p style={{ fontSize: 14, color: "#A89A85", lineHeight: 1.55 }}>{p.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CasesSection() {
  return (
    <section className="section">
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 48, flexWrap: "wrap", gap: 24 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>Selected work</div>
            <h2 style={{ fontSize: "var(--fs-display)" }}>
              Outcomes, <em style={{ color: "var(--copper)" }}>not deliverables.</em>
            </h2>
          </div>
          <a href={B("work/factory-vms.html")} className="btn btn-ghost">All case studies <Icons.arrow size={14} /></a>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr", gap: 18 }} className="cases-grid">
          {CASE_STUDIES.map((c, i) => {
            const I = Icons[c.cover];
            return (
              <a key={c.id} href={B(c.href)} className="case-card" style={{
                background: i === 0 ? "var(--ink)" : "var(--surface)",
                color: i === 0 ? "var(--cream)" : "var(--text)",
                border: i === 0 ? "1px solid var(--ink)" : "1px solid var(--line)",
                borderRadius: 22,
                padding: i === 0 ? 36 : 28,
                display: "flex", flexDirection: "column",
                gap: 24,
                minHeight: i === 0 ? 460 : 380,
                position: "relative", overflow: "hidden",
                transition: "transform 0.2s ease, box-shadow 0.2s ease",
              }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: i === 0 ? "var(--copper-bright)" : "var(--copper)" }}>
                    {c.industry}
                  </span>
                  <span style={{ fontSize: 11, color: i === 0 ? "#A89A85" : "var(--text-mute)" }}>{c.service}</span>
                </div>

                {/* Visual placeholder */}
                <div style={{
                  flex: i === 0 ? 1 : "0 0 140px",
                  background: i === 0 ? "linear-gradient(135deg, #2D2620 0%, var(--ink) 100%)" : "var(--bg-2)",
                  borderRadius: 14,
                  display: "grid", placeItems: "center",
                  border: i === 0 ? "1px solid #3D3329" : "1px solid var(--line)",
                  position: "relative",
                  overflow: "hidden"
                }}>
                  <I size={i === 0 ? 88 : 56} style={{ color: i === 0 ? "var(--copper-bright)" : "var(--copper)", opacity: 0.6 }} />
                  <div style={{
                    position: "absolute", top: 12, left: 12,
                    fontFamily: "var(--font-mono)", fontSize: 10, color: i === 0 ? "#8E8170" : "var(--text-mute)",
                  }}>[diagram placeholder]</div>
                </div>

                <h3 style={{
                  fontSize: i === 0 ? 32 : 22,
                  color: i === 0 ? "var(--cream)" : "var(--text)",
                  lineHeight: 1.1,
                  fontFamily: "var(--font-display)",
                }}>{c.title}</h3>

                <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                  {c.outcomes.map((o, j) => (
                    <div key={j} style={{ display: "flex", alignItems: "flex-start", gap: 8, fontSize: 13 }}>
                      <Icons.check size={14} style={{ color: i === 0 ? "var(--copper-bright)" : "var(--copper)", flexShrink: 0, marginTop: 2 }} />
                      <span style={{ color: i === 0 ? "#D4C7B0" : "var(--text-soft)" }}>{o}</span>
                    </div>
                  ))}
                </div>

                <div style={{ display: "flex", alignItems: "center", gap: 6, marginTop: "auto", fontSize: 13, fontWeight: 500, color: i === 0 ? "var(--copper-bright)" : "var(--copper)" }}>
                  Read the case study <Icons.arrow size={14} />
                </div>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function IndustriesSection() {
  return (
    <section className="section-tight" style={{ background: "var(--bg-2)" }}>
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 32, flexWrap: "wrap", gap: 16 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 12 }}>Industries</div>
            <h2 style={{ fontSize: 32 }}>Verticals I know inside-out.</h2>
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))", gap: 12 }}>
          {INDUSTRIES.map(ind => {
            const I = Icons[ind.icon];
            return (
              <a key={ind.id} href={"/industries/" + ind.slug} style={{
                padding: "18px 20px",
                background: "var(--surface)",
                border: "1px solid var(--line)",
                borderRadius: 14,
                display: "flex", alignItems: "center", gap: 12,
                transition: "all 0.18s ease"
              }} className="industry-card">
                <div style={{ width: 36, height: 36, borderRadius: 8, background: "var(--bg-2)", display: "grid", placeItems: "center", color: "var(--copper)" }}>
                  <I size={18} />
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 14, fontWeight: 600 }}>{ind.name}</div>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-mute)" }}>{ind.count} projects</div>
                </div>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function StatsSection() {
  const stats = [
    { num: "11", unit: "", label: "Practice areas — from cabling to AI" },
    { num: "60", unit: "s", label: "First-response SLA in business hours" },
    { num: "99.9", unit: "%", label: "Uptime target on managed services" },
    { num: "1", unit: "", label: "Number you call. Number who shows up." },
  ];
  return (
    <section className="section">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 48 }}>
          {stats.map((s, i) => (
            <div key={i} className="fade-up">
              <div className="stat-num">
                {s.num}<span className="unit">{s.unit}</span>
              </div>
              <div className="stat-label">{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function AIDeepDive() {
  return (
    <section className="section" style={{ background: "var(--ink)", color: "var(--cream)", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", top: -100, right: -100, width: 400, height: 400, borderRadius: "50%", background: "radial-gradient(circle, rgba(184,122,79,0.18), transparent 60%)" }}></div>
      <div className="container" style={{ position: "relative", zIndex: 2 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }} className="ai-deep">
          <div>
            <div className="eyebrow" style={{ marginBottom: 20, color: "var(--copper-bright)" }}>AI · grounded · honest</div>
            <h2 style={{ fontSize: "var(--fs-display)", color: "var(--cream)", marginBottom: 24 }}>
              The chatbot on this site <em style={{ color: "var(--copper-bright)" }}>is the kind I build for you.</em>
            </h2>
            <p style={{ fontSize: 17, color: "#C9BCA8", lineHeight: 1.55, marginBottom: 32, maxWidth: 540 }}>
              JARVIS, Sam's AI Assistant, is a real RAG-grounded chatbot running on Claude, with quote drafting, calendar booking, file uploads, and human handoff. The same architecture I'll deploy on your site, WhatsApp, or product — typically in 2–6 weeks.
            </p>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginBottom: 32 }}>
              {[
                { icon: "check", text: "Grounded in YOUR docs — no hallucinated facts" },
                { icon: "check", text: "Quote drafting from your rate card" },
                { icon: "check", text: "WhatsApp + voice + web in one stack" },
                { icon: "check", text: "Human handoff to Slack/email with transcript" },
              ].map((f, i) => {
                const FI = Icons[f.icon];
                return (
                  <div key={i} style={{ display: "flex", gap: 10, fontSize: 13, color: "#D4C7B0" }}>
                    <FI size={16} style={{ color: "var(--copper-bright)", flexShrink: 0, marginTop: 2 }} />
                    <span>{f.text}</span>
                  </div>
                );
              })}
            </div>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a href={B("services/ai-chatbots.html")} className="btn" style={{ background: "var(--copper)", color: "#fff" }}>
                See AI Chatbot service <Icons.arrow size={14} />
              </a>
              <button onClick={() => window.openChat?.()} className="btn btn-ghost" style={{ color: "var(--cream)", borderColor: "#3D3329" }}>
                <Icons.sparkles size={14} /> Try JARVIS
              </button>
            </div>
          </div>
          <div>
            <div style={{
              background: "rgba(245,238,226,0.05)",
              border: "1px solid #3D3329",
              borderRadius: 18,
              padding: 24,
              fontFamily: "var(--font-mono)",
              fontSize: 12,
              color: "#C9BCA8",
              lineHeight: 1.7
            }}>
              <div style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--copper-bright)", marginBottom: 14 }}>System architecture</div>
              <pre style={{ margin: 0, fontFamily: "inherit", whiteSpace: "pre-wrap" }}>
{`USER → web · whatsapp · voice
          ↓
 ┌─── prompt-injection guard ───┐
 │      Claude (sonnet)         │
 │  ┌── tools ──────────────┐   │
 │  │ createLead            │   │
 │  │ draftQuote            │   │
 │  │ scheduleCall          │   │
 │  │ attachFile            │   │
 │  │ escalateToHuman       │   │
 │  │ fetchCaseStudy        │   │
 │  └───────────────────────┘   │
 │  ┌── retrieval (RAG) ────┐   │
 │  │ pgvector · KB chunks  │   │
 │  └───────────────────────┘   │
 └──────────────────────────────┘
          ↓
 lead pipeline · slack · crm`}
              </pre>
              <div style={{ marginTop: 16, paddingTop: 16, borderTop: "1px solid #3D3329", display: "flex", justifyContent: "space-between", fontSize: 10 }}>
                <span style={{ color: "#8E8170" }}>evals: factuality 94% · brand-voice 4.4/5</span>
                <span style={{ color: "var(--copper-bright)" }}>● live</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function TestimonialsSection() {
  return (
    <section className="section">
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 48, flexWrap: "wrap", gap: 16 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>What clients say</div>
            <h2 style={{ fontSize: "var(--fs-display)" }}>Words from <em style={{ color: "var(--copper)" }}>actual humans.</em></h2>
          </div>
          <div style={{ fontSize: 13, color: "var(--text-mute)", maxWidth: 240 }}>
            * names &amp; logos pending client sign-off — placeholders for now
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))", gap: 18 }}>
          {TESTIMONIALS.map((t, i) => (
            <div key={i} className="card" style={{ padding: 32, display: "flex", flexDirection: "column", gap: 24, minHeight: 280 }}>
              <div style={{ display: "flex", gap: 2 }}>
                {[1,2,3,4,5].map(s => <Icons.star key={s} size={14} style={{ color: "var(--copper)", fill: "var(--copper)" }} />)}
              </div>
              <p style={{ fontFamily: "var(--font-display)", fontSize: 22, lineHeight: 1.3, color: "var(--text)" }}>
                "{t.quote}"
              </p>
              <div style={{ marginTop: "auto", paddingTop: 18, borderTop: "1px solid var(--line)" }}>
                <div style={{ fontWeight: 600, fontSize: 14 }}>{t.name}</div>
                <div style={{ fontSize: 12, color: "var(--text-mute)" }}>{t.role}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function BlogSection() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let alive = true;
    (async () => {
      try {
        const data = await window.SmApi.listPosts();
        const list = Array.isArray(data) ? data : (data?.data || []);
        if (alive) setPosts(list.slice(0, 3));
      } catch (e) {
        // Fallback to static data on failure
        if (alive) setPosts((window.BLOG_POSTS || []).slice(0, 3).map(p => ({
          slug: p.slug || "",
          title: p.title,
          excerpt: p.excerpt,
          category: p.category,
          read_time: p.readTime,
          published_at: p.date,
        })));
      } finally { if (alive) setLoading(false); }
    })();
    return () => { alive = false; };
  }, []);

  return (
    <section className="section" style={{ background: "var(--bg-2)" }}>
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 48, flexWrap: "wrap", gap: 16 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>Insights</div>
            <h2 style={{ fontSize: "var(--fs-display)" }}>Field notes from <em style={{ color: "var(--copper)" }}>the work.</em></h2>
          </div>
          <a href={"/blog"} className="btn btn-ghost">All articles <Icons.arrow size={14} /></a>
        </div>
        {loading && <div style={{ color: "var(--text-mute)" }}>Loading posts…</div>}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: 18 }}>
          {posts.map((p, i) => (
            <a key={p.id || i} href={p.slug ? "/blog/" + p.slug : "#"} className="card" style={{ padding: 28, display: "flex", flexDirection: "column", gap: 16, minHeight: 280 }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <span className="pill"><span className="dot"></span> {p.category || "Insight"}</span>
                <span style={{ fontSize: 12, color: "var(--text-mute)" }}>{p.read_time || "5 min read"}</span>
              </div>
              <h3 style={{ fontFamily: "var(--font-display)", fontSize: 24, lineHeight: 1.15 }}>{p.title}</h3>
              <p style={{ fontSize: 14, color: "var(--text-soft)", lineHeight: 1.5, flex: 1 }}>{p.excerpt}</p>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: "auto", paddingTop: 12, borderTop: "1px solid var(--line)" }}>
                <span style={{ fontSize: 12, color: "var(--text-mute)" }}>
                  {p.published_at ? new Date(p.published_at).toLocaleDateString("en-IN", { month: "short", day: "numeric", year: "numeric" }) : ""}
                </span>
                <Icons.arrow size={14} style={{ color: "var(--copper)" }} />
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTASection() {
  return (
    <section className="section" style={{ paddingBottom: "var(--space-3xl)", position: "relative", overflow: "hidden" }}>
      <div className="container">
        <div style={{
          background: "var(--ink)",
          color: "var(--cream)",
          borderRadius: 28,
          padding: "var(--space-2xl) var(--space-xl)",
          position: "relative",
          overflow: "hidden",
          textAlign: "center"
        }}>
          {/* Decorative copper rings */}
          <svg style={{ position: "absolute", top: -180, left: "50%", transform: "translateX(-50%)", opacity: 0.15 }}
            width="600" height="600" viewBox="0 0 600 600" fill="none">
            <circle cx="300" cy="300" r="290" stroke="var(--copper)" strokeWidth="0.5" />
            <circle cx="300" cy="300" r="220" stroke="var(--copper)" strokeWidth="0.5" />
            <circle cx="300" cy="300" r="150" stroke="var(--copper)" strokeWidth="0.5" />
            <circle cx="300" cy="300" r="80" stroke="var(--copper)" strokeWidth="0.5" />
          </svg>
          <div style={{ position: "relative", zIndex: 2, maxWidth: 720, margin: "0 auto" }}>
            <div className="eyebrow" style={{ marginBottom: 24, color: "var(--copper-bright)", justifyContent: "center", display: "inline-flex" }}>
              Ready when you are
            </div>
            <h2 style={{ fontSize: "clamp(40px, 6vw, 84px)", color: "var(--cream)", marginBottom: 24, lineHeight: 1 }}>
              Let's scope it<br /><em style={{ color: "var(--copper-bright)" }}>this week.</em>
            </h2>
            <p style={{ fontSize: 18, color: "#C9BCA8", marginBottom: 36, lineHeight: 1.5, maxWidth: 540, margin: "0 auto 36px" }}>
              60-second first response. 24-hour quote. One accountable person — start to finish. No sales reps. No vendor handoffs.
            </p>
            <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
              <a href={"/contact"} className="btn btn-lg" style={{ background: "var(--copper)", color: "#fff" }}>
                Get a quote in 24h <Icons.arrow size={16} />
              </a>
              <button onClick={() => window.openChat?.()} className="btn btn-ghost btn-lg" style={{ color: "var(--cream)", borderColor: "#3D3329" }}>
                <Icons.sparkles size={16} /> Scope my project
              </button>
            </div>
            <div style={{ display: "flex", gap: 24, justifyContent: "center", marginTop: 36, flexWrap: "wrap", fontSize: 13, color: "#A89A85" }}>
              <a href={`https://wa.me/${CONTACT.whatsapp}`} target="_blank" rel="noopener" style={{ display: "flex", alignItems: "center", gap: 6, color: "#A89A85" }}>
                <Icons.whatsapp size={14} style={{ color: "var(--copper-bright)" }} /> WhatsApp {CONTACT.phone}
              </a>
              <a href={`mailto:${CONTACT.emailPrimary}`} style={{ display: "flex", alignItems: "center", gap: 6, color: "#A89A85" }}>
                <Icons.mail size={14} style={{ color: "var(--copper-bright)" }} /> {CONTACT.emailPrimary}
              </a>
              <a href={`tel:${CONTACT.phoneRaw}`} style={{ display: "flex", alignItems: "center", gap: 6, color: "#A89A85" }}>
                <Icons.calendar size={14} style={{ color: "var(--copper-bright)" }} /> Book a 20-min call
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.TrustStrip = TrustStrip;
window.ServicesSection = ServicesSection;
window.ProcessSection = ProcessSection;
window.CasesSection = CasesSection;
window.IndustriesSection = IndustriesSection;
window.StatsSection = StatsSection;
window.AIDeepDive = AIDeepDive;
window.TestimonialsSection = TestimonialsSection;
window.BlogSection = BlogSection;
window.CTASection = CTASection;