/* Corsa Privata — razón de origen. Why the house exists, told through the
 * founder: an insider who wanted this for himself and found only noise.
 * Origin story, not corporate bio. No fabricated metrics, no badge chips. */

function Founder({ t }) {
  const f = t.founder;
  return (
    <section id="founder" style={{ background: 'var(--surface-sunken)', borderTop: '1px solid var(--border-hairline)' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: 'clamp(72px, 9vw, 112px) 32px' }}>
        <div className="cp-founder-grid" style={{ display: 'grid', gridTemplateColumns: '0.82fr 1.18fr', gap: 'clamp(36px, 5vw, 72px)', alignItems: 'center' }}>

          {/* portrait + identity */}
          <div className="cp-reveal cp-founder-id">
            <div style={{ position: 'relative', borderRadius: 'var(--radius-lg)', overflow: 'hidden', border: '1px solid var(--border-hairline)', boxShadow: 'var(--shadow-md)', maxWidth: 380 }}>
              <img src="assets/founder.jpg" alt={f.name} style={{ display: 'block', width: '100%', height: 'auto' }} />
              <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 3, backgroundImage: 'var(--gradient-gold)', opacity: 0.85 }} />
            </div>
            <div style={{ marginTop: 22, maxWidth: 380 }}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 'var(--fw-semibold)', fontSize: 22, letterSpacing: '-0.01em', color: 'var(--text-strong)' }}>{f.name}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 11, fontWeight: 'var(--fw-medium)', letterSpacing: 'var(--ls-wider)', textTransform: 'uppercase', color: 'var(--cp-gold-700)', marginTop: 7 }}>{f.role}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, lineHeight: 1.5, color: 'var(--text-muted)', marginTop: 9 }}>{f.credential}</div>
            </div>
          </div>

          {/* founder's note */}
          <div className="cp-reveal">
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 12, fontWeight: 'var(--fw-medium)', letterSpacing: 'var(--ls-wider)', textTransform: 'uppercase', color: 'var(--cp-gold-700)' }}>{f.label}</span>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 'var(--fw-bold)', fontSize: 'clamp(28px, 3.4vw, 42px)', lineHeight: 1.08, letterSpacing: '-0.025em', color: 'var(--text-strong)', margin: '16px 0 0', textWrap: 'balance', maxWidth: '18ch' }}>{f.heading}</h2>
            <div style={{ marginTop: 22, display: 'flex', flexDirection: 'column', gap: 16, maxWidth: '58ch' }}>
              {f.body.map((p, i) => {
                // The last line is the founder's closer: set in display type, not body.
                const closer = i === f.body.length - 1 && f.body.length > 1;
                return closer ? (
                  <p key={i} style={{ fontFamily: 'var(--font-display)', fontWeight: 'var(--fw-semibold)', fontSize: 'clamp(17px, 1.6vw, 20px)', letterSpacing: '-0.015em', lineHeight: 1.4, color: 'var(--text-strong)', margin: '6px 0 0', textWrap: 'balance' }}>{p}</p>
                ) : (
                  <p key={i} style={{ fontFamily: 'var(--font-body)', fontSize: 'clamp(15px, 1.3vw, 17px)', lineHeight: 1.64, color: 'var(--text-body)', margin: 0, textWrap: 'pretty' }}>{p}</p>
                );
              })}
            </div>
          </div>

        </div>
      </div>
    </section>
  );
}

window.Founder = Founder;