// ui_kits/website/About.jsx — founder / about strip

const aboutStyles = {
  section: {
    background: '#fff',
    padding: '96px 0',
    borderTop: '1px solid var(--color-divider)',
    borderBottom: '1px solid var(--color-divider)',
  },
  inner: {
    maxWidth: 1200, margin: '0 auto', padding: '0 32px',
    display: 'grid', gridTemplateColumns: '396px 1fr', gap: 64, alignItems: 'center',
  },
  portrait: {
    width: 396, height: 520,
    borderRadius: 16,
    objectFit: 'cover',
    boxShadow: '0 18px 40px rgba(31,79,64,0.10)',
  },
  signature: {
    fontFamily: 'var(--font-serif)', fontStyle: 'italic',
    fontSize: 28, color: 'var(--brand-leaf)',
    marginTop: 24,
  },
  greeting: {
    fontFamily: 'var(--font-serif)', fontStyle: 'italic',
    fontSize: 20, color: 'var(--brand-leaf)',
    marginBottom: 8,
  },
};

function AboutFounder() {
  const tr = useT();
  return (
    <section style={aboutStyles.section}>
      <div style={aboutStyles.inner}>
        <img src="lifestyle-tea.jpg"
             alt="A morning ritual: loose-leaf tea steeping over a ceramic cup"
             style={aboutStyles.portrait}/>
        <div>
          <div className="eyebrow">{tr('about.eyebrow')}</div>
          <div style={aboutStyles.greeting}>{tr('about.greeting')}</div>
          <h2 className="section-title" style={{ marginTop: 4 }}>{tr('about.title')}</h2>
          <p
            style={{ fontFamily: 'var(--font-sans)', fontSize: 18, lineHeight: 1.7,
                     color: 'var(--color-fg)', maxWidth: '52ch', marginTop: 20 }}
            dangerouslySetInnerHTML={{ __html: tr('about.body') }}
          />
          <div style={aboutStyles.signature}>{tr('about.signature')}</div>
          <button className="btn btn--primary" style={{ marginTop: 24 }}>
            {tr('about.cta')} <ArrowRight size={16}/>
          </button>
        </div>
      </div>
    </section>
  );
}

window.AboutFounder = AboutFounder;