import { useLang } from '../context/LangContext'
import { linkify } from '../lib/glossary'

function Section({ title, items }: { title: string; items: string[] }) {
  return (
    <div>
      <h2 className="text-xl font-semibold text-slate-200 mb-4 pb-2 border-b border-slate-800">
        {title}
      </h2>
      <ul className="space-y-2">
        {items.map((item) => (
          <li key={item} className="flex items-start gap-2 text-sm text-slate-400 leading-relaxed">
            <span className="mt-1 h-1.5 w-1.5 shrink-0 rounded-full bg-sky-500" />
            {linkify(item)}
          </li>
        ))}
      </ul>
    </div>
  )
}

export default function Features() {
  const { t } = useLang()

  return (
    <div className="py-16 md:py-24">
      <div className="max-w-7xl mx-auto px-6">
        <div className="mb-16">
          <h1 className="text-4xl md:text-5xl font-bold text-slate-100 mb-4">{t.features.heading}</h1>
          <p className="text-base text-slate-400 leading-relaxed max-w-xl">{t.features.sub}</p>
        </div>
        <div className="grid md:grid-cols-2 gap-12">
          {t.features.sections.map((s) => (
            <Section key={s.title} title={s.title} items={s.items} />
          ))}
        </div>
      </div>
    </div>
  )
}