// Pipeline — arquitectura visual del flujo ETL VOA · Sodimac Chile

function FlowLine({ vertical = false }) {
  return (
    <div
      className={`relative overflow-hidden rounded-full flex-shrink-0 ${vertical ? "w-[2px] h-10 mx-auto" : "h-[2px] flex-1 min-w-[32px]"}`}
      style={{ background: "var(--accent-line)" }}
    >
      <div
        className="absolute rounded-full"
        style={{
          ...(vertical
            ? { width: "100%", height: "60%", top: "-60%", left: 0 }
            : { height: "100%", width: "60%", top: 0, left: "-60%" }),
          background: `linear-gradient(${vertical ? "180deg" : "90deg"}, transparent, var(--accent), transparent)`,
          animation: `${vertical ? "pipeFlowV" : "pipeFlowH"} 1.8s linear infinite`,
        }}
      />
    </div>
  );
}

function SourceCard({ icon, label, note, delay, x }) {
  return (
    <Reveal x={x} y={0} delay={delay}>
      <div
        className="glass rounded-xl px-4 py-3 flex items-center gap-3"
        style={{ minWidth: 176 }}
      >
        <div
          className="w-8 h-8 rounded-lg flex items-center justify-center shrink-0"
          style={{ background: "var(--accent-soft)", border: "1px solid var(--accent-line)" }}
        >
          <Icon name={icon} size={14} className="t-accent" />
        </div>
        <div className="min-w-0">
          <div className="text-[13px]" style={{ fontWeight: 700, color: "var(--text)" }}>{label}</div>
          <div className="mono text-[10px] t-dim truncate">{note}</div>
        </div>
      </div>
    </Reveal>
  );
}

function ProcessBox({ lang }) {
  const tags = ["delta incremental", "dedup", "77 tiendas", "SSE logs"];
  return (
    <Reveal y={30} delay={0.18}>
      <div
        className="card-purple rounded-2xl p-6 md:p-8 flex flex-col items-center text-center shrink-0"
        style={{ width: 210 }}
      >
        <div
          className="w-16 h-16 rounded-2xl flex items-center justify-center"
          style={{ background: "var(--accent-soft)", border: "1px solid var(--accent-line)" }}
        >
          <Icon name="cpu" size={30} className="t-accent" strokeWidth={1.5} />
        </div>
        <div className="serif text-[22px] mt-4 leading-tight">Python ETL</div>
        <div className="mono text-[10px] t-mute mt-1">pandas · openpyxl · Flask</div>
        <div className="mt-4 flex flex-wrap gap-1.5 justify-center">
          {tags.map(t => (
            <span
              key={t}
              className="mono text-[9px] px-2 py-0.5 rounded-md"
              style={{ background: "var(--accent-soft)", color: "var(--accent)", border: "1px solid var(--accent-line)" }}
            >
              {t}
            </span>
          ))}
        </div>
      </div>
    </Reveal>
  );
}

function Pipeline() {
  const { lang } = useT();

  const sources = lang === "es"
    ? [
        { icon: "database",         label: "Qlik",       note: "Transacciones ERP" },
        { icon: "video",            label: "Videsk",      note: "Videollamadas + filas" },
        { icon: "phone",            label: "Genesys",     note: "Fonocompra IVR" },
        { icon: "message-square",   label: "Lynn",        note: "WhatsApp clientes" },
        { icon: "table-2",          label: "G. Sheets",  note: "Formularios ejecutivos" },
      ]
    : [
        { icon: "database",         label: "Qlik",       note: "ERP transactions" },
        { icon: "video",            label: "Videsk",      note: "Video calls + queues" },
        { icon: "phone",            label: "Genesys",     note: "Phone sales IVR" },
        { icon: "message-square",   label: "Lynn",        note: "WhatsApp customers" },
        { icon: "table-2",          label: "G. Sheets",  note: "Executive forms" },
      ];

  const outputs = lang === "es"
    ? [
        { icon: "bar-chart-2",        label: "Looker Studio", note: "Dashboard VOA en producción" },
        { icon: "layout-dashboard",   label: "Power BI",      note: "Reporting BI Sodimac" },
      ]
    : [
        { icon: "bar-chart-2",        label: "Looker Studio", note: "VOA Dashboard in production" },
        { icon: "layout-dashboard",   label: "Power BI",      note: "Sodimac BI Reporting" },
      ];

  const stats = lang === "es"
    ? [
        { v: "5",     l: "fuentes integradas" },
        { v: "+118K", l: "registros históricos" },
        { v: "28 MB", l: "archivo maestro" },
        { v: "0",     l: "pérdida de datos" },
      ]
    : [
        { v: "5",     l: "integrated sources" },
        { v: "+118K", l: "historical records" },
        { v: "28 MB", l: "master file" },
        { v: "0",     l: "data loss" },
      ];

  return (
    <section id="pipeline" className="relative py-24 md:py-32 hairline-t"
             style={{ background: "linear-gradient(180deg, var(--surface-1), var(--bg) 70%)" }}>
      <div className="max-w-[1320px] mx-auto px-6 md:px-10">

        {/* Header */}
        <Reveal>
          <div className="sec-label">
            <span className="sec-dash" />
            <span>{lang === "es" ? "Arquitectura · Pipeline VOA" : "Architecture · VOA Pipeline"}</span>
          </div>
        </Reveal>
        <Reveal delay={0.05}>
          <h2 className="serif mt-5 text-[44px] md:text-[56px] leading-[1.05] tracking-[-0.01em]" style={{ textWrap: "balance" }}>
            {lang === "es"
              ? <>El pipeline que <em className="not-italic" style={{ color: "var(--accent)" }}>construí desde cero.</em></>
              : <>The pipeline I <em className="not-italic" style={{ color: "var(--accent)" }}>built from scratch.</em></>}
          </h2>
          <p className="mt-4 max-w-xl text-[15px] leading-relaxed t-mute">
            {lang === "es"
              ? "5 fuentes heterogéneas integradas en un solo sistema automatizado. Diseño, ETL, app web y dashboards BI — todo desde cero."
              : "5 heterogeneous sources unified into a single automated system. Design, ETL, web app, and BI dashboards — all from scratch."}
          </p>
          <div className="accent-rule w-full mt-6" />
        </Reveal>

        {/* ── Desktop: horizontal ── */}
        <div className="hidden md:flex items-center gap-3 mt-16">
          {/* Sources column */}
          <div className="flex flex-col gap-2.5 shrink-0">
            <div className="mono text-[10px] uppercase tracking-[0.18em] t-dim mb-1">
              {lang === "es" ? "Fuentes" : "Sources"}
            </div>
            {sources.map((s, i) => (
              <SourceCard key={s.label} {...s} x={-60} delay={i * 0.07} />
            ))}
          </div>

          {/* Line 1 */}
          <div className="flex flex-col items-center gap-1.5 flex-1 min-w-0">
            <FlowLine />
            <span className="mono text-[9px] t-dim uppercase tracking-wider">ETL</span>
          </div>

          {/* Process box */}
          <ProcessBox lang={lang} />

          {/* Line 2 */}
          <div className="flex flex-col items-center gap-1.5 flex-1 min-w-0">
            <FlowLine />
            <span className="mono text-[9px] t-dim uppercase tracking-wider">Output</span>
          </div>

          {/* Outputs column */}
          <div className="flex flex-col gap-2.5 shrink-0">
            <div className="mono text-[10px] uppercase tracking-[0.18em] t-dim mb-1">Dashboards</div>
            {outputs.map((o, i) => (
              <SourceCard key={o.label} {...o} x={60} delay={0.22 + i * 0.07} />
            ))}
          </div>
        </div>

        {/* ── Mobile: vertical ── */}
        <div className="flex md:hidden flex-col items-center gap-3 mt-12">
          <div className="w-full">
            <div className="mono text-[10px] uppercase tracking-[0.18em] t-dim mb-3">
              {lang === "es" ? "Fuentes" : "Sources"}
            </div>
            <div className="grid grid-cols-2 gap-2">
              {sources.map((s, i) => (
                <SourceCard key={s.label} {...s} x={i % 2 === 0 ? -40 : 40} delay={i * 0.06} />
              ))}
            </div>
          </div>
          <FlowLine vertical />
          <Reveal y={20} delay={0.1} className="w-full">
            <div className="card-purple rounded-2xl p-5 text-center">
              <div className="serif text-[22px]">Python ETL</div>
              <div className="mono text-[10px] t-mute mt-1">pandas · openpyxl · Flask · SSE</div>
            </div>
          </Reveal>
          <FlowLine vertical />
          <div className="w-full">
            <div className="mono text-[10px] uppercase tracking-[0.18em] t-dim mb-3">Dashboards</div>
            <div className="grid grid-cols-2 gap-2">
              {outputs.map((o, i) => (
                <SourceCard key={o.label} {...o} x={i % 2 === 0 ? -40 : 40} delay={0.15 + i * 0.06} />
              ))}
            </div>
          </div>
        </div>

        {/* Bottom stats strip */}
        <Reveal delay={0.25} className="mt-12">
          <div className="flex flex-wrap gap-3">
            {stats.map(s => (
              <div key={s.v} className="flex items-center gap-2.5 px-4 py-2.5 rounded-xl hairline">
                <span className="serif text-[20px]" style={{ color: "var(--accent)" }}>{s.v}</span>
                <span className="text-[13px] t-mute" style={{ fontWeight: 600 }}>{s.l}</span>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Pipeline });