function Timeline() {
  const D = (window.SITE && window.SITE.timeline) || {};
  const milestones = D.milestones || [];

  return (
    <section id="historia" style={{ background: 'var(--bg)', position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden="true" style={{
        position: 'absolute', top: 60, right: -20,
        fontFamily: 'var(--serif)', fontSize: 'clamp(120px, 18vw, 280px)',
        fontWeight: 500, letterSpacing: '-0.04em',
        color: 'color-mix(in oklab, var(--ink) 4%, transparent)',
        lineHeight: 1, pointerEvents: 'none', userSelect: 'none',
      }}>{milestones[0] && milestones[0].year}</div>

      <div className="container" style={{ position: 'relative' }}>
        <div className="section-head">
          <span className="eyebrow">{D.eyebrow}</span>
          <h2>{D.title}<br/><span style={{ fontStyle: 'italic', color: 'var(--ink-2)' }}>{D.titleAccent}</span> {D.titleEnd}</h2>
          <p style={{ fontSize: 17, maxWidth: 620 }}>
            {D.subtitle}
          </p>
        </div>

        <div className="timeline-wrap">
          <div className="timeline-rail" aria-hidden="true" />

          {milestones.map((m, i) => (
            <Milestone key={m.year + i} m={m} index={i} />
          ))}

          <div className="timeline-future">
            <div style={{
              width: 14, height: 14, borderRadius: '50%',
              background: 'var(--accent)',
              boxShadow: '0 0 0 5px color-mix(in oklab, var(--accent) 25%, transparent)',
            }} />
            <div style={{ marginLeft: 18 }}>
              <div className="eyebrow" style={{ marginBottom: 4 }}>{D.futureLabel || 'O próximo capítulo'}</div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 22, color: 'var(--ink)' }}>
                {D.futureTitle || '...escrito com você.'}
              </div>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .timeline-wrap { position: relative; padding: 20px 0 0; }
        .timeline-rail {
          position: absolute; left: 50%; top: 0; bottom: 80px; width: 2px;
          background: linear-gradient(to bottom, transparent 0%, var(--line) 4%, var(--line) 96%, transparent 100%);
          transform: translateX(-1px);
        }
        .timeline-row { display: grid; grid-template-columns: 1fr 64px 1fr; gap: 0; margin-bottom: 36px; position: relative; }
        .timeline-card {
          background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
          padding: 24px 26px; box-shadow: var(--shadow-sm); transition: all .25s ease;
        }
        .timeline-card:hover { border-color: color-mix(in oklab, var(--primary) 30%, var(--line)); box-shadow: var(--shadow-md); transform: translateY(-2px); }
        .timeline-year-badge {
          align-self: start; justify-self: center; width: 64px; height: 64px; border-radius: 50%;
          background: var(--surface); border: 2px solid var(--primary);
          display: flex; flex-direction: column; align-items: center; justify-content: center;
          font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--primary);
          position: relative; z-index: 2; box-shadow: 0 0 0 6px var(--bg);
        }
        .timeline-future { display: flex; align-items: center; justify-content: center; margin-top: 16px; padding: 24px; position: relative; z-index: 2; }
        @media (max-width: 760px) {
          .timeline-rail { left: 24px; }
          .timeline-row { grid-template-columns: 48px 1fr; margin-bottom: 24px; }
          .timeline-year-badge { width: 48px; height: 48px; font-size: 12.5px; grid-column: 1; grid-row: 1; justify-self: start; }
          .timeline-card { grid-column: 2; grid-row: 1; padding: 18px 20px; }
          .timeline-row.right .timeline-card, .timeline-row.left .timeline-card { grid-column: 2 !important; }
          .timeline-row.right .timeline-empty, .timeline-row.left .timeline-empty { display: none; }
        }
      `}</style>
    </section>
  );
}

function Milestone({ m, index }) {
  const isLeft = index % 2 === 0;
  return (
    <div className={`timeline-row ${isLeft ? 'left' : 'right'}`}>
      {isLeft ? (
        <>
          <div className="timeline-card" style={{ gridColumn: 1 }}>
            <CardContent m={m} alignRight />
          </div>
          <div className="timeline-year-badge"><span style={{ lineHeight: 1 }}>{m.year}</span></div>
          <div className="timeline-empty" style={{ gridColumn: 3 }} />
        </>
      ) : (
        <>
          <div className="timeline-empty" style={{ gridColumn: 1 }} />
          <div className="timeline-year-badge"><span style={{ lineHeight: 1 }}>{m.year}</span></div>
          <div className="timeline-card" style={{ gridColumn: 3 }}>
            <CardContent m={m} />
          </div>
        </>
      )}
    </div>
  );
}

function CardContent({ m, alignRight }) {
  return (
    <div style={{ textAlign: alignRight ? 'right' : 'left' }}>
      {m.tag && (
        <span style={{
          display: 'inline-block', padding: '3px 10px',
          background: 'var(--tag-blog-bg)', color: 'var(--tag-blog-fg)',
          borderRadius: 999, fontSize: 11, fontWeight: 600, letterSpacing: '.04em',
          textTransform: 'uppercase', fontFamily: 'var(--mono)', marginBottom: 10,
        }}>{m.tag}</span>
      )}
      {m.date && (
        <div style={{ fontSize: 12, color: 'var(--muted)', fontFamily: 'var(--mono)', marginBottom: 6 }}>
          {m.date}
        </div>
      )}
      <h3 style={{ fontSize: 20, marginBottom: 10, color: 'var(--ink)' }}>{m.title}</h3>
      <p style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--ink-2)' }}>{m.desc}</p>
    </div>
  );
}

window.Timeline = Timeline;