// ── About Page ──────────────────────────────────────────────────────
// Depends on: site-primitives.jsx

function BeliefItem({ b, isOpen, onToggle }) {
  const contentRef = React.useRef(null);
  const [height, setHeight] = React.useState(0);
  const [hovered, setHovered] = React.useState(false);

  React.useEffect(() => {
    if (contentRef.current) {
      setHeight(isOpen ? contentRef.current.scrollHeight : 0);
    }
  }, [isOpen]);

  return (
    <div
      style={{
        background: SURFACE,
        border: `1px solid ${isOpen ? 'rgba(255,107,0,0.3)' : hovered ? 'rgba(255,107,0,0.25)' : BORDER}`,
        borderLeft: `3px solid ${isOpen ? ACCENT : hovered ? ACCENT : 'transparent'}`,
        borderRadius: 16,
        overflow: 'hidden',
        transition: 'border-color 0.3s, transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.35s',
        transform: hovered ? 'translateY(-5px) scale(1.015)' : 'translateY(0) scale(1)',
        boxShadow: hovered ? '0 16px 48px rgba(255,107,0,0.1)' : 'none',
        position: 'relative',
      }}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
      <button onClick={onToggle} style={{
        width: '100%', padding: '22px 26px', background: 'transparent', border: 'none',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        cursor: 'pointer', gap: 16, textAlign: 'left',
        position: 'relative', zIndex: 1,
      }}>
        <span style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: '0.7rem', color: ACCENT, letterSpacing: '0.12em' }}>{b.num}</span>
          <span style={{ fontFamily: '"Bebas Neue", sans-serif', fontSize: 'clamp(1.2rem,1.8vw,1.5rem)', fontWeight: 400, lineHeight: 1.1, letterSpacing: '0.02em', textTransform: 'uppercase', color: isOpen ? TEXT_PRIMARY : hovered ? TEXT_PRIMARY : TEXT_SECONDARY, transition: 'color 0.3s' }}>{b.title}</span>
        </span>
        <span style={{ color: ACCENT, fontSize: '1.3rem', transform: isOpen ? 'rotate(45deg)' : 'rotate(0)', transition: 'transform 0.35s cubic-bezier(0.34,1.56,0.64,1)', flexShrink: 0 }}>+</span>
      </button>
      <div style={{ height, overflow: 'hidden', transition: 'height 0.4s cubic-bezier(0.25,0.46,0.45,0.94)' }}>
        <div ref={contentRef} style={{ padding: '0 26px 22px', color: TEXT_SECONDARY, fontSize: '0.92rem', lineHeight: 1.75, position: 'relative', zIndex: 1 }}>
          {b.body}
        </div>
      </div>
    </div>
  );
}

function BeliefsSection({ beliefs }) {
  const [open, setOpen] = React.useState(null);
  const { width } = useWindowSize();
  const isMobile = width <= 768;

  return (
    <section style={{ padding: isMobile ? '60px 20px' : '100px 64px', background: 'rgba(8,8,8,0.88)', borderTop: `1px solid ${BORDER}` }}>
      <div style={{ maxWidth: 800, margin: '0 auto' }}>
        <FadeUp>
          <div style={{ textAlign: 'center', marginBottom: 52 }}>
            <SectionLabel number="02">What I Believe</SectionLabel>
            <SectionH2 style={{ marginBottom: 16 }}>Five beliefs. No slides. No spin.</SectionH2>
            <p style={{ color: TEXT_SECONDARY, maxWidth: 560, margin: '0 auto', lineHeight: 1.75 }}>
              These aren't marketing pillars. These are how I actually operate, what I optimize for, and what you can expect if we work together.
            </p>
          </div>
        </FadeUp>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {beliefs.map((b, i) => (
            <FadeUp key={b.num} delay={i * 50}>
              <BeliefItem
                b={b}
                isOpen={open === i}
                onToggle={() => setOpen(open === i ? null : i)}
              />
            </FadeUp>
          ))}
        </div>
      </div>
    </section>
  );
}

function StoryItem({ label, title, children, isOpen, onToggle }) {
  const contentRef = React.useRef(null);
  const [height, setHeight] = React.useState(0);
  const [hovered, setHovered] = React.useState(false);

  React.useEffect(() => {
    if (contentRef.current) {
      setHeight(isOpen ? contentRef.current.scrollHeight : 0);
    }
  }, [isOpen]);

  return (
    <div
      style={{
        background: SURFACE,
        border: `1px solid ${isOpen ? 'rgba(255,107,0,0.3)' : hovered ? 'rgba(255,107,0,0.25)' : BORDER}`,
        borderLeft: `3px solid ${isOpen ? ACCENT : hovered ? ACCENT : 'transparent'}`,
        borderRadius: 16,
        overflow: 'hidden',
        transition: 'border-color 0.3s, transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.35s',
        transform: hovered ? 'translateY(-5px) scale(1.015)' : 'translateY(0) scale(1)',
        boxShadow: hovered ? '0 16px 48px rgba(255,107,0,0.1)' : 'none',
        position: 'relative',
        marginBottom: 32,
      }}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
      <button onClick={onToggle} style={{
        width: '100%', padding: '22px 26px', background: 'transparent', border: 'none',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        cursor: 'pointer', gap: 16, textAlign: 'left',
        position: 'relative', zIndex: 1,
      }}>
        <span style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: '0.65rem', color: ACCENT, letterSpacing: '0.1em', textTransform: 'uppercase' }}>{label}</span>
          <span style={{ fontFamily: '"Bebas Neue", sans-serif', fontSize: 'clamp(1.3rem,2vw,1.6rem)', fontWeight: 400, lineHeight: 1.1, letterSpacing: '0.02em', textTransform: 'uppercase', color: isOpen ? TEXT_PRIMARY : hovered ? TEXT_PRIMARY : TEXT_PRIMARY, transition: 'color 0.3s' }}>{title}</span>
        </span>
        <span style={{ color: ACCENT, fontSize: '1.3rem', transform: isOpen ? 'rotate(45deg)' : 'rotate(0)', transition: 'transform 0.35s cubic-bezier(0.34,1.56,0.64,1)', flexShrink: 0 }}>+</span>
      </button>
      <div style={{ height, overflow: 'hidden', transition: 'height 0.4s cubic-bezier(0.25,0.46,0.45,0.94)' }}>
        <div ref={contentRef} style={{ padding: '0 26px 22px', color: TEXT_SECONDARY, fontSize: 'clamp(0.95rem,1.05vw,1rem)', lineHeight: 1.8, position: 'relative', zIndex: 1 }}>
          {children}
        </div>
      </div>
    </div>
  );
}

function StorySection() {
  const [open, setOpen] = React.useState(null);
  const { width } = useWindowSize();
  const isMobile = width <= 768;

  return (
    <section style={{ padding: isMobile ? '60px 20px' : '100px 64px', background: 'rgba(6,6,6,0.88)', borderTop: `1px solid ${BORDER}` }}>
      <div style={{ maxWidth: 800, margin: '0 auto' }}>
        <FadeUp>
          <div style={{ marginBottom: 48 }}>
            <SectionLabel number="01">The Story</SectionLabel>
            <SectionH2 style={{ marginBottom: 16 }}>Two moments that made this business inevitable.</SectionH2>
          </div>
        </FadeUp>

        <FadeUp delay={80}>
          <div style={{ color: TEXT_SECONDARY, fontSize: 'clamp(1rem,1.15vw,1.08rem)', lineHeight: 1.85, marginBottom: 40 }}>
            <p style={{ marginBottom: 24 }}>
              There's a concept from MJ DeMarco's book <em style={{ color: TEXT_PRIMARY }}>Unscripted: Life, Liberty and the Pursuit of Entrepreneurship</em> called the <strong style={{ color: TEXT_PRIMARY }}>"F This Event"</strong>, the moment where the gap between where you are and where you can't stand to be anymore becomes so painfully obvious that doing nothing is the only thing that hurts more than changing. It's not a decision you make at a desk with a notepad, it's a thing that happens <em>to</em> you, and if you don't act on it, you stay stuck and the misery compounds.
            </p>
            <p style={{ marginBottom: 24 }}>
              I've had two of these so far, and the second one is the reason this business exists.
            </p>
          </div>
        </FadeUp>

        <FadeUp delay={120}>
          <StoryItem
            label="F This Event #1"
            title="The Vet Bill I Couldn't Pay"
            isOpen={open === 0}
            onToggle={() => setOpen(open === 0 ? null : 0)}
          >
            <p>I was 18, working a job that paid me twenty bucks an hour AUD while the adult minimum wage was twenty-six, so I was already below minimum wage as a legal adult and didn't have the standing to do anything about it. Then my cat died, and the veterinary bill at the end of her life was bigger than anything I had in my account, and I had to ask for the money, which is the moment I realized that being broke isn't the worst part of being broke, the worst part is the position it puts you in when something you actually care about needs help and you don't have the resources to be the person who handles it.</p>
            <p style={{ marginTop: 16 }}>The lesson wasn't "don't adopt pets." The lesson was: I never want to be in a position again where my financial situation forces me to ask for help on something I should have been able to handle myself. That was the first F This Event, and it was the moment I started looking at online business, not because I wanted to be an entrepreneur as an aesthetic, but because I needed a path to consistent cash flow that didn't depend on someone else deciding what I was worth.</p>
          </StoryItem>
        </FadeUp>

        <FadeUp delay={160}>
          <StoryItem
            label="F This Event #2"
            title="The Defence Contracting Rejection"
            isOpen={open === 1}
            onToggle={() => setOpen(open === 1 ? null : 1)}
          >
            <p>I needed cash flow to fund the build, so I went after a contracting role through a recruiter for some defence-adjacent government work. I went in thinking this was going to be the easiest job I'd ever interviewed for, I had a year of AI experience that almost nobody walking into that room had, I'd built systems that compressed weeks of admin work into hours, and I was confident the value I could bring was obvious. And then the other candidates walked in, and without being harsh about it, a lot of them looked like the bottom of the barrel, guys who hadn't done anything meaningful with the last few years of their life, and <em>they</em> got hired, and I didn't.</p>
            <p style={{ marginTop: 16 }}>The lesson wasn't that the recruiters were wrong, the lesson was that in certain rooms, government, defence, anything where compliance and predictability outweigh capability, the AI experience I was bringing was actually a risk factor, not an asset, because it represented change and change is the thing that gets de-prioritized when stability is what's being optimized for. That was F This Event number two, and what crystallized in that moment was: I'm not optimized for those rooms, and I shouldn't be trying to fit into them, the value I can give to people in the rooms I <em>am</em> optimized for is exponentially higher than the value I'd ever produce inside a contracting seat I had to mask my edge to keep.</p>
            <p style={{ marginTop: 16 }}>So I stopped trying. And that's when this business became the only thing.</p>
          </StoryItem>
        </FadeUp>

        <FadeUp delay={200}>
          <div style={{ color: TEXT_SECONDARY, fontSize: 'clamp(1rem,1.15vw,1.08rem)', lineHeight: 1.85 }}>
            <p style={{ marginBottom: 24 }}>
              I went all in on AI starting May 2025, and what happened over the next twelve months wasn't linear, it was exponential. Not just my own productivity, but the value of the workflows I was building, the same agent that took me a weekend to build in month one is now doing work that would have taken a senior operator a full quarter, and the gap between where someone who's been using AI properly for a year sits and where someone who's just starting sits widens every single week the system is running. It's like a stock that just keeps rising, except the floor underneath you also keeps rising, so even a bad week still leaves you further ahead than you were a month ago.
            </p>
            <p>
              That's when I realized two things at once: first, that AI used properly is genuinely a superpower and not in a marketing sense, in the sense that the math of compounding actually plays out in your favor for once. And second, that the type of work I was doing was so unsaturated that almost nobody was doing it correctly, and the people who were doing it correctly were charging enterprise rates for it, which left a massive gap for someone willing to install it properly at a price point that small and mid-sized operators could actually access.
            </p>
          </div>
        </FadeUp>
      </div>
    </section>
  );
}

function AboutPage({ bookingUrl, onBack }) {
  const { width } = useWindowSize();
  const isMobile = width <= 768;
  const reduced = usePrefersReducedMotion();

  // Scroll to top on mount
  React.useEffect(() => {
    window.scrollTo({ top: 0, behavior: reduced ? 'auto' : 'smooth' });
  }, [reduced]);

  const beliefs = [
    {
      num: '01',
      title: `Discipline beats motivation, every single time.`,
      body: `Motivation shows up when you don't need it and disappears the moment you do. Discipline is the thing that gets you to the desk on a Wednesday at 6am when you'd rather be doing anything else, and the longer you run on discipline instead of motivation, the more the work stops feeling like work, because the identity becomes "I'm the person who does this," not "I'm the person who wants to do this."`,
    },
    {
      num: '02',
      title: `Time is currency when you don't have money.`,
      body: `When you've got no capital, the only resource you have to invest is volume and time, which is the most fair and most brutal trade-off in business, because everyone gets the same 24 hours, and the only difference between someone a year ahead of you and someone a year behind you is how those hours got spent. That's why every system I build is structured around giving hours back.`,
    },
    {
      num: '03',
      title: `Proof of work earns the next level.`,
      body: `Most people try to talk their way into the next level. The faster path is to build something so visibly working that the next level comes to you, and the AI work I'm doing now is exactly that, because I document it publicly, the systems speak for themselves, and people who need that work find me without me ever having to pitch them.`,
    },
    {
      num: '04',
      title: `Installed, not sold.`,
      body: `The moment a system depends on me to keep running, it stops being yours. Every engagement is structured so the client owns the prompts, the workflows, the agents, and the knowledge base the day it goes live, and if I disappeared tomorrow, the whole thing would keep working. That's the line between a tool you bought and a system you own, and most of the AI industry right now is selling tools they pretend are systems.`,
    },
    {
      num: '05',
      title: `AI is a force multiplier under the right ethics.`,
      body: `Used wrong, AI is a way to flood the world with low-effort noise. Used right, it's the closest thing we've ever had to a true compounding asset, every workflow you build today gets sharper the more you use it, every prompt you refine becomes a piece of permanent infrastructure, and every person you train to use it properly becomes more valuable to the business they're in.`,
    },
  ];

  return (
    <div style={{ minHeight: '100dvh' }}>
      {/* ── Hero Band ─────────────────────────────────────────────── */}
      <section style={{
        padding: isMobile ? '120px 20px 60px' : '160px 64px 100px',
        background: 'rgba(8,8,8,0.88)',
        position: 'relative',
        overflow: 'hidden',
      }}>
        <div style={{
          maxWidth: 1200, margin: '0 auto', width: '100%',
          display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
          gap: isMobile ? 40 : 64, alignItems: 'center',
        }}>
          {/* Left: Photo */}
          <FadeUp delay={60}>
            <div style={{ position: 'relative' }}>
              <img
                src="about-photo.png"
                alt="Brody Zwiers"
                style={{
                  width: '100%',
                  maxWidth: isMobile ? '100%' : 480,
                  aspectRatio: '1 / 1',
                  objectFit: 'cover',
                  borderRadius: 4,
                  border: `2px solid ${ACCENT}`,
                  boxShadow: `8px 8px 0 ${ACCENT}`,
                  display: 'block',
                }}
              />
              <div style={{
                position: 'absolute', bottom: -12, right: -12,
                background: ACCENT, color: SURFACE2,
                padding: '6px 14px', borderRadius: 4,
                fontFamily: 'JetBrains Mono, monospace',
                fontSize: '0.62rem', letterSpacing: '0.1em',
                fontWeight: 700, textTransform: 'uppercase',
                transform: 'rotate(-3deg)',
              }}>
                Canberra, AU
              </div>
            </div>
          </FadeUp>

          {/* Right: Name + Title + Positioning */}
          <div>
            <FadeUp delay={120}>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                background: 'rgba(255,107,0,0.08)', border: '1px solid rgba(255,107,0,0.25)',
                color: ACCENT, fontSize: '0.7rem', letterSpacing: '0.12em', textTransform: 'uppercase',
                padding: '8px 18px', borderRadius: 100, marginBottom: 28,
                fontFamily: 'JetBrains Mono, monospace', fontWeight: 500,
              }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: ACCENT, display: 'inline-block', animation: 'pulse-dot 2s ease-in-out infinite' }} />
                Fractional AI Operations Consultant
              </div>
            </FadeUp>

            <FadeUp delay={180}>
              <h1 style={{
                fontFamily: '"Bebas Neue", sans-serif', fontSize: 'clamp(2.6rem,5vw,4.8rem)',
                fontWeight: 400, lineHeight: 1.02, letterSpacing: '0.02em',
                textTransform: 'uppercase', margin: '0 0 8px', color: TEXT_PRIMARY,
              }}>Brody Zwiers</h1>
            </FadeUp>

            <FadeUp delay={240}>
              <h2 style={{
                fontFamily: '"Bebas Neue", sans-serif', fontSize: 'clamp(1.2rem,2.2vw,1.8rem)',
                fontWeight: 400, lineHeight: 1.1, letterSpacing: '0.02em',
                textTransform: 'uppercase', margin: '0 0 20px', color: ACCENT,
              }}>I build AI systems that get installed inside the business and walk out the door with the owner, not with me, and not as another subscription on the bank statement.</h2>
            </FadeUp>

            <FadeUp delay={300}>
              <p style={{ color: TEXT_SECONDARY, fontSize: 'clamp(1rem,1.2vw,1.1rem)', lineHeight: 1.75, maxWidth: 520, marginBottom: 32 }}>
                I'm 20, I'm based in Canberra, and I'm building AI systems for business owners who know AI is the leverage point but haven't been able to find someone who'll install it properly and then leave them with the keys. Every system I build runs inside the client's own environment, their Notion, their Slack, their Gmail, and the whole thing is structured so that by the time we're done, they understand it well enough to keep building on top of it themselves, without me, forever.
              </p>
            </FadeUp>

            <FadeUp delay={360}>
              <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
                <Btn href={bookingUrl} style={{ fontSize: '0.95rem', padding: '14px 28px' }}>Book a Free Call →</Btn>
                <BtnOutline onClick={(e) => { e.preventDefault(); onBack(); }} style={{ fontSize: '0.85rem', padding: '12px 24px' }}>← Back to Home</BtnOutline>
              </div>
            </FadeUp>
          </div>
        </div>
      </section>

      {/* ── The Story ─────────────────────────────────────────────── */}
      <StorySection />

      {/* ── What I Believe ────────────────────────────────────────── */}
      <BeliefsSection beliefs={beliefs} />

      {/* ── How I Work ────────────────────────────────────────────── */}
      <section style={{ padding: isMobile ? '60px 20px' : '100px 64px', background: 'rgba(6,6,6,0.88)', borderTop: `1px solid ${BORDER}` }}>
        <div style={{ maxWidth: 900, margin: '0 auto' }}>
          <FadeUp>
            <div style={{ textAlign: 'center', marginBottom: 48 }}>
              <SectionLabel number="03">How I Work</SectionLabel>
              <SectionH2 style={{ marginBottom: 16 }}>Three layers. No black boxes.</SectionH2>
              <p style={{ color: TEXT_SECONDARY, maxWidth: 600, margin: '0 auto', lineHeight: 1.75 }}>
                Every system runs on three layers, and the reason it's structured this way is that if you try to make AI do everything itself, errors compound, ninety percent accuracy per step turns into fifty-nine percent success across five steps, which is why most "agentic" setups fall apart the moment they leave the demo.
              </p>
            </div>
          </FadeUp>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            <FadeUp delay={80}>
              <div style={{
                background: SURFACE, border: `1px solid ${BORDER}`, borderRadius: 20,
                padding: isMobile ? '24px 20px' : '32px 28px',
                borderLeft: `3px solid ${ACCENT}`,
              }}>
                <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: '0.7rem', color: ACCENT, letterSpacing: '0.12em', marginBottom: 10 }}>LAYER 01, DIRECTIVE</div>
                <h3 style={{ fontFamily: '"Bebas Neue", sans-serif', fontSize: 'clamp(1.2rem,1.8vw,1.5rem)', fontWeight: 400, lineHeight: 1.1, letterSpacing: '0.02em', textTransform: 'uppercase', color: TEXT_PRIMARY, marginBottom: 10 }}>The What</h3>
                <p style={{ color: TEXT_SECONDARY, fontSize: '0.95rem', lineHeight: 1.75 }}>
                  SOPs, business logic, the way you actually want things done. Lives in plain Markdown inside your Enviorment. You can read it, edit it, hand it to a new employee.
                </p>
              </div>
            </FadeUp>

            <FadeUp delay={140}>
              <div style={{
                background: SURFACE, border: `1px solid ${BORDER}`, borderRadius: 20,
                padding: isMobile ? '24px 20px' : '32px 28px',
                borderLeft: `3px solid ${ACCENT}`,
              }}>
                <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: '0.7rem', color: ACCENT, letterSpacing: '0.12em', marginBottom: 10 }}>LAYER 02, ORCHESTRATION</div>
                <h3 style={{ fontFamily: '"Bebas Neue", sans-serif', fontSize: 'clamp(1.2rem,1.8vw,1.5rem)', fontWeight: 400, lineHeight: 1.1, letterSpacing: '0.02em', textTransform: 'uppercase', color: TEXT_PRIMARY, marginBottom: 10 }}>The Decision-Making</h3>
                <p style={{ color: TEXT_SECONDARY, fontSize: '0.95rem', lineHeight: 1.75 }}>
                  Claude agents that route work, ask clarifying questions, and choose which tool to use for which job. This is the only layer the AI is fully in charge of, because it's the only layer where judgment matters more than precision.
                </p>
              </div>
            </FadeUp>

            <FadeUp delay={200}>
              <div style={{
                background: SURFACE, border: `1px solid ${BORDER}`, borderRadius: 20,
                padding: isMobile ? '24px 20px' : '32px 28px',
                borderLeft: `3px solid ${ACCENT}`,
              }}>
                <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: '0.7rem', color: ACCENT, letterSpacing: '0.12em', marginBottom: 10 }}>LAYER 03, EXECUTION</div>
                <h3 style={{ fontFamily: '"Bebas Neue", sans-serif', fontSize: 'clamp(1.2rem,1.8vw,1.5rem)', fontWeight: 400, lineHeight: 1.1, letterSpacing: '0.02em', textTransform: 'uppercase', color: TEXT_PRIMARY, marginBottom: 10 }}>The Doing</h3>
                <p style={{ color: TEXT_SECONDARY, fontSize: '0.95rem', lineHeight: 1.75 }}>
                  Deterministic Python scripts and direct API calls that handle anything code can do more reliably than language. The AI never does what code can do better.
                </p>
              </div>
            </FadeUp>
          </div>

          <FadeUp delay={260}>
            <div style={{ marginTop: 32, textAlign: 'center' }}>
              <p style={{ color: TEXT_SECONDARY, fontSize: '0.95rem', lineHeight: 1.75, maxWidth: 640, margin: '0 auto' }}>
                The result is a system where AI makes smart decisions on top of reliable rails, instead of being asked to do everything from scratch every time, which is what most setups get wrong, and why most setups fail.
              </p>
            </div>
          </FadeUp>
        </div>
      </section>

      {/* ── The Mission ───────────────────────────────────────────── */}
      <section style={{ padding: isMobile ? '60px 20px' : '100px 64px', background: 'rgba(8,8,8,0.88)', borderTop: `1px solid ${BORDER}` }}>
        <div style={{ maxWidth: 800, margin: '0 auto', textAlign: 'center' }}>
          <FadeUp>
            <SectionLabel number="04">The Mission</SectionLabel>
            <SectionH2 style={{ marginBottom: 24 }}>Give people back their time.</SectionH2>
          </FadeUp>

          <FadeUp delay={80}>
            <p style={{ color: TEXT_SECONDARY, fontSize: 'clamp(1rem,1.15vw,1.08rem)', lineHeight: 1.85, marginBottom: 24 }}>
              The mission isn't to make money off small businesses. The mission is to give people back their time, the ten-plus hours a week they're currently losing to repeatable work, because every hour you spend doing something a system could do is an hour you're not spending on the thing only you can do. Money is the byproduct of doing that well at scale; it was never the point.
            </p>
          </FadeUp>

          <FadeUp delay={140}>
            <p style={{ color: TEXT_SECONDARY, fontSize: 'clamp(1rem,1.15vw,1.08rem)', lineHeight: 1.85, marginBottom: 32 }}>
              The way the model works is simple: everything I figure out gets documented and given away for free, the frameworks, the breakdowns, the day-by-day record of building this thing in public, and the only people who pay are the ones who want the system installed inside their business directly, with 1:1 or 1:many implementation access. Free content for the people who want to do it themselves; paid implementation for the people who want it built once and built right.
            </p>
          </FadeUp>

          <FadeUp delay={200}>
            <div style={{
              display: 'inline-block',
              background: SURFACE, border: `1px solid ${BORDER}`, borderRadius: 20,
              padding: isMobile ? '24px 20px' : '32px 36px',
            }}>
              <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: '0.65rem', color: ACCENT, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 12 }}>The Enabler</div>
              <p style={{ color: TEXT_SECONDARY, fontSize: '0.95rem', lineHeight: 1.75, maxWidth: 480, margin: '0 auto' }}>
                The role I'm playing is <strong style={{ color: TEXT_PRIMARY }}>The Enabler</strong>, not the hero of someone else's story, just the catalyst who provides the spark, the system, and the roadmap, and then watches what happens. Whether someone works with me directly or just uses the free content, the outcome I'm optimizing for is the same: they change their situation, they get the hours back, they build something that's theirs. The transfer of capability from me to them is the actual deliverable. Everything else is just the mechanism.
              </p>
              <p style={{ color: ACCENT, fontSize: '0.85rem', fontStyle: 'italic', marginTop: 16, fontFamily: '"Playfair Display", serif' }}>
              </p>
            </div>
          </FadeUp>
        </div>
      </section>

      {/* ── Guarantee ─────────────────────────────────────────────── */}
      <section style={{ padding: isMobile ? '60px 20px' : '80px 64px', background: 'rgba(6,6,6,0.88)', borderTop: `1px solid ${BORDER}` }}>
        <div style={{ maxWidth: 800, margin: '0 auto', textAlign: 'center' }}>
          <FadeUp>
            <div style={{
              background: SURFACE, border: `1px solid rgba(34,197,94,0.25)`, borderRadius: 20,
              padding: isMobile ? '28px 22px' : '36px 40px',
            }}>
              <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: '0.65rem', color: '#22c55e', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 14 }}>The Guarantee</div>
              <h3 style={{ fontFamily: '"Bebas Neue", sans-serif', fontSize: 'clamp(1.4rem,2.2vw,1.8rem)', fontWeight: 400, lineHeight: 1.1, letterSpacing: '0.02em', textTransform: 'uppercase', color: TEXT_PRIMARY, marginBottom: 14 }}>
                Ten hours a week is the floor. Not the ceiling.
              </h3>
              <p style={{ color: TEXT_SECONDARY, fontSize: 'clamp(0.95rem,1.05vw,1rem)', lineHeight: 1.75, maxWidth: 520, margin: '0 auto' }}>
                If a discovery call doesn't surface at least ten hours a week of time saved inside your business, you will either 
                A: find out some bottlenecks in your business.
                B: walk away. 
              </p>
            </div>
          </FadeUp>
        </div>
      </section>

      {/* ── CTA ───────────────────────────────────────────────────── */}
      <section style={{ padding: isMobile ? '80px 20px' : '130px 64px', background: 'rgba(6,6,6,0.88)', textAlign: 'center', borderTop: `1px solid ${BORDER}` }}>
        <div style={{ maxWidth: 700, margin: '0 auto' }}>
          <FadeUp>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: '0.7rem', color: ACCENT, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 24 }}>Ready?</div>
            <SectionH2 style={{ marginBottom: 16 }}>If anything in this resonates, the next step is simple.</SectionH2>
            <p style={{ color: TEXT_SECONDARY, fontSize: '1.1rem', lineHeight: 1.75, marginBottom: 36 }}>
              If you're a business owner who wants the system installed, book a discovery call below. If you're early in the journey and you want to watch the build happen in real time, the free content is at <a href="https://www.youtube.com/@Brodyzwierz" target="_blank" rel="noopener noreferrer" style={{ color: ACCENT, textDecoration: 'none' }}>@brody.zwierz</a> on every platform, start anywhere, it all connects.
            </p>
            <div style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
              <Btn href={bookingUrl} style={{ fontSize: '1rem', padding: '16px 36px' }}>Book a Free Call →</Btn>
              <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: '0.65rem', color: MUTED, letterSpacing: '0.08em' }}>45 MINUTES. ZERO COST. TEN HOURS OR THE CALL'S ON ME.</span>
            </div>
          </FadeUp>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { AboutPage });
