// Education timeline — vertical rail with glass nodes.

const EDU_KEYS = ["powerbi", "diplomado", "ingenieria", "tecnico"];

function TimelineNode({ item, index, total }) {
  const isLast = index === total - 1;
  const kindIcon = { course: "sparkles", diploma: "award", degree: "graduation-cap", technician: "cog" };
  const { t } = useT();
  const key = EDU_KEYS[index];
  const title = t(`edu.${key}.title`);
  const org = t(`edu.${key}.org`);
  const detail = t(`edu.${key}.detail`);
  const kindLabel = t(`edu.kind.${item.kind}`);
  return (
    <Reveal delay={index * 0.08}>
      <div className="relative grid grid-cols-[72px_1fr] md:grid-cols-[120px_1fr] gap-5 md:gap-8">
        {/* year column */}
        <div className="relative pt-2">
          <div className="serif text-[36px] md:text-[44px] leading-none tracking-[-0.02em]" style={{color:"var(--text)"}}>{item.year}</div>
          <div className="mono text-[10px] t-dim uppercase tracking-[0.18em] mt-2">{kindLabel}</div>
        </div>

        {/* rail + content */}
        <div className="relative pb-12">
          {/* rail */}
          <div className="absolute -left-5 md:-left-8 top-0 bottom-0 w-px" style={{background:"linear-gradient(180deg, var(--border-strong), var(--border))"}} />
          {/* node */}
          <div className="absolute -left-[27px] md:-left-[39px] top-3 w-3.5 h-3.5 rounded-full hairline flex items-center justify-center" style={{background:"var(--bg)"}}>
            <div className="w-2 h-2 rounded-full" style={{background:"var(--accent)", boxShadow:"0 0 0 4px rgba(34,224,161,0.12)"}} />
          </div>

          <Tilt className="rounded-2xl" max={3}>
            <div className="glass rounded-2xl p-6 md:p-7 relative overflow-hidden">
              <div className="flex items-start justify-between gap-4">
                <div>
                  <div className="flex items-center gap-2">
                    <Icon name={kindIcon[item.kind]} size={14} className="t-accent" />
                    <span className="mono text-[11px] t-mute">{org}</span>
                  </div>
                  <h3 className="serif text-[26px] md:text-[30px] leading-[1.15] tracking-[-0.01em] mt-2 pb-1" style={{textWrap:"balance"}}>
                    {title}
                  </h3>
                  <p className="t-mute text-[14px] leading-[1.65] mt-4 max-w-xl">{detail}</p>
                </div>
                <span className="mono text-[10px] t-dim whitespace-nowrap">#{String(index+1).padStart(2,"0")}</span>
              </div>
            </div>
          </Tilt>
        </div>
      </div>
    </Reveal>
  );
}

function Timeline() {
  const { t } = useT();
  return (
    <section id="edu" className="relative py-28 md:py-36 hairline-t">
      <div className="max-w-[1320px] mx-auto px-6 md:px-10">
        <Reveal>
          <SectionHeader
            label={t("edu.label")}
            title={<>{t("edu.title.a")} <em className="serif not-italic" style={{color:"var(--accent)"}}>{t("edu.title.em")}</em></>}
            kicker={t("edu.kicker")}
          />
        </Reveal>

        <div className="mt-16 max-w-[980px] mx-auto">
          {EDUCATION.map((e, i) => (
            <TimelineNode key={e.title} item={e} index={i} total={EDUCATION.length} />
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Timeline });