// Sections2.jsx — System (4-phase cards), Differentiation, Credibility

function System({ tweaks }) {
  const w = useWindowWidth();
  const isMobile = w < 640;
  const isTablet = w < 900;
  const phases = [
    {
      key: 'align',
      name: 'Align',
      sub: 'Portfolio Development',
      body: 'Define goals, evaluate opportunities, and prioritize the work that matters.',
      color: 'var(--brand-fern)',
      bg: 'rgba(118,176,65,.10)',
      icon: (
        <svg viewBox="0 0 48 48" width="28" height="28" fill="none">
          <circle cx="24" cy="24" r="18" stroke="currentColor" strokeWidth="2"/>
          <circle cx="24" cy="24" r="10" stroke="currentColor" strokeWidth="2"/>
          <circle cx="24" cy="24" r="3" fill="currentColor"/>
        </svg>
      ),
    },
    {
      key: 'focus',
      name: 'Focus',
      sub: 'Planning',
      body: 'Turn strategy into executable plans with real constraints and clarity.',
      color: 'var(--brand-ocean)',
      bg: 'rgba(51,130,176,.10)',
      icon: (
        <svg viewBox="0 0 48 48" width="28" height="28" fill="none">
          <rect x="10" y="8" width="28" height="32" rx="3" stroke="currentColor" strokeWidth="2"/>
          <line x1="16" y1="18" x2="32" y2="18" stroke="currentColor" strokeWidth="2"/>
          <line x1="16" y1="24" x2="32" y2="24" stroke="currentColor" strokeWidth="2"/>
          <line x1="16" y1="30" x2="26" y2="30" stroke="currentColor" strokeWidth="2"/>
        </svg>
      ),
    },
    {
      key: 'deliver',
      name: 'Deliver',
      sub: 'Execution',
      body: 'Coordinate teams, remove friction, and move work to production predictably.',
      color: 'var(--brand-spruce)',
      bg: 'rgba(47,75,38,.10)',
      icon: (
        <svg viewBox="0 0 48 48" width="28" height="28" fill="none">
          <path d="M8 34 L20 22 L28 30 L40 14" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
          <path d="M32 14 L40 14 L40 22" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      ),
    },
    {
      key: 'learn',
      name: 'Learn',
      sub: 'Production & Feedback',
      body: 'Measure outcomes, validate value, and feed insights back into decisions.',
      color: 'var(--brand-cta)',
      bg: 'rgba(251,97,7,.08)',
      icon: (
        <svg viewBox="0 0 48 48" width="28" height="28" fill="none">
          <path d="M24 10 a14 14 0 1 1 -12 20" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
          <path d="M24 10 L24 4 M24 10 L30 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
        </svg>
      ),
    },
  ];

  return (
    <Section tone="tint" id="system">
      <Reveal tweaks={tweaks}>
        <div style={{ textAlign: 'center', maxWidth: 740, margin: '0 auto 18px' }}>
          <Eyebrow color="var(--brand-fern)">PPM4Agile</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-heading)',
            fontSize: 'clamp(30px, 3.6vw, 44px)',
            lineHeight: 1.14,
            letterSpacing: '-0.02em',
            fontWeight: 700,
            color: 'var(--brand-indigo)',
            margin: 0,
            textWrap: 'balance',
          }}>
            A practical system to Align, Focus, Deliver, and Learn.
          </h2>
        </div>
      </Reveal>

      {!isMobile && (
        <Reveal tweaks={tweaks} delay={80}>
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 56 }}>
            <PhaseConnector phases={phases}/>
          </div>
        </Reveal>
      )}

      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : (isTablet ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)'),
        gap: isMobile ? 12 : 20,
      }}>
        {phases.map((p, i) => (
          <Reveal key={p.key} tweaks={tweaks} delay={100 + i * 80}>
            <PhaseCard phase={p} index={i}/>
          </Reveal>
        ))}
      </div>

      <Reveal tweaks={tweaks} delay={400}>
        <p style={{
          textAlign: 'center',
          color: 'var(--fg-muted)',
          fontSize: 16,
          marginTop: 48,
          marginBottom: 0,
        }}>
          Each phase is supported by clear workflows, roles, metrics, and tools.
        </p>
      </Reveal>
    </Section>
  );
}

function PhaseConnector({ phases }) {
  return (
    <svg viewBox="0 0 900 60" style={{ width: '100%', maxWidth: 900, height: 60 }}>
      <line x1="50" y1="30" x2="850" y2="30" stroke="rgba(27,38,79,.18)" strokeWidth="2" strokeDasharray="3 6"/>
      {phases.map((p, i) => {
        const x = 50 + i * (800 / 3);
        return (
          <g key={p.key}>
            <circle cx={x} cy={30} r={14} fill="#fff" stroke={p.color} strokeWidth="2.5"/>
            <circle cx={x} cy={30} r={5} fill={p.color}/>
            <text x={x} y={54} textAnchor="middle" fontSize="11" fontWeight="700"
                  fill={p.color} fontFamily="var(--font-heading)" letterSpacing="1.2">
              {p.name.toUpperCase()}
            </text>
          </g>
        );
      })}
    </svg>
  );
}

function PhaseCard({ phase, index }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: '#fff',
        padding: '32px 26px 30px',
        borderRadius: 14,
        border: '1px solid rgba(27,38,79,.08)',
        transform: hover ? 'translateY(-4px)' : 'translateY(0)',
        boxShadow: hover
          ? '0 18px 36px -14px rgba(27,38,79,.18), 0 3px 8px rgba(27,38,79,.06)'
          : '0 1px 2px rgba(27,38,79,.04)',
        transition: 'all .24s cubic-bezier(.2,.7,.2,1)',
        position: 'relative',
        overflow: 'hidden',
      }}
    >
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 3,
        background: phase.color,
      }}/>
      <div style={{
        width: 52, height: 52, borderRadius: 12,
        background: phase.bg, color: phase.color,
        display: 'grid', placeItems: 'center',
        marginBottom: 20,
      }}>
        {phase.icon}
      </div>
      <div style={{
        fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
        textTransform: 'uppercase', color: phase.color, marginBottom: 8,
      }}>
        0{index + 1} · {phase.sub}
      </div>
      <h3 style={{
        fontFamily: 'var(--font-heading)',
        fontSize: 24, fontWeight: 700, letterSpacing: '-0.015em',
        color: 'var(--brand-indigo)', margin: '0 0 12px',
      }}>
        {phase.name}
      </h3>
      <p style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--fg-muted)', margin: 0 }}>
        {phase.body}
      </p>
    </div>
  );
}

// ── DIFFERENTIATION ──────────────────────────────────────────────────────────
function Differentiation({ tweaks }) {
  const w = useWindowWidth();
  const isMobile = w < 640;
  const bullets = [
    { t: 'Real-world complexity', b: 'Built for constraints, politics, and people — not theory.' },
    { t: 'Portfolio to execution',b: 'Connects portfolio decisions directly to team delivery.' },
    { t: 'Apply immediately',      b: 'Designed to be used now, not studied for months.' },
    { t: 'Across silos',           b: 'Works across teams and functions, not within them.' },
    { t: 'Outcomes, not activity', b: 'Measures what moved, not what was busy.' },
  ];
  return (
    <Section tone="light">
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'minmax(0, 0.8fr) minmax(0, 1.2fr)', gap: isMobile ? 40 : 72 }}>
        <Reveal tweaks={tweaks}>
          <div style={{ position: isMobile ? 'static' : 'sticky', top: 120 }}>
            <Eyebrow>Differentiation</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-heading)',
              fontSize: 'clamp(28px, 3.2vw, 40px)',
              lineHeight: 1.14,
              letterSpacing: '-0.02em',
              fontWeight: 700,
              color: 'var(--brand-indigo)',
              margin: 0,
              textWrap: 'balance',
            }}>
              Why StudioBE works when others don't.
            </h2>
          </div>
        </Reveal>
        <div>
          {bullets.map((b, i) => (
            <Reveal key={i} tweaks={tweaks} delay={60 + i * 50}>
              <div style={{
                display: 'grid',
                gridTemplateColumns: '32px 1fr',
                gap: 20,
                padding: '24px 0',
                borderBottom: i < bullets.length - 1 ? '1px solid rgba(27,38,79,.08)' : 'none',
                alignItems: 'flex-start',
              }}>
                <div style={{
                  fontFamily: 'var(--font-heading)',
                  fontSize: 14, fontWeight: 700,
                  color: 'var(--brand-fern)',
                  letterSpacing: '.08em',
                  paddingTop: 4,
                }}>
                  0{i + 1}
                </div>
                <div>
                  <div style={{
                    fontFamily: 'var(--font-heading)',
                    fontSize: 20, fontWeight: 600, letterSpacing: '-0.01em',
                    color: 'var(--brand-indigo)', marginBottom: 6,
                  }}>{b.t}</div>
                  <div style={{ fontSize: 16, lineHeight: 1.55, color: 'var(--fg-muted)' }}>
                    {b.b}
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </Section>
  );
}

// ── CREDIBILITY ──────────────────────────────────────────────────────────────
function Credibility({ tweaks }) {
  // Mix of real logos + text placeholders for ones we don't have files for
  const logos = [
    { kind: 'img',  name: 'Cisco', src: 'assets/logos/cisco.png', h: 40 },
    { kind: 'img',  name: 'Bank of America', src: 'assets/logos/boa.svg', h: 42 },
    { kind: 'img',  name: 'PIMCO', src: 'assets/logos/pimco.svg', h: 32 },
    { kind: 'img',  name: 'American Express', src: 'assets/logos/amex.png', h: 40 },
    { kind: 'img',  name: 'Grainger', src: 'assets/logos/grainger.png', h: 48 },
    { kind: 'img',  name: 'Centene', src: 'assets/logos/centene.jpg', h: 40 },
    { kind: 'img',  name: 'Mitchell1', src: 'assets/logos/mitchell1.png', h: 44 },
    { kind: 'img',  name: 'Pfizer', src: 'assets/logos/pfizer.svg', h: 40 },
    { kind: 'img',  name: 'California Dept. of Public Health', src: 'assets/logos/cdph.png', h: 60 },
    { kind: 'img',  name: 'California Child Support Services', src: 'assets/logos/ca-child-support.png', h: 50 },
    { kind: 'img',  name: 'Deloitte', src: 'assets/logos/deloitte.svg', h: 28 },
  ];
  return (
    <Section tone="tint">
      <Reveal tweaks={tweaks}>
        <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 48px' }}>
          <Eyebrow>Credibility</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-heading)',
            fontSize: 'clamp(28px, 3.2vw, 40px)',
            lineHeight: 1.18,
            letterSpacing: '-0.02em',
            fontWeight: 700,
            color: 'var(--brand-indigo)',
            margin: '0 0 20px',
            textWrap: 'balance',
          }}>
            Experience you can apply immediately.
          </h2>
          <p style={{
            fontSize: 18, lineHeight: 1.6, color: 'var(--fg-muted)',
            margin: 0, textWrap: 'pretty',
          }}>
            StudioBE is built on over a decade of experience leading Agile transformation,
            portfolio management, and organizational change across enterprise and public sector environments.
          </p>
        </div>
      </Reveal>
      <Reveal tweaks={tweaks} delay={100}>
        <LogoMarquee logos={logos} tweaks={tweaks}/>
      </Reveal>
    </Section>
  );
}

// ── LOGO MARQUEE ─────────────────────────────────────────────────────────────
// Continuous horizontal auto-scroll. Duplicates the track so scrolling feels
// seamless. Pauses on hover.
function LogoMarquee({ logos, tweaks }) {
  const [paused, setPaused] = React.useState(false);
  // Duration scales with content — ~4s per logo feels natural
  const duration = Math.max(24, logos.length * 4);

  const renderLogo = (l, i) => (
    <div key={`${l.name}-${i}`} style={{
      flex: '0 0 auto',
      width: 220,
      height: 120,
      display: 'grid',
      placeItems: 'center',
      padding: '0 28px',
      borderRight: '1px solid rgba(27,38,79,.08)',
    }}>
      {l.kind === 'img' ? (
        <img
          src={l.src}
          alt={l.name}
          style={{
            maxHeight: l.h,
            maxWidth: '100%',
            width: 'auto',
            height: 'auto',
            objectFit: 'contain',
            filter: tweaks.logoTreatment === 'mono' ? 'grayscale(1) opacity(.7)' : 'none',
            transition: 'filter .2s',
          }}
        />
      ) : (
        <div style={{
          fontFamily: 'var(--font-heading)',
          fontSize: 15, fontWeight: 700, letterSpacing: '0.14em',
          color: 'rgba(27,38,79,.45)', textAlign: 'center',
        }}>
          {l.name}
        </div>
      )}
    </div>
  );

  return (
    <>
      <style>{`
        @keyframes sbe-marquee {
          from { transform: translateX(0); }
          to   { transform: translateX(-50%); }
        }
        .sbe-marquee-track { animation: sbe-marquee ${duration}s linear infinite; }
        .sbe-marquee-track.paused { animation-play-state: paused; }
      `}</style>
      <div
        onMouseEnter={() => setPaused(true)}
        onMouseLeave={() => setPaused(false)}
        style={{
          position: 'relative',
          overflow: 'hidden',
          background: '#fff',
          border: '1px solid rgba(27,38,79,.08)',
          borderRadius: 12,
          // Edge fades
          WebkitMaskImage: 'linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%)',
          maskImage: 'linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%)',
        }}
      >
        <div
          className={`sbe-marquee-track ${paused ? 'paused' : ''}`}
          style={{
            display: 'flex',
            width: 'max-content',
            willChange: 'transform',
          }}
        >
          {/* two copies for seamless loop */}
          {logos.map((l, i) => renderLogo(l, i))}
          {logos.map((l, i) => renderLogo(l, i + logos.length))}
        </div>
      </div>
    </>
  );
}

window.System = System;
window.Differentiation = Differentiation;
window.Credibility = Credibility;