// Sections.jsx — all page sections

// ── HERO ──────────────────────────────────────────────────────────────────────
function Hero({ tweaks, onBook }) {
  const w = useWindowWidth();
  const isMobile = w < 640;
  return (
    <Section tone="light" style={{ paddingTop: isMobile ? 100 : 140, paddingBottom: isMobile ? 64 : 120, overflow: 'hidden' }}>
      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : 'minmax(0, 1.1fr) minmax(0, 1fr)',
        gap: isMobile ? 40 : 64,
        alignItems: 'center',
      }}>
        <div>
          <Reveal tweaks={tweaks}>
            <h1 style={{
              fontFamily: 'var(--font-heading)',
              fontSize: 'clamp(40px, 5.2vw, 68px)',
              lineHeight: 1.04,
              letterSpacing: '-0.025em',
              fontWeight: 700,
              margin: '0 0 24px',
              color: 'var(--brand-indigo)',
              textWrap: 'balance',
            }}>
              Your portfolio isn't the problem.<br/>
              Your <em style={{ fontStyle: 'normal', color: 'var(--brand-fern)' }}>operating system</em> is.
            </h1>
          </Reveal>
          <Reveal tweaks={tweaks} delay={80}>
            <p style={{
              fontSize: 19,
              lineHeight: 1.55,
              color: 'var(--fg-muted)',
              margin: '0 0 36px',
              maxWidth: 560,
              textWrap: 'pretty',
            }}>
              StudioBE helps organizations align strategy, prioritize the right work,
              and deliver value consistently — without adding more process.
            </p>
          </Reveal>
          <Reveal tweaks={tweaks} delay={160}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 28, flexWrap: 'wrap' }}>
              <div>
                <PrimaryButton size="lg" onClick={onBook}>Book a 60-Minute Clarity Session</PrimaryButton>
                <div style={{ fontSize: 13, color: 'var(--fg-muted)', marginTop: 10 }}>
                  No prep required. Leave with clear next steps.
                </div>
              </div>
              <SecondaryLink onClick={() => document.getElementById('system')?.scrollIntoView({ behavior: 'smooth' })}>
                See how it works →
              </SecondaryLink>
            </div>
          </Reveal>
        </div>
        {!isMobile && (
          <Reveal tweaks={tweaks} delay={120}>
            <div style={{ display: 'grid', placeItems: 'center' }}>
              <HeroGraphic variant={tweaks.heroStyle} />
            </div>
          </Reveal>
        )}
      </div>
    </Section>
  );
}

// ── PROBLEM ──────────────────────────────────────────────────────────────────
function Problem({ tweaks }) {
  const points = [
    'Too many projects, no clear prioritization',
    'Strategy and execution feel disconnected',
    'Plans change constantly — and not for the right reasons',
    'Teams are busy, but outcomes aren\u2019t improving',
    'Leadership lacks visibility into what\u2019s actually happening',
  ];
  return (
    <Section tone="tint" narrow>
      <Reveal tweaks={tweaks}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <Eyebrow>The Pattern</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-heading)',
            fontSize: 'clamp(30px, 3.6vw, 44px)',
            lineHeight: 1.12,
            letterSpacing: '-0.02em',
            fontWeight: 700,
            color: 'var(--brand-indigo)',
            margin: 0,
            textWrap: 'balance',
          }}>
            If this feels familiar, something is broken upstream.
          </h2>
        </div>
      </Reveal>
      <Reveal tweaks={tweaks} delay={80}>
        <ul style={{
          listStyle: 'none',
          padding: 0,
          margin: '0 auto 48px',
          maxWidth: 720,
          display: 'grid',
          gap: 2,
        }}>
          {points.map((p, i) => (
            <li key={i} style={{
              display: 'flex',
              alignItems: 'flex-start',
              gap: 16,
              padding: '18px 4px',
              borderBottom: i < points.length - 1 ? '1px solid rgba(27,38,79,.08)' : 'none',
              fontSize: 18,
              lineHeight: 1.5,
              color: 'var(--fg)',
            }}>
              <span style={{
                flexShrink: 0,
                width: 6, height: 6, borderRadius: 6,
                background: 'var(--brand-cta)',
                marginTop: 11,
              }}/>
              <span>{p}</span>
            </li>
          ))}
        </ul>
      </Reveal>
      <Reveal tweaks={tweaks} delay={160}>
        <div style={{ textAlign: 'center' }}>
          <p style={{
            fontFamily: 'var(--font-heading)',
            fontSize: 'clamp(22px, 2.4vw, 28px)',
            lineHeight: 1.3,
            fontWeight: 600,
            color: 'var(--brand-indigo)',
            letterSpacing: '-0.01em',
            margin: 0,
          }}>
            Most organizations think they have a delivery problem.{' '}
            <span style={{ color: 'var(--brand-fern)' }}>In reality, the issue starts upstream.</span>
          </p>
        </div>
      </Reveal>
    </Section>
  );
}

// ── SHIFT ────────────────────────────────────────────────────────────────────
function Shift({ tweaks }) {
  const [side, setSide] = React.useState('new');
  const w = useWindowWidth();
  const isMobile = w < 640;
  const oldWay = ['Disconnected planning', 'Static roadmaps', 'Reactive prioritization', 'Execution chaos'];
  const newWay = ['Aligned portfolio decisions', 'Continuous prioritization', 'Integrated planning + execution', 'Measurable outcomes'];

  return (
    <Section tone="light">
      <Reveal tweaks={tweaks}>
        <div style={{ textAlign: 'center', maxWidth: 780, margin: '0 auto 64px' }}>
          <Eyebrow>The Shift</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',
          }}>
            Most organizations manage projects. High-performing organizations manage the system.
          </h2>
        </div>
      </Reveal>

      {tweaks.shiftInteractive && (
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 32 }}>
          <div style={{
            display: 'inline-flex',
            background: 'var(--bg-tint)',
            padding: 4,
            borderRadius: 999,
            border: '1px solid rgba(27,38,79,.08)',
          }}>
            {['old', 'new'].map((k) => (
              <button key={k} onClick={() => setSide(k)} style={{
                padding: '10px 22px',
                border: 0,
                borderRadius: 999,
                fontFamily: 'inherit',
                fontSize: 14,
                fontWeight: 600,
                cursor: 'pointer',
                background: side === k ? (k === 'new' ? 'var(--brand-fern)' : 'var(--fg-muted)') : 'transparent',
                color: side === k ? '#fff' : 'var(--fg-muted)',
                transition: 'all .2s',
              }}>
                {k === 'old' ? 'Old Way' : 'New Way'}
              </button>
            ))}
          </div>
        </div>
      )}

      <Reveal tweaks={tweaks} delay={80}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
          gap: 0,
          border: '1px solid rgba(27,38,79,.1)',
          borderRadius: 16,
          overflow: 'hidden',
          background: '#fff',
        }}>
          <ShiftColumn
            label="Old Way"
            items={oldWay}
            muted
            dimmed={tweaks.shiftInteractive && side === 'new'}
            variant="old"
            isMobile={isMobile}
          />
          <ShiftColumn
            label="The Shift"
            items={newWay}
            dimmed={tweaks.shiftInteractive && side === 'old'}
            variant="new"
            isMobile={isMobile}
          />
        </div>
      </Reveal>
    </Section>
  );
}

function ShiftColumn({ label, items, muted, dimmed, variant, isMobile }) {
  return (
    <div style={{
      padding: isMobile ? 24 : 40,
      background: variant === 'new' ? 'rgba(118,176,65,.06)' : '#fafaf7',
      borderLeft: (variant === 'new' && !isMobile) ? '1px solid rgba(27,38,79,.08)' : 'none',
      borderTop: (variant === 'new' && isMobile) ? '1px solid rgba(27,38,79,.08)' : 'none',
      opacity: dimmed ? 0.35 : 1,
      transition: 'opacity .3s',
    }}>
      <div style={{
        fontSize: 12,
        fontWeight: 700,
        letterSpacing: '0.14em',
        textTransform: 'uppercase',
        color: variant === 'new' ? 'var(--brand-fern)' : 'var(--fg-muted)',
        marginBottom: 24,
      }}>
        {label}
      </div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 16 }}>
        {items.map((it, i) => (
          <li key={i} style={{
            display: 'flex',
            alignItems: 'flex-start',
            gap: 12,
            fontSize: 17,
            fontWeight: variant === 'new' ? 600 : 400,
            color: muted ? 'var(--fg-muted)' : 'var(--brand-indigo)',
            textDecoration: muted ? 'line-through' : 'none',
            textDecorationColor: muted ? 'rgba(27,38,79,.3)' : 'none',
          }}>
            {variant === 'new' ? (
              <svg width="18" height="18" viewBox="0 0 20 20" style={{ flexShrink: 0, marginTop: 3 }}>
                <path d="M4 10 L8 14 L16 6" stroke="var(--brand-fern)" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            ) : (
              <span style={{ flexShrink: 0, width: 6, height: 6, borderRadius: 6, background: 'rgba(27,38,79,.25)', marginTop: 9 }}/>
            )}
            <span>{it}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

window.Hero = Hero;
window.Problem = Problem;
window.Shift = Shift;