/* global React, window, Halftone, MooreLawChart, AiCurveChart */
function About({ lang, onOpenContact }) {
  const tr = (k) => window.tr(lang, k);
  const lp = (p) => window.localePath(p, lang);

  const people = [
    { name: 'Thiago Cruz', bioKey: 'about.bio_thiago', expKey: 'about.exp_thiago', eduKey: 'about.edu_thiago', img: 'assets/thiago.jpg', initials: 'TC', zoom: 1.6, fx: 0.5, fy: 0.08, url: 'https://www.linkedin.com/in/thiago-cruz-964981150/' },
    { name: 'Bernie Campos', bioKey: 'about.bio_bernie', expKey: 'about.exp_bernie', eduKey: 'about.edu_bernie', img: 'assets/bernie.png', initials: 'BC', zoom: 1.5, fx: 0.5, fy: 0.24, url: 'https://www.linkedin.com/in/berniecampos/' },
  ];

  const wrap = { paddingTop: '80px', paddingBottom: '64px' };
  const header = { display: 'grid', gridTemplateColumns: '5fr 7fr', gap: '64px', alignItems: 'end', paddingBottom: '40px', borderBottom: '1px solid var(--ink)' };
  const h1 = { fontSize: 'clamp(40px, 5.4vw, 72px)', fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1.02, color: 'var(--ink)', margin: '16px 0 0', maxWidth: '15ch' };
  const lead = { fontSize: '19px', lineHeight: 1.55, color: 'var(--warm-700)', margin: 0, maxWidth: '46ch' };
  const name = { fontSize: 'clamp(24px, 2.6vw, 30px)', fontWeight: 500, letterSpacing: '-0.02em', color: 'var(--ink)', margin: 0 };
  const role = { fontFamily: 'var(--font-mono)', fontSize: '11px', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--graphite)', margin: '8px 0 0' };
  const bio = { fontSize: '18px', lineHeight: 1.6, color: 'var(--warm-800)', margin: '20px 0 0', maxWidth: '46ch' };
  const cv = { margin: '24px 0 0', display: 'flex', flexDirection: 'column', gap: '14px' };
  const cvLabel = { fontFamily: 'var(--font-mono)', fontSize: '11px', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--graphite)', display: 'block', marginBottom: '5px' };
  const cvVal = { fontSize: '15px', lineHeight: 1.5, color: 'var(--warm-800)', margin: 0 };
  const linkedin = { fontFamily: 'var(--font-mono)', fontSize: '12px', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--graphite)', margin: '20px 0 0', display: 'inline-flex', gap: '8px', alignItems: 'center', textDecoration: 'none', borderBottom: '1px solid var(--graphite-soft)', paddingBottom: '2px' };

  const values = ['v1', 'v2', 'v3', 'v4', 'v5'];
  const valNum = { fontFamily: 'var(--font-mono)', fontSize: '12px', letterSpacing: '0.14em', color: 'var(--graphite)', display: 'block', marginBottom: '12px' };
  const valTitle = { fontSize: 'clamp(22px, 2.6vw, 30px)', fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.12, color: 'var(--ink)', margin: 0, maxWidth: '16ch' };
  const valDesc = { fontSize: '17px', lineHeight: 1.6, color: 'var(--warm-700)', margin: 0, maxWidth: '52ch' };

  const mooreHeading = { fontSize: 'clamp(28px, 3.4vw, 44px)', fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1.04, color: 'var(--ink)', margin: '14px 0 0', maxWidth: '18ch' };
  const mooreP = { fontSize: '18px', lineHeight: 1.65, color: 'var(--warm-800)', margin: 0, maxWidth: '62ch' };

  return (
    <div>
      <section style={wrap} className="sec">
        <div className="container">
          <header style={header} className="sec-header">
            <div>
              <h1 style={h1}>{tr('about.heading')}</h1>
            </div>
            <p style={lead}>{tr('about.lead')}</p>
          </header>
        </div>
      </section>

      <section style={{ paddingBottom: '72px' }} className="sec">
        <div className="container-narrow">
          <div className="prose">
            <p className="lead">{tr('about.p1')}</p>
            <p>{tr('about.p2')}</p>
            <p>
              {tr('about.p3_start')}
              <a className="in" href={lp('/blog/poucos-clientes-atualizacao-continua')} data-spa="1">{tr('about.link_few')}</a>
              {tr('about.p3_mid')}
              <a className="in" href={lp('/blog/cobrar-por-resultado')} data-spa="1">{tr('about.link_result')}</a>.
            </p>
          </div>
        </div>
      </section>

      <section style={{ paddingBottom: '80px' }} className="sec">
        <div className="container-narrow">
          <div className="eyebrow" style={{ marginBottom: '24px' }}><span className="n">01</span>{tr('about.moore_eyebrow')}</div>
          <h2 style={mooreHeading}>{tr('about.moore_heading')}</h2>
          <div className="moore-grid">
            <figure className="moore-portrait">
              <div className="about-photo"><Halftone src="assets/gordon-moore.jpg" alt="Gordon Moore" initials="GM" cols={72} zoom={1.05} focusX={0.55} focusY={0.12} gamma={1.0} /></div>
              <figcaption className="moore-credit">{tr('about.moore_caption')}<br />{tr('about.moore_credit')}</figcaption>
            </figure>
            <p style={mooreP}>{tr('about.moore_p1')}</p>
          </div>
          <div className="moore-chart"><MooreLawChart lang={lang} /></div>
          <p style={mooreP} className="moore-p2">{tr('about.moore_p2')}</p>
          <div className="moore-chart"><AiCurveChart lang={lang} /></div>
        </div>
      </section>

      <section style={{ paddingBottom: '64px' }} className="sec">
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: '36px' }}><span className="n">02</span>{tr('about.values_eyebrow')}</div>
          {values.map((v, i) => (
            <div key={v} className="value-row">
              <div>
                <span style={valNum}>{'0' + (i + 1)}</span>
                <h3 style={valTitle}>{tr('about.' + v + '_t')}</h3>
              </div>
              <p style={valDesc}>{tr('about.' + v + '_d')}</p>
            </div>
          ))}
        </div>
      </section>

      <section style={{ paddingBottom: '64px' }}>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: '32px' }}><span className="n">03</span>{tr('about.team_eyebrow')}</div>
          {people.map((p, i) => (
            <div key={p.name} className="about-profile" style={i > 0 ? { borderTop: '1px solid var(--border)' } : null}>
              <div className="about-photo">
                <Halftone src={p.img} alt={p.name} initials={p.initials} cols={72} zoom={p.zoom} focusX={p.fx} focusY={p.fy} gamma={1.0} />
              </div>
              <div className="about-bio">
                <h2 style={name}>{p.name}</h2>
                <p style={role}>{tr('team.role_ai')}</p>
                <p style={bio}>{tr(p.bioKey)}</p>
                <div style={cv}>
                  <div><span style={cvLabel}>{tr('about.exp_label')}</span><p style={cvVal}>{tr(p.expKey)}</p></div>
                  <div><span style={cvLabel}>{tr('about.edu_label')}</span><p style={cvVal}>{tr(p.eduKey)}</p></div>
                </div>
                <a style={linkedin} href={p.url} target="_blank" rel="noopener noreferrer">{tr('about.linkedin')} <span>↗</span></a>
              </div>
            </div>
          ))}
        </div>
      </section>

      <section style={{ paddingBottom: '100px' }}>
        <div className="container-narrow">
          <div className="on-ink" style={{ borderRadius: '2px', padding: 'clamp(32px, 5vw, 56px)' }}>
            <span className="eyebrow" style={{ color: 'var(--warm-400)' }}>{tr('about.cta_eyebrow')}</span>
            <h3 style={{ fontSize: 'clamp(28px, 3.4vw, 40px)', fontWeight: 500, letterSpacing: '-0.025em', lineHeight: 1.1, color: 'var(--cream)', margin: '14px 0 0', maxWidth: '20ch' }}>
              {tr('about.cta_heading')}
            </h3>
            <p style={{ fontSize: '17px', lineHeight: 1.6, color: 'var(--warm-300)', margin: '16px 0 28px', maxWidth: '46ch' }}>
              {tr('about.cta_p')}
            </p>
            <button className="btn ink-inverse" onClick={onOpenContact}>{tr('about.cta_button')} <span>→</span></button>
          </div>
        </div>
      </section>
    </div>
  );
}

window.About = About;