// Shared building blocks for subpages
function PageHero({ eyebrow, title, italicWord, italicColor, body, bodyMaxWidth }) {
  const renderTitle = () => {
    if (!italicWord) return title;
    const parts = title.split(italicWord);
    if (parts.length < 2) return title;
    return (
      <span>{parts[0]}<span style={{
        fontFamily: 'var(--font-serif)', fontStyle: 'italic',
        fontWeight: 400, color: italicColor || 'var(--gs-500)',
      }}>{italicWord}</span>{parts.slice(1).join(italicWord)}</span>
    );
  };
  return (
    <section style={{
      maxWidth: 1440, margin: '0 auto', padding: 'clamp(48px,8vw,96px) var(--page-px,40px) 0',
    }}>
      <div style={{
        fontFamily: 'var(--font-mono)', fontSize: 13,
        letterSpacing: '0.14em', color: 'var(--fg-muted)',
        textTransform: 'uppercase', marginBottom: 28,
        display: 'inline-flex', alignItems: 'center', gap: 10,
      }}>
        <span style={{width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)'}}/>
        {eyebrow}
      </div>
      <h1 className="gs-page-hero-h1" style={{
        fontSize: 'clamp(40px,7vw,88px)', lineHeight: 1.02, letterSpacing: '-0.035em',
        fontWeight: 500, margin: 0, maxWidth: 1100,
        color: 'var(--gs-900)',
      }}>{renderTitle()}</h1>
      {body && (
        <p style={{
          marginTop: 32, fontSize: 18, lineHeight: 1.8,
          color: 'var(--gs-700)', maxWidth: bodyMaxWidth || 760,
          letterSpacing: '-0.003em', textAlign: 'justify',
          textWrap: 'pretty',
        }}>{body}</p>
      )}
    </section>
  );
}

function Section({ children, dark, padding }) {
  return (
    <section style={{
      background: dark ? '#0A0A0B' : 'transparent',
      color: dark ? '#fff' : 'var(--gs-900)',
      padding: padding || '80px 0',
    }}>
      <div style={{maxWidth: 1440, margin: '0 auto', padding: '0 40px'}}>
        {children}
      </div>
    </section>
  );
}

function CtaStrip({ base, lang, kicker, title, ctaLabel }) {
  const B = base || '';
  return (
    <section style={{padding: 'clamp(32px,5vw,80px) var(--page-px,40px)', borderTop: '1px solid var(--border)'}}>
      <div style={{
        maxWidth: 1240, margin: '0 auto',
        background: '#0A0A0B', color: '#fff',
        borderRadius: 18, padding: 'clamp(32px,4vw,64px) clamp(24px,4vw,56px)',
        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 48,
        alignItems: 'center', position: 'relative', overflow: 'hidden',
      }}>
        <svg viewBox="0 0 800 400" preserveAspectRatio="xMidYMid slice" style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%',
          opacity: 0.5, pointerEvents: 'none',
        }}>
          <defs>
            <pattern id="ctagrid" width="32" height="32" patternUnits="userSpaceOnUse">
              <path d="M 32 0 L 0 0 0 32" fill="none" stroke="#1F1F22" strokeWidth="1"/>
            </pattern>
            <radialGradient id="ctaglow" cx="80%" cy="50%" r="50%">
              <stop offset="0%" stopColor="#DF3E6F" stopOpacity="0.28"/>
              <stop offset="100%" stopColor="#DF3E6F" stopOpacity="0"/>
            </radialGradient>
          </defs>
          <rect width="800" height="400" fill="url(#ctagrid)"/>
          <circle cx="640" cy="200" r="280" fill="url(#ctaglow)"/>
        </svg>
        <div style={{position: 'relative'}}>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 11,
            letterSpacing: '0.14em', color: '#9B9B93',
            textTransform: 'uppercase', marginBottom: 16,
          }}>{kicker || 'Ready when you are'}</div>
          <h2 style={{
            fontSize: 44, lineHeight: 1.1, letterSpacing: '-0.025em',
            fontWeight: 500, margin: 0, maxWidth: 680,
          }}>{title || 'Let\u2019s map a 90-day plan together.'}</h2>
        </div>
        <div style={{display: 'flex', gap: 12, position: 'relative', flexWrap: 'wrap'}}>
          <a href={B + 'book-a-call.html'} style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            height: 52, padding: '0 24px', borderRadius: 999,
            background: 'var(--accent)', color: '#fff', fontSize: 15, fontWeight: 500,
          }}>{ctaLabel || (lang === 'DE' ? 'Termin buchen' : 'Book a call')} →</a>
          <a href={B + 'contact.html'} style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            height: 52, padding: '0 24px', borderRadius: 999,
            background: 'transparent', color: '#fff',
            border: '1px solid #2A2A2D', fontSize: 15, fontWeight: 500,
          }}>Send a brief</a>
        </div>
      </div>
    </section>
  );
}

window.PageHero = PageHero;
window.Section = Section;
window.CtaStrip = CtaStrip;