/* global React */
function CTABand({ headline, body, button = 'Book your visit', href = 'book.html' }) {
  const Btn = window.GFH_Button;
  return (
    <section style={{ background: '#B5654A', color: '#F5EFE6' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto', padding: '80px 24px', textAlign: 'center' }}>
        <h2 style={{
          fontFamily: "'Cormorant Garamond',serif", fontSize: 44, fontWeight: 500,
          color: '#F5EFE6', margin: '0 0 16px', letterSpacing: '-0.01em',
        }}>{headline}</h2>
        {body && <p style={{
          fontFamily: "'Mulish',sans-serif", fontSize: 17, lineHeight: 1.6,
          color: '#FBF7F1', margin: '0 auto 28px', maxWidth: 520, opacity: 0.92,
        }}>{body}</p>}
        <a href={href} style={{
          display: 'inline-block', background: '#F5EFE6', color: '#8E4A33',
          fontFamily: "'Mulish',sans-serif", fontSize: 15, fontWeight: 500,
          padding: '14px 28px', borderRadius: 4, textDecoration: 'none',
        }}>{button}</a>
      </div>
    </section>
  );
}

function PageHero({ eyebrow, title, sub, image, imageLabel, slotId }) {
  const Eyebrow = window.GFH_Eyebrow;
  const hasImg = !!(image || slotId);
  return (
    <section style={{ maxWidth: 1180, margin: '0 auto', padding: '64px 24px 48px' }}>
      <div className={hasImg ? 'gfh-hero' : ''} style={hasImg ? {
        display: 'grid', gridTemplateColumns: '1.6fr 0.75fr', gap: 64, alignItems: 'center',
      } : { maxWidth: 720 }}>
        <div style={{ maxWidth: 560 }}>
          <Eyebrow>{eyebrow}</Eyebrow>
          <h1 style={{
            fontFamily: "'Cormorant Garamond',serif",
            fontSize: 60, lineHeight: 1.05,
            color: '#3D2F22', fontWeight: 500, letterSpacing: '-0.01em',
            margin: '24px 0 24px', textWrap: 'balance',
          }}>{title}</h1>
          {sub && <p style={{
            fontFamily: "'Mulish',sans-serif", fontSize: 18, lineHeight: 1.6,
            color: '#2E2A26', margin: 0, maxWidth: 480, textWrap: 'pretty',
          }}>{sub}</p>}
        </div>
        {slotId ? (
          <div style={{ position: 'relative', width: '100%', maxWidth: 280, aspectRatio: '4 / 5', justifySelf: 'end' }}>
            <div style={{ position: 'absolute', inset: 0, transform: 'translate(14px, 14px)', background: 'rgba(138,154,123,0.22)', borderRadius: 6 }}/>
            <div style={{ position: 'relative', width: '100%', height: '100%' }}
                 dangerouslySetInnerHTML={{ __html: `<image-slot id="${slotId}" shape="rounded" radius="6" placeholder="${imageLabel || 'Drop a portrait here'}" style="display:block;width:100%;height:100%;"></image-slot>` }}/>
          </div>
        ) : image && (
          <div style={{ position: 'relative', maxWidth: 280, justifySelf: 'end' }}>
            <div style={{ position: 'absolute', inset: 0, transform: 'translate(14px, 14px)', background: 'rgba(138,154,123,0.22)', borderRadius: 6 }}/>
            <img src={image} alt={imageLabel || ''}
                 style={{ position: 'relative', width: '100%', borderRadius: 6, display: 'block' }}/>
          </div>
        )}
      </div>
    </section>
  );
}

window.GFH_CTABand = CTABand;
window.GFH_PageHero = PageHero;