/* Systemiz site — Stuck section */

function StuckSection() {
  const symptoms = [
  { ic: "brain", title: "Knowledge lives in people's heads", desc: "Processes and context aren't captured in systems. They walk out the door every time someone leaves." },
  { ic: "notebook-tabs", title: "No single source of truth", desc: "Information is scattered across 10–15 different tools. Your team wastes their and your time trying to find information." },
  { ic: "layout-dashboard", title: "No CEO dashboard", desc: "Zero visibility into the business or what your team is actually working on day to day." },
  { ic: "line-chart", title: "Numbers aren't tracked", desc: "Data tracking isn't automated, so you don't know your numbers and can't make informed decisions." },
  { ic: "alarm-clock-off", title: "You don't have leverage to scale", desc: "Fulfillment can't scale because everything still requires your time. Without an AI OS doing the work for you, every new customer means more of your time. More revenue means more work and burnout." }];

  return (
    <section className="section" id="why-stuck" data-screen-label="02 Why You Feel Stuck">
      <div className="shell">
        <div className="section-head reveal">
          <span className="eyebrow">The Problem</span>
          <h2>Your <span className="accent">business can't scale</span><br />if you're the bottleneck.</h2>
          <p className="lede" style={{ fontWeight: "400" }}><strong style={{ color: "#fff", fontWeight: 700 }}>If your business still requires you</strong> for every decision, product launch, client delivery or team onboarding, then <strong style={{ color: "#fff", fontWeight: 700 }}>you're the bottleneck.</strong>

          </p>
        </div>
        <div className="stuck reveal">
          <div className="stuck-copy">
            <h3>The <strong style={{ color: "rgb(255, 255, 255)" }}>cost</strong>: <strong>you <b style={{ fontWeight: 500 }}>
ARE</b> the system.</strong></h3>
            <p>Picture this: You have an <strong style={{ color: 'var(--fg-1)', fontWeight: "600" }}>extra 10h/week</strong> because your business <strong style={{ color: 'var(--fg-1)', fontWeight: "600" }}>runs on systems</strong> instead of you. Now picture spending those same 10 hours on marketing and sales instead. How many more customers could you close per month? How much revenue is that? <strong style={{ color: 'var(--fg-1)', fontWeight: "600" }}>That's the real cost of being the system, the money you leave on the table.</strong></p>
            <p>The reason you're stuck isn't because you're not working hard enough, it's because you don't have systems doing the work for you. Another AI tool, course or template won't solve the problem. What you need is an <strong style={{ color: 'var(--fg-1)', fontWeight: "600" }}>operating system that organizes and makes your business visible, automates your processes, and lets AI do the work for you.</strong></p>
            <div className="signature">That's what we help you install in 30 days.</div>
          </div>
          <div className="symptom-stack">
            <div className="symptom-stack-label">
              <span className="ssl-rule"></span>
              <span className="ssl-text">The 5 symptoms of being the system</span>
              <span className="ssl-rule"></span>
            </div>
            {symptoms.map((s, i) => <div className="symptom" key={i}>
                <span className="num">0{i + 1}</span>
                <span className="ico"><i data-lucide={s.ic}></i></span>
                <div className="body">
                  <div className="title">{s.title}</div>
                  <div className="desc">{s.desc}</div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, { StuckSection });