// ── CollapsibleCard (FAQ-style) ─────────────────────────────────
function CollapsibleCard({ title, children }) {
  const [isOpen, setIsOpen] = React.useState(false);
  const contentRef = React.useRef(null);
  const itemRef = React.useRef(null);
  const spotlightRef = React.useRef(null);
  const [height, setHeight] = React.useState(0);
  const [hovered, setHovered] = React.useState(false);
  const flashTimeoutRef = React.useRef(null);

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

  const handleMouseMove = (e) => {
    if (window.matchMedia('(pointer: coarse)').matches) return;
    const rect = itemRef.current?.getBoundingClientRect();
    if (!rect || !spotlightRef.current) return;
    const x = e.clientX - rect.left - 120;
    const y = e.clientY - rect.top - 120;
    spotlightRef.current.style.transform = `translate(${x}px, ${y}px)`;
  };

  const handleTouchStart = (e) => {
    const touch = e.touches[0];
    const rect = itemRef.current?.getBoundingClientRect();
    if (rect && spotlightRef.current) {
      const x = touch.clientX - rect.left - 120;
      const y = touch.clientY - rect.top - 120;
      spotlightRef.current.style.transform = `translate(${x}px, ${y}px)`;
    }
    setHovered(true);
    if (flashTimeoutRef.current) clearTimeout(flashTimeoutRef.current);
  };

  const handleTouchEnd = () => {
    flashTimeoutRef.current = setTimeout(() => setHovered(false), 400);
  };

  return (
    <div
      ref={itemRef}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      onMouseMove={handleMouseMove}
      onTouchStart={handleTouchStart}
      onTouchEnd={handleTouchEnd}
      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',
      }}
    >
      <div
        ref={spotlightRef}
        style={{
          position: 'absolute', left: 0, top: 0, width: 240, height: 240,
          borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(255,107,0,0.11) 0%, transparent 70%)',
          pointerEvents: 'none', zIndex: 0,
          opacity: hovered ? 1 : 0, transition: 'opacity 0.3s', willChange: 'transform',
        }}
      />
      <button onClick={() => setIsOpen(o => !o)} 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={{ fontSize: '1rem', fontWeight: 600, color: isOpen ? TEXT_PRIMARY : hovered ? TEXT_PRIMARY : TEXT_SECONDARY, fontStyle: 'italic', transition: 'color 0.3s' }}>{title}</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 }}>
          {children}
        </div>
      </div>
    </div>
  );
}

// ── Problem + Solution + Process ──────────────────────────────────

function ProblemSection() {
  const { width } = useWindowSize();
  const isMobile = width <= 768;

  const cards = [
    { title: 'Manual data entry leaks $62K per employee, every year', desc: 'Manual data entry errors cost $50-$150 each to resolve. Businesses lose ~$62,000 per employee annually to manual data entry inefficiencies. (Purcell Analytics)' },
    { title: 'Half the workweek is document shuffling', desc: 'Office workers spend over half their time creating, updating, and transferring documents. 10% of work time is manual data entry alone. (ProcessMaker)' },
    { title: '66% of devs say artificial intelligence outputs are "almost right"', desc: "66% of developers cite 'almost right, but not quite' artificial intelligence (AI) outputs as their top frustration. 74% of generative artificial intelligence (AI) pilots fail to scale, the #1 barrier is insufficient worker skills. (Stack Overflow 2025, Boston Consulting Group (BCG)" },
    { title: '1% of leaders say their AI is mature. 91% have adopted it.', desc: 'Only 1% of leaders report AI is fully mature across their workflows, despite 91% reporting some level of AI adoption. (McKinsey 2025)' },
    { title: 'A 50-person team burns $127K+ a year on hidden admin', desc: 'A 50-person business running 5–7 core processes manually faces $127K+/year in hidden costs, spread across tools, errors, rework, and lost time. (Quantra)' },
  ];

  return (
    <section id="problem" style={{ padding: isMobile ? '60px 20px' : '130px 64px', background: 'rgba(8,8,8,0.88)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.2fr', gap: isMobile ? 40 : 80, alignItems: 'start' }}>
        <FadeUp>
          <SectionLabel number="01">The Problem</SectionLabel>
          <SectionH2 style={{ marginBottom: 24 }}>Admin is the tax on every billable hour.</SectionH2>
          <p style={{ color: TEXT_SECONDARY, fontSize: '1.05rem', lineHeight: 1.75, maxWidth: 460, marginBottom: 32 }}>
            Every status update, every manual follow-up, every report built by hand, that's revenue-generating time converted into overhead. It doesn't show up on a P&L. But it's costing you.
          </p>
          <BtnOutline href="#solution">See The Solution →</BtnOutline>
        </FadeUp>

        <div style={{ display: 'grid', gap: 10 }}>
          {cards.map((card, idx) => (
            <FadeUp key={idx} delay={idx * 60}>
              <CollapsibleCard title={card.title}>
                {card.desc}
              </CollapsibleCard>
            </FadeUp>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Founder Strip (Attachment beat) ──────────────────────────────
function FounderStrip({ onAbout }) {
  const { width } = useWindowSize();
  const isMobile = width <= 768;

  return (
    <section id="founder" style={{ padding: isMobile ? '60px 20px' : '100px 64px', background: 'rgba(6,6,6,0.88)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <FadeUp>
          <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr' : 'minmax(0, 360px) 1fr',
            gap: isMobile ? 32 : 64,
            alignItems: 'center',
          }}>
            {/* Photo */}
            <div style={{ position: 'relative' }}>
              <img
                src="about-photo.png"
                alt="Brody Zwiers"
                style={{
                  width: '100%',
                  maxWidth: isMobile ? '100%' : 360,
                  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>

            {/* Text */}
            <div>
              <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: 24,
                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>
              <h3 style={{
                fontFamily: '"Bebas Neue",sans-serif', fontSize: isMobile ? '1.8rem' : 'clamp(2rem, 2.8vw, 2.6rem)',
                fontWeight: 400, letterSpacing: '0.02em', textTransform: 'uppercase',
                color: TEXT_PRIMARY, lineHeight: 1.05, marginBottom: 16,
              }}>
                I used to lose 10+ hours a week to admin. Then I built the system that gave them back.
              </h3>
              <p style={{ color: TEXT_SECONDARY, fontSize: '1.05rem', lineHeight: 1.75, marginBottom: 24, maxWidth: 520 }}>
                Now I install that same system inside other businesses, your Notion, your Claude, your stack. No black boxes. No lock-in. You own everything.
              </p>
              <button
                onClick={onAbout}
                style={{
                  background: 'transparent', border: 'none',
                  color: ACCENT, fontFamily: 'JetBrains Mono, monospace',
                  fontSize: '0.75rem', letterSpacing: '0.08em', textTransform: 'uppercase',
                  cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 8,
                  padding: 0,
                }}
              >
                Read the full story →
              </button>
            </div>
          </div>
        </FadeUp>
      </div>
    </section>
  );
}

// ── Features by Category ──────────────────────────────────────────
const FEATURE_CATEGORIES = [
  { category: 'Communication & Client Management', icon: <MessageSquare size={24} strokeWidth={1.5} />, features: [
    { name: 'Artificial Intelligence Voice Layer', does: 'Drafts, responds, and follows up in your brand voice', benefit: 'Day-long replies become minute-long ones. Every hour saved on comms is an hour earning.' },
    { name: 'Smart Follow-Ups', does: 'Auto-triggers follow-ups based on conversation context', benefit: 'No lead goes cold. No deal lost to a forgotten follow-up.' },
    { name: 'Unified Inbox', does: 'Email, Slack, calendar, one view', benefit: 'Stop switching between six apps. One inbox. Every channel.' },
  ]},
  { category: 'Scheduling & Time Management', icon: <Clock size={24} strokeWidth={1.5} />, features: [
    { name: 'Command Centre', does: 'Centralised calendar with smart scheduling', benefit: 'No double bookings. Buffers auto-inserted. The day runs itself.' },
    { name: 'Auto-Scheduling', does: 'Artificial intelligence (AI) finds optimal times across team availability', benefit: 'Six emails of back-and-forth. Now one click.' },
    { name: 'Meeting Prep', does: 'Pre-meeting briefs auto-generated from CRM + past comms', benefit: 'Walk into every call prepared. Zero pre-meeting scramble.' },
  ]},
  { category: 'Document & Workflow Automation', icon: <FileText size={24} strokeWidth={1.5} />, features: [
    { name: 'Document Chasing', does: 'Auto-requests, tracks, and reminds for missing docs', benefit: 'Project Managers get back 45 minutes per client, every client.' },
    { name: 'Template Engine', does: 'Auto-fills contracts, proposals, reports from templates', benefit: 'Consistent output. Zero formatting. Shipped same day.' },
    { name: 'Workflow Triggers', does: 'If X happens, do Y, across any connected app', benefit: 'Things just happen. Nobody remembers. Nothing gets skipped.' },
  ]},
  { category: 'Reporting & Insights', icon: <TrendingUp size={24} strokeWidth={1.5} />, features: [
    { name: 'Live Dashboards', does: 'Real-time view of pipeline, revenue, utilisation', benefit: 'Spot problems before they\'re crises. Decide on data, not gut.' },
    { name: 'Auto-Generated Reports', does: 'Weekly/monthly reports built and delivered automatically', benefit: 'Two hours every Friday. 100 hours a year. All redirected to revenue.' },
    { name: 'Anomaly Detection', does: 'Artificial intelligence (AI) flags unusual patterns (missed follow-ups, revenue dips)', benefit: 'Catch issues early. Zero month-end surprises.' },
  ]},
  { category: 'Integration & Infrastructure', icon: <Plug size={24} strokeWidth={1.5} />, features: [
    { name: '6-App Core', does: 'Notion, Claude, Gmail, Calendar, Slack, Apify >> connected', benefit: 'Your existing stack, finally talking to itself.' },
    { name: 'Rapid Deployment', does: 'Full system live within days not months', benefit: 'No six-month rollout. Revenue per employee (RPE) starts climbing this week.' },
    { name: 'Self-Improving System', does: "Artificial intelligence (AI) learns from your team's patterns and gets better over time", benefit: 'The longer you run it, the sharper it gets. Month 6 ≫ Month 1.' },
  ]},
];

// Spotlight wrapper for any card/box
function SpotlightBox({ children, style = {}, onMouseEnter, onMouseLeave }) {
  const boxRef = React.useRef(null);
  const spotRef = React.useRef(null);
  const [hovered, setHovered] = React.useState(false);

  const flashTimeoutRef = React.useRef(null);

  const handleMove = (e) => {
    if (window.matchMedia('(pointer: coarse)').matches) return;
    const rect = boxRef.current?.getBoundingClientRect();
    if (!rect || !spotRef.current) return;
    const x = e.clientX - rect.left - 120;
    const y = e.clientY - rect.top - 120;
    spotRef.current.style.transform = `translate(${x}px, ${y}px)`;
  };

  const handleTouchStart = (e) => {
    const touch = e.touches[0];
    const rect = boxRef.current?.getBoundingClientRect();
    if (rect && spotRef.current) {
      const x = touch.clientX - rect.left - 120;
      const y = touch.clientY - rect.top - 120;
      spotRef.current.style.transform = `translate(${x}px, ${y}px)`;
    }
    setHovered(true);
    if (flashTimeoutRef.current) clearTimeout(flashTimeoutRef.current);
    onMouseEnter?.(e);
  };

  const handleTouchEnd = (e) => {
    flashTimeoutRef.current = setTimeout(() => setHovered(false), 400);
    onMouseLeave?.(e);
  };

  return (
    <div
      ref={boxRef}
      onMouseEnter={(e) => { setHovered(true); onMouseEnter?.(e); }}
      onMouseLeave={(e) => { setHovered(false); onMouseLeave?.(e); }}
      onMouseMove={handleMove}
      onTouchStart={handleTouchStart}
      onTouchEnd={handleTouchEnd}
      style={{ position: 'relative' }}
    >
      <div
        ref={spotRef}
        style={{
          position: 'absolute', left: 0, top: 0, width: 240, height: 240,
          borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(255,107,0,0.11) 0%, transparent 70%)',
          pointerEvents: 'none', zIndex: 0,
          opacity: hovered ? 1 : 0, transition: 'opacity 0.3s', willChange: 'transform',
        }}
      />
      <div
        style={{ position: 'relative', zIndex: 1, ...style }}
        onMouseEnter={onMouseEnter}
        onMouseLeave={onMouseLeave}
      >{children}</div>
    </div>
  );
}

function SolutionSpotlightCard() {
  const { width } = useWindowSize();
  const isMobile = width <= 768;
  const cardRef = React.useRef(null);
  const spotRef = React.useRef(null);
  const [hovered, setHovered] = React.useState(false);

  const flashTimeoutRef = React.useRef(null);

  const handleMove = (e) => {
    if (window.matchMedia('(pointer: coarse)').matches) return;
    const rect = cardRef.current?.getBoundingClientRect();
    if (!rect || !spotRef.current) return;
    const x = e.clientX - rect.left - 120;
    const y = e.clientY - rect.top - 120;
    spotRef.current.style.transform = `translate(${x}px, ${y}px)`;
  };

  const handleTouchStart = (e) => {
    const touch = e.touches[0];
    const rect = cardRef.current?.getBoundingClientRect();
    if (rect && spotRef.current) {
      const x = touch.clientX - rect.left - 120;
      const y = touch.clientY - rect.top - 120;
      spotRef.current.style.transform = `translate(${x}px, ${y}px)`;
    }
    setHovered(true);
    if (flashTimeoutRef.current) clearTimeout(flashTimeoutRef.current);
  };

  const handleTouchEnd = () => {
    flashTimeoutRef.current = setTimeout(() => setHovered(false), 400);
  };

  return (
    <div
      ref={cardRef}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      onMouseMove={handleMove}
      onTouchStart={handleTouchStart}
      onTouchEnd={handleTouchEnd}
      style={{
        marginBottom: 48,
        background: SURFACE,
        border: `1px solid ${hovered ? 'rgba(255,107,0,0.35)' : BORDER}`,
        borderLeft: `3px solid ${ACCENT}`,
        borderRadius: 24,
        padding: isMobile ? 28 : 48,
        position: 'relative',
        overflow: 'hidden',
        transition: 'border-color 0.3s',
      }}
    >
      <div
        ref={spotRef}
        style={{
          position: 'absolute', left: 0, top: 0, width: 240, height: 240,
          borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(255,107,0,0.11) 0%, transparent 70%)',
          pointerEvents: 'none', zIndex: 0,
          opacity: hovered ? 1 : 0, transition: 'opacity 0.3s', willChange: 'transform',
        }}
      />
      <div style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ maxWidth: 800 }}>
          <SectionLabel number="02">The Solution</SectionLabel>
          <h3 style={{ fontFamily: '"Bebas Neue",sans-serif', fontSize: 'clamp(2.4rem,4vw,3.2rem)', fontWeight: 400, letterSpacing: '0.02em', textTransform: 'uppercase', marginBottom: 16, color: TEXT_PRIMARY, lineHeight: 1.05 }}>
            10+ Hours Reclaimed. Redirected to Revenue.
          </h3>
          <p style={{ color: MUTED, fontSize: '1.15rem', lineHeight: 1.7 }}>
            Your first working artificial intelligence (AI) system. Built in your Notion. Run in your Claude. Owned by your team. Not automation. Revenue operations, raising what every person on payroll produces.
          </p>
        </div>
        <ShufflerCard />
      </div>
    </div>
  );
}

function FeaturesByCategory() {
  const [active, setActive] = React.useState(0);
  const { width } = useWindowSize();
  const isMobile = width <= 768;
  const tabRefs = React.useRef([]);

  const activate = (idx) => {
    setActive(idx);
    requestAnimationFrame(() => {
      tabRefs.current[idx]?.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
    });
  };

  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10, marginBottom: 0, marginLeft: 8, overflowX: 'auto', overflowY: 'hidden', padding: '10px 28px', scrollbarWidth: 'none' }}>
        {FEATURE_CATEGORIES.map((cat, idx) => (
          <SpotlightBox key={idx} style={{ flex: '0 0 auto' }}>
            <button ref={el => tabRefs.current[idx] = el} onClick={() => activate(idx)} style={{
              padding: '14px 18px', borderRadius: 12,
              border: `1px solid ${active === idx ? 'rgba(255,107,0,0.5)' : BORDER}`,
              background: active === idx ? 'rgba(255,107,0,0.1)' : 'rgba(255,255,255,0.02)',
              cursor: 'pointer', textAlign: 'left',
              boxShadow: active === idx ? '0 0 12px rgba(255,107,0,0.2), 0 0 28px rgba(255,107,0,0.08)' : 'none',
              transition: 'all 0.3s cubic-bezier(0.25,0.46,0.45,0.94)',
            }}
              onMouseEnter={e => {
                e.currentTarget.style.borderColor = 'rgba(255,107,0,0.4)';
                e.currentTarget.style.background = active === idx ? 'rgba(255,107,0,0.1)' : 'rgba(255,107,0,0.05)';
                e.currentTarget.style.boxShadow = '0 0 22px rgba(255,107,0,0.3), 0 0 50px rgba(255,107,0,0.12)';
              }}
              onMouseLeave={e => {
                e.currentTarget.style.borderColor = active === idx ? 'rgba(255,107,0,0.5)' : BORDER;
                e.currentTarget.style.background = active === idx ? 'rgba(255,107,0,0.1)' : 'rgba(255,255,255,0.02)';
                e.currentTarget.style.boxShadow = active === idx ? '0 0 12px rgba(255,107,0,0.2), 0 0 28px rgba(255,107,0,0.08)' : 'none';
              }}
            >
              <div style={{ color: active === idx ? ACCENT : MUTED, marginBottom: 8, transition: 'color 0.25s' }}>
                {cat.icon}
              </div>
              <div style={{ fontFamily: 'JetBrains Mono,monospace', fontSize: '0.68rem', color: active === idx ? ACCENT : MUTED, letterSpacing: '0.08em', textTransform: 'uppercase', whiteSpace: 'nowrap', transition: 'color 0.25s' }}>
                {cat.category}
              </div>
            </button>
          </SpotlightBox>
        ))}
      </div>

      <div style={{ background: SURFACE2, border: `1px solid ${BORDER}`, borderRadius: 20, padding: isMobile ? 24 : 36, transition: 'all 0.3s' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8 }}>
          <div style={{ color: ACCENT }}>{FEATURE_CATEGORIES[active].icon}</div>
          <h3 style={{ fontFamily: '"Bebas Neue",sans-serif', fontSize: '1.8rem', letterSpacing: '0.02em', textTransform: 'uppercase', color: TEXT_PRIMARY }}>
            {FEATURE_CATEGORIES[active].category}
          </h3>
        </div>
        <div style={{ width: 48, height: 2, background: ACCENT, borderRadius: 2, marginBottom: 28 }} />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {FEATURE_CATEGORIES[active].features.map((f, idx) => (
            <SpotlightBox key={f.name} style={{
              display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '180px 1fr 1fr',
              gap: isMobile ? 10 : 24, padding: '18px 20px',
              background: idx % 2 === 0 ? 'rgba(255,255,255,0.02)' : 'transparent',
              borderRadius: 10, borderLeft: `3px solid ${ACCENT}`,
              transition: 'background 0.2s',
            }}
              onMouseEnter={e => { e.currentTarget.style.background = 'rgba(255,107,0,0.04)'; }}
              onMouseLeave={e => { e.currentTarget.style.background = idx % 2 === 0 ? 'rgba(255,255,255,0.02)' : 'transparent'; }}
            >
              <div>
                <div style={{ fontFamily: 'JetBrains Mono,monospace', fontSize: '0.6rem', color: ACCENT, letterSpacing: '0.1em', marginBottom: 4 }}>FEATURE</div>
                <div style={{ fontSize: '1rem', fontWeight: 600, color: TEXT_PRIMARY }}>{f.name}</div>
              </div>
              <div>
                <div style={{ fontFamily: 'JetBrains Mono,monospace', fontSize: '0.6rem', color: MUTED, letterSpacing: '0.1em', marginBottom: 4 }}>WHAT IT DOES</div>
                <div style={{ fontSize: '0.88rem', color: TEXT_SECONDARY, lineHeight: 1.55 }}>{f.does}</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontFamily: 'JetBrains Mono,monospace', fontSize: '0.6rem', color: '#22c55e', letterSpacing: '0.1em', marginBottom: 4 }}>WHY THAT MATTERS</div>
                <div style={{ fontSize: '0.88rem', color: TEXT_SECONDARY, lineHeight: 1.55 }}>{f.benefit}</div>
              </div>
            </SpotlightBox>
          ))}
        </div>
      </div>
    </div>
  );
}

// ── Solution ──────────────────────────────────────────────────────
function SolutionSection() {
  const { width } = useWindowSize();
  const isMobile = width <= 768;

  return (
    <section id="solution" style={{ padding: isMobile ? '60px 20px' : '130px 64px', background: 'rgba(6,6,6,0.88)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <FadeUp>
          <SolutionSpotlightCard />
        </FadeUp>

        <FadeUp delay={100}>
          <div style={{ marginBottom: 48 }}>
            <SectionH2 style={{ marginBottom: 16 }}>One system. Raises revenue per employee. Built in days. Yours forever.</SectionH2>
            <p style={{ color: TEXT_SECONDARY, fontSize: '1.05rem', lineHeight: 1.75, maxWidth: 680 }}>
              I audit where revenue time is being lost, build systems that reclaim it, and hand over the keys. No black boxes. Just a command centre that raises what each person on your team generates.
            </p>
          </div>
        </FadeUp>

        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 20, marginBottom: 48 }}>
          {[
            {
              label: 'Your Voice, Cloned',
              title: 'One Voice. Every Touchpoint. Zero Typing.',
              body: "It studies your past emails, proposals, and Slack messages. Learns your voice. Then writes it across every touchpoint, so your clients and partners always get consistency.",
              card: <TypewriterCard />,
            },
            {
              label: 'Command Centre',
              title: 'Everything. One Place.',
              body: 'No more jumping between apps. One hub where your business actually lives.',
              card: <SchedulerCard />,
            },
          ].map((item, i) => (
            <FadeUp key={i} delay={i * 100}>
              <div style={{ background: SURFACE, border: `1px solid ${BORDER}`, borderRadius: 24, padding: isMobile ? 24 : 32, height: '100%', transition: 'border-color 0.3s, transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94)' }}
                onMouseEnter={e => { e.currentTarget.style.borderColor = 'rgba(255,107,0,0.25)'; e.currentTarget.style.transform = 'translateY(-3px)'; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = BORDER; e.currentTarget.style.transform = 'translateY(0)'; }}
              >
                <div style={{ fontFamily: 'JetBrains Mono,monospace', fontSize: '0.62rem', color: ACCENT, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 14 }}>{item.label}</div>
                <h3 style={{ fontFamily: '"Bebas Neue",sans-serif', fontSize: '1.5rem', fontWeight: 400, textTransform: 'uppercase', marginBottom: 8, color: TEXT_PRIMARY }}>{item.title}</h3>
                <p style={{ color: MUTED, fontSize: '0.85rem', lineHeight: 1.6, marginBottom: 20 }}>{item.body}</p>
                {item.card}
              </div>
            </FadeUp>
          ))}
        </div>

      </div>
    </section>
  );
}

// ── Process ───────────────────────────────────────────────────────
function ProcessSection({ bookingUrl }) {
  const [activeTab, setActiveTab] = React.useState(0);
  const { width } = useWindowSize();
  const isMobile = width <= 768;

  const tabs = [
    { num: '01', title: 'AI Ops Audit', cost: '$100', desc: "A focused diagnostic of your stack. You walk away with a real deliverable: an audit sheet, a process map of where your team's time actually goes, and a 90-day AI roadmap built from what we find. No pitch, a clear picture of where AI pays off first." },
    { num: '02', title: 'Setup Sprint', cost: '$500', desc: "Outcome-based, no time cap. I set up your AI environment live in the session and hand you a Notion OS template with everything wired and ready to run. By the end you can start using AI in your business yourself, or, if you'd rather, we talk about it going further." },
    { num: '03', title: 'Full Build', cost: 'Contact Sales', desc: "When you're ready to go beyond the basics: a fully connected environment, backend automation across your operation, and client communication systems, scoped to your business and built with you." },
  ];

  return (
    <section id="process" style={{ padding: isMobile ? '40px 20px' : '130px 64px', background: 'rgba(8,8,8,0.88)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <FadeUp>
          <div style={{ marginBottom: isMobile ? 24 : 52 }}>
            <SectionLabel number="03">How It Works</SectionLabel>
            <SectionH2 style={{ marginBottom: 16 }}>Start small. See it work. Scale when you're ready.</SectionH2>
            <p style={{ color: TEXT_SECONDARY, fontSize: '1.05rem', lineHeight: 1.75, maxWidth: 580 }}>Two low-cost sessions get AI running in your business, a focused audit, then a full setup inside your own environment. When you're ready to go further, we scope the bigger build together.</p>
          </div>
        </FadeUp>

        <FadeUp delay={80}>
          {/* Tab headers */}
          <div style={{ display: 'flex', justifyContent: 'center', gap: isMobile ? 4 : 8, marginBottom: isMobile ? 16 : 40, borderBottom: `1px solid ${BORDER}`, padding: isMobile ? '12px 0 8px' : '36px 16px 28px', flexWrap: 'wrap' }}>
            {tabs.map((tab, idx) => (
              <button key={idx} onClick={() => setActiveTab(idx)} style={{
                background: activeTab === idx ? 'rgba(255,107,0,0.1)' : 'transparent',
                border: activeTab === idx ? '1px solid rgba(255,107,0,0.5)' : '1px solid transparent',
                borderRadius: 12,
                padding: isMobile ? '8px 12px' : '12px 32px',
                fontFamily: '"Bebas Neue",sans-serif', fontSize: isMobile ? '0.75rem' : '1rem',
                letterSpacing: '0.05em', textTransform: 'uppercase',
                color: activeTab === idx ? ACCENT : MUTED,
                cursor: 'pointer', position: 'relative',
                transition: 'all 0.3s cubic-bezier(0.25,0.46,0.45,0.94)',
                boxShadow: activeTab === idx ? '0 0 18px rgba(255,107,0,0.25), 0 0 40px rgba(255,107,0,0.1)' : 'none',
              }}
                onMouseEnter={e => {
                  if (activeTab !== idx) {
                    e.currentTarget.style.borderColor = 'rgba(255,107,0,0.3)';
                    e.currentTarget.style.background = 'rgba(255,107,0,0.05)';
                  }
                }}
                onMouseLeave={e => {
                  if (activeTab !== idx) {
                    e.currentTarget.style.borderColor = 'transparent';
                    e.currentTarget.style.background = 'transparent';
                  }
                }}
              >
                {tab.num} {isMobile ? tab.title.split(' ')[0] : tab.title}
                {activeTab === idx && (
                  <div style={{ position: 'absolute', bottom: -9, left: 0, right: 0, height: 2, background: ACCENT, animation: 'scaleIn 0.3s cubic-bezier(0.34,1.56,0.64,1)' }} />
                )}
              </button>
            ))}
          </div>

          {/* Tab content with transition */}
          <div key={activeTab} style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 16 : 60, alignItems: 'center', animation: 'tabFadeIn 0.35s cubic-bezier(0.25,0.46,0.45,0.94)' }}>
            <div style={{ padding: isMobile ? '0' : '20px 0' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: isMobile ? 10 : 20 }}>
                <span style={{ fontFamily: 'JetBrains Mono,monospace', fontSize: '0.7rem', color: ACCENT, letterSpacing: '0.1em' }}>{tabs[activeTab].num}</span>
                <span style={{ fontFamily: 'JetBrains Mono,monospace', fontSize: '0.65rem', background: 'rgba(255,107,0,0.12)', color: ACCENT, padding: '5px 14px', borderRadius: 100 }}>
                  {tabs[activeTab].cost.toUpperCase()}
                </span>
              </div>
              <h3 style={{ fontFamily: '"Bebas Neue",sans-serif', fontSize: isMobile ? '1.6rem' : 'clamp(2rem,3vw,2.5rem)', fontWeight: 400, letterSpacing: '0.02em', textTransform: 'uppercase', marginBottom: isMobile ? 8 : 14, color: TEXT_PRIMARY }}>
                {tabs[activeTab].title}
              </h3>
              <p style={{ color: TEXT_SECONDARY, fontSize: isMobile ? '0.9rem' : '1.05rem', lineHeight: isMobile ? 1.55 : 1.75 }}>{tabs[activeTab].desc}</p>
              <div style={{ marginTop: isMobile ? 16 : 24 }}>
                <Btn href={bookingUrl}>Book a Free Call →</Btn>
              </div>
            </div>
            <div style={{ background: SURFACE2, borderRadius: 20, padding: isMobile ? '12px' : 40, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
              <div style={{ width: '100%', maxWidth: isMobile ? 240 : 440 }}>
                <SystemArchitectureSVG activeTab={activeTab} />
              </div>
            </div>
          </div>
        </FadeUp>
      </div>
    </section>
  );
}

Object.assign(window, { SpotlightBox, SolutionSpotlightCard, CollapsibleCard, ProblemSection, SolutionSection, ProcessSection, FeaturesByCategory, FounderStrip });