/* Systemiz site — Outcome / Cognitive Freedom section */

function OutcomeSection({ onBook, ctaCopy = "Book a Free AI OS Audit" }) {
  const pillars = [
  { ic: "brain-cog", title: "Out of your head", desc: "The business runs on systems you trust, not on memory, calendar tetris, or constant context-switching." },
  { ic: "shield-check", title: "Reliable by default", desc: "Processes execute the same way every time. Numbers update themselves. The work happens whether you're in it or not." },
  { ic: "compass", title: "Strategic by design", desc: "70% of your time is spent on the work that only you can do, and compounds over time because it's strategic, creative, and relationship-based." }];


  return (
    <section className="section section-outcome" id="outcome" data-screen-label="03 The Outcome">
      <div className="shell">
        <div className="section-head reveal">
          <span className="eyebrow">The Outcome</span>
          <h2>An <span>AI OS</span> gives you <span className="accent">Cognitive Freedom</span>.</h2>
          <p className="lede">After helping dozens of founders <strong className="lede-em">systemiz</strong> their business, we've found that the outcome that matters most is not another tool, increased productivity or even more revenue, it's <strong className="lede-em">cognitive freedom</strong>.

          </p>
        </div>

        <div className="outcome-stage reveal">
          <div className="outcome-quote">
            <p data-comment-anchor="86e7a55a1f-p-25-13">
              <strong>Cognitive Freedom</strong> is the ability to stop holding the business in your head, because you have an <strong>efficient and reliable system you trust,</strong> allowing you to focus 70% of your time on strategic, creative, and relationship-based activities, because you're <strong>working ON the business instead of IN it.</strong>
            </p>
          </div>

          <div className="outcome-split" aria-hidden="true">
            <div className="osplit-row">
              <div className="osplit-label">
                <span className="osplit-tag">Before</span>
                <span className="osplit-headline">Working <span className="caps-accent">IN</span> the business</span>
              </div>
              <div className="osplit-bar today">
                <div className="osplit-fill osplit-in" style={{ width: '70%' }}>
                  <span className="osplit-pct">70%</span>
                  <span className="osplit-cap">Reactive · operational · routing decisions</span>
                </div>
                <div className="osplit-fill osplit-on" style={{ width: '30%' }}>
                  <span className="osplit-pct">30%</span>
                </div>
              </div>
            </div>
            <div className="osplit-row">
              <div className="osplit-label">
                <span className="osplit-tag tag-after">After</span>
                <span className="osplit-headline">Working <span className="caps-accent">ON</span> the business</span>
              </div>
              <div className="osplit-bar after">
                <div className="osplit-fill osplit-on flip" style={{ width: '70%' }}>
                  <span className="osplit-pct">70%</span>
                  <span className="osplit-cap">Strategic · creative · relationships</span>
                </div>
                <div className="osplit-fill osplit-in flip" style={{ width: '30%' }}>
                  <span className="osplit-pct">30%</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="outcome-pillars reveal">
          {pillars.map((p, i) => <div className="opillar" key={i}>
              <span className="opillar-ico"><i data-lucide={p.ic}></i></span>
              <div className="opillar-title">{p.title}</div>
              <div className="opillar-desc">{p.desc}</div>
            </div>
          )}
        </div>

        <CTAPanel
          eyebrow="Imagine the freedom"
          title="See what cognitive freedom looks like for your business"
          sub="Book a free audit and we'll map out how systems & AI can get you 90% of your time back, so you can focus on the creative work only you can do."
          ctaCopy={ctaCopy}
          onBook={onBook} />

      </div>
    </section>);

}

/* Reusable section CTA panel — the engaging boxed CTA used under
   Outcome, Testimonials and Fit. onBook opens the booking modal. */
function CTAPanel({ eyebrow, title, sub, ctaCopy = "Book a Free AI OS Audit", onBook }) {
  return (
    <div className="cta-panel reveal">
      <div className="cta-panel-copy">
        {eyebrow && <div className="cta-panel-eyebrow">{eyebrow}</div>}
        <h3 className="cta-panel-title">{title}</h3>
        {sub && <p className="cta-panel-sub">{sub}</p>}
      </div>
      <button className="cta-panel-btn" onClick={onBook}>
        <span>{ctaCopy}</span>
        <i data-lucide="mouse-pointer-click"></i>
      </button>
    </div>);

}

Object.assign(window, { OutcomeSection, CTAPanel });