// Bento grid of highlights — one feature tile + supporting tiles.

function tHighlight(t, item) {
  return {
    ...item,
    title: t(`hl.${item.id}.title`),
    body: t(`hl.${item.id}.body`),
    kpi: item.kpi ? { ...item.kpi, label: t(`hl.${item.id}.kpiLabel`) } : item.kpi,
  };
}

function TagRow({ tags }) {
  return (
    <div className="flex flex-wrap gap-1.5">
      {tags.map((t) => (
        <span key={t} className="mono text-[10px] px-2 py-1 rounded-md" style={{ background: "var(--surface-2)", color: "var(--text-mute)", border: "1px solid var(--border)" }}>
          {t}
        </span>
      ))}
    </div>
  );
}

function FeatureCard({ item }) {
  const R = window.Recharts;
  const { t } = useT();
  return (
    <Tilt className="rounded-2xl h-full" max={5}>
      <div className="glass rounded-2xl p-7 md:p-8 h-full flex flex-col relative overflow-hidden">
        {/* emerald corner */}
        <div className="absolute -top-24 -right-24 w-72 h-72 rounded-full pointer-events-none" style={{ background: "radial-gradient(closest-side, rgba(15,142,104,0.12), transparent)" }} />
        <div className="flex items-center justify-between relative">
          <div className="chip"><span className="dot" /> {t("tile.chip.case")}</div>
          <Icon name="arrow-up-right" size={16} className="t-mute" />
        </div>

        <div className="mt-6 relative">
          <div className="flex items-baseline gap-3">
            <span className="serif text-[84px] md:text-[112px] leading-none tracking-[-0.03em] tabular-nums" style={{ color: "var(--accent)", fontVariantNumeric: "tabular-nums" }}>
              <Counter to={item.kpi.value} duration={1.6} prefix={item.kpi.prefix} suffix={item.kpi.suffix} />
            </span>
          </div>
          <div className="mono text-[11px] uppercase tracking-[0.16em] t-mute mt-2">{item.kpi.label}</div>
        </div>

        <h3 className="serif text-[26px] md:text-[30px] leading-tight mt-10 tracking-[-0.01em]" style={{textWrap:"balance"}}>
          {item.title}
        </h3>
        <p className="t-mute text-[14.5px] leading-[1.65] mt-3 max-w-xl">{item.body}</p>

        <div className="mt-auto pt-6 flex items-end justify-between gap-6">
          <TagRow tags={item.tags} />
          {R && (
            <div className="flex flex-col items-end gap-1 shrink-0">
              <div className="mono text-[9.5px] t-dim uppercase tracking-wider">reclamos por categoría</div>
              <div className="w-[220px] h-[56px]">
                <R.ResponsiveContainer width="100%" height="100%">
                  <R.BarChart data={CLAIMS_BREAKDOWN} margin={{ top: 4, right: 4, left: 4, bottom: 0 }}>
                    <R.XAxis dataKey="cat" tick={{ fontSize: 8, fill: "var(--text-dim)", fontFamily: "Geist Mono" }} axisLine={false} tickLine={false} interval={0} />
                    <R.Bar dataKey="value" fill="var(--accent)" radius={[3, 3, 0, 0]} isAnimationActive={true} animationDuration={1000} animationEasing="ease-out" />
                  </R.BarChart>
                </R.ResponsiveContainer>
              </div>
              <div className="mono text-[9.5px] t-mute">total 25K+ / mes</div>
            </div>
          )}
        </div>
      </div>
    </Tilt>
  );
}

function KpiCard({ item }) {
  const { t } = useT();
  return (
    <Tilt className="rounded-2xl h-full" max={6}>
      <div className="glass rounded-2xl p-6 h-full flex flex-col relative overflow-hidden">
        <div className="flex items-start justify-between">
          <div className="chip"><Icon name="zap" size={11} /> {t("tile.chip.auto")}</div>
          <Icon name="clock" size={16} className="t-mute" />
        </div>

        <div className="mt-6">
          <div className="flex items-baseline gap-2">
            <span className="serif text-[72px] leading-none tracking-[-0.03em] tabular-nums" style={{ color: "var(--text)", fontVariantNumeric: "tabular-nums" }}>
              <Counter to={item.kpi.value} duration={1.4} prefix={item.kpi.prefix} suffix={item.kpi.suffix} />
            </span>
          </div>
          <div className="mono text-[11px] uppercase tracking-[0.16em] t-mute mt-2">{item.kpi.label}</div>
        </div>

        <h3 className="serif text-[22px] leading-tight mt-8 tracking-[-0.01em]">{item.title}</h3>
        <p className="t-mute text-[13.5px] leading-[1.6] mt-2">{item.body}</p>

        <div className="mt-auto pt-5"><TagRow tags={item.tags} /></div>
      </div>
    </Tilt>
  );
}

function EtlCard({ item }) {
  // tech-oriented card with a small pipeline diagram
  const nodes = ["SQL Server", "Backstore", "Jarvis"];
  const { t } = useT();
  return (
    <Tilt className="rounded-2xl h-full" max={5}>
      <div className="glass rounded-2xl p-6 h-full flex flex-col relative overflow-hidden">
        <div className="flex items-start justify-between">
          <div className="chip"><Icon name="git-branch" size={11} /> {t("tile.chip.etl")}</div>
          <span className="mono text-[10px] t-dim">{t("tile.etl.pipeline")}</span>
        </div>

        <h3 className="serif text-[22px] leading-tight mt-6 tracking-[-0.01em]">{item.title.split("·")[0].trim()}</h3>
        <div className="mono text-[11px] t-mute mt-1">SQL Server · Backstore · Jarvis</div>

        {/* pipeline */}
        <div className="mt-6 hairline rounded-xl p-4" style={{background:"var(--surface-1)"}}>
          <div className="flex items-center justify-between gap-2">
            {nodes.map((n, i) => (
              <React.Fragment key={n}>
                <div className="flex flex-col items-center gap-1.5 flex-1">
                  <div className="w-9 h-9 rounded-md hairline flex items-center justify-center" style={{background:"var(--surface-1)"}}>
                    <Icon name={["database","server","box"][i]} size={14} className="t-accent" />
                  </div>
                  <span className="mono text-[10px] t-mute text-center">{n}</span>
                </div>
                {i < nodes.length - 1 && (
                  <div className="flex-1 relative h-[1px] mt-[-14px]">
                    <div className="absolute inset-0" style={{background:"linear-gradient(90deg, transparent, var(--accent-line), transparent)"}} />
                  </div>
                )}
              </React.Fragment>
            ))}
          </div>
        </div>

        <p className="t-mute text-[13.5px] leading-[1.6] mt-4">{item.body}</p>
        <div className="mt-auto pt-5"><TagRow tags={item.tags} /></div>
      </div>
    </Tilt>
  );
}

function SmallCard({ item }) {
  const { t } = useT();
  return (
    <Tilt className="rounded-2xl h-full" max={6}>
      <div className="glass rounded-2xl p-6 h-full flex flex-col relative overflow-hidden">
        <div className="flex items-start justify-between">
          <div className="chip"><Icon name="check-circle-2" size={11} /> {t("tile.chip.reporting")}</div>
          <Icon name="trending-down" size={16} className="t-accent" />
        </div>

        <div className="mt-5">
          <div className="flex items-baseline gap-2">
            <span className="serif text-[56px] leading-none tracking-[-0.02em] tabular-nums" style={{color:"var(--text)", fontVariantNumeric:"tabular-nums"}}>
              <Counter to={item.kpi.value} duration={1.4} prefix={item.kpi.prefix} suffix={item.kpi.suffix} />
            </span>
          </div>
          <div className="mono text-[11px] uppercase tracking-[0.16em] t-mute mt-2">{item.kpi.label}</div>
        </div>

        <h3 className="serif text-[20px] leading-tight mt-6 tracking-[-0.01em]">{item.title}</h3>
        <p className="t-mute text-[13px] leading-[1.55] mt-2">{item.body}</p>

        <div className="mt-auto pt-5"><TagRow tags={item.tags} /></div>
      </div>
    </Tilt>
  );
}

function Bento() {
  const { t } = useT();
  const feat = tHighlight(t, HIGHLIGHTS.find(h => h.id === "reclamos"));
  const auto = tHighlight(t, HIGHLIGHTS.find(h => h.id === "automatizacion"));
  const etl = tHighlight(t, HIGHLIGHTS.find(h => h.id === "etl"));
  const std = tHighlight(t, HIGHLIGHTS.find(h => h.id === "standardization"));

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

        <div className="mt-14 grid grid-cols-12 gap-5 md:gap-6">
          <Reveal className="col-span-12 lg:col-span-7 min-h-[560px]" delay={0.05}>
            <FeatureCard item={feat} />
          </Reveal>
          <Reveal className="col-span-12 md:col-span-6 lg:col-span-5 min-h-[380px]" delay={0.1}>
            <KpiCard item={auto} />
          </Reveal>

          <Reveal className="col-span-12 md:col-span-7 lg:col-span-7 min-h-[320px]" delay={0.12}>
            <EtlCard item={etl} />
          </Reveal>
          <Reveal className="col-span-12 md:col-span-5 lg:col-span-5 min-h-[320px]" delay={0.18}>
            <SmallCard item={std} />
          </Reveal>
        </div>

        {/* footnote row */}
        <Reveal className="mt-10" delay={0.1}>
          <div className="flex flex-wrap items-center justify-between gap-4 hairline-t pt-6">
            <div className="mono text-[11px] t-dim uppercase tracking-[0.18em]">{t("work.footnote")}</div>
            <div className="flex items-center gap-4 mono text-[11px] t-mute">
              <span><span className="t-accent">●</span> {t("work.verified")}</span>
              <span>·</span>
              <span>{t("work.period")}</span>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Bento });