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

function OutcomeSection({ onBook, ctaCopy = "Join Systemizers" }) {
  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. Your mental energy stops getting eaten by operations and starts going into growth." },
  { ic: "banknote", title: "Reliable revenue", desc: "Processes execute the same way every time, numbers update themselves, and follow-ups happen automatically. Revenue keeps growing whether you're working or not." },
  { ic: "compass", title: "Strategic by design", desc: "80% of your time is spent on the work that only you can do, and the revenue 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 time, it's <strong className="lede-em">cognitive freedom</strong>.

          </p>
        </div>

        <div className="outcome-stage reveal">
          <div className="outcome-quote">
            <p>
              <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 80% of your time on strategic, creative, and revenue-generating activities, because you're <strong>working ON the business instead of IN it.</strong>
            </p>
            <div className="outcome-signature">Getting cognitive freedom through leverage is exactly what we'll help you achieve in Systemizers.</div>
          </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: '80%' }}>
                  <span className="osplit-pct">80%</span>
                  <span className="osplit-cap">Reactive · operational · routing decisions</span>
                </div>
                <div className="osplit-fill osplit-on" style={{ width: '20%' }}>
                  <span className="osplit-pct">20%</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: '80%' }}>
                  <span className="osplit-pct">80%</span>
                  <span className="osplit-cap">STRATEGIC · CREATIVE · REVENUE</span>
                </div>
                <div className="osplit-fill osplit-in flip" style={{ width: '20%' }}>
                  <span className="osplit-pct">20%</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="Make more, work less"
          title={"Get the AIOS that gives\nyou cognitive freedom"}
          sub={"Apply to join Systemizers to get the Notion AIOS so you can free up your time and mental bandwidth needed to scale and make more money."}
          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 = "Join Systemizers", onBook, book = false }) {
  const handleClick = book ?
  () => {if (window.openSystemizStrategyCall) window.openSystemizStrategyCall();else if (onBook) onBook();} :
  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" + (book ? " cta-panel-btn-book" : "")} onClick={handleClick}>
        <span>{ctaCopy}</span>
        <i data-lucide={book ? "calendar" : "mouse-pointer-click"}></i>
      </button>
    </div>);

}

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