import { Eyebrow } from "../lib/primitives.jsx";

const CROSSED_TERMS = [
  "Databases", "Auth providers", "GitHub", "Hosting",
  "API keys", "Environment variables", "Deployment", "Backend code",
  "Servers", "DNS records", "SSL certificates", "CORS errors",
  "Webhooks", "Build pipelines", "package.json", "npm install",
];

export default function CrossedOut() {
  return (
    <section className="relative py-[clamp(70px,10vh,130px)]">
      <div className="wrap">
        <div className="text-center max-w-[760px] mx-auto mb-14">
          <Eyebrow>What you don't have to learn</Eyebrow>
          <h2 className="mt-[18px] font-medium text-[clamp(36px,4.8vw,64px)] tracking-[-0.025em] leading-[1.02] text-balance">
            All the stuff that made you give up last time.
          </h2>
          <p className="mt-[18px] text-fg-mute text-[17px]">Forget every word on this list.</p>
        </div>

        <div className="flex flex-wrap justify-center gap-x-3.5 gap-y-2.5 max-w-[880px] mx-auto">
          {CROSSED_TERMS.map((term, i) => (
            <Term key={term} term={term} delay={0.12 + i * 0.06} />
          ))}
        </div>

        <p className="mt-14 mx-auto max-w-[760px] text-center font-medium tracking-[-0.02em] leading-[1.18] text-balance text-[clamp(24px,3vw,36px)]">
          Your AI handles <span className="text-accent">all of it</span>.
          <span className="block w-12 h-px bg-hairline mx-auto my-7" />
          You just keep building.
        </p>
      </div>
    </section>
  );
}

function Term({ term, delay }) {
  return (
    <span className="relative overflow-hidden px-3.5 py-2 rounded-lg border border-hairline font-mono tracking-[0.005em] text-[clamp(15px,1.7vw,22px)] text-fg-mute"
      style={{ background: "oklch(0.20 0.009 60 / 0.45)" }}>
      <span
        className="inline-block opacity-100"
        style={{ animation: `fade-half 0.4s ease ${delay}s forwards` }}
      >{term}</span>
      <span
        aria-hidden="true"
        className="absolute left-2 right-2 top-1/2 h-0.5 rounded-sm opacity-0"
        style={{
          background: "var(--c-accent)",
          boxShadow: "0 0 12px var(--c-accent-glow)",
          animation: `strike 0.6s cubic-bezier(.7,.1,.3,1) ${delay}s forwards`,
        }}
      />
    </span>
  );
}
