import {
  IconArrowRight,
  IconBolt,
  IconChartBar,
  IconClock,
  IconRocket,
  IconUser,
} from "@tabler/icons-react";
import { getTranslations } from "next-intl/server";
import { Link } from "@/i18n/navigation";

export async function AboutSection() {
  const t = await getTranslations("about");

  const results = [
    {
      title: t("result1Title"),
      desc: t("result1Desc"),
      icon: IconBolt,
    },
    {
      title: t("result2Title"),
      desc: t("result2Desc"),
      icon: IconRocket,
    },
    {
      title: t("result3Title"),
      desc: t("result3Desc"),
      icon: IconChartBar,
    },
    {
      title: t("result4Title"),
      desc: t("result4Desc"),
      icon: IconClock,
    },
  ];

  return (
    <div className="min-h-screen">
      {/* Hero / Thesis */}
      <section className="py-16 sm:py-24 md:py-32">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="mx-auto max-w-3xl text-center">
            <span className="mb-6 inline-block rounded-full bg-[#fd105e]/10 px-4 py-1.5 font-semibold text-[#fd105e] text-sm">
              {t("badge")}
            </span>
            <h1 className="mb-6 font-bold text-3xl text-white tracking-tight sm:text-4xl md:text-5xl">
              {t("thesisTitle")}
            </h1>
            <blockquote className="mb-8 border-[#fd105e] border-l-4 pl-6 text-lg text-neutral-200 italic sm:text-xl md:text-2xl">
              {t("thesis")}
            </blockquote>
          </div>
        </div>
      </section>

      {/* Intro */}
      <section className="py-16 sm:py-24">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="mx-auto max-w-3xl">
            <h2 className="mb-6 font-bold text-2xl text-white sm:text-3xl">
              {t("introTitle")}
            </h2>
            <p className="text-lg text-neutral-300 leading-relaxed">
              {t("intro")}
            </p>
          </div>
        </div>
      </section>

      {/* Methodology */}
      <section className="py-16 sm:py-24">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="mx-auto max-w-3xl text-center">
            <span className="mb-4 inline-block rounded-full bg-[#fd105e]/10 px-4 py-1.5 font-semibold text-[#fd105e] text-sm">
              {t("methodSubtitle")}
            </span>
            <h2 className="mb-6 font-bold text-2xl text-white sm:text-3xl md:text-4xl">
              {t("methodTitle")}
            </h2>
            <p className="mb-12 text-lg text-neutral-300">{t("methodDesc")}</p>
          </div>

          <div className="mx-auto grid max-w-5xl gap-6 md:grid-cols-2">
            {/* Pillar 1 */}
            <div className="rounded-2xl border border-white/10 bg-white/5 p-8 backdrop-blur-sm">
              <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-[#fd105e]/10">
                <IconBolt className="text-[#fd105e]" size={24} stroke={1.5} />
              </div>
              <h3 className="mb-3 font-bold text-white text-xl">
                {t("pillar1Title")}
              </h3>
              <p className="text-neutral-300">{t("pillar1Desc")}</p>
            </div>

            {/* Pillar 2 */}
            <div className="rounded-2xl border border-white/10 bg-white/5 p-8 backdrop-blur-sm">
              <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-[#fd105e]/10">
                <IconChartBar
                  className="text-[#fd105e]"
                  size={24}
                  stroke={1.5}
                />
              </div>
              <h3 className="mb-3 font-bold text-white text-xl">
                {t("pillar2Title")}
              </h3>
              <p className="text-neutral-300">{t("pillar2Desc")}</p>
            </div>
          </div>
        </div>
      </section>

      {/* Results */}
      <section className="py-16 sm:py-24">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <h2 className="mb-12 text-center font-bold text-2xl text-white sm:text-3xl">
            {t("resultsTitle")}
          </h2>
          <div className="mx-auto grid max-w-4xl grid-cols-2 gap-6 md:grid-cols-4">
            {results.map((result) => (
              <div className="text-center" key={result.title}>
                <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-xl bg-[#fd105e]/10">
                  <result.icon
                    className="text-[#fd105e]"
                    size={24}
                    stroke={1.5}
                  />
                </div>
                <p className="font-bold text-2xl text-white sm:text-3xl">
                  {result.title}
                </p>
                <p className="mt-1 text-neutral-400 text-sm">{result.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Founder */}
      <section className="py-16 sm:py-24">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="mx-auto max-w-3xl">
            <div className="rounded-2xl border border-white/10 bg-white/5 p-8 backdrop-blur-sm md:p-12">
              <div className="flex items-start gap-6">
                <div className="flex h-16 w-16 shrink-0 items-center justify-center rounded-full bg-[#fd105e]/10">
                  <IconUser className="text-[#fd105e]" size={32} stroke={1.5} />
                </div>
                <div>
                  <p className="mb-1 font-semibold text-[#fd105e] text-sm uppercase tracking-wider">
                    {t("founderTitle")}
                  </p>
                  <h2 className="mb-1 font-bold text-2xl text-white">
                    {t("founderName")}
                  </h2>
                  <p className="mb-4 text-neutral-400">{t("founderRole")}</p>
                  <p className="text-neutral-300">{t("founderBio")}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-16 sm:py-24">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="mx-auto max-w-3xl text-center">
            <h2 className="mb-4 font-bold text-2xl text-white sm:text-3xl">
              {t("ctaTitle")}
            </h2>
            <p className="mb-8 text-lg text-neutral-300">{t("ctaDesc")}</p>
            <Link
              className="inline-flex items-center gap-2 rounded-full bg-[#fd105e] px-8 py-3 font-semibold text-white transition-all duration-200 hover:bg-[#fd105e]/90"
              href="/contact"
            >
              {t("ctaButton")}
              <IconArrowRight size={20} stroke={2} />
            </Link>
          </div>
        </div>
      </section>
    </div>
  );
}