/* global React, Reveal, Placeholder, TIMELINE, TEAM */

function About({ setRoute }) {
  return (
    <main>
      <section className="page-hero">
        <div className="container">
          <Reveal><div className="eyebrow" style={{ marginBottom: 32 }}>Nosotros · Una marca de D²</div></Reveal>
          <Reveal delay={120}>
            <h1>Pasión por lo<br />que <span className="serif accent">hacemos.</span></h1>
          </Reveal>
          <Reveal delay={240}>
            <p className="lede" style={{ marginTop: 32 }}>
              Somos expertos en marketing digital. Diseñamos estrategias ajustadas a cada cliente.
              Analizamos, diseñamos y planeamos. Equipo senior + talento + expertos.
            </p>
          </Reveal>
        </div>
      </section>

      {/* Timeline */}
      <section>
        <div className="container">
          <Reveal><div className="eyebrow" style={{ marginBottom: 24 }}>01 — Nuestra historia</div></Reveal>
          <Reveal delay={120}>
            <h2 className="display-lg" style={{ maxWidth: '14ch' }}>
              8+ años.<br />Un <span className="serif accent">objetivo.</span>
            </h2>
          </Reveal>

          <div className="timeline" style={{ marginTop: 80 }}>
            <div className="timeline-line" />
            {TIMELINE.map((t, i) => {
              const isLeft = i % 2 === 0;
              return (
                <Reveal key={t.year}>
                  <div className="tl-row">
                    {isLeft ? (
                      <>
                        <div className="tl-card">
                          <div className="tl-year">{t.year}</div>
                          <h3 style={{ fontSize: 24, marginTop: 12 }}>{t.title}</h3>
                          <p style={{ marginTop: 8, fontSize: 15 }}>{t.body}</p>
                        </div>
                        <div className="tl-dot" />
                        <div />
                      </>
                    ) : (
                      <>
                        <div />
                        <div className="tl-dot" />
                        <div className="tl-card">
                          <div className="tl-year">{t.year}</div>
                          <h3 style={{ fontSize: 24, marginTop: 12 }}>{t.title}</h3>
                          <p style={{ marginTop: 8, fontSize: 15 }}>{t.body}</p>
                        </div>
                      </>
                    )}
                  </div>
                </Reveal>
              );
            })}
          </div>
        </div>
      </section>

      {/* Values */}
      <section style={{ background: 'var(--bg-alt)' }}>
        <div className="container">
          <Reveal><div className="eyebrow" style={{ marginBottom: 24 }}>02 — Valores</div></Reveal>
          <Reveal delay={100}>
            <h2 className="display-lg" style={{ maxWidth: '18ch' }}>
              Profesionales.<br />Talento. <span className="serif accent">Expertos.</span>
            </h2>
          </Reveal>
        </div>
      </section>

      {/* Team */}
      <section>
        <div className="container">
          <Reveal><div className="eyebrow" style={{ marginBottom: 24 }}>03 — El equipo</div></Reveal>
          <Reveal delay={100}>
            <h2 className="display-lg" style={{ maxWidth: '14ch' }}>
              Detrás de<br />cada <span className="serif accent">número.</span>
            </h2>
          </Reveal>

          <div style={{ marginTop: 64, display: 'flex', flexWrap: 'wrap', gap: '40px 32px', justifyContent: 'center' }}>
            {TEAM.map((p, i) => (
              <Reveal key={p.name} delay={i * 70}>
                <div style={{ width: 200, textAlign: 'center' }}>

                  {/* Avatar circular */}
                  <div style={{ width: 88, height: 88, borderRadius: '50%', overflow: 'hidden', margin: '0 auto', border: '2px solid var(--line)' }}>
                    {p.photo
                      ? <img src={p.photo} alt={p.name} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                      : <div style={{ width: '100%', height: '100%', background: 'var(--navy-800)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--bg)', fontSize: 28, fontWeight: 700 }}>
                          {p.name.charAt(0)}
                        </div>
                    }
                  </div>

                  <h3 style={{ fontSize: 16, fontWeight: 600, letterSpacing: '-0.01em', marginTop: 16, lineHeight: 1.3 }}>{p.name}</h3>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: '0.10em', textTransform: 'uppercase', color: 'var(--accent)', marginTop: 5 }}>
                    {p.role}
                  </div>
                  {p.bio && (
                    <p style={{ marginTop: 10, fontSize: 13, lineHeight: 1.6, color: 'var(--ink-mid)' }}>{p.bio}</p>
                  )}
                  {p.linkedin && (
                    <a href={p.linkedin} target="_blank" rel="noopener"
                       style={{ marginTop: 10, display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 11, fontWeight: 500, color: 'var(--accent)', textDecoration: 'none' }}>
                      <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
                      LinkedIn
                    </a>
                  )}
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { About });