"use client";

import { useLanguage } from "@/components/language-provider";
import { Section, SectionHeading } from "@/components/ui/section";
import { PRODUCTS } from "@/lib/content";

export function Ecosystem() {
  const { t, lang } = useLanguage();
  return (
    <Section id="ecosystem" className="bg-slate-50 dark:bg-ink-soft/40">
      <div className="container-x">
        <SectionHeading
          eyebrow={t.ecosystem.eyebrow}
          title={t.ecosystem.title}
          subtitle={t.ecosystem.subtitle}
        />

        <div className="relative mx-auto max-w-4xl rounded-3xl border border-slate-200 bg-white p-8 shadow-sm dark:border-white/10 dark:bg-white/[0.02] sm:p-12">
          <div className="grid gap-6 sm:grid-cols-3">
            {PRODUCTS.map((p) => (
              <div
                key={p.key}
                className="relative flex flex-col items-center rounded-2xl border border-slate-200 bg-slate-50 p-6 text-center dark:border-white/10 dark:bg-ink/40"
              >
                <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-brand-gradient text-lg font-bold text-white">
                  {p.name.charAt(0)}
                </div>
                <div className="mt-4 text-base font-semibold text-slate-900 dark:text-white">{p.name}</div>
                <div className="mt-1 text-xs text-slate-600 dark:text-slate-400">{p.category[lang]}</div>
                <p className="mt-3 text-sm leading-relaxed text-slate-600 dark:text-slate-400">
                  {p.tagline[lang]}
                </p>
                <span
                  className={
                    "mt-4 rounded-full px-3 py-1 text-[11px] font-medium " +
                    (p.status === "connected"
                      ? "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300"
                      : "bg-slate-100 text-slate-600 dark:bg-white/10 dark:text-slate-400")
                  }
                >
                  {p.status === "connected"
                    ? lang === "fa"
                      ? "متصل شده"
                      : "Connected"
                    : lang === "fa"
                      ? "آینده"
                      : "Future"}
                </span>
              </div>
            ))}
          </div>

          <div className="mt-8 flex items-center justify-center gap-3 text-sm text-slate-600 dark:text-slate-400">
            <span className="flex h-8 w-8 items-center justify-center rounded-full bg-brand-500/10 text-brand-600 dark:bg-brand-500/20 dark:text-brand-200">
              +
            </span>
            {t.ecosystem.futureNote}
          </div>

          <div className="pointer-events-none absolute -top-3 right-1/2 translate-x-1/2">
            <span className="rounded-full bg-brand-gradient px-4 py-1 text-xs font-semibold text-white shadow-lg shadow-brand-900/40">
              {t.ecosystem.hubLabel}
            </span>
          </div>
        </div>
      </div>
    </Section>
  );
}