// CV download section — editorial card with metadata + download/preview.

const CV_URL = "cv/Ana-Garcia-CV.pdf";

function CVSection() {
  const { t } = useT();
  const [size, setSize] = React.useState(null);
  const [pages, setPages] = React.useState(null);

  React.useEffect(() => {
    // probe file size via HEAD
    fetch(CV_URL, { method: "HEAD" })
      .then((r) => {
        const cl = r.headers.get("content-length");
        if (cl) {
          const kb = parseInt(cl, 10) / 1024;
          setSize(kb > 1024 ? `${(kb/1024).toFixed(1)} MB` : `${Math.round(kb)} KB`);
        }
      })
      .catch(() => {});
    // best-effort page count via PDF trailer scan
    fetch(CV_URL)
      .then((r) => r.arrayBuffer())
      .then((buf) => {
        const text = new TextDecoder("latin1").decode(new Uint8Array(buf));
        const matches = text.match(/\/Type\s*\/Page[^s]/g);
        if (matches && matches.length > 0) setPages(matches.length);
      })
      .catch(() => {});
  }, []);

  return (
    <section id="cv" className="relative py-28 md:py-36 hairline-t overflow-hidden">
      <div className="absolute inset-0 pointer-events-none opacity-60"
           style={{background:"radial-gradient(900px 500px at 20% 0%, rgba(15,142,104,0.08), transparent 60%)"}} />
      <div className="relative max-w-[1320px] mx-auto px-6 md:px-10">
        <Reveal>
          <SectionHeader
            label={t("cv.label")}
            title={<>{t("cv.title.a")} <em className="serif not-italic" style={{color:"var(--accent)"}}>{t("cv.title.em")}</em></>}
            kicker={t("cv.kicker")}
          />
        </Reveal>

        <div className="mt-14 grid grid-cols-12 gap-6">
          {/* Preview mock — editorial document */}
          <Reveal className="col-span-12 lg:col-span-5" delay={0.05}>
            <Tilt className="rounded-2xl" max={4}>
              <a
                href={CV_URL}
                target="_blank"
                rel="noreferrer"
                className="block relative rounded-2xl hairline overflow-hidden group"
                style={{background:"var(--surface-0)", boxShadow:"0 30px 60px -30px rgba(14,21,19,0.22)"}}
                aria-label={t("cv.preview")}
              >
                {/* page */}
                <div className="relative aspect-[210/297] p-7 md:p-8 flex flex-col">
                  <div className="flex items-start justify-between">
                    <div>
                      <div className="mono text-[9px] t-dim uppercase tracking-[0.2em]">Curriculum Vitae · 2026</div>
                      <div className="serif text-[34px] leading-[1] tracking-[-0.02em] mt-3">Ana García</div>
                      <div className="mono text-[10px] t-mute mt-1">Data Analyst · BI · Automatización</div>
                    </div>
                    <div className="w-9 h-9 rounded-md flex items-center justify-center"
                         style={{background:"var(--accent-soft)", color:"var(--accent)", border:"1px solid var(--accent-line)"}}>
                      <span className="serif text-[18px]">ag</span>
                    </div>
                  </div>

                  <div className="mt-6 space-y-4 flex-1">
                    {["Resumen profesional", "Experiencia · retail", "Stack técnico", "Formación"].map((h, i) => (
                      <div key={h}>
                        <div className="mono text-[9px] t-dim uppercase tracking-[0.18em]">{String(i+1).padStart(2,"0")} · {h}</div>
                        <div className="mt-1.5 space-y-1">
                          <div className="h-[4px] rounded-sm" style={{background:"var(--border-strong)", width:"92%"}} />
                          <div className="h-[4px] rounded-sm" style={{background:"var(--border)",        width:"84%"}} />
                          <div className="h-[4px] rounded-sm" style={{background:"var(--border)",        width:"70%"}} />
                        </div>
                      </div>
                    ))}
                  </div>

                  <div className="mt-4 flex items-end justify-between hairline-t pt-3">
                    <div className="mono text-[9px] t-dim">anahrnandz96@gmail.com</div>
                    <div className="mono text-[9px] t-dim">p. 01</div>
                  </div>

                  {/* accent edge */}
                  <div className="absolute top-0 left-0 w-1.5 h-full" style={{background:"var(--accent)"}} />

                  {/* hover reveal chip */}
                  <div className="absolute bottom-5 right-5 chip opacity-0 translate-y-1 group-hover:opacity-100 group-hover:translate-y-0 transition"
                       style={{borderColor:"var(--accent-line)", background:"rgba(255,255,255,0.95)", color:"var(--accent)"}}>
                    <Icon name="external-link" size={11} /> {t("cv.preview")}
                  </div>
                </div>
              </a>
            </Tilt>
          </Reveal>

          {/* Download panel */}
          <Reveal className="col-span-12 lg:col-span-7" delay={0.1}>
            <div className="glass rounded-2xl p-6 md:p-8 h-full flex flex-col">
              <div className="flex items-start justify-between gap-4">
                <div className="flex items-center gap-3">
                  <div className="w-11 h-11 rounded-xl flex items-center justify-center"
                       style={{background:"var(--accent-soft)", color:"var(--accent)", border:"1px solid var(--accent-line)"}}>
                    <Icon name="file-text" size={20} strokeWidth={1.6} />
                  </div>
                  <div>
                    <div className="mono text-[11px] t-mute">{t("cv.filename")}</div>
                    <div className="serif text-[24px] md:text-[28px] leading-tight tracking-[-0.01em] mt-0.5">
                      Curriculum Vitae · Ana García
                    </div>
                  </div>
                </div>
                <span className="chip"><span className="dot" /> PDF</span>
              </div>

              {/* metadata grid */}
              <div className="mt-8 grid grid-cols-2 md:grid-cols-4 gap-0 hairline-t hairline-b">
                {[
                  { k: t("cv.meta.pages"),   v: pages ? String(pages) : "—" },
                  { k: t("cv.meta.lang"),    v: t("cv.meta.langValue") },
                  { k: t("cv.meta.updated"), v: t("cv.meta.updatedValue") },
                  { k: t("cv.meta.size"),    v: size || "—" },
                ].map((m, i) => (
                  <div key={m.k} className={`py-4 ${i !== 0 ? "md:pl-5 md:border-l" : ""} ${i >= 2 ? "pl-0" : ""}`}
                       style={{borderColor:"var(--border)"}}>
                    <div className="mono text-[10px] uppercase tracking-[0.14em] t-dim">{m.k}</div>
                    <div className="text-[15px] mt-1 text-[color:var(--text)] tabular-nums">{m.v}</div>
                  </div>
                ))}
              </div>

              <div className="mt-auto pt-8 flex flex-wrap items-center gap-3">
                <a
                  href={CV_URL}
                  download="Ana-Garcia-CV.pdf"
                  className="group inline-flex items-center gap-2.5 px-6 py-3.5 rounded-full text-[14px] font-medium"
                  style={{background:"var(--accent)", color:"#FFFFFF"}}
                >
                  <Icon name="download" size={16} strokeWidth={2} />
                  {t("cv.download")}
                </a>
                <a
                  href={CV_URL}
                  target="_blank"
                  rel="noreferrer"
                  className="inline-flex items-center gap-2 px-5 py-3.5 rounded-full text-[13px] hairline transition"
                  style={{background:"var(--surface-0)", color:"var(--text)"}}
                >
                  <Icon name="eye" size={14} /> {t("cv.preview")}
                </a>
                <span className="mono text-[10px] t-dim ml-1">{t("cv.previewNote")}</span>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { CVSection, CV_URL });