"use client";

import { ChevronDownIcon } from "@heroicons/react/16/solid";
import { useTranslations } from "next-intl";
import { useState } from "react";

const personaIds = ["ecommerce", "saas", "marketing"] as const;

const painPointCounts: Record<(typeof personaIds)[number], number> = {
  ecommerce: 4,
  saas: 3,
  marketing: 3,
};

export function CroConversionCeiling() {
  const [activeTab, setActiveTab] =
    useState<(typeof personaIds)[number]>("ecommerce");
  const t = useTranslations("croConversionCeiling");

  const tabs = personaIds.map((id) => ({
    id,
    name: t(`${id}Name`),
    headline: t(`${id}Headline`),
    description: t(`${id}Desc`),
    painPoints: Array.from({ length: painPointCounts[id] }, (_, i) => ({
      problem: t(`${id}Pain${i + 1}Problem`),
      solution: t(`${id}Pain${i + 1}Solution`),
    })),
  }));

  const currentPersona = tabs.find((tab) => tab.id === activeTab);

  return (
    <section className="py-12 sm:py-24 md:py-32" id="conversion-ceiling">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        {/* Section Header */}
        <div className="mb-8 text-center md:mb-16">
          <h2 className="mb-4 font-bold text-2xl text-white sm:text-3xl md:mb-6 md:text-5xl">
            {t("title")}{" "}
            <span className="text-[#FD105E]">{t("titleHighlight")}</span>
          </h2>
          <p className="mx-auto max-w-4xl text-base text-white/70 md:text-lg">
            {t("subtitle")}
          </p>
        </div>

        {/* Tab Navigation */}
        <div className="mb-8 md:mb-12">
          {/* Mobile Dropdown */}
          <div className="grid grid-cols-1 sm:hidden">
            <select
              aria-label={t("selectRole")}
              className="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white/5 py-3 pr-8 pl-4 text-base text-white outline-1 outline-white/10 -outline-offset-1 focus:outline-2 focus:outline-[#FD105E] focus:-outline-offset-2"
              onChange={(e) =>
                setActiveTab(e.target.value as (typeof personaIds)[number])
              }
              value={activeTab}
            >
              {tabs.map((tab) => (
                <option key={tab.id} value={tab.id}>
                  {tab.name}
                </option>
              ))}
            </select>
            <ChevronDownIcon
              aria-hidden="true"
              className="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end fill-white/50"
            />
          </div>

          {/* Desktop Tabs */}
          <div className="hidden sm:block">
            <div className="border-white/10 border-b">
              <nav aria-label="Tabs" className="-mb-px flex">
                {tabs.map((tab) => (
                  <button
                    aria-current={activeTab === tab.id ? "page" : undefined}
                    className={`w-1/3 border-b-2 px-4 py-4 text-center font-medium text-sm transition-colors md:text-base ${
                      activeTab === tab.id
                        ? "border-[#FD105E] text-[#FD105E]"
                        : "border-transparent text-white/50 hover:border-white/20 hover:text-white/70"
                    }
                    `}
                    key={tab.id}
                    onClick={() =>
                      setActiveTab(tab.id as (typeof personaIds)[number])
                    }
                    type="button"
                  >
                    {tab.name}
                  </button>
                ))}
              </nav>
            </div>
          </div>
        </div>

        {/* Tab Content */}
        {currentPersona && (
          <div className="mx-auto max-w-5xl">
            <div className="mb-8 text-center md:mb-12">
              <h3 className="mb-4 font-bold text-2xl text-white md:text-4xl">
                {currentPersona.headline}
              </h3>
              <p className="text-base text-white/70 md:text-lg">
                {currentPersona.description}
              </p>
            </div>

            <div className="grid gap-6">
              {currentPersona.painPoints.map((point) => (
                <div
                  className="rounded-lg border border-white/10 bg-white/5 p-4 transition-colors hover:bg-white/[0.07] sm:p-6 md:p-8"
                  key={`pain-${point.problem.slice(0, 20)}`}
                >
                  <div className="mb-3">
                    <h4 className="mb-2 font-semibold text-base text-white md:text-lg">
                      {t("problemLabel")}:{" "}
                      {point.problem.split("\u2192")[0].trim()}
                    </h4>
                    {point.problem.includes("\u2192") && (
                      <p className="text-sm text-white/60">
                        {point.problem.split("\u2192")[1].trim()}
                      </p>
                    )}
                  </div>
                  <div className="border-white/10 border-t pt-3">
                    <p className="mb-1 font-medium text-[#FD105E] text-sm">
                      {t("solutionLabel")}:
                    </p>
                    <p className="text-white/80">{point.solution}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </section>
  );
}