"use client";

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

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

        <div className="grid gap-6 lg:grid-cols-2">
          <div className="card border-brand-500/20 bg-brand-50 dark:border-brand-500/20 dark:bg-brand-500/[0.04]">
            <div className="flex items-center gap-2">
              <span className="flex h-9 w-9 items-center justify-center rounded-xl bg-brand-gradient text-sm font-bold text-white">
                IP
              </span>
              <h3 className="text-lg font-semibold text-slate-900 dark:text-white">
                {t.architecture.identityTitle}
              </h3>
            </div>
            <p className="mt-3 text-sm leading-relaxed text-slate-600 dark:text-slate-400">
              MyAccount Hamsoo
            </p>
          </div>

          <div className="card border-slate-200 dark:border-white/10">
            <div className="flex items-center gap-2">
              <span className="flex h-9 w-9 items-center justify-center rounded-xl bg-slate-100 text-sm font-bold text-slate-700 dark:bg-white/10 dark:text-white">
                ◆
              </span>
              <h3 className="text-lg font-semibold text-slate-900 dark:text-white">
                {t.architecture.productTitle}
              </h3>
            </div>
            <p className="mt-3 text-sm leading-relaxed text-slate-600 dark:text-slate-400">
              Bermooda · Hamsoo · Future Apps
            </p>
          </div>
        </div>

        <div className="mt-6 overflow-x-auto rounded-2xl border border-slate-200 bg-white dark:border-white/10">
          <table className="w-full min-w-[32rem] border-collapse text-sm">
            <thead>
              <tr className="border-b border-slate-200 bg-slate-50 text-start dark:border-white/10 dark:bg-white/[0.02]">
                <th className="px-5 py-3 text-start font-medium text-slate-600 dark:text-slate-400">
                  {t.architecture.tableHead.data}
                </th>
                <th className="px-5 py-3 text-start font-medium text-slate-600 dark:text-slate-400">
                  {t.architecture.tableHead.owner}
                </th>
              </tr>
            </thead>
            <tbody>
              {t.architecture.rows.map((r, i) => (
                <tr
                  key={i}
                  className="border-b border-slate-200 last:border-0 dark:border-white/5"
                >
                  <td className="px-5 py-3 text-slate-800 dark:text-slate-200">{r.data}</td>
                  <td className="px-5 py-3">
                    <span
                      className={
                        "rounded-full px-2.5 py-0.5 text-xs font-medium " +
                        (r.owner === "Identity"
                          ? "bg-brand-500/15 text-brand-700 dark:text-brand-200"
                          : "bg-slate-100 text-slate-600 dark:bg-white/10 dark:text-slate-300")
                      }
                    >
                      {r.owner}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </Section>
  );
}