"use client";

interface PaywallCardProps {
  /** "login" → prompt to sign in/join (guest). "subscribe" → prompt to upgrade (logged-in non-subscriber). */
  mode?: "login" | "subscribe";
  onLoginClick?: () => void;
  onSubscribeClick?: () => void;
}

const CONTENT = {
  login: {
    heading: "Unlock the full experience",
    subtext:
      "Sign in or create an account to continue reading this content and explore much more.",
    perksIntro: "Join our community to:",
    perks: [
      "Read full blogs and detailed Q&A discussions",
      "Ask questions and share your knowledge",
      "Connect with fellow seafarers and professionals",
      "Be part of an ad-free, knowledge-driven platform",
    ],
    closing:
      "Create your account in just a few seconds and continue where you left off.",
    cta: "Unlock this content !!",
  },
  subscribe: {
    heading: "Access Premium Content",
    subtext: "This content is available exclusively for premium members.",
    perksIntro: "Upgrade your plan to unlock:",
    perks: [
      "Premium blogs and expert insights",
      "Exclusive Q&A (SeaQA) and in-depth discussions",
      "Advanced knowledge shared by industry professionals",
      "A high-quality, ad-free reading experience",
    ],
    closing:
      "Subscribe now to gain full access and take your learning to the next level.",
    cta: "Subscribe now !!",
  },
} as const;

const PaywallCard = ({
  mode = "login",
  onLoginClick,
  onSubscribeClick,
}: PaywallCardProps) => {
  const isSubscribe = mode === "subscribe";
  const handlePrimary = isSubscribe ? onSubscribeClick : onLoginClick;
  const data = CONTENT[mode];

  return (
    <div className="w-full">
      {/* CTA section */}
      <div className="text-center pt-8 pb-10 px-4 bg-white">
        <h2
          className="font-bold text-[#111827] mb-3"
          style={{ fontSize: 26, lineHeight: "130%" }}
        >
          {data.heading}
        </h2>
        <p
          className="text-[#6b7280] mb-7 mx-auto"
          style={{ fontSize: 15, maxWidth: 460 }}
        >
          {data.subtext}
        </p>

        {/* Perks box */}
        <div
          className="mx-auto mb-8 text-left"
          style={{
            maxWidth: 460,
            border: "1px solid #E2E2E2",
            borderRadius: 14,
            padding: "20px 24px",
          }}
        >
          <p
            className="text-[#111827] font-semibold mb-4"
            style={{ fontSize: 14, lineHeight: "150%" }}
          >
            {data.perksIntro}
          </p>
          {data.perks.map((perk) => (
            <div key={perk} className="flex items-start gap-3 mb-4 last:mb-0">
              {/* Gold star-circle icon */}
              <div
                className="shrink-0 flex items-center justify-center"
                style={{
                  width: 26,
                  height: 26,
                  borderRadius: "50%",
                  border: "2px solid #F5B800",
                  color: "#F5B800",
                  fontSize: 14,
                  lineHeight: 1,
                }}
              >
                ✦
              </div>
              <p
                className="text-[#374151]"
                style={{ fontSize: 14, lineHeight: "150%" }}
              >
                {perk}
              </p>
            </div>
          ))}
        </div>

        <p
          className="text-[#6b7280] mb-8 mx-auto"
          style={{ fontSize: 14, maxWidth: 460 }}
        >
          {data.closing}
        </p>

        {/* Unlock button */}
        <button
          onClick={handlePrimary}
          className="font-semibold text-white transition-opacity hover:opacity-90 cursor-pointer"
          style={{
            background: "#08A1EE",
            borderRadius: 40,
            padding: "12px 36px",
            fontSize: 15,
          }}
        >
          {data.cta}
        </button>

        {!isSubscribe && (
          <p className="mt-4 text-sm text-[#9ca3af]">
            Already a member?{" "}
            <button
              onClick={onLoginClick}
              className="text-[#3b82f6] hover:underline font-medium cursor-pointer"
            >
              Log in
            </button>
          </p>
        )}
      </div>
    </div>
  );
};

export default PaywallCard;