import { landingDict } from "@/features/landing/dict";

const featureIcons = [
  (
    <svg aria-hidden="true" className="size-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.75}>
      <path d="M9 11 11 13 15 9" />
      <rect x="4" y="4" width="16" height="16" rx="3" />
    </svg>
  ),
  (
    <svg aria-hidden="true" className="size-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.75}>
      <path d="M7 4h10a2 2 0 0 1 2 2v14l-7-3.5L5 20V6a2 2 0 0 1 2-2Z" />
    </svg>
  ),
  (
    <svg aria-hidden="true" className="size-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.75}>
      <circle cx="12" cy="12" r="8" />
      <circle cx="12" cy="12" r="4" />
      <path d="M12 2v2M12 20v2M2 12h2M20 12h2" />
    </svg>
  ),
  (
    <svg aria-hidden="true" className="size-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.75}>
      <rect x="3" y="4" width="18" height="16" rx="3" />
      <path d="M7 9h10M7 13h6" />
    </svg>
  ),
];

export function LandingFeatures() {
  return (
    <section id="features" className="px-4 py-16 sm:px-6 sm:py-20">
      <div className="mx-auto max-w-6xl">
        <div className="mx-auto max-w-2xl text-center">
          <h2 className="text-2xl font-bold text-foreground sm:text-3xl">
            {landingDict.features.title}
          </h2>
          <p className="mt-3 text-sm leading-7 text-muted-foreground sm:text-base">
            {landingDict.features.subtitle}
          </p>
        </div>

        <div className="mt-10 grid gap-4 sm:grid-cols-2">
          {landingDict.features.items.map((feature, index) => (
            <article
              key={feature.title}
              className="rounded-3xl bg-card p-6 shadow-soft-sm transition-transform hover:-translate-y-0.5"
            >
              <span className="inline-flex size-12 items-center justify-center rounded-2xl bg-primary/15 text-primary">
                {featureIcons[index]}
              </span>
              <h3 className="mt-4 text-lg font-bold text-card-foreground">{feature.title}</h3>
              <p className="mt-2 text-sm leading-7 text-muted-foreground">{feature.description}</p>
              <p className="mt-3 text-xs text-info">{feature.keywords}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}