// Borderless rhythm helpers – full-bleed photo strips & accent-color slabs
// inserted between major content blocks so the page reads like brand collateral
// rather than a sterile white SPA.

function PhotoBreak({ src, eyebrow, title, body, height = 460, position = 'left', overlay = 0.32 }) {
  return (
    <section style={{
      position: 'relative',
      height,
      background: '#2A2E33',
      overflow: 'hidden',
      isolation: 'isolate',
    }}>
      <img
        src={src}
        alt=""
        loading="lazy"
        onError={(e) => { e.currentTarget.src = `https://picsum.photos/seed/${encodeURIComponent(title || 'borderless')}/1800/900`; }}
        style={{
          position: 'absolute', inset: 0,
          width: '100%', height: '100%', objectFit: 'cover',
          zIndex: -1,
          opacity: 1 - overlay * 0.4,
        }}
      />
      <div style={{
        position: 'absolute', inset: 0,
        background: position === 'left'
          ? `linear-gradient(90deg, rgba(25,28,31,${overlay + 0.25}) 0%, rgba(25,28,31,${overlay * 0.4}) 60%, rgba(25,28,31,0.1) 100%)`
          : `linear-gradient(180deg, rgba(25,28,31,0.15) 0%, rgba(25,28,31,${overlay + 0.15}) 100%)`,
        zIndex: -1,
      }} />

      <div className="container-wide" style={{
        height: '100%',
        display: 'flex', flexDirection: 'column',
        justifyContent: position === 'center' ? 'center' : 'flex-end',
        alignItems: position === 'center' ? 'center' : 'flex-start',
        padding: '56px 32px',
        color: '#FFFFFF',
        textAlign: position === 'center' ? 'center' : 'left',
      }}>
        {eyebrow && (
          <div className="mono" style={{
            fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase',
            color: 'rgba(255,255,255,0.8)', marginBottom: 18,
          }}>
            {eyebrow}
          </div>
        )}
        <h2 className="display" style={{
          margin: 0, color: '#FFFFFF',
          fontWeight: 800,
          fontSize: 'clamp(32px, 4.6vw, 60px)',
          lineHeight: 0.98,
          letterSpacing: '-0.03em',
          textTransform: 'uppercase',
          maxWidth: position === 'center' ? '100%' : 920,
        }}>
          {title}
        </h2>
        {body && (
          <p style={{
            marginTop: 22, color: 'rgba(255,255,255,0.82)',
            fontSize: 17, lineHeight: 1.45, maxWidth: 580,
          }}>
            {body}
          </p>
        )}
      </div>
    </section>
  );
}

function SlabBreak({ bg, color, eyebrow, title, body, kicker, items, footer, light = false, onItemSelect }) {
  // Light variant: white/tinted slab with dark ink + dark hairlines.
  const ink = color || (light ? '#191C1F' : '#FFFFFF');
  const slabBg = bg || (light ? '#F4F4F2' : '#1F4A2E');
  const rule = light ? 'rgba(25,28,31,0.14)' : 'rgba(255,255,255,0.18)';
  const ruleTop = light ? 'rgba(25,28,31,0.18)' : 'rgba(255,255,255,0.22)';
  return (
    <section className={light ? '' : 'dark-section'} style={{ background: slabBg, color: ink, padding: '88px 0' }}>
      <div className="container-wide">
        <div className="slab-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'flex-start' }}>
          <div>
            {eyebrow && (
              <div className="mono" style={{
                fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase',
                opacity: 0.66, marginBottom: 16,
              }}>
                – {eyebrow}
              </div>
            )}
            <h2 className="display" style={{
              margin: 0, color: ink,
              fontWeight: 800,
              fontSize: 'clamp(28px, 3.8vw, 48px)',
              lineHeight: 1.0,
              letterSpacing: '-0.03em',
              textTransform: 'uppercase',
            }}>
              {title}
            </h2>
          </div>
          <div>
            {kicker && (
              <div className="mono" style={{
                fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase',
                opacity: 0.66, marginBottom: 16,
              }}>
                {kicker}
              </div>
            )}
            {body && (
              <p style={{ fontSize: 16.5, lineHeight: 1.55, opacity: 0.9, maxWidth: 520 }}>
                {body}
              </p>
            )}
            {items && (
              <div style={{
                marginTop: 32,
                display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)',
                gap: 0,
                borderTop: '1px solid ' + ruleTop,
              }}>
                {items.map((it, i) => {
                  const clickable = !!(onItemSelect && it.cta);
                  const inner = (
                    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', minHeight: 132 }}>
                      <div style={{
                        fontFamily: 'var(--f-sans)', fontWeight: 700,
                        fontSize: 'clamp(17px, 1.3vw, 22px)', letterSpacing: '-0.02em', lineHeight: 1.15,
                        minHeight: 26,
                      }}>
                        {it.title}
                      </div>
                      <div style={{ fontSize: 13.5, opacity: 0.66, marginTop: 7, lineHeight: 1.5, flex: 1, minHeight: 60 }}>
                        {it.body}
                      </div>
                      {it.cta && (
                        <div className="mono" style={{
                          marginTop: 12,
                          fontSize: 11, letterSpacing: '0.06em', textTransform: 'uppercase',
                          color: ink, opacity: clickable ? 1 : 0.6,
                          display: 'inline-flex', alignItems: 'center', gap: 6,
                        }}>
                          {it.cta} <span style={{ transition: 'transform .2s' }}>→</span>
                        </div>
                      )}
                    </div>
                  );
                  const baseStyle = {
                    padding: '18px 0',
                    borderBottom: i < items.length - 2 ? '1px solid ' + rule : 0,
                    borderRight: i % 2 === 0 ? '1px solid ' + rule : 0,
                    paddingRight: i % 2 === 0 ? 24 : 0,
                    paddingLeft: i % 2 === 1 ? 24 : 0,
                  };
                  if (clickable) {
                    return (
                      <button key={i} type="button"
                              onClick={() => onItemSelect(i, it)}
                              style={{
                                ...baseStyle,
                                textAlign: 'left', cursor: 'pointer',
                                background: 'transparent', color: 'inherit',
                                border: 0,
                              }}>
                        {inner}
                      </button>
                    );
                  }
                  return <div key={i} style={baseStyle}>{inner}</div>;
                })}
              </div>
            )}
            {footer}
          </div>
        </div>
      </div>
    </section>
  );
}

window.PhotoBreak = PhotoBreak;
window.SlabBreak = SlabBreak;