/* Systemiz site — The Philosophy (Hustler vs Systemizer + 3 Systems of Record / Engagement / Intelligence) */

function PhilosophySection() {
  // Trimmed list — focused on the contrasts that actually differ in behavior
  const hustler = [
  "Runs the business like a to-do list",
  "Do it, or delegate it",
  "When things break, they work harder",
  "Builds a high-paying job they can't quit"];

  const systemizer = [
  "Runs the business like a machine",
  "Automate it, or eliminate it",
  "When things break, they fix the system",
  "Builds a business that runs without them"];


  return (
    <section className="section philosophy" id="philosophy" data-screen-label="05 Philosophy">
      <div className="shell">
        <div className="section-head reveal">
          <span className="eyebrow">The Philosophy</span>
          <h2>Hustlers are the system.<br /><span className="accent" style={{ color: "var(--brand)" }}>Systemizers build it.</span></h2>
          <p className="lede">If you stopped working today, would your business make more money or less? If less, then you don't have a business, you have a job you can't quit. No judgment tho, this is where most founders are and why they stay stuck. Becoming a Systemizer is where the real leverage lies.

          </p>
        </div>

        <div className="philo-grid reveal">
          <div className="philo-col hustler">
            <div className="philo-head">
              <span className="philo-tag">Hustler</span>
              <h3>You <em>are</em> the system.</h3>
            </div>
            <ul className="philo-list">
              {hustler.map((t, i) =>
              <li key={i}><span className="philo-mark"><i data-lucide="x"></i></span><span>{t}</span></li>
              )}
            </ul>
          </div>
          <div className="philo-divider" aria-hidden="true">
            <span className="philo-divider-line"></span>
            <span className="philo-divider-arrow"><i data-lucide="arrow-right"></i></span>
            <span className="philo-divider-line"></span>
          </div>
          <div className="philo-col systemizer">
            <div className="philo-head">
              <span className="philo-tag tag-after">Systemizer</span>
              <h3>You <em>built</em> the system.</h3>
            </div>
            <ul className="philo-list">
              {systemizer.map((t, i) =>
              <li key={i}><span className="philo-mark on"><i data-lucide="check"></i></span><span>{t}</span></li>
              )}
            </ul>
          </div>
        </div>

        <div className="philo-question reveal">
          <span className="philo-question-tag">The one question that changes everything</span>
          <div className="philo-question-pair">
            <div className="philo-q-old">
              <span className="philo-q-label">Stop asking</span>
              <span className="philo-q-text">"How can I do this <em>better?</em>"</span>
            </div>
            <span className="philo-q-arrow"><i data-lucide="arrow-right"></i></span>
            <div className="philo-q-new">
              <span className="philo-q-label">Start asking</span>
              <span className="philo-q-text">"What system will do this <em>for me?</em>"</span>
            </div>
          </div>
        </div>

        {/* ============== THE PARADOX — two stacked feedback bars, closed loop ============== */}
        <div className="paradox">
          <div className="paradox-grid">
            <div className="paradox-head">
              <span className="eyebrow eyebrow-soft">The Paradox</span>
              <h3>Those who need systems <span className="accent">most,</span> don't have time to build them.</h3>
              <p className="paradox-lede">You're too busy because you don't have systems. And the reason you don't have systems is because you're too busy to build them. This is where founders stay stuck because the effect of systems compound over time, whether good or bad.
              </p>
              <blockquote className="paradox-quote">
                <span className="paradox-quote-text">“You don't rise to the level of your goals. You fall to the level of your systems.” <span className="paradox-quote-author">— James Clear</span></span>
              </blockquote>
            </div>

            <div className="mobius" aria-hidden="true">
              <svg className="mobius-svg" viewBox="0 0 800 320" preserveAspectRatio="xMidYMid meet">
                <defs>
                  {/* Main ribbon gradient — deep crimson at the lobe tips, brand-red highlight at the twist.
                           No white anywhere, per spec. */}
                  <linearGradient id="mobius-stroke" x1="0" y1="0" x2="1" y2="0">
                    <stop offset="0" stopColor="#2a0610" />
                    <stop offset="0.18" stopColor="#5e1322" />
                    <stop offset="0.5" stopColor="#ef3a4c" />
                    <stop offset="0.82" stopColor="#5e1322" />
                    <stop offset="1" stopColor="#2a0610" />
                  </linearGradient>

                  {/* Vertical shading — top of the strip a hair brighter, bottom deeper.
                           Applied to the ribbon body as a translucent overlay stroke. */}
                  <linearGradient id="mobius-shade" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0" stopColor="rgba(0,0,0,0)" />
                    <stop offset="0.5" stopColor="rgba(0,0,0,0)" />
                    <stop offset="1" stopColor="rgba(0,0,0,0.55)" />
                  </linearGradient>

                  <filter id="mobius-glow" x="-20%" y="-50%" width="140%" height="200%">
                    <feGaussianBlur stdDeviation="8" />
                  </filter>

                  {/* Perfectly symmetric figure-8 / infinity outline. Control points mirror across both axes.
                           One closed path, so animateMotion loops forever — dot traces full edge continuously. */}
                  <path id="mobius-path"
                  d="M 80 160
                           C 80  60,  280 60,  400 160
                           C 520 260, 720 260, 720 160
                           C 720 60,  520 60,  400 160
                           C 280 260, 80  260, 80  160 Z" />



                  



                  



                  



                  



                  
                </defs>

                {/* v18 — soft dark drop-shadow removed; it was painting a
                      dirty black halo under the ribbon. */}

                {/* Pitch-black core — gives the ribbon its weight */}
                <use href="#mobius-path"
                fill="none"
                stroke="#0a0205"
                strokeWidth="26"
                strokeLinecap="round"
                strokeLinejoin="round" />

                {/* Deep-crimson body */}
                <use href="#mobius-path"
                fill="none"
                stroke="#3a0810"
                strokeWidth="22"
                strokeLinecap="round"
                strokeLinejoin="round" />

                {/* Main red gradient surface */}
                <use href="#mobius-path"
                fill="none"
                stroke="url(#mobius-stroke)"
                strokeWidth="16"
                strokeLinecap="round"
                strokeLinejoin="round" />

                {/* Bottom-shading overlay — fakes the strip's underside */}
                <use href="#mobius-path"
                fill="none"
                stroke="url(#mobius-shade)"
                strokeWidth="16"
                strokeLinecap="round"
                strokeLinejoin="round" />

                {/* Travelling dot — brand red */}
                <circle r="9" className="mobius-dot">
                  <animateMotion dur="11s" repeatCount="indefinite" rotate="auto">
                    <mpath href="#mobius-path" />
                  </animateMotion>
                </circle>
              </svg>

              <div className="mobius-label mobius-label-left">
                <span className="mobius-label-title">No system</span>
                <span className="mobius-label-sub">Everything requires your time</span>
              </div>
              <div className="mobius-label mobius-label-right">
                <span className="mobius-label-title">Too busy</span>
                <span className="mobius-label-sub">No time to build a system</span>
              </div>
            </div>
          </div>

          <div className="paradox-exits">
            <div className="paradox-exit-head">
              <span className="paradox-exit-rule"></span>
              <span className="paradox-exit-tag">Three ways out</span>
              <span className="paradox-exit-rule"></span>
            </div>
            <div className="paradox-exit-grid">
              <div className="pexit">
                <div className="pexit-ico"><i data-lucide="clock"></i></div>
                <div className="pexit-num">01</div>
                <div className="pexit-name">Do it yourself</div>
                <p className="pexit-desc">Block 1h per day for working ON the business instead of IN it. It will require you to be proactive and prioritize systems above all the other work.</p>
              </div>
              <div className="pexit pexit-featured">
                <div className="pexit-ico"><i data-lucide="package"></i></div>
                <div className="pexit-num">02</div>
                <div className="pexit-name">Buy a finished system</div>
                <p className="pexit-desc">Start from our ready-to-use system that can be adapted to your own business so you don't have to reinvent the wheel.</p>
                <a className="pexit-cta pexit-cta-primary" href="#book" onClick={(e) => { if (window.openSystemizAudit) { e.preventDefault(); window.openSystemizAudit(); } }}>
                  Join Systemizers
                  <svg className="arrow" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7" /></svg>
                </a>
              </div>
              <div className="pexit pexit-featured">
                <div className="pexit-ico"><i data-lucide="user-plus"></i></div>
                <div className="pexit-num">03</div>
                <div className="pexit-name">Hire experts to build it</div>
                <p className="pexit-desc">Work with experts like ourselves who has been building custom systems for multiple years, has a proven process for getting results fast, and helps you skip the trial-and-error.</p>
                <a className="pexit-cta pexit-cta-primary" href="#book" onClick={(e) => { if (window.openSystemizAudit) { e.preventDefault(); window.openSystemizAudit(); } }}>
                  Book a Free AIOS Audit
                  <svg className="arrow" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7" /></svg>
                </a>
              </div>
            </div>
          </div>
        </div>

        {/* 3-systems "Why Notion + Claude" block moved out into its own <WhyNotionClaude /> section
              so it can sit right after the Outcome (Cognitive Freedom) section. */}


      </div>
    </section>);}

// ============== WHY NOTION + CLAUDE — extracted from Philosophy ==============
function WhyNotionClaude() {
  return (
    <section className="section section-quiet" id="why-notion-claude" data-screen-label="07 Why Notion + Claude">
      <div className="shell">
        <div className="three-sys reveal">
          <div className="three-sys-head">
            <span className="eyebrow eyebrow-soft">Why Notion + Claude</span>
            <h3>Every AIOS runs on <span className="accent">3 systems</span>.</h3>
            <p className="three-sys-lede">To put AI inside your business, you need all three.

            </p>
          </div>

          <div className="three-sys-grid">
            <div className="tsys-card">
              <div className="tsys-num">01</div>
              <div className="tsys-name">System of Record</div>
              <div className="tsys-tag">Where the truth lives</div>
              <p className="tsys-desc">Your single source of truth where every project, contact, meeting, SOP, decision is organized in one place. This is the structured backend that makes your business visible.</p>
              <div className="tsys-callout-slot">
                <div className="tsys-callout tsys-callout-notion">
                  <img src="assets/notion-logo.png" alt="" className="tsys-callout-logo" />
                  <span className="tsys-callout-name">Notion</span>
                </div>
              </div>
            </div>
            <div className="tsys-card">
              <div className="tsys-num">02</div>
              <div className="tsys-name">System of Engagement</div>
              <div className="tsys-tag">Where humans work</div>
              <p className="tsys-desc">The system you and your team use every day to run the business and get the work done. This is the dashboards, views, and pages built on top of the system of record.</p>
              <div className="tsys-callout-slot">
                <div className="tsys-callout tsys-callout-notion">
                  <img src="assets/notion-logo.png" alt="" className="tsys-callout-logo" />
                  <span className="tsys-callout-name">Notion</span>
                </div>
              </div>
            </div>
            <div className="tsys-card tsys-card-claude">
              <div className="tsys-num">03</div>
              <div className="tsys-name">System of Intelligence</div>
              <div className="tsys-tag">Where AI automates</div>
              <p className="tsys-desc">This is AI using the system of record for context, and operating inside the system of engagement to automate processes that makes you and your team move faster.</p>
              <div className="tsys-callout-slot">
                <div className="tsys-callout tsys-callout-claude">
                  <img src="assets/claude-logo.svg" alt="" className="tsys-callout-logo" />
                  <span className="tsys-callout-name">Claude</span>
                </div>
              </div>
            </div>
          </div>

          <div className="three-sys-insight">
            <p>
              <strong>Notion is the system.</strong> Claude is the AI-employee you put on that system.
            </p>
            <div className="tsys-insight-line"></div>
          </div>
        </div>
      </div>
    </section>);}

Object.assign(window, { PhilosophySection, WhyNotionClaude });