"use client";

import { useReveal } from "@/hooks/use-reveal";
import { useT } from "@/components/locale-provider";

export function EditorialSection() {
  const ref = useReveal<HTMLElement>();
  const t = useT();
  return (
    <section ref={ref} className="dark grain-overlay relative overflow-hidden border-b border-[#262626] bg-[#0a0a0a] text-[#fafafa]">
      {/* Oversized faint numeral — graphic texture */}
      <span
        aria-hidden
        className="reveal-fade pointer-events-none absolute -right-4 -top-10 select-none font-mono text-[clamp(8rem,22vw,18rem)] font-medium leading-none tracking-[-0.05em] text-[#171717]"
      >
        00
      </span>

      <div className="relative mx-auto flex min-h-[64vh] max-w-[80rem] flex-col justify-center px-6 py-32">
        {/* Hairline + section index */}
        <div className="reveal-left flex items-center gap-4">
          <span className="font-mono text-[11px] uppercase tracking-[0.18em] text-[#737373]">{t({ en: "Manifesto", sv: "Manifest" })}</span>
          <span className="h-px flex-1 bg-[#262626]" />
        </div>

        <blockquote className="reveal mt-16 max-w-5xl text-[clamp(2.5rem,6vw,5.5rem)] font-medium leading-[0.98] tracking-[-0.03em]">
          {t({ en: "Data you can", sv: "Data du kan" })}{" "}
          <span className="relative whitespace-nowrap">
            {t({ en: "stand behind", sv: "stå för" })}
            <span className="absolute -bottom-1 left-0 h-0.5 w-full" style={{ backgroundColor: "var(--accent-red)" }} />
          </span>
          .
          <br />
          <span className="text-[#737373]">{t({ en: "Not just look right.", sv: "Inte se rätt ut." })}</span>
        </blockquote>

        <p className="reveal delay-2 mt-20 font-mono text-[11px] uppercase tracking-[0.16em] text-[#a3a3a3]">
          0PT — SIAX Technology AB
        </p>
      </div>
    </section>
  );
}